/*
 * EUCHRE AFTER DARK - cabinet styles
 * The whole game lives on a fixed 1600x900 stage that app.js scales to fit the window,
 * like a bar-top machine: nothing reflows, it just gets bigger or smaller.
 * Framed art (bezel, plates, readouts, buttons) is 9-sliced with border-image so
 * corners and rivets stay crisp at any size.
 */

: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;
  --hand-w: 112px;
  --hand-h: 156px;
  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; }

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

#viewport { position: fixed; inset: 0; overflow: hidden; }

#stage {
  position: absolute;
  left: 0; top: 0;
  width: 1600px; height: 900px;
  transform-origin: 0 0;
}
/* Neon spill around the cabinet: a shadow on an empty layer behind it, painted once.
   (A drop-shadow filter on #stage itself re-rendered the whole cabinet on every animation frame.) */
#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;
  background: url(../assets/felt.webp) center / cover, var(--felt-dark);
  border-radius: 18px;
  overflow: hidden;
}
.view { position: absolute; inset: 6px 6px; }

/* The panel frame (chat-frame.webp) is lopsided: the right side carries the neon tube,
   and an inner bevel line sits inside the gold trim. Every panel slices it at the bevel,
   63 77 68 51 (top right bottom left, source px), so the bevel never stretches. */

/* ---------- Arcade buttons ---------- */

.arcade-btn {
  min-width: 190px; height: 78px;
  padding: 0 16px;
  border-style: solid;
  border-width: 22px 26px;
  border-image: url(../assets/btn-blue.webp) 76 90 fill stretch;
  background: none;
  font: 400 22px/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, filter .15s ease;
}
.arcade-btn > * { margin: -22px 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); }
.arcade-btn:disabled { filter: grayscale(.85) brightness(.55); cursor: default; }
.arcade-btn small { font: 700 13px var(--ui); text-transform: uppercase; letter-spacing: .1em; opacity: .9; }
.arcade-btn.small { min-width: 140px; height: 62px; font-size: 17px; border-width: 18px 22px; }
/* A switched-on toggle (Alone): red, checked, and a pulsing ring so it can't be missed. */
.arcade-btn.toggled { position: relative; }
.arcade-btn.toggled::after {
  content: ""; position: absolute; inset: -22px -26px; border-radius: 999px; pointer-events: none;
  box-shadow: 0 0 0 3px #ffd36b, 0 0 22px 6px rgba(255, 90, 60, .75); animation: alone-pulse 1s ease-in-out infinite alternate;
}
@keyframes alone-pulse { from { opacity: .45; } to { opacity: 1; } }
.arcade-btn.small.toggled::after { inset: -18px -22px; }
/* Alone switched off: dark steel inside the same gold rim, gold lettering. Quiet until it's needed. */
.arcade-btn.steel {
  border-image-source: url(../assets/btn-gold.webp); border-image-slice: 76 90; /* the rim only, no fill */
  background: linear-gradient(#3a3532, #1d1a18 60%, #2a2623); background-clip: padding-box;
  color: var(--gold); text-shadow: 0 1px 0 #000;
}
/* A call button saying "Order up / alone" on two lines. */
.arcade-btn.stack { flex-direction: column; gap: 0; line-height: .95; }
.arcade-btn.stack > small { margin: 2px 0 0; font: 400 .62em/1 var(--display); color: #ffe27a; opacity: 1; letter-spacing: .08em; }
.going-alone .suit-btn { box-shadow: 0 0 0 3px #ffd36b, 0 0 16px 4px rgba(255, 90, 60, .6); border-radius: 50%; }
#prompt .alone-warn { color: var(--gold); text-shadow: 0 0 10px rgba(242, 193, 78, .7); }
/* A prompt with a question and a line of context under it. */
#prompt > span:has(.p-main) { display: grid; gap: 4px; margin: -4px 0; }
#prompt .p-main { display: block; }
#prompt .p-sub { display: block; font: 600 13px/1.15 var(--ui); color: var(--text); text-shadow: none; letter-spacing: .02em; }
.arcade-btn:focus-visible, .round:focus-visible, .suit-btn:focus-visible, .card.playable:focus-visible,
.avatar-grid button:focus-visible, .segmented button:focus-visible {
  outline: 3px solid var(--neon-blue); outline-offset: 3px;
}

.suit-btn {
  width: 74px; height: 74px; padding: 16px;
  background: url(../assets/btn-square.webp) center / 100% 100% no-repeat;
  border: 0; cursor: pointer;
  transition: transform .08s ease, filter .15s ease;
}
.suit-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
.suit-btn:hover { filter: brightness(1.1) drop-shadow(0 0 10px var(--gold)); }
.suit-btn:active { transform: scale(.95); }

.round { 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); }

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

#title-screen { display: grid; grid-template-columns: 1fr 560px; align-items: center; gap: 24px; padding: 0 56px; }
.title-logo { width: 100%; max-width: 760px; filter: drop-shadow(0 0 24px rgba(255, 85, 68, .5)) drop-shadow(0 0 60px rgba(69, 201, 255, .3)); }
.title-panel {
  display: grid; gap: 22px;
  padding: 22px 28px 26px;
  border-style: solid; border-width: 35px 42px 37px 28px;
  border-image: url(../assets/chat-frame.webp) 63 77 68 51 fill stretch;
}
.field { display: grid; gap: 8px; }
.field label, .field .label { font: 400 15px var(--display); color: var(--gold); letter-spacing: .06em; text-transform: uppercase; }
#name-input {
  height: 56px; padding: 0 18px;
  font: 400 22px var(--display); color: var(--lcd);
  background: #050505; border: 2px solid var(--gold-deep); border-radius: 10px;
  box-shadow: inset 0 0 18px rgba(125, 255, 107, .12);
  user-select: text;
}
#name-input::placeholder { color: #3f6b3a; }
#name-input:focus { outline: none; border-color: var(--gold); box-shadow: inset 0 0 18px rgba(125, 255, 107, .2), 0 0 0 3px rgba(242, 193, 78, .3); }
/* minmax(0, 1fr): iPhone Safari won't shrink a plain 1fr column below its picture's natural width. */
.avatar-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.avatar-grid button {
  min-width: 0; aspect-ratio: 1; padding: 6px; border: 2px solid transparent; border-radius: 12px;
  background: rgba(0, 0, 0, .35); cursor: pointer; transition: transform .1s, background .15s;
}
.avatar-grid button img { width: 100%; height: 100%; min-width: 0; object-fit: contain; display: block; }
.avatar-grid button:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .06); }
/* The title grid's last tile opens the full picker (App.openFaces). */
.avatar-grid .avatar-more {
  display: grid; place-content: center; gap: 2px; border: 2px dashed rgba(242, 193, 78, .45);
  font: 400 14px var(--display); color: var(--gold); letter-spacing: .04em;
}
.avatar-grid .avatar-more b { font-size: 26px; line-height: 1; }
.face-tabs { margin-bottom: 12px; }
/* Settings: sound on/off and volume */
.sound-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; align-items: center; margin-bottom: 10px; }
.sound-row .segmented { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sound-row input[type="range"] { width: 100%; accent-color: var(--gold); }
/* One fixed size for every tab, so the panel never jumps: 8 x 4 holds all 32 icons with no scrolling. */
.panel:has(.avatar-grid.all) { width: 720px; }
.avatar-grid.all {
  grid-template-columns: repeat(8, 66px); grid-auto-rows: 66px; justify-content: center; align-content: start;
  height: calc(4 * 66px + 3 * 8px); overflow-y: auto; padding: 0;
}
.avatar-grid button[aria-checked="true"] { border-color: var(--gold); background: rgba(242, 193, 78, .14); box-shadow: 0 0 16px rgba(242, 193, 78, .35); }
.segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.segmented button {
  height: 46px; border-radius: 10px; border: 2px solid #4a3a2c; background: #120d0a;
  font: 400 16px var(--display); color: var(--muted); cursor: pointer;
}
.segmented button[aria-checked="true"] { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 14px rgba(242, 193, 78, .25); }
.title-panel { grid-template-columns: minmax(0, 1fr); }
.title-actions { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; margin-top: 6px; }
.title-actions .arcade-btn { min-width: 0; width: 100%; }

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

#table-screen { display: grid; grid-template-columns: 1fr 296px; gap: 14px; padding: 8px 10px 6px; }
/* The playing surface: felt stretched inside the steel frame (felt-tile.webp is seamless), its edges
   shaded where the cloth meets the frame, its corners the screen's. */
.table-area {
  position: relative; min-width: 0;
  background: url(../assets/felt-tile.webp) repeat, #1d5a24;
  border-radius: 18px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .55), inset 0 0 36px 6px rgba(0, 0, 0, .55), inset 0 0 90px rgba(0, 0, 0, .3);
}

/* Seats */
.seat { position: absolute; display: flex; gap: 10px; align-items: center; z-index: 5; }
.seat[data-pos="2"] { top: 14px; left: 50%; transform: translateX(-50%); }
.seat[data-pos="1"] { left: 0; top: 200px; flex-direction: column; align-items: flex-start; }
.seat[data-pos="3"] { right: 0; top: 200px; flex-direction: column; align-items: flex-end; }
.bottom-row .seat { position: relative; inset: auto; transform: none; align-self: end; margin-bottom: 18px; }
/* Your own ribbon goes above your plate (there's no room below it), right of where a dealer chip sits. */
body:not(.portrait) .bottom-row .seat[data-pos="0"] .alone-badge { bottom: auto; top: -48px; margin-left: 40px; }
/* Your plate sits against the tray, next to your hand, rather than out in the corner. */
.bottom-row .seat[data-pos="0"] { justify-self: end; }
/* Trick counts mean nothing until cards are played. */
#table-screen:is([data-phase="bidding1"], [data-phase="bidding2"], [data-phase="discard"]) .plate .tricks { visibility: hidden; }

.plate {
  position: relative;
  width: 246px; height: 88px;
  border-style: solid; border-width: 20px 24px;
  border-image: url(../assets/plate-name.webp) 66 72 fill stretch;
  display: grid; align-content: center;
  padding-right: 64px;
}
.plate .name { font: 400 19px/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 .tricks { font: 700 15px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #d7cff5; margin: 6px 0 -6px -6px; }
.plate .tricks b { color: var(--gold); font-family: var(--display); font-weight: 400; margin-left: 4px; }
.plate .avatar { position: absolute; right: -40px; top: 50%; width: 96px; height: 96px; transform: translateY(-54%); object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); }
.seat.me .plate, .lobby-seat.me .plate { border-image-source: url(../assets/plate-name-me.webp); }
.plate::after {
  content: ""; position: absolute; inset: -22px -26px; 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; }
@keyframes turn-glow { from { opacity: .45; } to { opacity: 1; } }
/* Sitting out (a partner's loner): a dark layer over the plate saying so, the face and cards faded.
   Not the whole seat: the dealer chip and the badges stay bright, so the dealer is always easy to find. */
.seat.out .plate::before {
  content: "Sitting out"; position: absolute; inset: -20px -24px; border-radius: 14px; z-index: 2;
  display: grid; place-items: center; background: rgba(12, 9, 7, .78);
  font: 400 15px var(--display); color: var(--muted); letter-spacing: .06em; text-transform: uppercase;
}
.seat.out .plate .avatar { z-index: 3; opacity: .4; }
.seat.out .backs { opacity: .35; }

.chip {
  position: absolute; left: 6px; top: -66px; width: 58px; height: 58px; border-radius: 50%;  /* open felt above the plate */
  background: url(../assets/dealer-chip.webp) center / contain no-repeat;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .55), 0 4px 10px rgba(0, 0, 0, .6);
  display: grid; place-items: center;
  font: 400 24px var(--display); color: #fff; text-shadow: 0 0 3px #000, 0 2px 2px #000;
  z-index: 3;
}
/* The seat across the top has the scoreboard above it: its chip sits beside the plate instead. */
.seat[data-pos="2"] .chip { top: 50%; margin-top: -29px; left: -70px; }
/* Glow when it lands (opacity only, so it stays smooth). */
.chip::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; opacity: 0; pointer-events: none;
  box-shadow: 0 0 18px 6px rgba(242, 193, 78, .9);
}
.chip.arrive::after { animation: chip-glow .8s ease-in-out 3 alternate; }
@keyframes chip-glow { to { opacity: 1; } }
.alone-badge {
  position: absolute; left: 50%; bottom: -44px; transform: translateX(-50%);  /* just below the plate, clear of the trick count */
  width: 190px; height: 40px;
  background: url(../assets/badge-alone.webp) center / 100% 100% no-repeat;
  display: grid; place-items: center; padding-left: 18px;
  font: 400 14px var(--display); color: #fff; text-shadow: 0 1px 0 #6b0d06; letter-spacing: .04em;
  z-index: 3; animation: pop-in .35s cubic-bezier(.2, 1.6, .4, 1);
}
.callout {
  position: absolute; left: 50%; top: -30px; transform: translateX(-50%);
  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);
}
.seat[data-pos="2"] .callout { top: auto; bottom: -32px; }
.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: "..."; } }
.callout.countdown { color: var(--gold); border-color: var(--gold); animation: nudge 1s ease-in-out infinite; }
.callout.call { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 14px rgba(242, 193, 78, .45); }
@keyframes pop-in { from { transform: translateX(-50%) scale(.6); opacity: 0; } }

/* Shared tables: a player the CPU is covering */
.away-tag {
  position: absolute; right: 18px; top: -16px; z-index: 3;
  padding: 3px 10px; border-radius: 999px; background: #8c1a10; border: 2px solid #ffb3a6;
  font: 400 12px/1 var(--display); letter-spacing: .08em; color: #fff; text-transform: uppercase;
}
.away-panel {
  position: absolute; left: 50%; top: 330px; transform: translate(-50%, -50%); z-index: 28;
  width: 420px; padding: 18px 26px 24px; text-align: center;
  border-style: solid; border-width: 35px 42px 37px 28px;
  border-image: url(../assets/chat-frame.webp) 63 77 68 51 fill stretch;
  animation: summary-in .35s cubic-bezier(.2, 1.3, .4, 1);
}
.away-panel img { width: 110px; margin: -64px auto 0; display: block; }
/* Bar tables: the host dropped and the bar is counting down (its deadline, every seat). */
.bar-wait {
  position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 29;
  display: flex; align-items: center; gap: 14px; padding: 8px 22px; border-radius: 999px;
  background: #050505; border: 2px solid var(--gold); box-shadow: 0 0 18px rgba(242, 193, 78, .35);
  white-space: nowrap; animation: summary-in .35s cubic-bezier(.2, 1.3, .4, 1);
}
.bar-wait b { font: 400 18px var(--display); color: var(--gold); letter-spacing: .06em; text-transform: uppercase; }
.bar-wait span { font: 400 30px/1 var(--display); color: var(--lcd); text-shadow: 0 0 10px rgba(125, 255, 107, .6); font-variant-numeric: tabular-nums; min-width: 3.2ch; text-align: right; }
.away-panel h3 { margin: 4px 0 6px; font: 400 30px var(--display); color: var(--gold); }
.away-panel p { margin: 0 0 16px; color: var(--text); font-size: 19px; }
.readout-text .nudge { color: var(--gold); text-shadow: 0 0 8px rgba(242, 193, 78, .7); animation: nudge 1s ease-in-out infinite; }
@keyframes nudge { 50% { opacity: .55; } }

/* Opponent card backs */
.backs { display: flex; height: 70px; }
.backs img { width: 50px; height: 72px; margin-left: -34px; border-radius: 4px; box-shadow: -2px 2px 4px rgba(0, 0, 0, .5); }
.backs img:first-child { margin-left: 0; }
.seat[data-pos="1"] .backs, .seat[data-pos="3"] .backs { margin-top: 4px; }
.seat[data-pos="1"] .backs { margin-left: 20px; }
.seat[data-pos="3"] .backs { margin-right: 40px; }

/* Trick cross: four card slots stitched into the felt, the trump square in the middle */
.cross {
  --slot-w: 108px; --slot-h: 148px; --mid: 108px; --gap: 6px;
  position: absolute; left: 50%; top: 338px;
  width: calc(var(--slot-w) * 2 + var(--mid) + var(--gap) * 2);
  height: calc(var(--slot-h) * 2 + var(--mid) + var(--gap) * 2);
  transform: translate(-50%, -50%);
}
.slot {
  position: absolute; width: var(--slot-w); height: var(--slot-h);
  border: 2px dashed rgba(236, 228, 196, .26); border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.slot[data-pos="2"] { left: 50%; top: 0; transform: translateX(-50%); }
.slot[data-pos="0"] { left: 50%; bottom: 0; transform: translateX(-50%); }
.slot[data-pos="1"] { left: 0; top: 50%; transform: translateY(-50%); }
.slot[data-pos="3"] { right: 0; top: 50%; transform: translateY(-50%); }
.slot.trump { width: 82px; height: 82px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 14px; display: grid; place-items: center; }
#trump-mark { width: 46px; height: 46px; background: center / contain no-repeat; }
#trump-mark.set { will-change: transform; animation: trump-in .5s cubic-bezier(.2, 1.6, .4, 1); filter: drop-shadow(0 0 8px rgba(242, 193, 78, .7)); }
@keyframes trump-in { from { transform: scale(.2) rotate(-40deg); opacity: 0; } }

/* Kitty: the turned card on a little stack in the dealer's slot during bidding */
#kitty { position: absolute; z-index: 6; }
#kitty .stack { position: relative; width: var(--card-w); height: var(--card-h); }
/* Only the two backs under the turned card; the turned card's own art keeps its card styling. */
#kitty .stack > img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 7px; }
#kitty .stack > img:nth-child(1) { transform: translate(-6px, 5px) rotate(-6deg); }
#kitty .stack > img:nth-child(2) { transform: translate(-3px, 3px) rotate(-3deg); }
#kitty .stack > .card { position: absolute; inset: 0; animation: flip-up .45s cubic-bezier(.3, .7, .3, 1) backwards; }
@keyframes flip-up { from { transform: perspective(500px) rotateY(90deg); } }

/* Played cards */
#trick { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
#trick .card { position: absolute; }
#trick .card[data-pos="2"], #kitty[data-pos="2"] { left: 50%; top: 10px; margin-left: calc(var(--card-w) / -2); }
#trick .card[data-pos="0"], #kitty[data-pos="0"] { left: 50%; bottom: 10px; margin-left: calc(var(--card-w) / -2); }
#trick .card[data-pos="1"], #kitty[data-pos="1"] { left: 8px; top: 50%; margin-top: calc(var(--card-h) / -2); }
#trick .card[data-pos="3"], #kitty[data-pos="3"] { right: 8px; top: 50%; margin-top: calc(var(--card-h) / -2); }
#trick .card.winner { box-shadow: 0 0 0 3px var(--gold), 0 0 24px 6px rgba(242, 193, 78, .65); z-index: 2; }
/* The card winning the trick so far: a soft glow layer just inside the card's edge (cards clip
   anything outside it), faded in by opacity, no filters. */
#trick .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 rgba(125, 255, 107, .95), inset 0 0 16px 4px rgba(125, 255, 107, .5);
  transition: opacity .3s ease;
}
#trick .card.leading::after { opacity: 1; }
#trick .card.winner::after { opacity: 0; }

/* Bottom row: your plate, the tray with your hand, your controls */
.bottom-row {
  position: absolute; left: 0; right: 0; bottom: 0; height: 214px;
  display: grid; grid-template-columns: 262px 1fr 272px; grid-template-rows: minmax(0, 1fr); align-items: end; gap: 6px;
}
.tray {
  position: relative; height: 112px; margin-bottom: 14px;
  border-style: solid; border-width: 22px 26px;
  border-image: url(../assets/hand-tray.webp) 56 64 fill stretch;
}
.hand { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; align-items: flex-end; }
.hand .card { width: var(--hand-w); height: var(--hand-h); margin-left: -22px; transition: transform .16s ease; }
.hand .card:disabled { cursor: default; }
.hand .card:first-child { margin-left: 0; }
/* Six cards (the dealer before discarding) overlap more, so they stay clear of the tray's end caps. */
.hand[data-count="6"] .card { margin-left: -40px; }
.hand[data-count="6"] .card:first-child { margin-left: 0; }
.hand .card.playable { cursor: pointer; transform: translateY(-8px); }
.hand .card.playable:hover { transform: translateY(-12px); z-index: 5; }
/* Cards you can't play: a dark layer over them instead of a gray-out filter, so they keep their color
   (and nothing filters cards that animate; see the note at the top on why that matters). */
.hand .card::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: rgba(16, 11, 8, .36); transition: opacity .2s ease;
}
.hand .card.dim::before { opacity: 1; }
/* Trump preview (UI.previewTrump): a gold edge on the cards that would be trump. */
.hand .card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 5; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 3px #ffd36b, inset 0 0 18px 4px rgba(242, 193, 78, .55); transition: opacity .15s ease;
}
.hand .card.trump-preview::after { opacity: 1; }
/* Your partner went alone: your cards wait this hand out. */
.hand.sitting-out .card { opacity: .4; }
.hand.sitting-out::after {
  content: "Sitting out"; position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%);
  padding: 6px 18px; border-radius: 999px; background: #050505; border: 2px solid var(--gold-deep);
  font: 400 20px var(--display); color: var(--muted); white-space: nowrap; z-index: 6; pointer-events: none;
}

.controls { display: grid; gap: 8px; justify-items: center; align-self: stretch; align-content: end; padding-bottom: 14px; }
.readout-text {
  width: 100%; min-height: 54px; padding: 4px 12px;
  border-style: solid; border-width: 14px 16px;
  border-image: url(../assets/readout.webp) 64 70 fill stretch;
  display: grid; place-items: center; text-align: center;
  font: 400 16px/1.1 var(--display); color: var(--lcd);
  text-shadow: 0 0 8px rgba(125, 255, 107, .55);
}
.readout-text:empty { visibility: hidden; }
.readout-text > * { margin: -8px 0; }
.actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.actions .wide { grid-column: span 2; }
.actions .suits { display: flex; gap: 8px; justify-content: center; }
.actions .arcade-btn.small { min-width: 0; width: 100%; height: 56px; font-size: 16px; border-width: 16px 20px; }

/* Center announcements */
.banner {
  position: absolute; left: 50%; top: 320px; transform: translate(-50%, -50%);
  z-index: 30; pointer-events: none; text-align: center;
  opacity: 0; will-change: transform, opacity;
}
.banner .big {
  font: 400 76px/1 var(--display); color: #fff; white-space: nowrap;
  -webkit-text-stroke: 3px #1a0503;
  text-shadow: 0 0 18px var(--neon-red), 0 0 46px var(--neon-red), 0 6px 0 #5c0e07;
}
.banner .big.blue { text-shadow: 0 0 18px var(--neon-blue), 0 0 46px var(--neon-blue), 0 6px 0 #062a42; }
.banner .big.gold { text-shadow: 0 0 18px var(--gold), 0 0 46px var(--gold), 0 6px 0 #5b3d05; }
.banner .sub { margin-top: 8px; font: 400 22px var(--display); color: var(--gold); text-shadow: 0 2px 0 #000, 0 0 12px rgba(0, 0, 0, .8); }
.banner img { width: 150px; display: block; margin: 0 auto -18px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
.banner.show { animation: banner 2.1s ease forwards; }
@keyframes banner {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  14% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  22%, 78% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.05); opacity: 0; }
}

/* Hand summary */
.hand-summary {
  position: absolute; left: 50%; top: 330px; transform: translate(-50%, -50%);
  width: 470px; padding: 16px 22px 20px; z-index: 25;
  border-style: solid; border-width: 35px 42px 37px 28px;
  border-image: url(../assets/chat-frame.webp) 63 77 68 51 fill stretch;
  text-align: center; animation: summary-in .4s cubic-bezier(.2, 1.3, .4, 1);
}
@keyframes summary-in { from { transform: translate(-50%, -40%) scale(.9); opacity: 0; } }
.hand-summary h3 { margin: -6px 0 6px; font: 400 32px var(--display); color: var(--gold); }
.hand-summary h3.them { color: var(--neon-red); }
.hand-summary p { margin: 0 0 4px; color: var(--muted); font-size: 19px; }
.hand-summary .score-line { margin-top: 14px; display: flex; justify-content: center; gap: 26px; font: 400 26px var(--display); }
.hand-summary .score-line span { color: var(--muted); font: 700 16px var(--ui); letter-spacing: .1em; text-transform: uppercase; margin-right: 8px; }
.hand-summary img.moon { width: 120px; margin: -70px auto 0; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }

/* ---------- 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; }
.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;
  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.bump, .scoreboard b.bump { animation: bump .5s ease; }
@keyframes bump { 40% { transform: scale(1.45); } }
/* Scoreboard: both teams side by side on one LCD, ten lights each toward 10, trump along the bottom. */
.scoreboard {
  padding: 0 4px;
  border-style: solid; border-width: 14px 16px;
  border-image: url(../assets/readout.webp) 64 70 fill stretch;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px;
}
.scoreboard .team { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 2px 0 6px; }
.scoreboard .team.us { border-right: 1px solid rgba(242, 193, 78, .22); padding-right: 10px; }
.scoreboard .names {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 13px/1.1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.scoreboard .team b { font: 400 40px/1 var(--display); color: var(--lcd); text-shadow: 0 0 10px rgba(125, 255, 107, .6); font-variant-numeric: tabular-nums; }
.scoreboard .team.them b { color: #ff8a73; text-shadow: 0 0 10px rgba(255, 85, 68, .6); }
.scoreboard .pips { display: flex; gap: 3px; }
.scoreboard .pips i { width: 9px; height: 9px; border-radius: 50%; background: #1b2a1a; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8); }
.scoreboard .team.them .pips i { background: #2e1714; }
.scoreboard .pips i.on { background: var(--lcd); box-shadow: 0 0 6px rgba(125, 255, 107, .85); }
.scoreboard .team.them .pips i.on { background: #ff8a73; box-shadow: 0 0 6px rgba(255, 85, 68, .85); }
.scoreboard .trump-line {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px solid rgba(242, 193, 78, .22); padding: 6px 2px 0; margin-bottom: -4px;
}
.scoreboard .trump-line span { font: 700 13px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.scoreboard .trump-line b { display: flex; align-items: center; gap: 6px; font: 400 17px/1 var(--display); color: var(--gold); text-shadow: 0 0 8px rgba(242, 193, 78, .5); min-width: 0; }
.scoreboard .trump-line b span { font: inherit; letter-spacing: 0; text-transform: none; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scoreboard .trump-line b img { width: 24px; height: 24px; object-fit: contain; }
.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;
}
.jackpot b { color: var(--gold); text-shadow: 0 0 10px rgba(242, 193, 78, .7); }

.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;
}
.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: 4px; }
.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); }
.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; }

/* ---------- Panels (help, settings, quit, game over) ---------- */

.panel-backdrop { position: absolute; inset: 0; background: rgba(5, 3, 2, .7); display: grid; place-items: center; z-index: 40; }
.join-row { display: flex; gap: 10px; justify-content: center; align-items: center; margin: 6px 0 4px; }
.join-row input {
  width: 230px; height: 62px; padding: 0 14px; text-align: center;
  font: 400 30px var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--lcd);
  background: #050505; border: 2px solid var(--gold-deep); border-radius: 10px; user-select: text;
}
.join-row input:focus { outline: none; border-color: var(--gold); }
.panel .error { color: #ff8a73; text-align: center; min-height: 1.4em; margin: 4px 0 0; }
/* The bar's Multiplayer panel: who you are, a code, your tables tonight. */
.panel .bar-calling { text-align: center; color: var(--lcd); font: 400 20px var(--display); animation: nudge 1s ease-in-out infinite; }
.bar-me { display: flex; gap: 12px; justify-content: center; align-items: center; }
.bar-face { width: 62px; height: 62px; padding: 4px; border-radius: 12px; background: #050505; border: 2px solid var(--gold-deep); cursor: pointer; }
.bar-face:hover, .bar-face:focus-visible { border-color: var(--gold); outline: none; }
.bar-face img { width: 100%; height: 100%; object-fit: contain; display: block; }
#bar-name {
  width: 300px; height: 62px; padding: 0 16px;
  font: 400 24px var(--display); color: var(--lcd);
  background: #050505; border: 2px solid var(--gold-deep); border-radius: 10px; user-select: text;
}
#bar-name:focus { outline: none; border-color: var(--gold); }
.panel p.bar-note { margin: 6px 0 12px; text-align: center; font-size: 15px; color: var(--muted); }
.bar-tables h3 { margin: 14px 0 6px; font: 400 15px var(--display); color: var(--gold); letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.bar-tables ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.panel .bar-tables li {
  display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 14px;
  background: rgba(5, 5, 5, .6); border: 1px solid #4a3a2c; border-radius: 10px;
}
.bar-tables li b { font: 400 22px var(--display); letter-spacing: .12em; color: var(--lcd); }
.bar-tables li span { flex: 1; font-size: 15px; color: var(--muted); }

/* Slice two: the bar's open tables first, then who's here; the bouncer's tools on a plate. */
.panel:has(.bar-open) { width: 600px; max-height: 840px; }
.panel h3 { margin: 0 0 6px; font: 400 15px var(--display); color: var(--gold); letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.bar-open ul, .bar-blocked ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.bar-open ul { max-height: calc(4 * 62px + 3 * 6px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #5a4632 transparent; }
.panel .bar-open li, .panel .bar-blocked li {
  display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 4px 8px 4px 8px;
  background: rgba(5, 5, 5, .6); border: 1px solid #4a3a2c; border-radius: 10px;
}
.bar-open li img, .bar-blocked li img { width: 46px; height: 46px; object-fit: contain; flex: none; }
.bar-open li b, .bar-blocked li b { flex: 1; min-width: 0; font: 400 21px var(--display); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-open li span { font: 400 17px var(--display); color: var(--lcd); letter-spacing: .04em; }
.panel .bar-open li.open-empty, .panel .bar-blocked li.open-empty { justify-content: center; color: var(--muted); font-size: 17px; }
.link-btn { background: none; border: 0; padding: 0 2px; font: inherit; color: var(--gold); text-decoration: underline; cursor: pointer; }
.bar-here { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin: 0 0 12px; }
.bar-here h3 { margin: 0; white-space: nowrap; }
.bar-here .faces { display: flex; }
.bar-here .faces img { width: 38px; height: 38px; object-fit: contain; margin-left: -6px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.bar-here .faces img:first-child { margin-left: 0; }
.bar-here .count { font: 400 16px var(--display); color: var(--lcd); letter-spacing: .04em; white-space: nowrap; }
.panel p.bar-blocks { margin: 8px 0 0; text-align: center; font-size: 15px; }
.report-reasons { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 10px 0 2px; }
.react-menu .rm-tools { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.react-menu .rm-tools button { padding: 8px 2px; }
.react-menu .rm-tools b { font: 400 15px var(--display); color: var(--gold); margin: 0; }
.react-menu .rm-report { border-color: #8c1a10; }
.react-menu .rm-report b { color: #ff8a73; }

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

#lobby-screen { display: grid; grid-template-rows: 1fr; grid-auto-rows: auto; justify-items: center; padding: 24px 0 26px; gap: 10px; }
.lobby {
  display: grid; align-self: center;
  grid-template-columns: 300px 300px 300px; grid-template-rows: auto auto auto;
  grid-template-areas: ". top ." "left code right" ". bottom .";
  gap: 22px 40px; align-items: center; justify-items: center;
}
.lobby-seat[data-pos="2"] { grid-area: top; }
.lobby-seat[data-pos="1"] { grid-area: left; }
.lobby-seat[data-pos="3"] { grid-area: right; }
.lobby-seat[data-pos="0"] { grid-area: bottom; }
.lobby-seat { display: grid; justify-items: center; gap: 6px; }
.lobby-seat .role { font: 700 14px var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lobby-seat .plate .tag { font: 700 14px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 6px 0 -6px -6px; }
.lobby-seat.cpu .plate { filter: grayscale(.7) brightness(.7); }
.lobby-seat.cpu .plate .avatar { opacity: .35; }
.lobby-code {
  grid-area: code; width: 300px; padding: 14px 10px 16px;
  border-style: solid; border-width: 14px 16px;
  border-image: url(../assets/readout.webp) 64 70 fill stretch;
  display: grid; justify-items: center; gap: 2px; text-align: center;
}
.lobby-code span, .lobby-code small { font: 700 14px var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lobby-code b { font: 400 46px/1.05 var(--display); letter-spacing: .14em; color: var(--lcd); text-shadow: 0 0 14px rgba(125, 255, 107, .6); user-select: text; }
.lobby-status { margin: 0; min-height: 1.3em; color: var(--text); font-size: 20px; text-align: center; }
.lobby-actions { display: flex; gap: 14px; }
.lobby-bobby { display: flex; align-items: center; gap: 10px; margin: 0; padding: 4px 16px 4px 6px; border-radius: 30px; background: rgba(10, 8, 6, .85); border: 1px solid var(--gold-deep); font: 600 18px var(--ui); color: var(--text); animation: summary-in .2s ease; }
.lobby-bobby[hidden] { display: none; }
.lobby-bobby img { width: 44px; height: 44px; object-fit: contain; }
.lobby-open { display: grid; grid-template-columns: auto auto; grid-template-areas: "sw label" "sw note"; column-gap: 12px; align-items: center; cursor: pointer; user-select: none; }
.lobby-open[hidden] { display: none; }
.lobby-open input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lobby-open .switch { grid-area: sw; position: relative; width: 64px; height: 34px; border-radius: 17px; background: #050505; border: 2px solid var(--gold-deep); transition: background .15s; }
.lobby-open .switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #6b5a48; transition: transform .15s, background .15s; }
.lobby-open input:checked + .switch { background: rgba(125, 255, 107, .18); border-color: var(--lcd); }
.lobby-open input:checked + .switch::after { transform: translateX(30px); background: var(--lcd); box-shadow: 0 0 10px rgba(125, 255, 107, .8); }
.lobby-open input:focus-visible + .switch { outline: 3px solid var(--lcd); outline-offset: 3px; }
.lobby-open b { grid-area: label; font: 400 18px var(--display); color: var(--gold); letter-spacing: .04em; text-transform: uppercase; }
.lobby-open small { grid-area: note; font: 600 14px var(--ui); color: var(--muted); }
.panel {
  width: 560px; max-height: 640px; overflow: auto;
  padding: 16px 26px 20px;
  border-style: solid; border-width: 35px 42px 37px 28px;
  border-image: url(../assets/chat-frame.webp) 63 77 68 51 fill stretch;
  animation: summary-in .3s ease;
}
.panel h2 { margin: -4px 0 12px; font: 400 28px var(--display); color: var(--gold); text-align: center; }
.panel p, .panel li { color: var(--text); font-weight: 500; font-size: 18px; line-height: 1.35; }
.panel ul { padding-left: 20px; margin: 0 0 10px; }
.panel b { color: var(--gold); }
.panel-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.panel .final { text-align: center; font: 400 42px var(--display); margin: 6px 0 4px; }
.panel .final .us { color: var(--lcd); }
.panel .final .them { color: #ff8a73; }
.panel .gameover-img { width: 170px; display: block; margin: -10px auto 4px; }

/* ---------- Cards ---------- */

.card {
  position: relative;
  width: var(--card-w); height: var(--card-h);
  font-size: calc(var(--w, 92) * 1px / 6);
  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;
  padding: 0;
  isolation: isolate; /* keep the corner index's z-index inside this card */
}
.card.red { color: var(--card-red); }
.hand .card { --w: 112; }
.card .idx { position: absolute; left: .28em; top: .24em; display: flex; flex-direction: column; align-items: center; font: 400 .95em/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: .08em; letter-spacing: 0; }
.card .idx.b { left: auto; top: auto; right: .32em; bottom: .26em; transform: rotate(180deg); }
/* Square art at 64% width sits between the two corner indices without touching either. */
.card .art { position: absolute; left: 18%; width: 64%; top: 50%; transform: translateY(-50%); }
.card .ace { position: absolute; left: 50%; top: 50%; width: 52%; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.card .pip { position: absolute; transform: translate(-50%, -50%); font: 400 1.05em/1 "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", sans-serif; }
.card .pip.flip { transform: translate(-50%, -50%) rotate(180deg); }
.card .big-suit, .card .idx-suit, .card .face-suit { display: none; }  /* phone big-print cards only (phone.css) */
.card.back { background: url(../assets/card-back.webp) center / 100% 100%; border: 0; box-shadow: 0 3px 8px rgba(0, 0, 0, .45); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Bottom bar: who took the trick, and the last-trick peek ---------- */
#prompt .trick-news { font-weight: 400; }
#prompt .trick-news.us { color: var(--gold); text-shadow: 0 0 10px rgba(242, 193, 78, .55); }
#prompt .trick-news.partner { color: var(--lcd); }
#prompt .trick-news.them { color: #ff8a73; }
#prompt.has-last { cursor: pointer; position: relative; }
#prompt.has-last::after {
  content: "\21BA"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  font: 700 .9em/1 var(--ui); color: var(--muted); opacity: .8;
}
.last-trick {
  /* As tall as its contents, from the top of the cross: on desktop the cross sits right above your hand. */
  position: absolute; inset: -14px -14px auto; z-index: 30; display: grid; grid-template-rows: auto auto auto;
  justify-items: center; align-items: center; gap: 4px; padding: 10px 8px;
  background: rgba(8, 6, 5, .92); border: 2px solid var(--gold-deep); border-radius: 16px; cursor: pointer;
  animation: summary-in .2s ease;
}
.last-trick b { font: 400 16px var(--display); color: var(--gold); letter-spacing: .06em; }
.last-trick .lt-who { font: 600 17px var(--ui); color: var(--text); }
.last-trick .lt-cards {
  display: grid; grid-template-areas: ". top ." "left . right" ". bottom ."; gap: 2px 6px; align-items: center; justify-items: center;
}
.last-trick .card { position: relative; width: calc(var(--card-w) * .72); height: calc(var(--card-h) * .72); font-size: calc(var(--card-w) * .72 / 6); }
.last-trick .card[data-pos="2"] { grid-area: top; }
.last-trick .card[data-pos="1"] { grid-area: left; }
.last-trick .card[data-pos="3"] { grid-area: right; }
.last-trick .card[data-pos="0"] { grid-area: bottom; }
.last-trick .card.winner { box-shadow: 0 0 0 3px var(--gold), 0 0 18px 4px rgba(242, 193, 78, .6); }

/* ---------- Speaker (sound on/off) ----------
   A round button like its neighbours: a dark steel face over the base button's "?", the speaker on it. */
.sound-btn { position: relative; }
.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.muted img.spk { opacity: .45; filter: grayscale(1); }
.sound-btn.muted::after {
  /* a red slash across the speaker */
  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);
}
.sound-btn:focus-visible { outline: 3px solid var(--lcd); outline-offset: 3px; border-radius: 50%; }
/* Leaving sits a little apart from the other buttons. */
#quit-btn { margin-left: 14px; }

/* ---------- Reactions (tap a player) ---------- */
.seat .plate { cursor: pointer; }
/* The "Step away" / "I'm back" choice on your own plate. */
.react-menu .rm-grid .rm-wide { grid-column: 1 / -1; display: grid; gap: 2px; padding: 10px 12px; text-align: left; justify-items: start; }
.react-menu .rm-wide b { font: 400 17px var(--display); color: var(--gold); margin: 0; }
.react-menu .rm-wide span { font: 600 14px var(--ui); color: var(--muted); }
#friends-btn.bar { padding: 0 6px; letter-spacing: 0; }  /* MULTIPLAYER is a long word for that button */
.react-menu .rm-kick { border-color: #8c1a10; }
.react-menu .rm-kick b { color: #ff8a73; }
.react-menu {
  position: absolute; z-index: 42; width: 344px; 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: summary-in .16s ease;
}
.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(4, minmax(0, 1fr)); gap: 6px; }
.react-menu button {
  display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(242, 193, 78, .2); color: var(--text);
  font: 600 13px/1.1 var(--ui); min-width: 0;
}
.react-menu button img { width: 38px; height: 38px; 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; }
.fx-layer { position: absolute; inset: 0; z-index: 41; pointer-events: none; overflow: hidden; }
.fx-icon { position: absolute; width: 88px; height: 88px; margin: -44px 0 0 -44px; object-fit: contain; }

/* ---------- Clock, record, trump square, log dividers ---------- */
.readout-clock.urgent b { color: var(--gold); text-shadow: 0 0 10px rgba(242, 193, 78, .8); animation: nudge 1s ease-in-out infinite; }
/* An empty trump square isn't a card slot: a dim moon waits there until trump is called. */
#trump-mark:not(.set) { background: url(../assets/emblem-moon.webp) center / contain no-repeat; opacity: .22; }
.slot.trump::after {
  content: ""; position: absolute; inset: -6px; border-radius: 12px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 3px #ffe9a3, 0 0 28px 10px rgba(242, 193, 78, .8);
}
.slot.trump.flash::after { animation: trump-flash .9s ease-out; }
@keyframes trump-flash { 15% { opacity: 1; } 100% { opacity: 0; } }
.chat-log .msg.sys.divider {
  display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; color: var(--gold); opacity: .8;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .8em;
}
.chat-log .msg.sys.divider::before, .chat-log .msg.sys.divider::after { content: ""; flex: 1; height: 1px; background: rgba(242, 193, 78, .35); }

/* ---------- Log filter: All / Game / Chat (UI.setChatFilter) ---------- */
.chat-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.chat-filter button { position: relative; height: 26px; padding: 0; font-size: 12px; }
.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) { display: none; }
.chat-log[data-filter="chat"] .msg.sys:not(.divider) { display: none; }
/* Mixed together, the play-by-play sits a step quieter than the talk. */
.chat-log[data-filter="all"] .msg.sys:not(.big):not(.divider) { opacity: .75; }

/* ---------- ← The Bar and the jukebox ---------- */

/* One cluster in the top-left corner of every view, the same spot in every After Dark game. The door is
   Ben's sign (/afterdark/jukebox/door.webp); if that doesn't load it's a readout chip (.plain, the same
   LCD frame as the clock and the record). The jukebox brings its own pill. */
.corner { position: absolute; left: 14px; 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; }
.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; background: none;
  display: grid; place-items: center; cursor: pointer; transition: transform .08s;
}
.door.plain img { display: none; }
.door.plain b { display: block; margin: -8px 0; font: 400 16px/1 var(--display); color: var(--gold); letter-spacing: .05em; white-space: nowrap; text-transform: uppercase; }
.door i { font: 700 20px/1 var(--ui); font-style: normal; vertical-align: -1px; }
.door:hover { filter: brightness(1.15); }
.door:active { transform: scale(.96); }
.door:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------- Early access & feedback ---------- */

/* A sticker on the logo's corner, like a "NEW!" tag on a bar cabinet. Static: no animation, no filter. */
.title-brand { position: relative; display: grid; justify-items: center; }
.early-tag {
  position: absolute; right: 3%; bottom: 3%; z-index: 2; transform: rotate(-7deg);
  padding: 7px 16px 6px; border-radius: 8px;
  background: linear-gradient(#ffe27a, #f2c14e 55%, #c8901f); border: 2px solid #3b2300;
  box-shadow: 0 0 0 2px #ffe9a3 inset, 0 6px 14px rgba(0, 0, 0, .55);
  font: 400 19px/1 var(--display); color: #3b2300; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.early-line { margin: 10px 0 0; text-align: center; font: 600 15px var(--ui); color: var(--muted); letter-spacing: .02em; }
.feedback-link {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--gold); text-decoration: underline; text-underline-offset: 3px;
}
.feedback-link:hover { color: #ffe27a; }
.fb { display: grid; gap: 10px; }
.fb-types { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fb-types button { font-size: 14px; white-space: nowrap; }
.fb textarea, .fb input {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 2px solid #4a3a2c; background: #050505;
  color: var(--text); font: 600 17px/1.3 var(--ui); user-select: text; resize: none;
}
.fb textarea:focus, .fb input:focus { outline: none; border-color: var(--gold); }
.fb-note { margin: 0; text-align: center; font: 600 14px var(--ui); color: var(--muted); }
.fb-error { margin: 0; min-height: 1.2em; text-align: center; font: 700 15px var(--ui); color: #ff8a73; }
.fb-error:empty { display: none; }