/* DL2CC CW Summit — web port of the desktop FormCwSummit arcade styling.
   Same console palette as the Balloon Burst app: deep-navy canvas, neon
   cyan/gold/green stats, magenta title, Consolas arcade type. */

:root {
    --bg: #0f0f23;            /* rgb(15,15,35) — canvas + sidebar */
    --panel-btn: #141437;     /* rgb(20,20,55) — button faces */
    --sep: #233259;           /* rgb(35,50,90) — separator lines */
    --caption: #556ea5;       /* rgb(85,110,165) — stat captions */
    --title: #dc32c8;         /* rgb(220,50,200) — arcade title */
    --cyan: #00e6ff;          /* rgb(0,230,255) — score */
    --cyan-btn: #00d2ff;      /* rgb(0,210,255) — button text */
    --cyan-border: #0078aa;   /* rgb(0,120,170) — button borders */
    --gold: #ffd700;          /* rgb(255,215,0) — level / values */
    --orange: #ffa500;        /* rgb(255,165,0) — high score / listen badge */
    --green: #50ff82;         /* rgb(80,255,130) — bursts */
    --dim: #506ea0;           /* rgb(80,100,140)-ish — inactive */
    --text: #dcebff;
    --muted: #8b98a8;
    --mono: Consolas, "Cascadia Code", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    display: flex;
    flex-direction: column;
}

.app {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 16px 0;
    min-height: 0;
}

/* ── Header (matches the trainer apps) ─────────────────────────── */

.app-header {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    border-bottom: 1px solid var(--sep); padding-bottom: 10px; margin-bottom: 10px;
    flex: 0 0 auto;
}
.app-header h1 { font-size: 1.15rem; margin: 0; flex: 0 0 auto; }
.app-nav { display: flex; gap: 4px; flex: 1 1 auto; flex-wrap: wrap; }

.nav-switch {
    align-self: center;
    color: var(--muted);
    padding: 6px 8px;
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
}
.nav-switch:hover { color: var(--text); text-decoration: underline; }

.box-status { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); flex-wrap: wrap; }
.box-status.connected #box-status-text { color: var(--green); }
.box-status button {
    background: var(--panel-btn); color: var(--text); border: 1px solid var(--sep);
    padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: .85rem;
}
.box-status button:hover:not(:disabled) { border-color: var(--cyan-border); }
.box-status button:disabled { opacity: .45; cursor: not-allowed; }

/* Box-link controls: path dropdown + pairing key (cwchat/remote pattern). */
.box-status select,
.box-status input[type="password"] {
    background: var(--panel-btn); color: var(--text); border: 1px solid var(--sep);
    padding: 6px 8px; border-radius: 6px; font-size: .85rem;
}
.box-status select:disabled,
.box-status input[type="password"]:disabled { opacity: .45; }
.box-status input[type="password"] { width: 150px; }
.network-key-field { display: inline-flex; align-items: center; gap: 6px; }
.network-key-field[hidden] { display: none; }
.remember-inline {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .78rem; white-space: nowrap; cursor: pointer;
}

/* ── Game shell: arcade sidebar + canvas ───────────────────────── */

.game-shell {
    flex: 1 1 auto;
    display: flex;
    gap: 2px;
    min-height: 480px;
    border: 1px solid var(--sep);
    border-radius: 8px;
    overflow: hidden;
    background: #1e2d50; /* splitter colour rgb(30,45,80) */
}

.arcade-sidebar {
    position: relative;
    flex: 0 0 172px;
    background: var(--bg);
    overflow: hidden;   /* the inner .sidebar-scroll scrolls, so the settings overlay stays put */
    display: flex;
    flex-direction: column;
    font-family: var(--mono);
}

.sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
}

.canvas-wrap {
    position: relative;
    flex: 1 1 auto;
    background: var(--bg);
    min-width: 0;
}
#game-canvas { display: block; touch-action: manipulation; }

/* ── Sidebar building blocks ───────────────────────────────────── */

.arcade-title-row {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 30px;
}
.arcade-title {
    flex: 1 1 auto;
    text-align: center;
    color: var(--title);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .04em;
}
.gear-btn, .close-btn {
    flex: 0 0 auto;
    background: transparent; border: none; cursor: pointer;
    color: var(--text); font-size: 1rem; padding: 2px 6px; border-radius: 4px;
}
.gear-btn:hover:not(:disabled) { background: #1e2d50; }
.gear-btn:disabled { opacity: .35; cursor: not-allowed; }
.close-btn { color: #f07878; border: 1px solid #b45050; font-size: .8rem; }
.close-btn:hover { background: #a02828; color: #ffa0a0; }

.arcade-sep { border: none; border-top: 1px solid var(--sep); margin: 4px 0; width: 100%; }

.arcade-stat { display: flex; flex-direction: column; }
.cap { color: var(--caption); font-size: .68rem; letter-spacing: .03em; }
.section-cap { margin-top: 8px; }
.val { font-weight: 700; line-height: 1.15; }
.val.big { font-size: 1.5rem; }
.val.mid { font-size: 1.1rem; }
.cyan { color: var(--cyan); }
.gold { color: var(--orange); }
.yellow { color: var(--gold); }
.green { color: var(--green); }

.conn-row { display: flex; justify-content: space-between; align-items: baseline; }
.mode-badge { font-size: .72rem; font-weight: 700; user-select: none; }
/* Idle only: the badge is a mode toggle (click flips SHOW ⇆ LISTEN). */
.mode-badge.clickable { cursor: pointer; }
.mode-badge.clickable:hover { text-decoration: underline; }
.conn-text { font-size: .78rem; color: #96a5c8; word-break: break-word; }

/* ── Buttons ───────────────────────────────────────────────────── */

.arcade-primary {
    margin-top: 6px;
    background: var(--panel-btn);
    border: 1px solid #00aadc;
    color: var(--cyan-btn);
    font-family: var(--mono);
    font-weight: 700;
    font-size: .9rem;
    padding: 9px 0;
    border-radius: 4px;
    cursor: pointer;
}
.arcade-primary:hover { background: #00325a; }
.arcade-primary:active { background: #005078; }

.leaderboard-status {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 6px 0 2px;
    padding: 7px 8px;
    border: 1px solid #6f5120;
    border-radius: 5px;
    background: rgba(72, 45, 8, .32);
    line-height: 1.25;
}
.leaderboard-status.eligible {
    border-color: rgba(80, 255, 130, .55);
    background: rgba(20, 92, 48, .22);
}
.leaderboard-status-title {
    color: var(--orange);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .035em;
}
.leaderboard-status.eligible .leaderboard-status-title { color: var(--green); }
.leaderboard-status-detail {
    color: #a9b8d8;
    font-size: .68rem;
}

.arcade-secondary {
    margin-top: 10px;
    background: var(--panel-btn);
    border: 1px solid #324678;
    color: #5a6ea0;
    font-family: var(--mono);
    font-size: .78rem;
    padding: 7px 0;
    border-radius: 4px;
    cursor: pointer;
}
.arcade-secondary:hover { background: #141e41; }

.arcade-btn {
    background: var(--panel-btn);
    border: 1px solid var(--cyan-border);
    color: var(--cyan-btn);
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1rem;
    width: 36px; height: 28px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
}
.arcade-btn.slim { width: 28px; }
.arcade-btn:hover:not(:disabled) { background: #002846; }
.arcade-btn:active:not(:disabled) { background: #003c64; }
.arcade-btn:disabled { color: var(--dim); border-color: #283758; cursor: not-allowed; }

.stepper { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.stepper-val {
    flex: 1 1 auto;
    text-align: center;
    color: var(--gold);
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1.05rem;
}
.stepper-val.small { font-size: .82rem; }
.stepper-val.dim { color: #5a6ea0; }

.toggle-row { display: flex; gap: 4px; }
.arcade-toggle {
    flex: 1 1 0;
    background: var(--panel-btn);
    border: 1px solid #28375a;      /* rgb(40,55,90) inactive border */
    color: var(--dim);
    font-family: var(--mono);
    font-weight: 700;
    font-size: .74rem;
    padding: 7px 0;
    border-radius: 4px;
    cursor: pointer;
}
.arcade-toggle.active {
    background: #003c64;            /* rgb(0,60,100) */
    color: var(--cyan);
    border-color: #00b4e6;          /* rgb(0,180,230) */
}
.arcade-toggle:disabled { opacity: .4; cursor: not-allowed; }

/* Volume slider in arcade colours. */
#vol-slider {
    width: 100%;
    margin: 4px 0 8px;
    accent-color: var(--cyan-btn);
}

/* ── Settings overlay (covers the sidebar, like PnlSettings) ───── */

.settings-panel {
    position: absolute;
    inset: 0;
    background: var(--bg);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;  /* don't chain scrolling into the page */
    z-index: 5;
}
.settings-panel[hidden] { display: none; }

/* Visually hidden but still focusable — must NOT use display/visibility:none
   or opacity-collapsed sizing, or iOS Safari won't open the soft keyboard. */
.game-hidden-input {
    position: absolute; left: -9999px; width: 1px; height: 1px;
    opacity: 0; border: 0; padding: 0; margin: 0;
}

/* ── Legal footer ──────────────────────────────────────────────── */

.legal-footer {
    flex: 0 0 auto;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
    font-size: .8rem; color: var(--muted);
}
.legal-footer a, .legal-footer a:visited { color: inherit; text-decoration: none; }
.legal-footer a:hover { text-decoration: underline; }
.legal-footer .sep { color: var(--sep); }
.legal-footer .copy { margin-left: auto; }

/* ── Small screens: sidebar shrinks, shell stacks ──────────────── */

@media (max-width: 640px) {
    .app { padding: 8px 8px 0; }
    .game-shell { flex-direction: column; min-height: 0; }
    .arcade-sidebar { flex: 0 0 auto; max-height: 44vh; }
    /* Stats pack into three columns; every control row keeps full width so
       captions stay glued to their steppers. */
    .sidebar-scroll {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
        column-gap: 8px;
    }
    .sidebar-scroll > * { grid-column: 1 / -1; }
    .sidebar-scroll > .arcade-stat { grid-column: auto; }
    /* The fixed-pixel game geometry needs headroom: 5 stacked balloons reach
       y=358, so anything shorter ends games on invisible balloons. */
    .canvas-wrap { flex: 1 1 auto; min-height: 460px; }
    .settings-panel { position: fixed; inset: 0; z-index: 50; }
    .legal-footer .copy { margin-left: 0; flex-basis: 100%; }
}

/* -- Box-connect dock -------------------------------------------- */
/* Moved out of the header so the main content owns the top of the
   screen; the link controls sit in their own strip above the footer. */

.box-dock {
    flex: 0 0 auto;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}
.box-dock .box-status {
    border-top: 1px solid var(--sep);
    padding-top: 10px;
}