/*
 * 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; }
.table-area { position: relative; min-width: 0; }

/* 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; }
.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: two metal bars, four card slots, 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%);
}
.cross-bar {
  position: absolute;
  background: url(../assets/plate-metal.webp) center / 220px;
  border: 3px solid #0c0a08; border-radius: 14px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18), inset 0 -6px 12px rgba(0, 0, 0, .45), 0 10px 26px rgba(0, 0, 0, .55);
}
.cross-bar.h { left: -12px; right: -12px; top: calc(50% - var(--mid) / 2 - 34px); bottom: calc(50% - var(--mid) / 2 - 34px); }
.cross-bar.v { top: -12px; bottom: -12px; left: calc(50% - var(--slot-w) / 2 - 12px); right: calc(50% - var(--slot-w) / 2 - 12px); }
.slot {
  position: absolute; width: var(--slot-w); height: var(--slot-h);
  background: url(../assets/slot-card.webp) center / 100% 100% no-repeat;
}
.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%); background-image: url(../assets/slot-trump.webp); 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; } }
.cross::after { /* four rivets around the trump square */
  content: ""; position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; transform: translate(-50%, -50%);
  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;
  pointer-events: none;
}

/* 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; }

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

#lobby-screen { display: grid; grid-template-rows: 1fr auto 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; }
.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); }
.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; }