:root {
  --bg: #15110e;
  --panel: #221b16;
  --panel-2: #2c231c;
  --text: #f3ebe2;
  --muted: #a8998a;
  --accent: #f08a3c;
  --accent-ink: #1a0f06;
  --felt: #1f4a35;
  --felt-edge: #163728;
  --card: #fbf8f2;
  --red: #c6312b;
  --black: #1d1d1f;
  --danger: #ff7b6b;
  --ok: #7fd18b;
  --radius: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* Text size (FR-UX-08): everything in rem follows --text-scale; card marks follow --mark-scale. */
html { font-size: calc(16px * var(--text-scale, 1)); }
body {
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
#app { min-height: 100%; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.15; }
h1 { font-size: 2.2rem; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; }
h3 { font-size: .95rem; color: var(--muted); margin-top: 1rem; }
.muted { color: var(--muted); font-size: .9rem; }
.error { color: var(--danger); font-size: .9rem; min-height: 1.2em; }
button, select, input {
  font: inherit; color: inherit; border-radius: 10px; border: 1px solid #4a3c30;
  background: var(--panel-2); padding: .7rem 1rem; min-height: 44px;
}
button { cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 650; }
button.big { font-size: 1.15rem; padding: .9rem 1.4rem; }
button.link { background: none; border: none; color: var(--muted); text-decoration: underline; min-height: 0; padding: .25rem .5rem; }
input { width: 100%; background: #110d0a; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.row > * { flex: 1 1 auto; }

.home, .lobby { max-width: 520px; margin: 0 auto; padding: 1.5rem 1rem 3rem; display: grid; gap: 1rem; }
.panel { background: var(--panel); border-radius: var(--radius); padding: 1rem; display: grid; gap: .75rem; }
.center { display: grid; place-items: center; min-height: 60vh; gap: 1rem; padding: 1rem; text-align: center; }
.banner { background: #5a3a12; color: #ffd9a8; text-align: center; padding: .4rem; font-size: .9rem; position: sticky; top: 0; z-index: 5; }
.toast { position: fixed; left: 1rem; right: 1rem; bottom: 4.5rem; background: #3a1f1a; padding: .6rem .9rem; border-radius: 10px; text-align: center; z-index: 20; }

.room { display: flex; align-items: baseline; gap: .75rem; }
.room .code { font-size: 2.6rem; font-weight: 800; letter-spacing: .12em; color: var(--accent); }
.join-urls { display: grid; gap: .25rem; }
.join-urls code { background: var(--panel); padding: .35rem .6rem; border-radius: 8px; font-size: .95rem; overflow-wrap: anywhere; }
.members { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.members li { background: var(--panel); padding: .6rem .8rem; border-radius: 10px; display: flex; gap: .5rem; align-items: center; }
.members li.offline { opacity: .5; }
.dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--ok); }
.offline .dot { background: var(--muted); }
.tag { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; background: var(--panel-2); color: var(--muted); padding: .1rem .4rem; border-radius: 6px; }
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; align-items: stretch; }
.game { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: .25rem; text-align: left; height: 100%; }

/* ---------- table ---------- */
.table { min-height: 100vh; display: grid; grid-template-rows: auto auto 1fr auto; }
.bar { display: flex; gap: .75rem; align-items: center; padding: .6rem 1rem; background: var(--panel); }
.bar strong { flex: 1; }
.seats { display: flex; gap: .4rem; overflow-x: auto; padding: .5rem 1rem; }
.seat { background: var(--panel); border-radius: 10px; padding: .4rem .7rem; display: grid; min-width: 7.5rem; border: 2px solid transparent; }
.seat.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240,138,60,.18); }
.seat.me strong { color: var(--accent); }
.felt {
  background: radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-edge) 100%);
  margin: 0 .5rem; border-radius: 22px; padding: 1rem .75rem; display: grid; align-content: start; gap: 1rem;
}
.status { padding: .8rem 1rem; text-align: center; font-weight: 600; min-height: 3rem; }

.card {
  --w: 64px; width: var(--w); height: calc(var(--w) * 1.4); border-radius: 8px; background: var(--card);
  border: 1px solid #d8d0c4; position: relative; display: inline-grid; place-items: center; padding: 0;
  font-weight: 700; box-shadow: 0 2px 4px rgba(0,0,0,.35); flex: 0 0 auto; min-height: 0;
}
.card.small { --w: 40px; }
.card.red { color: var(--red); }
.card.black { color: var(--black); }
.card .corner { position: absolute; top: 4px; left: 6px; display: grid; line-height: 1; font-size: calc(var(--w) * .22 * var(--mark-scale, 1)); text-align: center; z-index: 1; }
.card.small .corner { left: 4px; top: 3px; }
/* Sized from the card, not the page text, so bigger marks never grow the card itself. */
.card .pip { font-size: calc(var(--w) * .4 * var(--mark-scale, 1)); line-height: 1; }
html[data-text-size="huge"] .card .pip { opacity: .35; }
.card.selected { transform: translateY(-12px); outline: 3px solid var(--accent); }
.card.back {
  background: repeating-linear-gradient(45deg, #8c3b1f 0 6px, #a24a26 6px 12px);
  border: 3px solid var(--card);
}
.card.empty { background: transparent; border: 2px dashed rgba(255,255,255,.25); box-shadow: none; }
button.card { cursor: pointer; transition: transform .12s; }
button.card.back:active { transform: translateY(-6px); }

.pile { position: relative; display: inline-block; }
.pile .count {
  position: absolute; right: -8px; bottom: -8px; background: var(--accent); color: var(--accent-ink);
  border-radius: 999px; min-width: 1.6rem; padding: 0 .35rem; text-align: center; font-weight: 800; font-size: .85rem;
}
.hand { --w: 64px; display: flex; flex-wrap: wrap; row-gap: .6rem; justify-content: center; padding: 1rem .5rem 0 calc(var(--w) * .4); max-width: 100%; }
.hand .card { margin-left: calc(var(--w) * -.4); }
/* Touch screens keep :hover after a tap, which left a deselected card covering its neighbour. */
@media (hover: hover) { .hand .card:hover { z-index: 2; } }
.hand .card.selected { z-index: 2; }
.hint { text-align: center; color: #ffd9a8; font-weight: 600; }
.others { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.other { background: rgba(0,0,0,.22); border-radius: 12px; padding: .5rem .7rem; display: grid; gap: .35rem; justify-items: center; border: 2px solid transparent; }
.other.active { border-color: var(--accent); }
.other-name { font-weight: 700; }
.mini-fan { display: flex; padding-left: 22px; min-height: 30px; }
.mini-fan .card { --w: 34px; margin-left: -22px; }
.event { background: rgba(0,0,0,.25); border-radius: 10px; padding: .6rem .8rem; text-align: center; }
.opponents { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .5rem; }
.opponent { display: grid; gap: .1rem; text-align: left; background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.12); }
.books { text-align: center; color: #d7f0dd; }
.ocean { display: grid; justify-items: center; gap: .25rem; margin: 0 auto; }

.war { display: grid; gap: 1rem; }
.war-side { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "label label" "pile battle"; gap: .5rem 1rem; align-items: center; }
.war-side .label { grid-area: label; font-weight: 700; }
.war-side .pile { grid-area: pile; }
.war-side .battle { grid-area: battle; display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.facedown { display: flex; gap: .2rem; }
.war-center { display: grid; justify-items: center; gap: .5rem; }
.badge { background: var(--accent); color: var(--accent-ink); padding: .15rem .6rem; border-radius: 999px; font-weight: 800; }

.fan-wrap { display: grid; gap: .5rem; justify-items: center; }
.fan { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; }

.overlay { position: fixed; inset: 0; background: rgba(10,7,5,.78); display: grid; place-items: center; padding: 1rem; z-index: 30; }
.dialog { background: var(--panel); border-radius: var(--radius); padding: 1.25rem; width: min(440px, 100%); display: grid; gap: .75rem; text-align: center; }
.handoff { min-height: 100vh; display: grid; place-content: center; gap: 1rem; text-align: center; padding: 1.5rem; background: var(--bg); }

/* Table display (spectator): scale up for a TV or tablet across the room. */
.spectator .card { --w: 92px; }
.spectator .card.small { --w: 60px; }
.spectator .felt { margin: 0 1rem; padding: 2rem; }
.spectator .seat { min-width: 10rem; font-size: 1.1rem; }

@media (min-width: 760px) {
  .card { --w: 80px; }
  .war { grid-template-columns: 1fr auto 1fr; align-items: center; }
}

.battle.last { opacity: .75; grid-area: battle; }
.war-side .battle:empty { display: none; }
.seat .muted { white-space: nowrap; }

/* ---------- game settings (ADR-0011) ---------- */
/* Every card in a row is the same height; Settings sits at the same spot under each. */
.game-entry { display: grid; grid-template-rows: 1fr auto; gap: .25rem; }
.game .summary { font-size: .78rem; }
.settings { display: grid; gap: .9rem; }
.setting { display: grid; gap: .3rem; }
.settings-box summary { cursor: pointer; color: var(--muted); padding: .25rem 0; }
.settings-box[open] summary { margin-bottom: .5rem; }

/* Cheat */
.reveal { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.row.actions { justify-content: center; gap: 12px; }

/* Table name (FR-LOBBY-06): owner edits it in place */
.room-name { font-size: 1.4rem; font-weight: 700; margin: 0 0 8px; }
input.room-name { width: 100%; background: transparent; color: inherit; border: 1px dashed var(--line, #4a3f36); border-radius: 8px; padding: 6px 8px; }

/* Uno */
.card.uno { color: #fff; border: 3px solid #fff; font-size: 1.1rem; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.card.uno .pip { font-size: calc(var(--w) * .36 * var(--mark-scale, 1)); }
.uno-red { background: #d63a2f; }
.uno-yellow { background: #e9b824; }
.uno-green { background: #2f9a4a; }
.uno-blue { background: #2a63c4; }
.card.uno-wild { background: conic-gradient(#d63a2f 0 25%, #e9b824 0 50%, #2f9a4a 0 75%, #2a63c4 0); }
.card.uno.dim { opacity: .45; }
.uno-center { align-items: center; justify-content: center; gap: 18px; }
.uno-top { display: grid; justify-items: center; gap: 6px; }
.uno-chip { color: #fff; border-radius: 999px; padding: 4px 12px; font-weight: 700; border: 0; }
button.uno-chip { padding: 10px 16px; min-width: 70px; }

/* Card Table */
.table-piles { justify-content: center; gap: 24px; }
.ocean.plain { background: none; border: 0; padding: 0; }
.table-center { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 80px; padding: 10px; border-radius: 12px; background: var(--felt); border: 2px solid var(--felt-edge); }
.played { display: grid; justify-items: center; gap: 2px; font-size: .7rem; }
.row.actions.wrap { flex-wrap: wrap; }
.panel.dealer { display: grid; gap: 8px; margin-top: 8px; }
button.link.on { color: var(--accent); }

/* Pass & play PINs (FR-UX-05) */
.pin-gate { display: grid; gap: .6rem; justify-items: center; }
.handoff input[type=password], .handoff input[data-testid=pin-name] { font-size: 1.4rem; text-align: center; max-width: 16rem; width: 100%; }
label.check { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; }

/* Multi-card picks: greyed in the hand, shown whole in a tray above it */
.card.picked { opacity: .3; filter: grayscale(1); }
.tray { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 8px; border-radius: 12px; background: rgba(0,0,0,.25); }
.mover button { min-width: 48px; font-size: 1.2rem; }
.turnbar { position: sticky; top: 0; z-index: 5; justify-content: center; padding: 6px 0; background: var(--felt); }
button.link.remove { margin-left: auto; font-size: .8rem; color: var(--muted); }

/* Table chat (FR-CHAT-02): translucent overlay, or slid away to a tray pill */
.chat { position: fixed; left: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 50; width: min(360px, 78vw); pointer-events: none; }
.chat-panel { pointer-events: auto; transition: transform .25s ease, opacity .25s ease; }
.chat.chat-tray .chat-panel { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
.chat-list { max-height: 24vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; scrollbar-width: none; }
.chat-line { align-self: flex-start; max-width: 100%; padding: 5px 10px; border-radius: 14px; font-size: .85rem; line-height: 1.25; color: #fff; background: rgba(12, 9, 7, .74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .08); overflow-wrap: anywhere; }
.chat-line b { color: var(--accent); }
.chat-line.mine { background: rgba(120, 58, 20, .78); }
.chat-row { display: flex; gap: 6px; align-items: center; }
.chat-input { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(12, 9, 7, .8); color: var(--text); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 16px; }
.chat-send, .chat-hide { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(12, 9, 7, .8); color: var(--text); padding: 0; }
.chat-pill { display: none; pointer-events: auto; position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: 8px 14px; border-radius: 999px; border: 0; background: rgba(12, 9, 7, .85); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.chat.chat-tray .chat-pill { display: inline-flex; gap: 4px; align-items: center; }
.chat-badge:not(:empty) { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 0 7px; font-weight: 700; font-size: .8rem; }
body.has-chat { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
/* Bubbles never block taps on the table under them; only the input row and pill are interactive. */
.chat-list { pointer-events: none; }
body.has-chat .table { min-height: calc(100vh - 64px - env(safe-area-inset-bottom)); }
/* Keep the stream short and fade older lines so the table shows through. */
.chat-list { max-height: 18vh; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 35%); mask-image: linear-gradient(to bottom, transparent 0, #000 35%); }

/* Hold'em roles (FR-HOLDEM-08) */
.role-banner { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 10px; }
.role-chip { display: inline-block; padding: 8px 14px; border-radius: 999px; font-weight: 800; letter-spacing: .04em; font-size: 1.05rem; }
.role-chip.small { padding: 1px 8px; font-size: .72rem; margin-left: 4px; }
.role-button { background: #fff; color: #111; }
.role-smallBlind { background: #2a63c4; color: #fff; }
.role-bigBlind { background: #d63a2f; color: #fff; }
.role-act { background: var(--accent); color: var(--accent-ink); }
.holdem-players { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 4px; }
.holdem-players li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,.2); }
.holdem-players li.folded, .holdem-players li.gone { opacity: .45; }
.holdem-players li.winner { outline: 2px solid var(--accent); }
.holdem-players .pname { font-weight: 600; margin-right: 4px; }
.holdem-players .shown { display: inline-flex; gap: 2px; align-items: center; margin-left: auto; }
.board { display: flex; gap: 6px; justify-content: center; padding: 8px 0; }
.board .card { --w: 52px; }

.textsize { position: fixed; top: calc(6px + env(safe-area-inset-top)); right: 8px; z-index: 60; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(12,9,7,.8); color: var(--text); font-weight: 700; font-size: 15px; }
header.bar { padding-right: 56px; }
.invite-row { align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- ui/chutes.css ---- */
/* Chutes & Ladders (also used by .ch-legend / .ch-key in Candy Path) */
.chutes-table { display: grid; gap: 1rem; align-items: start; justify-items: center; width: 100%; }
.ch-board-wrap { width: min(100%, 74vh); }
.ch-board { width: 100%; height: auto; display: block; border-radius: 12px; background: #fff7e6; }
.ch-cell.a { fill: #ffe9a8; }
.ch-cell.b { fill: #bfe3ff; }
.ch-cell.goal { fill: #ffd34d; }
.ch-num { font: 700 12px system-ui, sans-serif; fill: #5b4a35; }
.ch-ladder .rail { stroke: #1f8a3b; stroke-width: 12; stroke-linecap: round; opacity: .85; }
.ch-ladder .rungs { stroke: #c9f2cf; stroke-width: 8; stroke-dasharray: 3 11; }
.ch-chute .snake { fill: none; stroke: #d6342c; stroke-width: 9; stroke-linecap: round; opacity: .85; }
.ch-chute .head { fill: #d6342c; stroke: #fff; stroke-width: 2; }
.ch-chute .tail { fill: #fff; stroke: #d6342c; stroke-width: 2; }
.ch-token { stroke: #fff; stroke-width: 2.5; }
.ch-token.turn { stroke: #1d1d1f; stroke-width: 3; }
.ch-tok-n, .cl-tok-n { font: 800 11px system-ui, sans-serif; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.45); stroke-width: 2px; }
.ch-start { font: 800 13px system-ui, sans-serif; fill: #5b4a35; }
.ch-side { display: grid; gap: .8rem; justify-items: center; text-align: center; width: min(100%, 26rem); }
.ch-spinner { width: 6rem; height: 6rem; border-radius: 50%; display: grid; place-items: center; font-size: 3.2rem; font-weight: 800; color: #1a0f06; background: conic-gradient(#f5c518 0 16.6%, #f08a3c 0 33.3%, #e5484d 0 50%, #a855f7 0 66.6%, #3b82f6 0 83.3%, #22c55e 0); box-shadow: 0 0 0 6px var(--panel-2); }
.ch-spinner::before { content: ''; position: absolute; }
.ch-spin, .cl-draw { font-size: 1.4rem; padding: .8rem 2.2rem; min-height: 3.2rem; }
.ch-legend { display: flex; flex-wrap: wrap; gap: .4rem .8rem; justify-content: center; }
.ch-key { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 999px; background: var(--panel-2); font-size: .95rem; }
.ch-key.active { outline: 2px solid var(--accent); }
.ch-key .dot { width: .9rem; height: .9rem; border-radius: 50%; display: inline-block; border: 2px solid #fff; }
@media (min-aspect-ratio: 5/4) and (min-width: 900px) {
  .chutes-table, .candy-table { grid-template-columns: minmax(0, 1fr) 24rem; justify-items: stretch; }
  .ch-board-wrap { justify-self: center; }
  .ch-side { justify-self: center; }
}

/* ---- ui/candyland.css ---- */
/* Candy Path */
.candy-table { display: grid; gap: 1rem; align-items: start; justify-items: center; width: 100%; }
.cl-board-wrap { width: min(100%, 150vh); }
.cl-board { width: 100%; height: auto; display: block; border-radius: 12px; background: #fdebf3; }
.cl-tile { stroke: rgba(0, 0, 0, .18); stroke-width: 1; }
.cl-tile.pic { stroke: #5b4a35; stroke-width: 2.5; }
.cl-tile.castle { stroke: #c2418f; stroke-width: 3; }
.cl-icon { font-size: 20px; text-anchor: middle; }
.cl-label { font: 800 9px system-ui, sans-serif; fill: #3b2a20; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.cl-shortcut { fill: none; stroke: #fff; stroke-width: 5; stroke-dasharray: 2 9; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(0,0,0,.6)); }
.cl-start { font: 800 13px system-ui, sans-serif; fill: #7a2c56; }
.cl-token { stroke: #fff; stroke-width: 2.5; }
.cl-token.turn { stroke: #1d1d1f; stroke-width: 3; }
.cl-side { display: grid; gap: .8rem; justify-items: center; text-align: center; width: min(100%, 26rem); }
.cl-card { width: 9rem; min-height: 12rem; border-radius: 14px; background: var(--card); color: #1d1d1f; border: 4px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.4); display: grid; align-content: center; justify-items: center; gap: .5rem; padding: .6rem; }
.cl-card .cl-sq { width: 4.2rem; height: 4.2rem; border-radius: 12px; border: 3px solid rgba(0,0,0,.2); }
.cl-card-text { font-size: 1.25rem; font-weight: 800; text-transform: capitalize; }
.cl-card.back { background: repeating-linear-gradient(45deg, #f5a3c7 0 12px, #fbd0e2 0 24px); }
.cl-card.back .cl-card-text { font-size: 3rem; }
.cl-card.picture { background: linear-gradient(160deg, #fff7e6, #ffd9ec); }
@media (min-aspect-ratio: 5/4) and (min-width: 900px) {
  .cl-side { justify-self: center; }
}

/* ---- ui/dice.css ---- */
/* Shared by Yahtzee, Farkle and Liar's Dice. */
.die {
  --d: 3.4rem;
  width: var(--d); height: var(--d); border-radius: 22%;
  background: var(--card); color: #1b1b1b; border: 2px solid #cfc6b8; padding: 9%;
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); place-items: center;
  box-shadow: 0 2px 0 rgba(0,0,0,.35); position: relative; flex: 0 0 auto; min-height: 0;
}
.die.small { --d: 2.1rem; border-radius: 20%; padding: 8%; }
.die .pip { width: 72%; height: 72%; border-radius: 50%; }
.die .pip.on { background: currentColor; }
.die.blank { background: var(--panel-2, #3a2f27); border-style: dashed; border-color: var(--muted); box-shadow: none; opacity: .6; }
button.die { cursor: pointer; transition: transform .12s; }
.die.held, .die.selected { transform: translateY(-10px); outline: 3px solid var(--accent); }
.die.held::after { content: 'HELD'; position: absolute; bottom: -1.15rem; left: 0; right: 0; text-align: center; font-size: .6rem; font-weight: 700; letter-spacing: .08em; color: var(--accent); }
.die.dim { opacity: .45; }
.die-tag { position: absolute; top: -.5rem; right: -.4rem; background: var(--accent); color: var(--accent-ink); font-size: .65rem; font-weight: 700; border-radius: 999px; padding: 0 .35rem; }
.dice-row { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; padding: 1.1rem .5rem 1.5rem; }
.dice-row.small { gap: .3rem; padding: .3rem 0; }
.cup { width: 2.6rem; height: 3rem; border-radius: 0 0 .9rem .9rem; background: linear-gradient(#7a4b2a, #4b2b16); border: 2px solid #2d190c; display: grid; place-items: center; clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); }
.cup-n { font-weight: 800; color: #f6e7d3; }

/* ---- ui/yahtzee.css ---- */
.yz-table { display: grid; gap: .5rem; }
.scroll-x { overflow-x: auto; }
.scorecard { width: 100%; border-collapse: collapse; font-size: .95rem; }
.scorecard th, .scorecard td { padding: .3rem .4rem; border-bottom: 1px solid rgba(255,255,255,.08); text-align: center; white-space: nowrap; }
.scorecard th[scope='row'] { text-align: left; font-weight: 500; }
.scorecard thead th.on { color: var(--accent); }
.scorecard td.used { font-weight: 700; }
.scorecard td.potential { color: var(--muted); font-style: italic; }
.scorecard td.potential.blocked { opacity: .4; }
.scorecard tr.sum th, .scorecard tr.sum td { color: var(--muted); font-size: .85rem; }
.scorecard tr.sum:last-child th, .scorecard tr.sum:last-child td { color: inherit; font-weight: 800; font-size: 1rem; }
.score-btn { min-width: 2.6rem; min-height: 2.2rem; padding: .1rem .5rem; background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 700; }

/* ---- ui/farkle.css ---- */
.fk-table { display: grid; gap: .6rem; }
.fk-scores { display: flex; gap: .5rem; flex-wrap: wrap; }
.fk-score { flex: 1 1 5.5rem; background: var(--panel-2, rgba(255,255,255,.06)); border: 2px solid transparent; border-radius: 10px; padding: .35rem .5rem; text-align: center; }
.fk-score.active { border-color: var(--accent); }
.fk-score.final { box-shadow: inset 0 0 0 2px #e6c04a; }
.fk-score strong { font-size: 1.25rem; }
.fk-turn { text-align: center; }
.fk-turn strong { color: var(--accent); font-size: 1.4rem; }
.fk-kept { display: flex; align-items: center; justify-content: center; gap: .5rem; }

/* ---- ui/liars-dice.css ---- */
.ld-table { display: grid; gap: .6rem; }
.ld-cups { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.ld-seat { display: grid; justify-items: center; gap: .2rem; padding: .4rem .6rem; border: 2px solid transparent; border-radius: 10px; min-width: 5rem; }
.ld-seat.active { border-color: var(--accent); }
.ld-seat.out { opacity: .5; }
.ld-bid-chip { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: .05rem .5rem; font-size: .8rem; font-weight: 700; }
.ld-current { text-align: center; font-weight: 700; }
.ld-reveal { display: grid; gap: .2rem; padding: .4rem; border-radius: 10px; background: rgba(0,0,0,.25); animation: ld-pop .35s ease-out; }
.ld-reveal-row { display: flex; align-items: center; gap: .5rem; }
.ld-reveal-row .other-name { min-width: 4.5rem; }
.ld-picker { display: grid; gap: .5rem; justify-items: center; }
.ld-qty { align-items: center; justify-content: center; gap: 1rem; }
.ld-qty strong { font-size: 1.8rem; min-width: 2.5rem; text-align: center; }
.ld-faces { padding-bottom: .8rem; }
@keyframes ld-pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---- ui/tricks.css ---- */
/* Trick-taking games: Hearts, Spades, Euchre (shared; see ui/trick-table.ts). */
.trick-game { display: grid; gap: .75rem; }
.trick-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; }
.trick-score { display: grid; gap: .1rem; background: rgba(0,0,0,.25); border-radius: 10px; padding: .4rem .6rem; border: 2px solid transparent; }
.trick-score.turn { border-color: var(--accent); }
.trick-score.mine { border-color: rgba(127,209,139,.6); }
.trick-score .pname { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trick-score .big-num { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.trick-score .muted { font-size: .8rem; }

.trick-center {
  position: relative; width: min(100%, 420px); aspect-ratio: 4 / 3; margin: 1.25rem auto .5rem;
  background: radial-gradient(ellipse at center, var(--felt) 0 60%, var(--felt-edge) 100%); border-radius: 50% / 40%;
}
.trick-center.past .trick-slot .card { opacity: .8; }
.trick-center.passing, .trick-center.upcard { display: grid; place-content: center; justify-items: center; gap: .4rem; text-align: center; }
.pass-dir { font-size: 1.4rem; font-weight: 800; }
.trick-slot { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .15rem; }
.trick-slot .card { --w: 44px; }
.trick-slot.won .card { outline: 3px solid var(--accent); }
.trick-slot.out { opacity: .5; }
.trick-name { font-size: .75rem; font-weight: 700; text-align: center; white-space: nowrap; background: rgba(0,0,0,.35); padding: 0 .4rem; border-radius: 999px; }
.trick-slot.turn .trick-name { background: var(--accent); color: var(--accent-ink); }
.trick-tag { display: block; font-weight: 500; font-size: .7rem; opacity: .85; }
.trick-caption { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .2rem; font-size: .8rem; text-align: center; max-width: 45%; }

.trick-controls { display: grid; gap: .5rem; justify-items: center; }
.hand.trick-hand { padding-left: 36px; }
.trick-hand .card.dim { filter: brightness(.55) saturate(.6); }
.trick-hand .card.received { box-shadow: 0 0 0 3px var(--ok); }
.trick-foot { text-align: center; font-size: .85rem; }

.bid-grid { display: grid; grid-template-columns: repeat(7, minmax(2.6rem, 1fr)); gap: .35rem; width: min(100%, 420px); }
.bid-grid button { padding: .5rem 0; font-weight: 700; }
.bid-grid button.nil { grid-column: span 7; }

.trump-banner { text-align: center; font-weight: 800; font-size: 1.1rem; }
.euchre .suit-H, .euchre .suit-D { color: var(--red); }

.spectator .trick-center { width: min(100%, 720px); }
.spectator .trick-slot .card { --w: 72px; }

/* ---- ui/crazy-eights.css ---- */
/* Crazy Eights */
.c8-table { display: grid; gap: .75rem; }
.c8-suit { background: var(--card); color: var(--black); border-radius: 999px; padding: .2rem .8rem; font-weight: 800; font-size: 1rem; }
.c8-suit.red { color: var(--red); }
.c8-suit-btn { background: var(--card); color: var(--black); border-radius: 999px; padding: .4rem .9rem; font-weight: 800; font-size: 1rem; border: 0; }
.c8-suit-btn.red { color: var(--red); }

/* ---- ui/gin.css ---- */
/* Gin Rummy — meld groups (shared look with Rummy 500) */
.gin-table { display: grid; gap: .75rem; }
.meld-row { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; align-items: flex-end; }
.meld-group { display: grid; justify-items: center; gap: .25rem; padding: .35rem .5rem .4rem calc(var(--w, 64px) * .45); border-radius: 10px; background: rgba(0,0,0,.2); border: 2px solid transparent; color: inherit; }
.meld-group .meld-cards { display: flex; }
.meld-group .meld-cards .card { margin-left: calc(var(--w) * -.45); }
.meld-group.dead { background: rgba(0,0,0,.35); border-style: dashed; border-color: var(--muted); }
.meld-group.fits { border-color: var(--accent); cursor: pointer; }
.meld-label { font-size: .8rem; color: var(--muted); font-weight: 700; }
.gin-reveal .meld-group .card { --w: 40px; }
button.knock { font-weight: 800; }

/* ---- ui/rummy500.css ---- */
/* Rummy 500 */
.r5-table { display: grid; gap: .75rem; }
.r5-piles { justify-content: center; align-items: flex-start; gap: 1rem; flex-wrap: nowrap; }
.r5-piles > .ocean { flex: 0 0 auto; }
.r5-spread { flex: 1 1 auto; display: flex; flex-wrap: wrap; row-gap: .4rem; min-width: 0; padding-left: calc(var(--w, 64px) * .55); }
.r5-spread .card { margin-left: calc(var(--w) * -.55); }
.r5-spread .card.selected { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--accent); }
.r5-melds { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; min-height: 70px; padding: .6rem; border-radius: 12px; background: var(--felt); border: 2px solid var(--felt-edge); }
.r5-suggest { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: center; }
.r5-table .meld-group { display: grid; justify-items: center; gap: .25rem; padding: .35rem .5rem .4rem calc(var(--w, 40px) * .45); border-radius: 10px; background: rgba(0,0,0,.2); border: 2px solid transparent; color: inherit; }
.r5-table .meld-group .meld-cards { display: flex; }
.r5-table .meld-group .meld-cards .card { margin-left: calc(var(--w) * -.45); }
.r5-table .meld-group.fits { border-color: var(--accent); cursor: pointer; }
.r5-table .meld-label { font-size: .8rem; color: var(--muted); font-weight: 700; }