:root {
  --felt-1: #1b7a4f; --felt-2: #0d4a2f; --felt-3: #082f1f;
  --wood-1: #7b4a24; --wood-2: #4a2a12;
  --ink: #1d2433; --gold: #f5c04a; --gold-2: #e0992a; --danger: #c5282f;
  --jade: #2f9a72; --jade-dark: #1b6a4c;
  --tile-w: clamp(36px, 4.6vw, 58px);
}
* { box-sizing: border-box; }
html { background: #1a120b; }
body {
  margin: 0; min-height: 100vh; color: #f4f1e6;
  font: 16px/1.4 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  background: radial-gradient(ellipse at 50% 0%, #3a2515 0%, #1a120b 70%);
}
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: #fff; color: #000; padding: 6px; z-index: 10; }
#banner { display: none; text-align: center; background: var(--danger); color: #fff; padding: 6px; font-weight: 600; }
#banner.show { display: block; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
h1, h2 { font-family: Georgia, 'Songti SC', serif; letter-spacing: .02em; }

/* ---------- buttons / panels ---------- */
.btn {
  background: linear-gradient(#ffd774, var(--gold-2)); color: #2a1a05; border: 0; border-radius: 10px;
  padding: 10px 18px; font-weight: 700; box-shadow: 0 3px 0 #9a6414, 0 6px 10px #0006; transition: transform .08s, box-shadow .08s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #9a6414; }
.btn.secondary { background: linear-gradient(#fbf5e1, #d9cfae); box-shadow: 0 3px 0 #8d8363, 0 6px 10px #0006; }
.btn.ghost { background: #ffffff14; color: #fff; box-shadow: none; border: 1px solid #ffffff55; }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.panel { background: linear-gradient(#0f5a3b, #0b4a30); border: 1px solid #ffffff22; border-radius: 14px; padding: 20px; box-shadow: 0 8px 24px #0005; }
.muted { color: #cfe3d6; font-size: .92em; }
.notice { background: #00000040; border-left: 4px solid var(--gold); padding: 8px 12px; border-radius: 6px; font-size: .9em; }

/* ---------- lobby ---------- */
.lobby { max-width: 600px; margin: 0 auto; padding: 7vh 16px 0; display: grid; gap: 16px; }
.lobby h1 { margin: 0; font-size: 2.6rem; text-align: center; color: var(--gold); text-shadow: 0 3px 0 #5b3a08, 0 6px 14px #000a; }
.lobby .muted { text-align: center; margin: 0; }
.lobby .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lobby input { padding: 10px 12px; border-radius: 10px; border: 1px solid #0008; font: inherit; min-width: 0; flex: 1; background: #fffdf3; color: var(--ink); }
.lobby h2 { margin: 0 0 10px; }
.hero { display: flex; justify-content: center; gap: 8px; --tile-w: clamp(34px, 9vw, 56px); }
.hero .tile:nth-child(odd) { transform: rotate(-4deg); } .hero .tile:nth-child(even) { transform: rotate(3deg) translateY(4px); }
.code { font: 800 2.2rem/1 ui-monospace, Menlo, monospace; letter-spacing: .25em; background: #00000050; padding: 10px 16px; border-radius: 10px; display: inline-block; color: var(--gold); }

/* ---------- table (3D scene) ---------- */
.table {
  display: grid; gap: 6px; padding: 10px 14px 14px; margin: 0 auto; max-width: 1320px; min-height: 100vh;
  grid-template-columns: minmax(0,1fr);
  grid-template-areas: "status" "standings" "stage" "me" "bar" "log";
  grid-template-rows: auto auto auto auto auto auto;
  --bd: clamp(430px, 56vh, 600px); /* in-plane board height; the 3D tilt shrinks its footprint on screen */
}
.status {
  grid-area: status; display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap;
  background: #000000aa; padding: 8px 14px; border-radius: 12px; border: 1px solid #ffffff22; z-index: 2;
}
.status strong { color: var(--gold); }

/* perspective camera looking down at the table */
.stage { grid-area: stage; perspective: 1500px; perspective-origin: 50% -10%; padding: 0 2%; margin: calc(var(--bd) * -.2) 0 10px; }
.board {
  position: relative; display: grid; gap: 12px; padding: 16px; height: var(--bd); grid-template-rows: auto minmax(0,1fr);
  grid-template-columns: minmax(104px, .62fr) minmax(0, 3fr) minmax(104px, .62fr);
  grid-template-areas: "left across right" "left center right";
  transform: rotateX(50deg); transform-origin: 50% 100%; transform-style: preserve-3d;
  --bw: min(calc(var(--bd) * .062), 3.2vw); --bt: calc(var(--bw) * .5); --bh: calc(var(--bw) * 1.34);
  background:
    radial-gradient(ellipse at 50% 45%, #22915f 0%, var(--felt-1) 30%, var(--felt-2) 70%, var(--felt-3) 100%);
  border: 16px solid #6b3f1c; border-radius: 28px;
  border-image: none;
  box-shadow:
    inset 0 0 0 3px #3a200c, inset 0 0 50px #000c, inset 0 0 0 20px #00000000,
    0 1px 0 #5a3414, 0 2px 0 #55320f, 0 3px 0 #502f0e, 0 4px 0 #4b2c0d, 0 5px 0 #46290c, 0 6px 0 #41260b,
    0 7px 0 #3c230a, 0 8px 0 #372009, 0 9px 0 #321d08, 0 10px 0 #2d1a07, 0 11px 0 #281706, 0 12px 0 #231405,
    0 13px 0 #1e1104, 0 14px 0 #190e03, 0 15px 0 #140b02, 0 16px 0 #0f0801,
    0 40px 50px -10px #000d, 0 70px 90px #000a;
}
/* wood grain on the rim */
.board::before {
  content: ''; position: absolute; inset: -16px; border-radius: 28px; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(95deg, #ffffff0d 0 2px, transparent 2px 9px), linear-gradient(135deg, #b07a43aa, transparent 35%, #00000066);
  -webkit-mask: linear-gradient(#000 0 0) border-box, linear-gradient(#000 0 0) padding-box; -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) border-box exclude, linear-gradient(#000 0 0) padding-box;
  border: 16px solid transparent;
}
/* felt texture + soft overhead lamp */
.board::after {
  content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, #ffffff1f, transparent 60%), repeating-radial-gradient(circle at 20% 20%, #0000000a 0 1px, transparent 1px 3px);
}
.board > * { position: relative; z-index: 1; }

.seat { background: #00000026; border-radius: 14px; padding: 8px 10px; border: 2px solid transparent; min-width: 0; transition: border-color .2s, box-shadow .2s; }
.seat.turn { border-color: var(--gold); box-shadow: 0 0 22px #f5c04a77; }
.seat.across { grid-area: across; } .seat.left { grid-area: left; } .seat.right { grid-area: right; }
.seat h2 { margin: 0 0 6px; font-size: 1rem; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; text-shadow: 0 2px 3px #000a; }
.chip { font: 600 .7rem/1.5 system-ui, sans-serif; padding: 0 8px; border-radius: 99px; background: #ffffff26; }
.chip.bot { background: #7c3aed; } .chip.warn { background: var(--danger); } .chip.ok { background: #2e9e4f; }
.chip.riichi { background: #c2410c; letter-spacing: .02em; }
.chip.dora-chip { display: inline-flex; align-items: center; gap: 3px; background: #ffffff1f; padding: 0 8px; }
.chip.dora-chip .tile, .chip.dora-chip svg { height: 1.4em; width: auto; }

.center {
  grid-area: center; border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 150px;
  background: radial-gradient(ellipse at center, #0b4a2f 0%, #0a3f29 75%);
  box-shadow: inset 0 6px 20px #000c, inset 0 0 0 2px #ffffff12;
}
.pile { display: flex; flex-wrap: wrap; gap: 6px 5px; align-content: flex-start; transform-style: preserve-3d; }
.pile .tile.small { --tile-w: clamp(28px, 3.4vw, 44px); }
.disc { display: inline-block; transform-style: preserve-3d; }
.disc.latest .t3-top { box-shadow: inset 0 0 0 3px var(--gold), 0 0 12px 2px #f5c04aaa; }
.claimbox { transform-style: preserve-3d; background: #00000066; border: 1px solid var(--gold); border-radius: 10px; padding: 14px 12px 6px; flex: 1; display: flex; gap: 12px; align-items: center; font-weight: 600; }
.claimbox .tile { --tile-w: clamp(40px, 5vw, 62px); }

.rack { display: flex; flex-wrap: wrap; gap: 3px; align-items: flex-end; padding: 6px 0 10px; }
.sets { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
/* ---- 3D standing opponent tiles ---- */
.seat, .seatbody, .rack, .sets, .set { transform-style: preserve-3d; }
.seatbody { display: flex; gap: 14px; align-items: flex-start; margin-top: calc(var(--bh) * .7); }
.seat.across .seatbody { flex-direction: column; align-items: stretch; gap: 8px; }
.seat.left .seatbody, .seat.right .seatbody { flex-direction: row; }
/* one straight line along the owner's edge; tile size shrinks so all 13 fit the board height */
.seat.left, .seat.right { --bw: calc((var(--bd) - 120px) / 14.5); --bt: calc(var(--bw) * .5); --bh: calc(var(--bw) * 1.34); }
.rack.side { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 1px; padding: 2px 0 6px; }
.rack { gap: 2px; align-items: flex-start; }
.sw { position: relative; display: block; flex: none; transform-style: preserve-3d; }
.sw.top { width: var(--bw); height: var(--bt); }
.sw.left, .sw.right { width: var(--bt); height: var(--bw); }
.stand { position: absolute; left: 0; top: 0; width: var(--bw); height: var(--bt); transform-style: preserve-3d; }
.sw.left .stand, .sw.right .stand { left: calc((var(--bt) - var(--bw)) / 2); top: calc((var(--bw) - var(--bt)) / 2); }
/* side racks: one straight line, backs facing the table centre */
.sw.left .stand { transform: rotateZ(-90deg); } .sw.right .stand { transform: rotateZ(90deg); }
.stand::before { content: ''; position: absolute; inset: -1px; border-radius: 3px; box-shadow: 0 0 6px 3px #000b; } /* contact shadow on felt */
.stand .face {
  position: absolute; left: 0; bottom: 0; width: 100%; height: var(--bh); transform-origin: 50% 100%; transform: rotateX(-90deg);
  border-radius: 5px 5px 1px 1px;
  background:
    var(--back-pattern, none) 0 0 / 100% 100%,
    linear-gradient(90deg, var(--back-lo, #247c58), var(--back-hi, #3aae82) 40%, var(--back-base, var(--jade)) 60%, var(--back-lo, #1f6f4d));
  box-shadow: inset 0 0 0 2px var(--back-edge, #1b6a4c), inset 0 0 0 4px #ffffff33;
}
.stand .cap { position: absolute; inset: 0; transform: translateZ(var(--bh)); border-radius: 3px; background: linear-gradient(#fffdf3, #e9dcb8); box-shadow: inset 0 0 0 1px #b9a97a; }
/* revealed sets are smaller than hand tiles so they stay on the board */
.board .sets .tile.small { --tile-w: calc(var(--bw) * 1); }
/* revealed sets: lie face-up beside the rack, turned to read from their owner's seat */
.sets.o-top .set { transform: rotate(180deg); }
.sets.o-left, .sets.o-right { flex-direction: column; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; }
.sets.o-left .set, .sets.o-right .set { flex-direction: column; }
.sets.o-left .tile { rotate: 90deg; margin: calc(var(--tile-w) * -.17) calc(var(--tile-w) * .17); }
/* other players' shown sets lie on the felt as real 3D slabs, like discards */
.board .sets .tile3d { --tw: calc(var(--bw) * 1); }
.sets.o-left .tile3d { rotate: 90deg; margin: calc(var(--tw) * -.17) calc(var(--tw) * .17); }
.sets.o-right .tile3d { rotate: -90deg; margin: calc(var(--tw) * -.17) calc(var(--tw) * .17); }
.sets.o-right .tile { rotate: -90deg; margin: calc(var(--tile-w) * -.17) calc(var(--tile-w) * .17); }
.set { display: flex; gap: 1px; background: #00000040; padding: 3px; border-radius: 8px; }

/* player's tray: flat, large, in front of the camera */
.seat.me {
  grid-area: me; position: relative; margin: 0 4%; padding: 10px 16px 12px; border-radius: 16px;
  background:
    repeating-linear-gradient(92deg, #ffffff10 0 2px, transparent 2px 10px),
    linear-gradient(#8a5a2c, #5d3a1a 60%, #3f2610);
  border: 2px solid #2d1a0a; box-shadow: inset 0 2px 0 #c28b52aa, inset 0 -6px 14px #0008, 0 10px 20px #000b;
}
.seat.me.turn { border-color: var(--gold); box-shadow: inset 0 2px 0 #c28b52aa, 0 0 24px #f5c04a88, 0 10px 20px #000b; }
.seat.me h2 { color: #fff3d6; }
.seat.me .rack { gap: 5px; padding-top: 22px; }
.seat.me .tile { --tile-w: clamp(40px, 5vw, 66px); }
.seat.me .sets .tile, .seat.me .sets .small { --tile-w: clamp(28px, 3.2vw, 40px); }

/* ---------- tiles ---------- */
.tile {
  all: unset; box-sizing: border-box; position: relative; display: inline-block; flex: none; cursor: default;
  width: var(--tile-w); height: calc(var(--tile-w) * 1.34); padding: 3px 3px 5px; border-radius: 8px;
  background: linear-gradient(155deg, var(--paper-hi, #fffef6) 0%, var(--paper-mid, #f6edd2) 55%, var(--paper-lo, #e7dab5) 100%);
  box-shadow:
    inset 0 1px 0 #fff, inset 0 0 0 1px var(--paper-outline, transparent), inset 0 -2px 3px #b9a97a66, inset 1px 0 0 #ffffffaa,
    0 4px 0 var(--back-edge, var(--jade-dark)), 0 5px 0 var(--back-edge-dark, #0d3d2b), 0 9px 9px #0009;
}
.tile .art { display: block; width: 100%; height: 100%; }
.tile .art svg { width: 100%; height: 100%; display: block; }
button.tile { cursor: pointer; transition: transform .1s ease, box-shadow .1s ease; }
button.tile:hover { transform: translateY(-4px); }
button.tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.tile.small { --tile-w: clamp(26px, 3.1vw, 38px); padding: 2px 2px 4px; border-radius: 6px; box-shadow: inset 0 1px 0 #fff, 0 3px 0 var(--back-edge, var(--jade-dark)), 0 4px 0 var(--back-edge-dark, #0d3d2b), 0 6px 6px #0008; }
.tile.sel { transform: translateY(-16px); box-shadow: inset 0 1px 0 #fff, 0 0 0 3px var(--gold), 0 4px 0 var(--back-edge, var(--jade-dark)), 0 14px 14px #000a; }
.tile.drawn::after { content: ''; position: absolute; left: 50%; bottom: -12px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #6ee7b7; box-shadow: 0 0 6px #6ee7b7; }
.tile.back {
  background:
    var(--back-pattern, none) 0 0 / 100% 100%,
    linear-gradient(155deg, var(--back-hi, #3aae82), var(--back-base, var(--jade)) 50%, var(--back-lo, #247c58));
  box-shadow: inset 0 0 0 2px var(--back-edge, #1b6a4c), inset 0 0 0 4px #ffffff55, 0 3px 0 var(--back-edge-dark, #0d3d2b), 0 5px 5px #0008;
}
.tile.joker { box-shadow: inset 0 1px 0 #fff, 0 4px 0 #6b3fa0, 0 5px 0 #3b1f66, 0 9px 9px #0009; }

/* ---------- action bar / log ---------- */
.bar { grid-area: bar; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background: #00000055; padding: 10px 14px; border-radius: 14px; min-height: 60px; }
.bar .hint { flex: 1; min-width: 160px; color: #e8efe8; }
.log { grid-area: log; font-size: .85rem; color: #cfe3d6; padding: 4px 10px; }
.log ol { margin: 0; padding-left: 18px; }
.log:last-of-type { color: #cfe3d6; }
dialog { border: 0; border-radius: 16px; padding: 22px; max-width: 540px; width: calc(100% - 24px); background: #fbf7ea; color: var(--ink); box-shadow: 0 20px 60px #000c; }
dialog h2 { margin-top: 0; }
dialog::backdrop { background: #000b; }
dialog table { width: 100%; border-collapse: collapse; } dialog td, dialog th { text-align: left; padding: 4px 8px; border-bottom: 1px solid #0002; }
dialog .rack { background: #0e5a3a; border-radius: 10px; padding: 10px; margin: 8px 0; }
.card { max-height: 55vh; overflow: auto; font-size: .9rem; }
.card li { margin: 3px 0; } .card code { background: #00000040; padding: 0 6px; border-radius: 4px; }
details.refs { grid-column: 1/-1; }
details.refs summary { cursor: pointer; font-weight: 600; }

@media (max-width: 760px) {
  .board { transform: rotateX(18deg); grid-template-columns: 1fr 1fr; grid-template-areas: "across across" "left right" "center center"; border-width: 9px; padding: 8px; --depth: 8; }
  .seat.me { margin: 0; }
  .tile { --tile-w: clamp(30px, 11vw, 48px); } .tile.small { --tile-w: clamp(22px, 7vw, 30px); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- the wall (tile stacks) ---------- */
.center { transform-style: preserve-3d; --wd: 28px; --vd: 28px; } /* depth of a wall tile, same on all four sides */
.ring { flex: 1; min-height: 0; display: grid; gap: 8px; transform-style: preserve-3d;
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "wt wt wt" "wl inner wr" "wb wb wb"; }
.inner { grid-area: inner; display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; position: relative; transform-style: preserve-3d; }
.wall { display: grid; transform-style: preserve-3d; }
.w-top, .w-bottom { grid-template-columns: repeat(var(--stacks, 19), var(--wall-col, 1fr)); grid-template-rows: var(--wd); width: min(100%, calc(var(--wall-col, 26px) * var(--stacks, 19))); margin: 0 auto; }
.w-top { grid-area: wt; } .w-bottom { grid-area: wb; }
.w-left, .w-right { grid-template-rows: repeat(var(--stacks, 19), 1fr); grid-template-columns: var(--vd); }
.w-left { grid-area: wl; } .w-right { grid-area: wr; }
.stack { position: relative; display: block; transform-style: preserve-3d; --sh: calc(var(--wd) * 1.05); margin: 0 .5px; }
.w-left .stack, .w-right .stack { margin: .5px 0; --sh: calc(var(--vd) * 1.1); }
.stack.n1 { --sh: calc(var(--wd) * .525); } .w-left .stack.n1, .w-right .stack.n1 { --sh: calc(var(--vd) * .55); }
.stack .f { position: absolute; display: block; }
.stack .top { inset: 0; transform: translateZ(var(--sh)); border-radius: 2px;
  background: linear-gradient(135deg, #ffffff22 25%, transparent 25% 50%, #ffffff22 50% 75%, transparent 75%) 0 0 / 6px 6px, linear-gradient(var(--back-hi, #3aae82), var(--back-lo, #247c58));
  box-shadow: inset 0 0 0 1px var(--back-edge-dark, #145a40); } /* wall tops follow the chosen tile back, like every other back */
.stack .south { left: 0; bottom: 0; width: 100%; height: var(--sh); transform-origin: 50% 100%; transform: rotateX(-90deg); background: linear-gradient(#f1e6c4 0 46%, #9b8b60 46% 54%, #e3d3a6 54%); }
.stack.n1 .south { background: #e9dcb8; }
.stack .east { right: 0; top: 0; width: var(--sh); height: 100%; transform-origin: 100% 50%; transform: rotateY(90deg); background: linear-gradient(90deg, #d8c895, #efe3c0); }
.stack .west { left: 0; top: 0; width: var(--sh); height: 100%; transform-origin: 0 50%; transform: rotateY(-90deg); background: linear-gradient(270deg, #d8c895, #efe3c0); }
.w-top .east, .w-top .west, .w-bottom .east, .w-bottom .west { display: none; }
.w-left .west, .w-right .east { display: none; }
.stack::before { content: ''; position: absolute; inset: -1px; box-shadow: 0 0 4px 1px #000a; border-radius: 2px; } /* contact shadow */

/* ---------- dice ---------- */
.dice-mini { display: flex; gap: 16px; align-items: center; padding: 0 8px; transform-style: preserve-3d; }
.pips { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); }
.pips i { display: block; width: 100%; height: 100%; }
.pips i.on::after { content: ''; display: block; width: 78%; height: 78%; margin: 11%; border-radius: 50%; background: #1d2433; }
.dice-mini .pips i.on:nth-child(5)::after { background: #c5282f; }
.dice-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: #000a; cursor: pointer; animation: fadein .25s; }
.dice-overlay.out { opacity: 0; transition: opacity .5s; pointer-events: none; }
.dice-box { text-align: center; }
.dice-title { font: 700 1.4rem Georgia, serif; color: var(--gold); text-shadow: 0 2px 6px #000; margin: 0 0 24px; }
.dice-row { display: flex; gap: 56px; justify-content: center; perspective: 800px; perspective-origin: 50% 40%; height: 130px; align-items: center; }
.die-wrap { --ds: 72px; width: var(--ds); height: var(--ds); transform-style: preserve-3d; animation: dicehop 1.5s cubic-bezier(.3, .7, .4, 1) both; animation-delay: var(--d); }
.die3d { position: relative; width: var(--ds); height: var(--ds); transform-style: preserve-3d; transform: rotateX(var(--fx)) rotateY(var(--fy)) rotateZ(0deg); animation: dicespin 1.5s cubic-bezier(.2, .8, .3, 1) both; animation-delay: var(--d); }
.dface { position: absolute; inset: 0; border-radius: calc(var(--ds) * .17); padding: calc(var(--ds) * .15); background: linear-gradient(145deg, #fff, #ddd2b4); box-shadow: inset 0 0 8px #0003; backface-visibility: hidden; }
.dface .pips { width: 100%; height: 100%; }
.dface .pips i.on::after { background: #1d2433; } .dface.f1 .pips i.on::after { background: #c5282f; width: 100%; height: 100%; margin: 0; }
.dface .pips i.on::after { box-shadow: inset 0 2px 3px #0006; }
.f1 { transform: translateZ(calc(var(--ds) / 2)); } .f6 { transform: rotateY(180deg) translateZ(calc(var(--ds) / 2)); }
.f2 { transform: rotateY(90deg) translateZ(calc(var(--ds) / 2)); } .f5 { transform: rotateY(-90deg) translateZ(calc(var(--ds) / 2)); }
.f3 { transform: rotateX(90deg) translateZ(calc(var(--ds) / 2)); } .f4 { transform: rotateX(-90deg) translateZ(calc(var(--ds) / 2)); }
.dice-row.gl { height: 200px; perspective: none; }
.dice-row.gl canvas { max-width: 92vw; height: auto; }
.dice-caption { color: #fff; font-size: 1.15rem; margin: 26px 0 6px; opacity: 0; animation: fadein .4s 1.7s forwards; }
.dice-box .muted { opacity: .8; }
@keyframes dicespin {
  from { transform: rotateX(calc(var(--fx) + 900deg)) rotateY(calc(var(--fy) + 720deg)) rotateZ(260deg); }
  to { transform: rotateX(var(--fx)) rotateY(var(--fy)) rotateZ(0deg); }
}
@keyframes dicehop { 0% { transform: translateY(-160px) scale(1.4); } 40% { transform: translateY(0) scale(1); } 55% { transform: translateY(-34px); } 70% { transform: translateY(0); } 82% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .die3d, .die-wrap { animation: none !important; } .dice-caption { animation: none; opacity: 1; } }

/* ---------- inline tiles inside sentences ---------- */
.tile.inline { --tile-w: 22px; padding: 1px; border-radius: 4px; vertical-align: middle; margin: 0 4px; box-shadow: inset 0 1px 0 #fff, 0 2px 0 var(--back-edge, var(--jade-dark)), 0 3px 3px #0008; }
.status strong .tile.inline { --tile-w: 26px; }
.btn .tile.inline { --tile-w: 20px; }

/* ---------- 3D lying tile (discards, called tile) ---------- */
.tile3d { --tw: clamp(26px, 3.1vw, 40px); --tt: calc(var(--tw) * .78); position: relative; display: inline-block; flex: none;
  width: var(--tw); height: calc(var(--tw) * 1.34); transform-style: preserve-3d; }
.claimbox .tile3d.big { --tw: clamp(34px, 4vw, 48px); }
.topline { display: flex; gap: 14px; align-items: center; transform-style: preserve-3d;
  /* reserve the height of the claim box, so the discard pile below never jumps when a claim window opens or closes */
  min-height: calc(clamp(34px, 4vw, 48px) * 1.34 + 22px); }
/* discards are the same tiles as the racks and shown sets, so the biggest size is a rack tile; fitPile() sets --ps to the largest scale that fits */
.pile .tile3d { --tw: calc(var(--bw) * var(--ps, 1.3)); }
.pile.tight { gap: 4px 3px; }
.tile3d::before { content: ''; position: absolute; inset: 0; border-radius: 5px; box-shadow: 0 0 7px 3px #000b; } /* contact shadow on the felt */
.t3-top { position: absolute; inset: 0; transform: translateZ(var(--tt)); border-radius: 6px; padding: 8% 8% 10%;
  background: linear-gradient(155deg, var(--paper-hi, #fffef6) 0%, var(--paper-mid, #f6edd2) 55%, var(--paper-lo, #e9dcb6) 100%);
  box-shadow: inset 0 0 0 1px var(--paper-outline, #d9cca3), inset 0 1px 0 #fff, inset 0 -2px 4px #b9a97a55; }
.t3-top .art { display: block; width: 100%; height: 100%; } .t3-top .art svg { width: 100%; height: 100%; display: block; }
.tile3d i { position: absolute; display: block; }
.t3-s { left: 0; bottom: 0; width: 100%; height: var(--tt); transform-origin: 50% 100%; transform: rotateX(-90deg);
  background: linear-gradient(#f4ead0 0 36%, #d9caa0 36% 40%, var(--back-hi, #34a67b) 40%, var(--back-lo, #1f7a58)); border-radius: 0 0 5px 5px; }
.t3-e { right: 0; top: 0; width: var(--tt); height: 100%; transform-origin: 100% 50%; transform: rotateY(90deg);
  background: linear-gradient(90deg, #f1e6c4 0 36%, #d9caa0 36% 40%, var(--back-base, #2a9068) 40%, var(--back-edge, #1b6a4c)); }
.t3-w { left: 0; top: 0; width: var(--tt); height: 100%; transform-origin: 0 50%; transform: rotateY(-90deg);
  background: linear-gradient(270deg, #f1e6c4 0 36%, #d9caa0 36% 40%, var(--back-base, #2a9068) 40%, var(--back-edge, #1b6a4c)); }

/* ---------- hand drag & drop ---------- */
.btn.small { padding: 1px 10px; font-size: .78rem; box-shadow: none; border-radius: 8px; }
.seat.me .rack button.tile { touch-action: none; user-select: none; -webkit-user-drag: none; }
.tile.ph { opacity: .25; transform: none !important; }
.tile.ghost { position: fixed; z-index: 60; pointer-events: none; margin: 0; opacity: .96; transform: scale(1.1) rotate(-4deg) !important;
  box-shadow: inset 0 1px 0 #fff, 0 6px 0 var(--back-edge, var(--jade-dark)), 0 18px 22px #000b; }

/* ---------- tile style picker ---------- */
.looks { border: 0; padding: 0; margin: 0 0 14px; }
.looks legend { font-weight: 700; margin-bottom: 8px; }
.look-row { display: flex; flex-wrap: wrap; gap: 10px; }
.look-opt { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px; border-radius: 10px; border: 2px solid #0002; cursor: pointer; font-size: .85rem; min-width: 76px; }
.look-opt.on { border-color: var(--gold, #e3b341); background: #e3b34122; }
.look-opt:focus-visible { outline: 3px solid var(--gold, #e3b341); outline-offset: 2px; }
.sample-face, .sample-back { display: block; width: 36px; height: 48px; border-radius: 6px; padding: 3px; box-sizing: border-box; }
.sample-face .art, .sample-face .art svg { display: block; width: 100%; height: 100%; }

/* resting dice on the table: small real cubes, tilted so three faces show */
.die-wrap.still { --ds: 21px; animation: none; margin: 0 3px; } /* a die is about two thirds the width of a tile */
.die-wrap.still .die3d { animation: none; transform: rotateZ(var(--rz, 14deg)) rotateX(var(--fx)) rotateY(var(--fy)); }
.dice-mini .die-wrap.still:nth-child(2) { --rz: -22deg; }
.die-wrap.still .dface { box-shadow: inset 0 0 4px #0004; backface-visibility: visible; }

/* ---------- hint: suggested discard ---------- */
.tile.suggest { box-shadow: inset 0 1px 0 #fff, 0 0 0 3px #7dffb0, 0 0 18px 6px #5dffa0aa, 0 4px 0 var(--back-edge, var(--jade-dark)), 0 9px 9px #0009; animation: suggestglow 1.4s ease-in-out infinite; }
.tile.suggest::before { content: 'discard?'; position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font: 700 11px/1 system-ui, sans-serif; color: #052e16; background: #7dffb0; padding: 3px 6px; border-radius: 8px; white-space: nowrap; pointer-events: none; }
.tile.sel.suggest { box-shadow: inset 0 1px 0 #fff, 0 0 0 3px var(--gold), 0 0 18px 6px #5dffa0aa, 0 14px 14px #000a; }
@keyframes suggestglow { 50% { box-shadow: inset 0 1px 0 #fff, 0 0 0 3px #7dffb0, 0 0 30px 12px #5dffa0cc, 0 4px 0 var(--back-edge, var(--jade-dark)), 0 9px 9px #0009; } }
@media (prefers-reduced-motion: reduce) { .tile.suggest { animation: none; } }
.suggest-note .tile.inline { vertical-align: middle; }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 0; border-bottom: 1px solid #0002; margin-bottom: 8px; }
.set-row .muted { font-size: .85rem; color: #4a4a4a; }

/* ---------- standings and tracking ---------- */
.table.nostand { grid-template-areas: "status" "stage" "me" "bar" "log"; grid-template-rows: auto auto auto auto auto; }
.standings { grid-area: standings; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.standings .chip.me { outline: 2px solid var(--gold); }
.look-opt.track { align-items: flex-start; text-align: left; max-width: 170px; }
.look-opt.track span { font-size: .78rem; color: #4a4a4a; }
.next-hand { font-weight: 600; }
dialog .muted { color: #4a4a4a; }

/* player profile */
.profile-card { display: flex; align-items: center; gap: 12px; }
.profile-card .grow { flex: 1; min-width: 0; }
.avatar-box { width: 48px; height: 60px; display: grid; place-items: center; border-radius: 10px; background: #0a2b20; color: #e3b341; font-weight: 800; font-size: 1.4rem; --tile-w: 36px; }
.avatar-mini { display: inline-flex; vertical-align: middle; margin-right: 6px; --tile-w: 18px; }
dialog.profile-dlg { max-width: min(560px, 94vw); max-height: 92vh; overflow: auto; }
dialog.profile-dlg table { width: 100%; border-collapse: collapse; }
dialog.profile-dlg td { padding: 5px 4px; border-bottom: 1px solid #ffffff22; }
dialog.profile-dlg td:last-child { text-align: right; }
dialog.profile-dlg .look-opt { padding: 6px; --tile-w: 34px; }

dialog.card-dlg { max-width: min(640px, 94vw); max-height: 92vh; overflow: auto; }
dialog.card-dlg .card { max-height: none; }

/* 3D table: the canvas fills the stage; names and info float over it */
.stage-row { grid-area: stage; display: grid; grid-template-columns: 132px minmax(0, 1fr) 132px; gap: 8px; align-items: center; }
.stage3d { position: relative; width: 100%; max-width: 1100px; aspect-ratio: 1.35; margin: 0 auto 4px; justify-self: center; }
.stage3d .scene { position: absolute; inset: 0; }
.stage3d .seat { background: #0a2b20cc; border-radius: 10px; padding: 4px 8px; }
.stage3d .s3-top { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.stage3d .s3-info { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rack.hidden3d { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; }

/* action buttons sit on the table's near rim */
.stage3d { --rim-y: 92%; }
.me-actions .btn { padding: 7px 20px 9px; border-radius: 10px; border: 0; font-weight: 700; color: #3a2a08; position: relative; top: 0;
  background: linear-gradient(180deg, #ffe9a0 0%, #f0c04a 55%, #d9a22e 100%);
  box-shadow: inset 0 1px 0 #fff9, inset 0 -2px 0 #0000001f, 0 5px 0 #8a5f0e, 0 7px 0 #4b300a, 0 11px 10px #0009; transition: top .06s, box-shadow .06s; }
.me-actions .btn.secondary { color: #2a2a22; background: linear-gradient(180deg, #fffdf2 0%, #f1e8cb 55%, #d9cca6 100%); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 #0000001a, 0 5px 0 #8c7d52, 0 7px 0 #4d4328, 0 11px 10px #0009; }
.me-actions .btn.ghost { color: #f3ead2; background: linear-gradient(180deg, #7b5a3a 0%, #5d412a 60%, #4a3220 100%); box-shadow: inset 0 1px 0 #ffffff30, inset 0 -2px 0 #0000002a, 0 5px 0 #2d1d10, 0 7px 0 #170e07, 0 11px 10px #0009; }
.me-actions .btn:hover:not(:disabled) { filter: brightness(1.07); }
.me-actions .btn:active:not(:disabled) { top: 4px; box-shadow: inset 0 1px 0 #fff6, 0 1px 0 #4b300a, 0 3px 4px #0009; }
.me-actions .btn:disabled { opacity: .55; filter: grayscale(.4); }
.bar:empty { display: none; }

.rim-actions { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* the player's own name row floats over the table's near corner; shown sets and hand are on the table itself */
.table:has(.stage3d) .seat.me { justify-self: center; width: fit-content; max-width: 100%; background: #0a2b20cc; border: 2px solid transparent; box-shadow: none; padding: 4px 10px; margin: 0; }
.table:has(.stage3d) .seat.me.turn { border-color: var(--gold); box-shadow: 0 0 16px #f5c04a88; }
.table:has(.stage3d) .seat.me h2 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.table:has(.stage3d) { grid-template-areas: "status" "standings" "stage" "me" "bar" "log"; grid-template-rows: auto auto auto auto auto auto; }
.table.nostand:has(.stage3d) { grid-template-areas: "status" "stage" "me" "bar" "log"; grid-template-rows: auto auto auto auto auto; }
.table:has(.stage3d) { align-content: start; }
.dice-badge { display: inline-flex; gap: 10px; padding: 0 6px; vertical-align: middle; }

/* the two side players sit beside the canvas, not on it, with their details stacked */
.s3-side .seat { text-align: center; padding: 8px 6px; }
.s3-side .seat h2 { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 1rem; margin: 0; }
.s3-side .seat h2 .chip { margin: 0; }
.s3-side .dice-badge { flex-direction: column; gap: 8px; padding: 4px 0; }

/* what was just discarded sits on the table rim, level with the action buttons, where the eye already is */
/* what was just discarded sits to the right of the player's own name row, which stays centred */
/* the notice sits to the right of the player's name card; both are the same fixed height */
.claim-chip { position: absolute; right: calc(100% + 14px); top: -2px; height: 56px; box-sizing: border-box; width: 250px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; background: #0a2b20e6; border: 2px solid var(--gold); border-radius: 10px; font-size: .9rem; white-space: nowrap; z-index: 2; }
.claim-chip.idle { border-color: #ffffff22; color: #ffffff88; justify-content: center; }
.claim-chip .tile3d { --tw: 26px; }
/* turn log: between the message box and the card reference, numbered by turn, newest first */
.turnlog { grid-area: log; max-height: 190px; overflow-y: auto; font-size: .85rem; background: #0a2b20cc; border-radius: 10px; padding: 6px 12px; text-align: left; }
.turnlog ol { list-style: none; margin: 0; padding: 0; }
.turnlog li { display: flex; gap: 10px; padding: 3px 0; border-bottom: 1px solid #ffffff14; align-items: center; white-space: nowrap; }
.turnlog .tile.inline { --tile-w: 18px; margin: 0 0 0 4px; }
.turnlog .tn { flex: 0 0 30px; text-align: right; color: #e3b341; font-weight: 700; }
.s3-side { position: relative; align-self: center; }
/* all three opponent cards share one background */
.s3-side .seat { background: #0a2b20cc; border-radius: 10px; }

/* table and background choices are pictures: a little table seen from the player's seat, and the backdrop itself */
.sample-table { display: block; position: relative; width: 84px; height: 56px; perspective: 120px; }
.sample-table i { position: absolute; inset: 4px 2px 0; background: var(--felt); border: 7px solid var(--rim); border-radius: 3px; transform: rotateX(38deg); transform-origin: 50% 100%; box-shadow: 0 3px 4px #0006, inset 0 0 0 1px #0003; }
.sample-bg { display: block; width: 84px; height: 56px; border-radius: 8px; box-shadow: inset 0 0 0 1px #0008; }

.icon-row { display: flex; gap: 8px; }
.btn.icon-btn { width: 42px; height: 42px; padding: 0; display: inline-grid; place-items: center; border-radius: 12px; }
.btn.icon-btn svg { display: block; }

.breakdown { list-style: none; margin: 8px 0; padding: 0; max-width: 420px; }
.breakdown li { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; border-bottom: 1px solid #0002; }
.variant-row { margin: 6px 0; }
.variant-row .look-opt { color: #f4f1e6; background: #0a2b2066; border-color: #ffffff30; align-items: flex-start; text-align: left; max-width: 190px; }
.variant-row .look-opt span { color: #cfe3d6; font-size: .8rem; }
.variant-row .look-opt.on { border-color: var(--gold); background: #e3b34133; }

.table:has(.stage3d) .seat.me { height: 56px; display: flex; align-items: center; }
.table:has(.stage3d) .seat.me h2 { white-space: nowrap; }
/* side player cards: one fixed size whatever chips they show; the avatar is a small tile */
.s3-side .seat { width: 124px; height: 156px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; }
.s3-side .seat h2 { width: 100%; }
.s3-side .seat h2 > .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-mini .tile, .avatar-mini .tile.small { --tile-w: 22px; }
.s3-side .avatar-mini { margin: 0; }

/* the buttons sit to the right of the name card, the discard notice to the left */
.me-actions { position: absolute; left: calc(100% + 14px); top: -2px; height: 56px; width: 300px; display: flex; flex-wrap: wrap; align-content: center; gap: 6px 8px; z-index: 2; }
.me-actions .btn { padding: 4px 12px 6px; font-size: .85rem; box-shadow: inset 0 1px 0 #fff9, inset 0 -2px 0 #0000001f, 0 3px 0 #8a5f0e, 0 5px 0 #4b300a, 0 7px 8px #0009; }
.me-actions .btn.secondary { box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 #0000001a, 0 3px 0 #8c7d52, 0 5px 0 #4d4328, 0 7px 8px #0009; }
.me-actions .btn.ghost { box-shadow: inset 0 1px 0 #ffffff30, inset 0 -2px 0 #0000002a, 0 3px 0 #2d1d10, 0 5px 0 #170e07, 0 7px 8px #0009; }
.me-actions .tile.inline { --tile-w: 18px; }

/* example winning hands in the rules reference */
.card.with-examples li { margin: 10px 0; }
.card.with-examples { max-height: none; }
.ex { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; }
.ex-set { display: inline-flex; gap: 1px; padding: 3px; border-radius: 6px; background: #0001; }
.ex-set.claimed { background: #e3b34133; box-shadow: inset 0 0 0 1px #e3b341; }
.ex .tile, .ex .tile.small { --tile-w: 26px; padding: 1px 1px 3px; border-radius: 4px; }

.variant-chip { background: var(--gold); color: #2a1a06; font-weight: 700; }
.room-rules { padding: 10px 12px; border-radius: 10px; background: #0a2b2066; border: 1px solid #ffffff30; }

/* the player across sits above the table */
.stage-wrap { grid-area: stage; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stage-wrap .stage-row { width: 100%; grid-area: auto; }
.stage-wrap .s3-top { position: static; transform: none; }

/* one long bar under the table: last discard | player card | action buttons */
.table:has(.stage3d) .seat.me { display: flex; align-items: stretch; width: min(100%, 1040px); max-width: 100%; height: 56px; padding: 0; margin: 0 auto; justify-self: center; background: #0a2b20e6; border: 2px solid transparent; border-radius: 12px; overflow: visible; }
.table:has(.stage3d) .seat.me.turn { border-color: var(--gold); }
.table:has(.stage3d) .seat.me h2 { order: 2; flex: 1 1 auto; justify-content: center; align-items: center; flex-wrap: nowrap; padding: 0 10px; }
.table:has(.stage3d) .seat.me .claim-chip { order: 1; position: static; transform: none; flex: 0 0 250px; width: 250px; height: auto; border: 0; border-right: 1px solid #ffffff2a; border-radius: 0; background: transparent; }
.table:has(.stage3d) .seat.me .claim-chip.idle { color: #ffffff77; }
.table:has(.stage3d) .seat.me .me-actions { order: 3; position: static; flex: 0 0 310px; width: 310px; height: auto; padding: 0 10px; border-left: 1px solid #ffffff2a; justify-content: flex-end; }

/* the action area takes whatever room is left and wraps to two compact rows, so any number of calls stays inside the bar */
.table:has(.stage3d) .seat.me .claim-chip { flex: 0 0 220px; width: 220px; }
.table:has(.stage3d) .seat.me h2 { flex: 0 1 auto; }
.table:has(.stage3d) .seat.me .me-actions { flex: 1 1 0; width: auto; min-width: 0; padding: 3px 10px; gap: 4px 6px; align-content: center; justify-content: center; overflow: hidden; }
.me-actions .btn { font-size: .8rem; padding: 2px 10px 4px; line-height: 1.25; box-shadow: inset 0 1px 0 #fff9, inset 0 -2px 0 #0000001f, 0 2px 0 #8a5f0e, 0 3px 0 #4b300a, 0 4px 5px #0009; }
.me-actions .btn.secondary { box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 #0000001a, 0 2px 0 #8c7d52, 0 3px 0 #4d4328, 0 4px 5px #0009; }
.me-actions .btn.ghost { box-shadow: inset 0 1px 0 #ffffff30, inset 0 -2px 0 #0000002a, 0 2px 0 #2d1d10, 0 3px 0 #170e07, 0 4px 5px #0009; }
.me-actions .tile.inline { --tile-w: 15px; margin: 0 0 0 3px; }
/* normally 56px; grows (all three parts together) only when there are more calls than fit in two rows */
.table:has(.stage3d) .seat.me { height: auto; min-height: 56px; }
.table:has(.stage3d) .seat.me .me-actions { overflow: visible; }

.table:has(.stage3d) .seat.me .me-actions { justify-content: center; text-align: center; }

.room-chip { border: 1px solid #ffffff44; background: #00000040; color: inherit; font: inherit; cursor: pointer; margin-left: 6px; }

/* title bar: the middle stays put whatever the action message on the left says */
.status { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.status > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; justify-self: start; }
.status > :last-child { justify-self: end; }
.status > .game-info { text-align: center; white-space: nowrap; }

/* match history, replay viewer, leaderboards */
dialog.hist-dlg, dialog.board-dlg { max-width: min(640px, 94vw); max-height: 92vh; overflow: auto; }
.hist-list { list-style: none; padding: 0; margin: 0 0 10px; }
.hist-list li { padding: 8px 0; border-bottom: 1px solid #0002; display: grid; gap: 2px; }
table.board { width: 100%; border-collapse: collapse; margin-top: 10px; }
table.board th, table.board td { padding: 5px 6px; border-bottom: 1px solid #0002; text-align: left; }
.check-row { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0; }
dialog.replay-dlg { max-width: min(980px, 96vw); max-height: 94vh; overflow: auto; }
.replay-seats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.replay-seat { border: 2px solid #0002; border-radius: 10px; padding: 6px 8px; }
.replay-seat.acting { border-color: var(--gold); background: #e3b34122; }
.replay-seat h3 { margin: 0 0 4px; font-size: .9rem; }
.replay-hand, .replay-pile { display: flex; flex-wrap: wrap; gap: 2px; }
.replay-pile { margin: 8px 0 2px; padding: 6px; background: #0a2b2018; border-radius: 8px; min-height: 36px; }
.replay-hand .tile, .replay-pile .tile, .replay-sets .tile { --tile-w: 24px; }
.replay-controls { align-items: center; gap: 6px; flex-wrap: wrap; }
.replay-controls input[type=range] { flex: 1; min-width: 120px; }
.replay-step { margin: 6px 0; }

.chat-dlg .phrases { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chat-note { color: var(--gold); font-weight: 600; }

.fr-list { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; }
.fr-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fr-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.fr-code { font: 700 1.1rem/1 ui-monospace, monospace; letter-spacing: .12em; }
.invite-banner { position: fixed; z-index: 50; left: 50%; top: 12px; transform: translateX(-50%); max-width: min(92vw, 560px); background: #123d2c; border: 2px solid var(--gold); border-radius: 12px; padding: 10px 14px; box-shadow: 0 8px 30px #000a; }

.coach-tip { flex-basis: 100%; color: #f6e7b4; font-style: italic; }

/* Round close button in a dialog's upper right corner. */
.dlg-x { position: sticky; top: 0; float: right; margin: -6px -6px 0 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.08); color: inherit; font-size: 24px; line-height: 1; cursor: pointer; z-index: 1; }
.dlg-x:hover, .dlg-x:focus-visible { background: rgba(0, 0, 0, 0.2); }

.chip.call-dead { cursor: pointer; background: transparent; border: 1px dashed #d8d2b8; color: #d8d2b8; font: inherit; font-size: 0.8rem; padding: 1px 8px; border-radius: 999px; }
.chip.call-dead:hover, .chip.call-dead:focus-visible { background: rgba(255, 255, 255, 0.15); }

dialog.account-dlg { max-width: min(460px, 94vw); max-height: 92vh; overflow: auto; }
.account-form { display: grid; gap: 6px; }
.account-form input { width: 100%; padding: 8px 10px; font: inherit; border-radius: 8px; border: 1px solid #00000044; box-sizing: border-box; }
.recovery-code { font-family: ui-monospace, Menlo, monospace; font-size: 1.4rem; letter-spacing: 0.08em; text-align: center; padding: 12px; border: 2px dashed currentColor; border-radius: 10px; user-select: all; }
dialog.account-dlg .row { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
dialog.account-dlg h3 { margin: 4px 0 6px; }
dialog.account-dlg p { margin: 10px 0; }

/* lobby: top nav, play card, pills */
.lobby { padding-top: 3vh; }
.lobby-nav { display: flex; align-items: center; gap: 12px; }
.lobby-nav .brand { font-size: 1.5rem; font-weight: 800; color: var(--gold); text-shadow: 0 2px 0 #5b3a08; }
.lobby-nav .tabs { display: flex; gap: 4px; flex: 1; justify-content: center; flex-wrap: wrap; }
.lobby-nav .tab { all: unset; box-sizing: border-box; cursor: pointer; padding: 8px 14px; border-radius: 10px; font-weight: 700; color: #cfe3d6; border-bottom: 3px solid transparent; }
.lobby-nav .tab:hover { background: #ffffff14; }
.lobby-nav .tab.on { color: var(--gold); border-bottom-color: var(--gold); }
.lobby-nav .tab:focus-visible, .lobby-nav .nav-avatar:focus-visible, .pill:focus-visible, .card-tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.lobby-nav .nav-avatar { all: unset; cursor: pointer; border-radius: 10px; }
.lobby .muted.left { text-align: left; }
.lobby .muted.small { font-size: .8rem; }
.tab-title { margin: 6px 0 0; font-size: 1.8rem; }
.play-card { display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: var(--panel, #14513c); border: 1px solid var(--gold); color: #f4f1e6; }
.section-label { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9db8ac; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pill { all: unset; box-sizing: border-box; cursor: pointer; padding: 10px 16px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 22px; border: 1.5px solid #ffffff30; background: #0a2b2066; color: #f4f1e6; font-weight: 700; }
.pill.small { min-height: 36px; padding: 6px 14px; font-weight: 600; }
.pill:hover { border-color: #ffffff70; }
.pill.on { background: var(--gold); border-color: var(--gold); color: #2a1a06; }
.btn.play-big { font-size: 1.2rem; padding: 16px; width: 100%; }
.row.two > * { flex: 1; }
.card-tile { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 2px; padding: 14px; min-height: 72px; align-content: center; border-radius: 14px; background: var(--panel, #14513c); border: 1px solid #ffffff24; color: #f4f1e6; }
.card-tile:hover { border-color: var(--gold); }
.card-tile span { color: #9db8ac; font-size: .9rem; }
.card-tile span.gold { color: var(--gold); font-weight: 700; }

/* the canvas takes the whole width: the other players' cards float over its corners */
.stage-wrap { display: block; }
.stage-wrap .stage3d { max-width: min(1240px, calc((100vh - 130px) * 1.35)); }
.stage-wrap .stage3d .s3-top { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 2; }
.stage-wrap .stage3d .s3-side { position: absolute; top: 4px; z-index: 2; align-self: auto; }
.stage-wrap .stage3d .s3-left { left: 4px; }
.stage-wrap .stage3d .s3-right { right: 4px; }
.stage-wrap .stage3d .s3-side .seat { width: 112px; height: auto; min-height: 0; padding: 6px; }

/* inline text that opens something */
.link-btn { all: unset; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.link-btn:hover { color: var(--gold); text-decoration-style: solid; }
.link-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* activity log and chat, side by side under the table */
.log-split { grid-area: log; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: stretch; }
.log-split .turnlog { grid-area: auto; height: 220px; max-height: 220px; }
.chatbox { display: flex; flex-direction: column; height: 220px; background: rgba(22, 20, 26, 0.78); border-radius: 10px; padding: 6px 10px 8px; min-width: 0; }
.chat-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; overflow-y: auto; font-size: .85rem; text-align: left; }
.chat-list li { padding: 3px 0; overflow-wrap: anywhere; }
.chat-list li strong { color: #e3b341; }
.chat-list li.mine strong { color: #a9c8f0; }
.chat-list li.chat-empty { color: #a7a3b0; }
.chat-form { display: flex; gap: 6px; margin-top: 6px; }
.chat-input { flex: 1 1 auto; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid #0008; background: #fffdf3; color: #1d1d1d; font: inherit; }
.chat-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
@media (max-width: 720px) { .log-split { grid-template-columns: 1fr; } .log-split .turnlog, .chatbox { height: 180px; max-height: 180px; } }
.status .chat-note { display: inline-block; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* voice chat: the microphone button is lit while joined, and the mute button while muted */
.btn.icon-btn.on { background: #2f9e6b; border-color: #2f9e6b; color: #fff; }
.chip.talking { background: #2f9e6b; color: #fff; animation: talk-pulse 1s ease-in-out infinite; }
.btn.icon-btn.on.talking { box-shadow: 0 0 0 3px #7be3b3aa; }
@keyframes talk-pulse { 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .chip.talking { animation: none; } }
.btn.icon-btn.off-air { background: #b33a3a; border-color: #b33a3a; color: #fff; }