/* ========================================================================= */
/* SceneKit-DOS Studio // Renegade BBS & Innerlink Demoscene Aesthetic       */
/* Authentic IBM PC CP437 VGA Text Mode 8x16 Bitmap Typography               */
/* ========================================================================= */

@font-face {
    font-family: 'IBM-VGA-9x16-Ac';
    src: url('/static/fonts/Ac437_IBM_VGA_9x16.ttf') format('truetype');
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'IBM-VGA-9x16-Ac-2x';
    src: url('/static/fonts/Ac437_IBM_VGA_9x16-2x.ttf') format('truetype');
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'IBM-VGA-8x16-Ac';
    src: url('/static/fonts/Ac437_IBM_VGA_8x16.ttf') format('truetype');
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'IBM-VGA-8x16-Ac-2x';
    src: url('/static/fonts/Ac437_IBM_VGA_8x16-2x.ttf') format('truetype');
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'IBM-VGA-9x16';
    src: url('/static/fonts/Web437_IBM_VGA_9x16.woff') format('woff');
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'IBM-VGA-9x16-2x';
    src: url('/static/fonts/Web437_IBM_VGA_9x16-2x.woff') format('woff');
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'IBM-VGA-8x16';
    src: url('/static/fonts/Web437_IBM_VGA_8x16.woff') format('woff');
    font-style: normal;
    font-display: block;
}

:root {
    /* Authentic 16-Color IBM CGA/EGA/VGA Hardware Palette */
    --dos-black:        #000000;
    --dos-blue:         #0000aa;
    --dos-green:        #00aa00;
    --dos-cyan:         #00aaaa;
    --dos-red:          #aa0000;
    --dos-magenta:      #aa00aa;
    --dos-brown:        #aa5500;
    --dos-light-gray:   #cccccc;
    --dos-dark-gray:    #555555;
    --dos-med-gray:     #888888;
    --dos-bright-blue:  #5555ff;
    --dos-bright-green: #55ff55;
    --dos-bright-cyan:  #55ffff;
    --dos-bright-red:   #ff5555;
    --dos-bright-mag:   #ff55ff;
    --dos-yellow:       #ffff55;
    --dos-white:        #ffffff;

    /* Trogen Green, Grey, White, Black Theme Tokens */
    --bg-main:          #000000;
    --bg-window:        #000000;
    --bg-card:          #050805;
    --bg-card-hover:    #0a100a;
    --bg-input:         #000000;
    --border-silver:    #cccccc;
    --border-green:     #00aa00;
    --border-bright-green:#55ff55;
    --border-dark:      #444444;

    --cell: 16px; /* one VGA cell: every glyph is 9x16, nothing else */
    --font-dos: 'IBM-VGA-9x16', 'Px437 IBM VGA 9x16', 'IBM-VGA-8x16', monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 0 !important; /* Zero smoothing - authentic sharp DOS rectangular cells */
}

html, body {
    background-color: var(--bg-main);
    color: var(--dos-white);
    font-family: var(--font-dos) !important;
    font-size: var(--cell);
    line-height: var(--cell);
    min-height: 100vh;
    -webkit-font-smoothing: none !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-smooth: never !important;
    text-rendering: optimizeSpeed !important;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: -webkit-crisp-edges !important;
    image-rendering: pixelated !important;
    image-rendering: crisp-edges !important;
}

body {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #000000;
}

/* Global Font Enforcement */
button, input, select, textarea, pre, code, span, label, div, h1, h2, h3, h4 {
    font-family: var(--font-dos) !important;
    -webkit-font-smoothing: none !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-smooth: never !important;
    text-rendering: optimizeSpeed !important;
}

/* ========================================================================= */
/* BBS & Halaster ANSI Color Utilities (Green, Grey, White, Black)            */
/* ========================================================================= */
.bbs-key {
    color: var(--dos-bright-green) !important;
}
.bbs-cyan { color: var(--dos-bright-green) !important; }
.bbs-dark-cyan { color: var(--dos-green) !important; }
.bbs-green { color: var(--dos-bright-green) !important; }
.bbs-yellow { color: var(--dos-white) !important; }
.bbs-red { color: var(--dos-light-gray) !important; }
.bbs-white { color: var(--dos-white) !important; }
.bbs-silver { color: var(--dos-light-gray) !important; }
.bbs-dark { color: var(--dos-dark-gray) !important; }
.bbs-bright-white { color: #ffffff !important; font-weight: bold; }

/* Halaster ANSI Shading Utilities */
.ansi-w   { color: #ffffff !important; font-weight: bold; } /* Color 15 - Bright White */
.ansi-bg  { color: #55ff55 !important; }                    /* Color 10 - Bright Green */
.ansi-dg  { color: #00aa00 !important; }                    /* Color 2  - Dark Green */
.ansi-lg  { color: #cccccc !important; }                    /* Color 7  - Light Grey */
.ansi-mg  { color: #888888 !important; }                    /* Medium Grey */
.ansi-dk  { color: #555555 !important; }                    /* Color 8  - Dark Grey */
.ansi-sh  { color: #333333 !important; }                    /* Shadow */
.ansi-st  { color: #55ff55 !important; opacity: 0.8; }       /* Streak Line */

/* ========================================================================= */
/* Trogen Top ASCII Banner & Node SysOp Bar                                  */
/* ========================================================================= */
.bbs-header-banner {
    background: #000000;
    border-bottom: 2px solid var(--dos-bright-green);
    padding: 10px 16px 14px 16px;
    text-align: center;
}

.bbs-ascii-logo {
    font-family: 'IBM-VGA-9x16', monospace !important;
    font-size: var(--cell);
    line-height: 16px;
    color: var(--dos-bright-green);
    margin: 0 auto;
    display: inline-block;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

.bbs-ascii-logo::selection,
.bbs-ascii-logo *::selection {
    background: var(--dos-bright-green);
    color: var(--dos-black) !important;
}

/* Authentic 3:4 Aspect Ratio Correction Utility (Matching int10h.org VGA CRT aspect) */
.aspect-correct-3-4 {
    transform: scaleX(0.7500);
    transform-origin: center top;
}

.bbs-sub-banner {
    margin-top: 10px;
    font-size: var(--cell);
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.bbs-sub-banner-title {
    color: var(--dos-bright-white);
}

.bbs-sub-banner-node {
    font-size: var(--cell);
    color: var(--dos-light-gray);
}

.bbs-sysop-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--dos-dark-gray);
    font-size: var(--cell);
}

/* ========================================================================= */
/* BBS Area Selection (Preset Transport Strip)                               */
/* ========================================================================= */
.bbs-area-box {
    margin: 12px 14px 8px 14px;
    border: 1px solid var(--border-silver);
    background: #000000;
    padding: 10px 14px 12px 14px;
    position: relative;
}

.bbs-box-title {
    position: absolute;
    top: -14px;
    left: 14px;
    background: #000000;
    padding: 0 8px;
    font-size: var(--cell);
    line-height: var(--cell);
    color: var(--dos-bright-green);
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bbs-area-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    align-items: center;
}

.bbs-menu-item {
    background: #000000;
    border: 1px solid var(--dos-dark-gray);
    color: var(--dos-light-gray);
    padding: 8px 16px;
    font-size: var(--cell);
    line-height: var(--cell);
    cursor: pointer;
}

.bbs-menu-item:hover {
    border-color: var(--dos-bright-green);
    color: var(--dos-white);
    background: #002200;
}

.bbs-menu-item.active {
    background: #003300;
    border-color: var(--dos-bright-green);
    color: var(--dos-white);
    box-shadow: 0 0 8px rgba(85, 255, 85, 0.4);
}

/* Sound Switcher Pills */
.audio-toggle-pills {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.audio-pill-btn {
    background: #000000;
    border: 1px solid var(--dos-dark-gray);
    color: var(--dos-light-gray);
    padding: 8px 14px;
    font-size: var(--cell);
    line-height: var(--cell);
    cursor: pointer;
}

.audio-pill-btn.active {
    background: #00aa00;
    border-color: #55ff55;
    color: #ffffff;
}

/* ========================================================================= */
/* Two-Column Studio Layout                                                  */
/* ========================================================================= */
.studio-container {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 12px;
    padding: 6px 14px 14px 14px;
    flex: 1;
}

@media (max-width: 1080px) {
    .studio-container {
        grid-template-columns: 1fr;
    }
}

/* Logo fit: shrink the 80-column banner's cell to the viewport so the whole
   art fits without horizontal scroll. --cell is the single source: the global
   DOS pass sizes every glyph (and row pitch) from var(--cell), so overriding
   it on the logo subtree scales every span at once. 45 = 80 cols x 9/16
   advance ratio; 32px = body side padding. Desktop (>820px) untouched. */
@media (max-width: 820px) {
    .bbs-ascii-logo {
        --cell: min(16px, calc((100vw - 32px) / 45));
    }
}

.panel {
    background: #000000;
    border: 1px solid var(--border-silver);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.panel-header {
    background: #080d08;
    border-bottom: 1px solid var(--dos-bright-green);
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.panel-header h2 {
    font-size: var(--cell);
    line-height: var(--cell);
    color: var(--dos-bright-green);
}

/* BBS Tab Bar */
.tab-bar {
    display: flex;
    gap: 6px;
}

.tab-btn {
    background: #000000;
    border: 1px solid var(--dos-dark-gray);
    color: var(--dos-light-gray);
    padding: 8px 16px;
    font-size: var(--cell);
    line-height: var(--cell);
    cursor: pointer;
}

.tab-btn:hover {
    border-color: var(--dos-bright-green);
    color: var(--dos-white);
}

.tab-btn.active {
    background: var(--dos-green);
    border-color: var(--dos-bright-green);
    color: #ffffff;
}

/* ========================================================================= */
/* Scene Chain Sequencer Strip (Matrix Tracker)                              */
/* ========================================================================= */
.scene-sequencer-bar {
    background: #000000;
    border-bottom: 1px solid var(--dos-dark-gray);
    padding: 10px 12px;
}

.sequencer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: var(--cell);
    line-height: var(--cell);
    flex-wrap: wrap;
    gap: 8px;
}

.sequencer-title {
    color: var(--dos-bright-green);
    font-size: var(--cell);
}

.sequencer-summary {
    color: var(--dos-white);
    font-size: var(--cell);
}

.scene-slots-container {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.scene-slots-list {
    display: flex;
    gap: 8px;
    flex: 1;
    overflow-x: auto;
    padding-bottom: 4px;
}

.scene-slot,
.scene-slot-btn {
    background: #080808;
    border: 1px solid var(--dos-dark-gray);
    color: var(--dos-light-gray);
    padding: 8px 16px;
    font-size: var(--cell);
    line-height: var(--cell);
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    font-family: var(--font-dos);
}

.scene-slot:hover,
.scene-slot-btn:hover {
    border-color: var(--dos-bright-green);
    color: var(--dos-white);
    background: #002200;
}

.scene-slot.active,
.scene-slot-btn.active {
    background: #003300;
    border-color: var(--dos-bright-green);
    color: var(--dos-white);
    box-shadow: 0 0 8px rgba(85, 255, 85, 0.4);
}

.slot-num {
    color: var(--dos-white);
    font-size: var(--cell);
}

.slot-fx {
    font-size: var(--cell);
    color: var(--dos-bright-green);
}

.slot-dur {
    font-size: var(--cell);
    color: var(--dos-light-gray);
}

.scene-slot-actions {
    display: flex;
    gap: 6px;
}

.btn-slot-action {
    background: #000000;
    border: 1px solid var(--dos-green);
    color: var(--dos-bright-green);
    padding: 8px 14px;
    font-size: var(--cell);
    line-height: var(--cell);
    cursor: pointer;
}

.btn-slot-action:hover {
    background: var(--dos-green);
    color: #ffffff;
}

.btn-slot-action.del {
    border-color: var(--dos-red);
    color: var(--dos-bright-red);
}

.btn-slot-action.del:hover {
    background: #aa0000;
    color: #ffffff;
}

/* Active Scene Details Container (Nested under Scene Selector) */
.scene-details-box {
    border: 1px solid var(--border-silver);
    background: #020202;
    margin: 8px 12px;
    display: flex;
    flex-direction: column;
}

.scene-details-header {
    background: #0a120a;
    color: var(--dos-bright-green);
    padding: 10px 16px;
    font-size: var(--cell);
    line-height: var(--cell);
    border-bottom: 1px solid var(--dos-green);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scene-core-bar {
    background: #030603;
    border-bottom: 1px dashed var(--dos-dark-gray);
    padding: 10px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
}

.scene-param-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--cell);
}

.scene-tabs-bar {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    background: #000000;
    border-bottom: 1px solid var(--dos-dark-gray);
    flex-wrap: wrap;
}

.scene-strip-title {
    color: var(--dos-white);
    font-size: var(--cell);
}

.scene-param-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-duration {
    background: #000000;
    border: 1px solid var(--dos-dark-gray);
    color: var(--dos-bright-green);
    width: 90px;
    padding: 6px 10px;
    font-size: var(--cell);
    line-height: var(--cell);
    text-align: right;
}

.slider-duration {
    accent-color: var(--dos-bright-green);
    width: 90px;
    cursor: pointer;
}

.select-viewport {
    background: #000000;
    border: 1px solid var(--dos-green);
    color: var(--dos-white);
    padding: 6px 12px;
    font-size: var(--cell);
    line-height: var(--cell);
}

/* ========================================================================= */
/* Tab Contents & BBS Cards                                                  */
/* ========================================================================= */
.tab-content {
    display: none;
    padding: 10px;
    overflow-y: auto;
    flex: 1;
}

.tab-content.active {
    display: block;
}

.control-group {
    border: 1px solid var(--border-silver);
    background: #000000;
    margin-bottom: 12px;
    padding: 10px 14px 12px 14px;
    position: relative;
}

.control-label {
    display: block;
    font-size: var(--cell);
    color: var(--dos-bright-green);
    margin-bottom: 8px;
}

.select-field {
    width: 100%;
    background: #000000;
    border: 1px solid var(--dos-dark-gray);
    color: var(--dos-white);
    padding: 8px 12px;
    font-size: var(--cell);
    line-height: var(--cell);
}

.select-field:focus {
    border-color: var(--dos-bright-green);
    outline: none;
}

/* Modifiers Grid */
.modifiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.checkbox-card {
    background: #050805;
    border: 1px solid var(--dos-dark-gray);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.checkbox-card:hover {
    border-color: var(--dos-bright-green);
    background: #0a120a;
}

.checkbox-card input[type="checkbox"] {
    accent-color: var(--dos-bright-green);
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.chk-text strong {
    display: block;
    font-size: var(--cell);
    line-height: var(--cell);
    color: var(--dos-white);
}

.chk-text small {
    display: block;
    font-size: var(--cell);
    line-height: var(--cell);
    color: var(--dos-dark-gray);
}

.checkbox-card:has(input:checked) {
    border-color: var(--dos-green);
    background: #001500;
}

.checkbox-card:has(input:checked) .chk-text strong {
    color: var(--dos-bright-green);
}

.text-area {
    width: 100%;
    background: #000000;
    border: 1px solid var(--dos-dark-gray);
    color: var(--dos-bright-green);
    padding: 10px 12px;
    font-size: var(--cell);
    line-height: var(--cell);
    resize: vertical;
}

.text-area:focus {
    border-color: var(--dos-bright-green);
    outline: none;
}

/* ========================================================================= */
/* Studio Action Bar (BBS Command Lightbar)                                   */
/* ========================================================================= */
.action-bar {
    background: #000000;
    border-top: 1px solid var(--dos-dark-gray);
    padding: 12px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn {
    flex: 1;
    min-width: 140px;
    background: #000000;
    border: 2px solid var(--dos-green);
    color: var(--dos-bright-green);
    padding: 12px 20px;
    font-size: var(--cell);
    line-height: var(--cell);
    cursor: pointer;
    box-shadow: 2px 2px 0px #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn:hover {
    background: var(--dos-green);
    color: #ffffff;
    border-color: var(--dos-bright-green);
}

.btn:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px #000;
}

.btn-primary {
    border-color: var(--dos-bright-green);
    color: var(--dos-bright-green);
}

.btn-primary:hover {
    background: #00aa00;
    color: #ffffff;
}

.btn-secondary {
    border-color: var(--dos-white);
    color: var(--dos-white);
}

.btn-secondary:hover {
    background: #333333;
    color: #ffffff;
    border-color: var(--dos-bright-green);
}

.btn-outline {
    border-color: var(--border-silver);
    color: var(--dos-white);
}

.btn-outline:hover {
    background: #555555;
    color: #ffffff;
}

/* Disabled & Greying States */
button:disabled,
button.btn-disabled,
.btn-disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(1) !important;
    border-color: #444444 !important;
    color: #666666 !important;
    background: #0a0a0a !important;
    box-shadow: none !important;
}

.build-status {
    padding: 12px 16px;
    font-size: var(--cell);
    line-height: var(--cell);
    background: #050505;
    border-top: 1px solid #222222;
    color: var(--dos-light-gray);
    font-family: var(--font-dos);
}

/* ========================================================================= */
/* Player Panel & CRT Display Bezel                                          */
/* ========================================================================= */
.player-panel {
    background: #000000;
    border: 1px solid var(--border-silver);
}

.player-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tool-btn {
    background: #000000;
    border: 1px solid var(--dos-dark-gray);
    color: var(--dos-light-gray);
    padding: 8px 14px;
    font-size: var(--cell);
    line-height: var(--cell);
    cursor: pointer;
}

.tool-btn:hover {
    border-color: var(--dos-bright-green);
    color: var(--dos-white);
}

.crt-bezel {
    background: #0d120d;
    border: 4px solid #222e22;
    border-top-color: #334433;
    border-bottom-color: #080c08;
    border-right-color: #162016;
    border-radius: 8px;
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.95), 0 6px 16px rgba(0, 0, 0, 0.9);
    padding: 8px;
    margin: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.crt-inner {
    width: min(100%, calc(480px * (4 / 3)));
    height: auto;
    aspect-ratio: 4 / 3;
    max-height: 480px;
    background: #000000;
    position: relative;
    overflow: hidden;
    display: flex;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.6);
}

.crt-inner::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02) 60%, rgba(0,0,0,0.4) 100%);
    pointer-events: none;
    z-index: 10;
}

.crt-inner iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: -webkit-crisp-edges !important;
    image-rendering: pixelated !important;
    image-rendering: crisp-edges !important;
}

/* Expanded modes for the CRT bezel: real fullscreen (wrapper request) and
   pseudo-fullscreen fallback (is-pseudo-fullscreen class, iPhone Safari).
   Kept separate so desktop rules above never change. */
body.is-pseudo-fullscreen {
    overflow: hidden;
}
body.is-pseudo-fullscreen .crt-bezel,
.crt-bezel:fullscreen,
.crt-bezel:-webkit-full-screen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    width: 100dvw;
    height: 100dvh;
    margin: 0;
    z-index: 9999;
    border-radius: 0;
}
body.is-pseudo-fullscreen .crt-inner,
.crt-bezel:fullscreen .crt-inner,
.crt-bezel:-webkit-full-screen .crt-inner {
    width: 100%;
    height: 100%;
    max-height: none;
}

/* Exit affordance for pseudo-fullscreen (the <F>ullscreen button is buried
   under the fixed overlay). DOS frame matches .panel double borders. */
.pseudo-exit-chip { display: none; }
body.is-pseudo-fullscreen .pseudo-exit-chip {
    display: block;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10000;
    background: #000000;
    color: var(--dos-bright-green);
    border: 3px double var(--dos-bright-green);
    padding: 8px 14px;
    cursor: pointer;
}

/* ========================================================================= */
/* Prominent Renegade BBS Build Progress Modal Dialog                        */
/* ========================================================================= */
.bbs-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(2px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.bbs-modal-window {
    background: #000000;
    border: 2px solid var(--dos-bright-green);
    box-shadow: 0 0 35px rgba(85, 255, 85, 0.4), 8px 8px 0px #000000;
    width: 100%;
    max-width: 780px;
    color: var(--dos-light-gray);
    font-family: var(--font-dos);
}

.bbs-modal-titlebar {
    background: #0a140a;
    color: var(--dos-bright-green);
    padding: 10px 16px;
    border-bottom: 2px solid var(--dos-bright-green);
    text-align: center;
    font-size: var(--cell);
    user-select: none;
}

.bbs-modal-content {
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bbs-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 18px;
    background: #040604;
    border: 1px solid #333333;
    padding: 12px 16px;
    font-size: var(--cell);
    line-height: var(--cell);
}

.bbs-build-progress-box {
    border: 1px solid var(--dos-green);
    background: #030603;
    padding: 14px 16px;
}

.bbs-progress-title-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: var(--cell);
}

.bbs-meter-track {
    width: 100%;
    height: 24px;
    background: #111111;
    border: 1px solid var(--dos-white);
    margin-bottom: 8px;
    overflow: hidden;
}

.bbs-meter-fill {
    height: 100%;
    background: linear-gradient(90deg, #00aa00, #55ff55);
}

.bbs-ansi-meter {
    font-family: var(--font-dos);
    color: var(--dos-bright-green);
    font-size: var(--cell);
    text-align: center;
    user-select: none;
}

.bbs-log-container {
    border: 1px solid var(--dos-dark-gray);
    background: #040404;
    padding: 10px 12px;
}

.bbs-log-header {
    font-size: var(--cell);
    color: var(--dos-light-gray);
    margin-bottom: 6px;
}

.bbs-log-text {
    height: 120px;
    overflow-y: auto;
    font-size: var(--cell);
    color: var(--dos-bright-green);
    line-height: var(--cell);
    font-family: var(--font-dos);
    word-break: break-all;
}

.bbs-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 6px;
}

.bbs-dialog-btn {
    background: #000000;
    border: 2px solid var(--dos-bright-green);
    color: #ffffff;
    padding: 12px 26px;
    font-size: var(--cell);
    line-height: var(--cell);
    cursor: pointer;
    font-family: var(--font-dos);
    box-shadow: 2px 2px 0px #000;
}

.bbs-dialog-btn:hover {
    background: var(--dos-green);
    color: #ffffff;
}

.bbs-dialog-btn.btn-cancel {
    border-color: #ff5555;
    color: #ff5555;
}

.bbs-dialog-btn.btn-cancel:hover {
    background: #aa0000;
    color: #ffffff;
}

.bbs-dialog-btn.btn-done {
    border-color: #55ff55;
    color: #55ff55;
}

.bbs-dialog-btn.btn-done:hover {
    background: #00aa00;
    color: #000000;
}

.bbs-modal-footerbar {
    background: #000000;
    border-top: 1px solid #333333;
    padding: 6px 16px;
    text-align: center;
    color: var(--dos-dark-gray);
    font-size: var(--cell);
    user-select: none;
}

/* ========================================================================= */
/* Bottom BBS Command Prompt & Status Line                                    */
/* ========================================================================= */
.bbs-cmd-bar {
    background: #000000;
    border-top: 1px solid var(--dos-dark-gray);
    padding: 10px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--cell);
    line-height: var(--cell);
    font-family: var(--font-dos);
    color: var(--dos-light-gray);
}

.bbs-cmd-prompt {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bbs-cursor {
    color: var(--dos-bright-green);
    animation: dosBlinkAnim 0.75s steps(2, start) infinite;
}

@keyframes dosBlinkAnim {
    to { visibility: hidden; }
}

.bbs-clock {
    color: var(--dos-white);
}


/* ========================================================================= */
/* DOS TEXT-MODE PASS: one font, one size, one grid                          */
/* Everything is 9x16 cells. Emphasis comes from colour and inverse video,   */
/* never from faux bold, glow, blur, radius or gradient.                     */
/* ========================================================================= */
*, *::before, *::after {
    font-size: var(--cell) !important;
    line-height: var(--cell) !important;
    font-weight: normal !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    transition: none !important;
    animation-duration: 0s;
    border-radius: 0 !important;
}
.bbs-cursor { animation: dosBlinkAnim 0.5s steps(1, end) infinite !important; animation-duration: 0.5s !important; }
h2, strong, small, b { font-weight: normal !important; }

body { padding: 0 16px 16px 16px; max-width: 1280px; margin: 0 auto; }

/* Panels: CP437 double-line frames */
.panel, .bbs-area-box, .control-group, .scene-details-box, .player-panel,
.bbs-modal-window, .bbs-meta-grid, .bbs-build-progress-box, .bbs-log-container {
    border: 3px double var(--dos-light-gray) !important;
    box-shadow: none !important;
}
.bbs-modal-window {
    border-color: var(--dos-bright-cyan) !important;
    border-color: var(--dos-bright-green) !important;
    box-shadow: 18px 16px 0 var(--dos-dark-gray) !important; /* classic 2x1 cell DOS dialog shadow */
}
.bbs-modal-backdrop { backdrop-filter: none !important; background: #000000 !important;
    background-image: repeating-linear-gradient(0deg, #000 0 16px, #000 16px 32px) !important; }
.bbs-header-banner { border-bottom: 3px double var(--dos-bright-green) !important; padding: 16px 0 !important; }
.bbs-sysop-bar { border-top: 1px solid var(--dos-dark-gray) !important; gap: 18px !important; padding-top: 16px !important; margin-top: 16px !important; }
.bbs-sub-banner { gap: 0 !important; margin-top: 16px !important; }
.bbs-ascii-logo { text-shadow: none !important; }
.ansi-w, .bbs-key, .bbs-bright-white { font-weight: normal !important; text-shadow: none !important; }
.ansi-st { opacity: 1 !important; }

/* Title bars: inverse video strips */
.panel-header, .scene-details-header, .bbs-modal-titlebar {
    background: var(--dos-green) !important;
    border-bottom: none !important;
    padding: 0 9px !important;
}
.panel-header h2, .scene-details-header, .bbs-modal-titlebar { color: var(--dos-black) !important; }
.panel-header h2 { color: var(--dos-white) !important; }
.bbs-box-title { top: -8px !important; padding: 0 !important; color: var(--dos-bright-green) !important; }

/* Lightbar buttons: flat, bracketed by colour, inverse on hover/active */
.bbs-menu-item, .audio-pill-btn, .tab-btn, .scene-slot, .scene-slot-btn, .btn-slot-action,
.btn, .tool-btn, .bbs-dialog-btn {
    background: var(--dos-black) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 9px !important;
    min-height: var(--cell);
    color: var(--dos-light-gray);
}
.btn { min-width: 0 !important; justify-content: center; }
.btn-primary, .btn-slot-action, .bbs-dialog-btn.btn-done { color: var(--dos-bright-green) !important; }
.btn-slot-action.del, .bbs-dialog-btn.btn-cancel { color: var(--dos-bright-red) !important; }
.bbs-menu-item:hover, .audio-pill-btn:hover, .tab-btn:hover, .scene-slot:hover, .scene-slot-btn:hover,
.btn-slot-action:hover, .btn:hover, .tool-btn:hover, .bbs-dialog-btn:hover,
.bbs-menu-item.active, .audio-pill-btn.active, .tab-btn.active, .scene-slot.active, .scene-slot-btn.active {
    background: var(--dos-light-gray) !important;
    color: var(--dos-black) !important;
}
.tab-btn.active, .audio-pill-btn.active, .bbs-menu-item.active { background: var(--dos-green) !important; color: var(--dos-white) !important; }
.bbs-menu-item.active .bbs-key, .bbs-menu-item:hover .bbs-key,
.bbs-dialog-btn:hover .bbs-key { color: var(--dos-yellow) !important; }
.btn:active { transform: none !important; }
.tool-btn[style] { border: none !important; } /* JS recolours text only */

/* Inputs: blue-on-grey DOS fields */
.input-duration, .select-viewport, .select-field, .text-area {
    background: var(--dos-black) !important;
    border: 1px solid var(--dos-dark-gray) !important;
    padding: 0 9px !important;
    outline: none !important;
}
.text-area { padding: 8px 9px !important; }
.select-field:focus, .text-area:focus, .input-duration:focus, .select-viewport:focus {
    border-color: var(--dos-bright-green) !important;
    background: #000000 !important;
}
.checkbox-card { border: 1px solid var(--dos-dark-gray) !important; padding: 0 9px !important; }
.checkbox-card:has(input:checked) { border-color: var(--dos-green) !important; }
.checkbox-card input[type="checkbox"] { width: 9px !important; height: 16px !important; }
.chk-text small { color: var(--dos-med-gray) !important; }

/* Rules and separators */
.scene-core-bar, .scene-sequencer-bar, .action-bar, .scene-tabs-bar, .build-status, .bbs-cmd-bar {
    border-top-style: solid !important;
}
.action-bar, .scene-core-bar { padding: 8px 9px !important; }

/* CRT bezel: plain double-line frame, no 3D */
.crt-bezel {
    background: #000000 !important;
    border: 3px double var(--dos-dark-gray) !important;
    box-shadow: none !important;
    padding: 8px !important;
}
.crt-inner { box-shadow: none !important; }
.crt-inner::after { background: none !important; }

/* Progress: the CP437 bar in the modal is the meter */
.bbs-meter-track { display: none !important; }
.bbs-ansi-meter { color: var(--dos-bright-green); text-align: left; }
.bbs-log-text { height: 128px; }

/* Cmd bar */
.bbs-cmd-bar { background: var(--dos-light-gray) !important; color: var(--dos-black) !important; padding: 0 9px !important; border-top: none !important; }
.bbs-cmd-bar .bbs-cyan, .bbs-cmd-bar .bbs-white, .bbs-cmd-bar .bbs-clock, .bbs-cmd-bar span { color: var(--dos-black) !important; }
.bbs-cmd-bar .bbs-cursor { color: var(--dos-black) !important; }

/* Block scrollbars */
* { scrollbar-width: auto; scrollbar-color: var(--dos-light-gray) #000000; }
::-webkit-scrollbar { width: 16px; height: 16px; background: #000; }
::-webkit-scrollbar-thumb { background: var(--dos-light-gray); border: 0; }
::-webkit-scrollbar-track { background: repeating-conic-gradient(#555 0% 25%, #000 0% 50%) 0 0 / 4px 4px; }
::selection { background: var(--dos-light-gray); color: var(--dos-black); }

/* Palette Preview & Segmented Functional Legend (Option 1) */
.palette-preview-card {
    position: relative;
    margin-top: 8px;
    background: #020502;
    border: 1px solid var(--dos-dark-gray);
    padding: 8px;
    border-radius: 4px;
}

.palette-preview-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-family: var(--font-dos);
    margin-bottom: 6px;
    overflow: hidden;
}

.palette-desc-text {
    color: var(--dos-cyan);
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    flex-shrink: 1;
    min-width: 0;
}

.palette-preview-title > span:first-child {
    white-space: nowrap;
    flex-shrink: 0;
}

.palette-bar-wrapper {
    width: 100%;
    background: #000;
    border: 1px solid var(--dos-dark-gray);
    border-radius: 2px;
    overflow: hidden;
}

.palette-bar-wrapper img {
    width: 100%;
    height: 28px;
    display: block;
    image-rendering: pixelated;
}

.palette-legend-strip {
    display: flex;
    width: 100%;
    margin-top: 5px;
    border-top: 1px solid var(--dos-dark-gray);
    padding-top: 4px;
    font-family: var(--font-dos);
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
}

.palette-legend-seg {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 3px 4px;
    border-right: 1px solid #222;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    user-select: none;
    border-top: 2px solid transparent;
    box-sizing: border-box;
    overflow: hidden;
}

.palette-legend-seg:last-child {
    border-right: none;
}

.palette-legend-seg:hover {
    background: rgba(85, 255, 85, 0.18);
    border-top-color: var(--dos-bright-green);
}

.palette-legend-seg.active-seg {
    background: rgba(85, 255, 255, 0.22);
    border-top-color: var(--dos-bright-cyan);
}

.palette-legend-seg .seg-range {
    font-size: 9px;
    color: var(--dos-yellow);
    line-height: 1.1;
    font-weight: bold;
}

.palette-legend-seg .seg-name {
    font-size: 10px;
    color: var(--dos-white);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.palette-legend-seg .seg-caret {
    font-size: 7px;
    color: var(--dos-yellow);
    margin-left: 2px;
}

.palette-legend-seg .seg-active-ramp {
    font-size: 8px;
    color: var(--dos-bright-cyan);
    font-weight: bold;
    line-height: 1.1;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.palette-legend-seg .seg-fx {
    font-size: 8px;
    color: var(--dos-med-gray);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* Floating Retro BBS Ramp Picker Popover */
.palette-ramp-picker {
    position: absolute;
    top: calc(100% + 4px);
    z-index: 1050;
    width: 320px;
    max-width: 95vw;
    background: #080808;
    border: 2px solid var(--dos-bright-cyan);
    box-shadow: 4px 4px 0px #000000;
    font-family: var(--font-dos);
}

.ramp-picker-header {
    background: var(--dos-blue);
    color: var(--dos-bright-white);
    padding: 5px 8px;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--dos-bright-cyan);
}

.ramp-picker-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ramp-picker-close {
    color: var(--dos-bright-red);
    cursor: pointer;
    font-weight: bold;
    padding: 0 4px;
}

.ramp-picker-close:hover {
    color: #ffffff;
    background: var(--dos-red);
}

.ramp-picker-list {
    max-height: 240px;
    overflow-y: auto;
    padding: 2px 0;
}

.ramp-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    cursor: pointer;
    border-bottom: 1px solid #181818;
    transition: background 0.1s ease;
}

.ramp-picker-item:hover {
    background: #003300;
    color: var(--dos-bright-green);
}

.ramp-picker-item.selected {
    background: #004422;
    border-left: 3px solid var(--dos-bright-green);
    color: #ffffff;
}

.ramp-picker-item .ramp-swatch {
    width: 80px;
    height: 16px;
    border: 1px solid #444;
    border-radius: 1px;
    flex-shrink: 0;
    box-shadow: 1px 1px 0px #000;
}

.ramp-picker-item .ramp-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.ramp-picker-item .ramp-title {
    font-size: 10px;
    color: var(--dos-white);
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ramp-picker-item.selected .ramp-title {
    color: var(--dos-yellow);
}

.ramp-picker-item .ramp-count {
    font-size: 8px;
    color: var(--dos-med-gray);
}

@media (max-width: 600px) {
    .palette-legend-seg .seg-fx {
        display: none;
    }
    .palette-ramp-picker {
        left: 0 !important;
        right: 0 !important;
        width: 100%;
    }
}