/* PokerShy — dark CRT casino machine chrome
   Redesigned away from Win95 gray into an early-90s gambling terminal:
   dark plastic cab, VGA-era palette, amber/green/red LEDs, Press Start 2P
   chunky type, subtle scanlines + CRT glow, mechanical beveled keys.
   Layout structure and all hook elements are unchanged. */

@font-face {
    font-family: "PressStart2P";
    src: url("assets/fonts/PressStart2P.ttf") format("truetype");
    font-display: swap;
}

* { box-sizing: border-box; margin: 0; }
:root {
    color-scheme: dark;
    /* responsive scale tokens — overridden per breakpoint below (desktop defaults) */
    /* monitor windows are 2:3 portrait — every bundled capture is a 512×768
       still, drawn into a 48×72 canvas by src/table.js and scaled from here */
    --cam-w: 96px;    --cam-h: 144px;   --station-w: 104px;
    --felt-max-w: 960px; --felt-h: 500px; --felt-border: 22px;
    --table-mt: 90px; --table-mb: 70px;
    /* how far the seat tiles stick past the felt edge */
    --seat-top-outer: -44px; --seat-top-inner: -74px;
    --seat-bot-outer: -28px; --seat-bot-inner: -68px;
    /* community / reveal cards */
    --card-w: 34px; --card-h: 46px; --card-fs: 12px;
    /* small hole cards on the stations */
    --hole-w: 22px; --hole-h: 30px; --hole-fs: 8px;
    --hole-top: -34px; --hole-bottom: -33px; --cards-h: 30px;
    /* tile text */
    --tile-label-fs: 9px; --tile-pinfo-fs: 10px;
    /* chip piles (pot + seat stacks) — --chip-max mirrors CHIP_STACK_MAX in
       src/table.js, which ramps the pile height and picks the denomination */
    --chip-w: 15px; --chip-h: 4px; --chip-max: 10;

    /* dark casino machine palette — VGA-ish 16-bit tones */
    --cab: #120c08;            /* cabinet plastic */
    --cab-hi: #2f2113;         /* raised bevel highlight */
    --rail: #8a5a1c;           /* brass table rail */
    --felt-a: #0d3318;         /* felt greens */
    --felt-b: #05150b;
    --gold: #e8b447;
    --gold-hi: #ffd478;
    --amber: #ffb000;
    --green: #58ff3d;
    --red: #ff2e1c;
    --cream: #efe2bf;
    --ink: #221609;
    --led-glow-amber: 0 0 6px rgba(255, 176, 0, .75);
    --led-glow-green: 0 0 6px rgba(88, 255, 61, .7);
    --led-glow-red: 0 0 6px rgba(255, 46, 28, .7);
    --font: "PressStart2P", "Courier New", monospace;
    --font-tty: "Consolas", "Courier New", monospace;
}

html { background: #070403; }

/* CRT machine interior: near-black plastic lit by a faint casino neon wash. */
body {
    font-family: var(--font-tty);
    color: var(--cream);
    background:
        radial-gradient(130% 90% at 50% -14%, rgba(160, 84, 24, .20), transparent 60%),
        radial-gradient(160% 130% at 50% 118%, rgba(16, 96, 32, .12), transparent 55%),
        linear-gradient(180deg, #0d0805 0%, #080503 55%, #0a0604 100%);
    padding: 6px;
    min-height: 100dvh;
}

/* CRT glass overlay: faint global scanlines + edge vignette. Click-through. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px),
        radial-gradient(125% 105% at 50% 50%, transparent 62%, rgba(0, 0, 0, .38) 100%);
    opacity: .6;
}

#app { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }

/* ===== machine marquee header ===== */
#titlebar {
    background: linear-gradient(180deg, #2b1d10 0%, #1a110a 55%, #241609 100%);
    padding: 6px 12px 6px 30px;   /* left padding clears the pilot LED */
    display: flex; gap: 14px; align-items: center;
    border: 2px solid #000;
    box-shadow:
        inset 0 1px 0 var(--cab-hi),
        inset 0 -3px 0 rgba(0, 0, 0, .8),
        0 0 0 3px #3a2814,
        0 0 22px rgba(255, 176, 0, .10);
    position: relative;
}
#titlebar::before {   /* amber pilot LED */
    content: "";
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    width: 9px; height: 9px; border-radius: 2px;
    background: var(--amber);
    box-shadow: var(--led-glow-amber), 0 0 2px rgba(255, 176, 0, 1);
    animation: ledpulse 1.6s steps(2) infinite;
}
#titlebar .title {
    font-family: var(--font);
    font-size: 15px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--gold-hi);
    text-shadow: 0 0 9px rgba(255, 176, 0, .65), 0 2px 0 #5a3c0a, 0 3px 5px rgba(0, 0, 0, .9);
}
#titlebar .sub {
    font-family: var(--font);
    font-size: 8px; letter-spacing: 1px; color: var(--amber);
    text-shadow: var(--led-glow-amber);
    border: 1px solid rgba(255, 176, 0, .30); background: rgba(0, 0, 0, .4);
    padding: 4px 6px;
}
#handinfo {
    margin-left: auto; font-size: 11px; letter-spacing: .5px;
    color: var(--green); text-shadow: var(--led-glow-green);
}

/* titlebar exit key — HANG UP (anyone seated). Hidden via [hidden]; JS flips
   hidden based on body.seated (the cash table has no host role). */
.exitbtn[hidden] { display: none; }
.exitbtn {
    display: inline-block; flex: none; margin-left: 6px;
    font-family: var(--font); font-size: 8px; letter-spacing: .5px;
    padding: 7px 9px; cursor: pointer; border-radius: 3px;
    color: var(--cream); text-shadow: 0 1px 0 #000;
    background: linear-gradient(180deg, #41301f 0%, #22160d 55%, #150d07 100%);
    border: 2px solid #000;
    box-shadow:
        inset 0 1px 0 var(--cab-hi),
        inset 0 -2px 0 #000,
        0 3px 0 #050302,
        0 0 10px rgba(232, 180, 71, .10);
    position: relative;
}
.exitbtn:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .9); }
/* armed two-step confirm state: blinking LED-label warning */
.exitbtn.armed {
    color: var(--amber); text-shadow: var(--led-glow-amber);
    animation: blink 1s steps(2) infinite;
}

/* titlebar career-wipe key — the ladder screen's only destructive control, so
   it sits beside the credit readout (right of #handinfo, which pushes the
   right-hand cluster over) rather than floating under the rung list. Same
   mechanical key as the exit button, tinted red; [hidden] keeps it off the
   table like #btn-leave is kept off the ladder. */
.wipekey[hidden] { display: none; }
.wipekey {
    display: inline-block; flex: none; margin-left: 10px;
    font-family: var(--font); font-size: 7px; letter-spacing: .5px;
    padding: 6px 7px; cursor: pointer; border-radius: 3px;
    color: #d9b98a; text-shadow: 0 1px 0 #000;
    background: linear-gradient(180deg, #3a2418 0%, #1d1009 55%, #110905 100%);
    border: 2px solid #000;
    box-shadow:
        inset 0 1px 0 var(--cab-hi),
        inset 0 -2px 0 #000,
        0 3px 0 #050302,
        0 0 11px rgba(255, 46, 28, .16);
}
.wipekey:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .9); }
/* armed: the next press wipes the career */
.wipekey.armed {
    color: var(--red); text-shadow: var(--led-glow-red);
    animation: blink 1s steps(2) infinite;
}

/* ===== oval poker table ===== */
#table {
    width: 100%; height: var(--felt-h); position: relative;
    display: flex; align-items: center; justify-content: center;
    margin: var(--table-mt) auto var(--table-mb);
}
#feltsurface {
    width: 100%; height: 100%; max-width: var(--felt-max-w); max-height: var(--felt-h);
    /* low-res felt weave + dark emerald pool */
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 4px),
        radial-gradient(120% 95% at 42% 40%, rgba(72, 160, 84, .20), transparent 62%),
        linear-gradient(220deg, var(--felt-a) 0%, var(--felt-b) 80%);
    border: var(--felt-border) solid var(--rail);   /* brass rail */
    border-radius: 50% 50% 50% 50% / 24% 24% 28% 28%;
    box-shadow:
        inset 0 0 55px rgba(0, 0, 0, .88),
        inset 0 0 14px rgba(0, 0, 0, .9),
        0 0 0 2px #040201,
        0 0 0 5px #3a2814,
        0 16px 40px rgba(0, 0, 0, .85);
    position: relative; padding: 10px; box-sizing: border-box;
}
#center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    pointer-events: none; z-index: 3;
}
#community { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; min-height: 48px; pointer-events: auto; }
#pot {
    font-family: var(--font);
    text-align: center; font-size: 10px; letter-spacing: 1px;
    color: var(--amber); text-shadow: var(--led-glow-amber), 0 1px 0 rgba(0, 0, 0, .8);
    pointer-events: auto;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
#reveal {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    margin-top: 6px; font-size: 11px; line-height: 1.7; color: var(--cream);
    pointer-events: auto;
}
#reveal b { color: var(--gold-hi); text-shadow: 0 0 6px rgba(255, 176, 0, .45); }

/* ===== chip piles (the pot, and every seat's stack) =====
   Built in table.js: the height is a log ramp of the amount and the colour is
   the highest denomination that amount pays. A pile always occupies its full
   height and fills from the bottom, so chips grow upward off the felt as a pot
   grows (and drain away as a stack pays in) without shifting the table. */
.chipstack {
    display: flex; flex-direction: column-reverse; align-items: center;
    height: calc(var(--chip-h) * var(--chip-max));
    pointer-events: none;
}
.chip {
    flex: none; width: var(--chip-w); height: var(--chip-h);
    border-radius: 50%;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.chip.top { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .45); }
/* denominations — 1 · 25 · 100 · 500 · 1,000 · 5,000 · 25,000 */
.chip.c1   { background: radial-gradient(60% 85% at 50% 30%, #f6ead0, #a8916a); }
.chip.c25  { background: radial-gradient(60% 85% at 50% 30%, #7ce06a, #24701c); }
.chip.c100 { background: radial-gradient(60% 85% at 50% 30%, #6f6f80, #16161c); }
.chip.c500 { background: radial-gradient(60% 85% at 50% 30%, #c79aff, #4a2a7c); }
.chip.c1k  { background: radial-gradient(60% 85% at 50% 30%, #ffe08a, #a3701a); }
.chip.c5k  { background: radial-gradient(60% 85% at 50% 30%, #ff9a86, #8c1c10); }
.chip.c25k { background: radial-gradient(60% 85% at 50% 30%, #8ff0e8, #146b6c); }
/* the pot's pile sits on the felt above its readout */
.potstack { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .65)); }

/* ===== player stations around the table ===== */
.station { position: absolute; width: var(--station-w); margin: 0 auto; transform: translateX(-50%); }
.station .cards {
    position: absolute; top: var(--hole-top); left: 0; right: 0; height: var(--cards-h);
    display: flex; gap: 3px; justify-content: center; z-index: 4;
}
.station[data-seat="0"] .cards{ top:auto;bottom: var(--hole-bottom);  }
.station[data-seat="1"] .cards{ top:auto;bottom: var(--hole-bottom);  }
.station[data-seat="2"] .cards{ top:auto;bottom: var(--hole-bottom);  }
.station[data-seat="3"] .cards{ top:auto;bottom: var(--hole-bottom); }
.station .cards.mucked { opacity: .3; filter: grayscale(1); }

/* recessed CRT monitor bezels — every window is 2:3 portrait so a whole
   512×768 capture fits (the canvas inside is 48×72; see src/table.js) */
.camt {
    width: var(--cam-w); height: var(--cam-h); margin: 0 auto; position: relative;
    background: #04060a;
    border: 3px solid;
    border-color: #000 var(--cab-hi) var(--cab-hi) #000;  /* recessed screen */
    border-radius: 4px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .95), 0 3px 4px rgba(0, 0, 0, .65);
}
.camt canvas, .camt .avatar {
    width: 100%; height: 100%; display: block; image-rendering: pixelated;
}
/* the top-left status cluster inside each monitor (the CAM label) */
.camt .camt-topleft {
    position: absolute; top: 3px; left: 4px; z-index: 5;
    display: flex; align-items: center; gap: 6px;
    pointer-events: none;
}
/* the top-right corner cluster (the camera toggle for your own tile) */
.camt .camt-topright {
    position: absolute; top: 3px; right: 4px; z-index: 6;
    display: flex; align-items: center; gap: 5px;
    pointer-events: none;
}
.camt .label {
    font-size: var(--tile-label-fs);
    font-family: var(--font); letter-spacing: 1px;
    color: var(--green); text-shadow: var(--led-glow-green), 1px 1px 0 #011300;
}
.camt .stale {
    position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
    font-family: var(--font); font-size: var(--tile-label-fs); letter-spacing: 1px;
    color: var(--red); text-shadow: var(--led-glow-red);
    background: rgba(24, 0, 0, .5); pointer-events: none; z-index: 5;
}
.camt.stale .stale { display: flex; animation: blink 1s steps(2) infinite; }
/* the thinking indicator — the rewrite replaced the old stale-buffer treatment
   with this, but the badge needs to be absolutely placed or it renders in flow
   under the canvas (i.e. on top of the hole cards). Shown only while this seat
   is the deciding opponent; the pile and the info strip sit later in the DOM,
   so they stay readable over the dim wash. */
.camt .thinking {
    position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
    font-family: var(--font); font-size: var(--tile-label-fs); letter-spacing: 1px;
    color: var(--amber); text-shadow: var(--led-glow-amber);
    background: rgba(20, 10, 0, .45); pointer-events: none; z-index: 5;
}
.camt.thinking .thinking { display: flex; animation: blink 1s steps(2) infinite; }
.camt .scan {
    position: absolute; inset: 0; pointer-events: none; opacity: .28;
    background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .4) 2px 3px);
    z-index: 4;
}
.camt .pinfo {
    position: absolute; bottom: 0; left: 0; right: 0;
    font-size: var(--tile-pinfo-fs); padding: 3px 5px;
    background: rgba(6, 3, 1, .85); color: var(--cream);
    border-top: 1px solid var(--cab-hi);
    display: flex; justify-content: space-between; z-index: 5;
}
/* the window is only ~96px wide, so a deep-rung stack must never spill out of
   the info strip: the name keeps its width, the credits clip */
.camt .pinfo .nm { flex: 0 0 auto; }
.camt .pinfo .ch {
    color: var(--amber); text-shadow: var(--led-glow-amber);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* a seat's stack, stacked in the corner of its monitor (above the info strip) */
.camt .seatstack {
    position: absolute; left: 5px; bottom: calc(var(--tile-pinfo-fs) + 10px);
    z-index: 5;
}
.camt.folded .seatstack { opacity: .35; filter: grayscale(1); }
.camt.turn {
    outline: 2px solid var(--amber); outline-offset: -3px;
    animation: turnpulse 1.1s steps(2) infinite;
}
.camt.folded canvas { filter: grayscale(1) brightness(.45) sepia(.8) saturate(3) hue-rotate(-55deg); }
.camt.away canvas, .camt.away .avatar { filter: grayscale(1) brightness(.5); }
.camt.away::after {
    content: "SIT OUT"; position: absolute; top: 3px; right: 4px; z-index: 6;
    font-family: var(--font); font-size: var(--tile-label-fs); letter-spacing: 1px;
    color: var(--amber); text-shadow: var(--led-glow-amber);
    background: rgba(0, 0, 0, .78); padding: 2px 5px; border: 1px solid var(--amber);
}

/* 8 seats arranged around the oval: 4 across the top edge, 4 across the bottom */
.station[data-seat="0"]{ left: 14%; top: var(--seat-top-outer); }
.station[data-seat="1"]{ left: 36%; top: var(--seat-top-inner); }
.station[data-seat="2"]{ left: 58%; top: var(--seat-top-inner); }
.station[data-seat="3"]{ left: 82%; top: var(--seat-top-outer); }
.station[data-seat="4"]{ left: 14%; top: auto; bottom: var(--seat-bot-outer); }
.station[data-seat="5"]{ left: 36%; top: auto; bottom: var(--seat-bot-inner); }
.station[data-seat="6"]{ left: 58%; top: auto; bottom: var(--seat-bot-inner); }
.station[data-seat="7"]{ left: 82%; top: auto; bottom: var(--seat-bot-outer); }

/* ===== chunky pixel playing cards ===== */
.pcard {
    width: var(--card-w); height: var(--card-h);
    background:
        repeating-linear-gradient(45deg, rgba(0, 0, 0, .025) 0 1px, transparent 1px 2px),
        linear-gradient(160deg, #fbf3dc 0%, #e4d3aa 100%);
    border: 2px solid var(--ink); border-radius: 2px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .6), inset 0 -2px 0 rgba(122, 90, 30, .28);
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: var(--font);
    font-size: var(--card-fs); line-height: 1.05;
    text-transform: uppercase; text-shadow: 1px 1px 0 rgba(255, 255, 255, .15);
}
.pcard.red { color: var(--red); text-shadow: 1px 1px 0 rgba(90, 8, 4, .25); }
.pcard.black { color: #241810; }
.pcard .suit { font-size: calc(var(--card-fs) + 4px); line-height: 1; }
.pcard.hole { width: var(--hole-w); height: var(--hole-h); font-size: var(--hole-fs); border-width: 1px; }
.pcard.hole .suit { font-size: calc(var(--hole-fs) + 3px); }

/* a face-down card back — the opponents' hole cards, graphic only. The element
   is built by cardBackEl() in src/table.js with no rank/suit markup at all, so
   the print below is the whole card: two crossed lattices over oxblood, with a
   cream filigree frame, reading as a printed back at 22×30. */
.pcard.back {
    position: relative;
    background:
        repeating-linear-gradient(45deg, rgba(0, 0, 0, .5) 0 2px, transparent 2px 4px),
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, .5) 0 2px, transparent 2px 4px),
        linear-gradient(160deg, #8d2226 0%, #3d0f12 100%);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(0, 0, 0, .55);
}
.pcard.back::after {
    content: "";
    position: absolute; inset: 3px;
    border: 1px solid rgba(239, 226, 191, .4);
    border-radius: 1px;
}

/* deal-in animation: cards flip onto the tile from the felt when a new set
   lands (rebuild only happens on change — see updateTiles cardsKey). */
.station .cards .pcard.hole {
    animation: dealin .34s cubic-bezier(.2, .9, .3, 1.2) backwards;
}
.station .cards .pcard.hole:nth-child(2) { animation-delay: .12s; }
@keyframes dealin {
    from {
        transform: translateY(26px) rotate(-9deg) scale(.45);
        opacity: 0;
    }
    55% { opacity: 1; }
    to {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* ===== control deck ===== */
#actionbar {
    background: linear-gradient(180deg, #2b1e12 0%, #151008 88%);
    border: 2px solid #000;
    box-shadow:
        inset 0 1px 0 var(--cab-hi),
        inset 0 -3px 0 rgba(0, 0, 0, .85),
        0 0 0 3px #3a2814,
        0 -8px 20px rgba(0, 0, 0, .6);
    padding: 8px;
}
/* segmented LED countdown rail */
#turnbar-wrap {
    height: 9px; background: #050302; padding: 1px;
    border: 1px solid var(--cab-hi);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .95);
    margin-bottom: 8px;
}
#turnbar {
    height: 100%; background: var(--amber); width: 0%;
    border-radius: 1px;
    background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 7px);
    box-shadow: var(--led-glow-amber);
}
#actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; align-items: center; }
#actions button {
    font-family: var(--font); font-size: 9px; letter-spacing: .5px;
    padding: 9px 12px 9px 20px;   /* left padding clears the key LED */
    cursor: pointer; position: relative; border-radius: 3px;
    color: var(--cream); text-shadow: 0 1px 0 #000;
    background: linear-gradient(180deg, #41301f 0%, #22160d 55%, #150d07 100%);
    border: 2px solid #000;
    box-shadow:
        inset 0 1px 0 var(--cab-hi),
        inset 0 -2px 0 #000,
        0 4px 0 #050302,
        0 0 10px rgba(232, 180, 71, .10);
}
#actions button::before {   /* mechanical key LED */
    content: ""; position: absolute; top: 50%; left: 8px; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--amber); box-shadow: var(--led-glow-amber);
}
#actions button:active {
    transform: translateY(3px);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .9);
}
#actions button:disabled {
    color: #5f4c2e; cursor: default; background: #1a110a;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .85); transform: none; text-shadow: none;
}
#actions button:disabled::before { background: #3d2f1c; box-shadow: none; }
#actions button.sitin {
    background: linear-gradient(180deg, #3f5c18 0%, #22350a 70%);
    color: #d8ff9c; text-shadow: 0 1px 0 #000;
}
#actions button.sitin::before { background: var(--green); box-shadow: var(--led-glow-green); }
.sitout-note { align-self: center; font-size: 9px; color: var(--amber); text-shadow: var(--led-glow-amber); }
/* the bet-to cluster (½ POT / POT / ALL-IN + the number) — a flex row so the
   sizing keys don't touch, and the narrow-screen rule that gives the input
   `flex: 1 1 100%` can actually wrap it onto its own row. */
.bet-group { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
#actions input[type=number] {
    width: 86px; font-family: var(--font); font-size: 10px; padding: 7px 5px;
    color: var(--amber); background: #050302; border: 2px solid #000; border-radius: 2px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .9), inset 0 0 10px rgba(255, 176, 0, .04);
    text-align: center;
}

/* phosphor hand log */
#log {
    font-family: var(--font-tty); font-size: 11px; line-height: 1.75; letter-spacing: .3px;
    max-height: 90px; overflow-y: auto;
    color: var(--green); background: linear-gradient(180deg, #051105, #020802);
    border: 2px solid #000; border-radius: 2px;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, .95), inset 0 0 8px rgba(88, 255, 61, .06);
    padding: 6px;
}
body.in-lobby #log { display: none; }
#log::-webkit-scrollbar, .dialog::-webkit-scrollbar { width: 8px; }
#log::-webkit-scrollbar-thumb, .dialog::-webkit-scrollbar-thumb { background: #3a2a18; border: 1px solid #000; }
#log::-webkit-scrollbar-track, .dialog::-webkit-scrollbar-track { background: #0a0705; }

/* ===== lobby = front-panel faceplate ===== */
.overlay {
    position: fixed; inset: 0; background: rgba(3, 2, 0, .80); display: flex;
    align-items: center; justify-content: center; z-index: 10;
}
.dialog {
    background: linear-gradient(180deg, #2b1d11 0%, #150e08 75%);
    border: 3px solid #000; border-radius: 4px;
    box-shadow:
        inset 0 1px 0 var(--cab-hi),
        inset 0 -2px 0 rgba(0, 0, 0, .8),
        0 0 0 4px #38261a,
        0 0 40px rgba(255, 176, 0, .12),
        0 20px 45px rgba(0, 0, 0, .85);
    padding: 20px 22px; width: min(430px, 94vw); max-width: 430px;
    max-height: 92dvh; overflow-y: auto; text-align: center;
}
.dialog h1 {
    font-family: var(--font);
    font-size: 18px; letter-spacing: 3px; margin-bottom: 10px;
    color: var(--gold-hi);
    text-shadow: 0 0 12px rgba(255, 176, 0, .6), 0 2px 0 #5a3c0a;
}
.dialog p { font-size: 9px; line-height: 2; margin-bottom: 12px; color: var(--cream); }
.dialog button {
    display: block; width: 100%; margin: 8px 0; padding: 11px 8px;
    font-family: var(--font); font-size: 9px; letter-spacing: .5px; cursor: pointer;
    color: var(--cream);
    background: linear-gradient(180deg, #44321f 0%, #241609 65%);
    border: 2px solid #000; border-radius: 3px;
    box-shadow: inset 0 1px 0 var(--cab-hi), inset 0 -2px 0 #000, 0 4px 0 #050302;
}
.dialog button:active { transform: translateY(3px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .9); }
.dialog button:disabled { color: #5f4c2e; background: #191009; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .85); }
.dialog button.secondary { font-size: 8px; }
.dialog button.busy { color: var(--amber); letter-spacing: 1px; text-shadow: var(--led-glow-amber); }
.dialog button.busy::after {
    content: ""; display: inline-block; width: 8px; text-align: left;
    animation: dialdots 1s steps(4) infinite;
}
@keyframes dialdots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.dialog label { display: block; font-size: 8px; letter-spacing: .5px; margin: 6px 0 3px; color: #c9a96a; }
.dialog input[type=text], .dialog input:not([type]) {
    font-family: var(--font); font-size: 9px; letter-spacing: 1px; padding: 8px 6px; width: 190px;
    color: var(--amber); background: #050302; border: 2px solid #000; border-radius: 2px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .9), inset 0 0 10px rgba(255, 176, 0, .04);
    text-align: center;
}
.dialog input::placeholder { color: #59472a; }
.dialog input[type=checkbox] { width: auto; accent-color: var(--amber); }
.dialog hr { border: none; border-top: 1px solid #3a2a18; margin: 12px 0; }

/* lobby form groups — backlit green screen-well panels */
.lobby-section {
    margin: 14px 0; padding: 10px 10px 8px;
    text-align: left; position: relative;
    background: linear-gradient(180deg, #0c1e0e 0%, #061206 90%);
    border: 2px solid #000; border-radius: 3px;
    box-shadow: inset 0 2px 7px rgba(0, 0, 0, .85), inset 0 0 14px rgba(88, 255, 61, .05);
}
.lobby-section::before {
    content: ""; position: absolute; top: 11px; left: 10px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green); box-shadow: var(--led-glow-green);
}
.lobby-section-title {
    font-family: var(--font);
    font-size: 8px; letter-spacing: 1.5px; margin: 0 0 8px 16px;
    color: var(--green); text-shadow: var(--led-glow-green);
    text-transform: uppercase;
}

/* recessed display wells */
.dialog input { font-family: var(--font); padding: 8px 6px; width: 190px; }
.dialog input:disabled { color: #4a3d26; background: #171208; }

.status { min-height: 14px; font-size: 9px; line-height: 1.8; margin: 6px 0 0 !important; color: var(--cream); }
.status.busy { color: var(--amber); animation: blink 1s steps(2) infinite; }
.status.ok { color: var(--green); text-shadow: var(--led-glow-green); }
.status.err { color: var(--red); text-shadow: var(--led-glow-red); }
@keyframes blink { 50% { opacity: .35; } }
.hint { font-size: 9px !important; color: #8f7a50; }

/* avatar picker — smart arrow-controlled mini-slider of up to 10 portraits */
.avatar-group { margin: 12px 0 2px; }
.avatar-slider { display: flex; align-items: center; gap: 6px; }
.av-strip {
    position: relative; flex: 1; min-width: 0;
    display: flex; gap: 8px; align-items: stretch;
    overflow-x: auto; padding: 4px 2px;
    scrollbar-width: none; scroll-behavior: smooth;
    scroll-snap-type: x proximity;
}
.av-strip::-webkit-scrollbar { display: none; }
.avatar-slider .av-arrow {
    flex: none; width: 30px; align-self: stretch; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font); font-size: 9px; color: var(--amber);
    text-shadow: var(--led-glow-amber);
    background: linear-gradient(180deg, #3c2c1b 0%, #1e140a 90%);
    border: 2px solid #000; border-radius: 3px;
    box-shadow: inset 0 1px 0 var(--cab-hi), inset 0 -2px 0 #000, 0 3px 0 #050302;
}
.avatar-slider .av-arrow:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .9); }
.avatar-slider .av-arrow:disabled {
    opacity: .35; cursor: default; color: #5d4c33; text-shadow: none;
    transform: none; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8);
}
.av-strip .avatar-opt {
    flex: 0 0 auto; width: 62px; margin: 0; padding: 5px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    color: var(--cream);
    background: linear-gradient(180deg, #3c2c1b 0%, #1e140a 90%);
    border: 2px solid #000; border-radius: 3px;
    box-shadow: inset 0 1px 0 var(--cab-hi), inset 0 -2px 0 #000, 0 3px 0 #050302;
    scroll-snap-align: start;
}
.av-strip .avatar-opt img {
    width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
    image-rendering: pixelated; border: 2px solid #000;
    box-shadow: 0 0 6px rgba(0, 0, 0, .85);
}
.av-strip .avatar-opt span {
    font-family: var(--font); font-size: 7px; letter-spacing: 1px; line-height: 1;
}
.av-strip .avatar-opt.none span { font-size: 8px; }
.av-strip .avatar-opt.selected {
    background: linear-gradient(180deg, #4c3a20 0%, #2a1a0c 90%);
    box-shadow: inset 0 2px 0px var(--amber), 0 0 10px rgba(255, 176, 0, .35), 0 3px 0 #050302;
}
.av-strip .avatar-opt.selected span { color: var(--amber); text-shadow: var(--led-glow-amber); }
.avatar-hint { font-size: 8px !important; color: #8f7a50; text-align: center; margin: 8px 0 0 !important; line-height: 1.7; }

/* in-game camera toggle — sits in the .camt-topright cluster (pure CSS
   absolute positioning); only the player's own tile shows it. */
.cam-toggle {
    display: none; margin: 0; padding: 0; cursor: pointer; line-height: 0;
    background: none; border: none; box-shadow: none; font: inherit;
    color: var(--red);
}
.camt.mine .cam-toggle {
    display: flex; align-items: center;
    pointer-events: auto;
}
.cam-toggle svg {
    width: 13px; height: 13px; display: block; flex: none;
    filter: drop-shadow(0 0 2px currentColor) drop-shadow(0 0 1px #000);
}
.cam-toggle:active { transform: scale(.85); opacity: .65; }
.cam-toggle.off { color: var(--red); }
.cam-toggle.on { color: var(--green); }

/* master sound toggle — mirrors the cam-toggle beside it in .camt-topright;
   controls SFX + incoming voice + own mic. Only on the player's own tile. */
.audio-toggle {
    display: none; margin: 0; padding: 0; cursor: pointer; line-height: 0;
    background: none; border: none; box-shadow: none; font: inherit;
}
.camt.mine .audio-toggle {
    display: flex; align-items: center;
    pointer-events: auto;
}
.audio-toggle svg {
    width: 13px; height: 13px; display: block; flex: none;
    filter: drop-shadow(0 0 2px currentColor) drop-shadow(0 0 1px #000);
}
.audio-toggle:active { transform: scale(.85); opacity: .65; }
.audio-toggle.off { color: var(--red); }
.audio-toggle.on { color: var(--green); }

/* MIC talking chip — pulses in the top-left cluster while a tile's voice
   analyser crosses the talking threshold (own mic or a peer's stream). */
.camt .talking-chip {
    display: none;
    font-family: var(--font); font-size: 7px; letter-spacing: 1px; line-height: 1;
    color: var(--green); text-shadow: var(--led-glow-green);
    background: rgba(0, 0, 0, .7); border: 1px solid var(--green);
    padding: 2px 3px;
}
.camt.talking .talking-chip { display: inline-block; animation: blink 1s steps(2) infinite; }

button:focus-visible, input:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

/* ===== ambient LED animations ===== */
@keyframes ledpulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes turnpulse {
    0%, 100% { box-shadow: var(--led-glow-amber), inset 0 0 12px rgba(255, 176, 0, .10); }
    50% { box-shadow: 0 0 16px 3px rgba(255, 176, 0, .75), inset 0 0 16px rgba(255, 176, 0, .22); }
}

/* ==========================================================================
   RESPONSIVE
   - desktop (>950px): full oval (defaults above)
   - tablet / large phone-landscape (601-950px): scaled oval
   - phone-landscape (short height): extra-compact oval
   - phone (<=600px): reflow to a stacked/grid layout, action bar pinned
   ========================================================================== */

/* Tablet + phone-landscape: keep the oval, shrink every piece via tokens. */
@media (max-width: 950px) {
    :root {
        --cam-w: 80px; --cam-h: 120px; --station-w: 88px;
        --felt-h: 400px; --table-mt: 68px; --table-mb: 52px;
        --seat-top-outer: -34px; --seat-top-inner: -58px;
        --seat-bot-outer: -22px; --seat-bot-inner: -54px;
        --card-w: 28px; --card-h: 38px; --card-fs: 11px;
        --hole-w: 18px; --hole-h: 24px; --hole-fs: 8px;
        --hole-top: -28px; --hole-bottom: -27px; --cards-h: 24px;
        --tile-label-fs: 8px; --tile-pinfo-fs: 9px;
        --chip-w: 12px; --chip-h: 3px;
    }
}

/* Landscape phones: wide but very short — squeeze the vertical footprint. */
@media (max-width: 950px) and (max-height: 520px) {
    :root {
        --cam-w: 64px; --cam-h: 96px; --station-w: 72px;
        --felt-h: 300px; --table-mt: 44px; --table-mb: 34px;
        --seat-top-outer: -26px; --seat-top-inner: -46px;
        --seat-bot-outer: -16px; --seat-bot-inner: -42px;
        --chip-w: 11px; --chip-h: 3px;
    }
    #titlebar { padding: 3px 6px; }
    #titlebar::before { display: none; }
    #titlebar .sub { display: none; }
    #actionbar { padding: 6px; }
    #log { max-height: 40px; }
}

/* Phones: drop the oval, reflow into a compact grid with a pinned action bar. */
@media (max-width: 600px) {
    body { padding: 0; }
    #app { gap: 4px; max-width: none; }

    #titlebar { padding: 4px 8px 4px 26px; gap: 8px; }
    #titlebar::before { left: 9px; width: 7px; height: 7px; }
    #titlebar .sub { display: none; }
    #handinfo { font-size: 10px; }
    /* the titlebar keys and the ladder key keep thumb-friendly sizes */
    .wipekey { font-size: 6px; padding: 4px 5px; margin-left: 4px; }
    .sit-key { min-height: 44px; font-size: 10px; }

    #table { height: auto; margin: 0; display: block; }
    #feltsurface {
        width: 100%; max-width: none; max-height: none; height: auto;
        border: 6px solid var(--rail); border-radius: 10px; padding: 8px;
        display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
        box-shadow: inset 0 0 24px rgba(0, 0, 0, .7), 0 0 0 3px #3a2814;
    }

    /* community + pot span the full width at the top of the grid */
    #center { position: static; transform: none; grid-column: 1 / -1; pointer-events: auto; }
    #community { min-height: 0; }
    #pot { font-size: 10px; }

    /* stations flow as grid cells instead of orbiting the oval */
    .station {
        position: relative; width: 100%; margin: 0; transform: none;
        left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
    }
    /* grid cells are wide: cap the window and keep the 2:3 capture shape */
    .camt { width: 100%; max-width: 96px; height: auto; aspect-ratio: 2 / 3; }

    /* hole cards become a small corner overlay on the player's own tile */
    :root { --hole-w: 20px; --hole-h: 27px; --hole-fs: 8px; --chip-w: 15px; --chip-h: 4px; }
    .station .cards {
        position: absolute; top: auto !important; bottom: 2px; left: auto; right: 2px;
        width: auto; height: auto; justify-content: flex-end; z-index: 5;
    }

    /* action bar pinned to the bottom of the viewport with big touch targets */
    #actionbar {
        position: sticky; bottom: 0; z-index: 8;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    }
    #actions { gap: 8px; }
    #actions button { min-height: 44px; font-size: 10px; padding: 10px 12px 10px 22px; flex: 1 1 40%; }
    #actions input[type=number] { min-height: 44px; font-size: 12px; width: 100%; flex: 1 1 100%; }
    #log { max-height: 56px; }

    /* fluid lobby form + comfortable inputs */
    .dialog { padding: 14px 16px; }
    .dialog input[type=text], .dialog input:not([type]), .dialog input { width: 100%; }
    .dialog button { min-height: 44px; }
    .cam-toggle { opacity: 1; }
    .cam-toggle svg, .audio-toggle svg { width: 18px; height: 18px; }
}

/* Very small phones: single column so tiles stay legible. */
@media (max-width: 380px) {
    #feltsurface { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MEETING MODE — client-local Teams takeover
   (openspec change add-pokershy-meeting-mode) body.teams-mode reskins the
   whole page into a modern meeting and hides all poker chrome. Flat
   `body.teams-mode …` selectors only (design.md D1/D9). The CRT palette and
   fonts are untouched outside this block.
   ========================================================================== */

/* toggle key — casino-styled "MEETING MODE"; hidden until seated */
#btn-meeting {
    display: none; flex: none; margin-left: 6px;
    font-family: var(--font); font-size: 8px; letter-spacing: .5px;
    padding: 7px 9px; cursor: pointer; border-radius: 3px;
    color: var(--cream); text-shadow: 0 1px 0 #000;
    background: linear-gradient(180deg, #41301f 0%, #22160d 55%, #150d07 100%);
    border: 2px solid #000;
    box-shadow:
        inset 0 1px 0 var(--cab-hi),
        inset 0 -2px 0 #000,
        0 3px 0 #050302,
        0 0 10px rgba(232, 180, 71, .10);
}
body.seated #btn-meeting { display: inline-block; }
#btn-meeting:active { transform: translateY(2px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .9); }

/* meeting chrome built by teams.js — hidden outside teams-mode */
#meetclock, #meetstage, #meetchat { display: none; }

body.teams-mode {
    color: #242424;
    background: #ebebeb;
    font-family: "Segoe UI", system-ui, sans-serif;
}
body.teams-mode::after { display: none; }   /* CRT scanlines + vignette off */

/* ---- titlebar → Teams meeting header ---- */
body.teams-mode #titlebar {
    background: #ffffff;
    border: 1px solid #e1e1e1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
body.teams-mode #titlebar::before { display: none; }  /* pilot LED off */
body.teams-mode #titlebar .title {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 14px; letter-spacing: 0; text-transform: none;
    color: #242424; text-shadow: none;
}
body.teams-mode #titlebar .sub,
body.teams-mode #handinfo,
body.teams-mode .exitbtn,
body.teams-mode .wipekey { display: none; }   /* CREDIT chip, hand info, exit/wipe keys */
body.teams-mode #meetclock {
    display: inline; margin-left: auto; font-size: 12px;
    color: #242424; letter-spacing: .5px;
}

/* ---- felt area → presentation stage + video gallery ---- */
body.teams-mode #table { height: auto; margin: 8px auto; }
body.teams-mode #feltsurface {
    max-width: 1100px; height: auto; max-height: none;
    border: none; border-radius: 12px; padding: 14px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    display: flex; flex-flow: row wrap; justify-content: center;
    align-items: center; gap: 12px;
}

/* static bogus presentation slide (built once by teams.js) */
body.teams-mode #meetstage {
    display: block; order: -1; flex: 1 1 100%;
    font-family: "Segoe UI", system-ui, sans-serif;
}
#meetstage .slide {
    width: min(560px, 92%); margin: 0 auto; padding: 22px 26px 14px;
    text-align: left; color: #242424;
    background: #ffffff; border: 1px solid #e1e1e1; border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .10);
}
#meetstage .slide-kicker {
    font-size: 10px; letter-spacing: 1.5px; font-weight: 600;
    color: #C50F1F; margin-bottom: 8px;
}
#meetstage h2 { font-size: 20px; margin: 0 0 4px; font-weight: 700; }
#meetstage .slide-sub { font-size: 12px; color: #616161; margin: 0 0 12px; }
#meetstage .chart { display: flex; align-items: flex-end; gap: 14px; height: 110px; margin: 6px 0 2px; }
#meetstage .bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
#meetstage .bar i { display: block; height: var(--v); background: #5B5FC7; border-radius: 3px 3px 0 0; }
#meetstage .bar b { font-size: 10px; font-weight: 600; color: #616161; text-align: center; margin-top: 4px; }
#meetstage .slide-foot {
    border-top: 1px solid #e1e1e1; margin-top: 12px; padding-top: 8px;
    font-size: 10px; color: #8a8886;
}
#meetstage .sharetray {
    width: max-content; margin: 10px auto 0;
    background: #242424; color: #ffffff;
    font-size: 12px; padding: 6px 12px; border-radius: 4px;
}
#meetstage .sharetray .stop { color: #ff9d97; margin-left: 10px; }

/* poker chrome never shows during the "meeting" */
body.teams-mode #center,
body.teams-mode .station .cards,
body.teams-mode .camt .seatstack,
body.teams-mode #lobby { display: none !important; }

/* ---- stations → Teams video gallery ---- */
body.teams-mode .station {
    position: static; width: auto; margin: 0; transform: none;
    order: 1;
}
body.teams-mode .camt {
    border: none; border-radius: 10px;
    background: #242424;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .30);
}
/* "normalizing the videos": smooth upscale instead of nearest-neighbor pixels */
body.teams-mode .camt canvas,
body.teams-mode .camt .avatar { image-rendering: auto; }
body.teams-mode .camt .scan { display: none; }

/* labels, info strip and badges restyled as Teams chips */
body.teams-mode .camt .label {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
body.teams-mode .camt .pinfo {
    font-family: "Segoe UI", system-ui, sans-serif;
    background: linear-gradient(transparent, rgba(0, 0, 0, .72));
    border: none; color: #ffffff;
}
body.teams-mode .camt .pinfo .ch { color: #ffffff; text-shadow: none; }
body.teams-mode .camt .stale {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: #ffffff; text-shadow: none;
    background: rgba(0, 0, 0, .55);
}
body.teams-mode .camt .talking-chip {
    font-family: "Segoe UI", system-ui, sans-serif;
    border-radius: 3px;
}
/* SIT OUT badge reads as a Teams away status */
body.teams-mode .camt.away::after {
    font-family: "Segoe UI", system-ui, sans-serif;
    color: #ffffff; text-shadow: none;
    background: rgba(91, 95, 199, .92);
    border: none; border-radius: 3px;
}
/* your-turn glow becomes a calm Teams accent ring */
body.teams-mode .camt.turn {
    outline: 3px solid #5B5FC7; outline-offset: -3px;
    animation: none;
}

/* ---- control deck → fake meeting chat ---- */
body.teams-mode #actionbar {
    background: #ffffff;
    border: 1px solid #e1e1e1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
body.teams-mode #turnbar-wrap,
body.teams-mode #actions,
body.teams-mode #log { display: none; }
body.teams-mode #meetchat {
    display: block; font-family: "Segoe UI", system-ui, sans-serif;
}
#meetchat .chat-title {
    font-size: 11px; font-weight: 600; color: #242424; margin-bottom: 5px;
}
#meetchat .msgs {
    max-height: 110px; overflow-y: auto;
    background: #f5f5f5; border-radius: 6px; padding: 8px 10px;
    font-size: 12px; line-height: 1.6; color: #242424;
}
#meetchat .m b { color: #5B5FC7; font-weight: 600; margin-right: 4px; }

/* ---- toggle key while active: red Teams END MEETING ---- */
body.teams-mode #btn-meeting {
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 12px; letter-spacing: 0; text-shadow: none;
    color: #ffffff;
    background: #C50F1F;
    border: none; border-radius: 4px; padding: 6px 14px;
    box-shadow: none;
}

/* ==========================================================================
   ROTATE-DEVICE PROMPT — CRT boot screen
   - Shown on portrait phones/tablets via JS (matchMedia).
   - A CSS class on <html> drives visibility so the JS logic stays simple.
   ========================================================================== */
#rotate {
    position: fixed; inset: 0; z-index: 9999;
    display: none; align-items: center; justify-content: center; text-align: center;
    background:
        radial-gradient(90% 75% at 50% 32%, rgba(255, 176, 0, .07), transparent 70%),
        #060302;
    color: var(--amber);
    font-family: var(--font);
}
html.rotateprompt #rotate { display: flex; }
#rotate .rotate-inner { padding: 26px; text-shadow: 0 0 14px rgba(255, 176, 0, .4); }
.rotate-icon {
    font-size: 42px; line-height: 1; margin-bottom: 18px;
    color: var(--gold-hi); text-shadow: 0 0 16px rgba(255, 176, 0, .75);
    animation: rotatephone 1.8s ease-in-out infinite;
}
@keyframes rotatephone {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
}
#rotate p { font-size: 11px; margin: 10px 0; letter-spacing: 1.5px; }
#rotate .rotate-sub { font-size: 8px; opacity: .8; letter-spacing: .5px; color: #c9a96a; }
#rotate button {
    margin-top: 20px; font-family: var(--font); font-size: 9px; letter-spacing: .5px;
    padding: 12px 18px; cursor: pointer;
    color: var(--cream);
    background: linear-gradient(180deg, #44321f, #241609);
    border: 2px solid #000; border-radius: 3px;
    box-shadow: inset 0 1px 0 var(--cab-hi), inset 0 -2px 0 #000, 0 4px 0 #050302;
}
#rotate button:active { transform: translateY(3px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .9); }

/* ==================== SINGLEPLAYER LADDER SCREENS ==================== */

/* the views toggle through the `hidden` attribute */
#view-rungs:not([hidden]), #view-result:not([hidden]), #view-enter:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 20px);
    padding: 12px 18px 40px;
}

/* only one mode's chrome is visible at a time */
body.in-rungs #table, body.in-rungs #actionbar, body.in-rungs #rungtitle { display: none; }
body.in-table #rung-list { display: none; }

/* ---- rung select ---- */

#rung-list {
    width: min(560px, 96vw);
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 14px;
}

.rung {
    padding: 10px 12px;
    background: linear-gradient(180deg, #1a1209, #120c07);
    border: 2px solid var(--cab-hi);
    box-shadow: inset 0 1px 0 rgba(255, 200, 100, .08), 0 2px 6px rgba(0, 0, 0, .6);
    cursor: pointer;
    user-select: none;
}

.rung:hover { border-color: var(--gold); }

.rung.selected {
    border-color: var(--amber);
    box-shadow: var(--led-glow-amber), inset 0 1px 0 rgba(255, 200, 100, .12);
}

.rung.cleared .rung-status { color: var(--green); text-shadow: var(--led-glow-green); }
.rung.locked { opacity: .45; cursor: not-allowed; }
.rung.locked .rung-status { color: var(--red); }

.rung-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.rung-head b { color: var(--amber); font-family: var(--font); font-size: 13px; text-shadow: var(--led-glow-amber); }
.rung-names { flex: 1; color: var(--cream); font-size: 11px; letter-spacing: 1px; }
.rung-status { font-size: 9px; color: var(--amber); letter-spacing: 1px; }

.rung-line { font-size: 10px; color: #c9a96a; line-height: 1.7; }
.rung-line.dim { color: #8f7a50; font-size: 9px; }

/* The selected card carries its own action row — renderRungs builds the
   SIT DOWN key into it — so the ladder has no floating key row under the list.
   The key is two-step: armed, the same element relabels to CONFIRM and blinks. */
.rung-actions { display: flex; align-items: center; gap: 8px; margin-top: 9px; }

.sit-key {
    display: block; width: 100%; padding: 11px 10px;
    font-family: var(--font); font-size: 9px; letter-spacing: 1px;
    cursor: pointer; border-radius: 3px;
    color: var(--cream); text-shadow: 0 1px 0 #000;
    background: linear-gradient(180deg, #44321f 0%, #241609 65%);
    border: 2px solid #000;
    box-shadow:
        inset 0 1px 0 var(--cab-hi),
        inset 0 -2px 0 #000,
        0 4px 0 #050302,
        0 0 12px rgba(255, 176, 0, .12);
}
.sit-key:active { transform: translateY(3px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .9); }
/* armed: the next press takes the seat */
.sit-key.armed {
    color: var(--amber); text-shadow: var(--led-glow-amber);
    animation: blink 1s steps(2) infinite;
}

/* the ladder's explanatory paragraph (the old key row used to own this) */
#view-rungs .hint { max-width: 560px; text-align: center; line-height: 1.8; }

/* ---- result dialog ---- */

#view-result .dialog, #view-enter .dialog {
    background: linear-gradient(180deg, #1a1209, #0f0a06);
    border: 3px solid var(--gold);
    box-shadow: 0 0 24px rgba(232, 180, 71, .25), inset 0 0 40px rgba(0, 0, 0, .7);
    padding: 26px 34px;
    text-align: center;
    max-width: 620px;
}

#result-title {
    font-family: var(--font);
    font-size: 17px;
    color: var(--amber);
    text-shadow: var(--led-glow-amber);
    letter-spacing: 2px;
    margin-bottom: 16px;
}

#result-lines { margin: 6px 0 14px; }
#result-lines div { font-size: 11px; color: var(--cream); line-height: 2; }

#result-credit { font-size: 12px; color: var(--gold-hi); margin-bottom: 18px; }

/* ---- three-initial entry ---- */

#enter-score {
    font-family: var(--font);
    font-size: 14px;
    color: var(--green);
    text-shadow: var(--led-glow-green);
    margin-bottom: 12px;
}

#initials { display: flex; gap: 12px; justify-content: center; margin: 16px 0 20px; }

#initials .slot {
    font-family: var(--font);
    font-size: 34px;
    color: var(--amber);
    background: #0a0604;
    border: 3px solid var(--cab-hi);
    padding: 10px 14px;
    min-width: 64px;
    text-align: center;
}

#initials .slot.active {
    border-color: var(--amber);
    box-shadow: var(--led-glow-amber);
    animation: slotblink 1s steps(2) infinite;
}

@keyframes slotblink { 50% { border-color: var(--gold-hi); } }