/* Layout styles: Screen, columns, and content structure */

/* DM Screen Container */
.dm-screen {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background-color: transparent;
}

/* Title Banner */
.title-banner {
    background-color: #58180d; /* D&D red */
    color: white;
    padding: 8px 0;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.title-banner h1 {
    font-size: 1.5rem;
    margin: 0;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Screen Content Layout */
.screen-content {
    display: flex;
    gap: 10px;
    padding: 10px;
    overflow: visible;
    align-items: flex-start; /* Prevent columns from stretching */
    background-color: transparent; /* Ensure transparency for texture to show */
}

/* Column layouts */
.column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    align-self: flex-start; /* Don't stretch to match other columns */
}

#left-column {
    flex: 3; /* 30% */
}

#middle-column {
    flex: 3.5; /* 35% */
}

#right-column {
    flex: 3.5; /* 35% */
}

/* iFrame wrapper for embedded content */
.iframe-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0 0 8px 8px;
    position: relative;
}

.iframe-wrapper iframe {
    width: 100%;
    border: none;
    height: 100%;
    min-height: 350px;
    position: relative;
    z-index: 1;
}

/* Special tall panel iframe sizing */
.panel.tall-panel .panel-content {
    padding: 0;
    height: 750px;
}

.panel.tall-panel .iframe-wrapper {
    height: 100%;
}

.panel.tall-panel .iframe-wrapper iframe {
    height: 100%;
}