/*
 * HOLD'EM AFTER DARK - cabinet styles
 * The same cabinet as Euchre After Dark: a fixed 1600x900 stage (600 x 960-1400 on a phone) that
 * app.js scales to fit, the bezel with its neon rails, 9-sliced plates, LCD readouts and arcade buttons.
 * Nothing that animates uses a filter (they repaint the whole cabinet every frame); glows are
 * box-shadow layers faded by opacity.
 */

/*
 * The cabinet's two typefaces, served from here instead of Google Fonts (same as Euchre,
 * 2026-10-28): Bungee (display) and Barlow Condensed 500/600/700 (UI), both SIL Open Font
 * License 1.1 (fonts/OFL-*.txt). Same files and unicode ranges Google served; a browser only
 * fetches the ranges a page actually uses.
 */
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/barlow-condensed-500-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/barlow-condensed-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/barlow-condensed-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlow-condensed-600-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlow-condensed-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlow-condensed-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/barlow-condensed-700-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/barlow-condensed-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/barlow-condensed-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/bungee-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/bungee-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bungee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/bungee-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --ink: #0d0a09;
    --felt-dark: #15100d;
    --cream: #f7f0e1;
    --card-red: #c8261b;
    --card-black: #16120f;
    --gold: #f2c14e;
    --gold-deep: #a8761c;
    --neon-red: #ff5544;
    --neon-blue: #45c9ff;
    --lcd: #7dff6b;
    --text: #f3eadb;
    --muted: #b5a690;
    --display: 'Bungee', 'Impact', 'Arial Black', sans-serif;
    --ui: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
    --card-w: 92px;
    --card-h: 128px;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    background: radial-gradient(ellipse at 50% 40%, #241812 0%, var(--ink) 70%);
    color: var(--text);
    font: 600 18px/1.25 var(--ui);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
#safe-probe {
    position: fixed; visibility: hidden; pointer-events: none;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.phone-only { display: none; }

/* ---------- Stage & bezel ---------- */

#viewport { position: fixed; inset: 0; overflow: clip; }
#stage { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; }
#stage::before {
    content: ''; position: absolute; inset: 60px 30px; z-index: -1; border-radius: 40px;
    box-shadow: -50px 0 90px -20px rgba(255, 85, 68, .35), 50px 0 90px -20px rgba(69, 201, 255, .35);
}
.bezel {
    position: absolute; inset: 0; border-style: solid; border-width: 50px 56px 78px;
    border-image: url(assets/bezel.webp) 132 147 205 147 stretch;
    pointer-events: none; z-index: 50;
}
.screen {
    position: absolute; inset: 44px 50px 72px; overflow: clip;
    background: url(assets/felt.webp) center / cover, var(--felt-dark);
    border-radius: 18px;
}
.view { position: absolute; inset: 6px; }

/* ---------- Buttons ---------- */

.arcade-btn {
    min-width: 150px; height: 70px; padding: 0 14px;
    border-style: solid; border-width: 20px 24px;
    border-image: url(assets/btn-blue.webp) 76 90 fill stretch;
    background: none;
    font: 400 20px/1 var(--display); letter-spacing: .02em; color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 10px rgba(0, 0, 0, .35);
    cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform .08s ease;
}
.arcade-btn > * { margin: -20px 0; }
.arcade-btn.green { border-image-source: url(assets/btn-green.webp); }
.arcade-btn.red { border-image-source: url(assets/btn-red.webp); }
.arcade-btn.gold { border-image-source: url(assets/btn-gold.webp); color: #3b2300; text-shadow: 0 1px 0 rgba(255, 240, 200, .6); }
.arcade-btn:hover:not(:disabled) { filter: brightness(1.12); }
.arcade-btn:active:not(:disabled) { transform: translateY(2px) scale(.98); }
/* Waiting for your turn: the buttons stay put, dark steel with dim lettering, so nothing jumps when it's you. */
.arcade-btn:disabled {
    border-image-source: url(assets/btn-gold.webp); border-image-slice: 76 90;
    background: linear-gradient(#34302d, #1a1715 60%, #26221f); background-clip: padding-box;
    color: #7b6f60; text-shadow: 0 1px 0 #000; cursor: default; opacity: .8;
}
.arcade-btn.busy { opacity: .7; pointer-events: none; }
.arcade-btn:focus-visible, .round:focus-visible, .avatar-grid button:focus-visible { outline: 3px solid var(--neon-blue); outline-offset: 3px; }

.round { position: relative; width: 60px; height: 60px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .08s; }
.round img { width: 100%; height: 100%; display: block; }
.round:hover { filter: brightness(1.12); }
.round:active { transform: scale(.94); }
/* Speaker: a dark steel face over the base button's "?", the speaker on it, a red slash when off. */
.sound-btn::before {
    content: ''; position: absolute; inset: 20%; border-radius: 50%; z-index: 1;
    background: radial-gradient(ellipse at 50% 16%, rgba(255, 255, 255, .45) 0 18%, transparent 42%),
        radial-gradient(circle at 50% 40%, #5a5550 0%, #2b2724 60%, #141210 100%);
}
.round.sound-btn img.spk { position: absolute; left: 24%; top: 30%; width: 54%; height: 40%; object-fit: contain; z-index: 2; }
.sound-btn:not(.on) img.spk { opacity: .45; }
.sound-btn:not(.on)::after {
    content: ''; position: absolute; left: 24%; right: 24%; top: 48%; height: 4px; border-radius: 3px; z-index: 3;
    background: #e3261b; box-shadow: 0 0 0 2px #1a0503; transform: rotate(-35deg);
}
.text-btn { background: none; border: 0; color: var(--muted); font: 700 15px var(--ui); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; padding: 6px 10px; }
.text-btn:hover { color: var(--gold); }

/* ← The Bar and the jukebox (brief 015): Ben's door sign in the top-left corner of every view, the
   family jukebox's ♪ beside it. On the phone's table it sits beside the menu gear. */
.corner { position: absolute; left: 16px; top: 12px; z-index: 30; display: flex; align-items: center; gap: 8px; }
.door { height: 40px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .08s; }
.door img { display: block; height: 100%; width: auto; }
/* Ben's art (the landing site's door.webp); if it doesn't load, the old chip with the words on it. */
.door b { display: none; }
.door.plain { height: 44px; padding: 0 6px; border-style: solid; border-width: 11px 13px; border-image: url(assets/readout.webp) 64 70 fill stretch; display: grid; place-items: center; }
.door.plain img { display: none; }
.door.plain b { display: inline; margin: -8px 0; font: 400 16px/1 var(--display); color: var(--gold); letter-spacing: .05em; white-space: nowrap; text-transform: uppercase; }
.door:hover { filter: brightness(1.15); }
.door:active { transform: scale(.96); }
.door:focus-visible { outline: 3px solid var(--neon-blue); outline-offset: 3px; }
.door i { font: 700 20px/1 var(--ui); font-style: normal; vertical-align: -1px; }
#juke:empty { display: none; }
/* The phone's table: beside the menu gear, with the logo moved over to make room. */
body.portrait #table-screen:not([hidden]) ~ .corner { left: 77px; top: 16px; }
body.portrait .phone-logo { margin-left: 100px; }

/* ---------- Logo ---------- */

.title-logo { width: 100%; max-width: 700px; filter: drop-shadow(0 0 24px rgba(255, 85, 68, .45)) drop-shadow(0 0 60px rgba(69, 201, 255, .25)); }
.phone-logo { height: 66px; filter: drop-shadow(0 0 10px rgba(255, 85, 68, .45)); }

/* ---------- Title ---------- */

#title-screen { display: grid; grid-template-columns: 1fr 560px; align-items: center; gap: 24px; padding: 0 56px; }
.title-brand { display: grid; justify-items: center; gap: 22px; }
.tagline { margin: 6px 0 0; font: 400 22px var(--display); color: var(--gold); letter-spacing: .04em; text-shadow: 0 2px 0 #000, 0 0 12px rgba(242, 193, 78, .35); }
.regulars { display: flex; gap: 16px; }
.regular { width: 128px; display: grid; justify-items: center; gap: 2px; text-align: center; }
.regular img { width: 104px; height: 104px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .65)); }
.regular b { font: 400 18px/1 var(--display); color: #fff; text-shadow: 0 2px 0 #000; }
.regular span { font: 700 13px/1.1 var(--ui); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.title-panel {
    display: grid; gap: 10px; padding: 18px 24px 18px 16px;
    border-style: solid; border-width: 28px 35px 31px 23px;
    border-image: url(assets/chat-frame.webp) 63 77 68 51 fill stretch;
}
.field-label { display: block; font: 400 15px var(--display); color: var(--gold); letter-spacing: .04em; margin-top: 4px; }
#player-name {
    width: 100%; height: 52px; padding: 0 16px; border-radius: 10px;
    border: 2px solid var(--gold-deep); background: #050505; color: var(--lcd);
    font: 400 22px var(--display); text-transform: uppercase; user-select: text;
    box-shadow: inset 0 0 14px rgba(125, 255, 107, .12);
}
#player-name::placeholder { color: #2f5a2b; }
#player-name:focus { outline: none; border-color: var(--gold); }
.avatar-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.avatar-grid button {
    aspect-ratio: 1; padding: 4px; border-radius: 12px; border: 2px solid #3a2c20;
    background: #120d0a; cursor: pointer;
}
.avatar-grid button img { width: 100%; height: 100%; object-fit: contain; display: block; }
.avatar-grid button.selected { border-color: var(--gold); background: #2a1c0c; box-shadow: 0 0 14px rgba(242, 193, 78, .45); }
.title-panel .arcade-btn.wide { width: 100%; height: 82px; font-size: 26px; border-width: 22px 26px; margin-top: 6px; }
.title-actions { display: grid; grid-template-columns: 1fr; gap: 12px; }
.title-actions .arcade-btn { width: 100%; min-width: 0; font-size: 18px; }
.smallprint { text-align: center; font: 700 14px var(--ui); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }

/* ---------- Lobby ---------- */

#lobby { display: grid; place-items: center; }
.lobby-panel {
    width: 900px; display: grid; justify-items: center; gap: 14px; padding: 18px 24px 14px 16px;
    border-style: solid; border-width: 28px 35px 31px 23px;
    border-image: url(assets/chat-frame.webp) 63 77 68 51 fill stretch;
}
.lobby-code {
    min-width: 420px; height: 84px; padding: 0 24px; cursor: pointer;
    border-style: solid; border-width: 16px 18px; border-image: url(assets/readout.webp) 64 70 fill stretch;
    background: none; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.lobby-code span { font: 700 18px var(--ui); letter-spacing: .2em; color: var(--muted); margin: -10px 0; }
.lobby-code b { font: 400 50px/1 var(--display); letter-spacing: .12em; color: var(--lcd); text-shadow: 0 0 12px rgba(125, 255, 107, .6); margin: -10px 0; }
.lobby-hint { margin: 0; font: 600 17px var(--ui); color: var(--muted); }
.lobby-names { display: grid; grid-template-columns: repeat(3, 250px); gap: 18px 44px; margin: 10px 0 6px; }
.lobby-seat.cpu .plate { opacity: .62; }
.lobby-panel .arcade-btn { min-width: 320px; height: 78px; font-size: 24px; }

/* ---------- Plates (every seat, and the lobby) ---------- */

.plate {
    position: relative; width: 230px; height: 82px;
    border-style: solid; border-width: 19px 23px;
    border-image: url(assets/plate-name.webp) 66 72 fill stretch;
    display: grid; align-content: center; padding-right: 58px;
}
.plate .name { font: 400 18px/1 var(--display); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: -6px 0 0 -6px; }
.plate .sub { font: 700 13px/1 var(--ui); letter-spacing: .12em; color: #d7cff5; margin: 6px 0 -6px -6px; white-space: nowrap; }
.plate .stack { display: flex; align-items: center; gap: 6px; margin: 6px 0 -6px -6px; }
.plate .stack::before { content: ''; width: 17px; height: 17px; flex: none; background: url(assets/chip-1k-flat.webp) center / contain no-repeat; }
.plate .stack b { font: 400 17px/1 var(--display); color: var(--gold); text-shadow: 0 1px 0 #000; font-variant-numeric: tabular-nums; }
.plate .avatar { position: absolute; right: -38px; top: 50%; width: 90px; height: 90px; transform: translateY(-54%); object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); z-index: 2; }
.seat.me .plate, .lobby-seat.me .plate { border-image-source: url(assets/plate-name-me.webp); }
.plate::after {
    content: ''; position: absolute; inset: -21px -25px; border-radius: 18px; pointer-events: none;
    box-shadow: 0 0 16px 3px rgba(69, 201, 255, .85), 0 0 34px 8px rgba(69, 201, 255, .45);
    opacity: 0; transition: opacity .25s ease;
}
.seat.turn .plate::after { opacity: 1; animation: turn-glow 1.4s ease-in-out infinite alternate; will-change: opacity; }
.seat.winner .plate::after { opacity: 1; box-shadow: 0 0 18px 4px rgba(242, 193, 78, .9), 0 0 40px 10px rgba(242, 193, 78, .45); }
@keyframes turn-glow { from { opacity: .45; } to { opacity: 1; } }
/* Folded or busted: a dark layer over the plate saying so; the face fades. */
body.portrait .seats .seat.folded .plate::before, body.portrait .seats .seat.broke .plate::before {
    content: 'Folded'; position: absolute; inset: -19px -23px; border-radius: 14px; z-index: 1;
    display: grid; place-items: center; padding-right: 50px; background: rgba(12, 9, 7, .9);
    font: 400 16px var(--display); color: var(--muted); letter-spacing: .06em; text-transform: uppercase;
}
body.portrait .seats .seat.folded .plate .avatar, body.portrait .seats .seat.broke .plate .avatar { opacity: .45; }
/* Wide screens: a folded plate dims and a quiet FOLDED bubble says so; the phone pods use the overlay above. */
body:not(.portrait) .seat.folded .plate, body:not(.portrait) .seat.broke .plate, .me-slot .seat.folded .plate { opacity: .5; }
body.portrait .seats .callout.out { display: none; }
.callout.out { color: var(--muted); border-color: #4a3a2c; box-shadow: none; }
/* The dealer button on the plate's corner; the blinds' buttons under it */
.dealer { position: absolute; left: -44px; top: -38px; width: 52px; height: 52px; z-index: 3; border-radius: 50%; box-shadow: 0 4px 10px rgba(0, 0, 0, .6); }
.blind-btn { position: absolute; left: -30px; bottom: -26px; width: 36px; height: 36px; z-index: 3; border-radius: 50%; box-shadow: 0 3px 8px rgba(0, 0, 0, .6); }

/* ---------- Table ---------- */

#table-screen { display: grid; grid-template-columns: 1fr 296px; gap: 14px; padding: 8px 10px 6px; }
.table-area { position: relative; min-width: 0; }
.poker-table {
    position: absolute; left: 79px; top: 70px; width: 1000px; height: 420px; border-radius: 210px;
    padding: 22px; background: url(assets/plate-metal.webp) center / 260px;
    border: 3px solid #0c0a08;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18), inset 0 -8px 14px rgba(0, 0, 0, .45), 0 16px 36px rgba(0, 0, 0, .6);
}
.felt {
    width: 100%; height: 100%; border-radius: 190px; position: relative; overflow: hidden;
    background: radial-gradient(ellipse at 50% 42%, rgba(42, 120, 78, .0) 0%, rgba(0, 0, 0, .5) 100%),
        url(assets/felt.webp) center / 700px, #0f3b2a;
    background-blend-mode: normal, luminosity, normal;
    box-shadow: inset 0 0 0 3px #d4a744, inset 0 0 0 6px #3c2a0e, inset 0 10px 40px rgba(0, 0, 0, .6);
}
/* Four gold rivets on the rail, like the euchre cross */
.poker-table::after {
    content: ''; position: absolute; inset: 8px 190px; pointer-events: none;
    background:
        radial-gradient(circle at 8px 8px, #ffe9a3 0 2px, #d7a43a 3px 6px, #6b4712 7px, transparent 8px) 0 0 / 16px 16px no-repeat,
        radial-gradient(circle at 8px 8px, #ffe9a3 0 2px, #d7a43a 3px 6px, #6b4712 7px, transparent 8px) 100% 0 / 16px 16px no-repeat,
        radial-gradient(circle at 8px 8px, #ffe9a3 0 2px, #d7a43a 3px 6px, #6b4712 7px, transparent 8px) 0 100% / 16px 16px no-repeat,
        radial-gradient(circle at 8px 8px, #ffe9a3 0 2px, #d7a43a 3px 6px, #6b4712 7px, transparent 8px) 100% 100% / 16px 16px no-repeat;
}
/* The moon man printed into the cloth */
.felt-moon { position: absolute; left: 50%; top: 50%; width: 300px; transform: translate(-50%, -50%); opacity: .07; }

/* Seats around the rail, clockwise from you (pos 0, bottom row) */
.seats .seat { position: absolute; z-index: 5; }
/* The side seats sit low enough for a bubble above them to clear ← The Bar (brief 015). */
.seat[data-pos='1'] { left: 24px; top: 370px; }
.seat[data-pos='2'] { left: 24px; top: 132px; }
.seat[data-pos='3'] { left: 50%; top: 2px; margin-left: -134px; }
.seat[data-pos='4'] { right: 44px; top: 132px; }
.seat[data-pos='5'] { right: 44px; top: 370px; }
.seats .seat:has(.say) { z-index: 6; } /* whoever's talking is over their neighbours' cards */
.seat { width: 230px; }

/* Hole cards: two backs tucked under the plate (face up at a showdown) */
.hole { display: flex; height: 74px; margin: 10px 0 0 22px; }
.hole .back, .hole .card { width: 52px; height: 74px; border-radius: 5px; box-shadow: -2px 3px 6px rgba(0, 0, 0, .5); }
.hole .back + .back { margin-left: -26px; transform: rotate(6deg); }
.hole .back:first-child { transform: rotate(-4deg); }
.hole.shown .card { --w: 62; width: 62px; height: 86px; }
.hole.shown .card + .card { margin-left: 6px; }
.seat[data-pos='3'] .hole { position: absolute; left: -104px; top: 4px; margin: 0; }
.seat[data-pos='3'] .hole.shown { left: -146px; top: -4px; }

.callout {
    position: absolute; left: 50%; top: -30px; transform: translateX(-60%);
    padding: 4px 14px; border-radius: 999px; background: #050505; border: 2px solid var(--gold-deep);
    font: 400 15px var(--display); color: var(--lcd); white-space: nowrap;
    box-shadow: 0 0 12px rgba(125, 255, 107, .25); z-index: 4; animation: pop-in .25s cubic-bezier(.2, 1.6, .4, 1);
}
/* The top seat's furniture hangs below the plate, aligned to its left edge: chips in a row,
   the tag pill under them. The bubble sits right of the face with its tail pointing back at it. */
.seat[data-pos='3'] .dealer { left: 0; top: calc(100% + 2px); }
.seat[data-pos='3'] .blind-btn { left: 0; top: calc(100% + 10px); }
.seat[data-pos='3']:has(.dealer) .blind-btn { left: 60px; }
.seat[data-pos='3'] .callout { top: calc(100% + 4px); left: 0; transform: none; animation-name: pop-in-say; }
/* With chips there, the pill joins their row, just right of them, so it stays on the stone and off the felt. */
.seat[data-pos='3']:has(.dealer) .callout, .seat[data-pos='3']:has(.blind-btn) .callout { top: calc(100% + 12px); }
.seat[data-pos='3']:has(.dealer) .callout { left: 62px; }
.seat[data-pos='3']:has(.blind-btn) .callout { left: 46px; }
.seat[data-pos='3']:has(.dealer):has(.blind-btn) .callout { left: 106px; }
.callout.raise { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 14px rgba(242, 193, 78, .45); }
.callout.allin { color: #ff8a73; border-color: var(--neon-red); box-shadow: 0 0 16px rgba(255, 85, 68, .6); }
.callout.win { color: var(--gold); border-color: var(--gold); font-size: 20px; box-shadow: 0 0 18px rgba(242, 193, 78, .7); }
.callout.away, .callout.thinking { color: var(--muted); border-color: #4a3a2c; box-shadow: none; }
.callout.thinking::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
@keyframes pop-in { from { transform: translateX(-60%) scale(.6); opacity: 0; } }

/* A regular piping up: a speech bubble by their seat */
.say {
    position: absolute; left: 0; top: -82px; z-index: 8; max-width: 280px; width: max-content;
    padding: 8px 14px; border-radius: 14px; background: var(--cream); color: var(--card-black);
    font: 700 17px/1.15 var(--ui); box-shadow: 0 6px 14px rgba(0, 0, 0, .55);
    animation: pop-in-say .3s cubic-bezier(.2, 1.6, .4, 1);
}
.say::after { content: ''; position: absolute; left: 40px; bottom: -9px; border: 10px solid transparent; border-bottom: 0; border-top-color: var(--cream); }
.seat[data-pos='4'] .say, .seat[data-pos='5'] .say { left: auto; right: -30px; }
.seat[data-pos='4'] .say::after, .seat[data-pos='5'] .say::after { left: auto; right: 60px; }
.seat[data-pos='3'] .say { top: 8px; left: calc(100% + 52px); right: auto; }
.seat[data-pos='3'] .say::after { left: -19px; right: auto; top: calc(50% - 5px); bottom: auto; border: 10px solid transparent; border-bottom: 0; border-top-color: transparent; border-right-color: var(--cream); }
@keyframes pop-in-say { from { transform: scale(.6); opacity: 0; } }

/* ---------- Chips ---------- */
/* A pile is short one-colour columns of chips seen from the side, each chip a step above the last. */
.pile { --cw: var(--chip-w, 30px); --step: var(--chip-step, 4px); display: inline-flex; align-items: flex-end; }
.pile .col { position: relative; flex: none; width: var(--cw); height: calc(var(--cw) * .81 + (var(--n) - 1) * var(--step)); }
.pile .col + .col { margin-left: calc(var(--cw) * -.1); }
.pile .col::before { content: ''; position: absolute; left: 4%; right: 4%; bottom: -3px; height: 45%; border-radius: 50%; background: rgba(0, 0, 0, .45); }
.pile .col img { position: absolute; left: 0; bottom: calc(var(--i) * var(--step)); width: 100%; display: block; }

/* Chips in front of a seat for this betting round: the pile with its amount under it.
   Each seat's bet is placed by the bottom-middle of its label, so taller piles grow up. */
.bet { position: absolute; z-index: 4; display: grid; justify-items: center; gap: 3px; transform: translate(-50%, -100%); }
.bet b {
    padding: 1px 9px; border-radius: 999px; background: rgba(5, 5, 5, .82); border: 1px solid var(--gold-deep);
    font: 400 15px/1.2 var(--display); color: var(--gold); white-space: nowrap;
}
.fx { position: absolute; inset: 0; z-index: 45; pointer-events: none; }

/* ---------- Reactions (tap a player) ---------- */
.seat .plate { cursor: pointer; }
.react-menu {
    position: absolute; z-index: 46; width: 430px; padding: 8px 8px 10px; border-radius: 14px;
    background: rgba(10, 8, 6, .96); border: 2px solid var(--gold-deep); box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
    animation: pop-in-say .16s ease;
}
.react-menu.self { width: 300px; }
.react-menu .rm-head { display: flex; align-items: center; gap: 8px; padding: 0 4px 6px; border-bottom: 1px solid rgba(242, 193, 78, .25); margin-bottom: 6px; }
.react-menu .rm-head img { width: 30px; height: 30px; object-fit: contain; }
.react-menu .rm-head b { font: 400 18px var(--display); color: var(--gold); }
.react-menu .rm-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.react-menu button {
    display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; cursor: pointer; min-width: 0;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(242, 193, 78, .2); color: var(--text); font: 600 13px/1.1 var(--ui);
}
.react-menu button img { width: 44px; height: 44px; object-fit: contain; }
.react-menu button:hover:not(:disabled) { border-color: var(--gold); background: rgba(242, 193, 78, .12); }
.react-menu button:disabled { opacity: .4; cursor: default; }
.react-menu .rm-grid .rm-wide { grid-column: 1 / -1; gap: 2px; padding: 10px 12px; text-align: left; justify-items: start; }
.react-menu .rm-wide b { font: 400 17px var(--display); color: var(--gold); }
.react-menu .rm-wide span { font: 600 14px var(--ui); color: var(--muted); }
.react-icon { position: absolute; object-fit: contain; pointer-events: none; }

/* The last 15 seconds of your turn: the readout counts down in red and your plate's glow turns red */
.hurry.your-turn #prompt, .hurry.your-turn #prompt em { color: #ff8a73; text-shadow: 0 0 10px rgba(255, 85, 68, .8); }
.hurry .seat.me.turn .plate::after { box-shadow: 0 0 16px 3px rgba(255, 85, 68, .9), 0 0 34px 8px rgba(255, 85, 68, .5); }
.sprite { position: absolute; display: flex; align-items: flex-end; justify-content: center; will-change: transform; }
.sprite.pot-size { --chip-w: 36px; --chip-step: 4.5px; }
.card-sprite img { width: 100%; height: 100%; display: block; border-radius: 5px; box-shadow: -2px 3px 6px rgba(0, 0, 0, .5); }
.dealing .hole > *, .dealing .your-cards .card { visibility: hidden; }
/* On the felt in front of each seat: the corners' bets above and below the board, Nikki's under her plate */
.seat .bet { --chip-w: 26px; --chip-step: 3.5px; }
.seat[data-pos='1'] .bet { left: 310px; top: 128px; }
.seat[data-pos='2'] .bet { left: 310px; top: 64px; }
.seat[data-pos='3'] .bet { left: 52%; top: 164px; }
.seat[data-pos='4'] .bet { left: -60px; top: 64px; }
.seat[data-pos='5'] .bet { left: -60px; top: 128px; }
.seat[data-pos='0'] .bet { left: 472px; top: -158px; }

/* Pot, board and street in the middle of the felt */
.table-center { position: absolute; left: 79px; top: 70px; width: 1000px; height: 420px; display: grid; align-content: center; justify-items: center; gap: 12px; pointer-events: none; z-index: 3; }
.pot {
    position: relative; height: 52px; min-width: 210px; padding: 0 10px;
    border-style: solid; border-width: 13px 15px; border-image: url(assets/readout.webp) 64 70 fill stretch;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.pot > span:not(.pot-pile) { font: 700 14px var(--ui); letter-spacing: .2em; color: var(--muted); margin: -8px 0; }
.pot b { font: 400 26px/1 var(--display); color: var(--lcd); text-shadow: 0 0 8px rgba(125, 255, 107, .6); margin: -8px 0; font-variant-numeric: tabular-nums; }
/* The gathered pot sits on the felt to the left of its readout; the deck to the right */
.pot-pile { position: absolute; right: calc(100% + 24px); bottom: -4px; display: flex; align-items: flex-end; --chip-w: 36px; --chip-step: 4.5px; }
.deck { position: absolute; left: calc(50% + 122px); top: 96px; width: 84px; transform: rotate(-6deg); }
.board { display: flex; gap: 10px; }
/* Empty board places: a faint outline in the cloth until a card lands there */
.board-slot { width: 96px; height: 134px; border-radius: 9px; border: 2px solid rgba(242, 193, 78, .14); box-shadow: inset 0 0 22px rgba(0, 0, 0, .22); }
.board .card.deal-in { animation-name: flip-in; animation-duration: .4s; }
@keyframes flip-in { from { transform: perspective(700px) translateY(-10px) rotateY(85deg); opacity: .3; } }
.board .card { --w: 96; width: 96px; height: 134px; }
.street { min-height: 22px; font: 400 17px var(--display); letter-spacing: .08em; color: var(--gold); text-shadow: 0 2px 0 #000, 0 0 10px rgba(0, 0, 0, .8); white-space: pre; }

/* ---------- Cards (the Euchre After Dark big-print card) ---------- */

.card {
    position: relative; width: var(--card-w); height: var(--card-h);
    font-size: calc(var(--w, 92) * 1px / 5.2);
    background: var(--cream); border-radius: 8px; border: 1px solid rgba(0, 0, 0, .35);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .45), inset 0 0 0 3px rgba(255, 255, 255, .5);
    color: var(--card-black); overflow: hidden; flex: none; isolation: isolate;
}
.card.red { color: var(--card-red); }
.card .idx { position: absolute; left: .26em; top: .2em; display: flex; flex-direction: column; align-items: center; font: 400 1em/0.95 var(--display); letter-spacing: -.08em; z-index: 2; }
.card .idx small { font: 400 .9em/1 'Segoe UI Symbol', 'Apple Symbols', 'DejaVu Sans', sans-serif; margin-top: .06em; letter-spacing: 0; }
.card .pip { position: absolute; left: 60%; top: 62%; transform: translate(-50%, -50%); font: 400 2.9em/1 'Segoe UI Symbol', 'Apple Symbols', 'DejaVu Sans', sans-serif; }
.card .face-art { position: absolute; right: 5%; bottom: 5%; width: 66%; }
/* The cards that make the winning hand: a gold edge just inside the card (cards clip anything outside). */
.card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; z-index: 3;
    box-shadow: inset 0 0 0 3px #ffd36b, inset 0 0 18px 5px rgba(242, 193, 78, .6);
}
.card.winning::after { opacity: 1; }
.card.deal-in { animation: deal-in .42s cubic-bezier(.2, .8, .3, 1) backwards; }
@keyframes deal-in { from { transform: translateY(-40px) rotate(-8deg) scale(.85); opacity: 0; } }

/* ---------- Bottom row: your plate, your cards, your controls ---------- */

.bottom-row {
    position: absolute; left: 0; right: 0; bottom: 0; height: 252px;
    display: grid; grid-template-columns: 286px 1fr 470px; align-items: end; gap: 10px;
}
.me-slot { position: relative; align-self: end; margin-bottom: 52px; padding-left: 22px; }
.me-slot .seat { position: relative; }
.tray {
    position: relative; height: 112px; margin-bottom: 16px;
    border-style: solid; border-width: 22px 26px; border-image: url(assets/hand-tray.webp) 56 64 fill stretch;
}
.your-cards { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); display: flex; gap: 10px; }
.your-cards .card { --w: 116; width: 116px; height: 162px; }
.your-cards .card:first-child { transform: rotate(-4deg); }
.your-cards .card:last-child { transform: rotate(4deg); }
.your-cards.folded .card { opacity: .35; }
.hand-label { display: block; font: 700 14px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); text-shadow: none; white-space: nowrap; }
.hand-label:empty { display: none; }

/* ---------- The dock (App.renderDock) ---------- */
/* A dark console with a thin gold rim and a rivet in each corner. Your turn: the prompt over the
   buttons and bet sizing. Any other moment ('host' modes): a face on the left (whoever's thinking,
   or the moon man) and what's happening, with the one button that moment needs. One height always. */
.controls {
    position: relative; display: grid; grid-template-areas: 'head' 'bet'; gap: 10px; align-self: end; align-content: center;
    height: 224px; padding: 14px 16px; margin-bottom: 12px; border-radius: 16px; border: 2px solid transparent;
    background: linear-gradient(#18120d, #0a0806) padding-box,
        linear-gradient(160deg, #ffe7a0, #b8862b 28%, #5a3d10 52%, #e0b04a 78%, #7a5214) border-box;
    box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(0, 0, 0, .9), inset 0 3px 14px rgba(0, 0, 0, .75), 0 12px 30px rgba(0, 0, 0, .6);
}
.controls::before {
    content: ''; position: absolute; inset: 5px; pointer-events: none; border-radius: 12px;
    background:
        radial-gradient(circle at 6px 6px, #ffe9a3 0 1.5px, #d7a43a 2.5px 4px, #5a3a0e 5px, transparent 6px) 0 0 / 12px 12px no-repeat,
        radial-gradient(circle at 6px 6px, #ffe9a3 0 1.5px, #d7a43a 2.5px 4px, #5a3a0e 5px, transparent 6px) 100% 0 / 12px 12px no-repeat,
        radial-gradient(circle at 6px 6px, #ffe9a3 0 1.5px, #d7a43a 2.5px 4px, #5a3a0e 5px, transparent 6px) 0 100% / 12px 12px no-repeat,
        radial-gradient(circle at 6px 6px, #ffe9a3 0 1.5px, #d7a43a 2.5px 4px, #5a3a0e 5px, transparent 6px) 100% 100% / 12px 12px no-repeat;
}
.dock-head { grid-area: head; display: grid; gap: 4px; justify-items: center; text-align: center; min-width: 0; }
#prompt { font: 400 21px/1.15 var(--display); color: var(--lcd); text-shadow: 0 0 10px rgba(125, 255, 107, .5); }
#prompt em { font-style: normal; }
.your-turn #prompt { color: var(--gold); text-shadow: 0 0 10px rgba(242, 193, 78, .6); }
.your-turn #prompt em { color: var(--lcd); text-shadow: 0 0 10px rgba(125, 255, 107, .55); }
.dock-sub { font: 600 15px/1.2 var(--ui); color: var(--muted); }
.dock-sub:empty { display: none; }
.dock-dots::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.2s steps(4) infinite; }
.bet-controls { grid-area: bet; display: grid; gap: 10px; }
.dock-face { display: none; }
/* Host modes: the face, then the words and button beside it */
.controls.host { grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: 'face head' 'face next'; column-gap: 16px; row-gap: 12px; }
.controls.host .dock-head { justify-items: start; text-align: left; align-self: end; }
.controls.host:has(.next-controls[hidden]) { grid-template-areas: 'face head'; }
.controls.host:has(.next-controls[hidden]) .dock-head { align-self: center; }
.controls.host .dock-face { display: block; grid-area: face; position: relative; align-self: center; width: 112px; height: 112px; }
.dock-face img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .7)); }
.next-controls { grid-area: next; }
/* Away: the moon man dozes */
.controls[data-mode='away'] .dock-face img { transform: rotate(-10deg); opacity: .85; }
.controls[data-mode='away'] .dock-face::after {
    content: 'z'; position: absolute; right: 2px; top: -4px; font: 400 22px var(--display); color: #bfe3ff;
    text-shadow: 0 0 8px rgba(69, 201, 255, .8); animation: snooze 2.4s ease-in-out infinite;
}
@keyframes snooze { 0% { transform: translate(0, 8px) scale(.6); opacity: 0; } 40% { opacity: 1; } 100% { transform: translate(10px, -14px) scale(1.1); opacity: 0; } }
/* Waiting on someone: their face, with a little nod while they think */
.controls[data-mode='wait'] .dock-face img { animation: ponder 2.2s ease-in-out infinite; }
@keyframes ponder { 50% { transform: rotate(-4deg) translateY(-2px); } }
.action-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
/* The cabinet's arcade buttons (the same art as Euchre's): red FOLD, blue CALL, green RAISE, gold I'M BACK /
   BUY BACK IN, blue DEAL NOW. The colors come from each button's class (.red, .green, .gold). */
.controls .arcade-btn { min-width: 0; width: 100%; height: 62px; font-size: 18px; border-width: 18px 22px; }
.controls .arcade-btn > * { margin: -18px 0; }
/* Bet sizing: RAISE TO, then − [slider] [amount] +, then the presets */
.sizing { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 10px; }
.sizing.off { visibility: hidden; }
#bet-label { font: 700 13px var(--ui); letter-spacing: .14em; color: var(--muted); white-space: nowrap; }
.stepper { display: grid; grid-template-columns: 34px minmax(0, 1fr) 72px 34px; align-items: center; gap: 8px; }
.stepper .step {
    width: 34px; height: 34px; padding: 0; border-radius: 9px; cursor: pointer; touch-action: none;
    border: 1px solid var(--gold-deep); background: linear-gradient(#2e2318, #120c07); color: #fff;
    font: 400 22px/1 var(--display); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 0 #000;
}
.stepper .step:active { transform: translateY(1px); background: #3a2a18; }
#bet-output {
    height: 34px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--gold-deep); background: #050403;
    font: 400 18px var(--display); color: var(--gold); font-variant-numeric: tabular-nums; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8);
}
/* The slider: a green fill up to a gold knob */
#bet-size { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: none; cursor: pointer; --fill: 0%; }
#bet-size::-webkit-slider-runnable-track {
    height: 8px; border-radius: 4px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8);
    background: linear-gradient(90deg, #2fae46, #6be37a var(--fill), #2a2420 var(--fill));
}
#bet-size::-moz-range-track { height: 8px; border-radius: 4px; background: #2a2420; }
#bet-size::-moz-range-progress { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #2fae46, #6be37a); }
#bet-size::-webkit-slider-thumb {
    -webkit-appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fff4c2, #f2c14e 45%, #a8761c); border: 2px solid #3b2300; box-shadow: 0 2px 6px rgba(0, 0, 0, .7);
}
#bet-size::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff4c2, #f2c14e 45%, #a8761c); border: 2px solid #3b2300; }
.presets { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.presets button {
    height: 32px; border-radius: 999px; border: 1px solid var(--gold-deep); background: linear-gradient(#2a1d10, #120c07); cursor: pointer;
    font: 400 13px var(--display); color: var(--gold);
}
.presets button:hover { border-color: var(--gold); color: #fff; }

/* ---------- The strength dial (the hand helper) ---------- */
/* Under your cards: a ring colored and filled by the hand's rating (Weak to Monster), your chance to
   win right now, and the rating. Hover it (or tap it on a phone) for the hand in words. */
.dial {
    position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); z-index: 6;
    display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; cursor: pointer;
    border-radius: 999px; background: rgba(6, 5, 4, .88); border: 1px solid rgba(242, 193, 78, .3); box-shadow: 0 6px 14px rgba(0, 0, 0, .6);
    font: inherit; color: inherit;
}
.dial svg { width: 40px; height: 40px; display: block; overflow: visible; }
.dial .ring { fill: none; stroke: var(--tier); stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.dial b { font: 400 18px var(--display); color: var(--tier); }
.dial > span { font: 700 13px var(--ui); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.dial[data-tier='0'] { --tier: #ff6a52; } .dial[data-tier='1'] { --tier: #ffa24a; } .dial[data-tier='2'] { --tier: #f2d14e; }
.dial[data-tier='3'] { --tier: #8be04e; } .dial[data-tier='4'] { --tier: #6dff7a; }
.dial .tip {
    position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); display: none; z-index: 2;
    padding: 8px 12px; border-radius: 10px; background: var(--cream); color: var(--card-black); white-space: nowrap;
    font: 700 15px/1.25 var(--ui); text-align: center; box-shadow: 0 6px 14px rgba(0, 0, 0, .55); text-transform: none; letter-spacing: 0;
}
.dial .tip small { display: block; font-weight: 600; font-size: 13px; color: #5b4a3a; }
.dial .tip::after { content: ''; position: absolute; left: 50%; margin-left: -8px; bottom: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: var(--cream); }
.dial:hover .tip, .dial.open .tip { display: block; }
.dealing .dial { visibility: hidden; }
.next-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
/* The next hand deals itself; the bar under NEXT HAND fills while it waits (pressing it deals now). */
#next-hand { position: relative; }
#next-hand.counting::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 4px; border-radius: 2px;
    background: var(--lcd); box-shadow: 0 0 6px rgba(125, 255, 107, .7); transform-origin: left;
    animation: count-down var(--hold, 3s) linear forwards;
}
@keyframes count-down { from { transform: scaleX(0); } }

/* Showdown banner */
.banner {
    position: absolute; left: calc((100% - 310px) / 2); top: 176px; transform: translate(-50%, -50%);
    z-index: 30; pointer-events: none; text-align: center; opacity: 0; will-change: transform, opacity;
    display: grid; gap: 8px; justify-items: center;
}
.banner .big {
    font: 400 64px/1 var(--display); color: #fff; white-space: nowrap; -webkit-text-stroke: 3px #1a0503;
    text-shadow: 0 0 18px var(--neon-blue), 0 0 46px var(--neon-blue), 0 6px 0 #062a42;
}
.banner.mine .big { text-shadow: 0 0 18px var(--gold), 0 0 46px var(--gold), 0 6px 0 #5b3d05; }
.banner .small { font: 400 24px var(--display); color: var(--gold); text-shadow: 0 2px 0 #000, 0 0 12px rgba(0, 0, 0, .8); }
.banner.show { animation: banner 2.4s ease forwards; }
@keyframes banner {
    0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
    14% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
    22%, 80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.05); opacity: 0; }
}

/* ---------- Side column ---------- */

.side { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.side-top { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 2px; }
#exit { margin-left: 12px; }
.readout, .readout-clock {
    height: 52px; padding: 0 8px; border-style: solid; border-width: 13px 15px;
    border-image: url(assets/readout.webp) 64 70 fill stretch; background: none;
    display: flex; align-items: center; justify-content: space-between;
}
.readout span, .readout-clock span { font: 700 14px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: -8px 0; }
.readout b, .readout-clock b { font: 400 24px/1 var(--display); color: var(--lcd); text-shadow: 0 0 8px rgba(125, 255, 107, .6); margin: -8px 0; font-variant-numeric: tabular-nums; }
.readout b.up { color: var(--lcd); }
.readout b.down { color: #ff8a73; text-shadow: 0 0 8px rgba(255, 85, 68, .6); }
.readout-clock { height: 56px; border-width: 14px 15px 14px 58px; border-image: url(assets/readout-clock.webp) 58 64 58 236 fill stretch; padding-left: 12px; }
.room-code { cursor: pointer; }
.room-code b { letter-spacing: .1em; }
.chat {
    flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 2px 4px 4px;
    border-style: solid; border-width: 28px 35px 31px 23px;
    border-image: url(assets/chat-frame.webp) 63 77 68 51 fill stretch;
}
/* Log filter: All / Game / Chat */
.chat-filter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.chat-filter button {
    position: relative; height: 26px; padding: 0; border-radius: 8px; border: 1px solid #4a3a2c; background: #120d0a;
    font: 400 12px var(--display); color: var(--muted); cursor: pointer;
}
.chat-filter button[aria-checked='true'] { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 10px rgba(242, 193, 78, .25); }
.chat-filter .dot { position: absolute; top: 4px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #e3261b; box-shadow: 0 0 6px rgba(227, 38, 27, .8); }
.chat-log[data-filter='game'] .msg:not(.sys), .chat-log[data-filter='game'] .msg.react { display: none; }
.chat-log[data-filter='chat'] .msg.sys:not(.react), .chat-log[data-filter='chat'] .divider { display: none; }
.chat-log .msg.react { color: var(--gold); border-left-color: var(--gold-deep); }
.connection { font: 700 13px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.connection:empty { display: none; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; font-size: 16px; user-select: text; scrollbar-width: thin; scrollbar-color: #5a4632 transparent; }
.chat-log .msg { display: flex; gap: 6px; align-items: flex-start; line-height: 1.2; }
.chat-log .msg img { width: 26px; height: 26px; object-fit: contain; flex: none; margin-top: -2px; }
.chat-log .msg b { color: var(--gold); font-weight: 700; margin-right: 5px; }
.chat-log .msg.me b { color: var(--neon-blue); }
.chat-log .msg.sys { color: var(--muted); font-weight: 500; font-size: 15px; padding-left: 4px; border-left: 2px solid #4a3a2c; }
.chat-log .msg.sys.big { color: var(--text); border-left-color: var(--gold); }
.chat-log .divider { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font: 400 12px var(--display); color: var(--gold-deep); letter-spacing: .06em; text-transform: uppercase; }
.chat-log .divider::before, .chat-log .divider::after { content: ''; flex: 1; height: 1px; background: #4a3a2c; }
.quick-chat { display: flex; flex-wrap: wrap; gap: 4px; }
.quick-chat button { padding: 3px 9px; border-radius: 999px; border: 1px solid #5a4632; background: #120d0a; font: 600 14px var(--ui); color: var(--text); cursor: pointer; }
.quick-chat button:hover { border-color: var(--gold); color: var(--gold); }
.chat-form { display: flex; gap: 4px; }
.chat-form input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid #5a4632; background: #050505; color: var(--text); font: 600 16px var(--ui); user-select: text; }
.chat-form input:focus { outline: none; border-color: var(--gold); }
.chat-form button { height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--gold-deep); background: #2a1c0c; color: var(--gold); font: 400 13px var(--display); cursor: pointer; }

/* ---------- Dialogs & toast (outside the stage, sized to the window) ---------- */

dialog {
    width: min(560px, 92vw); max-height: 88vh; overflow: auto; color: var(--text); background: none;
    padding: 22px 26px 22px 20px; border-style: solid; border-width: 28px 35px 31px 23px;
    border-image: url(assets/chat-frame.webp) 63 77 68 51 fill stretch;
    font: 600 18px/1.35 var(--ui);
}
dialog::backdrop { background: rgba(5, 3, 2, .75); }
dialog h2 { margin: 4px 0 10px; font: 400 28px/1.1 var(--display); color: var(--gold); }
dialog p, dialog ol { margin: 0 0 12px; }
dialog ol { padding-left: 20px; }
dialog li { margin-bottom: 6px; }
dialog .arcade-btn { width: 100%; margin-top: 10px; }
dialog .field-label { margin: 8px 0 6px; }
.dialog-close { position: absolute; right: 8px; top: 2px; background: none; border: 0; color: var(--muted); font-size: 30px; cursor: pointer; }
.invite-url { width: 100%; height: 40px; padding: 0 10px; border-radius: 8px; border: 1px solid #5a4632; background: #050505; color: var(--text); font: 600 14px var(--ui); }
.menu-list { display: grid; gap: 4px; }
/* Table speed: Relaxed / Normal / Quick */
.table-settings { display: grid; gap: 6px; margin: 4px 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(242, 193, 78, .25); }
.table-settings .arcade-btn { margin-top: 0; }
.speed-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.speed-row button {
    height: 44px; border-radius: 10px; border: 2px solid #4a3a2c; background: #120d0a; cursor: pointer;
    font: 400 15px var(--display); color: var(--muted);
}
@media (max-width: 500px) { .speed-row button { font-size: 12px; } } /* dialogs are sized to the window, not the stage */
.speed-row button[aria-checked='true'] { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 14px rgba(242, 193, 78, .25); }
#toast {
    position: fixed; left: 50%; bottom: 7vh; transform: translateX(-50%); z-index: 100; max-width: 90vw;
    padding: 12px 22px; border-radius: 999px; background: #050505; border: 2px solid var(--gold-deep);
    font: 700 18px var(--ui); color: var(--gold); box-shadow: 0 8px 24px rgba(0, 0, 0, .6); text-align: center;
}

/* =================================================================================
   Phone cabinet (body.portrait): 600 wide, 960-1400 tall.
   The five other seats sit in an arc across the top as compact pods; the board gets the middle;
   your plate, cards and buttons sit at the bottom under your thumb. Chat is a drawer.
   ================================================================================= */

body.portrait .phone-only { display: revert; }
body.portrait .bezel { border-width: 22px 20px 26px; }
body.portrait .screen { inset: 18px 16px 22px; border-radius: 14px; }
body.portrait .view { inset: 0; }

body.portrait #title-screen { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 26px; padding: 18px; }
body.portrait .title-logo { max-width: 520px; }
body.portrait .title-brand { gap: 12px; }
body.portrait .tagline { font-size: 17px; }
body.portrait .regulars { gap: 4px; }
body.portrait .regular { width: 100px; }
body.portrait .regular img { width: 72px; height: 72px; }
body.portrait .regular b { font-size: 15px; }
body.portrait .regular span { font-size: 11px; }
body.portrait .title-panel { padding: 12px 18px 12px 10px; }
body.portrait #lobby { padding: 10px; }
body.portrait .lobby-panel { width: 100%; }
body.portrait .lobby-names { grid-template-columns: repeat(2, 220px); gap: 16px 34px; }
body.portrait .lobby-names .plate { width: 200px; }
body.portrait .lobby-code { min-width: 0; width: 100%; }
body.portrait .lobby-panel .arcade-btn { min-width: 0; width: 100%; }

body.portrait #table-screen {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
    gap: 6px; padding: 6px 6px 8px;
}
body.portrait .phone-header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
body.portrait .phone-header .round { width: 58px; height: 58px; }
body.portrait .chat-btn::before {
    content: ''; position: absolute; inset: 20%; border-radius: 50%; z-index: 1;
    background: radial-gradient(ellipse at 50% 16%, rgba(255, 255, 255, .45) 0 18%, transparent 42%), radial-gradient(circle at 50% 40%, #2d7fd0 0%, #1858a8 60%, #0b2f66 100%);
}
body.portrait .chat-icon { position: absolute; left: 30%; top: 32%; width: 40%; height: 36%; z-index: 2; fill: #fff; }
body.portrait .chat-icon circle { fill: #1858a8; }
body.portrait .badge { position: absolute; right: -2px; top: -2px; z-index: 3; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--neon-red); color: #fff; font: 400 13px/24px var(--display); box-shadow: 0 0 0 2px #1a0503; }
body.portrait .phone-readouts { display: grid; grid-template-columns: 0.8fr 1fr 1.2fr; gap: 6px; }
body.portrait .phone-readouts .readout { height: 50px; }
body.portrait .phone-readouts .readout span { font-size: 13px; letter-spacing: .1em; }
body.portrait .phone-readouts .readout b { font-size: 20px; }

body.portrait .table-area {
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0;
}
body.portrait .poker-table { display: none; }

/* The arc of pods: five columns, the ends a little lower, like chairs around the far side of the table */
/* The band under the pods (bottom padding) is where bets and shown cards hang, so nothing that comes and
   goes during a hand changes the row's height and the felt below never moves. */
body.portrait .seats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; gap: 2px; padding: 34px 0 84px; position: relative; z-index: 5; }
body.portrait .seats .seat { position: relative; inset: auto; margin: 0; width: auto; display: grid; justify-items: center; }
body.portrait .seats .seat[data-pos='1'], body.portrait .seats .seat[data-pos='5'] { margin-top: 50px; }
body.portrait .seats .seat[data-pos='2'], body.portrait .seats .seat[data-pos='4'] { margin-top: 14px; }
body.portrait.short .seats .seat[data-pos='1'], body.portrait.short .seats .seat[data-pos='5'] { margin-top: 24px; }
body.portrait.short .seats .seat[data-pos='2'], body.portrait.short .seats .seat[data-pos='4'] { margin-top: 6px; }
body.portrait .seats .seat[data-pos='1'] { order: 1; }
body.portrait .seats .seat[data-pos='2'] { order: 2; }
body.portrait .seats .seat[data-pos='3'] { order: 3; }
body.portrait .seats .seat[data-pos='4'] { order: 4; }
body.portrait .seats .seat[data-pos='5'] { order: 5; }
body.portrait .seats .plate {
    width: 104px; height: 116px; border-width: 12px 14px; padding: 58px 0 0; display: grid; justify-items: center; align-content: start; gap: 2px;
}
body.portrait .seats .plate .avatar { right: auto; left: 50%; top: -30px; width: 82px; height: 82px; transform: translateX(-50%); }
body.portrait .seats .plate .name { margin: 0; font-size: 15px; max-width: 86px; text-align: center; }
body.portrait .seats .plate .stack { margin: 0; gap: 4px; }
body.portrait .seats .plate .stack::before { width: 11px; height: 11px; }
body.portrait .seats .plate .stack b { font-size: 14px; }
body.portrait .seats .plate::after { inset: -13px -15px; }
body.portrait .seats .seat.folded .plate::before, body.portrait .seats .seat.broke .plate::before { inset: -12px -14px; padding: 46px 0 0; font-size: 13px; }
body.portrait .seats .seat.broke .plate::before { content: 'Out'; }
body.portrait .seats .seat.folded.next .plate::before { content: 'Next hand'; }
body.portrait .seats .dealer { left: -8px; top: -34px; width: 40px; height: 40px; }
body.portrait .seats .blind-btn { left: -8px; bottom: -14px; width: 30px; height: 30px; }
body.portrait .seats .hole { position: absolute; right: 0; top: 4px; margin: 0; height: 40px; z-index: 3; }
body.portrait .seats .hole .back { width: 26px; height: 38px; border-radius: 3px; }
body.portrait .seats .hole .back + .back { margin-left: -16px; }
body.portrait .seats .hole.shown, body.portrait .seats .seat[data-pos='3'] .hole.shown { position: absolute; left: 50%; right: auto; top: calc(100% + 30px); height: auto; margin: 0; gap: 2px; transform: translateX(-50%); }
body.portrait .seats .seat[data-pos='3'] .hole { left: auto; right: 0; top: 4px; }
body.portrait .seats .hole.shown .card { --w: 50; width: 50px; height: 70px; }
body.portrait .seats .hole.shown .card + .card { margin-left: 0; }
body.portrait .seats .callout { top: auto; bottom: -30px; left: 50%; transform: translateX(-50%); font-size: 12px; padding: 2px 8px; z-index: 6; }
body.portrait .seats .callout.win { font-size: 15px; }
/* Top pod, same rule as the desktop top seat: furniture hangs below the plate at its left edge
   (the plate sits centered in the cell, so 6px in), bubble right of the face, tail pointing at it. */
body.portrait .seats .seat[data-pos='3'] .dealer { left: 6px; top: calc(100% + 2px); }
body.portrait .seats .seat[data-pos='3'] .blind-btn { left: 6px; top: calc(100% + 7px); bottom: auto; }
body.portrait .seats .seat[data-pos='3']:has(.dealer) .blind-btn { left: 52px; }
body.portrait .seats .seat[data-pos='3'] .callout { top: calc(100% + 2px); bottom: auto; left: 6px; transform: none; }
body.portrait .seats .seat[data-pos='3']:has(.dealer) .callout, body.portrait .seats .seat[data-pos='3']:has(.blind-btn) .callout { top: calc(100% + 48px); }
body.portrait .seats .seat[data-pos='3'] .say { top: -26px; bottom: auto; left: calc(100% + 10px); right: auto; transform: none; }
body.portrait .seats .seat[data-pos='3'] .say::after { left: -19px; right: auto; top: 24px; margin: 0; bottom: auto; border: 10px solid transparent; border-bottom: 0; border-top-color: transparent; border-right-color: var(--cream); }

@keyframes pop-in { from { transform: translateX(-50%) scale(.6); opacity: 0; } }
body.portrait .seats .bet { position: absolute; left: 50%; right: auto; top: calc(100% + 30px); transform: translateX(-50%); margin: 0; --chip-w: 22px; --chip-step: 3px; }
body.portrait .seats .bet b { font-size: 12px; padding: 0 6px; }
body.portrait .seats .say { top: auto; bottom: calc(100% + 40px); left: 50%; right: auto; transform: translateX(-50%); max-width: 220px; font-size: 15px; }
body.portrait .seats .seat[data-pos='1'] .say { left: 0; transform: none; }
body.portrait .seats .seat[data-pos='5'] .say { left: auto; right: 0; transform: none; }
body.portrait .seats .say::after { left: 50%; margin-left: -10px; right: auto; display: block; }

/* The felt in the middle: pot, board, street */
body.portrait .table-center {
    position: relative; left: auto; top: auto; width: auto; height: auto; margin: 8px 2px;
    border-radius: 220px / 150px; padding: 18px 10px;
    background: radial-gradient(ellipse at 50% 42%, rgba(42, 120, 78, 0) 0%, rgba(0, 0, 0, .5) 100%), url(assets/felt.webp) center / 600px, #0f3b2a;
    background-blend-mode: normal, luminosity, normal;
    border: 14px solid transparent;
    box-shadow: inset 0 0 0 3px #d4a744, inset 0 0 0 6px #3c2a0e, inset 0 10px 40px rgba(0, 0, 0, .6), 0 0 0 14px #5c5650, 0 0 0 16px #0c0a08, 0 14px 30px rgba(0, 0, 0, .6);
    align-content: center; gap: 10px;
}
body.portrait .board { gap: 6px; }
body.portrait .deck { left: auto; right: 16px; top: 10px; width: 64px; }
body.portrait .pot-pile { --chip-w: 28px; --chip-step: 3.5px; right: calc(100% + 14px); }
body.portrait .felt-moon { display: none; }
body.portrait .board-slot, body.portrait .board .card { --w: 88; width: 88px; height: 124px; }
body.portrait .street { font-size: 15px; white-space: normal; text-align: center; }
body.portrait .pot { height: 50px; }

/* You: plate on the left, your two cards big on the right, buttons below */
/* Above the felt (z-index), so your cards rest on the table's edge instead of sliding under it */
body.portrait .bottom-row {
    position: relative; z-index: 4; height: auto; grid-template-columns: 250px 1fr; grid-template-rows: auto auto;
    align-items: end; gap: 34px 4px;
}
body.portrait .me-slot { grid-column: 1; grid-row: 1; margin: 0 0 22px; padding-left: 24px; }
body.portrait .me-slot .seat { width: 210px; }
body.portrait .me-slot .plate { width: 200px; }
body.portrait .me-slot .callout { left: 40%; }
body.portrait .me-slot .bet { left: 200px; top: -30px; --chip-w: 26px; --chip-step: 3.5px; }
body.portrait .tray { grid-column: 2; grid-row: 1; border: 0; height: 176px; margin: 0; border-image: none; }
body.portrait .your-cards { bottom: 0; gap: 6px; }
body.portrait .your-cards .card { --w: 126; width: 126px; height: 176px; }
body.portrait .hand-label { font-size: 15px; }
body.portrait .controls { grid-column: 1 / -1; grid-row: 2; height: 240px; padding: 12px 14px; gap: 10px; margin: 0; }
body.portrait #prompt { font-size: 22px; }
body.portrait .controls .arcade-btn { height: 64px; font-size: 21px; border-width: 19px 22px; }
body.portrait .controls .arcade-btn > * { margin: -19px 0; }
body.portrait .controls.host { grid-template-columns: 104px minmax(0, 1fr); }
body.portrait .controls.host .dock-face { width: 104px; height: 104px; }
body.portrait .dock-sub { font-size: 17px; }
body.portrait .stepper { grid-template-columns: 42px minmax(0, 1fr) 80px 42px; }
body.portrait .stepper .step { width: 42px; height: 40px; font-size: 26px; }
body.portrait #bet-output { height: 40px; font-size: 20px; }
body.portrait .presets button { height: 38px; font-size: 15px; }
/* The dial straddles the bottom of your cards; the row gap below leaves it room */
body.portrait .dial { bottom: -30px; }
body.portrait .dial svg { width: 44px; height: 44px; }
body.portrait .banner { left: 50%; top: 40%; }
body.portrait .banner .big { font-size: 44px; -webkit-text-stroke: 2px #1a0503; }
body.portrait .banner .small { font-size: 20px; }

/* Side column → the chat drawer; its buttons live in the Menu */
body.portrait .side { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 64%; z-index: 45;
    transform: translateY(calc(100% + 40px)); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
body.portrait #table-screen.chat-open .side { transform: none; }
body.portrait .side > :not(.chat) { display: none; }
body.portrait .chat-heading { display: flex; justify-content: space-between; align-items: center; }
body.portrait .chat-heading b { font: 400 18px var(--display); color: var(--gold); }
body.portrait .chat-log { font-size: 18px; }
body.portrait .quick-chat button { font-size: 16px; padding: 5px 12px; }
body.portrait .chat-form input, body.portrait .chat-form button { height: 46px; font-size: 18px; }
body.portrait .chat-filter button { height: 40px; font-size: 16px; }
body.portrait .react-menu { width: 560px; }
body.portrait .react-menu.self { width: 340px; }
body.portrait .react-menu button { font-size: 15px; padding: 8px 2px; }
body.portrait .react-menu button img { width: 62px; height: 62px; }
body.portrait .react-menu .rm-head b { font-size: 22px; }

/* ---------- The bar: Multiplayer panel, countdown, the bouncer (bar-ui.js) ---------- */

.title-actions #host { height: 72px; font-size: 22px; }
.bar-calling, .bar-closed { text-align: center; font-size: 20px; margin: 18px 0 6px; }
.bar-calling { color: var(--muted); animation: bar-blink 1.2s ease-in-out infinite; }
@keyframes bar-blink { 50% { opacity: .45; } }
.bar-me { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.bar-face {
    width: 64px; height: 64px; padding: 4px; border-radius: 14px; border: 2px solid var(--gold-deep);
    background: #120d0a; cursor: pointer; box-shadow: 0 0 14px rgba(242, 193, 78, .25);
}
.bar-face img { width: 100%; height: 100%; object-fit: contain; display: block; }
#bar-name, #bar-code {
    width: 100%; min-width: 0; height: 52px; padding: 0 14px; border-radius: 10px;
    border: 2px solid var(--gold-deep); background: #050505; color: var(--lcd);
    font: 400 22px var(--display); text-transform: uppercase; user-select: text;
    box-shadow: inset 0 0 14px rgba(125, 255, 107, .12);
}
#bar-code { letter-spacing: .3em; }
#bar-name::placeholder, #bar-code::placeholder { color: #2f5a2b; }
#bar-name:focus, #bar-code:focus { outline: none; border-color: var(--gold); }
.bar-note { margin: 8px 0 4px !important; font: 600 15px/1.3 var(--ui); color: var(--muted); }
.bar-join { display: grid; grid-template-columns: 1fr 132px; gap: 10px; align-items: center; }
dialog .bar-join .arcade-btn { margin-top: 0; height: 56px; min-width: 0; font-size: 18px; }
.bar-tables ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bar-tables li {
    display: grid; grid-template-columns: auto 1fr 120px; gap: 10px; align-items: center;
    padding: 6px 8px 6px 12px; border-radius: 10px; background: rgba(0, 0, 0, .45); border: 1px solid #3a2c20;
}
.bar-tables li b { font: 400 20px var(--display); color: var(--lcd); letter-spacing: .12em; }
.bar-tables li span { font: 600 14px var(--ui); color: var(--muted); }
dialog .bar-tables .arcade-btn { margin-top: 0; height: 48px; min-width: 0; font-size: 15px; }
.bar-error { min-height: 0; margin: 8px 0 0 !important; color: #ff8a7a; font: 600 15px var(--ui); }
.bar-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.bar-tabs button {
    height: 38px; border-radius: 8px; border: 1px solid var(--gold-deep); background: #120d0a;
    color: var(--muted); font: 400 15px var(--display); cursor: pointer;
}
.bar-tabs button[aria-selected='true'] { background: #2a1c0c; color: var(--gold); }
.bar-faces { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-height: 46vh; overflow: auto; }
.bar-faces button { aspect-ratio: 1; padding: 4px; border-radius: 12px; border: 2px solid #3a2c20; background: #120d0a; cursor: pointer; }
.bar-faces button img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bar-faces button.selected { border-color: var(--gold); background: #2a1c0c; box-shadow: 0 0 14px rgba(242, 193, 78, .45); }
@media (max-width: 520px) {
    .bar-join { grid-template-columns: 1fr 104px; }
    #bar-code { letter-spacing: .12em; padding: 0 10px; font-size: 20px; }
    .bar-tables li { grid-template-columns: auto 1fr; }
    .bar-tables li button { grid-column: 1 / -1; }
    .bar-faces { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* The host's gone: the bar's countdown, over the felt, on every seat */
.bar-wait {
    position: absolute; left: 50%; top: 318px; z-index: 30; transform: translateX(-50%);
    display: grid; justify-items: center; gap: 2px; padding: 12px 28px 14px; min-width: 340px;
    border-radius: 16px; border: 2px solid var(--gold-deep); background: rgba(5, 4, 3, .92);
    box-shadow: 0 0 0 1px #000, 0 12px 40px rgba(0, 0, 0, .7), 0 0 24px rgba(242, 193, 78, .2);
    pointer-events: none;
}
.bar-wait b { font: 400 20px var(--display); color: var(--gold); letter-spacing: .06em; }
.bar-wait span { font: 400 48px/1 var(--display); color: #ff6a5a; text-shadow: 0 0 12px rgba(255, 80, 60, .5); }
.bar-wait small { font: 600 14px var(--ui); color: var(--muted); }
body.portrait .bar-wait { top: 480px; min-width: 0; width: 470px; }

.react-menu .rm-grid .rm-kick { border-color: #6a1d18; }
.react-menu .rm-kick b { color: #ff8a7a; }

/* Slice two (SDK 1.1.0): open tables, who's here, the bouncer's tools, the lobby's door */
.bar-open-list, .bar-blocked ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bar-open-list li, .bar-blocked li {
    display: grid; grid-template-columns: 44px 1fr 132px; gap: 10px; align-items: center;
    padding: 6px 8px; border-radius: 10px; background: rgba(0, 0, 0, .45); border: 1px solid #3a2c20;
}
.bar-open-list img, .bar-blocked img { width: 44px; height: 44px; object-fit: contain; }
.bar-open-list span, .bar-blocked span { display: grid; min-width: 0; }
.bar-open-list b, .bar-blocked b { font: 400 20px/1.1 var(--display); color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-open-list small { font: 600 14px var(--ui); color: var(--muted); }
dialog .bar-open-list .arcade-btn, dialog .bar-blocked .arcade-btn { margin-top: 0; height: 48px; min-width: 0; font-size: 15px; }
.bar-open-list li.bar-empty { display: block; padding: 12px; text-align: center; color: var(--muted); font: 600 16px var(--ui); }
.bar-empty .text-btn { font: inherit; text-transform: none; letter-spacing: 0; color: var(--gold); text-decoration: underline; padding: 0; }
.bar-here-row { display: flex; align-items: center; gap: 10px; }
.bar-here-faces { display: flex; }
.bar-here-faces img {
    width: 38px; height: 38px; object-fit: contain; border-radius: 50%; margin-right: -8px;
    background: #120d0a; border: 2px solid #3a2c20;
}
.bar-here-count { margin-left: 8px; font: 400 18px var(--display); color: var(--lcd); white-space: nowrap; }
.bar-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bar-reasons button {
    display: grid; gap: 2px; padding: 10px 12px; text-align: left; border-radius: 10px; cursor: pointer;
    background: rgba(0, 0, 0, .45); border: 2px solid #3a2c20; color: var(--text);
}
.bar-reasons b { font: 400 18px var(--display); color: var(--gold); }
.bar-reasons span { font: 600 13px/1.25 var(--ui); color: var(--muted); }
.bar-reasons button[aria-pressed='true'] { border-color: var(--gold); background: #2a1c0c; box-shadow: 0 0 12px rgba(242, 193, 78, .35); }
dialog .arcade-btn:disabled { opacity: .45; cursor: default; }
@media (max-width: 520px) {
    .bar-open-list li, .bar-blocked li { grid-template-columns: 40px 1fr 104px; gap: 8px; }
    .bar-reasons { grid-template-columns: 1fr; }
    .bar-here-faces img { width: 30px; height: 30px; margin-right: -9px; }
    dialog .bar-blocked .arcade-btn { font-size: 13px; }
}

/* Mute / Block / Report: one short row under the reactions, so six seats' menus stay small on a phone */
.react-menu .rm-grid .rm-tools { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0; border: 0; background: none; }
.react-menu .rm-tools button { padding: 8px 2px; font: 400 16px var(--display); color: var(--muted); letter-spacing: .04em; }
.react-menu .rm-tools button:hover { color: var(--gold); }
body.portrait .react-menu .rm-tools button { font-size: 20px; padding: 12px 2px; }

.lobby-bobby { margin: 0; font: 600 18px var(--ui); color: var(--gold); }
.lobby-open {
    display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 12px; cursor: pointer;
    background: rgba(0, 0, 0, .45); border: 1px solid #3a2c20; max-width: 560px;
}
.lobby-open[hidden] { display: none; }
.lobby-open input { width: 26px; height: 26px; accent-color: #3bb34a; flex: none; }
.lobby-open span { display: grid; }
.lobby-open b { font: 400 20px var(--display); color: var(--gold); }
.lobby-open small { font: 600 14px var(--ui); color: var(--muted); }