:root {
    --bg: #05070a;
    --panel: rgba(10, 14, 19, 0.82);
    --panel-line: rgba(255, 255, 255, 0.10);
    --ink: #f2f6f8;
    --ink-dim: rgba(233, 241, 245, 0.58);
    --ink-faint: rgba(233, 241, 245, 0.34);
    --bull: #45e08a;
    --bull-soft: rgba(69, 224, 138, 0.16);
    --bear: #ff5b6e;
    --bear-soft: rgba(255, 91, 110, 0.16);
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

/* Screen-reader only — visible to crawlers but hidden visually */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html, body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    overflow: hidden;
}

/* The shell is a flex column: top bar, stage, footer. The stage simply takes
   whatever is left, so no breakpoint has to redo height arithmetic. 100dvh
   keeps it honest while mobile browsers slide their URL bar in and out. */
body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    /* Notch and home indicator on iOS in landscape. */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    overscroll-behavior: none;
}

/* ---------------------------------------------------------------- top bar */

.topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 20px 12px;
    padding-top: max(14px, env(safe-area-inset-top));
    background: #05070a;
    border-bottom: 1px solid var(--panel-line);
    flex: none;
}

.brand { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.brand h1 { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.brand p { margin: 0; font-size: 12.5px; color: var(--ink-dim); flex-basis: 100%; }

.brand-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--ink-faint);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
    transition: background 0.3s, box-shadow 0.3s;
}
.brand-dot.up { background: var(--bull); box-shadow: 0 0 10px var(--bull); }
.brand-dot.down { background: var(--bear); box-shadow: 0 0 10px var(--bear); }

.topbar-controls { display: flex; align-items: center; gap: 10px; flex: none; }

.field { display: flex; flex-direction: column; gap: 3px; }
.field > span {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--ink-faint); font-weight: 600;
}
.field select, .icon-btn, .btn {
    font-family: var(--sans); font-size: 14px; color: var(--ink);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--panel-line);
    border-radius: 7px; padding: 6px 10px; cursor: pointer;
}
.field select { min-width: 190px; }
.icon-btn { font-size: 15px; line-height: 1; padding: 8px 10px; align-self: flex-end; opacity: 0.45; }
.icon-btn[aria-pressed="true"] { opacity: 1; background: rgba(69, 224, 138, 0.16); border-color: rgba(69, 224, 138, 0.4); }
.icon-btn:hover { opacity: 0.85; }

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-dim);
    opacity: 0.5;
    transition: color 0.2s, opacity 0.2s;
}
.social-link:hover {
    color: #E1306C;
    opacity: 1;
    background: rgba(225, 48, 108, 0.12);
}
.social-link svg { display: block; }

/* ----------------------------------------------------------------- footer */

.site-footer {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 16px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    background: rgba(5, 7, 10, 0.85);
    border-top: 1px solid var(--panel-line);
    font-size: 11px;
    color: var(--ink-faint);
    z-index: 100;
}
.site-footer a {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--ink-dim);
    text-decoration: none;
    transition: color 0.2s;
}
.site-footer a:hover { color: #E1306C; }
.site-footer a[title="Connect on LinkedIn"]:hover { color: #0A66C2; }
.site-footer svg { flex-shrink: 0; }
.footer-sep { opacity: 0.4; }
.footer-link {
    background: none;
    border: none;
    color: var(--ink-dim);
    font: inherit;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}
.footer-link:hover { color: var(--ink); }

/* -------------------------------------------------------------- legal dialog */

.legal-dialog {
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--panel-line);
    border-radius: 8px;
    padding: 0;
    max-width: 560px;
    max-height: 80vh;
    width: 90%;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7);
}
.legal-dialog::backdrop { background: rgba(0,0,0,0.7); }
.legal-content {
    padding: 28px 32px;
    overflow-y: auto;
    max-height: 80vh;
    font-size: 13px;
    line-height: 1.6;
}
.legal-content h2 {
    font-size: 16px;
    margin: 24px 0 12px;
    color: var(--ink);
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 {
    font-size: 13px;
    margin: 18px 0 8px;
    color: var(--ink-dim);
}
.legal-content p { margin: 0 0 12px; color: var(--ink-dim); }
.legal-content ul { margin: 0 0 12px; padding-left: 20px; color: var(--ink-dim); }
.legal-content li { margin-bottom: 6px; }
.legal-content a { color: var(--bull); }
.legal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: var(--ink-dim);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}
.legal-close:hover { background: rgba(255,255,255,0.1); }

/* ------------------------------------------------------------------ stage */

.stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
/* touch-action: none - the canvas handles pan and pinch itself, and the page
   must not scroll or bounce underneath it. */
#battlefield {
    display: block; width: 100%; height: 100%; cursor: grab;
    touch-action: none;
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
}
#battlefield.dragging { cursor: grabbing; }

.hud { position: absolute; inset: 0; pointer-events: none; }
.hud > * { pointer-events: auto; }

.hud-label {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--ink-faint); font-weight: 600;
}

/* clock, price, pressure ------------------------------------------------- */

.hud-clock {
    position: absolute; top: 16px; left: 20px;
    font-family: var(--mono); font-size: 14px; color: var(--ink-dim);
    letter-spacing: 0.06em;
}
.hud-clock span { color: var(--ink); }

.hud-price {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    text-align: center; min-width: 300px;
}
.hud-price-src {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--ink-faint); font-weight: 600;
}
.hud-price-value {
    font-family: var(--mono); font-size: 44px; font-weight: 700;
    letter-spacing: -0.015em; line-height: 1.08;
    text-shadow: 0 3px 22px rgba(0, 0, 0, 0.85);
    transition: color 0.25s;
}
.hud-price-value.up { color: var(--bull); }
.hud-price-value.down { color: var(--bear); }
.hud-price-change { font-family: var(--mono); font-size: 15px; color: var(--ink-dim); }
.hud-price-change.up { color: var(--bull); }
.hud-price-change.down { color: var(--bear); }

.hud-pressure {
    position: absolute; top: 18px; left: calc(50% + 190px);
    width: 250px; padding-left: 20px;
    border-left: 1px solid var(--panel-line);
}
.hud-pressure-text { font-size: 19px; font-weight: 600; margin-top: 3px; }
.hud-pressure-bar {
    position: relative; height: 4px; margin: 8px 0 6px;
    background: rgba(255, 255, 255, 0.09); border-radius: 2px; overflow: hidden;
}
.hud-pressure-bar i {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 0;
    background: var(--ink-faint); border-radius: 2px;
    transition: left 0.4s ease, width 0.4s ease, background 0.4s;
}
.hud-pressure-sub { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); }
.hud-front {
    font-family: var(--mono); font-size: 13px; margin-top: 5px;
    padding-top: 5px; border-top: 1px solid var(--panel-line); color: var(--ink-dim);
}
.hud-front b { font-weight: 700; }
.hud-front.up b { color: var(--bull); }
.hud-front.down b { color: var(--bear); }

/* wall totals ------------------------------------------------------------ */

.hud-wall { position: absolute; top: 118px; padding: 8px 14px; }
.hud-wall-bid { left: 0; border-left: 3px solid var(--bull); background: linear-gradient(90deg, var(--bull-soft), transparent); }
.hud-wall-ask { right: 0; text-align: right; border-right: 3px solid var(--bear); background: linear-gradient(270deg, var(--bear-soft), transparent); }
.hud-wall-value {
    font-family: var(--mono); font-size: 30px; font-weight: 700; line-height: 1.15;
    transition: opacity 0.4s;
}
.hud-wall-bid .hud-wall-value { color: var(--bull); }
.hud-wall-ask .hud-wall-value { color: var(--bear); }
/* Depth snapshot is old or synthesised: the totals are still shown, but they
   stop claiming to be current. */
.hud-wall-value.stale { opacity: 0.42; }

/* panels ----------------------------------------------------------------- */

/* On desktop the wrapper does nothing: the two panels stay absolutely placed
   in the corners of the stage. Small screens turn it into a bottom sheet. */
.panels { display: contents; }
.sheet-tabs, .touch-controls { display: none; }

.panel {
    position: absolute; bottom: 18px;
    background: var(--panel);
    border: 1px solid var(--panel-line);
    border-radius: 12px;
    padding: 12px 14px;
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.panel-title { font-family: var(--mono); font-size: 15px; font-weight: 500; margin-top: 2px; }

.panel-depth { left: 18px; width: 500px; }
#depthChart { display: block; width: 100%; height: 112px; margin-top: 9px; border-radius: 6px; }
.depth-axis {
    display: flex; justify-content: space-between;
    font-family: var(--mono); font-size: 12.5px; margin-top: 4px;
}
.depth-axis span:first-child { color: var(--bull); }
.depth-axis span:last-child { color: var(--bear); }
.depth-axis span:nth-child(2) { color: var(--ink-dim); }

.army-counts { display: flex; gap: 14px; font-size: 13px; color: var(--ink-dim); }
.army { display: inline-flex; align-items: center; gap: 5px; }
.army i { width: 9px; height: 9px; border-radius: 2px; }
.army.bull i { background: var(--bull); }
.army.bear i { background: var(--bear); }
.army.builders i { background: #e8c98a; }
.army[hidden] { display: none; }

.legend {
    display: flex; flex-wrap: wrap; gap: 5px 14px;
    margin-top: 10px; padding-top: 9px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12.5px; color: var(--ink-dim);
}
.legend em { font-style: normal; color: var(--ink-faint); }
.army b { font-family: var(--mono); color: var(--ink); font-weight: 700; }

.hint { margin-top: 9px; font-size: 12px; color: var(--ink-faint); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
kbd {
    font-family: var(--mono); font-size: 11px; padding: 2px 6px;
    border: 1px solid var(--panel-line); border-radius: 4px;
    background: rgba(255, 255, 255, 0.05); color: var(--ink-dim);
}

.panel-feed { right: 18px; width: 440px; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-dim); }
.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.live.on i { background: var(--bull); box-shadow: 0 0 8px var(--bull); animation: pulse 1.8s infinite; }
.live.err i { background: var(--bear); box-shadow: 0 0 8px var(--bear); }
@keyframes pulse { 50% { opacity: 0.35; } }

#feedList { list-style: none; margin: 10px 0 0; padding: 0; max-height: 200px; overflow: hidden; }
#feedList li {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0; font-size: 13.5px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    animation: slideIn 0.3s ease;
}
#feedList li:first-child { border-top: none; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-7px); } }
.feed-tag {
    flex: none; width: 5px; height: 30px; border-radius: 3px;
    background: var(--ink-faint);
}
.feed-tag.bull { background: var(--bull); }
.feed-tag.bear { background: var(--bear); }
.feed-main { flex: 1; min-width: 0; }
.feed-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-sub { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
.feed-amount { font-family: var(--mono); font-size: 14.5px; font-weight: 700; flex: none; }
.feed-amount.bull { color: var(--bull); }
.feed-amount.bear { color: var(--bear); }

/* overlays --------------------------------------------------------------- */

.overlay, .keyprompt {
    position: absolute; inset: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center;
    background: rgba(5, 7, 10, 0.88); backdrop-filter: blur(6px);
}
.overlay[hidden], .keyprompt[hidden] { display: none; }
.overlay-card { text-align: center; color: var(--ink-dim); font-size: 13px; }
.spinner {
    width: 26px; height: 26px; margin: 0 auto 14px;
    border: 2px solid rgba(255, 255, 255, 0.14);
    border-top-color: var(--bull); border-radius: 50%;
    animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.keyprompt-card {
    width: min(460px, 90vw); padding: 24px;
    background: #0b1014; border: 1px solid var(--panel-line); border-radius: 14px;
}
.keyprompt-card h2 { margin: 0 0 8px; font-size: 17px; }
.keyprompt-card p { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--ink-dim); }
.keyprompt-card code { font-family: var(--mono); font-size: 12px; color: var(--ink); }
#keyInput {
    width: 100%; padding: 9px 11px; font-family: var(--mono); font-size: 13px;
    color: var(--ink); background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--panel-line); border-radius: 8px;
}
.keyprompt-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.btn { background: var(--bull); color: #04120a; border-color: transparent; font-weight: 600; }
.btn.ghost { background: rgba(255, 255, 255, 0.06); color: var(--ink); }

/* ============================================================
   RESPONSIVE DESIGN

   Three layouts, not a pile of tweaks:

   a) Desktop (> 900px)  - HUD scattered around the field, as designed.
   b) Compact (<= 900px) - the two panels collapse into one bottom sheet with
      Depth / Feed tabs, so a phone still gets the order book, and the sheet
      can be folded away to hand the whole screen back to the battle.
   c) Short landscape    - same sheet, docked to the right instead, because
      vertical space is the scarce one there.

   Sizes step down at 1280 / 1024 / 900 / 560 / 380. Touch devices get bigger
   hit targets and the on-screen zoom cluster instead of keyboard hints.
   ============================================================ */

/* Large tablets / small laptops: the pressure column is the first to go. */
@media (max-width: 1280px) {
    .hud-pressure { display: none; }
    .panel-depth { width: 380px; }
    .panel-feed { width: 320px; }
    /* Narrow panels: let the army counts drop to their own line instead of
       squeezing the title into three. */
    .panel-head { flex-wrap: wrap; gap: 4px 12px; }
    .panel-depth .panel-head > div:first-child { display: flex; align-items: baseline; gap: 8px; }
    .panel-title { white-space: nowrap; }
}

/* Tablets landscape */
@media (max-width: 1024px) {
    .topbar { padding: 12px 16px; gap: 16px; }
    .brand h1 { font-size: 17px; }
    .brand p { font-size: 11px; }

    .field select { min-width: 150px; font-size: 13px; }

    .hud-price-value { font-size: 38px; }
    .hud-price-change { font-size: 14px; }

    .panel-depth { width: 330px; }
    .panel-feed { width: 300px; }
    #depthChart { height: 88px; }

    .hud-wall { top: 104px; }
    .hud-wall-value { font-size: 24px; }

    .legend { font-size: 11px; gap: 4px 10px; }
    .hint { font-size: 11px; }
    kbd { font-size: 10px; padding: 2px 5px; }
}

/* ------------------------------------------------ compact: one bottom sheet */

@media (max-width: 900px) {
    /* Top bar: one row, brand shrinks first, controls keep their size. */
    .topbar {
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        padding-top: max(8px, env(safe-area-inset-top));
    }
    .brand { flex: 0 1 auto; min-width: 0; align-items: center; gap: 8px; }
    .brand h1 {
        font-size: 15px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .brand p { display: none; }

    .topbar-controls { flex: 0 1 auto; min-width: 0; gap: 6px; }
    .field { min-width: 0; }
    .field > span { display: none; }
    .field select {
        min-width: 0; width: 100%; max-width: 150px;
        font-size: 13px; padding: 7px 8px;
    }
    .icon-btn { align-self: center; padding: 7px 9px; font-size: 14px; }

    /* HUD: price stays centre stage, walls become a slim band beneath it. */
    .hud-clock { display: none; }

    .hud-price { top: 8px; min-width: 0; width: max-content; }
    .hud-price-src { font-size: 9.5px; letter-spacing: 0.1em; }
    .hud-price-value { font-size: 30px; }
    .hud-price-change { font-size: 12px; }

    .hud-wall {
        top: 8px; padding: 4px 10px;
        background: none; border: none;
    }
    .hud-wall-bid { left: 0; border-left: 2px solid var(--bull); }
    .hud-wall-ask { right: 0; border-right: 2px solid var(--bear); }
    .hud-wall .hud-label { font-size: 8.5px; letter-spacing: 0.08em; }
    .hud-wall-value { font-size: 15px; }

    /* The sheet itself. */
    .panels {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 8px; right: 8px; bottom: 8px;
        max-height: 46%;
        background: var(--panel);
        border: 1px solid var(--panel-line);
        border-radius: 12px;
        backdrop-filter: blur(14px);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
        overflow: hidden;
        pointer-events: auto;
    }

    .sheet-tabs {
        display: flex; align-items: center; gap: 6px;
        padding: 6px 8px;
        border-bottom: 1px solid var(--panel-line);
        flex: none;
    }
    .sheet-tab {
        font: inherit; font-size: 11px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.1em;
        color: var(--ink-faint);
        background: none; border: none; border-radius: 6px;
        padding: 6px 10px; cursor: pointer;
    }
    .sheet-tab.is-active { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
    .sheet-toggle {
        margin-left: auto;
        font: inherit; font-size: 13px; line-height: 1;
        color: var(--ink-dim);
        background: none; border: none; border-radius: 6px;
        padding: 6px 10px; cursor: pointer;
        transition: transform 0.2s;
    }
    .sheet-toggle[aria-expanded="false"] { transform: rotate(180deg); }

    /* Panels lose their own chrome and become the sheet body. */
    .panel {
        position: static;
        width: auto; left: auto; right: auto; bottom: auto;
        background: none; border: none; border-radius: 0;
        box-shadow: none; backdrop-filter: none;
        padding: 10px 12px 12px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .panels.tab-depth .panel-feed,
    .panels.tab-feed .panel-depth { display: none; }
    /* Folded away: only the tab strip is left. */
    .panels.collapsed .panel { display: none; }

    .panel-head { align-items: center; gap: 10px; flex-wrap: wrap; }
    /* The tab strip already names the panel, so its own caption is redundant. */
    .panel-depth .panel-head .hud-label { display: none; }
    .panel-title { font-size: 13px; margin-top: 0; white-space: nowrap; }
    .army-counts { flex-wrap: wrap; }
    .hud-label { font-size: 9.5px; letter-spacing: 0.1em; }

    #depthChart { height: 84px; }
    .depth-axis { font-size: 11px; }
    .army-counts { font-size: 11.5px; gap: 10px; }
    .legend { display: none; }

    #feedList { max-height: none; }
    #feedList li { padding: 5px 0; font-size: 12.5px; gap: 8px; }
    .feed-tag { height: 26px; width: 4px; }
    /* One line per event: a wrapped row costs more than the tail of the text. */
    .feed-sub {
        display: block; font-size: 11px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .feed-amount { font-size: 13px; }
    .live { font-size: 11px; }

    .site-footer { padding: 5px 12px; padding-bottom: max(5px, env(safe-area-inset-bottom)); font-size: 10px; }
    .site-footer svg { width: 13px; height: 13px; }

    .legal-dialog { width: 94%; max-height: 86vh; }
    .legal-content { padding: 20px; font-size: 12.5px; max-height: 86vh; }
    .legal-content h2 { font-size: 15px; margin: 20px 0 10px; }
    .legal-content h3 { font-size: 12px; }
}

/* ------------------------------------------------------- phones, portrait */

@media (max-width: 560px) {
    .topbar { padding: 7px 10px; padding-top: max(7px, env(safe-area-inset-top)); gap: 8px; }
    .brand h1 { font-size: 13px; }
    .brand-dot { width: 8px; height: 8px; flex: none; }

    .topbar-controls { flex: 1 1 auto; justify-content: flex-end; }
    .field { flex: 1 1 0; }
    .field select { max-width: none; font-size: 12px; padding: 7px 6px; }

    .hud-price { top: 6px; }
    .hud-price-value { font-size: 26px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); }
    .hud-price-change { font-size: 11px; }
    .hud-price-src { font-size: 8.5px; }

    /* Corners keep the bare totals: the colour says which side they are. */
    .hud-wall { top: 6px; padding: 3px 8px; max-width: 26vw; }
    .hud-wall .hud-label { display: none; }
    .hud-wall-value { font-size: 14px; }

    .panels { left: 6px; right: 6px; bottom: 6px; max-height: 44%; border-radius: 10px; }
    .panel { padding: 8px 10px 10px; }
    .sheet-tab { padding: 6px 8px; font-size: 10px; }

    #depthChart { height: 72px; }
    #feedList li { font-size: 11.5px; }
    .feed-sub { font-size: 10px; }

    .keyprompt-card { width: min(400px, 92vw); padding: 18px; }
    .keyprompt-card h2 { font-size: 15px; }
    .keyprompt-card p { font-size: 12px; }
    .btn { font-size: 13px; }

    .legal-content { padding: 16px; font-size: 12px; }
    .legal-close { top: 8px; right: 8px; }
}

/* Narrow phones: the pulsing dot carries the brand, the selects get the room. */
@media (max-width: 430px) {
    .brand h1 { display: none; }
    .brand { flex: none; }
}

/* Small phones (iPhone SE and friends) */
@media (max-width: 380px) {
    .field select { font-size: 11px; padding: 6px 4px; }
    .icon-btn { padding: 6px 7px; font-size: 12px; }

    .hud-price-value { font-size: 23px; }
    .hud-wall-value { font-size: 12.5px; }

    .panels { max-height: 42%; }
    #depthChart { height: 62px; }
    #feedList li { font-size: 11px; }
}

/* ------------------------------------------------------ short / landscape */

/* Phone landscape: height is the scarce axis, so the sheet docks right and the
   top bar shrinks to a single thin strip. */
@media (max-height: 560px) and (orientation: landscape) {
    .topbar { padding: 5px 12px; padding-top: max(5px, env(safe-area-inset-top)); gap: 10px; }
    .brand h1 { font-size: 13px; }
    .brand p { display: none; }
    .field select { max-width: 140px; font-size: 12px; padding: 5px 8px; }
    .icon-btn { padding: 5px 8px; font-size: 13px; }

    /* The sheet owns the right column, so the price centres on what is left
       of the field instead of on the stage. */
    .hud-price {
        top: 2px; left: 92px; right: calc(min(300px, 42vw) + 14px);
        width: auto; min-width: 0; transform: none;
    }
    .hud-price-src { font-size: 8px; }
    .hud-price-value { font-size: 22px; }
    .hud-price-change { font-size: 10px; }

    /* The sheet owns the right edge here, so both totals stack top-left. */
    .hud-wall { top: 4px; bottom: auto; padding: 2px 10px; }
    .hud-wall-bid { left: 0; }
    .hud-wall-ask {
        left: 0; right: auto; top: 34px; text-align: left;
        border-right: none; border-left: 2px solid var(--bear);
    }
    .hud-wall-value { font-size: 13px; }

    .panels {
        left: auto; right: 6px;
        top: 6px; bottom: 6px;
        width: min(300px, 42vw);
        max-height: none;
    }
    .panels.collapsed { top: auto; }
    .panel { padding: 8px 10px; }
    #depthChart { height: 60px; }
    .army-counts { font-size: 11px; gap: 8px; }

    .site-footer { padding: 3px 10px; padding-bottom: max(3px, env(safe-area-inset-bottom)); font-size: 9px; }
    .legal-dialog { max-height: 92vh; }
    .legal-content { max-height: 92vh; padding: 14px; }
}

/* ------------------------------------------------------------ touch input */

@media (hover: none) and (pointer: coarse) {
    .field select,
    .icon-btn,
    .btn,
    .footer-link,
    .site-footer a,
    .sheet-tab,
    .sheet-toggle,
    .legal-close {
        min-height: 40px;
    }
    .icon-btn, .footer-link, .site-footer a, .legal-close { min-width: 40px; }
    .site-footer { gap: 10px; }
    .site-footer a, .footer-link { display: inline-flex; align-items: center; justify-content: center; }

    /* Keyboard hints mean nothing here; the zoom cluster replaces them. */
    .hint { display: none; }

    .touch-controls {
        display: flex; flex-direction: column; gap: 6px;
        position: absolute; right: 10px; top: 50%;
        transform: translateY(-50%);
    }
    .touch-btn {
        width: 40px; height: 40px;
        font: 600 18px/1 var(--sans); color: var(--ink);
        background: rgba(10, 14, 19, 0.7);
        border: 1px solid var(--panel-line);
        border-radius: 10px;
        backdrop-filter: blur(8px);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .touch-btn:active { background: rgba(69, 224, 138, 0.2); }
}

/* Phone portrait: keep the cluster clear of the sheet below it. */
@media (hover: none) and (pointer: coarse) and (max-width: 560px) {
    .touch-controls { top: 96px; transform: none; }
}

/* The zoom cluster would sit on top of the docked sheet in landscape. */
@media (hover: none) and (pointer: coarse) and (max-height: 560px) and (orientation: landscape) {
    .touch-controls {
        flex-direction: row;
        top: auto; bottom: 8px; left: 8px; right: auto;
        transform: none;
    }
    .touch-btn { width: 36px; height: 36px; font-size: 16px; }
}

/* Users who ask for less motion get no pulsing dots or sliding feed rows. */
@media (prefers-reduced-motion: reduce) {
    .live.on i { animation: none; }
    #feedList li { animation: none; }
}

/* Only ever seen by crawlers and by anyone with scripting off. */
.noscript-note {
    max-width: 60ch;
    margin: 0 auto;
    padding: 48px 24px;
    color: var(--ink-dim);
    font-size: 15px;
    line-height: 1.6;
}
.noscript-note h2 { color: var(--ink); font-size: 22px; margin: 0 0 12px; }
.noscript-note em { color: var(--bull); font-style: normal; }