#screenOverlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: #f5f0e8;
    background: #07090d;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    opacity: 1;
    transition: opacity 360ms ease, background 420ms ease;
    overflow: hidden;
}

.screen-overlay-panel {
    position: absolute;
    left: clamp(18px, 3.5vw, 56px);
    bottom: clamp(18px, 3.5vw, 52px);
    z-index: 3;
    width: min(520px, 74vw);
    text-align: left;
    padding: 0;
    background: transparent;
    border: 0;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72);
    transition: transform 520ms ease, opacity 420ms ease;
}

.screen-overlay-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: none;
    overflow: hidden;
    background: #08090d;
}

.screen-overlay-media.has-media {
    display: block;
}

.screen-overlay-slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transform: scale(1.03);
    transition: opacity 1600ms ease;
}

.screen-overlay-slide.is-active {
    opacity: 1;
    animation: hilma-slide-kenburns 15000ms ease-out both;
}

#screenOverlay.screen-overlay-panorama .screen-overlay-slide {
    background-position: 0 50%;
    background-repeat: repeat-x;
    background-size: auto 100%;
    transform: scale(1);
    will-change: background-position;
    transition: opacity 900ms ease;
}

#screenOverlay.screen-overlay-panorama .screen-overlay-slide.is-active {
    animation: hilma-panorama-pan 620000ms linear infinite;
}

.screen-overlay-video,
.screen-overlay-finale {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.screen-overlay-video {
    object-fit: cover;
    background: #05070a;
}

.screen-overlay-finale {
    place-items: center;
    background:
        radial-gradient(circle at 50% 50%, rgba(238, 201, 126, 0.18), transparent 44%),
        linear-gradient(135deg, #08090d 0%, #1c1720 58%, #08090d 100%);
}

.screen-finale-art {
    position: relative;
    width: min(46vw, 620px);
    max-height: 74vh;
    aspect-ratio: 1 / 1.24;
    display: grid;
    place-items: center;
    padding: clamp(14px, 2vw, 26px);
    background:
        linear-gradient(145deg, rgba(247, 226, 179, 0.96), rgba(151, 109, 53, 0.92)),
        #c99a56;
    box-shadow:
        0 38px 120px rgba(0, 0, 0, 0.62),
        inset 0 0 0 1px rgba(255, 255, 255, 0.36),
        inset 0 0 0 10px rgba(88, 47, 18, 0.34);
    transform: translateY(22px) scale(0.94);
    opacity: 0;
}

.screen-finale-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: rgba(255, 250, 237, 0.95);
    box-shadow: inset 0 0 28px rgba(61, 34, 15, 0.12);
}

.screen-finale-art::before,
.screen-finale-art::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.screen-finale-art::before {
    inset: -9%;
    background:
        radial-gradient(circle at 50% 44%, rgba(255, 231, 171, 0.62), transparent 27%),
        conic-gradient(from 120deg, transparent, rgba(255, 213, 122, 0.32), transparent 28%);
    filter: blur(20px);
    opacity: 0;
    z-index: -1;
}

.screen-finale-art::after {
    inset: 0;
    background: linear-gradient(100deg, transparent 0 34%, rgba(255, 255, 255, 0.62) 45%, transparent 56% 100%);
    transform: translateX(-120%);
    mix-blend-mode: screen;
}

.screen-overlay-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(4, 6, 10, 0.18), transparent 28%, rgba(4, 6, 10, 0.42)),
        radial-gradient(circle at 50% 44%, transparent 0 52%, rgba(0, 0, 0, 0.42) 100%);
}

.screen-overlay-watermark {
    position: absolute;
    right: clamp(18px, 3vw, 42px);
    bottom: clamp(16px, 2.6vw, 36px);
    z-index: 4;
    width: clamp(92px, 10vw, 168px);
    max-height: 74px;
    object-fit: contain;
    opacity: 0.78;
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.58));
}

.screen-overlay-timer {
    position: absolute;
    left: clamp(20px, 3vw, 46px);
    top: clamp(18px, 2.8vw, 42px);
    z-index: 5;
    min-width: clamp(142px, 13vw, 230px);
    padding: clamp(10px, 1vw, 16px) clamp(16px, 1.6vw, 26px);
    border: 1px solid rgba(241, 201, 107, 0.62);
    border-radius: 12px;
    background:
        radial-gradient(circle at 22% 0%, rgba(241, 201, 107, 0.18), transparent 42%),
        rgba(5, 11, 14, 0.72);
    color: #fff2d0;
    font: 720 clamp(34px, 4.4vw, 76px)/0.95 Georgia, "Times New Roman", serif;
    letter-spacing: 0;
    text-align: center;
    text-shadow: 0 8px 28px rgba(0, 0, 0, 0.62);
    box-shadow:
        0 18px 58px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

.screen-arm-button {
    position: absolute;
    top: clamp(18px, 2.8vw, 38px);
    right: clamp(18px, 2.8vw, 38px);
    z-index: 6;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 228px;
    min-height: 64px;
    padding: 13px 18px;
    border: 1px solid rgba(244, 211, 145, 0.7);
    border-radius: 8px;
    background: rgba(8, 12, 15, 0.82);
    color: #f8ead0;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    cursor: pointer;
    pointer-events: auto;
}

.screen-arm-button[hidden] {
    display: none;
}

.screen-arm-button span {
    font-size: 17px;
    font-weight: 750;
    line-height: 1.1;
}

.screen-arm-button small {
    color: rgba(248, 234, 208, 0.68);
    font-size: 12px;
    line-height: 1.2;
}

.screen-overlay-panel h1 {
    margin: 0 0 8px;
    max-width: 12ch;
    color: #fff4dc;
    font: 760 clamp(38px, 5vw, 82px)/0.92 Georgia, "Times New Roman", serif;
    letter-spacing: 0;
}

.screen-overlay-subtitle,
.screen-overlay-status,
.screen-overlay-pose-status {
    margin: 8px 0 0;
    font-size: clamp(14px, 1.45vw, 21px);
    font-weight: 620;
    color: rgba(255, 244, 220, 0.86);
}

#screenOverlay.screen-overlay-compact {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px;
    background: rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
}

#screenOverlay.screen-overlay-compact .screen-overlay-panel {
    left: 24px;
    top: 24px;
    bottom: auto;
    width: 310px;
    padding: 13px 15px;
    background: rgba(5, 10, 13, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    backdrop-filter: blur(8px);
    text-align: left;
    text-shadow: none;
}

#screenOverlay.screen-overlay-compact h1 {
    max-width: none;
    font: 730 23px/1.05 Georgia, "Times New Roman", serif;
}

#screenOverlay.screen-overlay-compact .screen-overlay-subtitle {
    font-size: 15px;
}

#screenOverlay.screen-overlay-compact .screen-overlay-status,
#screenOverlay.screen-overlay-compact .screen-overlay-pose-status {
    font-size: 13px;
}

#screenOverlay.screen-overlay-transitioning {
    opacity: 0;
}

#screenOverlay.screen-overlay-signal-lost .screen-overlay-panel {
    border-color: rgba(255, 190, 92, 0.9);
    box-shadow: 0 0 0 2px rgba(255, 190, 92, 0.28);
}

#screenOverlay.screen-overlay-signal-lost .screen-overlay-pose-status {
    color: #ffd18a;
}

body.screen-mode-intro #screenOverlay.has-intro-video .screen-overlay-intro-video,
body.screen-mode-end #screenOverlay.has-reveal-video .screen-overlay-reveal-video,
body.screen-mode-end #screenOverlay:not(.has-reveal-video) .screen-overlay-finale {
    display: block;
}

body.screen-mode-end #screenOverlay:not(.has-reveal-video) .screen-overlay-finale {
    display: grid;
}

body.screen-mode-end #screenOverlay:not(.has-reveal-video) .screen-finale-art {
    animation: hilma-finale-art-in 1300ms cubic-bezier(0.2, 0.85, 0.18, 1) 180ms forwards;
}

body.screen-mode-end #screenOverlay:not(.has-reveal-video) .screen-finale-art::before {
    animation: hilma-finale-glow 2100ms ease 540ms forwards;
}

body.screen-mode-end #screenOverlay:not(.has-reveal-video) .screen-finale-art::after {
    animation: hilma-finale-sheen 1800ms ease 900ms forwards;
}

body.screen-mode-intro #container canvas,
body.screen-mode-waiting #container canvas,
body.screen-mode-waiting_umea #container canvas,
body.screen-mode-cover #container canvas,
body.screen-mode-end #container canvas {
    opacity: 0;
}

body.screen-mode-vr_clear #container canvas {
    filter: none;
    opacity: 1;
}

body.screen-unity-camera-mirror #container canvas {
    transform: scaleX(-1);
    transform-origin: center center;
}

body.screen-mode-vr_diffuse #container canvas {
    filter: blur(8px) contrast(0.75) brightness(0.65) grayscale(0.35);
}

body.screen-mode-vr_glitch #container canvas {
    filter: none;
    opacity: 1;
    animation: none;
}

body.screen-mode-vr_glitch.screen-unity-camera-mirror #container canvas {
    transform: scaleX(-1);
}

body.screen-mode-intro #screenOverlay {
    background:
        linear-gradient(120deg, rgba(12, 14, 18, 0.74), rgba(28, 23, 38, 0.54)),
        url("../../images/Hilma_portrait.jpg") center/cover;
}

body.screen-mode-waiting #screenOverlay,
body.screen-mode-waiting_umea #screenOverlay {
    background: #05070b;
}

body.screen-mode-cover #screenOverlay {
    background: linear-gradient(90deg, rgba(6, 8, 12, 0.52), rgba(6, 8, 12, 0.08));
}

body.screen-mode-cover #screenOverlay .screen-overlay-slide {
    background-color: #05070b;
    background-repeat: no-repeat;
    background-size: contain;
    transform: scale(1);
}

body.screen-mode-cover #screenOverlay .screen-overlay-slide.is-active {
    animation: hilma-cover-slide-drift 15000ms ease-out both;
}

body.screen-mode-waiting #screenOverlay .screen-overlay-panel,
body.screen-mode-waiting_umea #screenOverlay .screen-overlay-panel {
    opacity: 0;
    transform: translateY(10px);
}

body.screen-mode-cover #screenOverlay .screen-overlay-panel,
body.screen-mode-end #screenOverlay .screen-overlay-panel {
    opacity: 1;
}

/* Åskådarläget ska vara helt rent: den här panelen är intern status för
   spelledaren och ska aldrig projiceras, oavsett valt publikläge. */
#screenOverlay .screen-overlay-panel {
    opacity: 0 !important;
    transform: translateY(10px);
    pointer-events: none;
}

body.screen-mode-vr_diffuse #screenOverlay {
    background: rgba(0, 0, 0, 0.18);
}

body.screen-mode-vr_glitch #screenOverlay {
    overflow: hidden;
    background: rgba(0, 0, 0, 0.06);
}

body.screen-mode-vr_glitch #screenOverlay::before,
body.screen-mode-vr_glitch #screenOverlay::after {
    content: none;
    display: none;
    animation: none;
}

body.screen-mode-vr_glitch #screenOverlay::before {
    background: none;
    mix-blend-mode: normal;
}

body.screen-mode-vr_glitch #screenOverlay::after {
    background: none;
    mix-blend-mode: normal;
}

body.screen-mode-vr_glitch #screenOverlay .screen-overlay-panel {
    background: rgba(5, 10, 13, 0.28);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
}

body.screen-mode-vr_glitch #screenOverlay h1 {
    color: #fff4dc;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.72);
}

body.screen-mode-vr_clear #screenOverlay {
    background: rgba(0, 0, 0, 0.08);
}

body.screen-mode-end #screenOverlay {
    background:
        linear-gradient(135deg, rgba(12, 12, 14, 0.94), rgba(33, 28, 43, 0.86));
}

@keyframes hilma-slide-kenburns {
    from { transform: scale(1.03) translate3d(0, 0, 0); }
    to { transform: scale(1.095) translate3d(-1.6%, -1.2%, 0); }
}

@keyframes hilma-panorama-pan {
    from { background-position: 0 50%; }
    to { background-position: calc(-1 * var(--hilma-panorama-travel, 2800px)) 50%; }
}

@keyframes hilma-cover-slide-drift {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to { transform: scale(1.012) translate3d(-0.25%, -0.18%, 0); }
}

@keyframes hilma-finale-art-in {
    0% { opacity: 0; transform: translateY(26px) scale(0.9); filter: blur(8px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes hilma-finale-glow {
    0% { opacity: 0; transform: scale(0.9) rotate(0deg); }
    58% { opacity: 0.92; }
    100% { opacity: 0.44; transform: scale(1.12) rotate(16deg); }
}

@keyframes hilma-finale-sheen {
    0% { transform: translateX(-125%); opacity: 0; }
    28% { opacity: 0.9; }
    100% { transform: translateX(125%); opacity: 0; }
}

.director-mode {
    --director-bg: #070b0d;
    --director-ink: #edf2ec;
    --director-muted: #b9b0a0;
    --director-panel: rgba(12, 19, 23, 0.9);
    --director-panel-deep: rgba(8, 13, 16, 0.96);
    --director-border: rgba(194, 219, 229, 0.18);
    --director-border-strong: rgba(220, 177, 102, 0.42);
    --director-gold: #d7aa57;
    --director-gold-soft: #f2cf88;
    --director-blue: #72c7ff;
    --director-blue-deep: #122634;
    --director-red: #a64843;
    min-height: 100%;
    width: 100%;
    background:
        linear-gradient(115deg, rgba(15, 24, 29, 0.86), rgba(6, 9, 11, 0.96) 48%, #050606),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 22px),
        var(--director-bg);
    color: var(--director-ink);
    font-family: Arial, sans-serif;
    overflow: auto;
}

.director-shell {
    width: min(1360px, calc(100vw - 52px));
    margin: 0 auto;
    padding: 28px 0 36px;
}

.director-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 28px;
    margin-bottom: 26px;
}

.director-brand {
    display: flex;
    align-items: center;
    gap: 18px;
}

.director-monogram {
    display: grid;
    place-items: center;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(215, 170, 87, 0.72);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(215, 170, 87, 0.18), rgba(8, 13, 16, 0.96)),
        #0b1013;
    color: var(--director-gold-soft);
    font: 700 38px/1 Georgia, "Times New Roman", serif;
    box-shadow: inset 0 0 0 1px rgba(255, 240, 194, 0.09), 0 16px 36px rgba(0, 0, 0, 0.34);
}

.director-header h1 {
    margin: 0;
    font: 700 44px/0.98 Georgia, "Times New Roman", serif;
    letter-spacing: 0;
    color: #f3eadc;
    text-shadow: 0 12px 26px rgba(0, 0, 0, 0.34);
}

.director-subtitle {
    margin: 8px 0 0;
    font-size: 18px;
    color: var(--director-gold-soft);
    font-weight: 500;
}

.director-status {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: 16px;
}

.director-status > span {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 11px 18px;
    background: linear-gradient(180deg, rgba(27, 38, 45, 0.92), rgba(15, 22, 27, 0.92));
    border: 1px solid rgba(185, 211, 223, 0.22);
    border-radius: 6px;
    color: #eee8dc;
    font-size: 16px;
    font-weight: 500;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 28px rgba(0, 0, 0, 0.18);
}

.director-status > span::before {
    content: "";
    width: 13px;
    height: 13px;
    margin-right: 12px;
    border-radius: 999px;
    background: var(--director-gold);
    box-shadow: 0 0 16px rgba(215, 170, 87, 0.5);
}

.director-status > [data-status-kind="connection"]::before,
.director-status > [data-status-kind="player"]::before {
    background: #65d58d;
    box-shadow: 0 0 16px rgba(101, 213, 141, 0.5);
}

.director-status > [data-status-kind="hint"]::before {
    background: #80cfff;
    box-shadow: 0 0 16px rgba(128, 207, 255, 0.48);
}

.director-status > [data-status-kind="screen-ready"][data-screen-ready="ready"]::before {
    background: #65d58d;
    box-shadow: 0 0 16px rgba(101, 213, 141, 0.5);
}

.director-status > [data-status-kind="screen-ready"][data-screen-ready="attention"]::before {
    background: #f1c25f;
    box-shadow: 0 0 16px rgba(241, 194, 95, 0.5);
}

.director-status > [data-status-kind="screen-ready"][data-screen-ready="offline"]::before {
    background: #a64843;
    box-shadow: 0 0 16px rgba(166, 72, 67, 0.42);
}

.director-status-actions {
    display: flex;
    flex: 1 1 520px;
    justify-content: flex-end;
    gap: 10px;
    min-height: 48px;
}

.director-status-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 132px;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid rgba(177, 204, 218, 0.28);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(30, 44, 53, 0.95), rgba(16, 24, 29, 0.98));
    color: #f4ecdf;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 26px rgba(0, 0, 0, 0.2);
    transition: transform 130ms ease, border-color 180ms ease, background 180ms ease;
}

.director-status-actions button::before {
    display: inline-grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    color: var(--director-gold);
    font-size: 18px;
    line-height: 1;
}

.director-status-actions button[data-icon="play"]::before { content: "▷"; }
.director-status-actions button[data-icon="signal"]::before { content: "◌"; }
.director-status-actions button[data-icon="reset"]::before { content: "↻"; }
.director-status-actions button[data-icon="viewer"]::before { content: "◉"; }

.director-status-actions button:hover {
    transform: translateY(-1px);
    border-color: rgba(215, 170, 87, 0.55);
    background: linear-gradient(180deg, rgba(39, 57, 68, 0.98), rgba(19, 31, 38, 0.98));
}

.director-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.34fr) minmax(360px, 0.78fr);
    gap: 18px;
}

.director-section,
.director-monitor {
    position: relative;
    padding: 24px;
    background:
        linear-gradient(150deg, rgba(19, 31, 38, 0.78), rgba(8, 12, 14, 0.96)),
        var(--director-panel);
    border: 1px solid var(--director-border);
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.director-section::after,
.director-monitor::after {
    content: "";
    position: absolute;
    inset: 1px;
    pointer-events: none;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.025);
}

.director-section h2,
.director-monitor h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    font: 700 20px/1.1 Georgia, "Times New Roman", serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #f1d18b;
}

.director-section h2 span,
.director-monitor h2 span {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(215, 170, 87, 0.58);
    border-radius: 4px;
    color: var(--director-gold-soft);
    font-size: 16px;
    background: rgba(215, 170, 87, 0.1);
}

.director-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(170px, 1fr));
    gap: 14px;
}

.director-actions-views {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
}

.director-actions-player {
    grid-template-columns: 1fr;
}

.director-actions button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 94px;
    padding: 18px;
    border: 1px solid rgba(177, 204, 218, 0.26);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(30, 44, 53, 0.95), rgba(16, 24, 29, 0.98)),
        #121d23;
    color: #f4ecdf;
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 36px rgba(0, 0, 0, 0.22);
    transition: transform 130ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.director-actions button span {
    min-width: 0;
    white-space: nowrap;
}

.director-actions button::before {
    display: inline-grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 7px;
    border: 1px solid rgba(215, 170, 87, 0.34);
    background: rgba(215, 170, 87, 0.06);
    color: var(--director-gold);
    font-size: 30px;
    line-height: 1;
}

.director-actions button[data-icon="play"]::before { content: "▷"; }
.director-actions button[data-icon="hand"]::before { content: "▥"; }
.director-actions button[data-icon="image"]::before { content: "▧"; }
.director-actions button[data-icon="viewer"]::before { content: "◉"; }
.director-actions button[data-icon="signal"]::before { content: "◌"; }
.director-actions button[data-icon="seven"]::before { content: "7"; }
.director-actions button[data-icon="glitch"]::before { content: "▨"; }
.director-actions button[data-icon="stable"]::before { content: "≈"; }
.director-actions button[data-icon="power"]::before { content: "◯"; }
.director-actions button[data-icon="hint"]::before { content: "◌"; }
.director-actions button[data-icon="reset"]::before { content: "↻"; }

.director-actions button:hover,
.director-monitor-toggle:hover {
    transform: translateY(-1px);
}

.director-actions button:hover {
    background:
        linear-gradient(180deg, rgba(39, 57, 68, 0.98), rgba(19, 31, 38, 0.98)),
        #172831;
    border-color: rgba(215, 170, 87, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 20px 42px rgba(0, 0, 0, 0.28);
}

.director-actions button.is-active {
    color: #eaf8ff;
    background:
        linear-gradient(180deg, rgba(35, 70, 90, 0.98), rgba(17, 36, 48, 0.98)),
        var(--director-blue-deep);
    border-color: rgba(114, 199, 255, 0.82);
    box-shadow: inset 0 0 0 1px rgba(181, 226, 255, 0.35), 0 0 0 1px rgba(114, 199, 255, 0.28), 0 22px 44px rgba(0, 0, 0, 0.34);
}

.director-actions button.is-active::before {
    border-color: rgba(114, 199, 255, 0.78);
    background: rgba(114, 199, 255, 0.12);
    color: #aee1ff;
}

.director-actions .director-danger {
    background:
        linear-gradient(180deg, rgba(120, 54, 51, 0.98), rgba(78, 31, 31, 0.98)),
        var(--director-red);
    border-color: rgba(255, 121, 111, 0.48);
}

.director-actions .director-danger::before {
    color: #ff9f96;
    border-color: rgba(255, 121, 111, 0.4);
    background: rgba(255, 121, 111, 0.08);
}

.director-actions .director-danger:hover {
    background:
        linear-gradient(180deg, rgba(141, 61, 57, 0.98), rgba(92, 35, 35, 0.98)),
        #8c403b;
    border-color: rgba(255, 151, 143, 0.7);
}

.director-monitor-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 0 26px;
    border: 1px solid rgba(114, 199, 255, 0.72);
    border-radius: 6px;
    background: rgba(10, 20, 27, 0.66);
    color: #9edcff;
    font-size: 19px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(114, 199, 255, 0.12), 0 0 0 1px rgba(114, 199, 255, 0.08);
    transition: transform 130ms ease, box-shadow 180ms ease, background 180ms ease;
}

.director-monitor-toggle::before {
    content: "▱";
    color: var(--director-blue);
    font-size: 24px;
    line-height: 1;
}

.director-monitor-toggle:hover {
    background: rgba(15, 34, 47, 0.82);
    box-shadow: inset 0 0 0 1px rgba(114, 199, 255, 0.2), 0 14px 34px rgba(35, 151, 220, 0.18);
}

.director-monitor {
    display: none;
    margin-top: 22px;
    padding: 24px;
}

.director-monitor.is-open {
    display: block;
}

.director-monitor-topline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 18px;
}

.director-monitor-topline span {
    color: #d1c4ae;
    font-size: 14px;
    font-weight: 500;
}

.director-monitor iframe {
    display: block;
    width: 100%;
    height: min(58vh, 560px);
    border: 1px solid rgba(233, 219, 190, 0.2);
    border-radius: 8px;
    background: #05070a;
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.46);
}

.screen-preview-mode #container canvas {
    filter: none !important;
    opacity: 1 !important;
}

@keyframes hilma-canvas-glitch {
    0% { transform: translate3d(0, 0, 0); }
    14% { transform: translate3d(-2px, 1px, 0); }
    16% { transform: translate3d(3px, -1px, 0); }
    30% { transform: translate3d(0, 0, 0); }
    62% { transform: translate3d(2px, 0, 0); }
    64% { transform: translate3d(-3px, 1px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes hilma-canvas-glitch-mirrored {
    0% { transform: scaleX(-1) translate3d(0, 0, 0); }
    14% { transform: scaleX(-1) translate3d(-2px, 1px, 0); }
    16% { transform: scaleX(-1) translate3d(3px, -1px, 0); }
    30% { transform: scaleX(-1) translate3d(0, 0, 0); }
    62% { transform: scaleX(-1) translate3d(2px, 0, 0); }
    64% { transform: scaleX(-1) translate3d(-3px, 1px, 0); }
    100% { transform: scaleX(-1) translate3d(0, 0, 0); }
}

@keyframes hilma-glitch-slices {
    0% { transform: translate3d(0, 0, 0); opacity: 0.45; }
    12% { transform: translate3d(-28px, 0, 0); opacity: 0.82; }
    18% { transform: translate3d(22px, 0, 0); opacity: 0.58; }
    36% { transform: translate3d(0, 0, 0); opacity: 0.36; }
    54% { transform: translate3d(36px, 0, 0); opacity: 0.86; }
    58% { transform: translate3d(-14px, 0, 0); opacity: 0.62; }
    100% { transform: translate3d(0, 0, 0); opacity: 0.45; }
}

@keyframes hilma-glitch-chroma {
    0% { transform: translate3d(0, 0, 0); opacity: 0.38; }
    22% { transform: translate3d(8px, 0, 0); opacity: 0.55; }
    24% { transform: translate3d(-10px, 0, 0); opacity: 0.42; }
    70% { transform: translate3d(0, 0, 0); opacity: 0.3; }
    72% { transform: translate3d(14px, 0, 0); opacity: 0.6; }
    100% { transform: translate3d(0, 0, 0); opacity: 0.38; }
}

@media (max-width: 900px) {
    .director-layout,
    .director-actions-views {
        grid-template-columns: 1fr;
    }

    .director-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .director-header h1 {
        font-size: 36px;
    }

    .director-actions button {
        min-height: 82px;
    }

    .director-status-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .director-actions button span {
        white-space: normal;
    }
}

@media (min-width: 901px) and (max-height: 760px) {
    .director-shell {
        padding-top: 16px;
    }

    .director-header {
        margin-bottom: 16px;
    }

    .director-monogram {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        font-size: 34px;
    }

    .director-header h1 {
        font-size: 40px;
    }

    .director-subtitle {
        margin-top: 5px;
        font-size: 16px;
    }

    .director-status {
        margin-bottom: 14px;
    }

    .director-status > span {
        min-height: 42px;
        padding: 9px 16px;
        font-size: 14px;
    }

    .director-section,
    .director-monitor {
        padding: 18px 24px;
    }

    .director-section h2,
    .director-monitor h2 {
        margin-bottom: 14px;
        font-size: 19px;
    }

    .director-actions button {
        min-height: 78px;
        padding: 14px 18px;
    }

    .director-actions button::before {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 26px;
    }

    .director-monitor-toggle {
        min-height: 52px;
    }
}

.director-mode {
    --director-bg: #071014;
    --director-bg-2: #0b151a;
    --director-panel: rgba(12, 24, 29, 0.92);
    --director-panel-2: rgba(18, 31, 37, 0.88);
    --director-gold: #d6a94b;
    --director-gold-soft: #f1c96b;
    --director-gold-deep: #a9792b;
    --director-ink: #f4e7c7;
    --director-muted: #b9a98a;
    --director-dim: #7f8c8d;
    --director-blue: #67c7f7;
    --director-green: #54d77a;
    --director-red: #d96a5e;
    --director-purple: #8e5c8a;
    min-height: 100%;
    width: 100%;
    overflow: auto;
    background:
        radial-gradient(circle at 55% 36%, rgba(164, 119, 45, 0.16), transparent 34%),
        radial-gradient(circle at 12% 8%, rgba(103, 199, 247, 0.08), transparent 24%),
        linear-gradient(135deg, #071014 0%, #0b151a 45%, #05090c 100%);
    color: var(--director-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.director-mode::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.28;
    background:
        radial-gradient(circle at 8% 14%, transparent 0 54px, rgba(214, 169, 75, 0.2) 55px 56px, transparent 57px),
        radial-gradient(circle at 92% 84%, transparent 0 86px, rgba(214, 169, 75, 0.13) 87px 88px, transparent 89px),
        linear-gradient(115deg, transparent 0 27%, rgba(214, 169, 75, 0.12) 27.2%, transparent 27.5%),
        repeating-linear-gradient(90deg, rgba(244, 231, 199, 0.035) 0 1px, transparent 1px 76px),
        repeating-linear-gradient(0deg, rgba(244, 231, 199, 0.02) 0 1px, transparent 1px 76px);
    mask-image: radial-gradient(circle at 50% 36%, #000 0 62%, transparent 100%);
}

.director-shell {
    position: relative;
    z-index: 1;
    width: min(1820px, calc(100vw - 48px));
    min-height: 100vh;
    margin: 0 auto;
    padding: clamp(18px, 1.6vw, 28px) 0 28px;
    box-sizing: border-box;
}

.director-header {
    display: grid;
    grid-template-columns: minmax(480px, 0.54fr) minmax(720px, 1fr);
    gap: clamp(18px, 3vw, 54px);
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(214, 169, 75, 0.16);
}

.director-brand {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.director-monogram {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 86px;
    width: 86px;
    height: 86px;
    border: 1px solid rgba(241, 201, 107, 0.72);
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(241, 201, 107, 0.16), transparent 62%),
        rgba(8, 18, 22, 0.8);
    box-shadow:
        0 0 34px rgba(214, 169, 75, 0.14),
        inset 0 0 0 1px rgba(241, 201, 107, 0.08);
}

.director-monogram span,
.director-monogram::before,
.director-monogram::after {
    content: "";
    position: absolute;
    border: 1.6px solid var(--director-gold-soft);
}

.director-monogram::before {
    width: 40px;
    height: 54px;
    border-radius: 50% 50% 42% 42%;
    transform: rotate(45deg);
}

.director-monogram::after {
    width: 40px;
    height: 54px;
    border-radius: 50% 50% 42% 42%;
    transform: rotate(-45deg);
}

.director-monogram span {
    width: 28px;
    height: 58px;
    border-radius: 50% 50% 42% 42%;
}

.director-header h1 {
    margin: 0;
    color: var(--director-gold-soft);
    font: 560 clamp(28px, 2vw, 38px)/1.04 Georgia, "Times New Roman", serif;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 8px 30px rgba(214, 169, 75, 0.12);
}

.director-subtitle {
    margin: 10px 0 0;
    color: var(--director-gold-soft);
    font-size: clamp(14px, 1vw, 18px);
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.director-status {
    display: grid;
    grid-template-columns: repeat(6, minmax(104px, 1fr));
    gap: 0;
    align-items: stretch;
    min-height: 88px;
    padding: 12px 12px;
    box-sizing: border-box;
    border: 1px solid rgba(244, 231, 199, 0.13);
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(18, 31, 37, 0.82), rgba(6, 13, 16, 0.74)),
        rgba(12, 24, 29, 0.88);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.director-status-card {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    column-gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 6px 12px;
    border-right: 1px solid rgba(244, 231, 199, 0.08);
}

.director-status-card:last-child {
    border-right: 0;
}

.director-status-icon {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(214, 169, 75, 0.14);
    color: var(--director-gold-soft);
}

.director-status-icon::before {
    font-size: 18px;
    line-height: 1;
}

.director-status-card-connection .director-status-icon {
    background: rgba(84, 215, 122, 0.14);
    color: var(--director-green);
    box-shadow: 0 0 22px rgba(84, 215, 122, 0.18);
}

.director-status-card-screen .director-status-icon {
    background: rgba(217, 106, 94, 0.14);
    color: var(--director-red);
}

.director-status-card-hint .director-status-icon {
    background: rgba(103, 199, 247, 0.13);
    color: var(--director-blue);
}

.director-status-card-time .director-status-icon {
    background: rgba(142, 92, 138, 0.2);
    color: #e5bedf;
}

.director-status-card-connection .director-status-icon::before { content: "●"; }
.director-status-card-player .director-status-icon::before { content: "♟"; }
.director-status-card-mode .director-status-icon::before { content: "✦"; }
.director-status-card-screen .director-status-icon::before { content: "▧"; }
.director-status-card-hint .director-status-icon::before { content: "✥"; }
.director-status-card-time .director-status-icon::before { content: "◷"; }

.director-status-label {
    align-self: end;
    color: var(--director-ink);
    font-size: 14px;
    line-height: 1.15;
}

.director-status-card strong {
    align-self: start;
    min-width: 0;
    overflow: hidden;
    color: rgba(244, 231, 199, 0.82);
    font-size: 14px;
    font-weight: 520;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.director-status-card [data-status-kind="screen-ready"][data-screen-ready="ready"] {
    color: var(--director-green);
}

.director-status-card [data-status-kind="screen-ready"][data-screen-ready="offline"] {
    color: #f1a199;
}

.director-status-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(190px, 1fr));
    gap: 20px;
    width: min(1160px, 100%);
    min-height: 58px;
    margin: 12px auto 18px;
}

.director-status-actions button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 58px;
    padding: 0 24px;
    border: 1px solid rgba(244, 231, 199, 0.14);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(18, 31, 37, 0.94), rgba(7, 17, 21, 0.96));
    color: var(--director-ink);
    font-size: 17px;
    font-weight: 650;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 40px rgba(0, 0, 0, 0.2);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.director-status-actions button::before {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: currentColor;
    font-size: 24px;
    line-height: 1;
}

.director-status-actions button[data-icon="play"]::before { content: "▷"; }
.director-status-actions button[data-icon="signal"]::before { content: "≋"; }
.director-status-actions button[data-icon="reset"]::before { content: "↻"; }
.director-status-actions button[data-icon="viewer"]::before { content: "▱"; }

.director-status-actions .director-quick-primary {
    border-color: rgba(241, 201, 107, 0.78);
    background: linear-gradient(180deg, #f1c96b, #d6a94b);
    color: #14100a;
    box-shadow: 0 0 34px rgba(214, 169, 75, 0.28), 0 18px 44px rgba(0, 0, 0, 0.26);
}

.director-status-actions .director-quick-hint {
    color: #f1d6ee;
    border-color: rgba(142, 92, 138, 0.45);
}

.director-status-actions .director-quick-reset {
    color: #a9ddff;
    border-color: rgba(103, 199, 247, 0.28);
}

.director-status-actions .director-quick-audience {
    border-color: rgba(214, 169, 75, 0.34);
}

.director-status-actions button:hover,
.director-monitor-toggle:hover,
.director-actions button:hover {
    transform: translateY(-2px);
    border-color: rgba(241, 201, 107, 0.62);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 22px 54px rgba(0, 0, 0, 0.3),
        0 0 24px rgba(214, 169, 75, 0.14);
}

.director-status-actions button:focus-visible,
.director-monitor-toggle:focus-visible,
.director-actions button:focus-visible {
    outline: 2px solid var(--director-blue);
    outline-offset: 3px;
}

.director-layout {
    display: grid;
    grid-template-columns: minmax(420px, 0.75fr) minmax(620px, 1.25fr);
    gap: 20px;
    align-items: stretch;
}

.director-left-column {
    display: grid;
    gap: 20px;
    align-content: start;
}

.director-section,
.director-monitor {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border: 1px solid rgba(214, 169, 75, 0.25);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(18, 31, 37, 0.88), rgba(8, 16, 20, 0.94)),
        var(--director-panel);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.director-section::before,
.director-monitor::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 20%, rgba(214, 169, 75, 0.08), transparent 30%),
        linear-gradient(135deg, rgba(244, 231, 199, 0.035), transparent 32%);
}

.director-section > *,
.director-monitor > * {
    position: relative;
    z-index: 1;
}

.director-section-heading,
.director-monitor-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.director-section-heading {
    justify-content: flex-start;
}

.director-section-heading h2 {
    margin: 0;
    color: var(--director-gold-soft);
    font: 540 24px/1.05 Georgia, "Times New Roman", serif;
    letter-spacing: 0.1em;
}

.director-section-heading p {
    margin: 5px 0 0;
    color: rgba(244, 231, 199, 0.78);
    font-size: 15px;
}

.director-section-icon {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(214, 169, 75, 0.18);
    border-radius: 7px;
    background: rgba(214, 169, 75, 0.07);
    color: var(--director-gold-soft);
}

.director-section-icon::before {
    font-size: 26px;
    line-height: 1;
}

.director-section-icon-screen::before { content: "▭"; }
.director-section-icon-player::before { content: "♙"; }
.director-section-icon-vr::before { content: "▰"; }

.director-actions {
    display: grid;
    gap: 12px;
}

.director-actions-views {
    grid-template-columns: repeat(3, minmax(142px, 1fr));
}

.director-actions-player {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.director-actions button {
    position: relative;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background:
        radial-gradient(circle at 52% 44%, rgba(214, 169, 75, 0.09), transparent 28%),
        linear-gradient(135deg, rgba(20, 35, 41, 0.95), rgba(8, 16, 20, 0.95));
    color: var(--director-ink);
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.director-mode-card {
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: end;
    min-height: clamp(104px, 7.2vw, 126px);
    padding: 14px;
    overflow: hidden;
    text-align: left;
}

.director-actions .director-mode-card::before {
    content: "";
    position: absolute;
    inset: 0;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    flex: none;
    opacity: 0.72;
    color: transparent;
    background:
        radial-gradient(circle at 50% 48%, transparent 0 34px, rgba(241, 201, 107, 0.62) 35px 36px, transparent 37px),
        radial-gradient(circle at 50% 48%, transparent 0 72px, rgba(241, 201, 107, 0.18) 73px 74px, transparent 75px),
        linear-gradient(120deg, transparent 47%, rgba(241, 201, 107, 0.17) 48%, transparent 49%),
        repeating-linear-gradient(30deg, rgba(241, 201, 107, 0.07) 0 1px, transparent 1px 38px);
}

.director-mode-card-intro { background-color: #09202a; }
.director-mode-card-waiting_umea { background-color: #0c2a20; }
.director-mode-card-cover {
    background:
        linear-gradient(135deg, rgba(50, 37, 63, 0.78), rgba(17, 28, 34, 0.94)),
        url("/images/Spelomslagsbild/Spelomslag.png") center/cover;
}
.director-mode-card-vr_clear { background-color: #21182c; }
.director-mode-card-vr_diffuse { background-color: #0d2930; }
.director-mode-card-vr_glitch { background-color: #0a2b2b; }
.director-mode-card-end { background-color: #2c2110; }

.director-card-orbit {
    position: absolute;
    inset: 14px;
    opacity: 0.2;
    border: 1px solid rgba(241, 201, 107, 0.38);
    border-radius: 50%;
    transform: scaleX(1.42);
}

.director-card-icon {
    position: absolute;
    left: 50%;
    top: 44%;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(241, 201, 107, 0.82);
    border-radius: 999px;
    background: rgba(5, 12, 15, 0.72);
    color: var(--director-gold-soft);
    transform: translate(-50%, -50%);
}

.director-card-icon::before {
    font-size: 28px;
    line-height: 1;
}

.director-mode-card[data-icon="play"] .director-card-icon::before { content: "▶"; }
.director-mode-card[data-icon="hand"] .director-card-icon::before { content: "Ⅱ"; }
.director-mode-card[data-icon="image"] .director-card-icon::before { content: "▦"; }
.director-mode-card[data-icon="viewer"] .director-card-icon::before { content: "⊙"; }
.director-mode-card[data-icon="signal"] .director-card-icon::before { content: "◌"; }
.director-mode-card[data-icon="stable"] .director-card-icon::before { content: "≈"; }
.director-mode-card[data-icon="power"] .director-card-icon::before { content: "✧"; }

.director-card-label {
    position: absolute;
    left: 16px;
    right: 44px;
    bottom: 14px;
    z-index: 1;
    overflow: hidden;
    font-size: 17px;
    font-weight: 680;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.director-card-key {
    position: absolute;
    right: 12px;
    top: 10px;
    color: rgba(244, 231, 199, 0.44);
    font-size: 12px;
    font-weight: 700;
}

.director-mode-card.is-active {
    border-color: var(--director-gold-soft);
    box-shadow:
        0 0 0 1px rgba(241, 201, 107, 0.4),
        0 0 28px rgba(241, 201, 107, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.director-mode-card.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 13px solid var(--director-gold-soft);
    transform: translateX(-50%);
}

.director-actions-player button {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-height: 104px;
    padding: 16px;
    text-align: left;
}

.director-actions .director-player-card::before {
    content: none;
}

.director-player-card > span:last-child {
    min-width: 0;
    white-space: normal;
}

.director-player-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(214, 169, 75, 0.08);
    color: var(--director-gold-soft);
}

.director-player-icon::before {
    font-size: 26px;
}

.director-player-card[data-icon="hint"] .director-player-icon::before { content: "◌"; }
.director-player-card[data-icon="reset"] .director-player-icon::before { content: "↻"; }

.director-player-card strong {
    display: block;
    color: var(--director-ink);
    font-size: 16px;
    line-height: 1.15;
}

.director-player-card small {
    display: block;
    margin-top: 8px;
    color: rgba(244, 231, 199, 0.68);
    font-size: 14px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.director-actions .director-danger {
    border-color: rgba(217, 106, 94, 0.38);
    background:
        linear-gradient(135deg, rgba(92, 30, 32, 0.88), rgba(35, 15, 17, 0.94));
}

.director-actions .director-danger .director-player-icon {
    color: #ff978d;
    background: rgba(217, 106, 94, 0.12);
}

.director-monitor {
    display: flex;
    flex-direction: column;
    min-height: min(64vh, 760px);
    padding: 18px;
}

.director-monitor-topline {
    margin-bottom: 18px;
}

.director-monitor-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 20px;
    border: 1px solid rgba(244, 231, 199, 0.12);
    border-radius: 8px;
    background: rgba(8, 18, 22, 0.72);
    color: rgba(244, 231, 199, 0.86);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.director-monitor-toggle::before {
    content: "↗";
    color: var(--director-blue);
    font-size: 22px;
}

.director-monitor-frame-wrap {
    position: relative;
    flex: 1;
    min-height: 380px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(214, 169, 75, 0.32);
    border-radius: 12px;
    background:
        radial-gradient(circle at 55% 48%, rgba(214, 169, 75, 0.16), transparent 35%),
        linear-gradient(135deg, #10191d, #040709);
    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(103, 199, 247, 0.08);
}

.director-monitor iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #05070a;
}

.director-monitor-frame-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(2, 6, 8, 0.36), transparent 14%, transparent 86%, rgba(2, 6, 8, 0.36)),
        linear-gradient(180deg, rgba(2, 6, 8, 0.28), transparent 18%, transparent 82%, rgba(2, 6, 8, 0.34));
}

.director-monitor-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding: 30px;
    color: var(--director-muted);
    text-align: center;
    background:
        radial-gradient(circle at 50% 44%, rgba(214, 169, 75, 0.16), transparent 28%),
        linear-gradient(135deg, rgba(12, 24, 29, 0.96), rgba(5, 10, 12, 0.98));
    pointer-events: none;
    z-index: 2;
}

.director-monitor.has-player-signal .director-monitor-placeholder {
    display: none;
}

.director-monitor-placeholder span {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border: 1px solid rgba(241, 201, 107, 0.34);
    border-radius: 999px;
    color: var(--director-gold-soft);
}

.director-monitor-placeholder span::before {
    content: "▰";
    font-size: 38px;
}

.director-monitor-placeholder strong {
    color: var(--director-ink);
    font: 540 28px/1.05 Georgia, "Times New Roman", serif;
}

.director-monitor-placeholder small {
    max-width: 340px;
    color: rgba(244, 231, 199, 0.68);
    font-size: 15px;
}

@media (max-width: 1100px) {
    .director-header {
        grid-template-columns: 1fr;
    }

    .director-status {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }

    .director-layout {
        grid-template-columns: 1fr;
    }

    .director-monitor {
        order: -1;
    }
}

@media (max-width: 900px) {
    .director-shell {
        width: min(100% - 28px, 760px);
        padding-top: 16px;
    }

    .director-header h1 {
        white-space: normal;
        font-size: 28px;
    }

    .director-monogram {
        flex-basis: 74px;
        width: 74px;
        height: 74px;
    }

    .director-status,
    .director-status-actions,
    .director-actions-views,
    .director-actions-player {
        grid-template-columns: 1fr;
    }

    .director-status-card {
        border-right: 0;
        border-bottom: 1px solid rgba(244, 231, 199, 0.08);
    }

    .director-status-card:last-child {
        border-bottom: 0;
    }

    .director-monitor-frame-wrap {
        min-height: 260px;
    }
}

.director-mode {
    --director-texture:
        radial-gradient(circle at 18% 22%, rgba(241, 201, 107, 0.13), transparent 24%),
        radial-gradient(circle at 78% 18%, rgba(103, 199, 247, 0.08), transparent 28%),
        linear-gradient(135deg, rgba(244, 231, 199, 0.028) 0 1px, transparent 1px 100%),
        repeating-linear-gradient(120deg, rgba(241, 201, 107, 0.055) 0 1px, transparent 1px 54px);
}

.director-status-actions {
    display: grid;
    grid-template-columns: minmax(190px, 0.3fr) minmax(760px, 1fr);
    gap: 16px;
    width: 100%;
    margin: 10px 0 18px;
}

.director-time-display {
    display: grid;
    align-content: center;
    min-height: 72px;
    padding: 10px 18px;
    border: 1px solid rgba(241, 201, 107, 0.38);
    border-radius: 12px;
    background:
        radial-gradient(circle at 22% 0%, rgba(241, 201, 107, 0.24), transparent 48%),
        linear-gradient(135deg, rgba(18, 31, 37, 0.96), rgba(7, 17, 21, 0.98));
    box-shadow:
        0 20px 56px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.director-time-display span {
    color: var(--director-muted);
    font-size: 12px;
    font-weight: 780;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.director-time-display strong {
    margin-top: 2px;
    color: #fff2d0;
    font: 660 clamp(38px, 3.2vw, 62px)/0.95 Georgia, "Times New Roman", serif;
    letter-spacing: 0;
    text-shadow: 0 0 24px rgba(241, 201, 107, 0.18);
}

.director-quick-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(112px, 1fr));
    gap: 10px;
}

.director-status-actions button.director-quick {
    min-width: 0;
    min-height: 72px;
    flex-direction: column;
    gap: 7px;
    padding: 9px 10px;
    border-radius: 12px;
    background:
        var(--director-texture),
        linear-gradient(180deg, rgba(15, 27, 32, 0.96), rgba(6, 14, 17, 0.98));
    color: var(--director-ink);
    font-size: clamp(12px, 0.92vw, 15px);
    line-height: 1.08;
    white-space: normal;
}

.director-status-actions button.director-quick::before {
    content: none;
}

.director-status-actions .director-quick-icon,
.director-monitor-toggle span[aria-hidden="true"] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--director-gold-soft);
}

.director-status-actions .director-quick-icon svg,
.director-monitor-toggle svg,
.director-card-icon svg {
    width: 100%;
    height: 100%;
}

.director-status-actions .director-quick-primary {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.28), transparent 42%),
        linear-gradient(180deg, #f1c96b, #d6a94b 58%, #b9822f);
    color: #130e07;
}

.director-status-actions .director-quick-primary .director-quick-icon {
    color: #171006;
}

.director-status-actions .director-quick-hint,
.director-status-actions button[data-hint-state="timer"].is-active {
    border-color: rgba(142, 92, 138, 0.76);
    color: #f4d7f0;
}

.director-status-actions .director-danger {
    border-color: rgba(217, 106, 94, 0.5);
    background:
        radial-gradient(circle at 50% 0%, rgba(217, 106, 94, 0.18), transparent 44%),
        linear-gradient(180deg, rgba(69, 28, 30, 0.96), rgba(25, 12, 14, 0.98));
    color: #ffd8d2;
}

.director-status-actions .director-danger .director-quick-icon {
    color: #ff9f96;
}

.director-status-actions button.is-active,
.director-monitor-timer-toggle.is-active {
    border-color: var(--director-gold-soft);
    box-shadow:
        0 0 0 1px rgba(241, 201, 107, 0.36),
        0 0 28px rgba(241, 201, 107, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.director-status-actions button.is-active::after,
.director-monitor-timer-toggle.is-active::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--director-gold-soft);
    box-shadow: 0 0 16px rgba(241, 201, 107, 0.82);
}

.director-layout {
    grid-template-columns: minmax(360px, 0.62fr) minmax(680px, 1.38fr);
    align-items: stretch;
}

.director-left-column {
    min-height: 0;
}

.director-actions-views {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
}

.director-mode-card {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    align-items: center;
    min-height: 76px;
    padding: 11px 14px;
    background:
        var(--director-texture),
        linear-gradient(135deg, rgba(20, 35, 41, 0.95), rgba(8, 16, 20, 0.95));
}

.director-actions .director-mode-card::before,
.director-card-orbit {
    content: none;
}

.director-card-icon {
    position: static;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    transform: none;
}

.director-card-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.director-card-label {
    position: static;
    overflow: hidden;
    color: var(--director-ink);
    font-size: 18px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.director-card-key {
    position: static;
    color: rgba(244, 231, 199, 0.48);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.director-mode-card.is-active::after {
    left: auto;
    right: 14px;
    bottom: 50%;
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 999px;
    background: var(--director-gold-soft);
    transform: translateY(50%);
    box-shadow: 0 0 18px rgba(241, 201, 107, 0.78);
}

.director-mode-card-intro,
.director-mode-card-waiting_umea,
.director-mode-card-cover,
.director-mode-card-vr_clear,
.director-mode-card-vr_diffuse,
.director-mode-card-vr_glitch,
.director-mode-card-end {
    background-blend-mode: normal, normal;
}

.director-mode-card-waiting_umea { background-color: #0a2b21; }
.director-mode-card-intro { background-color: #092530; }
.director-mode-card-vr_clear { background-color: #1f1932; }
.director-mode-card-vr_glitch { background-color: #0a3031; }
.director-mode-card-vr_diffuse { background-color: #0c2632; }
.director-mode-card-end { background-color: #2c2110; }

.director-monitor-topline {
    align-items: flex-start;
}

.director-monitor-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.director-monitor-toggle {
    min-height: 44px;
    padding: 0 14px;
}

.director-monitor-toggle::before {
    content: none;
}

.director-monitor-toggle span:not([aria-hidden="true"]) {
    white-space: nowrap;
}

.director-monitor-toggle span[aria-hidden="true"] {
    width: 24px;
    height: 24px;
}

@media (max-width: 1280px) {
    .director-status-actions {
        grid-template-columns: 1fr;
    }

    .director-quick-row {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }
}

@media (max-width: 900px) {
    .director-quick-row {
        grid-template-columns: 1fr;
    }

    .director-mode-card {
        grid-template-columns: 52px minmax(0, 1fr) auto;
    }

    .director-monitor-actions {
        justify-content: flex-start;
    }
}

.director-mode {
    overflow: hidden;
}

.director-shell {
    width: min(1680px, calc(100vw - 28px));
    height: 100vh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 10px 0 12px;
    box-sizing: border-box;
}

.director-header {
    grid-template-columns: minmax(330px, 0.48fr) minmax(620px, 1fr);
    gap: 16px;
    margin-bottom: 7px;
    padding-bottom: 6px;
}

.director-brand {
    gap: 14px;
}

.director-monogram {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
}

.director-monogram::before,
.director-monogram::after {
    width: 28px;
    height: 38px;
}

.director-monogram span {
    width: 20px;
    height: 42px;
}

.director-header h1 {
    font-size: clamp(22px, 1.65vw, 32px);
}

.director-subtitle {
    margin-top: 5px;
    font-size: 12px;
}

.director-status {
    grid-template-columns: repeat(6, minmax(84px, 1fr));
    min-height: 58px;
    padding: 7px;
    border-radius: 10px;
}

.director-status-card {
    grid-template-columns: 30px minmax(0, 1fr);
    column-gap: 8px;
    padding: 3px 8px;
}

.director-status-icon {
    width: 30px;
    height: 30px;
}

.director-status-icon::before {
    font-size: 14px;
}

.director-status-label,
.director-status-card strong {
    font-size: 12px;
}

.director-status-actions {
    flex: 0 0 auto;
    grid-template-columns: minmax(150px, 0.18fr) minmax(720px, 1fr);
    gap: 10px;
    margin: 6px 0 10px;
}

.director-time-display {
    min-height: 48px;
    padding: 6px 12px;
    border-radius: 10px;
}

.director-time-display span {
    font-size: 10px;
    letter-spacing: 0.14em;
}

.director-time-display strong {
    font-size: clamp(28px, 2.4vw, 46px);
}

.director-quick-row {
    grid-template-columns: repeat(6, minmax(98px, 1fr));
    gap: 7px;
}

.director-status-actions button.director-quick {
    min-height: 48px;
    gap: 5px;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: clamp(11px, 0.78vw, 13px);
}

.director-status-actions .director-quick-icon {
    width: 24px;
    height: 24px;
}

.director-layout {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: minmax(300px, 0.43fr) minmax(620px, 1.57fr);
    gap: 12px;
}

.director-left-column,
.director-section,
.director-monitor {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.director-section,
.director-monitor {
    padding: 12px;
    border-radius: 12px;
}

.director-section-heading,
.director-monitor-topline {
    gap: 10px;
    margin-bottom: 9px;
}

.director-section-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
}

.director-section-icon::before {
    font-size: 19px;
}

.director-section-heading h2 {
    font-size: 18px;
}

.director-section-heading p {
    margin-top: 2px;
    font-size: 12px;
}

.director-actions-views {
    gap: 7px;
}

.director-mode-card {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    min-height: 54px;
    padding: 7px 10px;
    border-radius: 9px;
}

.director-card-icon {
    width: 34px;
    height: 34px;
}

.director-card-label {
    font-size: 15px;
}

.director-card-key {
    font-size: 10px;
}

.director-mode-card.is-active::after {
    right: 10px;
    width: 8px;
    height: 8px;
}

.director-monitor {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
}

.director-monitor-topline {
    align-items: center;
}

.director-monitor-actions {
    gap: 7px;
}

.director-monitor-toggle {
    min-height: 36px;
    padding: 0 10px;
    gap: 7px;
    font-size: 12px;
}

.director-monitor-toggle span[aria-hidden="true"] {
    width: 18px;
    height: 18px;
}

.director-monitor-frame-wrap {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
}

.director-monitor.is-paused iframe {
    display: none;
}

.director-monitor.is-paused .director-monitor-placeholder {
    display: grid;
}

@media (max-width: 1280px) {
    .director-mode {
        overflow: auto;
    }

    .director-shell {
        height: auto;
        min-height: auto;
    }

    .director-header,
    .director-status-actions,
    .director-layout {
        grid-template-columns: 1fr;
    }

    .director-quick-row {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }

    .director-monitor-frame-wrap {
        min-height: 360px;
        aspect-ratio: 16 / 9;
    }
}

.admin-mode {
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 8%, rgba(213, 177, 98, 0.18), transparent 34%),
        linear-gradient(135deg, #101827 0%, #182234 52%, #0e1118 100%);
    color: #f8f1df;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.admin-shell {
    width: min(1320px, calc(100vw - 48px));
    margin: 0 auto;
    padding: 42px 0 56px;
}

.admin-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.admin-header h1 {
    margin: 0;
    font-size: clamp(32px, 4vw, 58px);
    line-height: 1;
    font-weight: 760;
    letter-spacing: 0;
}

.admin-header p {
    max-width: 740px;
    margin: 12px 0 0;
    color: rgba(248, 241, 223, 0.76);
    font-size: 17px;
    line-height: 1.55;
}

.admin-status,
.admin-guidance span,
.admin-mode-chip {
    border: 1px solid rgba(248, 241, 223, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(248, 241, 223, 0.9);
    border-radius: 8px;
}

.admin-status {
    flex: 0 0 auto;
    padding: 10px 13px;
    font-size: 14px;
}

.admin-guidance {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.admin-guidance span {
    padding: 9px 12px;
    font-size: 13px;
}

.admin-device-panel {
    margin-bottom: 24px;
    padding: 18px;
    border: 1px solid rgba(248, 241, 223, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.065);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
}

.admin-device-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.admin-device-topline h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.1;
}

.admin-device-topline p {
    max-width: 760px;
    margin: 7px 0 0;
    color: rgba(248, 241, 223, 0.7);
    font-size: 13px;
    line-height: 1.45;
}

.admin-device-topline > span {
    flex: 0 0 auto;
    border: 1px solid rgba(68, 222, 151, 0.34);
    border-radius: 8px;
    background: rgba(68, 222, 151, 0.12);
    color: #c9ffe2;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 720;
}

.admin-device-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.admin-device-card {
    min-height: 166px;
    padding: 13px;
    border: 1px solid rgba(248, 241, 223, 0.14);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
}

.admin-device-card.is-active {
    border-color: rgba(68, 222, 151, 0.5);
    background: linear-gradient(180deg, rgba(68, 222, 151, 0.15), rgba(0, 0, 0, 0.18));
}

.admin-device-card.is-inactive {
    opacity: 0.58;
}

.admin-device-card.is-unknown {
    border-color: rgba(243, 201, 104, 0.46);
}

.admin-device-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 11px;
}

.admin-device-card h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1;
}

.admin-device-card-head span {
    border-radius: 999px;
    background: rgba(248, 241, 223, 0.12);
    color: rgba(248, 241, 223, 0.82);
    padding: 5px 8px;
    font-size: 11px;
    text-transform: uppercase;
}

.admin-device-card.is-active .admin-device-card-head span {
    background: rgba(68, 222, 151, 0.18);
    color: #c9ffe2;
}

.admin-device-card dl {
    display: grid;
    gap: 7px;
    margin: 0;
}

.admin-device-card div {
    min-width: 0;
}

.admin-device-card dt {
    color: rgba(248, 241, 223, 0.55);
    font-size: 10px;
    font-weight: 720;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-device-card dd {
    margin: 2px 0 0;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.admin-device-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
}

.admin-device-actions span {
    flex-basis: 100%;
    color: rgba(248, 241, 223, 0.62);
    font-size: 10px;
    font-weight: 720;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-device-actions button,
.admin-device-card > button {
    min-height: 30px;
    border: 1px solid rgba(248, 241, 223, 0.18);
    border-radius: 8px;
    background: rgba(248, 241, 223, 0.1);
    color: #f8f1df;
    font: inherit;
    font-size: 12px;
    font-weight: 720;
    cursor: pointer;
}

.admin-device-actions button {
    flex: 1 1 38px;
    padding: 0 7px;
}

.admin-device-card > button {
    width: 100%;
    margin-top: 10px;
    padding: 0 9px;
}

.admin-device-actions button:hover,
.admin-device-card > button:hover {
    border-color: rgba(68, 222, 151, 0.5);
    background: rgba(68, 222, 151, 0.16);
}

.admin-device-empty {
    margin: 0;
    padding: 14px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.16);
    color: rgba(248, 241, 223, 0.7);
    font-size: 13px;
}

.admin-device-inactive {
    margin-top: 14px;
    color: rgba(248, 241, 223, 0.72);
    font-size: 13px;
}

.admin-device-inactive summary {
    cursor: pointer;
}

.admin-device-inactive .admin-device-grid {
    margin-top: 10px;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.admin-station {
    border: 1px solid rgba(248, 241, 223, 0.16);
    background: rgba(255, 255, 255, 0.075);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
    border-radius: 8px;
    padding: 18px;
}

.admin-station.is-player-online {
    border-color: rgba(68, 222, 151, 0.42);
}

.admin-station-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.admin-station h2 {
    margin: 0;
    font-size: 25px;
    line-height: 1;
    letter-spacing: 0;
}

.admin-mode-chip {
    padding: 7px 9px;
    font-size: 12px;
    text-transform: uppercase;
}

.admin-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.admin-metrics span {
    min-height: 64px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
    color: #ffffff;
    font-size: 15px;
}

.admin-metrics b,
.admin-metrics small {
    display: block;
}

.admin-metrics b {
    margin-bottom: 5px;
    color: rgba(248, 241, 223, 0.66);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-metrics small {
    margin-top: 4px;
    color: rgba(248, 241, 223, 0.58);
    font-size: 12px;
}

.admin-data-note {
    margin: 0 0 14px;
    color: rgba(248, 241, 223, 0.7);
    font-size: 13px;
    line-height: 1.45;
}

.admin-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.admin-links a,
.admin-links button,
.admin-adb button {
    min-height: 40px;
    border: 0;
    border-radius: 8px;
    background: #f3c968;
    color: #101827;
    font: inherit;
    font-size: 13px;
    font-weight: 720;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    cursor: pointer;
}

.admin-links button,
.admin-adb button {
    background: rgba(255, 255, 255, 0.12);
    color: #f8f1df;
}

.admin-qr-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.admin-qr-row figure {
    margin: 0;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    text-align: center;
}

.admin-qr-row img {
    width: min(100%, 140px);
    aspect-ratio: 1;
    border-radius: 4px;
    background: white;
}

.admin-qr-row figcaption {
    margin-top: 7px;
    color: rgba(248, 241, 223, 0.7);
    font-size: 12px;
}

.admin-adb {
    margin-top: 12px;
    color: rgba(248, 241, 223, 0.78);
    font-size: 13px;
}

.admin-adb summary {
    cursor: pointer;
}

.admin-adb code {
    display: block;
    margin: 10px 0;
    padding: 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.32);
    color: #d8edf5;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.admin-adb p {
    margin: 10px 0 8px;
    color: rgba(248, 241, 223, 0.72);
    font-size: 12px;
}

.admin-quest-command-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.admin-quest-command-grid button {
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    background: rgba(68, 222, 151, 0.14);
    color: #dfffee;
    font: inherit;
    font-size: 12px;
    font-weight: 720;
    cursor: pointer;
}

@media (max-width: 980px) {
    .admin-device-grid {
        grid-template-columns: 1fr;
    }

    .admin-device-topline {
        display: block;
    }

    .admin-device-topline > span {
        display: inline-flex;
        margin-top: 12px;
    }

    .admin-grid {
        grid-template-columns: 1fr;
    }

    .admin-quest-command-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-header {
        display: block;
    }

    .admin-status {
        display: inline-flex;
        margin-top: 16px;
    }
}

#screenOverlay.screen-overlay-hide-info .screen-overlay-panel {
    opacity: 0 !important;
    transform: translateY(16px) scale(0.98);
    pointer-events: none;
}

.screen-overlay-finale {
    overflow: hidden;
    isolation: isolate;
}

.screen-overlay-finale::before,
.screen-overlay-finale::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.screen-overlay-finale::before {
    background:
        radial-gradient(ellipse at 50% 46%, rgba(255, 230, 162, 0.42), transparent 34%),
        radial-gradient(ellipse at 50% 100%, rgba(214, 169, 75, 0.18), transparent 46%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.56), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.56));
    opacity: 0;
    animation: hilma-finale-stage-glow 2400ms ease-out 180ms forwards;
}

.screen-overlay-finale::after {
    background:
        repeating-linear-gradient(90deg, transparent 0 9px, rgba(241, 201, 107, 0.07) 10px 11px, transparent 12px 42px),
        radial-gradient(circle at 24% 18%, rgba(103, 199, 247, 0.14), transparent 16%),
        radial-gradient(circle at 78% 24%, rgba(241, 201, 107, 0.12), transparent 18%);
    mix-blend-mode: screen;
    opacity: 0;
    animation: hilma-finale-symbols 3400ms ease-out 420ms forwards;
}

.screen-finale-art {
    width: min(82vw, 1120px);
    max-width: calc(100vw - 80px);
    max-height: calc(100vh - 72px);
    aspect-ratio: auto;
    padding: clamp(12px, 1.4vw, 24px);
    border-radius: 4px;
    background:
        linear-gradient(145deg, rgba(255, 244, 202, 0.98), rgba(171, 118, 46, 0.96) 47%, rgba(83, 44, 17, 0.96)),
        #c99a56;
    box-shadow:
        0 46px 150px rgba(0, 0, 0, 0.72),
        0 0 0 1px rgba(255, 228, 157, 0.5),
        0 0 88px rgba(241, 201, 107, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.44),
        inset 0 0 0 10px rgba(92, 50, 18, 0.34);
    z-index: 1;
}

.screen-finale-art img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 124px);
    border: 1px solid rgba(79, 47, 20, 0.28);
    background: #fff8e9;
    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.28),
        inset 0 0 30px rgba(61, 34, 15, 0.1);
}

body.screen-mode-end #screenOverlay:not(.has-reveal-video) .screen-finale-art {
    animation: hilma-finale-art-in-grand 1850ms cubic-bezier(0.17, 0.92, 0.2, 1) 180ms forwards;
}

body.screen-mode-end #screenOverlay:not(.has-reveal-video) .screen-finale-art::before {
    animation: hilma-finale-glow-grand 3200ms ease 420ms forwards;
}

body.screen-mode-end #screenOverlay:not(.has-reveal-video) .screen-finale-art::after {
    animation: hilma-finale-sheen-grand 2600ms cubic-bezier(0.18, 0.88, 0.23, 1) 950ms forwards;
}

.director-intro-countdown {
    display: block;
    margin-top: 2px;
    color: #67c7f7;
    font-size: clamp(11px, 0.8vw, 13px);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.director-intro-countdown[hidden] {
    display: none;
}

.director-monitor-info-toggle.is-active {
    border-color: rgba(103, 199, 247, 0.72);
    box-shadow:
        0 0 0 1px rgba(103, 199, 247, 0.3),
        0 0 22px rgba(103, 199, 247, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.director-monitor-info-toggle.is-active::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #67c7f7;
    box-shadow: 0 0 16px rgba(103, 199, 247, 0.78);
}

.director-actions-views {
    gap: 5px;
}

.director-actions .director-mode-card {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    min-height: 44px;
    padding: 5px 8px;
    border-radius: 8px;
}

.director-card-icon {
    width: 28px;
    height: 28px;
}

.director-card-label {
    font-size: 14px;
    line-height: 1.04;
}

.director-card-key {
    font-size: 9px;
}

.director-mode-card.is-active::after {
    right: 8px;
    width: 7px;
    height: 7px;
}

@keyframes hilma-finale-stage-glow {
    0% { opacity: 0; transform: scale(1.04); filter: blur(8px); }
    62% { opacity: 1; }
    100% { opacity: 0.84; transform: scale(1); filter: blur(0); }
}

@keyframes hilma-finale-symbols {
    0% { opacity: 0; transform: scale(1.08) rotate(-2deg); }
    44% { opacity: 0.52; }
    100% { opacity: 0.28; transform: scale(1) rotate(0deg); }
}

@keyframes hilma-finale-art-in-grand {
    0% {
        opacity: 0;
        transform: translateY(44px) scale(0.82) rotateX(8deg);
        filter: blur(14px) brightness(0.72);
    }
    52% {
        opacity: 1;
        transform: translateY(-6px) scale(1.015) rotateX(0deg);
        filter: blur(0) brightness(1.12);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0) brightness(1);
    }
}

.director-time-display {
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
}

.director-time-adjust {
    display: grid;
    gap: 5px;
    position: relative;
    z-index: 3;
}

.director-time-adjust button {
    position: relative;
    z-index: 4;
    width: 34px;
    min-width: 34px;
    height: 26px;
    min-height: 26px;
    padding: 0;
    border: 1px solid rgba(241, 201, 107, 0.38);
    border-radius: 7px;
    background: rgba(241, 201, 107, 0.12);
    color: #f7d783;
    font: 800 16px/1 system-ui, sans-serif;
    letter-spacing: 0;
    box-shadow: none;
    cursor: pointer;
    pointer-events: auto;
}

.director-time-adjust button::before,
.director-time-adjust button::after {
    content: none !important;
    display: none !important;
}

.director-time-adjust button:hover {
    border-color: rgba(241, 201, 107, 0.75);
    background: rgba(241, 201, 107, 0.2);
}

.director-time-adjust button:disabled {
    opacity: 0.36;
    cursor: default;
}

.director-actions .director-mode-card .director-card-icon::before {
    content: none !important;
}

.director-actions .director-mode-card .director-card-icon svg {
    width: 20px;
    height: 20px;
}

.director-actions .director-mode-card {
    position: relative;
    overflow: hidden;
}

.director-mode-card-waiting_umea {
    background:
        radial-gradient(circle at 12% 50%, rgba(84, 215, 122, 0.24), transparent 34%),
        linear-gradient(135deg, rgba(18, 48, 36, 0.97), rgba(7, 18, 18, 0.98)) !important;
}

.director-mode-card-intro {
    background:
        radial-gradient(circle at 14% 45%, rgba(103, 199, 247, 0.24), transparent 34%),
        linear-gradient(135deg, rgba(8, 39, 50, 0.97), rgba(7, 18, 21, 0.98)) !important;
}

.director-mode-card-cover {
    background:
        var(--director-texture),
        radial-gradient(circle at 18% 42%, rgba(142, 92, 138, 0.36), transparent 36%),
        linear-gradient(135deg, rgba(50, 32, 58, 0.97), rgba(11, 16, 25, 0.98)) !important;
}

.director-mode-card-vr_clear {
    background:
        radial-gradient(circle at 12% 45%, rgba(103, 199, 247, 0.22), transparent 34%),
        linear-gradient(135deg, rgba(13, 45, 66, 0.97), rgba(8, 18, 24, 0.98)) !important;
}

.director-mode-card-vr_glitch {
    background:
        radial-gradient(circle at 12% 45%, rgba(84, 215, 122, 0.2), transparent 34%),
        linear-gradient(135deg, rgba(9, 51, 47, 0.97), rgba(7, 19, 19, 0.98)) !important;
}

.director-mode-card-vr_diffuse {
    background:
        radial-gradient(circle at 12% 45%, rgba(103, 199, 247, 0.18), transparent 34%),
        linear-gradient(135deg, rgba(9, 41, 56, 0.97), rgba(8, 16, 23, 0.98)) !important;
}

.director-mode-card-end {
    background:
        radial-gradient(circle at 14% 42%, rgba(241, 201, 107, 0.28), transparent 36%),
        linear-gradient(135deg, rgba(55, 39, 13, 0.97), rgba(12, 14, 13, 0.98)) !important;
}

#container.admin-mode {
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
}

.admin-shell {
    width: min(1320px, calc(100vw - 28px));
    padding: 16px 0 22px;
}

.admin-header {
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.admin-header h1 {
    font-size: clamp(28px, 3.2vw, 46px);
}

.admin-header p {
    margin-top: 7px;
    font-size: 14px;
    line-height: 1.32;
}

.admin-status {
    padding: 8px 11px;
    font-size: 13px;
}

.admin-guidance {
    gap: 6px;
    margin-bottom: 12px;
}

.admin-guidance span {
    padding: 7px 10px;
    font-size: 12px;
}

.admin-device-panel {
    margin-bottom: 14px;
    padding: 12px;
}

.admin-device-topline {
    margin-bottom: 9px;
}

.admin-device-topline h2 {
    font-size: 21px;
}

.admin-device-topline p {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.28;
}

.admin-device-grid {
    gap: 7px;
}

.admin-device-card {
    min-height: 118px;
    padding: 9px;
}

.admin-device-card-head {
    margin-bottom: 7px;
}

.admin-device-card h3 {
    font-size: 18px;
}

.admin-device-card-head span {
    padding: 4px 6px;
    font-size: 9px;
}

.admin-device-card dl {
    gap: 4px;
}

.admin-device-card dt {
    font-size: 8px;
}

.admin-device-card dd {
    margin-top: 1px;
    font-size: 10px;
    line-height: 1.12;
}

.admin-device-actions {
    margin-top: 8px;
}

.admin-device-actions button,
.admin-device-card > button {
    min-height: 26px;
    border-radius: 7px;
    font-size: 11px;
}

.admin-device-inactive {
    margin-top: 8px;
}

.admin-grid {
    gap: 10px;
}

.admin-station {
    padding: 11px;
}

.admin-station-topline {
    margin-bottom: 10px;
}

.admin-station h2 {
    font-size: 21px;
}

.admin-mode-chip {
    padding: 5px 8px;
    font-size: 10px;
}

.admin-metrics {
    gap: 6px;
    margin-bottom: 8px;
}

.admin-metrics span {
    min-height: 45px;
    padding: 7px;
    font-size: 13px;
}

.admin-metrics b {
    margin-bottom: 3px;
    font-size: 9px;
}

.admin-metrics small {
    margin-top: 2px;
    font-size: 10px;
}

.admin-data-note {
    margin-bottom: 9px;
    font-size: 11px;
    line-height: 1.28;
}

.admin-links {
    gap: 6px;
}

.admin-links a,
.admin-links button,
.admin-adb button {
    min-height: 32px;
    font-size: 12px;
    padding: 0 9px;
}

.admin-qr-row {
    gap: 7px;
    margin-top: 9px;
}

.admin-qr-row figure {
    padding: 7px;
}

.admin-qr-row img {
    width: min(100%, 88px);
}

.admin-qr-row figcaption {
    margin-top: 4px;
    font-size: 10px;
}

.admin-adb {
    margin-top: 8px;
    font-size: 11px;
}

@keyframes hilma-finale-glow-grand {
    0% { opacity: 0; transform: scale(0.82) rotate(0deg); }
    42% { opacity: 0.96; }
    100% { opacity: 0.58; transform: scale(1.16) rotate(22deg); }
}

@keyframes hilma-finale-sheen-grand {
    0% { transform: translateX(-132%) skewX(-12deg); opacity: 0; }
    26% { opacity: 0.95; }
    100% { transform: translateX(132%) skewX(-12deg); opacity: 0; }
}

/* Compact director top controls, tuned for laptop-height screens. */
.director-mode .director-status-actions {
    grid-template-columns: minmax(176px, 0.22fr) minmax(0, 1fr);
    gap: 9px;
    margin: 6px 0 9px;
}

.director-mode .director-time-display {
    min-height: 54px;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 8px;
    padding: 6px 10px 6px 12px;
    overflow: hidden;
}

.director-mode .director-time-display span {
    display: block;
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.12em;
}

.director-mode .director-time-display strong {
    display: block;
    margin-top: 3px;
    font-size: clamp(28px, 2.15vw, 38px);
    line-height: 0.9;
}

.director-mode .director-time-adjust {
    gap: 4px;
}

.director-mode .director-time-adjust button {
    width: 28px;
    min-width: 28px;
    height: 22px;
    min-height: 22px;
    border-radius: 6px;
    font-size: 13px;
}

.director-mode .director-quick-row {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
}

.director-mode .director-status-actions button.director-quick {
    min-height: 54px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    justify-content: start;
    gap: 8px;
    padding: 7px 9px;
    text-align: left;
    font-size: clamp(11px, 0.76vw, 13px);
    line-height: 1.08;
}

.director-mode .director-status-actions .director-quick-icon {
    width: 24px;
    height: 24px;
}

.director-mode .director-status-actions .director-quick-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

.director-mode .director-status-actions .director-quick-primary {
    border-color: rgba(241, 201, 107, 0.9);
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.22), transparent 42%),
        linear-gradient(135deg, rgba(241, 201, 107, 0.95), rgba(190, 129, 44, 0.98));
    color: #151007;
}

.director-mode .director-status-actions .director-quick-primary .director-quick-icon {
    color: #151007;
}

	.director-mode .director-status-actions button.director-quick span:last-child {
	    min-width: 0;
	    overflow-wrap: anywhere;
	}

.hand-calibration-mode #container canvas {
    filter: none !important;
    opacity: 1 !important;
}

.hilma-hand-calibration {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 45;
    width: min(430px, calc(100vw - 36px));
    max-height: calc(100vh - 36px);
    overflow: auto;
    box-sizing: border-box;
    padding: 14px 16px 16px;
    color: #f7f2e8;
    background: rgba(8, 12, 14, 0.9);
    border: 1px solid rgba(130, 216, 238, 0.45);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.36);
    font-family: Arial, sans-serif;
    pointer-events: none;
}

.hilma-hand-calibration-header,
.hilma-hand-calibration-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hilma-hand-calibration h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
}

.hilma-hand-calibration-header span,
.hilma-hand-calibration-current,
.hilma-hand-calibration p {
    font-size: 12px;
    color: #bfd4dc;
}

.hilma-hand-calibration-current {
    margin-top: 12px;
    padding: 9px 10px;
    background: rgba(255, 255, 255, 0.06);
}

.hilma-hand-calibration-current strong {
    color: #ffffff;
}

.hilma-hand-calibration-values {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px 12px;
    margin: 12px 0;
    font-size: 12px;
}

.hilma-hand-calibration-values dt {
    color: #9fb7c0;
}

.hilma-hand-calibration-values dd {
    margin: 0;
    color: #ffffff;
    font-family: Menlo, Consolas, monospace;
}

.hilma-hand-calibration pre {
    max-height: 170px;
    margin: 0;
    overflow: auto;
    padding: 10px;
    color: #eafcff;
    background: rgba(0, 0, 0, 0.36);
    font-size: 11px;
    line-height: 1.35;
    white-space: pre-wrap;
}

.hilma-hand-calibration p {
    margin: 10px 0 0;
    line-height: 1.35;
}
	
	@media (max-width: 1180px) {
	    .director-mode .director-header {
	        grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
    }

    .director-mode .director-status {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .director-mode .director-status-actions {
        grid-template-columns: 1fr;
    }

    .director-mode .director-time-display {
        min-height: 48px;
    }
}

/* Keep the VR monitor beside the audience controls on laptop-width screens. */
.director-mode .director-layout {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    gap: 10px;
}

.director-mode .director-left-column {
    width: 100%;
    max-width: 260px;
}

.director-mode .director-actions-views {
    gap: 5px;
}

.director-mode .director-actions .director-mode-card {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 46px;
    padding: 6px 8px;
}

.director-mode .director-card-icon {
    width: 28px;
    height: 28px;
}

.director-mode .director-card-label {
    font-size: 13px;
}

.director-mode .director-card-key {
    font-size: 8px;
    letter-spacing: 0.08em;
}

.director-mode .director-mode-card.is-active::after {
    right: 7px;
    width: 7px;
    height: 7px;
}

@media (min-width: 981px) and (max-width: 1280px) {
    .director-mode {
        overflow: hidden;
    }

    .director-mode .director-shell {
        height: 100vh;
        min-height: 0;
    }

    .director-mode .director-header {
        grid-template-columns: minmax(315px, 0.38fr) minmax(0, 1fr);
    }

    .director-mode .director-header h1 {
        font-size: clamp(19px, 1.75vw, 23px);
        letter-spacing: 0.08em;
    }

    .director-mode .director-subtitle {
        font-size: 10px;
        letter-spacing: 0.28em;
    }

    .director-mode .director-status-actions {
        grid-template-columns: minmax(164px, 0.2fr) minmax(0, 1fr);
    }

    .director-mode .director-layout {
        grid-template-columns: minmax(220px, 248px) minmax(0, 1fr) !important;
    }

    .director-mode .director-left-column {
        max-width: 248px;
    }

    .director-mode .director-monitor-frame-wrap {
        min-height: 0;
        aspect-ratio: auto;
    }

    .director-mode .director-quick-row {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .director-mode .director-layout {
        grid-template-columns: 1fr;
    }

    .director-mode .director-left-column {
        max-width: none;
    }
}