/* ================= Color Clash ================= */

.cc-wrap { flex: 1; display: grid; place-items: center; min-height: 0; padding-bottom: 8px; }
.cc-board {
  --gap: clamp(3px, 1.1vw, 5px);
  --felt: #155e57;
  --u: calc(100cqw / var(--w) / 20); /* a twentieth of a cell */
  container-type: inline-size;
  position: relative;
  width: min(100%, calc(100dvh - 262px - var(--safe-top) - var(--safe-bottom)));
  aspect-ratio: 1;
  display: grid; gap: var(--gap); padding: var(--gap);
  border-radius: 18px;
  background: #0b3a37;
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 3px var(--turn, transparent), 0 7px 0 3px var(--ink);
  transition: box-shadow .3s;
  touch-action: manipulation;
}
@supports not (height: 100dvh) {
  .cc-board { width: min(100%, calc(100vh - 262px)); }
}
/* empty felt: a recessed square of table cloth */
.cc-cell {
  position: relative; border-radius: 16%;
  background-color: var(--felt);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 5px),
                    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 5px);
  box-shadow: inset 0 max(2px, calc(var(--u) * 1.4)) 0 rgba(0, 0, 0, .3);
}
.cc-board.first-move .cc-cell:not(.owned) { outline: 2px dashed color-mix(in srgb, var(--me) 80%, #fff); outline-offset: -5px; }
.cc-cell.last { box-shadow: inset 0 max(2px, calc(var(--u) * 1.4)) 0 rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(255, 243, 214, .75); }

/* a die: flat face in the owner's color, ink outline, one hard shade band, one light facet, ink pips */
.cc-die {
  --bw: max(2px, calc(var(--u) * 1.15));
  position: absolute; left: 9%; right: 9%; top: 7%; bottom: 11%;
  border-radius: 21%;
  background: var(--c);
  border: var(--bw) solid var(--ink);
  box-shadow: 0 max(2px, var(--u)) 0 var(--ink);
  overflow: hidden;
}
.cc-die.n0 { display: none; }
.cc-cell.popped .cc-die { visibility: hidden; }
.cc-die::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 17%; background: rgba(11, 16, 51, .3); }
.cc-die::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .3); clip-path: polygon(0 0, 44% 0, 0 44%); }
.cc-die i {
  position: absolute; z-index: 1; width: 22%; aspect-ratio: 1; border-radius: 50%;
  background: var(--ink); transform: translate(-50%, -50%);
}
.cc-die.n1 i { left: 50%; top: 47%; width: 27%; }
.cc-die.n2 i:nth-of-type(1), .cc-die.n3 i:nth-of-type(1) { left: 74%; top: 25%; }
.cc-die.n2 i:nth-of-type(2), .cc-die.n3 i:nth-of-type(3) { left: 26%; top: 70%; }
.cc-die.n3 i:nth-of-type(2) { left: 50%; top: 47%; }
.cc-die.n4 i:nth-of-type(1), .cc-die.n5 i:nth-of-type(1), .cc-die.n6 i:nth-of-type(1) { left: 26%; top: 25%; }
.cc-die.n4 i:nth-of-type(2), .cc-die.n5 i:nth-of-type(2), .cc-die.n6 i:nth-of-type(2) { left: 74%; top: 25%; }
.cc-die.n4 i:nth-of-type(3), .cc-die.n5 i:nth-of-type(3), .cc-die.n6 i:nth-of-type(3) { left: 26%; top: 70%; }
.cc-die.n4 i:nth-of-type(4), .cc-die.n5 i:nth-of-type(4), .cc-die.n6 i:nth-of-type(4) { left: 74%; top: 70%; }
.cc-die.n5 i:nth-of-type(5) { left: 50%; top: 47%; }
.cc-die.n6 i:nth-of-type(5) { left: 26%; top: 47%; }
.cc-die.n6 i:nth-of-type(6) { left: 74%; top: 47%; }
/* the owner's corner mark (only shown when two colors in play look alike) */
.cc-mark { position: absolute; z-index: 1; left: 5%; top: 4%; width: 31%; aspect-ratio: 1; line-height: 0; }
.cc-mark svg { width: 100%; height: 100%; }

/* one pip from bursting: the die trembles, its pips throb and a hot marigold ring sits round it */
.cc-cell.crit .cc-die {
  box-shadow: 0 0 0 max(2px, var(--u)) var(--accent), 0 max(3px, calc(var(--u) * 2)) 0 max(1px, calc(var(--u) * .5)) var(--ink);
  animation: cc-tremble .42s linear infinite;
}
.cc-cell.crit .cc-die i { animation: cc-throb .84s ease-in-out infinite; }
.cc-cell.crit .cc-die::before { background: rgba(11, 16, 51, .38); }
@keyframes cc-tremble {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-3%, 1%) rotate(-3deg); }
  40% { transform: translate(2%, -2%) rotate(2deg); }
  60% { transform: translate(-2%, 0) rotate(-1.5deg); }
  80% { transform: translate(3%, 1%) rotate(3deg); }
}
@keyframes cc-throb { 50% { transform: translate(-50%, -50%) scale(1.25); } }
.cc-board.over .cc-cell.crit .cc-die, .cc-board.over .cc-cell.crit .cc-die i { animation: none; }
.cc-cell.charging { z-index: 2; }
.cc-cell.charging .cc-die { box-shadow: 0 0 0 max(3px, calc(var(--u) * 1.4)) #fff3d6, 0 max(3px, calc(var(--u) * 2)) 0 max(2px, var(--u)) var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .cc-cell.crit .cc-die, .cc-cell.crit .cc-die i { animation: none; }
  .cc-cell.crit .cc-die i { transform: translate(-50%, -50%) scale(1.15); }
}

/* burst effects */
.cc-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.cc-shard { position: absolute; right: auto; bottom: auto; margin: 0; }
.cc-mini {
  position: absolute; width: calc(100cqw / var(--w) * .34); aspect-ratio: 1; border-radius: 24%;
  background: var(--c); border: max(1.5px, calc(var(--u) * .9)) solid var(--ink);
  box-shadow: 0 max(1.5px, calc(var(--u) * .7)) 0 var(--ink);
}
.cc-mini::after { content: ""; position: absolute; left: 50%; top: 50%; width: 32%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); }
.cc-cell.shake { animation: shake .3s; }

/* the turn player's die in the banner */
.cc-bdie.cc-die {
  position: relative; display: inline-block; vertical-align: -5px; left: auto; top: auto; right: auto; bottom: auto;
  width: 24px; height: 24px; margin-right: 8px; --bw: 2px; border-radius: 6px; box-shadow: 0 2px 0 var(--ink);
}

/* tutorial props */
.tut-cc-cell { width: 17cqw; aspect-ratio: 1; border-radius: 16%; background: #155e57; box-shadow: inset 0 .8cqw 0 rgba(0, 0, 0, .3), 0 0 0 .9cqw #0b3a37; }
.tut-cc-cell.hint { outline: .6cqw dashed #ffd0d1; outline-offset: -1.6cqw; }
.tut-cc-die.cc-die { position: absolute; left: auto; right: auto; top: auto; bottom: auto; width: 13cqw; height: 13cqw; --bw: .8cqw; box-shadow: 0 .8cqw 0 var(--ink); }
.tut-cc-die.hot { box-shadow: 0 0 0 .8cqw var(--accent), 0 1.4cqw 0 .3cqw var(--ink); }
.tut-cc-mini { width: 5.6cqw; aspect-ratio: 1; border-radius: 24%; z-index: 4; background: var(--c); border: .6cqw solid var(--ink); box-shadow: 0 .5cqw 0 var(--ink); }
.tut-cc-mini::after { content: ""; position: absolute; left: 50%; top: 50%; width: 32%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); }

/* ================= Dots & Boxes ================= */

.db-wrap {
  flex: 1; display: grid; place-items: center; min-height: 0;
}
.db-board {
  width: min(100%, calc(100dvh - 250px - var(--safe-top) - var(--safe-bottom)));
  aspect-ratio: 1; border-radius: 22px; background: rgba(0, 0, 0, .28);
  box-shadow: 0 0 0 3px var(--turn, transparent); transition: box-shadow .3s;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
@supports not (height: 100dvh) { .db-board { width: min(100%, calc(100vh - 250px)); } }
.db-line { stroke: rgba(255, 255, 255, .13); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 12; transition: stroke .2s; }
.db-line.drawn { stroke-width: 12; stroke-dasharray: none; }
.db-line.last { animation: db-glow 1.2s ease-in-out infinite; }
@keyframes db-glow { 50% { stroke-width: 17; } }
.db-rubber { stroke-width: 10; stroke-linecap: round; opacity: 0; pointer-events: none; stroke-dasharray: 4 14; }
.db-rubber.on { opacity: .8; }
.db-rubber.snapped { stroke-dasharray: none; opacity: 1; stroke-width: 12; }
.db-dot { fill: #fff; transition: r .15s, fill .15s; pointer-events: none; }
.my-turn .db-dot { r: 12; }
.db-dot.from { r: 17; fill: var(--turn, #fff); stroke: #fff; stroke-width: 4; }
.db-dot.hot { r: 19; fill: #fff; filter: drop-shadow(0 0 6px #fff); }
.db-box .db-stamp { opacity: 0; transform: rotate(-4deg); }
.db-box.on .db-stamp { opacity: 1; }
.db-box .ink { fill: var(--c); opacity: .9; }
.db-box .edge { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 3; stroke-dasharray: 7 5; }
.db-box text { font: 700 42px Fredoka, sans-serif; fill: rgba(255, 255, 255, .92); paint-order: stroke; stroke: rgba(0, 0, 0, .18); stroke-width: 3px; }

/* tutorial props */
.tut-db-dot { width: 4cqw; aspect-ratio: 1; border-radius: 50%; background: #fff; z-index: 3; transition: transform .15s; }
.tut-db-dot.hot { transform: translate(-50%, -50%) scale(1.8); box-shadow: 0 0 2cqw #fff; }
.tut-item.tut-db-line { height: 2.6cqw; border-radius: 2cqw; background: var(--c); transform: translate(0, -50%); z-index: 2; }
.tut-item.tut-db-line.v { width: 2.6cqw; height: auto; transform: translate(-50%, 0); }
.tut-db-stamp { width: 19cqw; aspect-ratio: 1; border-radius: 2.6cqw; background: var(--c); color: #fff; font-weight: 700; font-size: 10cqw; display: grid; place-items: center; box-shadow: inset 0 0 0 1.4cqw var(--c), inset 0 0 0 1.9cqw rgba(255,255,255,.5); z-index: 1; }

/* ================= Fleet Strike ================= */

.fl-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.fl-tabs:empty { display: none; }
.fl-tab {
  flex: none; padding: 8px 14px; border-radius: 12px; background: var(--panel);
  font-weight: 600; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); border-bottom: 3px solid transparent;
}
.fl-tab.on { background: var(--panel2); box-shadow: inset 0 -4px 0 var(--c); }
.fl-main { --cell: calc(min(100vw - 40px, 100dvh - 470px, 440px) / 8); display: flex; flex-direction: column; align-items: center; gap: 6px; }
@supports not (height: 100dvh) { .fl-main { --cell: calc(min(100vw - 40px, 100vh - 470px, 440px) / 8); } }
.fl-label { color: var(--muted); font-weight: 600; font-size: 14px; display: flex; gap: 10px; align-items: baseline; }
.fl-label span { font-size: 12px; opacity: .8; }
.fl-wait { width: 60%; max-width: 240px; margin-top: 20px; animation: fl-bob 3s ease-in-out infinite; }
.fl-wait svg { width: 100%; display: block; }
@keyframes fl-bob { 50% { transform: translateY(-6px) rotate(-1.5deg); } }

/* the sea: water, grid squares (also drop targets), ships, shot markers */
.fl-sea {
  position: relative; width: calc(var(--cell) * 8); height: calc(var(--cell) * 8); flex: none;
  border-radius: 14px; overflow: hidden; touch-action: manipulation;
  background: radial-gradient(ellipse at 30% 15%, #3a9cf0, #1d5fb8 55%, #133a86);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), 0 10px 26px rgba(0, 0, 0, .35);
  transition: box-shadow .25s;
}
.fl-sea.small { --cell: 15px; border-radius: 8px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .12); }
.fl-sea.aim { box-shadow: 0 0 0 3px var(--accent), 0 0 24px rgba(255, 197, 49, .45); }
.fl-water { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fl-water i {
  position: absolute; inset: -10% -60px -10% -60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34'%3E%3Cg fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M4 22 q6 -5 12 0 t12 0' stroke-opacity='.22'/%3E%3Cpath d='M36 8 q5 -4 10 0' stroke-opacity='.16'/%3E%3C/g%3E%3C/svg%3E");
  animation: fl-wave 7s linear infinite;
}
.fl-water i + i { background-position: 30px 17px; opacity: .7; animation-duration: 11s; animation-direction: reverse; }
.fl-sea.small .fl-water i { background-size: 30px 17px; }
@keyframes fl-wave { to { transform: translateX(60px); } }
.fl-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.fl-cell { position: relative; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16); transition: background-color .1s; }
.fl-cell.drop-over { box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16) !important; }
.fl-cell.ok { background: rgba(90, 212, 90, .6); box-shadow: inset 0 0 0 2px rgba(200, 255, 200, .7) !important; }
.fl-cell.bad { background: rgba(255, 90, 95, .65); box-shadow: inset 0 0 0 2px rgba(255, 200, 200, .7) !important; }
.fl-sea.aim .fl-cell { cursor: crosshair; }
.fl-sea.aim .fl-cell:hover { background: rgba(255, 255, 255, .1); }
.fl-sea.aim .fl-cell.press::after, .fl-cell.target::after, .fl-mk.aimed::before {
  content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 2px solid var(--accent);
  background: radial-gradient(circle, var(--accent) 0 9%, transparent 11%);
  box-shadow: 0 0 10px rgba(255, 197, 49, .8); animation: fl-lock .45s ease-in-out infinite alternate;
}
.fl-cell.target::after, .fl-mk.aimed::before { border-color: #ff5a5f; background: radial-gradient(circle, #ff5a5f 0 9%, transparent 11%); box-shadow: 0 0 12px #ff5a5f; }
@keyframes fl-lock { from { transform: scale(1.15); } to { transform: scale(.85); } }
.fl-ships { position: absolute; inset: 0; pointer-events: none; }
.fl-ship { position: absolute; pointer-events: none; }
.fl-art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fl-place .fl-sea:not(.locked) .fl-ship, .fl-dock .fl-ship { pointer-events: auto; cursor: grab; touch-action: none; }
.fl-main.dragging .fl-ship { pointer-events: none !important; }
.fl-ship.drag-src { opacity: .25; }
.fl-ship.nope { filter: drop-shadow(0 0 4px #ff5a5f) drop-shadow(0 0 2px #ff5a5f); }
.fl-art .sh { fill: rgba(0, 10, 40, .38); }
.fl-art .hull { fill: #8e9cb3; stroke: #4a576d; stroke-width: .35; }
.fl-art .deck { fill: #c6d0de; }
.fl-art .plank { stroke: rgba(70, 85, 110, .28); stroke-width: .25; fill: none; }
.fl-art .stripe { fill: var(--sc, #ffc531); }
.fl-art .gleam { stroke: rgba(255, 255, 255, .6); stroke-width: .35; fill: none; stroke-linecap: round; }
.fl-art .tur { fill: #7d8ba0; stroke: #3f4a5c; stroke-width: .35; }
.fl-art .gun { stroke: #3f4a5c; stroke-width: .7; stroke-linecap: round; }
.fl-art .br { fill: #eef2f8; stroke: rgba(40, 50, 70, .4); stroke-width: .3; }
.fl-art .mast { fill: #6d7a90; }
.fl-art .vent { fill: #9aa7bb; stroke: rgba(40, 50, 70, .35); stroke-width: .25; }
.fl-ship.sunk { filter: grayscale(.7) sepia(.25) brightness(.5); }
.fl-ship.sunk::after, .fl-ship.sinking::after {
  content: ""; position: absolute; inset: 6%; border-radius: 40%;
  background: linear-gradient(160deg, rgba(40, 110, 200, .15), rgba(20, 70, 160, .7)); pointer-events: none;
}
.fl-marks { position: absolute; inset: 0; pointer-events: none; }
.fl-mk { position: absolute; width: 12.5%; height: 12.5%; }
.fl-mk::before, .fl-mk::after { content: ""; position: absolute; border-radius: 50%; }
.fl-mk.miss::before { inset: 34%; background: radial-gradient(circle at 35% 30%, #fff, #cfe3ff 70%); box-shadow: 0 0 0 3px rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .4); }
.fl-sea.small .fl-mk.miss::before { box-shadow: none; }
.fl-mk.hit::before {
  inset: 10%; background: radial-gradient(circle, #fff6c2 0 16%, #ffc531 30%, #ff6a3d 55%, rgba(255, 60, 40, 0) 72%);
  animation: fl-flicker .35s ease-in-out infinite alternate;
}
.fl-mk.hit::after { inset: 36%; background: radial-gradient(circle at 35% 30%, #ff8a8a, #d01f36); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
@keyframes fl-flicker { from { transform: scale(.9) rotate(-8deg); opacity: .85; } to { transform: scale(1.08) rotate(8deg); opacity: 1; } }

/* placing: the dock of ships still to go */
.fl-place { --cell: calc(min(100vw - 40px, (100dvh - 300px) / 10.6 * 8, 440px) / 8); display: flex; flex-direction: column; align-items: center; gap: 10px; }
@supports not (height: 100dvh) { .fl-place { --cell: calc(min(100vw - 40px, (100vh - 300px) / 10.6 * 8, 440px) / 8); } }
.fl-dock {
  box-sizing: border-box; width: calc(var(--cell) * 8); min-height: calc(var(--cell) * 2 + 28px);
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-content: center; align-items: center;
  padding: 6px; border-radius: 16px; background: rgba(0, 0, 0, .22); border: 2px dashed rgba(255, 255, 255, .16);
}
.fl-ship.docked { position: relative; width: calc(var(--len) * var(--cell)); height: var(--cell); animation: fl-float 2.6s ease-in-out infinite; }
.fl-ship.docked:nth-child(2n) { animation-delay: -1.3s; }
@keyframes fl-float { 50% { transform: translateY(-2px) rotate(.6deg); } }
.fl-dock-done { color: var(--muted); font-weight: 700; }
.fl-ghost-in { width: 100%; height: 100%; transition: transform .16s cubic-bezier(.2, 1.3, .4, 1); }
.fl-place-btns .fl-rot { flex: none; width: 56px; font-size: 26px; touch-action: none; }
.fl-clock { font-weight: 700; white-space: nowrap; }
.fl-clock.low { color: #b00020; }

/* shots: shell in flight, splash, blast, sinking */
.fl-fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.fl-fx i { position: absolute; left: 0; top: 0; pointer-events: none; }
.fl-fx .fl-shell {
  width: 18px; height: 10px; border-radius: 40% 70% 70% 40% / 50%;
  background: linear-gradient(#7a8597, #2a3140); box-shadow: 0 0 8px 2px rgba(255, 197, 49, .75);
}
.fl-fx .fl-shell::after {
  content: ""; position: absolute; right: 85%; top: 20%; width: 30px; height: 60%; border-radius: 4px;
  background: linear-gradient(to left, rgba(255, 220, 150, .85), rgba(255, 255, 255, 0));
}
.fl-fx .fl-shadow { aspect-ratio: 2 / 1; border-radius: 50%; background: radial-gradient(rgba(0, 0, 30, .65), transparent 70%); }
.fl-fx .fl-ring { aspect-ratio: 1; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .9); box-sizing: border-box; }
.fl-fx .fl-col { aspect-ratio: .55; border-radius: 50% 50% 30% 30%; transform-origin: 50% 100%; background: linear-gradient(to top, rgba(255, 255, 255, .95), rgba(200, 230, 255, .5)); }
.fl-fx .fl-drop { aspect-ratio: 1; border-radius: 50%; background: #e6f3ff; }
.fl-fx .fl-boom { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff8d0 0 14%, #ffc531 30%, #ff6a3d 52%, rgba(255, 60, 40, 0) 70%); }
.fl-fx .fl-smoke { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(60, 60, 72, .85), rgba(60, 60, 72, 0) 70%); }
.fl-fx .fl-spark { aspect-ratio: 1; border-radius: 50%; background: #fff3b0; box-shadow: 0 0 6px 2px #ffc531; }
.fl-fx .fl-bubble { width: 7px; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .85); box-sizing: border-box; }

.fl-foot:empty { display: none; }
.fl-own { display: flex; gap: 14px; align-items: center; background: var(--panel); border-radius: 16px; padding: 10px; }
.fl-own b { font-size: 17px; }

/* tutorial props */
.tut-fl-sea { width: 44cqw; aspect-ratio: 1; border-radius: 2cqw; overflow: hidden; background: radial-gradient(ellipse at 30% 15%, #3a9cf0, #1d5fb8 55%, #133a86);
  background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px), radial-gradient(ellipse at 30% 15%, #3a9cf0, #1d5fb8 55%, #133a86);
  background-size: 16.667% 16.667%, 16.667% 16.667%, 100% 100%; box-shadow: 0 0 0 .8cqw rgba(255,255,255,.12); }
.tut-fl-ship { --sc: #3fa9ff; z-index: 2; }
.tut-fl-cells { width: 7.33cqw; height: 7.33cqw; border-radius: .6cqw; z-index: 1; }
.tut-fl-cells.ok { background: rgba(90, 212, 90, .65); }
.tut-fl-cells.bad { background: rgba(255, 90, 95, .7); }
.tut-fl-shell { width: 4cqw; height: 2.2cqw; border-radius: 40% 70% 70% 40% / 50%; background: linear-gradient(#7a8597, #2a3140); box-shadow: 0 0 2cqw .5cqw rgba(255,197,49,.8); z-index: 4; }
.tut-fl-boom { width: 10cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff8d0 0 14%, #ffc531 30%, #ff6a3d 52%, rgba(255,60,40,0) 70%); z-index: 4; }
.tut-fl-splash { width: 8cqw; aspect-ratio: 1; border-radius: 50%; border: .8cqw solid #fff; z-index: 4; }
.tut-fl-peg { width: 2.6cqw; aspect-ratio: 1; border-radius: 50%; background: #fff; z-index: 3; }
.tut-fl-peg.hit { background: #e8344a; box-shadow: 0 0 1.5cqw 1cqw #ff8a3d; }

/* ================= Sketch Relay ================= */

.sk-body { display: flex; flex-direction: column; gap: 12px; }
.sk-timer { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; margin: -4px 0 10px; }
.sk-timer i { display: block; height: 100%; border-radius: 4px; background: var(--good); transform-origin: 0 50%; }
/* a sketchbook page: cream paper with a faint dot grid, a spiral along the top, more pages under it */
.sk-paper {
  position: relative; border-radius: 5px 5px 10px 10px; overflow: visible;
  background: radial-gradient(rgba(70, 50, 20, .11) 1px, transparent 1.4px) 0 0 / 22px 22px, linear-gradient(#fffdf6, #f7efdc);
  box-shadow: 0 2px 0 #ece2c9, 0 4px 0 #f6eedb, 0 6px 0 #e2d6b9, 0 14px 28px rgba(0, 0, 0, .42);
}
.sk-spiral {
  position: absolute; top: -9px; left: 5%; right: 5%; height: 20px; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 2.6px 9px at 50% 50%, #b9b3d3 0 70%, #6e688c 85%, transparent 100%) 0 0 / 17px 20px repeat-x,
    radial-gradient(circle 3.2px at 50% 72%, rgba(42, 35, 64, .55) 0 90%, transparent 100%) 0 0 / 17px 20px repeat-x;
}
.sk-canvas { display: block; width: 100%; aspect-ratio: 1; background: transparent; touch-action: none; border-radius: 5px 5px 10px 10px; }
.sk-sheet { display: flex; flex-direction: column; align-items: stretch; will-change: transform; }
.sk-note {
  position: relative; z-index: 3; align-self: center; margin-bottom: -6px; max-width: 92%;
  display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 10px; padding: 8px 16px 10px;
  background: linear-gradient(#fff6b8, #ffe98a); color: #2a2340; border-radius: 3px 3px 8px 3px; transform: rotate(-1.5deg);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .3);
}
.sk-note::before { content: ''; position: absolute; top: -8px; left: 50%; width: 54px; height: 16px; margin-left: -27px; background: rgba(255, 255, 255, .55); transform: rotate(3deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.sk-note small { color: #7a6a2a; font-weight: 600; font-size: 13px; }
.sk-note b { font-size: 26px; line-height: 1.1; text-align: center; }
.sk-reroll { font-size: 13px; font-weight: 700; color: #a6339a; padding: 2px 8px; border-radius: 99px; background: rgba(166, 51, 154, .12); }
.sk-flying { position: fixed; z-index: 9000; pointer-events: none; will-change: transform; }
.sk-colors { display: flex; justify-content: space-between; gap: 6px; }
.sk-color {
  flex: 1; aspect-ratio: 1; max-width: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), transparent 45%), var(--c);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 0 2px rgba(255, 255, 255, .25);
  transition: transform .12s; color: #17133a; font-size: 16px; display: grid; place-items: center; padding: 0;
}
.sk-color.on { transform: scale(1.15) translateY(-2px); box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px #fff; }
.sk-rubber { width: 58%; height: 34%; border-radius: 3px; background: linear-gradient(to right, #3fa9ff 0 38%, #ff9ec9 38%); transform: rotate(-30deg); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.sk-dot { display: inline-block; width: var(--d); height: var(--d); border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: middle; }
.sk-wait { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 0; }
.sk-stack { position: relative; width: 120px; height: 120px; margin-bottom: 8px; }
.sk-stack i { position: absolute; inset: 10px; border-radius: 6px; background: linear-gradient(#fffdf6, #f1e8d2); box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.sk-stack i:nth-child(1) { transform: rotate(-12deg); }
.sk-stack i:nth-child(2) { transform: rotate(7deg); }
.sk-stack i:nth-child(3) { background: radial-gradient(rgba(70, 50, 20, .1) 1px, transparent 1.4px) 0 0 / 12px 12px, #fffdf6; }
.sk-pencil {
  position: absolute; left: 62px; top: 0; width: 14px; height: 74px; border-radius: 3px 3px 0 0; transform-origin: 50% 100%; z-index: 2;
  background: linear-gradient(to bottom, #ff6fb5 0 10px, #c9c2b0 10px 15px, #ffc531 15px); animation: sk-scribble 1.4s ease-in-out infinite;
}
.sk-pencil::after { content: ''; position: absolute; left: 0; bottom: -14px; border: 7px solid transparent; border-top: 14px solid #f5d6a6; border-bottom: 0; }
@keyframes sk-scribble { 0%, 100% { transform: rotate(24deg) translate(-14px, 10px); } 25% { transform: rotate(30deg) translate(4px, 16px); } 50% { transform: rotate(20deg) translate(-4px, 4px); } 75% { transform: rotate(28deg) translate(10px, 12px); } }

/* the reveal: a flip-book, pages turn up over the spiral */
.sk-reveal { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.sk-pad { position: relative; aspect-ratio: 1; perspective: 1400px; user-select: none; -webkit-user-select: none; }
.sk-pad.can-swipe { touch-action: none; cursor: grab; }
.sk-pad::before {
  content: ''; position: absolute; inset: 0; border-radius: 5px 5px 10px 10px; /* the next sheet, under the one on top */
  background: radial-gradient(rgba(70, 50, 20, .11) 1px, transparent 1.4px) 0 0 / 22px 22px, linear-gradient(#f9f3e3, #efe5cd);
  box-shadow: 0 2px 0 #ece2c9, 0 4px 0 #f6eedb, 0 6px 0 #e2d6b9, 0 14px 28px rgba(0, 0, 0, .42);
}
.sk-leaf { position: absolute; inset: 0; transform-origin: 50% 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sk-leaf .sk-canvas { height: 100%; }
.sk-paper .sk-by {
  position: absolute; left: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px;
  border-radius: 99px; background: rgba(255, 253, 246, .9); color: #5a4e70; font-weight: 600; font-size: 14px; box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.sk-cover, .sk-guess { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; color: #2a2340; }
.sk-cover small, .sk-guess small { color: #8a7f9c; font-weight: 600; font-size: 16px; }
.sk-cover b { font-size: clamp(26px, 9vw, 44px); line-height: 1.1; }
.sk-guess b { font-size: clamp(26px, 9vw, 44px); line-height: 1.1; color: #a6339a; transform: rotate(-3deg) skewX(-6deg); }
.sk-doodle {
  width: 60%; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M3 9c14-8 22 4 36-2s22-5 36 0 28-4 42-2' fill='none' stroke='%23ff6fb5' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.sk-strip { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.sk-strip::-webkit-scrollbar { display: none; }
.sk-thumb {
  flex: none; width: 60px; aspect-ratio: 1; border-radius: 5px; overflow: hidden; color: #2a2340;
  background: linear-gradient(#fffdf6, #f1e8d2); box-shadow: 0 3px 6px rgba(0, 0, 0, .3); transition: box-shadow .2s, transform .2s;
}
.sk-thumb .sk-canvas { border-radius: 0; touch-action: auto; }
.sk-thumb.word { display: grid; place-items: center; padding: 4px; text-align: center; }
.sk-thumb.word b { font-size: 11px; line-height: 1.1; overflow-wrap: anywhere; }
.sk-thumb.on { box-shadow: 0 0 0 3px var(--accent), 0 3px 8px rgba(0, 0, 0, .35); transform: translateY(-2px); }
.sk-arrow { font-style: normal; color: var(--muted); font-weight: 700; flex: none; }
.sk-flip-wrap { position: sticky; bottom: calc(12px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.sk-flip-wrap .hint { margin: 0; }
.sk-flip { background: var(--bg2); padding: 8px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
p.sk-flip { padding: 14px; margin: 0; }
/* tutorial props */
.tut-sk-page { width: 30cqw; aspect-ratio: 1; }
.tut-sk-page .sk-spiral { top: -1.6cqw; height: 3.6cqw; background-size: 3cqw 3.6cqw; }
.tut-sk-page canvas, .tut-sk-page svg { display: block; width: 100%; height: 100%; }
.tut-sk-word { display: grid; place-items: center; height: 100%; color: #a6339a; font-weight: 700; font-size: 5cqw; transform: rotate(-3deg); }
.tut-sk-pad { width: 40cqw; aspect-ratio: 1; perspective: 600px; }
.tut-sk-pad .sk-leaf { transform-origin: 50% 0; }

/* ================= Playing cards (Rummy; the card faces are shared with Hearts & Spades) ================= */

.pcard {
  --w: 58px;
  position: relative; flex: none; width: var(--w); aspect-ratio: 5 / 7; border-radius: calc(var(--w) * .11);
  background: linear-gradient(155deg, #fff 0%, #fff 55%, #efecf8 100%); color: #17133a;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .08), inset 0 -2px 0 rgba(0, 0, 0, .05);
  font-weight: 700; transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, opacity .2s, filter .2s; user-select: none; -webkit-user-select: none;
}
.pcard.red { color: #e0344a; }
.pcard .tl, .pcard .br { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; line-height: .9; font-size: calc(var(--w) * .25); }
.pcard.ten .tl, .pcard.ten .br { letter-spacing: -.09em; font-size: calc(var(--w) * .22); }
.pcard .tl { top: 5%; left: 6%; }
.pcard .br { bottom: 5%; right: 6%; transform: rotate(180deg); }
.pcard .tl i, .pcard .br i { font-style: normal; font-size: .78em; margin-top: .06em; }
.pcard .mid { position: absolute; inset: 0; display: block; pointer-events: none; }
.pcard .mid svg { width: 100%; height: 100%; display: block; }
.pcard.back {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 8px),
    linear-gradient(160deg, #7b52ff, #3d1fa8);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35), inset 0 0 0 calc(var(--w) * .055) #fff, inset 0 0 0 calc(var(--w) * .075) #ffc531;
}
.pcard.back::after {
  content: '★'; position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; translate: -50% -50%; rotate: 45deg;
  display: grid; place-items: center; border-radius: 22%; background: radial-gradient(circle at 35% 30%, #ffe28a, #ffc531 60%, #c98f10);
  color: #5530c9; font-size: calc(var(--w) * .2); box-shadow: 0 0 0 calc(var(--w) * .025) #3d1fa8, 0 0 0 calc(var(--w) * .045) rgba(255, 255, 255, .5);
}
.pcard.empty { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2); }
.pcard.big { --w: 84px; }
.pcard.mini { --w: 38px; margin-right: -18px; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.pcard.mini:last-child, .pcard.mini:last-of-type { margin-right: 0; }
.pcard.mini .mid, .pcard.mini .br { display: none; }
.pcard.mini .tl { font-size: calc(var(--w) * .3); }
.ce-table {
  position: relative; display: flex; justify-content: center; align-items: center; gap: 18px; padding: 16px 10px; border-radius: 24px;
  background: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.3px) 0 0 / 5px 5px, radial-gradient(ellipse at 50% 40%, #2f7a4f 0%, #1f5a39 75%, #174a2e 100%);
  box-shadow: inset 0 0 0 5px #6b4426, inset 0 0 0 8px #4e2f18, inset 0 8px 24px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .3);
}
.ce-stock { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #d8e8df; font-size: 12px; touch-action: none; }
.ce-stock > .pcard { box-shadow: 0 3px 8px rgba(0, 0, 0, .35), 2px 2px 0 -1px #ddd, 4px 4px 0 -2px #3d1fa8, 5px 5px 8px rgba(0, 0, 0, .3); }
.ce-stock.live > .pcard, button.ce-stock:not([disabled]) > .pcard { box-shadow: 0 0 0 3px var(--accent), 0 0 20px rgba(255, 197, 49, .5); animation: cd-bob 1.6s ease-in-out infinite; }
div.ce-stock:not(.live) { cursor: default; }
.ce-pilebox { position: relative; display: grid; place-items: center; padding: 8px; border-radius: 20px; }
.ce-pilebox.drop-over { box-shadow: none !important; background: radial-gradient(circle, rgba(255, 197, 49, .35), transparent 70%); }
.ce-pilebox.cd-nope { box-shadow: none !important; background: radial-gradient(circle, rgba(255, 90, 95, .4), transparent 70%); }
.ce-pile > .pcard:not(:last-child) { filter: brightness(.92); }
@keyframes cd-bob { 50% { translate: 0 -4px; } }
.hand-wrap { overflow-x: auto; overflow-y: visible; padding: 22px 4px 28px; margin: 0 -16px; scrollbar-width: none; }
.hand { display: flex; gap: 0; padding: 0 17px; width: max-content; min-width: 100%; justify-content: center; box-sizing: border-box; --cw: 66px; }
.hand.drop-over { box-shadow: none !important; }
.hslot {
  flex: none; position: relative; transform-origin: 50% 100%; touch-action: none;
  transform: translateY(var(--fy, 0px)) rotate(var(--fa, 0deg)); transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .15s;
}
.hslot + .hslot { margin-left: calc(var(--step, 30px) - var(--cw)); }
.hslot.leaving { opacity: 0; }
.hslot.drop-over { box-shadow: none !important; }
.hslot.drop-over > .pcard { box-shadow: -6px 0 0 -2px var(--accent), 0 3px 8px rgba(0, 0, 0, .35); }
.hand .pcard { --w: var(--cw); cursor: grab; }
.hand .pcard.ok { transform: translateY(-14px); box-shadow: 0 0 0 3px var(--accent), 0 6px 14px rgba(0, 0, 0, .4); }
.hand .pcard.dim { filter: brightness(.6) saturate(.7); }
.hand .pcard.sel { transform: translateY(-20px); box-shadow: 0 0 0 3px var(--accent), 0 8px 18px rgba(0, 0, 0, .45); }
.pc-ghost { display: grid; place-items: center; }
.pc-ghost > .pcard { --w: 66px; }
/* drop zones only catch the finger while a card is being dragged */
.cd-zone { pointer-events: none; }
body.cd-dragging .cd-zone { pointer-events: auto; }
.cd-nope { box-shadow: 0 0 0 3px var(--bad), 0 0 18px rgba(255, 90, 95, .55) !important; }
.tut-stage .pcard { --w: 13cqw; }
.tut-stage .pcard.sm { --w: 10cqw; }
.tut-stage .pcard.lg { --w: 16cqw; }
.tut-stage .pcard.tut-win { box-shadow: 0 0 0 .8cqw var(--accent), 0 0 4cqw rgba(255, 197, 49, .8); }
.tut-felt {
  width: 96cqw; height: 92cqh; border-radius: 5cqw; z-index: 0;
  background: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.3px) 0 0 / 5px 5px, radial-gradient(ellipse at 50% 45%, #2f7a4f, #1f5a39 75%);
  box-shadow: inset 0 0 0 1.4cqw #6b4426, inset 0 0 0 2cqw #4e2f18;
}
.tut-felt.short { height: 56cqh; }
.tut-seat { padding: .6cqw 2cqw; border-radius: 3cqw; background: var(--c); color: #17133a; font-weight: 700; font-size: 3.6cqw; white-space: nowrap; box-shadow: 0 .8cqw 1.6cqw rgba(0, 0, 0, .3); }
.tut-slot { width: 13cqw; aspect-ratio: 5 / 7; border: .6cqw dashed rgba(255, 255, 255, .5); border-radius: 1.4cqw; }
.tut-dial .bd-svg { width: 52cqw; }
.tut-mat { width: 62cqw; height: 34cqh; border-radius: 3cqw; border: .6cqw dashed rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .2); transition: border-color .2s, box-shadow .2s; }
.tut-mat.good { border-color: var(--good); box-shadow: 0 0 3cqw rgba(90, 212, 90, .45); }
.tut-btn { padding: 1.6cqw 3cqw; border-radius: 3cqw; background: var(--panel2); color: var(--muted); font-weight: 700; font-size: 4cqw; white-space: nowrap; }
.tut-btn.on { background: var(--accent); color: #2b1d00; }
.tut-meldbox { width: 42cqw; height: 32cqh; border-radius: 3cqw; background: rgba(0, 0, 0, .25); box-shadow: inset 0 -.8cqw 0 #ff5a5f; }
.rm-melds { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.rm-owner { display: flex; flex-direction: column; gap: 4px; }
.rm-owner > small { color: var(--c); font-weight: 700; }
.rm-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rm-stage { display: flex; flex-direction: column; gap: 4px; }
.rm-stage:empty { display: none; }
.rm-stage > small { color: var(--accent); font-weight: 700; }
.rm-meld.staged { position: relative; box-shadow: 0 0 0 2px var(--accent); }
.rm-x { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%; background: var(--bad); font-size: 11px; line-height: 20px; }
.rm-buy { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 110px; text-align: center; }
.rm-buy small { color: var(--muted); font-size: 11px; }
.rm-score { position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--safe-bottom)); z-index: 30; max-width: 560px; margin: 0 auto;
  background: rgba(23, 19, 58, .97); border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .5); animation: rise .3s cubic-bezier(.2, .9, .3, 1.2); max-height: 80vh; overflow-y: auto; }
.pcard.joker { color: #a66bff; }
.pcard.joker .mid { font-size: calc(var(--w) * .2); letter-spacing: 1px; writing-mode: vertical-rl; }
.rm-meld { display: flex; padding: 6px; border-radius: 12px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 -3px 0 var(--c); }
.rm-meld.fits { box-shadow: 0 0 0 3px var(--accent), 0 0 16px rgba(255, 197, 49, .5); }
.rm-actions .btn[disabled] { opacity: .5; }
.rm-mat {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 16px; min-height: 52px;
  background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14); border: 2px dashed transparent;
}
.rm-mat.good { box-shadow: inset 0 0 0 2px var(--good), 0 0 14px rgba(90, 212, 90, .35); }
.rm-matnote { color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; }
.rm-mat.good .rm-matnote { color: var(--good); }
.rm-matcards { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.rm-matcards:empty { display: none; }
.rm-mc { --w: 48px; cursor: grab; touch-action: none; }
.rm-mc.leaving { opacity: 0; }
.rm-meld.drop-over { box-shadow: 0 0 0 3px var(--accent), 0 0 18px rgba(255, 197, 49, .6) !important; }
.rm-meld.cd-nope, .rm-pile.cd-nope { box-shadow: 0 0 0 3px var(--bad) !important; }
.rm-pile.drop-over, .hand-wrap.drop-over { box-shadow: none !important; }
.rm-pile.drop-over .ce-pile { filter: drop-shadow(0 0 10px rgba(255, 197, 49, .9)); }
.hand-wrap.drop-over { background: radial-gradient(ellipse at 50% 70%, rgba(255, 197, 49, .18), transparent 70%); }
.ce-pile > .pcard.taken { opacity: 0; }
.rm-actions { gap: 6px; }
.rm-actions .btn.small { padding: 0 10px; font-size: 14px; white-space: nowrap; }

/* ================= Imposter ================= */

.im-body { display: flex; flex-direction: column; gap: 14px; }
/* the secret card: face down until you hold it */
.im-table {
  display: grid; place-items: center; padding: 22px 12px; border-radius: 26px;
  background: radial-gradient(ellipse at 50% 40%, #3a2f8a, #241c58 75%); box-shadow: inset 0 0 30px rgba(0, 0, 0, .45);
}
.im-peek {
  width: min(68%, 250px); aspect-ratio: 5 / 7; perspective: 900px; padding: 0; background: none; container-type: inline-size;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab;
}
.im-peek.small { width: 104px; flex: none; }
.im-peek.watch { display: grid; }
.im-peek-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .32s cubic-bezier(.2, .9, .3, 1.1); }
.im-peek.peeking .im-peek-inner { transform: translateY(-10px) rotateY(180deg) scale(1.04); }
.im-peek.peeking { cursor: grabbing; }
.im-cardback, .im-cardface {
  position: absolute; inset: 0; border-radius: 9cqw; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqw; padding: 8cqw; text-align: center;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
}
.im-cardback {
  border: 2cqw solid #fff; color: #fff;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .09) 0 6cqw, transparent 6cqw 12cqw),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .09) 0 6cqw, transparent 6cqw 12cqw), linear-gradient(160deg, #ffb066, #d9542c);
}
.im-cardback::before { content: ''; position: absolute; inset: 4cqw; border-radius: 6cqw; border: .8cqw dashed rgba(255, 255, 255, .45); }
.im-emblem {
  width: 44cqw; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 30cqw;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .35), rgba(255, 255, 255, .08)); border: 1.6cqw solid rgba(255, 255, 255, .8);
  text-shadow: 0 1cqw 0 rgba(0, 0, 0, .2);
}
.im-cardback small { position: absolute; bottom: 9cqw; font-weight: 700; font-size: max(10px, 6cqw); letter-spacing: .5px; text-transform: uppercase; color: #fff; }
.im-cardback b { font-size: 26cqw; }
.im-peek.watch .im-cardback { position: relative; min-height: 120px; }
.im-cardface { transform: rotateY(180deg); background: linear-gradient(#fffaf0, #f1e4cc); color: #2a2340; border: 2cqw solid #fff; }
.im-cardface small { color: #8a7a66; font-weight: 600; font-size: max(9px, 6.4cqw); line-height: 1.2; }
.im-cardface .im-word { font-size: 15cqw; line-height: 1.05; color: #d9542c; overflow-wrap: anywhere; }
.im-cardface.imp { background: radial-gradient(circle at 50% 35%, #4a1f33, #17133a 80%); border-color: #ff5a5f; color: #fff; }
.im-cardface.imp small { color: #ffb4a8; }
.im-cardface.imp .im-word { color: #ff5a5f; font-size: 13cqw; letter-spacing: .5cqw; }
.im-face-art { width: 40%; }
.im-face-art svg { width: 100%; display: block; }
.im-word { font-size: 36px; color: var(--accent); }
.im-mine { display: flex; align-items: center; justify-content: center; gap: 14px; }
.im-mine > small { color: var(--muted); font-weight: 600; max-width: 110px; }

/* clue time: a dark stage, a lamp, the spotlight on whoever is talking */
.im-talktop:empty { display: none; }
.im-dots { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.im-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); transition: transform .3s, background .3s; }
.im-dots i.done { background: rgba(255, 197, 49, .55); }
.im-dots i.on { background: var(--accent); transform: scale(1.45); }
.im-stage {
  position: relative; height: min(80vw, 340px); border-radius: 26px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 58%, #2c2468, #110d2b 80%); box-shadow: inset 0 0 40px rgba(0, 0, 0, .6);
}
.im-lamp { position: absolute; top: -10px; left: 50%; width: 48px; height: 24px; margin-left: -24px; border-radius: 0 0 24px 24px; background: linear-gradient(#6b6590, #2c2647); box-shadow: 0 8px 22px rgba(255, 236, 160, .55); z-index: 2; }
.im-beam {
  position: absolute; top: 8px; left: 50%; width: 200px; height: 200px; margin-left: -100px; transform-origin: 50% 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 240, 180, .05), rgba(255, 240, 180, .26)); clip-path: polygon(46% 0, 54% 0, 80% 100%, 20% 100%);
  transition: transform .55s cubic-bezier(.3, .8, .3, 1), height .55s cubic-bezier(.3, .8, .3, 1);
}
.im-spot {
  position: absolute; width: 132px; height: 132px; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 240, 180, .42), rgba(255, 240, 180, .12) 55%, transparent 70%);
  transition: left .55s cubic-bezier(.3, .8, .3, 1), top .55s cubic-bezier(.3, .8, .3, 1);
}
.im-seat {
  position: absolute; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 72px;
  font-weight: 600; font-size: 12px; opacity: .5; filter: brightness(.6) saturate(.7); transition: opacity .4s, filter .4s, scale .4s;
}
.im-seat span { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-seat.on { opacity: 1; filter: none; scale: 1.22; z-index: 2; }
.im-seat.on .avatar { box-shadow: 0 0 0 3px #fff, 0 0 26px var(--c); }
.im-said { position: absolute; top: -3px; right: 12px; width: 17px; height: 17px; border-radius: 50%; background: var(--good); color: #0d2b0d; font-size: 10px; font-style: normal; font-weight: 700; display: none; place-items: center; }
.im-seat.said .im-said { display: grid; }
.im-bubble { position: absolute; translate: 4px -72px; font-size: 26px; pointer-events: none; z-index: 3; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); transition: left .55s, top .55s; }

/* voting: point your finger */
.im-votes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.im-vote {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 18px;
  background: var(--panel); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25);
}
.im-vote small { color: var(--muted); font-size: 12px; }
.im-vote.on { background: var(--c); color: rgba(0, 0, 0, .75); box-shadow: 0 0 0 3px #fff; }
.im-vote.on small { color: rgba(0, 0, 0, .6); }
.im-vote.self { opacity: .4; }
.im-pin { position: absolute; top: 4px; right: 4px; width: 30px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); animation: bounce-in .3s ease-out; }
.im-pin svg, .im-finger svg, .im-chip svg { width: 100%; height: 100%; display: block; }
.im-tray {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 18px; background: rgba(0, 0, 0, .22);
  border: 2px dashed var(--line); color: var(--muted); font-weight: 600; font-size: 14px;
}
.im-finger { flex: none; width: 58px; height: 58px; padding: 6px; border-radius: 50%; background: rgba(255, 255, 255, .08); animation: im-wag 1.6s ease-in-out infinite; }
.im-finger.im-ghost { animation: none; background: none; }
@keyframes im-wag { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(6px) rotate(-6deg); } 90% { transform: translateX(-2px); } }

/* the reveal: cards turn over to show who was who */
.im-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 16px 10px; padding-bottom: 8px; }
.im-pcard, .im-guess { position: relative; perspective: 700px; }
.im-pcard { aspect-ratio: 3 / 4; }
.im-pinner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.25, .5, 1); }
.im-pcard.flipped .im-pinner, .im-guess.flipped .im-pinner { transform: rotateY(180deg); }
.im-board.instant .im-pinner { transition: none; }
.im-pfront, .im-pback {
  position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; text-align: center;
}
.im-pfront { background: var(--panel); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); transition: box-shadow .3s; }
.im-pfront b { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-pcard.accused .im-pfront { box-shadow: 0 0 0 3px var(--accent), 0 0 20px rgba(255, 197, 49, .55); }
.im-pback { transform: rotateY(180deg); color: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.im-pback.imp { background: radial-gradient(circle at 50% 30%, #4a1f33, #17133a); box-shadow: inset 0 0 0 3px #ff5a5f, 0 0 22px rgba(255, 90, 95, .55); color: #ff5a5f; }
.im-pback.crew { background: radial-gradient(circle at 50% 30%, #4fe0d4, #1a8f87); }
.im-pback b { font-size: 14px; letter-spacing: .5px; }
.im-pback small { font-size: 11px; opacity: .8; }
.im-pback .im-face-art { width: 50%; }
.im-tally { position: absolute; left: 4px; right: 4px; bottom: -9px; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); }
.im-pcard .im-pfront { padding-bottom: 16px; }
.im-chip { width: 20px; height: 20px; }
.im-verdict { text-align: center; font-weight: 700; font-size: 22px; line-height: 1.2; }
.im-verdict:empty { display: none; }
.im-verdict.good { color: var(--good); }
.im-verdict.bad { color: #ff8a7a; }
.im-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.im-options:empty { display: none; }
.im-opt {
  min-height: 48px; padding: 10px 8px; border-radius: 14px; background: linear-gradient(#fffaf0, #f1e4cc); color: #2a2340;
  font-weight: 700; font-size: 16px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15), 0 3px 8px rgba(0, 0, 0, .25); transition: transform .12s;
}
.im-opt[disabled] { opacity: .75; }
.im-options.mine .im-opt:active { transform: scale(.95); }
.im-opt.picked { box-shadow: 0 0 0 3px var(--accent); transform: scale(1.04); }
.im-guess { grid-column: 1 / -1; justify-self: center; width: min(70%, 240px); aspect-ratio: 4 / 3; }
.im-guess .im-pfront b { font-size: 40px; }
.im-guess .im-pfront small, .im-guess .im-pback small { color: var(--muted); font-weight: 600; }
.im-guess .im-pback b { font-size: 26px; }
.im-guess .im-pback i { font-style: normal; font-weight: 700; }
.im-guess.right .im-pback { background: radial-gradient(circle at 50% 30%, #ff8a7a, #b8402c); }
.im-guess.wrong .im-pback { background: radial-gradient(circle at 50% 30%, #7be27b, #2f9a3a); }
.im-guess .im-pback small { color: rgba(255, 255, 255, .8); }
.im-final { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.im-final:empty { display: none; }
.im-final small { color: var(--muted); font-weight: 600; }
.im-final .im-word { font-size: 34px; }
/* tutorial props */
.tut-im-card { width: 26cqw; }
.tut-im-card.im-peek { width: 26cqw; }
.tut-im-seat { display: flex; flex-direction: column; align-items: center; transition: opacity .3s, filter .3s; opacity: .45; filter: brightness(.6); }
.tut-im-seat.on { opacity: 1; filter: none; }
.tut-im-pc { width: 20cqw; aspect-ratio: 3 / 4; perspective: 400px; }
.tut-im-pc .im-pfront b, .tut-im-pc .im-pback b { font-size: 3.4cqw; }

/* ================= Sonar (id: clue) ================= */

.cl-body { display: flex; flex-direction: column; gap: 12px; }
.cl-cluebox { order: 0; }
.cl-cluebox:empty { display: none; }
.cl-gridwrap { order: 1; }
.cl-cluebox.below { order: 2; }
.cl-extra { order: 3; display: flex; flex-direction: column; gap: 12px; }
.cl-score { display: flex; gap: 10px; align-items: stretch; }
.cl-score:empty { display: none; }
.cl-team {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; justify-content: center; padding: 6px 8px; border-radius: 14px;
  background: rgba(0, 0, 0, .25); box-shadow: inset 0 -4px 0 var(--c); opacity: .7; transition: opacity .3s, box-shadow .3s;
}
.cl-team.on { opacity: 1; box-shadow: inset 0 -4px 0 var(--c), 0 0 0 2px var(--c), 0 0 16px color-mix(in srgb, var(--c) 45%, transparent); }
.cl-team b { font-size: 30px; color: var(--c); min-width: 1.1em; text-align: center; font-variant-numeric: tabular-nums; }
.cl-team span { color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.1; }
/* the team's pennant on a little mast */
.cl-pennant { position: relative; width: 20px; height: 26px; flex: none; }
.cl-pennant::before { content: ''; position: absolute; left: 2px; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: #e8dcc0; box-shadow: 0 0 0 1px var(--ink); }
.cl-pennant::after { content: ''; position: absolute; left: 5px; top: 2px; width: 16px; height: 14px; background: var(--c); clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%); }
@media (max-width: 360px) {
  .cl-score { gap: 6px; }
  .cl-team { gap: 5px; padding: 6px 5px; }
  .cl-team b { font-size: 25px; }
  .cl-team span { font-size: 11px; }
  .cl-pennant { width: 17px; height: 22px; }
  .cl-pennant::after { width: 13px; height: 12px; }
  .cl-keycard { width: 60px; }
}

/* the dive leader's sonar map: a little green scope; face down until they tap to peek */
.cl-keycard {
  flex: none; width: 66px; aspect-ratio: 1; padding: 5px; border-radius: 11px; background: radial-gradient(circle at 50% 50%, #12473a, #061d18 80%);
  border: 3px solid var(--first, #fff); box-shadow: 0 0 12px color-mix(in srgb, var(--first, #fff) 50%, transparent), inset 0 0 0 1px rgba(110, 240, 190, .25), 0 4px 0 var(--ink);
  transition: transform .25s cubic-bezier(.2, 1.2, .4, 1);
}
.cl-keycard.big {
  position: fixed; left: 50%; top: 45%; width: min(78vw, 320px); padding: 14px; border-width: 6px; border-radius: 22px; z-index: 60;
  transform: translate(-50%, -50%) rotate(-2deg); box-shadow: 0 0 0 100vmax rgba(4, 14, 20, .78), 0 0 30px var(--first);
}
.cl-keygrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; height: 100%; }
.cl-keycard.big .cl-keygrid { gap: 6px; }
.cl-keygrid i { border-radius: 2px; background: rgba(110, 240, 190, .13); position: relative; }
.cl-keycard.big .cl-keygrid i { border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(110, 240, 190, .25); }
.cl-keygrid i.k0 { background: #ff5a5f; }
.cl-keygrid i.k1 { background: #3fa9ff; }
.cl-keycard.big .cl-keygrid i.k0, .cl-keycard.big .cl-keygrid i.k1 { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
.cl-keygrid i.k3 { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9ffe9' stroke='%23c9ffe9' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8'/%3E%3C/svg%3E") center / 62% no-repeat; box-shadow: none; outline: 1.5px dashed #c9ffe9; outline-offset: -2px; }
.cl-keycard.big .cl-keygrid i.k3 { outline-width: 3px; outline-offset: -4px; box-shadow: none; }
.cl-keygrid i.done { opacity: .3; }
.cl-keygrid i.done::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; background: rgba(255, 255, 255, .8); }
.cl-keyback { display: none; }
.cl-keycard.down:not(.big) .cl-keygrid { display: none; }
.cl-keycard.down:not(.big) .cl-keyback {
  position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 9px, rgba(110, 240, 190, .22) 9px 10px); color: #c9ffe9; font-size: 11px; font-weight: 700;
  overflow: hidden;
}
.cl-keyback::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(110, 240, 190, .45), transparent 22%);
  animation: cl-sweep 3s linear infinite;
}
.cl-keyback svg { position: relative; width: 22px; height: 22px; display: block; }
@keyframes cl-sweep { to { transform: rotate(1turn); } }
.cl-keyhint { display: flex; align-items: center; gap: 10px; }
.cl-keyhint .hint { flex: 1; margin: 0; text-align: left; }
.cl-hidekey { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.cl-hidekey svg { width: 18px; height: 18px; display: block; }

/* clue: written in grease pencil on a diver's slate */
.cl-cluecard {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 34px; border-radius: 12px; color: #1d2733;
  background: linear-gradient(180deg, #f4f7f2, #dce5df); border: 2.5px solid var(--ink);
  box-shadow: inset 0 5px 0 var(--c), 0 5px 0 var(--ink); transform: rotate(-1.5deg);
}
.cl-cluecard::before {
  content: ''; position: absolute; left: 11px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  background: var(--bg); box-shadow: 0 0 0 2px #9aa6a0, inset 0 2px 0 rgba(0, 0, 0, .35);
}
.cl-word-w { flex: 1; min-width: 0; font-size: 30px; font-weight: 700; letter-spacing: .5px; transform: skewX(-6deg); overflow-wrap: anywhere; line-height: 1.1; }
.cl-num {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center; border: 3px solid var(--c); border-radius: 48% 52% 45% 55%;
  color: var(--c); font-size: 26px; transform: rotate(8deg);
}
.cl-pips { position: absolute; right: 12px; bottom: -11px; display: flex; gap: 4px; align-items: center; background: #0e3a33; padding: 3px 7px; border-radius: 99px; box-shadow: 0 0 0 2px var(--ink); }
.cl-pips i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7); }
.cl-pips i.used { opacity: .25; box-shadow: none; }
.cl-pips small { color: #fff; font-size: 11px; font-weight: 600; }
.cl-cluecard.blank { min-height: 58px; justify-content: center; }
.cl-writing { display: flex; gap: 8px; }
.cl-writing i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); animation: cl-dots 1.2s ease-in-out infinite; }
.cl-writing i:nth-child(2) { animation-delay: .15s; }
.cl-writing i:nth-child(3) { animation-delay: .3s; }
@keyframes cl-dots { 40% { transform: translateY(-7px); opacity: 1; } 0%, 80%, 100% { opacity: .4; } }
.cl-pencil {
  position: absolute; right: 18px; top: 8px; width: 9px; height: 40px; border-radius: 2px 2px 0 0; transform-origin: 50% 100%;
  background: linear-gradient(to bottom, #2b2b33 0 6px, #c9c2b0 6px 9px, #ff7a3d 9px); animation: cl-scribble 1.1s ease-in-out infinite;
}
.cl-pencil::after { content: ''; position: absolute; left: 0; bottom: -9px; border: 4.5px solid transparent; border-top: 9px solid #f5d6a6; border-bottom: 0; }
@keyframes cl-scribble { 0%, 100% { transform: rotate(28deg) translateX(-6px); } 50% { transform: rotate(18deg) translateX(10px); } }
.cl-cluecard.form { flex-direction: column; align-items: stretch; gap: 10px; transform: none; padding: 14px 14px 14px 34px; }
.cl-cluecard.form::before { top: 26px; }
.cl-in {
  background: transparent; border: 0; border-bottom: 2px dashed rgba(29, 39, 51, .3); color: #1d2733; font: inherit; font-weight: 700; font-size: 28px;
  padding: 2px; outline: none; transform: skewX(-6deg); min-width: 0;
}
.cl-in::placeholder { color: rgba(29, 39, 51, .3); }
.cl-cluecard.form small { color: #5b6670; font-weight: 600; font-size: 13px; }
.cl-nums { display: flex; gap: 8px; justify-content: space-between; }
.cl-nums button {
  width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid rgba(29, 39, 51, .25); color: #1d2733; font-size: 20px; font-weight: 700;
  transition: transform .12s, background .12s;
}
.cl-nums button.on { background: var(--c); border-color: var(--c); color: #fff; transform: scale(1.1) rotate(-6deg); }

/* the wreck field: brass wreck plaques on a dark ocean floor */
.cl-grid {
  position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 8px; border-radius: 18px; border: 2.5px solid var(--ink);
  background: radial-gradient(120% 55% at 50% -5%, rgba(120, 200, 255, .2), transparent 60%),
    radial-gradient(70% 18% at 30% 104%, rgba(214, 190, 130, .35), transparent 70%), radial-gradient(70% 18% at 80% 106%, rgba(214, 190, 130, .28), transparent 70%),
    linear-gradient(180deg, #123a66 0%, #0a2348 55%, #08182f 100%);
  box-shadow: 0 5px 0 var(--ink);
}
.cl-grid::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(105deg, transparent 0 34px, rgba(170, 220, 255, .05) 34px 52px, transparent 52px 90px);
}
.cl-card {
  position: relative; aspect-ratio: 1.25; perspective: 500px; padding: 0; border-radius: 10px; background: none;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .15s;
}
.cl-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.cl-face {
  position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
}
.cl-front {
  --rv: rgba(74, 44, 6, .55);
  background: radial-gradient(circle at 6px 6px, var(--rv) 0 1.6px, transparent 2.2px), radial-gradient(circle at calc(100% - 6px) 6px, var(--rv) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 6px calc(100% - 6px), var(--rv) 0 1.6px, transparent 2.2px), radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), var(--rv) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 88% 82%, rgba(46, 140, 118, .4), transparent 26%), linear-gradient(170deg, #ecd08e, #c89a4e 65%, #a87b36);
  color: #2b1a05; padding: 2px; box-shadow: inset 0 -3px 0 rgba(60, 35, 0, .38), inset 0 2px 0 rgba(255, 246, 214, .5), 0 2px 0 rgba(0, 0, 0, .4); transition: box-shadow .2s;
}
.cl-front::before { content: ''; position: absolute; inset: 4px; border-radius: 6px; border: 1px solid rgba(74, 44, 6, .35); pointer-events: none; }
.cl-front span { font-weight: 700; font-size: clamp(10px, 3.1vw, 16px); overflow-wrap: anywhere; line-height: 1.05; text-align: center; max-width: 100%; }
.cl-rule { width: 46%; height: 2px; border-radius: 1px; background: rgba(74, 44, 6, .28); margin-top: 4px; }
.cl-back { transform: rotateY(180deg); background: #c2a86e; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), 0 2px 0 rgba(0, 0, 0, .4); }
.cl-art { width: 78%; flex: 1; min-height: 0; display: grid; place-items: center; }
.cl-art svg { width: 100%; height: 100%; display: block; }
.cl-back span { font-size: clamp(7px, 2vw, 10px); font-weight: 700; color: rgba(0, 0, 0, .55); padding-bottom: 2px; }
.cl-card.k0 .cl-back { background: radial-gradient(circle at 50% 30%, #ff8a8d, #d8424a); }
.cl-card.k1 .cl-back { background: radial-gradient(circle at 50% 30%, #7cc6ff, #2a86d6); }
.cl-card.k2 .cl-back { background: linear-gradient(180deg, #2f6f8f, #1d4f6c 60%, #c9b07a 60.5%, #b0955c); }
.cl-card.k2 .cl-back span { color: rgba(40, 25, 5, .7); }
.cl-card.k3 .cl-back { background: radial-gradient(circle at 50% 35%, #5a2430, #12060c); box-shadow: inset 0 0 0 2px #ff5a5f; }
.cl-card.k3 .cl-back span { color: #ff5a5f; }
.cl-card.shown .cl-inner, .cl-card.ghost .cl-inner { transform: rotateY(180deg); }
.cl-card.ghost .cl-back { filter: saturate(.55) brightness(.75); }
.cl-card.ghost .cl-back::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255, 255, 255, .08) 6px 8px); }
.cl-card.flipping { z-index: 4; }

/* the dive leader's board is a dark sonar screen, so the map can't be read from across the room: every wreck is a dim
   green contact, team wrecks carry a small blip in the team color, and the sea mine a dashed outline with a little mine glyph */
.cl-card.k0 { --kc: #ff5a5f; }
.cl-card.k1 { --kc: #3fa9ff; }
.cl-grid.spy {
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 46px, rgba(110, 240, 190, .1) 46px 47.5px),
    linear-gradient(rgba(110, 240, 190, .06) 1px, transparent 1px) 0 0 / 100% 20%, linear-gradient(90deg, rgba(110, 240, 190, .06) 1px, transparent 1px) 0 0 / 20% 100%,
    radial-gradient(circle at 50% 50%, #0f3d33, #051a16 80%);
  overflow: hidden;
}
.cl-grid.spy::before { inset: -50%; border-radius: 0; background: conic-gradient(from 0deg, rgba(110, 240, 190, .16), transparent 16%); animation: cl-sweep 6s linear infinite; }
.cl-grid.spy .cl-card:not(.shown) .cl-front { background: rgba(9, 52, 42, .72); color: #b8f7da; }
.cl-grid.spy .cl-card:not(.shown):not(.has-pts) .cl-front { box-shadow: none; }
.cl-grid.spy .cl-card:not(.shown) .cl-front::before { inset: 0; border-radius: 10px; border: 1.5px solid rgba(110, 240, 190, .3); }
.cl-grid.spy .cl-card:not(.shown) .cl-rule { background: rgba(110, 240, 190, .22); }
.cl-grid.spy .cl-card.k0:not(.shown) .cl-front::before, .cl-grid.spy .cl-card.k1:not(.shown) .cl-front::before { border-color: color-mix(in srgb, var(--kc) 50%, transparent); }
.cl-grid.spy .cl-card.k0:not(.shown) .cl-front::after, .cl-grid.spy .cl-card.k1:not(.shown) .cl-front::after {
  content: ''; position: absolute; left: clamp(4px, 1.4vw, 7px); top: clamp(4px, 1.4vw, 7px); width: clamp(7px, 2.3vw, 10px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: var(--kc); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--kc) 30%, transparent);
}
.cl-grid.spy .cl-card.k3:not(.shown) .cl-front::before { inset: 2px; border: 2.5px dashed #c9ffe9; border-radius: 8px; }
.cl-grid.spy .cl-card.k3:not(.shown) .cl-front::after {
  content: ''; position: absolute; left: clamp(4px, 1.4vw, 7px); top: clamp(4px, 1.4vw, 7px); width: clamp(9px, 3vw, 14px); aspect-ratio: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9ffe9' stroke='%23c9ffe9' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) { .cl-grid.spy::before, .cl-keyback::before { animation: none; } }
.cl-grid.spy .cl-card.pointed { transform: translateY(-2px) scale(1.04); } /* (stays inside the scope's edge) */

/* fingers on wrecks: who's pointing at what */
.cl-grid.active .cl-card:not(.shown) { cursor: pointer; }
.cl-card.pressing { transform: scale(.92); }
.cl-card.has-pts .cl-front { box-shadow: inset 0 0 0 3px var(--pc), 0 2px 0 rgba(0, 0, 0, .4); }
.cl-card.pointed { transform: translateY(-4px) scale(1.07); z-index: 3; }
.cl-card.pointed .cl-front { box-shadow: 0 0 0 3px var(--accent), 0 10px 16px rgba(0, 0, 0, .45); animation: cl-ready 1s ease-in-out infinite; }
@keyframes cl-ready { 50% { filter: brightness(1.08); } }
.cl-pts { position: absolute; top: -7px; right: -5px; display: flex; flex-direction: row-reverse; z-index: 5; pointer-events: none; }
.cl-pts .avatar { margin-left: -7px; box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0, 0, 0, .4); font-size: 11px; }
.cl-stamp {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -14deg; z-index: 6; pointer-events: none;
  padding: 2px 8px; border: 3px solid #ff5a5f; border-radius: 8px; background: rgba(12, 10, 28, .85); color: #ff5a5f;
  font-weight: 700; font-size: 18px; letter-spacing: 1px; white-space: nowrap; box-shadow: 0 0 18px rgba(255, 90, 95, .6);
}
.cl-flash { position: fixed; inset: 0; z-index: 9990; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(255, 183, 3, .5), rgba(255, 90, 95, .45) 30%, rgba(6, 12, 28, .9) 70%); }
.cl-bubble {
  position: fixed; z-index: 9989; pointer-events: none; border-radius: 50%; border: 1.5px solid rgba(220, 245, 255, .85);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .8) 0 18%, rgba(170, 225, 255, .18) 40%);
}
.cl-boom { position: fixed; z-index: 9991; width: 60px; height: 60px; border-radius: 50%; pointer-events: none; border: 6px solid #ffb703; box-shadow: 0 0 20px #fb6107, inset 0 0 14px #fb6107; }
.cl-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.cl-line b { color: var(--c); min-width: 44px; }
.cl-member { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.cl-log { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-log span { padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 -3px 0 var(--c); font-size: 13px; font-weight: 600; }
.cl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cl-col { background: var(--panel); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: inset 0 -4px 0 var(--c); }
.cl-col h3 { margin: 0; color: var(--c); }
.cl-col .cl-member small { color: var(--muted); font-size: 11px; }
.cl-col-art { width: 64px; align-self: center; }
.cl-col-art svg { width: 100%; display: block; }
/* tutorial props */
.tut-cl-card { width: 17cqw; aspect-ratio: 1.25; perspective: 300px; }
.tut-cl-card .cl-face { border-radius: 1.6cqw; }
.tut-cl-card .cl-front span { font-size: 3.4cqw; }
.tut-cl-card .cl-back span { font-size: 2.2cqw; }
.tut-cl-clue { width: 46cqw; padding: 1.6cqw 2.4cqw 1.6cqw 6cqw; gap: 2cqw; }
.tut-cl-clue .cl-word-w { font-size: 6cqw; }
.tut-cl-clue .cl-num { width: 9cqw; height: 9cqw; font-size: 5cqw; border-width: .6cqw; }
.tut-cl-clue::before { left: 1.8cqw; width: 2cqw; height: 2cqw; margin-top: -1cqw; }
.tut-cl-key { width: 30cqw; position: absolute; }
.tut-av { width: 6cqw; height: 6cqw; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-weight: 700; font-size: 3.4cqw; box-shadow: 0 0 0 .5cqw #fff; z-index: 7; }

.bd-step { width: 44px; height: 44px; border-radius: 50%; background: var(--panel2); color: #fff; font-size: 24px; font-weight: 700; }
.bd-step[disabled] { opacity: .35; }
.bt-sums { display: flex; justify-content: space-around; font-size: 15px; font-weight: 700; }
.bt-sums .mine { color: #5ad45a; }
.bt-sums .opp { color: #ff6b66; }
.sp-confirm { margin-top: 8px; }
.sp-blind { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }

/* spades team score + bags */
.sp-teams { display: flex; gap: 10px; }
.sp-team {
  flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px;
  background: rgba(0, 0, 0, .25); box-shadow: inset 0 -4px 0 var(--c);
}
.sp-tname { font-weight: 700; color: var(--c); }
.sp-team b { font-size: 22px; }
.sp-bags { display: grid; grid-template-columns: repeat(5, 8px); gap: 3px; margin-left: auto; }
.sp-bags i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .15); }
.sp-bags i.on { background: var(--accent); box-shadow: 0 0 5px var(--accent); }
.cl-member.bot { opacity: .6; }

/* discard pile: cards stack so a new one can glide on top of the last */
.ce-pile { position: relative; width: 84px; aspect-ratio: 5 / 7; }
.ce-pile > .pcard { position: absolute; inset: 0; }
.pcard.ghost { --w: 56px; }

/* ================= Trick-taking table (Hearts, Spades) ================= */

.tt-table {
  position: relative; display: grid; gap: 4px;
  grid-template-columns: 76px 1fr 76px; grid-template-rows: auto minmax(190px, 1fr) auto;
  grid-template-areas: ". top ." "left trick right" ". bottom .";
  background: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1.3px) 0 0 / 5px 5px, radial-gradient(ellipse at 50% 45%, #2f7a4f 0%, #1f5a39 70%, #174a2e 100%);
  border-radius: 28px; padding: 12px;
  box-shadow: inset 0 0 0 6px #6b4426, inset 0 0 0 9px #4e2f18, inset 0 10px 26px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .3);
}
.tt-seat {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0;
  padding: 6px 4px; border-radius: 16px; transition: background .25s, box-shadow .25s;
}
.tt-seat b { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-seat small { font-size: 12px; color: #d8e8df; white-space: nowrap; }
.tt-seat.top { grid-area: top; justify-self: center; }
.tt-seat.left { grid-area: left; align-self: center; }
.tt-seat.right { grid-area: right; align-self: center; }
.tt-seat.bottom { grid-area: bottom; justify-self: center; flex-direction: row; gap: 8px; }
.tt-seat.turn { background: rgba(255, 255, 255, .14); box-shadow: 0 0 0 3px var(--c), 0 0 18px var(--c); }
.tt-seat.teamus .avatar { box-shadow: 0 0 0 3px #5ad45a; }
.tt-seat.teamthem .avatar { box-shadow: 0 0 0 3px #ff5a5f; }
.tt-trick { grid-area: trick; position: relative; min-height: 190px; transition: transform .4s; }
.tt-table.compact { grid-template-rows: auto minmax(40px, auto) auto; }
.tt-table.compact .tt-trick { min-height: 40px; }
.tt-table.compact .tt-seat.left, .tt-table.compact .tt-seat.right { align-self: start; }
.tt-card { --w: 60px; position: absolute; left: 50%; top: 50%; will-change: translate, scale; }
.tt-card.at-bottom { transform: translate(-50%, -6%) rotate(3deg); }
.tt-card.at-top { transform: translate(-50%, -94%) rotate(-4deg); }
.tt-card.at-left { transform: translate(-112%, -50%) rotate(-8deg); }
.tt-card.at-right { transform: translate(12%, -50%) rotate(7deg); }
.tt-card.win { box-shadow: 0 0 0 3px var(--accent), 0 0 22px rgba(255, 197, 49, .8); scale: 1.08; z-index: 9 !important; transition: scale .25s, box-shadow .25s; }
.tt-seat.won { background: rgba(255, 197, 49, .22); box-shadow: 0 0 0 3px var(--accent), 0 0 20px rgba(255, 197, 49, .6); }
.tt-slot {
  grid-area: trick; justify-self: center; align-self: center; translate: 0 44%; rotate: 3deg; width: 60px; aspect-ratio: 5 / 7; border-radius: 8px; pointer-events: none;
  border: 2px dashed rgba(255, 255, 255, .45); display: grid; place-items: center; opacity: 0; transition: opacity .25s;
  color: rgba(255, 255, 255, .7); font-size: 10px; font-weight: 700; text-transform: uppercase; text-align: center;
}
.tt-table.ready .tt-slot { opacity: 1; animation: target-glow 1.2s ease-in-out infinite; }
.tt-trick.drop-over { box-shadow: none !important; background: radial-gradient(ellipse, rgba(255, 197, 49, .22), transparent 70%); border-radius: 50%; }
.tt-trick.cd-nope { box-shadow: none !important; background: radial-gradient(ellipse, rgba(255, 70, 80, .55), transparent 70%); border-radius: 50%; }
.tt-burst {
  position: absolute; left: 50%; top: 46%; z-index: 6; translate: -50% -50%; pointer-events: none; white-space: nowrap;
  padding: 10px 18px; border-radius: 18px; font-size: 22px; font-weight: 700; color: #fff; background: #e0344a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4), inset 0 -4px 0 rgba(0, 0, 0, .2);
}
.tt-burst.spades { background: #17133a; box-shadow: 0 6px 18px rgba(0, 0, 0, .4), 0 0 0 3px #fff; }
.tt-burst.qs { background: #fff; color: #17133a; box-shadow: 0 6px 18px rgba(0, 0, 0, .4), 0 0 0 3px #e0344a; }
/* Hearts: the pass tray in the middle of the table */
.hp-tray {
  grid-area: trick; align-self: center; justify-self: center; display: none; flex-direction: column; align-items: center; gap: 6px; z-index: 3;
  padding: 8px 10px 10px; border-radius: 18px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12);
}
.hp-tray.on { display: flex; }
.hp-tray.drop-over { box-shadow: inset 0 0 0 2px var(--accent), 0 0 22px rgba(255, 197, 49, .5) !important; }
.hp-label { font-weight: 700; font-size: 14px; color: #fff; }
.hp-slots { display: flex; gap: 6px; }
.hp-slot { width: 56px; aspect-ratio: 5 / 7; border-radius: 8px; border: 2px dashed rgba(255, 255, 255, .35); display: grid; place-items: center; }
.hp-tray.done .hp-slot { opacity: .35; }
.hp-card { --w: 56px; pointer-events: auto; cursor: pointer; }
.tt-lastlabel { position: absolute; left: 0; right: 0; bottom: -4px; text-align: center; font-size: 12px; color: #d8e8df; }
.tt-actions { display: flex; gap: 10px; justify-content: center; }
.tt-actions:empty { display: none; }
.hand .pcard.got { box-shadow: 0 0 0 3px #a66bff, 0 6px 14px rgba(0, 0, 0, .4); }
.tt-popup {
  position: absolute; inset: 6px; z-index: 5; border-radius: 22px; padding: 14px;
  background: rgba(23, 19, 58, .96); display: flex; flex-direction: column; gap: 10px; justify-content: center;
  animation: rise .3s cubic-bezier(.2, .9, .3, 1.2);
}
.tt-moon { text-align: center; font-weight: 700; font-size: 18px; color: var(--accent); }

/* scoreboard bars */
.sb { display: flex; flex-direction: column; gap: 10px; }
.sb-row { display: grid; grid-template-columns: 64px 1fr 48px; align-items: center; gap: 8px; }
.sb-name { font-weight: 700; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-bar {
  position: relative; height: 34px; border-radius: 10px; background: rgba(0, 0, 0, .35);
  box-shadow: inset 0 0 0 2px rgba(255, 197, 49, .5); overflow: hidden;
}
.sb-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; transition: width .8s cubic-bezier(.2, .8, .3, 1); }
.sb-bar b { position: relative; display: block; padding: 0 10px; line-height: 34px; font-size: 19px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.sb-delta { font-weight: 700; font-size: 18px; color: var(--accent); }
.sb-delta.neg { color: #ff8a7a; }
.sb-extra { grid-column: 2 / 4; color: var(--muted); font-size: 12px; margin-top: -4px; }

/* Spades: the bid dial */
.bd { display: flex; justify-content: center; }
.bd-svg { width: min(52vw, 200px); height: auto; display: block; touch-action: none; user-select: none; -webkit-user-select: none; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35)); }
.bd.live .bd-svg { cursor: grab; }
.bd:not(.live) .bd-svg { opacity: .85; }
.bd-knob { transform-origin: 110px 110px; transition: transform .22s cubic-bezier(.2, 1.3, .4, 1); }
.bd-n { font-family: Fredoka, sans-serif; font-weight: 700; font-size: 13px; fill: #6b6150; text-anchor: middle; transition: fill .15s; }
.bd-n.on { fill: #17133a; font-size: 16px; }
.bd-tick { stroke: rgba(0, 0, 0, .14); stroke-width: 1.4; }
.bd-num { font-family: Fredoka, sans-serif; font-weight: 700; font-size: 38px; fill: #17133a; text-anchor: middle; }
.bd-num.nil { font-size: 26px; }
.bd-sub { font-family: Fredoka, sans-serif; font-weight: 600; font-size: 11px; fill: #8a7d5c; text-anchor: middle; text-transform: uppercase; letter-spacing: 1px; }
.bd-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.bd-step { width: 44px; height: 44px; border-radius: 50%; background: var(--panel2); color: #fff; font-size: 24px; font-weight: 700; }
.bd-step[disabled] { opacity: .35; }
.bt-sums { display: flex; justify-content: space-around; font-size: 15px; font-weight: 700; }
.bt-sums .mine { color: #5ad45a; }
.bt-sums .opp { color: #ff6b66; }
.sp-confirm { margin-top: 8px; }
.sp-blind { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }

/* spades team score + bags */
.sp-teams { display: flex; gap: 10px; }
.sp-team {
  flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px;
  background: rgba(0, 0, 0, .25); box-shadow: inset 0 -4px 0 var(--c);
}
.sp-tname { font-weight: 700; color: var(--c); }
.sp-team b { font-size: 22px; }
.sp-bags { display: grid; grid-template-columns: repeat(5, 8px); gap: 3px; margin-left: auto; }
.sp-bags i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .15); }
.sp-bags i.on { background: var(--accent); box-shadow: 0 0 5px var(--accent); }
.cl-member.bot { opacity: .6; }

/* discard pile: cards stack so a new one can glide on top of the last */
.ce-pile { position: relative; width: 84px; aspect-ratio: 5 / 7; }
.ce-pile > .pcard { position: absolute; inset: 0; }
.pcard.ghost { --w: 56px; }

/* ================= Board games (Ludo, Snakes & Ladders) ================= */

.ld-wrap { display: grid; place-items: center; }
.ld-board, .sl-board {
  width: min(100%, calc(100dvh - 300px - var(--safe-top) - var(--safe-bottom)));
  aspect-ratio: 1; border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); background: #f6f1e3;
}
@supports not (height: 100dvh) { .ld-board, .sl-board { width: min(100%, calc(100vh - 300px)); } }
.ld-token { pointer-events: none; }
.ld-token.can-move { pointer-events: auto; cursor: grab; }
.ld-token.can-move circle:nth-child(2) { animation: ld-pulse .8s ease-in-out infinite; }
@keyframes ld-pulse { 50% { r: .48; stroke-width: .13; } }
.ld-star { font: 700 .62px Fredoka, sans-serif; text-anchor: middle; fill: #d9a520; pointer-events: none; }
.ld-crown { font-size: .7px; fill: #c9a227; }
.ld-deco, .ld-dests { pointer-events: none; }
.ld-dest { fill: rgba(255, 255, 255, .25); stroke: var(--c, #fff); stroke-width: .1; stroke-dasharray: .24 .12; animation: target-glow .9s ease-in-out infinite; }
.ld-dest.on { fill: rgba(255, 255, 255, .55); stroke: #fff; stroke-width: .14; }
.ld-board.dragging .ld-dest { pointer-events: all; }
.ld-board.dragging .ld-dest:not(.on) { opacity: .25; animation: none; }
.ld-dest.drop-over { fill: #fff; stroke: var(--c, #fff); animation: none; }
.ld-ghost {
  border-radius: 50%; border: 3px solid #fff; transform-origin: center;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .8), transparent 45%), var(--c);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
}
/* Ludo tutorial props */
.tut-ld-sq { width: 11cqw; aspect-ratio: 1; border-radius: 1.8cqw; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 5cqw; box-shadow: inset 0 0 0 .35cqw rgba(0, 0, 0, .12), 0 .5cqw 0 rgba(0, 0, 0, .2); }
.tut-ld-sq:empty { color: transparent; }
.tut-ld-sq.star { color: #d9a520; }
.tut-ld-tok {
  width: 8cqw; aspect-ratio: 1; border-radius: 50%; border: .8cqw solid #fff; z-index: 3;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .85), transparent 45%), var(--c); box-shadow: 0 1cqw 1.4cqw rgba(0, 0, 0, .35), inset 0 -.8cqw 0 rgba(0, 0, 0, .18);
}
.tut-ld-tok.pulse { animation: can-move 1s ease-in-out infinite; }
.tut-ld-base { width: 26cqw; aspect-ratio: 1; border-radius: 4cqw; background: var(--c); box-shadow: inset 0 0 0 2.6cqw var(--c), inset 0 0 0 30cqw #fffaf0, 0 1cqw 2cqw rgba(0, 0, 0, .3); }
.tut-ld-tray { width: 64%; height: 30%; border-radius: 4cqw; background: radial-gradient(ellipse, #2f7a4f, #1f5a39); box-shadow: inset 0 0 0 1.2cqw #6b4426; }
.tut-ld-glow { width: 11cqw; aspect-ratio: 1; border: .8cqw dashed #fff; border-radius: 2cqw; background: rgba(255, 255, 255, .2); animation: target-glow .9s infinite; z-index: 2; }
.tut-ld-home { width: 0; height: 0; border-style: solid; border-width: 11cqw 0 11cqw 13cqw; border-color: transparent transparent transparent #ff5a5f; filter: drop-shadow(0 .8cqw 1cqw rgba(0, 0, 0, .3)); }
.ld-dock { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 84px; }
.ld-hint { color: var(--muted); font-weight: 600; min-width: 90px; }
.die { width: 76px; height: 76px; flex: none; transition: filter .2s; }
.die svg { width: 100%; height: 100%; display: block; }
.die .die-body { fill: #fff; stroke: var(--c, #fff); stroke-width: 5; }
.die .die-pips { fill: #17133a; }
.die:not(.ready) { filter: brightness(.75); }
.die.ready { animation: die-nudge 1.4s ease-in-out infinite; }
@keyframes die-nudge { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-10deg) scale(1.06); } 90% { transform: rotate(8deg) scale(1.06); } }
.sl-num { font: 700 2.4px Fredoka, sans-serif; fill: rgba(60, 40, 10, .5); pointer-events: none; }
.sl-board { aspect-ratio: 102 / 112; }
.sl-start { font: 700 3.4px Fredoka, sans-serif; fill: rgba(255, 235, 200, .7); text-anchor: end; pointer-events: none; }
.sl-star { font: 700 4px Fredoka, sans-serif; fill: #e8a400; pointer-events: none; }
.sl-ladder, .sl-snake, .sl-target { pointer-events: none; }
.sl-ladder line { stroke-linecap: round; }
.sl-ladder .rail { stroke: #b07a45; stroke-width: 1.15; }
.sl-ladder .rail-sh { stroke: rgba(0, 0, 0, .22); stroke-width: 1.2; }
.sl-ladder .rail-hi { stroke: rgba(255, 230, 190, .55); stroke-width: .35; }
.sl-ladder .rung { stroke: #8a5a2f; stroke-width: .85; }
.sl-snake path { fill: none; stroke-linecap: round; }
.sl-snake .sl-tongue { opacity: 0; }
.sl-snake.biting { animation: sl-bite .25s 3; }
.sl-snake.biting .sl-tongue { opacity: 1; }
@keyframes sl-bite { 50% { filter: brightness(1.25) drop-shadow(0 0 1.2px #fff); } }
.sl-piece { pointer-events: none; }
.sl-piece.can-move { pointer-events: auto; touch-action: none; cursor: grab; }
.sl-piece path { filter: drop-shadow(0 .4px .5px rgba(0, 0, 0, .35)); }
.sl-sq.drop-over { fill: #fff !important; }
.sl-target { fill: none; stroke: #fff; stroke-width: .9; stroke-dasharray: 2 1.2; animation: target-glow .9s ease-in-out infinite; }
.sl-ghost {
  border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7), transparent 40%), var(--c);
  border: 3px solid #fff; transform-origin: center;
}

/* ================= Backgammon ================= */

.bg-board {
  width: min(100%, calc((100dvh - 340px - var(--safe-top) - var(--safe-bottom)) * 1.19));
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); touch-action: manipulation;
}
@supports not (height: 100dvh) { .bg-board { width: min(100%, calc((100vh - 340px) * 1.19)); } }
.bg-tri { transition: filter .2s; }
.bg-tri.from { filter: brightness(1.18) drop-shadow(0 0 1.2px #fff); }
.bg-tri.sel { filter: brightness(1.35) drop-shadow(0 0 2px #ffc531); }
.bg-tri.dest { fill: #ffc531; filter: drop-shadow(0 0 2px #ffc531); animation: bg-glow 1s ease-in-out infinite; }
.bg-tray.dest { fill: rgba(255, 197, 49, .4); stroke: #ffc531; stroke-width: .6; animation: bg-glow 1s ease-in-out infinite; }
@keyframes bg-glow { 50% { opacity: .65; } }
.bg-deco { pointer-events: none; }
.bg-hit.drop-over { fill: rgba(255, 255, 255, .22); }
.bg-tray.drop-over { fill: rgba(255, 197, 49, .7); }
.bg-ch { pointer-events: none; }
.bg-ch.can-move { pointer-events: auto; cursor: grab; }
.bg-board.dragging .bg-ch { pointer-events: none; }
.bg-ghost {
  border-radius: 50%; transform-origin: center;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .75), transparent 45%), var(--c);
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .35), inset 0 0 0 5px rgba(0, 0, 0, .1);
}
.bg-score { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.bg-side { display: flex; align-items: center; gap: 6px; background: var(--panel); border-radius: 999px; padding: 4px 12px 4px 6px; font-size: 14px; }
.bg-side i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25); }
.bg-side .pts { color: var(--accent); font-weight: 700; font-size: 17px; }
.bg-side small, .bg-to { color: var(--muted); }
.bg-dock { display: flex; align-items: center; gap: 8px; }
.bg-dock .d3-tray { flex: 1; min-width: 0; }
.bg-dock .d3 { transition: opacity .3s, filter .3s; }
.bg-dock .d3.used { opacity: .35; filter: saturate(.2); }
.bg-btns { display: flex; flex-direction: column; gap: 6px; flex: none; }
.bg-btns:not(:has(.btn:not([style*="none"]))) { display: none; }
/* Backgammon tutorial props */
.tut-bg-felt { width: 96%; height: 92%; border-radius: 3cqw; background: radial-gradient(ellipse at 50% 45%, #2d7d61, #174c3b); box-shadow: inset 0 0 0 1.6cqw #7a4a28, inset 0 0 0 2.3cqw #5e361b; }
.tut-bg-pt { width: 10cqw; height: 24cqw; clip-path: polygon(4% 100%, 96% 100%, 50% 0); background: linear-gradient(#cf6446, #8c3420); }
.tut-bg-pt.top { clip-path: polygon(4% 0, 96% 0, 50% 100%); }
.tut-bg-pt.a { background: linear-gradient(#f5e6c4, #d8b984); }
.tut-bg-pt.glow { background: #ffc531; animation: bg-glow 1s ease-in-out infinite; }
.tut-bg-ck {
  width: 8.4cqw; aspect-ratio: 1; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .75), transparent 45%), var(--c);
  box-shadow: inset 0 0 0 .35cqw rgba(0, 0, 0, .35), inset 0 0 0 1.6cqw rgba(0, 0, 0, .06), inset 0 0 0 1.9cqw rgba(0, 0, 0, .14), .3cqw .8cqw 1cqw rgba(0, 0, 0, .45);
}
.tut-bg-bar { width: 8cqw; height: 58cqw; border-radius: 1cqw; background: linear-gradient(90deg, #6e4021, #4c2a12); box-shadow: 0 0 0 .4cqw rgba(0, 0, 0, .25); }
.tut-bg-tray { width: 9cqw; height: 54cqw; border-radius: 1.5cqw; background: linear-gradient(90deg, #2c180b, #4a2a14); }
.tut-bg-tray.glow { background: rgba(255, 197, 49, .25); border: .6cqw dashed #ffc531; animation: bg-glow 1s ease-in-out infinite; transition: opacity .2s; }
.tut-bg-off { width: 8cqw; height: 2.2cqw; border-radius: 1cqw; background: var(--c); box-shadow: inset 0 -.5cqw 0 rgba(0, 0, 0, .3); z-index: 3; }

/* ================= Yacht ================= */

.yt-chips .yt-chip { flex-direction: column; align-items: flex-start; gap: 3px; padding: 5px 11px; min-width: 74px; }
.yt-cn { display: flex; gap: 8px; align-items: baseline; width: 100%; justify-content: space-between; }
.yt-cn span:first-child { max-width: 84px; overflow: hidden; text-overflow: ellipsis; }
.yt-minis { display: flex; gap: 2px; }
.yt-mini { display: block; width: 13px; height: 13px; }
.yt-mini svg { width: 100%; height: 100%; display: block; }
.yt-mini .die-body { fill: #fff; }
.yt-mini .die-pips { fill: #17133a; }
.yt-mini.held .die-body { fill: #ffc531; }
.yt-table { position: relative; flex: none; }
.yt-table .d3-tray {
  background: radial-gradient(ellipse at 50% 60%, #2f9fc0 0%, #1a6e9e 60%, #134f7a 100%);
  box-shadow: inset 0 0 0 5px #0d3a66, inset 0 0 0 8px #082a4c, inset 0 8px 24px rgba(0, 0, 0, .45), 0 6px 18px rgba(0, 0, 0, .3);
}
.yt-table .d3-tray.ready { box-shadow: inset 0 0 0 5px #0d3a66, inset 0 0 0 8px var(--c, var(--accent)), inset 0 8px 24px rgba(0, 0, 0, .45), 0 0 22px rgba(46, 196, 214, .4); }
.yt-table .d3-keep {
  border-radius: 22px 22px 0 0; background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .14));
  border-bottom: 2px dashed rgba(255, 255, 255, .16); transition: opacity .25s;
}
.yt-table .d3-keep::after {
  content: 'Keep'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: rgba(255, 255, 255, .28); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px;
}
.yt-table.kept .d3-keep::after { opacity: 0; }
.yt-table.fresh .d3-keep { opacity: .4; }
.yt-table.fresh .d3:not(.held) .d3-face { filter: saturate(.6) brightness(.82); }
.yt-table .d3.held .d3-shadow { opacity: .5; }
.yt-table .d3-hint { bottom: 12px; }
.yt-rolls {
  display: flex; align-items: center; gap: 8px; margin: 6px auto 0; width: max-content;
  padding: 4px 12px 4px 8px; border-radius: 999px; background: rgba(4, 30, 56, .55); color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap;
}
.yt-rolls[disabled] { opacity: .75; cursor: default; }
.yt-pips { display: flex; gap: 4px; }
.yt-pips i { width: 11px; height: 11px; border-radius: 3px; background: rgba(255, 255, 255, .18); transition: background .25s, transform .25s; }
.yt-pips i.on { background: #ffc531; box-shadow: 0 0 6px rgba(255, 197, 49, .6); }
.yt-burst { position: absolute; left: 0; right: 0; top: 0; height: 206px; display: grid; place-items: center; pointer-events: none; opacity: 0; z-index: 5; }
.yt-burst b {
  font-size: 54px; font-weight: 700; color: #ffc531; letter-spacing: 2px;
  text-shadow: 0 3px 0 #b8540f, 0 6px 18px rgba(0, 0, 0, .5), 0 0 30px rgba(255, 197, 49, .7);
}
.yt-card { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-bottom: 12px; }
.yt-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.yt-row, .yt-sum {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 38px;
  padding: 3px 10px; border-radius: 10px; background: var(--panel); text-align: left; font-size: 14px; font-weight: 600;
  transition: box-shadow .2s, background .2s;
}
.yt-row .lbl { min-width: 0; line-height: 1.1; }
.yt-row small { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt-row b { font-size: 17px; color: var(--muted); display: inline-block; min-width: 22px; text-align: right; }
.yt-row.set { background: rgba(255, 255, 255, .05); }
.yt-row.set b { color: var(--text); }
.yt-row.set.zero b { color: rgba(255, 255, 255, .35); }
.yt-row.can { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15); cursor: pointer; }
.yt-row.can b { color: rgba(255, 255, 255, .45); }
.yt-row.can.good { box-shadow: inset 0 0 0 2px var(--good); }
.yt-row.can.good b { color: var(--good); }
.yt-row.can.best { background: rgba(90, 212, 90, .14); }
.yt-row.can.best b::before { content: '★ '; font-size: 11px; vertical-align: 2px; }
.yt-row:not([disabled]):active { transform: scale(.97); }
.yt-row[disabled] { pointer-events: none; }
.yt-row.stamp { background: rgba(255, 197, 49, .22); box-shadow: inset 0 0 0 2px var(--accent); }
.yt-row.stamp b { color: var(--accent); }
.yt-sum { background: transparent; color: var(--muted); font-size: 13px; }
.yt-sum.bonus { gap: 8px; }
.yt-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .3); overflow: hidden; }
.yt-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2ec4d6, #5ad45a); border-radius: 3px; transition: width .5s; }
.yt-sum.bonus.got { color: var(--good); }
.yt-sum.bonus b { font-size: 12px; }
.yt-sum.total { color: var(--text); font-size: 16px; background: var(--panel2); }
.yt-sum.total b { color: var(--accent); font-size: 20px; }

/* Yacht walkthrough props (stage units: 300 × 190) */
.yt-tut-tray {
  width: 92cqw; height: 84cqh; border-radius: 6cqw;
  background: radial-gradient(ellipse at 50% 60%, #2f9fc0 0%, #1a6e9e 60%, #134f7a 100%); box-shadow: inset 0 0 0 1.6cqw #0d3a66;
}
.yt-tut-keep {
  position: absolute; left: 0; right: 0; top: 0; height: 29%; border-radius: 6cqw 6cqw 0 0; background: rgba(0, 0, 0, .22);
  border-bottom: .6cqw dashed rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .3); font-weight: 700; font-size: 3.4cqw;
  text-transform: uppercase; letter-spacing: .4cqw; padding: 5cqh 4cqw 0 0; text-align: right;
}
.yt-tut-pips { display: flex; gap: 1.4cqw; padding: 1cqw 2.4cqw; border-radius: 4cqw; background: rgba(4, 30, 56, .55); }
.yt-tut-pips i { width: 3.4cqw; height: 3.4cqw; border-radius: .8cqw; background: rgba(255, 255, 255, .2); }
.yt-tut-pips i.on { background: #ffc531; }
.yt-tut-row {
  width: 64cqw; height: 10.5cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 3.4cqw;
  border-radius: 2.6cqw; background: var(--panel); box-shadow: inset 0 0 0 .6cqw var(--good); font-weight: 600; font-size: 4.4cqw;
}
.yt-tut-row b { color: var(--good); font-size: 5cqw; }
.yt-tut-row.best { background: rgba(90, 212, 90, .16); }
.yt-tut-row.stamp { background: rgba(255, 197, 49, .25); box-shadow: inset 0 0 0 .7cqw var(--accent); }
.yt-tut-row.stamp b { color: var(--accent); }

/* ================= Liar's Dice ================= */

.ldc-table {
  position: relative; flex: none; display: flex; flex-direction: column; gap: 6px; padding: 10px 8px 8px; border-radius: 24px;
  background: radial-gradient(ellipse at 50% 55%, #a53a42 0%, #7a2236 60%, #5a1730 100%);
  box-shadow: inset 0 0 0 5px #5b2a1a, inset 0 0 0 7px #3d1a10, inset 0 8px 22px rgba(0, 0, 0, .45), 0 6px 18px rgba(0, 0, 0, .3);
}
.ldc-table::before {
  content: ''; position: absolute; inset: 7px; border-radius: 18px; pointer-events: none; opacity: .2;
  background-image: radial-gradient(rgba(255, 255, 255, .3) 1px, transparent 1.2px); background-size: 6px 6px;
}
.ldc-seats { display: grid; gap: 4px 6px; position: relative; z-index: 1; }
.ldc-seat { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; transition: opacity .3s; }
.ldc-spot { position: relative; width: 100%; height: 62px; }
.ldc-spot::before {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 64px; height: 14px; margin-left: -32px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .45), transparent 70%);
}
.ldc-seat.turn .ldc-spot::before { background: radial-gradient(ellipse, var(--c), transparent 72%); box-shadow: 0 0 18px var(--c); }
.ldc-cup { position: absolute; left: 50%; bottom: 2px; width: 50px; margin-left: -25px; transition: transform .35s cubic-bezier(.3, .7, .3, 1.2), opacity .35s; z-index: 2; }
.ldc-cupsvg { width: 100%; display: block; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .4)); }
.ldc-cup.up { transform: translateY(-34px) rotate(-16deg) scale(.8); opacity: .3; }
.ldc-seat.waiting .ldc-cup { animation: ldc-wobble 1.1s ease-in-out infinite; }
@keyframes ldc-wobble { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-4px) rotate(-6deg); } 85% { transform: translateY(-3px) rotate(6deg); } }
.ldc-under { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); width: 74px; display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: 2px; }
.ldc-under .ldc-face { width: 17px; height: 17px; }
.ldc-who { display: flex; align-items: center; gap: 4px; max-width: 100%; font-size: 12.5px; color: #fff; }
.ldc-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ldc-pips { display: flex; gap: 2px; min-height: 7px; }
.ldc-pips i { width: 7px; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, .85); box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.ldc-seat.out { opacity: .38; }
.ldc-seat.lost .ldc-who b { color: #ffb3b5; }
.ldc-face { display: inline-block; width: 18px; height: 18px; vertical-align: middle; transition: opacity .25s, filter .25s; }
.ldc-face svg { width: 100%; height: 100%; display: block; }
.ldc-face .die-body { fill: #fff; stroke: rgba(0, 0, 0, .2); stroke-width: 4; }
.ldc-face .die-pips { fill: #17133a; }
.ldc-face.miss, .d3.miss { opacity: .35; }
.ldc-face.hit .die-body { fill: #ffc531; stroke: #fff; stroke-width: 6; }
.ldc-face.hit { filter: drop-shadow(0 0 4px #ffc531); }
.ldc-face.wild .die-body { fill: #ff9ad0; }
.d3.hit .d3-face { background: radial-gradient(circle at 30% 25%, #fffbe9, #ffc531); box-shadow: 0 0 12px #ffc531; }
.d3.wild .d3-face { background: radial-gradient(circle at 30% 25%, #fff0f8, #ff9ad0); }

.ldc-center { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 118px; }
.ldc-stack { position: relative; width: 82px; height: 108px; }
.ldc-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 12px; background: linear-gradient(170deg, #fffaf0, #f3e3cf); color: #4a1a2a; rotate: var(--r, 0deg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .4), inset 0 6px 0 var(--c, #ffc531);
}
.ldc-card.old { translate: calc(var(--d) * -9px) calc(var(--d) * 3px); scale: .94; filter: brightness(.72); }
.ldc-card-q { display: flex; align-items: baseline; gap: 2px; margin-top: 6px; }
.ldc-card-q b { font-size: 34px; line-height: 1; }
.ldc-card-q span { font-size: 18px; font-weight: 700; opacity: .6; }
.ldc-card-f { width: 38px; height: 38px; }
.ldc-card-f svg { width: 100%; height: 100%; display: block; }
.ldc-card-f .die-body { fill: #fff; stroke: #4a1a2a; stroke-width: 5; }
.ldc-card-f .die-pips { fill: #4a1a2a; }
.ldc-card-by { font-size: 10.5px; font-weight: 700; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .7; }
.ldc-card.empty { background: rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .7); rotate: -4deg; }
.ldc-card.empty b { font-size: 34px; }
.ldc-card.empty small { font-size: 11px; font-weight: 600; }
.ldc-counter { display: none; flex-direction: column; align-items: center; color: #fff; }
.ldc-counter.on { display: flex; }
.ldc-counter b {
  display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; font-size: 36px;
  background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .25); transition: background .25s, box-shadow .25s;
}
.ldc-counter small { font-size: 12px; font-weight: 600; opacity: .8; margin-top: 3px; }
.ldc-counter.enough b { background: rgba(90, 212, 90, .3); box-shadow: inset 0 0 0 3px var(--good), 0 0 16px rgba(90, 212, 90, .5); }
.ldc-stamp {
  position: absolute; left: calc(50% - 50px); top: 80%; translate: -50% -50%; rotate: -12deg; z-index: 4; pointer-events: none;
  padding: 0 10px; border-radius: 8px; border: 3px solid currentColor; font-size: 24px; font-weight: 700; letter-spacing: 2px;
  background: rgba(255, 250, 240, .92); box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.ldc-stamp:empty { display: none; }
.ldc-stamp.liar, .ldc-stamp.bluff { color: #d8283f; }
.ldc-stamp.true { color: #2c9a3a; }

/* my cup */
.ldc-mine { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; user-select: none; -webkit-user-select: none; }
.ldc-mat {
  position: relative; width: 240px; height: 140px; border-radius: 50% / 40%;
  background: radial-gradient(ellipse at 50% 70%, rgba(165, 58, 66, .9), rgba(90, 23, 48, .2) 70%, transparent 72%);
}
.ldc-mydice { position: absolute; left: 50%; bottom: 10px; width: 112px; margin-left: -56px; display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: 3px 5px; }
.ldc-mydice .d3 { transition: opacity .25s; }
.ldc-mycup { position: absolute; left: calc(50% - 72px); bottom: 0; width: 144px; z-index: 3; cursor: grab; transition: transform .22s cubic-bezier(.3, .7, .3, 1.15), opacity .3s; }
.ldc-mycup.held { transition: none; cursor: grabbing; }
.ldc-mine.peek .ldc-mycup { transform: translate(92px, -50px) rotate(30deg); }
.ldc-mine.up .ldc-mycup { transform: translate(0, -70px) rotate(-14deg) scale(.85); opacity: .25; }
.ldc-mine.can-shake .ldc-mycup { animation: ldc-ready 1.4s ease-in-out infinite; }
@keyframes ldc-ready { 0%, 70%, 100% { filter: none; } 80% { filter: drop-shadow(0 0 10px #ffc531) brightness(1.12); } 85% { translate: 0 -6px; } }
.ldc-mine.out .ldc-mycup { opacity: .25; }
.ldc-myhint { color: var(--muted); font-size: 13px; font-weight: 600; text-align: center; min-height: 18px; }

/* raising the bid */
.ldc-ctrl { display: flex; flex-direction: column; gap: 10px; }
.ldc-ctrl:empty { display: none; }
.ldc-raise { display: flex; gap: 12px; align-items: stretch; background: var(--panel); border-radius: 16px; padding: 10px; }
.ldc-draft {
  flex: none; width: 92px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; border-radius: 14px;
  background: linear-gradient(170deg, #fffaf0, #f3e3cf); color: #4a1a2a; box-shadow: 0 4px 0 rgba(0, 0, 0, .25), inset 0 0 0 2px #ffc531; cursor: ns-resize;
}
.ldc-arrow { width: 100%; height: 26px; color: #8a2d4b; font-size: 14px; }
.ldc-arrow:active { background: rgba(138, 45, 75, .12); }
.ldc-draft-mid { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.ldc-draft-q { display: flex; align-items: baseline; gap: 2px; }
.ldc-draft-q b { font-size: 32px; line-height: 1; display: inline-block; }
.ldc-draft-q span { font-size: 17px; font-weight: 700; opacity: .6; }
.ldc-draft-f { width: 36px; height: 36px; }
.ldc-draft-f svg { width: 100%; height: 100%; display: block; }
.ldc-draft-f .die-body { fill: #fff; stroke: #4a1a2a; stroke-width: 5; }
.ldc-draft-f .die-pips { fill: #4a1a2a; }
.ldc-side { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.ldc-side small { color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; }
.ldc-faces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; justify-items: center; }
.ldc-fbtn { width: 46px; height: 46px; border-radius: 12px; padding: 3px; transition: transform .15s; }
.ldc-fbtn svg { width: 100%; height: 100%; display: block; }
.ldc-fbtn .die-body { fill: #fff; stroke: transparent; stroke-width: 6; }
.ldc-fbtn .die-pips { fill: #17133a; }
.ldc-fbtn.on { transform: scale(1.12); }
.ldc-fbtn.on .die-body { fill: #ffc531; stroke: #fff; }
.ldc-liar { background: var(--bad); color: #fff; }

/* Liar's Dice walkthrough props */
.ldc-tut-felt { width: 90cqw; height: 40cqh; border-radius: 50%; background: radial-gradient(ellipse, #a53a42, #7a2236 60%, transparent 72%); }
.ldc-tut-felt.wide { width: 96cqw; height: 66cqh; border-radius: 6cqw; background: radial-gradient(ellipse at 50% 55%, #a53a42, #7a2236 60%, #5a1730); box-shadow: inset 0 0 0 1.4cqw #5b2a1a; }
.ldc-tut-cup { width: 30cqw; z-index: 3; }
.ldc-tut-cup.small { width: 17cqw; }
.ldc-tut-cup svg { width: 100%; display: block; filter: drop-shadow(0 1cqw 1cqw rgba(0, 0, 0, .4)); }
.ldc-tut-dice { display: flex; flex-wrap: wrap; justify-content: center; gap: 1cqw; width: 21cqw; }
.ldc-tut-dice .ldc-face { width: 6cqw; height: 6cqw; }
.ldc-tut-dice.small { width: 22cqw; }
.ldc-tut-dice.small .ldc-face { width: 5.6cqw; height: 5.6cqw; }
.ldc-tut-card {
  width: 20cqw; height: 26cqw; border-radius: 3cqw; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(170deg, #fffaf0, #f3e3cf); color: #4a1a2a; box-shadow: 0 1.5cqw 3cqw rgba(0, 0, 0, .4), inset 0 1.6cqw 0 #ffc531; z-index: 2;
}
.ldc-tut-card.draft { box-shadow: 0 1.5cqw 3cqw rgba(0, 0, 0, .4), inset 0 0 0 .7cqw #ffc531; }
.ldc-tut-card .q { font-size: 5cqw; font-weight: 700; margin-top: 1.4cqw; }
.ldc-tut-card .q b { font-size: 9cqw; }
.ldc-tut-card .f { width: 10cqw; height: 10cqw; }
.ldc-tut-card .f svg { width: 100%; height: 100%; display: block; }
.ldc-tut-card .die-body { fill: #fff; stroke: #4a1a2a; stroke-width: 5; }
.ldc-tut-card .die-pips { fill: #4a1a2a; }
.ldc-tut-count { width: 17cqw; height: 17cqw; border-radius: 50%; display: grid; place-items: center; font-size: 9cqw; font-weight: 700; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 .8cqw rgba(255, 255, 255, .25); }
.ldc-tut-liar { padding: 2cqw 5cqw; border-radius: 3cqw; background: var(--bad); color: #fff; font-weight: 700; font-size: 5.4cqw; }

/* ================= Categories ================= */

.ct-head { display: flex; gap: 10px; align-items: center; }
/* the letter, on a face of the die */
.ct-letter {
  flex: none; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #fff 0%, #f4f1ff 45%, #dcd6f5 100%); color: #e2484f; font-size: 40px; font-weight: 700;
  box-shadow: inset 0 -5px 0 rgba(23, 19, 58, .14), inset 0 0 0 2px rgba(23, 19, 58, .06), 0 5px 12px rgba(0, 0, 0, .35);
}
.ct-letter.blank { color: rgba(23, 19, 58, .28); }
.ct-info { min-width: 0; flex: 1; }
.ct-info b { font-size: 15px; color: var(--muted); }
.ct-info .chip { padding: 3px 10px; font-size: 13px; }
.ct-info .chips { flex-wrap: wrap; }
/* sand timer in a countdown ring */
.ct-timer { flex: none; width: 60px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ct-sand { width: 56px; height: 56px; display: block; }
.ct-secs { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ct-ring-bg { fill: rgba(0, 0, 0, .25); stroke: rgba(255, 255, 255, .12); stroke-width: 5; }
.ct-ring { fill: none; stroke: var(--good); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke .3s; }
.ct-glass { fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .8); stroke-width: 1.4; stroke-linejoin: round; }
.ct-cap { fill: #c58a52; }
.ct-stream { stroke: #f0a830; stroke-width: 1.5; stroke-dasharray: 2 2; animation: ct-flow .4s linear infinite; }
@keyframes ct-flow { to { stroke-dashoffset: -4; } }
.ct-timer.low .ct-ring { stroke: var(--bad); }
.ct-timer.low .ct-secs { color: var(--bad); }
.ct-timer.low .ct-sand { animation: ct-pulse 1s ease-in-out infinite; }
@keyframes ct-pulse { 50% { transform: scale(1.08); } }
/* the die tray: shown while the letter is rolled, tucked away after */
.ct-traybox { display: flex; flex-direction: column; gap: 6px; max-height: 230px; overflow: hidden; transition: max-height .45s ease, opacity .3s, margin .45s; }
.ct-traybox:empty { display: none; }
.ct-traybox.gone { max-height: 0; opacity: 0; margin-bottom: -12px; }
.ct-traycap { text-align: center; font-size: 16px; min-height: 22px; }
.ct-got span { color: var(--accent); font-size: 24px; display: inline-block; animation: bounce-in .5s cubic-bezier(.2, 1.4, .4, 1); }
.ct-traybox .d3-face svg text { paint-order: stroke; }
.ct-body { display: flex; flex-direction: column; gap: 8px; }
.ct-q { display: flex; flex-direction: column; gap: 4px; }
.ct-q span { font-size: 14px; font-weight: 600; color: var(--muted); }
.ct-q span i, .ct-cat h4 i {
  display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; font-style: normal;
  background: rgba(255, 197, 49, .2); color: var(--accent); font-size: 12px; font-weight: 700; vertical-align: 1px;
}
.ct-in { min-height: 46px; font-size: 18px; padding: 8px 14px; transition: opacity .2s; }
.ct-in:disabled { opacity: .6; }
.ct-cat { background: var(--panel); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 4px; transition: opacity .3s; }
.ct-cat h4 { margin: 0 0 2px; font-size: 15px; color: var(--muted); }
.ct-cat.pending { opacity: .35; }
.ct-cat.pending .ct-ans { visibility: hidden; }
.ct-cat.open { animation: ct-open .3s ease-out; }
@keyframes ct-open { from { transform: scale(.97); } }
.ct-ans { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 12px; text-align: left; min-height: 34px; transition: background .2s; }
.ct-ans .t { position: relative; flex: 0 1 auto; margin-right: auto; font-weight: 600; min-width: 0; overflow-wrap: anywhere; transition: opacity .3s; }
/* crossed out with a pen stroke */
.ct-ans .t::after {
  content: ''; position: absolute; left: -3px; top: 52%; height: 3px; width: 0; border-radius: 2px; background: #ff5a5f;
  transform: rotate(-2deg); transform-origin: 0 50%; transition: width .35s ease-out;
}
.ct-ans.struck .t { opacity: .6; }
.ct-ans.struck .t::after { width: calc(100% + 6px); }
.ct-ans .r { font-size: 12px; color: var(--muted); }
.ct-ans .f { font-size: 12px; }
.ct-ans.ok .r { color: var(--good); font-weight: 700; font-size: 15px; display: inline-block; animation: bounce-in .4s cubic-bezier(.2, 1.4, .4, 1); }
.ct-ans.ok { background: rgba(90, 212, 90, .1); }
.ct-ans.no:not(.struck) .t { opacity: .45; }
.ct-ans.flagged { background: rgba(255, 90, 95, .15); }
.ct-ans[disabled] { pointer-events: none; }
.ct-foot { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.ct-sum { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; font-weight: 600; color: var(--accent); font-size: 14px; }
/* tutorial props */
.tut-ct-sheet { width: 54cqw; padding: 2cqw 3cqw; border-radius: 3cqw; background: var(--panel); display: flex; flex-direction: column; gap: 1.4cqw; }
.tut-ct-row { display: flex; align-items: center; gap: 2cqw; font-size: 3.6cqw; font-weight: 600; }
.tut-ct-row .t { position: relative; flex: 1; }
.tut-ct-row .r { color: var(--good); font-weight: 700; }
.tut-ct-letter { width: 15cqw; height: 15cqw; border-radius: 3.5cqw; font-size: 10cqw; }
.ct-timer.tut-item .ct-sand { width: 100%; height: auto; }
.ct-timer.tut-item .ct-secs { font-size: 3.4cqw; }

/* ================= Werewolf ================= */

/* the sky behind the whole screen: dusk, night (stars, moon) and day (sunrise) */
.ww-sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
body:has(> .ww-sky) > #app { position: relative; z-index: 1; }
.ww-sky-n, .ww-sky-d { position: absolute; inset: 0; transition: opacity 1.6s ease; }
.ww-sky-n { background: linear-gradient(180deg, #05051a 0%, #0d0c33 55%, #1a1850 100%); opacity: 0; }
.ww-sky-d { background: radial-gradient(120% 70% at 50% 100%, rgba(255, 166, 107, .55), transparent 60%), linear-gradient(180deg, #2c2470 0%, #5a3f8f 60%, #b0607a 100%); opacity: 0; }
.ww-sky.is-night .ww-sky-n { opacity: 1; }
.ww-sky.is-dusk .ww-sky-n { opacity: .75; }
.ww-sky.is-day .ww-sky-d { opacity: .55; }
.ww-stars { position: absolute; inset: 0; opacity: 0; transition: opacity 2s ease .4s; }
.ww-sky.is-night .ww-stars { opacity: 1; }
.ww-sky.is-dusk .ww-stars { opacity: .45; }
.ww-stars i { position: absolute; width: var(--z); height: var(--z); border-radius: 50%; background: #fff6c8; box-shadow: 0 0 4px #fff6c8; animation: ww-twinkle 2.8s ease-in-out infinite; }
@keyframes ww-twinkle { 50% { opacity: .25; } }
.ww-moon, .ww-sun { position: absolute; right: 5%; top: 7%; width: 92px; height: 92px; transition: transform 1.8s cubic-bezier(.3, .7, .3, 1), opacity 1.2s; }
.ww-moon svg, .ww-sun svg { width: 100%; height: 100%; display: block; }
.ww-moon { transform: translateY(70vh) scale(.8); opacity: 0; }
.ww-sky.is-night .ww-moon { transform: none; opacity: 1; }
.ww-sky.is-dusk .ww-moon { transform: translateY(40vh); opacity: .5; }
.ww-sun { left: 4%; right: auto; width: 120px; height: 120px; transform: translateY(80vh); opacity: 0; }
.ww-sky.is-day .ww-sun { transform: translateY(2vh); opacity: .85; transition-delay: .3s; }
.ww-village { position: absolute; left: 0; right: 0; bottom: 0; height: 18vh; opacity: .9; }
.ww-village svg { width: 100%; height: 100%; display: block; }
.ww-win rect { opacity: .15; transition: opacity 1.5s; }
.ww-sky.is-night .ww-win rect, .ww-sky.is-dusk .ww-win rect { opacity: .9; }

.ww-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.game-area.ww-dark .banner:not(.mine) { background: rgba(5, 5, 26, .45); }

/* the narrator */
.ww-narr-box { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: 14px; background: rgba(0, 0, 0, .28); min-height: 46px; }
.ww-narr-ic { font-size: 18px; line-height: 1.4; }
.ww-narr { font-style: italic; color: #e6e1ff; line-height: 1.4; font-size: 15px; }
.ww-narr.typing::after { content: '▍'; color: var(--accent); animation: ww-caret .6s steps(2) infinite; font-style: normal; }
@keyframes ww-caret { 50% { opacity: 0; } }

/* the secret role card: press and hold to flip it up */
.ww-rc {
  position: relative; display: block; width: 100%; max-width: 380px; margin: 0 auto; height: 360px; perspective: 1000px;
  touch-action: none; -webkit-touch-callout: none; padding: 0; text-align: center;
}
.ww-rc-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .38s cubic-bezier(.3, .7, .35, 1.15); }
.ww-rc.peek .ww-rc-in { transform: rotateY(180deg) scale(1.02); }
.ww-rc-back, .ww-rc-face {
  position: absolute; inset: 0; border-radius: 22px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 255, 255, .14);
}
.ww-rc-back {
  background: radial-gradient(circle at 50% 35%, rgba(255, 246, 200, .16), transparent 45%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 8px, transparent 8px 16px), linear-gradient(160deg, #2a2d78, #12122e);
}
.ww-rc-face { transform: rotateY(180deg); background: linear-gradient(160deg, #3b3f8f, #1d1d4a); }
.ww-rc-face .wolves { background: radial-gradient(circle at 50% 25%, rgba(255, 90, 95, .35), transparent 55%), linear-gradient(160deg, #4a1f4f, #1d0f2e); }
.ww-rc-face .village { background: radial-gradient(circle at 50% 25%, rgba(46, 211, 198, .25), transparent 55%), linear-gradient(160deg, #2c4f8f, #15183f); }
.ww-rc-big { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 18px; }
.ww-rc-big .ww-rc-art { width: 120px; height: 120px; }
.ww-rc-big small { color: var(--muted); font-weight: 600; }
.ww-rc-big b { font-size: 30px; }
.ww-rc-big p { margin: 4px 0 0; color: #d8d4ff; line-height: 1.35; font-size: 15px; }
.ww-rc-pack { color: var(--accent) !important; font-weight: 700; }
.ww-rc-art svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.ww-rc-lbl { position: absolute; left: 0; right: 0; bottom: 16px; font-weight: 700; color: var(--accent); letter-spacing: .5px; animation: ww-pulse 1.6s ease-in-out infinite; }
@keyframes ww-pulse { 50% { opacity: .5; } }
.ww-rc.small { height: 62px; max-width: none; }
.ww-rc.small .ww-rc-face { transform: rotateX(180deg); }
.ww-rc.small.peek .ww-rc-in { transform: rotateX(180deg); }
.ww-rc.small .ww-rc-back, .ww-rc.small .ww-rc-face { border-radius: 16px; }
.ww-rc-row { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 6px 14px; text-align: left; }
.ww-rc-row .ww-rc-art { width: 48px; height: 48px; flex: none; }
.ww-rc-row small { display: block; color: var(--muted); font-weight: 600; font-size: 12px; }
.ww-rc-row b { font-size: 19px; }
.ww-rc-row .ww-rc-pack { margin-left: auto; font-size: 12px; max-width: 45%; }

/* player cards that turn over to show a role */
.ww-dawn { display: flex; justify-content: center; perspective: 900px; }
.ww-fc { width: 132px; height: 168px; border-radius: 18px; transform-style: preserve-3d; }
.ww-fc-back, .ww-fc-face {
  width: 100%; height: 100%; border-radius: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 255, 255, .14); text-align: center;
}
.ww-fc-back { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 7px, transparent 7px 14px), linear-gradient(160deg, #2a2d78, #12122e); }
.ww-fc-back b, .ww-fc-face b { font-size: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ww-fc-emb { width: 44px; height: 44px; opacity: .8; }
.ww-fc-emb svg, .ww-fc-art svg { width: 100%; height: 100%; display: block; }
.ww-fc-face { background: linear-gradient(160deg, #2c4f8f, #15183f); }
.ww-fc-face.wolves { background: radial-gradient(circle at 50% 30%, rgba(255, 90, 95, .4), transparent 60%), linear-gradient(160deg, #4a1f4f, #1d0f2e); }
.ww-fc-face small { color: var(--accent); font-weight: 700; }
.ww-fc-art { width: 76px; height: 76px; }
.ww-fc.up { animation: ww-glow 1.2s ease-out 1; }
@keyframes ww-glow { 0% { filter: drop-shadow(0 0 0 rgba(255, 197, 49, 0)); } 30% { filter: drop-shadow(0 0 18px rgba(255, 197, 49, .8)); } 100% { filter: none; } }
.ww-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; perspective: 900px; }
.ww-fc.small { width: 100%; height: 132px; }
.ww-fc.small .ww-fc-art { width: 54px; height: 54px; }
.ww-fc.small b { font-size: 14px; }
.ww-fc.small small { font-size: 12px; }

/* players */
.ww-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ww-p {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 16px; background: var(--panel);
  text-align: left; min-height: 48px; transition: box-shadow .2s, transform .15s; position: relative;
}
.game-area.ww-dark .ww-p { background: rgba(42, 34, 102, .82); }
.ww-p.tap { cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }
.ww-p.tap:active { transform: scale(.97); }
.ww-p.on { box-shadow: 0 0 0 3px var(--accent), 0 0 16px rgba(255, 197, 49, .5); }
.ww-p.dead { opacity: .4; }
.ww-p.me .n::after { content: ' ·'; color: var(--muted); }
.ww-p .n { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ww-p .role { font-size: 20px; }
.ww-p .x { font-size: 12px; color: var(--accent); font-weight: 700; display: flex; gap: 4px; align-items: center; }
.ww-mark { font-size: 20px; animation: ww-mark .4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes ww-mark { from { transform: scale(2.2) rotate(-20deg); opacity: 0; } }
.ww-checks { background: var(--panel); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.game-area.ww-dark .ww-checks { background: rgba(42, 34, 102, .82); }
.ww-checks small { color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 11px; }
.ww-seen { box-shadow: inset 0 0 0 2px rgba(166, 107, 255, .5); }
.btn.on { box-shadow: 0 0 0 3px var(--accent); }

/* raised hands: votes landing on a player */
.ww-hands { display: flex; flex-wrap: wrap; gap: 3px; width: 100%; padding-left: 2px; }
.ww-skip .ww-hands { width: auto; }
.ww-hand { position: relative; display: inline-flex; }
.ww-hand i { position: absolute; right: -5px; top: -9px; font-style: normal; font-size: 13px; transform-origin: 50% 100%; }
.ww-hand.new i { animation: ww-raise .6s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes ww-raise { 0% { transform: translateY(10px) scale(.4); opacity: 0; } 60% { transform: translateY(-4px) rotate(-14deg) scale(1.2); opacity: 1; } 80% { transform: rotate(10deg); } }
.ww-votes { display: flex; flex-wrap: wrap; gap: 6px; }
.ww-vote { display: inline-flex; align-items: center; gap: 5px; background: rgba(0, 0, 0, .2); border-radius: 999px; padding: 2px 10px 2px 2px; font-size: 13px; font-weight: 600; }
.ww-vote i { font-style: normal; }
/* the narrator's clock: a thin bar that runs down until the timer steps in */
.ww-clock { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; margin: -4px 6px 0; opacity: 0; transition: opacity .3s; }
.ww-clock.on { opacity: 1; }
.ww-clock i { display: block; height: 100%; background: linear-gradient(90deg, #ffc531, #ff7a59); transform-origin: 0 50%; border-radius: inherit; }

/* night order: which step the village is on */
.ww-steps { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; font-size: 12px; font-weight: 700; }
.ww-steps span { padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .28); color: var(--muted); transition: background .3s, color .3s; }
.ww-steps span.on { background: rgba(141, 147, 240, .45); color: #fff; box-shadow: 0 0 12px rgba(141, 147, 240, .6); }
.ww-steps span.past { opacity: .55; text-decoration: line-through; }

/* the cast: which roles are in this game */
.ww-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ww-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 6px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(46, 211, 198, .14); box-shadow: inset 0 0 0 1.5px rgba(46, 211, 198, .35); color: #e6e1ff; }
.ww-chip.wolves { background: rgba(255, 90, 95, .16); box-shadow: inset 0 0 0 1.5px rgba(255, 90, 95, .45); }
.ww-chip.jester { background: rgba(199, 155, 255, .16); box-shadow: inset 0 0 0 1.5px rgba(199, 155, 255, .45); }
.ww-chip span { font-size: 16px; }
.ww-chip i { font-style: normal; color: var(--accent); }

/* the mayor's sash, lovers' hearts */
.ww-mayor { flex-direction: row; align-items: center; gap: 10px; }
.ww-mayor-art { width: 48px; height: 48px; flex: none; animation: ww-sway 3s ease-in-out infinite; transform-origin: 50% 10%; }
.ww-mayor-art svg { width: 100%; height: 100%; display: block; }
.ww-mayor p { margin: 2px 0 0; color: #d8d4ff; font-size: 13px; line-height: 1.3; }
@keyframes ww-sway { 50% { transform: rotate(-6deg); } }
.ww-sash, .ww-heart { font-size: 16px; }
.ww-heart { animation: ww-beat 1.2s ease-in-out infinite; }
@keyframes ww-beat { 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } 60% { transform: none; } }
.ww-love { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 14px; background: linear-gradient(120deg, rgba(255, 90, 143, .32), rgba(122, 15, 56, .35)); box-shadow: inset 0 0 0 2px rgba(255, 154, 192, .35); }
.ww-love > span { font-size: 26px; animation: ww-beat 1.2s ease-in-out infinite; }
.ww-love small { display: block; color: #ffd1e4; font-size: 12px; line-height: 1.3; }
.ww-love-box { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: rgba(255, 90, 143, .18); }
.ww-love-box p { margin: 0; font-weight: 600; }
.ww-love-art { width: 54px; height: 54px; flex: none; }
.ww-love-art svg { width: 100%; height: 100%; display: block; }

/* the witch's shelf */
.ww-shelf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ww-potion {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border-radius: 18px; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .2)), rgba(42, 34, 102, .82); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1);
  transition: transform .15s, box-shadow .2s;
}
.ww-potion:active:not(:disabled) { transform: scale(.97); }
.ww-potion.on { box-shadow: 0 0 0 3px var(--accent), 0 0 18px rgba(255, 197, 49, .5); }
.ww-potion.save.on { box-shadow: 0 0 0 3px #5ad47a, 0 0 18px rgba(90, 212, 122, .55); }
.ww-potion.poison.on { box-shadow: 0 0 0 3px #e0407a, 0 0 18px rgba(224, 64, 122, .55); }
.ww-potion.used { opacity: .45; }
.ww-potion-art { width: 52px; height: 70px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); }
.ww-potion.on .ww-potion-art { animation: ww-bubble .9s ease-in-out infinite; }
@keyframes ww-bubble { 50% { transform: translateY(-4px) rotate(-5deg); } }
.ww-potion-art svg { width: 100%; height: 100%; display: block; }
.ww-potion b { font-size: 15px; }
.ww-potion small { color: #d8d4ff; font-size: 12px; line-height: 1.25; }
.ww-quiet { opacity: .6; }
.ww-quiet .ww-p { pointer-events: none; }

/* the hunter's aim, the arrow */
.ww-p.ww-aim.tap { box-shadow: inset 0 0 0 2px rgba(255, 90, 95, .45); }
.ww-p.ww-aim.on { box-shadow: 0 0 0 3px #ff5a5f, 0 0 16px rgba(255, 90, 95, .6); }
.ww-arrow { position: fixed; z-index: 9998; width: 80px; height: 24px; pointer-events: none; }
.ww-arrow svg { width: 100%; height: 100%; display: block; }
.ww-dawn.many { gap: 10px; flex-wrap: wrap; }
.ww-dawn.many .ww-fc:not(.small) { width: 118px; height: 152px; }
.ww-ball-back { background: radial-gradient(circle at 50% 40%, rgba(167, 123, 255, .45), transparent 65%), linear-gradient(160deg, #2a2d78, #12122e); }
.ww-ball-back .ww-fc-art { animation: ww-bubble 1.4s ease-in-out infinite; }

/* the mayor's hand counts twice */
.ww-hand.x2 b { position: absolute; left: -4px; bottom: -6px; font-size: 9px; font-weight: 800; color: #17133a; background: var(--accent); border-radius: 999px; padding: 0 3px; line-height: 12px; }

/* tutorial props */
.ww-tbg { width: 100%; height: 100%; background: linear-gradient(180deg, #1a1850, #3a2f8a); transition: background 1s; z-index: 0; }
.ww-tbg.night { background: linear-gradient(180deg, #05051a, #12123a); }
.ww-tbg.day { background: radial-gradient(120% 70% at 50% 100%, rgba(255, 166, 107, .6), transparent 60%), linear-gradient(180deg, #3a2f8a, #8a4f8f); }
.ww-tbg::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s .3s;
  background-image: radial-gradient(1.5px 1.5px at 20% 20%, #fff6c8, transparent), radial-gradient(1.5px 1.5px at 60% 12%, #fff6c8, transparent), radial-gradient(1px 1px at 80% 30%, #fff6c8, transparent), radial-gradient(1px 1px at 40% 38%, #fff6c8, transparent), radial-gradient(1.5px 1.5px at 10% 45%, #fff6c8, transparent); }
.ww-tbg.night::before { opacity: 1; }
.ww-tmoon, .ww-tsun { width: 22cqw; z-index: 1; }
.ww-tmoon svg, .ww-tsun svg { width: 100%; display: block; }
.ww-tcard { width: 32cqw; height: 44cqw; perspective: 600px; z-index: 2; }
.ww-tcard-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .38s cubic-bezier(.3, .7, .35, 1.15); }
.ww-tcard.peek .ww-tcard-in { transform: rotateY(180deg); }
.ww-tcard-back, .ww-tcard-face { position: absolute; inset: 0; border-radius: 3cqw; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 1.5cqw 3cqw rgba(0, 0, 0, .45), inset 0 0 0 .6cqw rgba(255, 255, 255, .15); }
.ww-tcard-back { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 2cqw, transparent 2cqw 4cqw), linear-gradient(160deg, #2a2d78, #12122e); }
.ww-tcard-back svg { width: 45%; }
.ww-tcard-face { transform: rotateY(180deg); background: linear-gradient(160deg, #4a1f4f, #1d0f2e); font-size: 4.4cqw; }
.ww-tcard-art { width: 70%; }
.ww-tcard-art svg { width: 100%; display: block; }
.ww-tperson { width: 13cqw; height: 13cqw; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 5cqw; color: rgba(0, 0, 0, .55); background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), transparent 45%), var(--c); box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, .4); z-index: 2; }
.ww-tcard-face.village { background: linear-gradient(160deg, #2c4f8f, #15183f); }
.ww-tcard-face.jester { background: linear-gradient(160deg, #4a2a7f, #1d0f3e); }
.ww-tpill { padding: .8cqw 2.6cqw; border-radius: 99px; background: rgba(0, 0, 0, .35); color: rgba(255, 255, 255, .55); font-size: 3.6cqw; font-weight: 700; white-space: nowrap; z-index: 2; transition: background .3s, color .3s, box-shadow .3s; }
.ww-tpill.on { background: rgba(141, 147, 240, .55); color: #fff; box-shadow: 0 0 3cqw rgba(141, 147, 240, .7); }
.ww-tart { width: 20cqw; height: 20cqw; z-index: 2; animation: ww-mark .4s cubic-bezier(.2, 1.6, .4, 1); }
.ww-tart svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1cqw 1.5cqw rgba(0, 0, 0, .4)); }
.ww-tarrow { font-size: 9cqw; color: #ffd66b; z-index: 3; transform: rotate(45deg); }
.ww-tperson { transition: opacity .4s, filter .4s, transform .4s; }
.ww-tperson.gone { opacity: .35; filter: grayscale(1); transform: translate(-50%, -50%) scale(.85) !important; }
.ww-tmark, .ww-thand { font-size: 8cqw; z-index: 3; }
.ww-tmark span, .ww-thand span { display: inline-block; animation: ww-mark .4s cubic-bezier(.2, 1.6, .4, 1); }
.ww-thand span { animation: ww-raise .5s cubic-bezier(.2, 1.5, .4, 1); }

/* ================= Equichess ================= */

.eq {
  --sq-light: #fffaf0; --sq-dark: #e6ebf8; --coord: #8790c2; --sel: rgba(61, 143, 224, .42); --last: rgba(61, 143, 224, .2); --last-to: rgba(61, 143, 224, .36);
  --dot: rgba(25, 35, 50, .22); --hgood: 40, 170, 95; --hokay: 236, 178, 30; --hbad: 224, 58, 58; --ease-natural: cubic-bezier(.4, 0, .2, 1);
  display: flex; flex-direction: column; gap: 8px;
}
.eq .board-wrap { position: relative; border-radius: 20px; padding: 7px; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); width: min(100%, calc(100dvh - 330px - var(--safe-top) - var(--safe-bottom))); align-self: center; }
@supports not (height: 100dvh) { .eq .board-wrap { width: min(100%, calc(100vh - 330px)); } }
.eq .board { position: relative; isolation: isolate; aspect-ratio: 1; width: 100%; border-radius: 11px; outline: 2px solid var(--ink); overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.eq .board .squares, .eq .board .marks { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.eq .board .marks { z-index: 4; pointer-events: none; }
.eq .board .sheen { display: none; } /* no glassy glare: flat squares, like the rest of the app */
.eq .sq { position: relative; background: var(--sq-light); }
.eq .sq.dark { background: var(--sq-dark); }
.eq .sq::before, .eq .sq::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.eq .sq.last::before { background: var(--last); }
.eq .sq.last-to::before { background: var(--last-to); } /* where the piece landed: stronger than where it left */
/* a queued premove: dashed plum outlines (plum is used for nothing else on the board) */
.eq .sq.pre { outline: 3px dashed rgba(123, 63, 160, .9); outline-offset: -4px; }
.eq .sq.pre-to { background-image: linear-gradient(rgba(123, 63, 160, .22), rgba(123, 63, 160, .22)); }
.eq .sq.sel::before { background: var(--sel); }
.eq .sq.check::before { background: radial-gradient(circle at center, rgba(220, 50, 50, .55) 0 30%, rgba(220, 50, 50, 0) 70%); }
.eq .sq.h-good::after { background: rgba(var(--hgood), .78); }
.eq .sq.h-okay::after { background: rgba(var(--hokay), .78); }
.eq .sq.h-bad::after { background: rgba(var(--hbad), .78); }
.eq .sq::after { transition: background-color .14s var(--ease-natural); }
.eq .coord { position: absolute; z-index: 3; font-family: var(--f-body); font-size: 10px; font-weight: 700; line-height: 1; color: var(--coord); pointer-events: none; }
.eq .coord.file { right: 3px; bottom: 3px; }
.eq .coord.rank { left: 3px; top: 3px; }
.eq .pieces { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.eq .pc { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; padding: .5%; will-change: transform; transition: transform 220ms var(--ease-natural), opacity .18s ease; filter: drop-shadow(0 1.5px 1.5px rgba(20, 30, 45, .18)); }
.eq .pc img { width: 100%; height: 100%; display: block; pointer-events: none; }
.eq .pc.instant { transition: none; }
.eq .pc.dragging { z-index: 10; transition: none; filter: drop-shadow(0 8px 10px rgba(20, 30, 45, .3)); }
.eq .pc.gone { opacity: 0; transition: transform 220ms var(--ease-natural), opacity .22s ease .1s; }
.eq .pc img { transition: transform .18s var(--ease-natural); }
.eq .pc.gone img { transform: scale(.35) rotate(28deg) translateY(30%); }
.eq .pc.dragging img { transform: scale(1.18) translateY(-8%); }
.eq .pc.landed img { animation: eq-land .22s var(--ease-natural); }
@keyframes eq-land { 40% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .eq .pc.gone img, .eq .pc.dragging img { transform: none; } }

/* tutorial props */
.tut-eq-sq { width: 13cqw; aspect-ratio: 1; }
.tut-eq-sq.l { background: #fffaf0; } .tut-eq-sq.d { background: #e6ebf8; }
.tut-eq-sq.good { background: rgba(40, 170, 95, .78); } .tut-eq-sq.okay { background: rgba(236, 178, 30, .78); } .tut-eq-sq.bad { background: rgba(224, 58, 58, .78); }
.tut-eq-pc { width: 12cqw; aspect-ratio: 1; z-index: 3; filter: drop-shadow(0 .5cqw .5cqw rgba(20, 30, 45, .25)); }
.tut-eq-pc img { width: 100%; height: 100%; display: block; }
.tut-eq-dot { width: 3.4cqw; aspect-ratio: 1; border-radius: 50%; background: rgba(25, 35, 50, .25); z-index: 2; }
.eq .mk { position: relative; display: grid; place-items: center; }
.eq .mk .dot { width: 26%; height: 26%; border-radius: 50%; background: var(--dot); }
.eq .mk .cap { position: absolute; inset: 6%; border-radius: 50%; box-shadow: inset 0 0 0 4px var(--dot); }
.eq .mk.over::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px rgba(25, 35, 50, .35); }
.eq .promo { position: absolute; z-index: 20; width: 12.5%; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .92); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.eq .promo button { border: 0; padding: 4%; background: transparent; aspect-ratio: 1; cursor: pointer; }
.eq .promo img { width: 100%; height: 100%; display: block; }
.eq .promo-scrim { position: absolute; inset: 0; z-index: 19; background: rgba(15, 20, 30, .25); }
.eq-player { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 3px 10px; border-radius: 16px; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); transition: box-shadow .2s; }
.eq-player.to-move { box-shadow: 0 0 0 3px var(--accent), 0 4px 0 var(--ink); }
.eq-player .who { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.eq-player .who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-player .side { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .3); }
.eq-player .side.w { background: #fff; }
.eq-player .side.b { background: #22262c; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.eq-player .badge { font-size: 11px; font-weight: 700; color: var(--muted); background: rgba(5, 9, 40, .45); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.eq-player .badge.on { color: var(--good); }
.eq-player .captured { display: flex; align-items: center; }
.eq-player .captured img { width: 16px; height: 16px; margin-right: -5px; }
.eq-player .captured .adv { margin-left: 8px; font-size: 13px; color: var(--muted); }
.eq-player .clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 17px; padding: 2px 8px; border-radius: 8px; background: var(--ink); color: var(--muted); }
.eq-player .clock.run { background: var(--text); color: var(--ink); }
.eq-player .clock.run.low { background: var(--bad); color: #fff; }
.eq-status { text-align: center; min-height: 40px; display: flex; flex-direction: column; justify-content: center; }
.eq-status small { color: var(--muted); font-size: 13px; }
.eq-status.mine b { color: var(--accent); }
.eq-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.eq-tools .grow { flex: 1; }
.eq-tools .btn.on { box-shadow: 0 0 0 2px var(--good); color: var(--good); }
.eq-tools .btn.danger { color: #ffb0b3; }
.eq-setup { position: relative; display: flex; flex-direction: column; gap: 12px; }
.eq-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.eq-side { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 8px 12px; border-radius: 18px; background: var(--panel); text-align: center; border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px transparent, 0 5px 0 var(--ink); transition: box-shadow .25s; min-width: 0; }
.eq-side.ready { box-shadow: inset 0 0 0 3px var(--good), 0 5px 0 var(--ink); }
.eq-side.pulse { animation: eq-pulse .45s var(--ease-natural, ease); }
@keyframes eq-pulse { 40% { transform: scale(1.04); } }
.eq-side img { width: 50px; height: 50px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.eq-side b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-side small { color: var(--muted); }
.eq-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 4px; }
.eq-chips span { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 183, 3, .16); color: #ffd166; white-space: nowrap; }
.eq-chips span.off { background: rgba(255, 255, 255, .06); color: var(--muted); }
.eq-state { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.eq-state.ready { color: var(--good); }
.eq-same { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(76, 185, 68, .14); box-shadow: inset 0 0 0 1px rgba(76, 185, 68, .4); }
.eq-same[hidden] { display: none; }
.eq-same b { font-size: 14px; }
.eq-panel { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 18px; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); }
.eq-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.eq-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.eq-presets button, .eq-levels button { padding: 9px 4px; border-radius: 12px; background: var(--panel2); color: inherit; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.15; box-shadow: inset 0 0 0 1.5px transparent; transition: background .15s, box-shadow .15s; }
.eq-presets button.on, .eq-levels button.on { background: var(--accent); box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
.eq-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eq-row > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.eq-row small { color: var(--muted); font-size: 12px; }
.eq-row .seg { flex: none; }
.eq-stepper { display: flex; align-items: center; gap: 4px; flex: none; }
.eq-step { width: 36px; height: 36px; border-radius: 12px; background: var(--panel2); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); color: inherit; font-size: 20px; font-weight: 700; }
.eq-step:disabled { opacity: .35; }
.eq-stepval { min-width: 74px; text-align: center; font-size: 15px; }
.eq-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.eq-levels button span { display: block; font-size: 20px; margin-bottom: 2px; }
.eq-ready.done { background: rgba(76, 185, 68, .2); color: var(--good); opacity: 1; }
.eq-auto { text-align: center; min-height: 1em; }
.eq-go { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; pointer-events: none; }
.eq-go .sign { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 24px 12px; border-radius: 16px; background: var(--accent); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); animation: eq-go 1.75s cubic-bezier(.2, 1.4, .4, 1) .25s both; }
.eq-go b { font-family: var(--f-display); font-weight: 400; font-size: 32px; line-height: 1; }
.eq-go small { font-weight: 700; font-size: 14px; }
@keyframes eq-go { 0% { transform: scale(.4) rotate(-8deg); opacity: 0; } 18% { transform: scale(1.08) rotate(-3deg); opacity: 1; } 28%, 78% { transform: scale(1) rotate(-3deg); opacity: 1; } 100% { transform: scale(.92) rotate(-3deg); opacity: 0; } }
.eq-pgn { min-height: 160px; font-family: ui-monospace, monospace; font-size: 13px; text-align: left; resize: vertical; }
/* in-game hint counters, peek ring, Spotlight */
.eq-budget { display: flex; gap: 4px; align-items: center; font-size: 13px; font-weight: 700; white-space: nowrap; position: relative; }
.eq-budget span { padding: 2px 6px; border-radius: 999px; background: rgba(255, 183, 3, .16); color: #ffd166; }
.eq-budget span.off { background: rgba(255, 255, 255, .05); color: var(--muted); opacity: .6; }
.eq-budget.cpu span, .eq-budget.cpu { color: var(--muted); font-weight: 600; }
.eq-budget.refill span { animation: eq-refill .7s cubic-bezier(.2, 1.4, .4, 1); }
.eq-budget.refill::after { content: "✨"; position: absolute; right: -6px; top: -10px; font-size: 14px; pointer-events: none; animation: eq-sparkle .9s ease-out forwards; }
@keyframes eq-refill { 35% { transform: scale(1.25); box-shadow: 0 0 12px rgba(255, 183, 3, .8); } }
@keyframes eq-sparkle { from { opacity: 0; transform: scale(.4) rotate(-30deg); } 30% { opacity: 1; transform: scale(1.2); } to { opacity: 0; transform: translateY(-10px) scale(.8) rotate(20deg); } }
.eq .hold-ring { position: absolute; z-index: 12; width: 12.5%; height: 12.5%; pointer-events: none; display: grid; place-items: center; }
.eq .hold-ring svg { position: absolute; inset: -6%; width: 112%; height: 112%; transform: rotate(-90deg); }
.eq .hold-ring circle { fill: none; stroke-width: 3.4; }
.eq .hold-ring .bg { stroke: rgba(255, 255, 255, .55); }
.eq .hold-ring .fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: eq-hold var(--hold, 500ms) linear forwards; filter: drop-shadow(0 0 2px rgba(255, 183, 3, .9)); }
.eq .hold-ring span { position: absolute; right: -8%; top: -14%; font-size: 13px; opacity: 0; transition: opacity .2s; }
.eq .hold-ring.done { animation: eq-ringdone .38s ease-out forwards; }
.eq .hold-ring.done span { opacity: 1; }
@keyframes eq-hold { to { stroke-dashoffset: 0; } }
@keyframes eq-ringdone { to { transform: scale(1.35); opacity: 0; } }
.eq .sq.peeked::before { background: radial-gradient(circle at 84% 16%, rgba(255, 183, 3, .95) 0 7%, transparent 8%); }
.eq .sq.peeked.sel::before { background: radial-gradient(circle at 84% 16%, rgba(255, 183, 3, .95) 0 7%, transparent 8%), var(--sel); }
.eq .sq.spot::before { background: radial-gradient(circle, rgba(255, 224, 110, .95) 0 30%, rgba(255, 200, 60, .45) 55%, rgba(255, 200, 60, 0) 72%); animation: eq-spot 1.4s ease-in-out infinite; }
@keyframes eq-spot { 50% { opacity: .55; } }
.eq-tools .btn.small { padding-left: 12px; padding-right: 12px; }
.eq-row .seg button { min-width: 46px; }
.eq-tools .eq-spot { background: var(--accent); color: var(--ink); }
.eq-tools .eq-spot:disabled { opacity: .55; }
/* why a move isn't allowed */
.eq .board svg.why { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; overflow: visible; }
.eq .why .ray { stroke: #ff4d4d; stroke-width: .13; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: eq-ray .35s ease-out forwards; filter: drop-shadow(0 0 .05px rgba(0, 0, 0, .5)); }
@keyframes eq-ray { to { stroke-dashoffset: 0; } }
.eq .why .flash { fill: rgba(255, 70, 70, .5); animation: eq-flash .5s ease-in-out 3 alternate; }
.eq .why .flash.king { fill: rgba(255, 40, 40, .6); }
.eq .why .flash.src { fill: rgba(255, 120, 60, .35); animation: none; }
.eq .why .flash.block { fill: rgba(255, 170, 40, .55); }
@keyframes eq-flash { from { opacity: .25; } to { opacity: 1; } }
.eq .why .arrow { stroke-width: .16; stroke-linecap: round; opacity: .85; }
.eq .why .arrow.best { stroke: #1fae5b; }
.eq .why .arrow.bad { stroke: #ff4d4d; }
.eq .why-lock { position: absolute; z-index: 9; width: 5.2%; pointer-events: none; animation: eq-lock .45s cubic-bezier(.2, 1.6, .4, 1); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); }
.eq .why-lock svg { display: block; width: 100%; }
@keyframes eq-lock { from { transform: scale(0) rotate(-40deg); } }
.eq .why-note { position: absolute; z-index: 9; transform: translate(-50%, -50%); padding: 3px 9px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); animation: eq-note .3s cubic-bezier(.2, 1.5, .4, 1); pointer-events: none; }
@keyframes eq-note { from { transform: translate(-50%, -20%) scale(.6); opacity: 0; } }
.eq .pc.wiggle img { animation: eq-shake .4s ease-in-out; }
@keyframes eq-shake { 20% { transform: translateX(-12%); } 40% { transform: translateX(10%); } 60% { transform: translateX(-7%); } 80% { transform: translateX(4%); } }
.eq-reason { position: absolute; left: 50%; bottom: 8px; z-index: 15; max-width: calc(100% - 20px); transform: translate(-50%, 8px); opacity: 0; pointer-events: none; padding: 7px 12px; border-radius: 12px; background: rgba(11, 16, 51, .94); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.25; text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); transition: opacity .2s, transform .2s; }
.eq-reason.on { opacity: 1; transform: translate(-50%, 0); }
.eq-reason.top { bottom: auto; top: 8px; transform: translate(-50%, -8px); }
.eq-reason.top.on { transform: translate(-50%, 0); }
/* post-game review */
.eq .sq.r-from::before { background: rgba(61, 143, 224, .25); }
.eq .sq.r-good::after { background: rgba(var(--hgood), .7); }
.eq .sq.r-okay::after { background: rgba(var(--hokay), .75); }
.eq .sq.r-bad::after { background: rgba(var(--hbad), .75); }
.eq-rv-info { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.eq-rv-info small.t-bad { color: #ff9a9a; } .eq-rv-info small.t-okay { color: var(--accent); } .eq-rv-info small.t-good { color: var(--good); }
.eq-rv-info .better { color: var(--good); }
.eq-review { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.eq-rv-nav { display: flex; align-items: center; justify-content: center; gap: 6px; }
.eq-rv-nav .btn { min-width: 46px; }
.eq-rv-pos { min-width: 64px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.eq-rv-moves { display: flex; gap: 4px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: thin; }
.eq-rv-moves button { flex: none; padding: 5px 8px; border-radius: 9px; background: rgba(255, 255, 255, .07); color: inherit; font: inherit; font-size: 13px; border-bottom: 3px solid transparent; }
.eq-rv-moves button i { font-style: normal; color: var(--muted); margin-right: 3px; }
.eq-rv-moves button.on { background: rgba(255, 255, 255, .2); }
.eq-rv-moves button.wait { opacity: .55; }
.eq-rv-moves .t-good { border-bottom-color: rgb(40, 170, 95); } .eq-rv-moves .t-okay { border-bottom-color: rgb(236, 178, 30); } .eq-rv-moves .t-bad { border-bottom-color: rgb(224, 58, 58); }
.eq-rv-slips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.eq-rv-slips .col { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 14px; background: var(--panel); min-width: 0; }
.eq-rv-slips small { color: var(--muted); font-size: 12px; }
.eq-rv-slips button { text-align: left; padding: 4px 8px; border-radius: 8px; background: rgba(224, 58, 58, .16); color: #ffc2c2; font: inherit; font-size: 13px; }
.eq-rv-slips button.t-okay { background: rgba(236, 178, 30, .16); color: #ffe39a; }
.eq-rv-slips .none { font-size: 13px; color: var(--muted); }
.eq-rv-slips .prog { grid-column: 1 / -1; text-align: center; color: var(--muted); }
.eq.reviewing .eq-tools { display: block; }
/* tutorial: peek ring, spotlight, setup cards, pin line */
.tut-eq-ring { width: 14cqw; aspect-ratio: 1; border-radius: 50%; border: 1cqw solid rgba(255, 255, 255, .5); z-index: 4; }
.tut-eq-ring.fill { border-color: var(--accent); box-shadow: 0 0 2cqw rgba(255, 183, 3, .8); }
.tut-eq-glow { width: 15cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 224, 110, .95) 0 30%, rgba(255, 200, 60, .4) 55%, transparent 72%); z-index: 2; animation: eq-spot 1.4s ease-in-out infinite; }
.tut-eq-chip { padding: 1cqw 2.6cqw; border-radius: 99cqw; background: rgba(255, 183, 3, .2); color: #ffd166; font-weight: 700; font-size: 4.2cqw; white-space: nowrap; z-index: 5; }
.tut-eq-chip.off { background: rgba(255, 255, 255, .08); color: var(--muted); }
.tut-eq-card { width: 38cqw; height: 46cqw; border-radius: 4cqw; background: rgba(255, 255, 255, .1); z-index: 1; box-shadow: inset 0 0 0 .6cqw transparent; transition: box-shadow .3s; }
.tut-eq-card.ready { box-shadow: inset 0 0 0 .8cqw var(--good); }
.tut-eq-text { color: #fff; font-weight: 700; font-size: 4.6cqw; white-space: nowrap; z-index: 5; }
.tut-eq-big { color: var(--accent); font-weight: 800; font-size: 18cqw; z-index: 6; }
.tut-eq-btn { padding: 1.6cqw 4cqw; border-radius: 3cqw; background: var(--accent); color: var(--ink); font-weight: 800; font-size: 4.4cqw; z-index: 5; white-space: nowrap; }
.tut-eq-btn.alt { background: rgba(255, 255, 255, .18); color: #fff; }
.tut-eq-line { height: 1.1cqw; background: #ff4d4d; border-radius: 1cqw; transform-origin: 0 50%; z-index: 4; box-shadow: 0 0 1.4cqw rgba(255, 77, 77, .7); }
.tut-eq-lock { font-size: 6cqw; z-index: 6; }

/* ================= Reversi ================= */

.rv-board { width: min(100%, calc(100dvh - 300px - var(--safe-top) - var(--safe-bottom))); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); touch-action: manipulation; }
@supports not (height: 100dvh) { .rv-board { width: min(100%, calc(100vh - 300px)); } }
.rv-wood { fill: #8a5a2f; }
.rv-wood-hi { fill: none; stroke: rgba(255, 220, 170, .35); stroke-width: .06; }
.rv-grid { stroke: rgba(0, 0, 0, .3); stroke-width: .03; }
.rv-hint { fill: var(--c, #fff); opacity: 0; transition: opacity .25s, r .15s; pointer-events: none; }
.rv-hint.on { opacity: .3; animation: rv-dot 1.6s ease-in-out infinite; }
.rv-hint.on.peek { opacity: .55; r: .4; animation: none; }
.rv-board.settling .rv-hint.on { opacity: 0; animation: none; }
@keyframes rv-dot { 50% { opacity: .5; } }
.rv-disc { pointer-events: none; opacity: 0; }
.rv-disc.shown { opacity: 1; }
.rv-flip { transform-box: fill-box; transform-origin: center; }
.rv-shadow { fill: rgba(0, 0, 0, .35); }
.rv-disc .rim { fill: none; stroke: rgba(0, 0, 0, .25); stroke-width: .03; }
.rv-disc.last .rim { stroke: #ffc531; stroke-width: .06; }
.rv-scores { display: flex; gap: 8px; justify-content: center; }
.rv-side { display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: 999px; background: var(--panel); }
.rv-side i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.rv-side span { color: var(--accent); font-weight: 700; font-size: 18px; }
.rv-side.turn { box-shadow: 0 0 0 2px var(--accent); }

/* tutorial props */
.tut-rv-sq { width: 13cqw; aspect-ratio: 1; background: #1f8a5b; box-shadow: inset 0 0 0 .3cqw rgba(0,0,0,.3); }
.tut-rv-disc { width: 10.5cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), rgba(255,255,255,.05) 45%, rgba(0,0,0,.25)), var(--c); box-shadow: 0 .6cqw 0 var(--e), 0 1.2cqw 1.5cqw rgba(0,0,0,.35); z-index: 3; }
.tut-rv-dot { width: 3.4cqw; aspect-ratio: 1; border-radius: 50%; background: rgba(23,19,58,.4); z-index: 2; }

/* ================= Four in a Row ================= */

.fr-board { width: min(100%, calc((100dvh - 250px - var(--safe-top) - var(--safe-bottom)) * 7.3 / 7.6)); touch-action: none; overflow: visible; }
@supports not (height: 100dvh) { .fr-board { width: min(100%, calc((100vh - 250px) * .96)); } }
.fr-frame { filter: drop-shadow(0 .05px .08px rgba(0, 0, 0, .5)); pointer-events: none; }
.fr-rims circle { fill: none; stroke: rgba(0, 0, 40, .35); stroke-width: .04; pointer-events: none; }
.fr-disc { pointer-events: none; }
.fr-shade { fill: url(#fr-sh); stroke: rgba(0, 0, 0, .22); stroke-width: .03; }
.fr-ring { fill: none; stroke: rgba(0, 0, 0, .16); stroke-width: .05; }
.fr-glint { fill: rgba(255, 255, 255, .45); }
.fr-disc.win { animation: fr-win .9s ease-in-out infinite; }
.fr-disc.win .fr-ring { stroke: rgba(255, 255, 255, .8); }
@keyframes fr-win { 50% { filter: brightness(1.35) drop-shadow(0 0 .12px #fff); } }
.fr-line { fill: none; stroke: #fff; stroke-width: .14; stroke-linecap: round; opacity: 0; pointer-events: none; filter: drop-shadow(0 0 .1px #fff) drop-shadow(0 0 .15px rgba(255, 255, 255, .8)); stroke-dasharray: 8; stroke-dashoffset: 8; }
.fr-line.on { animation: fr-line .5s ease-out forwards; }
@keyframes fr-line { from { opacity: 1; stroke-dashoffset: 8; } to { opacity: .9; stroke-dashoffset: 0; } }
.fr-ghost { pointer-events: none; transition: transform .12s ease-out; filter: drop-shadow(0 .06px .06px rgba(0, 0, 0, .4)); }
.fr-ghost.held { transition: none; }
.fr-col { fill: rgba(255, 255, 255, 0); transition: fill .12s; pointer-events: none; }
.fr-col.on { fill: rgba(255, 255, 255, .22); }
.fr-col.full { fill: rgba(255, 90, 95, .3); }
.fr-hit { cursor: pointer; }

/* tutorial props */
.tut-fr-board { width: 54cqw; aspect-ratio: 7 / 6; border-radius: 2cqw; background: radial-gradient(circle, #17133a 0 34%, transparent 36%) 0 0 / 14.28% 16.66%, linear-gradient(#4b8cf0, #2459c4); box-shadow: 0 1cqw 2cqw rgba(0,0,0,.35); z-index: 2; }
.tut-fr-disc { width: 6.6cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.6), transparent 40%), var(--c); box-shadow: inset 0 0 0 1.2cqw rgba(0,0,0,.08), inset 0 0 0 .4cqw rgba(0,0,0,.15); z-index: 3; }
.tut-fr-line { height: 1.6cqw; border-radius: 1cqw; background: #fff; box-shadow: 0 0 2cqw #fff, 0 0 1cqw #fff; z-index: 5; }
.tut-fr-col { width: 7.7cqw; height: 48cqw; border-radius: 4cqw; background: rgba(255,255,255,.25); z-index: 4; }

/* ================= Flick Soccer ================= */

.fs-wrap { display: flex; justify-content: center; }
.fs-pitch { border-radius: 10px; touch-action: none; background: #2e7d46; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.fs-score { display: flex; gap: 8px; justify-content: center; }
.fs-team { display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 6px; border-radius: 999px; background: var(--panel); }
.fs-team i { width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); }
.fs-team span { color: var(--accent); font-weight: 700; font-size: 20px; }
.fs-team.turn { box-shadow: 0 0 0 2px var(--c); }

/* tutorial props */
.tut-fs-pitch { width: 50cqw; height: 100cqh; background: repeating-linear-gradient(#4dba68 0 10%, #43aa5c 10% 20%); box-shadow: inset 0 0 0 .7cqw rgba(255,255,255,.8); }
.tut-fs-goal { width: 18cqw; height: 9cqh; border: .7cqw solid #fff; border-bottom: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 1px, transparent 1px 1.2cqw), repeating-linear-gradient(rgba(255,255,255,.35) 0 1px, transparent 1px 1.2cqw), rgba(10,40,20,.4); transform-origin: 50% 0; z-index: 2; }
.tut-fs-cap { width: 9cqw; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 4.6cqw; text-shadow: 0 .3cqw 0 rgba(0,0,0,.3);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 45%, #fff), var(--c) 50%, color-mix(in srgb, var(--c) 75%, #000));
  box-shadow: inset 0 0 0 1.5cqw rgba(0,0,0,0), inset 0 0 0 1.6cqw rgba(255,255,255,.0), 0 .6cqw 0 color-mix(in srgb, var(--c) 55%, #000), 0 1.2cqw 1.6cqw rgba(0,0,0,.35); z-index: 3; }
.tut-fs-cap::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: .4cqw solid rgba(255,255,255,.6); }
.tut-fs-ball { width: 6cqw; aspect-ratio: 1; z-index: 4; filter: drop-shadow(0 .5cqw .5cqw rgba(0,30,0,.4)); }
.tut-fs-ball svg { width: 100%; height: 100%; display: block; }
.tut-fs-arrow { --p: 0; width: 3cqw; height: calc(4cqw + var(--p) * 24cqw); transform: translate(-50%, -100%) !important; background: linear-gradient(to top, rgba(255,255,255,.3), hsl(calc(120 - var(--p) * 120), 90%, 58%)); clip-path: polygon(30% 100%, 30% 3cqw, 0 3cqw, 50% 0, 100% 3cqw, 70% 3cqw, 70% 100%); z-index: 2; }
.tut-fs-goaltext { font-size: 13cqw; font-weight: 700; color: #fff; -webkit-text-stroke: .9cqw #8a1f2a; paint-order: stroke; z-index: 6; }

/* ================= Best Match ================= */
/* (Punchline uses these too: .bm-prompt, .bm-body, .bm-by, .bm-write) */

.bm-prompt {
  background: radial-gradient(circle at 90% 0%, rgba(255, 122, 89, .25), transparent 50%), linear-gradient(160deg, #241c58, #17133a); border-radius: 18px; padding: 16px 18px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), 0 8px 20px rgba(0, 0, 0, .3); display: flex; flex-direction: column; gap: 6px;
}
.bm-prompt small { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; }
.bm-prompt b { font-size: 24px; line-height: 1.2; }
.bm-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
/* every answer card is a portrait playing card (5:7) at any screen width; long text shrinks inside it */
.bm-hand, .bm-answers { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 10px; perspective: 900px; }
.bm-card {
  flex: none; box-sizing: border-box; width: min(calc(50% - 5px), 168px); aspect-ratio: 5 / 7; min-height: 0; overflow: hidden; container-type: inline-size;
  background: linear-gradient(170deg, #fff, #f3efff); color: #17133a; border-radius: 14px; padding: 10px; text-align: left; font-weight: 700; line-height: 1.18;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(23, 19, 58, .08); display: flex; flex-direction: column; gap: 6px; overflow-wrap: anywhere;
}
.bm-card > span { font-size: max(12px, 11cqw); }
.bm-card.l > span { font-size: max(11px, 9.6cqw); }
.bm-card.xl > span { font-size: max(10.5px, 8.4cqw); }
.bm-card.xxl > span { font-size: max(10px, 7.2cqw); }
button.bm-card:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.bm-card small { font-weight: 500; font-size: max(10px, 7.6cqw); line-height: 1.2; color: #6b6590; }
.bm-card.xl small, .bm-card.xxl small { font-size: max(9px, 6.6cqw); }
.bm-answers { container-type: inline-size; }
@container (min-width: 380px) { .bm-answers.many .bm-card { width: min(calc((100% - 20px) / 3), 150px); padding: 8px; } }
.bm-card.mine { align-self: center; width: min(42%, 160px); }
.bm-card.won { box-shadow: 0 0 0 4px var(--accent), 0 0 22px rgba(255, 197, 49, .55), 0 4px 0 rgba(0, 0, 0, .2); }
.bm-by { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #6b6590; margin-top: auto; }
.bm-card .bm-by { font-size: max(11px, 8cqw); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.bm-card .bm-by .avatar { flex: none; }
.bm-card.up .bm-by { animation: bm-by .35s ease-out backwards; }
@keyframes bm-by { from { transform: translateY(8px); opacity: 0; } }
.bm-wait { text-align: center; font-size: 20px; font-weight: 700; color: var(--accent); }
.bm-write { min-height: 110px; font-size: 18px; resize: none; text-align: left; }

/* card backs */
.bm-down, .bm-card.bm-down {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 7px, transparent 7px 14px), linear-gradient(160deg, #ff7a59, #c2185b);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .25), inset 0 0 0 3px rgba(255, 255, 255, .55); display: grid; place-items: center; color: #fff;
}
.bm-emb { width: 46px; height: 46px; pointer-events: none; }
button.bm-card.bm-down::after { content: 'tap to turn over'; font-size: 11px; font-weight: 600; opacity: .85; margin-top: -10px; }
.bm-card.bm-down { align-content: center; gap: 18px; }
button.bm-card.bm-down { animation: bm-tease 1.8s ease-in-out infinite; }
@keyframes bm-tease { 50% { transform: translateY(-3px) rotate(-1deg); } }
.bm-card.lift { transform: translateY(-6px) scale(1.03); }
.bm-card.sel { box-shadow: 0 0 0 4px var(--accent), 0 10px 20px rgba(0, 0, 0, .35); transform: translateY(-4px) scale(1.04); position: relative; z-index: 2; }
/* Back / Play this card (and the judge's Pick this one): a raised card only plays from here, never from a second tap */
.bm-act { display: flex; gap: 8px; }
.bm-act .grow { flex: 1; }
.bm-act.stick { position: sticky; bottom: 8px; z-index: 5; padding: 6px; margin: 0 -6px; border-radius: 18px; background: rgba(23, 19, 58, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* the table: answers land face down */
.bm-table {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 14px 10px; border-radius: 20px; min-height: 104px;
  background: radial-gradient(ellipse at 50% 40%, #a8325f 0%, #7d1f47 75%); box-shadow: inset 0 0 0 4px #5a1634, inset 0 6px 18px rgba(0, 0, 0, .4);
}
.bm-table.target { animation: bm-wait 1.8s ease-in-out infinite; }
@keyframes bm-wait { 50% { box-shadow: inset 0 0 0 4px var(--accent), inset 0 6px 18px rgba(0, 0, 0, .4); } }
.bm-table.drop-over { box-shadow: inset 0 0 0 4px var(--accent), 0 0 22px rgba(255, 197, 49, .55) !important; }
.bm-slot { width: 52px; height: 72px; border-radius: 9px; transform: rotate(var(--r, 0deg)); }
.bm-slot.empty { border: 2px dashed rgba(255, 255, 255, .25); display: grid; place-items: center; font-size: 10px; color: rgba(255, 255, 255, .6); text-align: center; font-weight: 600; }
.bm-slot .bm-emb { width: 32px; height: 32px; }
.bm-slot.land { animation: bm-land .45s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes bm-land { from { transform: translateY(-80px) rotate(-25deg) scale(1.4); opacity: 0; } }

/* my hand: a fan of cards */
.bm-fan { position: relative; height: 196px; margin: 4px 0 0; container-type: inline-size; touch-action: pan-y; }
.bm-fc {
  --sp: min(42px, calc((100cqw - 190px) / var(--n1))); --ang: 4deg;
  position: absolute; left: 50%; bottom: 6px; width: 110px; height: 154px; margin-left: -55px; padding: 10px; border-radius: 14px; box-sizing: border-box; overflow-wrap: anywhere;
  background: linear-gradient(170deg, #fff, #f3efff); color: #17133a; text-align: left; font-weight: 700; font-size: 14px; line-height: 1.2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(23, 19, 58, .08); display: flex; flex-direction: column; gap: 4px;
  transform-origin: 50% 150%; transform: translateX(calc(var(--k) * var(--sp))) rotate(calc(var(--k) * var(--ang)));
  transition: transform .2s cubic-bezier(.3, .7, .3, 1.2), box-shadow .2s; overflow: hidden;
}
.bm-fc span { overflow: hidden; }
.bm-fc.l { font-size: 12px; }
.bm-fc.xl, .bm-fc.xxl { font-size: 10.5px; }
/* raised to read: bigger and upright, still a card */
.bm-fc.sel { transform: translateX(calc(var(--k) * var(--sp) * .3)) translateY(-30px) rotate(0deg) scale(1.32); z-index: 50 !important; box-shadow: 0 0 0 3px var(--accent), 0 14px 24px rgba(0, 0, 0, .45); }
.bm-fc.blank { background: repeating-linear-gradient(-45deg, #fff8f3 0 8px, #ffe8dc 8px 16px); color: #c2185b; justify-content: center; text-align: center; }
.bm-fc.blank small { font-weight: 600; font-size: 11px; color: #6b6590; }
.bm-ghost { display: grid; place-items: center; }
.bm-fc.flat { position: static; margin: 0; transform: none; }
.bm-tip { min-height: 1.4em; }

/* where the judge drops the winner */
.bm-pad {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; border-radius: 18px; font-weight: 700; color: var(--accent);
  border: 3px dashed rgba(255, 197, 49, .6); background: rgba(255, 197, 49, .08); animation: bm-wait 1.8s ease-in-out infinite;
}
.bm-pad span { font-size: 28px; }
.bm-pad.drop-over { background: rgba(255, 197, 49, .25); transform: scale(1.03); }
/* tutorial props (Punchline uses .bm-tprompt too) */
.bm-tprompt { padding: 1.6cqw 3cqw; border-radius: 2.5cqw; background: #17133a; box-shadow: inset 0 0 0 .5cqw rgba(255, 255, 255, .15); font-weight: 700; font-size: 4.4cqw; white-space: nowrap; }
.bm-ttable { width: 70cqw; height: 26cqw; border-radius: 4cqw; background: radial-gradient(ellipse at 50% 40%, #a8325f, #7d1f47); box-shadow: inset 0 0 0 1cqw #5a1634; }
.bm-tcard { width: 24cqw; height: 32cqw; perspective: 600px; z-index: 2; transition: width .3s, height .3s; }
.bm-tcard.small { width: 14cqw; height: 19cqw; }
.bm-tcard-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .4s cubic-bezier(.3, .7, .35, 1.15); }
.bm-tcard.fan .bm-tcard-in { transform: rotate(var(--r)); transform-origin: 50% 150%; }
.bm-tcard.fan.sel { z-index: 6; }
.bm-tcard.fan.sel .bm-tcard-in { transform: translateY(-8cqw) scale(1.15); }
.bm-tcard.down .bm-tcard-in { transform: rotateY(180deg); }
.bm-tcard-face, .bm-tcard-back { position: absolute; inset: 0; border-radius: 2.4cqw; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, .35); }
.bm-tcard-face { background: linear-gradient(170deg, #fff, #f3efff); color: #17133a; font-weight: 700; font-size: 3.8cqw; line-height: 1.15; padding: 2cqw; }
.bm-tcard-back { transform: rotateY(180deg); background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 2cqw, transparent 2cqw 4cqw), linear-gradient(160deg, #ff7a59, #c2185b); box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, .35), inset 0 0 0 .7cqw rgba(255, 255, 255, .5); }
.bm-tpad { width: 40cqw; height: 14cqw; border-radius: 3cqw; border: .8cqw dashed rgba(255, 197, 49, .7); display: grid; place-items: center; font-size: 7cqw; background: rgba(255, 197, 49, .1); }
.bm-tchip { display: flex; align-items: center; gap: 1.5cqw; padding: 1cqw 3cqw 1cqw 1cqw; border-radius: 99px; background: var(--panel2); font-weight: 700; font-size: 4.4cqw; white-space: nowrap; z-index: 4; }
.bm-tchip i { width: 6cqw; height: 6cqw; border-radius: 50%; background: #5ad45a; }
.bm-tchip b { color: var(--accent); }

/* ================= Say What? ================= */

.sw-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sw-team { background: var(--panel); border-radius: 16px; padding: 8px 12px 10px 10px; box-shadow: inset 0 3px 0 var(--c); transition: box-shadow .2s; display: flex; align-items: center; gap: 8px; min-width: 0; }
.sw-team.turn { box-shadow: inset 0 3px 0 var(--c), 0 0 0 2px var(--c); }
.sw-team-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sw-team-info > b { font-size: 15px; color: var(--c); }
.sw-members { display: flex; flex-wrap: wrap; gap: 3px 8px; font-size: 12px; color: var(--muted); }
.sw-members span { display: flex; align-items: center; gap: 4px; min-width: 0; }
.sw-members span.desc { color: var(--text); font-weight: 700; }
/* each team's pile of won cards */
.sw-pile { position: relative; width: 38px; height: 52px; flex: none; }
.sw-pile-cards i {
  position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(160deg, #fff, #efe7dc); border-top: 9px solid var(--c);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .3); transform: translate(calc(var(--k) * 1.5px), calc(var(--k) * -2px)) rotate(calc((var(--k) - 2) * 3deg));
}
.sw-pile.empty .sw-pile-cards::before { content: ''; position: absolute; inset: 0; border-radius: 6px; border: 2px dashed rgba(255, 255, 255, .22); }
.sw-pile-n {
  position: absolute; right: -8px; bottom: -6px; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px; z-index: 2;
  background: var(--c); color: #fff; font-size: 15px; display: grid; place-items: center; box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}
.sw-main { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.sw-card { background: var(--panel); border-radius: 20px; padding: 18px; text-align: center; box-shadow: inset 0 0 0 3px var(--c); display: flex; flex-direction: column; gap: 6px; }
.sw-card small { color: var(--muted); font-weight: 600; }
.sw-card b { font-size: 24px; }
.sw-card p { margin: 0; color: var(--muted); }
.sw-between-row { display: flex; align-items: center; gap: 16px; text-align: left; margin: 6px auto 0; max-width: 340px; }
.sw-go { min-height: 64px; font-size: 22px; }
/* the table during a turn: discard · timer · deck, then the card */
.sw-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.sw-discard, .sw-deck { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: 12px; position: relative; }
.sw-discard { justify-self: start; margin-left: 6px; }
.sw-deck { justify-self: end; margin-right: 10px; }
.sw-slot { width: 38px; height: 52px; border-radius: 6px; border: 2px dashed rgba(255, 255, 255, .25); }
.sw-discard > b { position: absolute; top: 13px; font-size: 18px; color: var(--text); }
.sw-stack { position: relative; width: 38px; height: 52px; flex: none; }
.sw-stack i { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; background: #f15a24; box-shadow: 0 2px 3px rgba(0, 0, 0, .35); transform: translate(calc(var(--k) * -1.5px), calc(var(--k) * -2px)); }
.sw-stack i svg { width: 100%; height: 100%; display: block; }
.sw-stack.big { width: 66px; height: 92px; }
.sw-stack.big i { border-radius: 10px; }
.sw-stack.can-move { cursor: pointer; }
.sw-ring { position: relative; width: 86px; height: 86px; display: grid; place-items: center; }
.sw-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.sw-ring-track { fill: var(--panel2); stroke: rgba(0, 0, 0, .28); stroke-width: 13; }
.sw-ring-arc { fill: none; stroke: var(--good); stroke-width: 13; stroke-linecap: round; transition: stroke-dashoffset .2s linear, stroke .3s; filter: drop-shadow(0 0 4px rgba(90, 212, 90, .35)); }
.sw-ring b { position: relative; font-size: 32px; font-weight: 700; }
.sw-ring.mid .sw-ring-arc { stroke: var(--accent); }
.sw-ring.low .sw-ring-arc { stroke: var(--bad); }
.sw-ring.low b { color: var(--bad); }
.sw-ring.low { animation: nudge .5s ease-in-out infinite; }
.sw-slot-card { display: grid; place-items: center; min-height: 312px; }
.sw-cardwrap { width: min(100%, 300px); height: 306px; perspective: 1000px; position: relative; user-select: none; -webkit-user-select: none; }
.sw-cardwrap.desc { touch-action: none; cursor: grab; }
.sw-cardwrap.held { cursor: grabbing; }
.sw-flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.sw-face, .sw-back {
  position: absolute; inset: 0; border-radius: 22px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35), 0 4px 0 rgba(0, 0, 0, .18);
}
.sw-back { transform: rotateY(180deg); background: #f15a24; }
.sw-back.front { transform: none; }
.sw-back svg { width: 100%; height: 100%; display: block; }
.sw-face { background: linear-gradient(180deg, #fff, #f6efe6); color: #17133a; display: flex; flex-direction: column; }
.sw-face-top { background: linear-gradient(135deg, #ffb200, #f15a24); min-height: 96px; display: grid; place-items: center; padding: 10px 14px; text-align: center; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12); }
.sw-face-top b { color: #fff; font-size: 38px; line-height: 1.05; text-transform: capitalize; text-shadow: 0 2px 0 rgba(120, 30, 0, .35); overflow-wrap: anywhere; }
.sw-face-top b.md { font-size: 31px; }
.sw-face-top b.sm { font-size: 25px; }
.sw-face-top b.xs { font-size: 20px; }
.sw-face-say { display: flex; align-items: center; gap: 8px; margin: 10px 18px 0; color: #f15a24; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sw-face-say::before, .sw-face-say::after { content: ''; flex: 1; height: 2px; background: rgba(241, 90, 36, .3); border-radius: 1px; }
.sw-face-list { list-style: none; margin: 0; padding: 2px 22px 10px; display: flex; flex-direction: column; justify-content: space-evenly; flex: 1; text-align: center; }
.sw-face-list li { font-size: 21px; font-weight: 600; text-transform: capitalize; padding: 1px 0; border-bottom: 1px solid rgba(23, 19, 58, .08); }
.sw-face-list li:last-child { border-bottom: 0; }
.sw-stamp { position: absolute; top: 108px; padding: 3px 12px; border: 4px solid; border-radius: 10px; font-size: 26px; font-weight: 700; text-transform: uppercase; opacity: 0; pointer-events: none; background: rgba(255, 255, 255, .9); }
.sw-stamp.got { left: 14px; color: #2e9a35; transform: rotate(-14deg); }
.sw-stamp.skip { right: 14px; color: #7a7499; transform: rotate(12deg); }
.sw-cardwrap.waiting .sw-back { animation: sw-wait .8s ease-in-out infinite alternate; }
@keyframes sw-wait { to { filter: brightness(1.15); } }
.sw-ghost { will-change: transform; }
.sw-controls { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.sw-got { min-height: 64px; font-size: 21px; background: var(--good); color: #0b2a0f; transition: transform .12s, filter .12s; }
.sw-skip { min-height: 64px; font-size: 20px; transition: transform .12s, filter .12s; }
.sw-got.hot, .sw-skip.hot { transform: scale(1.05); filter: brightness(1.2); }
.sw-tip { margin: 0; text-align: center; color: var(--muted); font-size: 13px; }
.sw-tip.big { font-size: 18px; color: var(--text); font-weight: 600; }
/* the game-show buzzer */
.sw-buzzer { align-self: center; width: 150px; height: 96px; border: 0; padding: 0; background: none; position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sw-buzzer::before { content: ''; position: absolute; left: 4px; right: 4px; bottom: 0; height: 32px; border-radius: 16px; background: linear-gradient(#3a3190, #17133a); box-shadow: 0 5px 10px rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 255, .15); }
.sw-buzzer span {
  position: absolute; left: 16px; right: 16px; bottom: 18px; height: 72px; border-radius: 64px 64px 16px 16px; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 26%, #ffa3a5, #ff3b47 52%, #b8182a); color: #fff; font-size: 26px; font-weight: 700; letter-spacing: .06em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25); box-shadow: inset 0 -7px 0 rgba(0, 0, 0, .22), 0 7px 0 #7d0f1c; transition: transform .07s, box-shadow .07s;
}
.sw-buzzer:active span { transform: translateY(6px); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22), 0 1px 0 #7d0f1c; }
.sw-buzzer[disabled] { filter: grayscale(.7) brightness(.75); }
.sw-flash { position: fixed; inset: 0; z-index: 70; pointer-events: none; background: radial-gradient(circle, rgba(255, 90, 95, .5), rgba(200, 20, 40, .85)); display: grid; place-items: center; }
.sw-flash b { font-size: 76px; color: #fff; text-shadow: 0 5px 0 rgba(0, 0, 0, .3); transform: rotate(-8deg); }
/* end of a turn: its cards, turned over one by one */
.sw-summary { background: var(--panel); border-radius: 18px; padding: 12px; box-shadow: inset 0 3px 0 var(--c); display: flex; flex-direction: column; gap: 10px; }
.sw-sum-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
.sw-sum-head b { color: var(--c); }
.sw-sum-head span { color: var(--muted); font-size: 13px; }
.sw-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; perspective: 600px; }
.sw-mini {
  background: linear-gradient(180deg, #fff, #f3ece2); color: #17133a; border-radius: 10px; min-height: 60px; padding: 7px 6px 6px; border-top: 7px solid #f15a24;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; box-shadow: 0 3px 0 rgba(0, 0, 0, .25);
}
.sw-mini span { font-weight: 700; font-size: 14px; text-transform: capitalize; line-height: 1.1; overflow-wrap: anywhere; }
.sw-mini i { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-top: 4px; }
.sw-mini.got i { background: var(--good); color: #0b2a0f; }
.sw-mini.skip { opacity: .72; border-top-color: #9a94b8; }
.sw-mini.skip i { background: #ddd8ea; color: #5a5480; }
.sw-mini.buzz { border-top-color: var(--bad); }
.sw-mini.buzz i { background: var(--bad); color: #fff; }
/* tutorial props */
.sw-tut-card { width: 28cqw; height: 39cqw; border-radius: 3cqw; background: linear-gradient(#fff, #f4ece2); color: #17133a; overflow: hidden; display: flex; flex-direction: column; align-items: center; box-shadow: 0 1.5cqw 3cqw rgba(0, 0, 0, .4); transition: rotate .2s; z-index: 2; }
.sw-tut-card.big { scale: 1.2; }
.sw-tut-card.tilt-r { rotate: 12deg; }
.sw-tut-card.tilt-l { rotate: -12deg; }
.sw-tut-card b { align-self: stretch; text-align: center; background: linear-gradient(135deg, #ffb200, #f15a24); color: #fff; font-size: 4.8cqw; padding: 2.2cqw 0; text-transform: capitalize; }
.sw-tut-card small { color: #f15a24; font-size: 1.9cqw; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: 1.2cqw; }
.sw-tut-card ul { list-style: none; margin: .6cqw 0 0; padding: 0; text-align: center; font-size: 3cqw; font-weight: 600; line-height: 1.45; text-transform: capitalize; }
.sw-tut-card li { transition: color .15s; }
.sw-tut-card li.hit { color: #e2323c; text-decoration: line-through; text-decoration-thickness: .5cqw; }
.sw-tut-pile { width: 10cqw; height: 13.5cqw; border-radius: 1.5cqw; background: linear-gradient(#fff, #efe7dc); border-top: 2.6cqw solid var(--c); box-shadow: .8cqw -.8cqw 0 -.1cqw #e9dfd2, 1.6cqw -1.6cqw 0 -.2cqw #d8ccbd, 0 1cqw 1.6cqw rgba(0, 0, 0, .35); }
.sw-tut-pile b { position: absolute; right: -2.6cqw; bottom: -2.4cqw; min-width: 6.4cqw; height: 6.4cqw; border-radius: 3.2cqw; background: var(--c); color: #fff; font-size: 3.8cqw; display: grid; place-items: center; }
.sw-tut-slot { width: 10cqw; height: 13.5cqw; border-radius: 1.5cqw; border: .6cqw dashed rgba(255, 255, 255, .35); }
.sw-tut-cap { font-size: 2.8cqw; color: var(--muted); font-weight: 600; white-space: nowrap; }
.sw-tut-bubble { max-width: 42cqw; background: #fff; color: #17133a; border-radius: 3cqw; padding: 1.6cqw 2.6cqw; font-size: 3.4cqw; font-weight: 600; line-height: 1.25; box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, .3); z-index: 4; }
.sw-tut-bubble.them { background: var(--accent); color: #2b1d00; }
.sw-tut-buzzer { width: 26cqw; height: 17cqw; }
.sw-tut-buzzer::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6cqw; border-radius: 3cqw; background: linear-gradient(#3a3190, #17133a); }
.sw-tut-buzzer span {
  position: absolute; left: 3cqw; right: 3cqw; bottom: 3.4cqw; height: 13cqw; border-radius: 12cqw 12cqw 3cqw 3cqw; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 26%, #ffa3a5, #ff3b47 52%, #b8182a); color: #fff; font-size: 4.2cqw; font-weight: 700; box-shadow: 0 1.2cqw 0 #7d0f1c; transition: translate .08s;
}
.sw-tut-buzzer.down span { translate: 0 1.2cqw; box-shadow: 0 0 0 #7d0f1c; }
.sw-tut-flash { width: 100%; height: 100%; background: radial-gradient(circle, rgba(255, 90, 95, .45), rgba(200, 20, 40, .8)); opacity: 0; z-index: 8; pointer-events: none; display: grid; place-items: center; }
.sw-tut-flash b { font-size: 11cqw; color: #fff; rotate: -8deg; }
.sw-log { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sw-log span { font-size: 13px; padding: 3px 9px; border-radius: 999px; background: var(--panel); text-transform: capitalize; }
.sw-log span.got { color: var(--good); }
.sw-log span.buzz { color: var(--bad); }
.sw-log span.skip { color: var(--muted); }

/* ================= Whodunit ================= */

.wd-hand { display: flex; flex-direction: column; gap: 6px; background: var(--panel); border-radius: 16px; padding: 10px; }
.wd-hand small { color: var(--muted); font-size: 12px; font-weight: 600; }
.wd-hand .grow { flex: 1; }
.wd-cards { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-card {
  --tint: #ffe9f3; display: inline-flex; align-items: center; gap: 5px; border-radius: 10px; padding: 4px 9px 4px 6px;
  background: linear-gradient(180deg, #fff, var(--tint)); color: #17133a; font-weight: 700; font-size: 14px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18), inset 0 0 0 1.5px rgba(58, 34, 128, .12);
}
.wd-card[style*="--k: 1"] { --tint: #e6f3ff; }
.wd-card[style*="--k: 2"] { --tint: #fff4d6; }
.wd-card .ic { font-size: 16px; }
.wd-card.big { flex-direction: column; gap: 2px; width: 86px; padding: 8px 4px; font-size: 12px; text-align: center; border-radius: 12px; }
.wd-card.big .ic { font-size: 26px; }
.wd-card.back {
  width: 70px; height: 92px; justify-content: center; padding: 0; border-radius: 12px;
  background: repeating-linear-gradient(45deg, #8e5cf0 0 6px, #7a48dc 6px 12px); border: 3px solid #fff; color: #fff;
}
.wd-card.back .ic { font-size: 30px; }
.wd-card.open { --tint: #ffe0ef; box-shadow: 0 2px 0 rgba(0, 0, 0, .18), inset 0 0 0 1.5px #ff9cc6; }
.wd-card.mini { flex-direction: column; justify-content: center; gap: 1px; width: 52px; height: 66px; padding: 3px; font-size: 9.5px; text-align: center; border-radius: 9px; line-height: 1.1; }
.wd-card.mini .ic { font-size: 20px; }
.wd-card.mini.back { background: repeating-linear-gradient(45deg, #8e5cf0 0 5px, #7a48dc 5px 10px); border: 2.5px solid #fff; color: #fff; }
.wd-card.big.pick { box-shadow: 0 0 0 3px #ffc531, 0 6px 16px rgba(255, 197, 49, .45); cursor: grab; }
.wd-card.big.dim { opacity: .45; filter: grayscale(.5); }
.wd-card.big.crossed { position: relative; }
.wd-card.big.crossed::after { content: '✗'; position: absolute; right: 4px; top: 0; color: var(--bad); font-size: 22px; }
.wd-learned { background: var(--panel); border-radius: 12px; padding: 8px 12px; font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 2px rgba(90, 212, 90, .35); }
.chip.showing { box-shadow: 0 0 0 2px #ffc531; }
.wd-panel { display: flex; flex-direction: column; gap: 10px; }
.wd-panel:empty { display: none; }
.wd-panel .row { flex-wrap: wrap; gap: 8px; }
.wd-theory { display: flex; flex-direction: column; gap: 8px; background: var(--panel); border-radius: 16px; padding: 10px; box-shadow: inset 0 0 0 2px rgba(255, 197, 49, .35); }
.wd-theory > small { color: var(--accent); font-weight: 700; font-size: 13px; }
.wd-row { display: flex; flex-direction: column; gap: 4px; }
.wd-row small { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; }
.wd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-pick { padding: 7px 10px; border-radius: 12px; background: var(--panel2); font-weight: 600; font-size: 14px; }
.wd-pick.on { background: var(--accent); color: #17133a; }
.wd-pick.mine { opacity: .55; }
.wd-log { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; }
.wd-entry { background: var(--panel); border-radius: 12px; padding: 7px 10px; font-size: 14px; }
.wd-entry b { display: block; }
.wd-entry.dim { color: var(--muted); }
.wd-entry.right { box-shadow: inset 0 0 0 2px var(--good); }
.wd-entry.wrong { box-shadow: inset 0 0 0 2px var(--bad); }
.wd-counts { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); }
.wd-counts span.has { color: var(--accent); font-weight: 700; }
.wd-counts span.none { color: var(--bad); font-weight: 700; }
.wd-notes tr.known td:first-child { opacity: .6; }
.wd-notes-wrap { overflow-x: auto; }
.wd-notes { border-collapse: collapse; width: 100%; font-size: 13px; }
.wd-notes th { font-size: 11px; color: var(--muted); padding: 2px; }
.wd-notes td { padding: 1px 2px; white-space: nowrap; }
.wd-notes tr.cat td { color: var(--accent); font-weight: 700; padding-top: 8px; }
.wd-cell { width: 34px; height: 30px; border-radius: 8px; background: var(--panel2); font-weight: 700; }
.wd-cell.m1 { color: var(--bad); }
.wd-cell.m2 { color: var(--good); background: rgba(90, 212, 90, .15); }
.wd-cell.m3 { color: var(--accent); }
.wd-cell.auto { opacity: .7; }
/* the house board */
.wd-wrap { position: relative; display: grid; place-items: center; }
.wd-board {
  width: min(100%, calc((100dvh - 300px - var(--safe-top) - var(--safe-bottom)) * .886));
  aspect-ratio: 156 / 176; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); touch-action: manipulation; user-select: none;
}
@supports not (height: 100dvh) { .wd-board { width: min(100%, calc((100vh - 300px) * .886)); } }
.wd-sq { fill: #f4e5c6; transition: fill .15s; }
.wd-sq.alt { fill: #ead6af; }
.wd-sq.lit { fill: #ffd84a; stroke: #fff; stroke-width: .7; cursor: pointer; animation: wd-lit 1s ease-in-out infinite; }
@keyframes wd-lit { 50% { fill: #fff0a6; } }
.wd-sq.drop-over { fill: #fff !important; animation: none; stroke: #ffc531; stroke-width: 1.2; }
.wd-start { fill: none; stroke: rgba(122, 72, 220, .35); stroke-width: .7; stroke-dasharray: 1.2 1; pointer-events: none; }
.wd-room, .wd-door, .wd-shortcut, .wd-sc-badge, .wd-trail, .wd-trail-n, .wd-table-txt, .wd-sus, .wd-key { pointer-events: none; }
.wd-room-icon { font-size: 7.5px; text-anchor: middle; }
.wd-block-txt { font: 700 2.2px Fredoka, sans-serif; fill: #fff; text-anchor: middle; }
.wd-key { transition: opacity .3s; }
.wd-key.used { opacity: .25; }
.wd-sus { transition: opacity .3s; }
.wd-sus.moving { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
.wd-sus-ic { font-size: 3.3px; text-anchor: middle; }
.wd-room-name { font: 700 3.6px Fredoka, sans-serif; text-anchor: middle; paint-order: stroke; stroke: rgba(255, 255, 255, .8); stroke-width: .8px; }
.wd-room-hit { fill: transparent; stroke: transparent; stroke-width: 1.4; }
.wd-room-hit.lit { fill: rgba(255, 226, 122, .3); stroke: #ffc531; stroke-dasharray: 2.4 1.4; cursor: pointer; animation: wd-room-lit 1s ease-in-out infinite; }
@keyframes wd-room-lit { 50% { fill: rgba(255, 226, 122, .05); } }
.wd-room-hit.drop-over { fill: rgba(255, 255, 255, .45) !important; stroke: #fff !important; stroke-dasharray: none; animation: none; }
.wd-door { fill: #ffc531; stroke: #b8860b; stroke-width: .3; }
.wd-shortcut { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: .8; stroke-dasharray: 1.6 1.2; stroke-linecap: round; }
.wd-sc-badge circle { fill: #fff; stroke: #8e5cf0; stroke-width: .5; }
.wd-sc-badge text { font-size: 3.6px; text-anchor: middle; }
.wd-sc-badge text.arrow { font: 700 4px Fredoka, sans-serif; fill: #3a2280; }
.wd-table-txt { font: 700 2.6px Fredoka, sans-serif; text-anchor: middle; fill: #ff8ab8; }
.wd-trail { fill: none; stroke: #ff5aa0; stroke-width: 1.3; stroke-dasharray: 1.6 1.4; stroke-linecap: round; stroke-linejoin: round; animation: wd-march .5s linear infinite; }
@keyframes wd-march { to { stroke-dashoffset: -3; } }
.wd-trail-n circle { fill: #ff5aa0; stroke: #fff; stroke-width: .6; }
.wd-trail-n text { font: 700 3.4px Fredoka, sans-serif; fill: #fff; text-anchor: middle; }
.wd-token { pointer-events: none; transition: opacity .3s; }
.wd-token.out { opacity: .4; }
.wd-token.can-move { pointer-events: auto; touch-action: none; cursor: grab; }
.wd-token path { filter: drop-shadow(0 .4px .5px rgba(0, 0, 0, .35)); }
.wd-ghost {
  border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7), transparent 40%), var(--c);
  border: 3px solid #fff; transform-origin: center;
}
.wd-tray-off { display: none; }
.wd-clock { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-top: -8px; visibility: hidden; }
.wd-clock.on { visibility: visible; }
.wd-clock i { display: block; height: 100%; background: var(--accent); transform-origin: left; }
/* answers coming back */
.wd-reveal {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 12px; border-radius: 16px; background: rgba(23, 19, 58, .86); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.wd-reveal.on { opacity: 1; pointer-events: auto; }
.wd-rv-title { font-size: 20px; font-weight: 700; text-align: center; }
.wd-rv-cards { display: flex; gap: 8px; justify-content: center; }
.wd-rv-rows { display: flex; flex-direction: column; gap: 6px; width: min(100%, 320px); }
.wd-rv-row { display: flex; align-items: center; gap: 8px; background: var(--panel); border-radius: 12px; padding: 5px 10px 5px 5px; font-size: 14px; }
.wd-rv-row .nm { font-weight: 700; }
.wd-rv-row .cnt { color: var(--muted); white-space: nowrap; }
.wd-rv-row.has .cnt { color: var(--accent); font-weight: 700; }
.wd-rv-row .cnt b { font-size: 17px; }
.wd-rv-backs { flex: 1; display: flex; gap: 3px; justify-content: flex-end; }
.wd-rv-backs i {
  width: 15px; height: 21px; border-radius: 3px; border: 1.5px solid #fff;
  background: repeating-linear-gradient(45deg, #8e5cf0 0 3px, #7a48dc 3px 6px); box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
.wd-rv-snoop { display: flex; align-items: center; gap: 18px; }
.wd-rv-title small { font-size: 14px; color: var(--muted); font-weight: 600; }
.wd-rv-row .grow { flex: 1; }
.wd-rv-row.pass .cnt { color: var(--muted); }
.wd-rv-row.think .cnt { color: var(--accent); font-weight: 700; animation: wd-think 1s ease-in-out infinite; }
@keyframes wd-think { 50% { opacity: .45; } }
.wd-rv-to {
  display: flex; align-items: center; gap: 8px; min-height: 74px; padding: 4px 12px; border-radius: 16px;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14); font-weight: 700;
}
.wd-rv-to > span:first-child { color: var(--accent); font-size: 20px; }
.wd-rv-to.want { animation: wd-want 1s ease-in-out infinite; }
@keyframes wd-want { 50% { box-shadow: inset 0 0 0 3px #ffc531; background: rgba(255, 197, 49, .14); } }
.wd-rv-to.drop-over { background: rgba(255, 197, 49, .25); box-shadow: inset 0 0 0 2px #ffc531; }
.wd-rv-slot { min-width: 52px; display: grid; place-items: center; }
.wd-rv-note { color: var(--muted); font-size: 14px; text-align: center; }
.wd-stamp {
  font-size: 30px; font-weight: 700; padding: 2px 16px; border-radius: 12px; border: 4px solid currentColor;
  transform: rotate(-8deg) scale(2.2); opacity: 0; transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), opacity .2s;
}
.wd-stamp.in { transform: rotate(-8deg) scale(1); opacity: 1; }
.wd-stamp.good { color: var(--good); }
.wd-stamp.bad { color: var(--bad); }
/* tutorial props */
.tut-wd-sq { width: 9.4cqw; height: 9.4cqw; border-radius: 1.4cqw; background: #f4e5c6; }
.tut-wd-sq.alt { background: #ead6af; }
.tut-wd-sq.lit { background: #fff7c9; animation: tut-wd-lit 1s ease-in-out infinite; }
.tut-wd-sq.over { background: #fff; animation: none; box-shadow: 0 0 0 .8cqw #ffc531; }
@keyframes tut-wd-lit { 50% { background: #ffe27a; } }
.tut-wd-room { width: 30cqw; height: 26cqw; border-radius: 3cqw; display: grid; place-content: center; text-align: center; font-weight: 700; font-size: 3.6cqw; color: #3f92dd; box-shadow: 0 1cqw 0 rgba(0, 0, 0, .3); }
.tut-wd-room span { font-size: 9cqw; line-height: 1; }
.tut-wd-room.lit { outline: .8cqw dashed #ffc531; outline-offset: -1cqw; }
.tut-wd-card { width: 17cqw; padding: 1.4cqw .6cqw; border-radius: 2cqw; background: #fff; color: #17133a; font-weight: 700; font-size: 2.6cqw; text-align: center; box-shadow: 0 1cqw 0 rgba(0, 0, 0, .25); }
.tut-wd-card b { display: block; font-size: 7cqw; line-height: 1.1; }
.tut-wd-row { display: flex; align-items: center; gap: 1.6cqw; padding: 1cqw 2.4cqw 1cqw 1cqw; border-radius: 2.4cqw; background: #2a2266; font-weight: 700; font-size: 3.6cqw; color: #fff; white-space: nowrap; }
.tut-wd-row i { width: 4.4cqw; height: 6cqw; border-radius: .8cqw; border: .4cqw solid #fff; background: #8e5cf0; }
.tut-wd-row em { font-style: normal; color: #ffc531; }
.tut-wd-sus { width: 9cqw; height: 9cqw; border-radius: 50%; display: grid; place-items: center; font-size: 5cqw; background: radial-gradient(circle at 35% 30%, #fff, #efe9ff); border: .8cqw solid var(--c, #ff5a7a); box-shadow: 0 1cqw 0 rgba(0, 0, 0, .3); }
.tut-wd-card.back { background: repeating-linear-gradient(45deg, #8e5cf0 0 2cqw, #7a48dc 2cqw 4cqw); color: #fff; border: .6cqw solid #fff; }
.tut-wd-card.glow { box-shadow: 0 0 0 1cqw #ffc531, 0 1cqw 0 rgba(0, 0, 0, .25); }
.tut-wd-key { width: 9.4cqw; height: 9.4cqw; border-radius: 1.4cqw; background: #f4e5c6; display: grid; place-items: center; font-size: 5cqw; }
.tut-wd-dot { width: 6cqw; height: 6cqw; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 3cqw; color: #fff; background: var(--c); border: .6cqw solid #fff; }

/* ================= Wordsmith ================= */

.ws-board {
  position: relative; display: grid; grid-template-columns: repeat(var(--n, 13), 1fr); gap: 2px; padding: 4px; border-radius: 12px;
  background: linear-gradient(160deg, #d9a456, #9a5b22); box-shadow: inset 0 0 0 1px rgba(255, 230, 180, .35), 0 4px 12px rgba(0, 0, 0, .3);
  width: min(100%, calc(100dvh - 344px - var(--safe-top) - var(--safe-bottom))); align-self: center; aspect-ratio: 1; flex: none;
}
@supports not (height: 100dvh) { .ws-board { width: min(100%, calc(100vh - 344px)); } }
.ws-cell {
  position: relative; aspect-ratio: 1; border-radius: 3px; background: #f3e2bd; color: rgba(0, 0, 0, .45);
  font-size: clamp(6px, 1.9vw, 10px); font-weight: 700; display: grid; place-items: center; padding: 0; min-width: 0;
}
.ws-board.big { gap: 1.5px; padding: 3px; }
.ws-board.big .ws-cell { font-size: clamp(5px, 1.7vw, 9px); border-radius: 2.5px; }
.ws-cell.b-TW { background: #e05a5a; color: #fff; }
.ws-cell.b-DW { background: #f4a6a6; color: #7a1f1f; }
.ws-cell.b-TL { background: #3f7de0; color: #fff; }
.ws-cell.b-DL { background: #a9cdf5; color: #1d3f8f; }
.ws-cell.star { background: #f4a6a6; color: #7a1f1f; font-size: clamp(9px, 3vw, 16px); }
.ws-cell.drop-over { filter: brightness(1.15); }
.ws-board.picking .ws-cell:not(:has(.ws-tile)) { filter: brightness(1.08); }
.ws-lab { pointer-events: none; }
.ws-tile {
  position: relative; width: min(12vw, 48px); aspect-ratio: 1; border-radius: 14%; display: grid; place-items: center;
  background: linear-gradient(170deg, #fff6d8 0%, #f9e3a6 60%, #e9c477 100%); color: #4a2a0c;
  box-shadow: inset 0 -.14em 0 rgba(120, 70, 20, .42), inset 0 .06em 0 rgba(255, 255, 255, .9), 0 .08em .2em rgba(0, 0, 0, .4);
  user-select: none; -webkit-user-select: none; transition: background-color .15s, opacity .12s; container-type: size;
}
.ws-tile b { font-size: 54cqw; line-height: 1; pointer-events: none; }
.ws-tile i { position: absolute; right: 9%; bottom: 4%; font-size: 21cqw; font-style: normal; pointer-events: none; opacity: .8; }
.ws-tile.mine { touch-action: none; }
.ws-tile.sel { box-shadow: 0 0 0 3px #fff, 0 0 14px #ffd34d, inset 0 -.14em 0 rgba(120, 70, 20, .42); z-index: 2; }
.ws-slot .ws-tile.sel { transform: translateY(-6px); }
.ws-tile.swap { background: linear-gradient(170deg, #ffe3e3, #ffb0b3); transform: translateY(-4px) rotate(-4deg); }
.ws-tile.blank b { color: #a06a1a; font-style: italic; }
.ws-tile.moving { z-index: 5; }
.ws-tile.back { background: linear-gradient(160deg, #9a6be0, #5a2fa0); color: transparent; transition: none; }
.ws-tile.back i { opacity: 0; }
.ws-cell .ws-tile { position: absolute; inset: 0; width: auto; border-radius: 12%; font-size: 3px; }
.ws-cell .ws-tile b { font-size: 60cqw; }
.ws-cell .ws-tile i { font-size: 24cqw; right: 6%; bottom: 0; }
.ws-cell .ws-tile.on { background: linear-gradient(170deg, #fff2b8, #ffd34d 70%, #f0b92a); box-shadow: 0 0 0 2px #fff, inset 0 -.14em 0 rgba(120, 70, 20, .42); z-index: 1; }
.ws-cell .ws-tile.on.sel { box-shadow: 0 0 0 3px #fff, 0 0 12px #fff; }
.ws-tile.fixed.new { animation: ws-new 1.2s ease-out 2; }
@keyframes ws-new { 50% { filter: brightness(1.18) drop-shadow(0 0 3px #fff6cc); } }
.ws-mid { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.ws-bag { position: relative; width: 34px; height: 34px; flex: none; }
.ws-bag svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.ws-bag-n {
  position: absolute; right: -6px; bottom: -3px; min-width: 18px; height: 16px; padding: 0 3px; border-radius: 8px; font-size: 10px; line-height: 16px;
  text-align: center; background: #17133a; color: #fff; box-shadow: 0 0 0 2px #ffd34d;
}
.ws-bag.empty { opacity: .35; }
.ws-preview { flex: 1; min-width: 0; text-align: center; min-height: 20px; font-size: 14px; font-weight: 600; color: var(--muted); }
.ws-preview .ok { color: var(--good); }
.ws-preview .bad { color: #ffb0b3; }
.ws-rack {
  display: flex; justify-content: center; min-height: 52px; padding: 3px; border-radius: 12px; align-self: center;
  background: linear-gradient(#b27a3c, #7d4a1c); box-shadow: inset 0 2px 0 rgba(255, 220, 160, .35), 0 3px 6px rgba(0, 0, 0, .3);
}
.ws-slot { padding: 2px; border-radius: 9px; }
.ws-slot.end { width: 10px; }
.ws-slot.drop-over { box-shadow: inset 0 0 0 2px #ffd34d !important; }
.ws-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding-bottom: 8px; }
.ws-tools .grow { flex: 1; }
.ws-tile.fixed.pend { background: linear-gradient(170deg, #fffaf0, #f3e7c8 60%, #dccaa0); outline: 2px dashed #ff8a3d; outline-offset: -2px; animation: ws-pend 1s ease-in-out infinite; }
@keyframes ws-pend { 50% { outline-color: #ffd34d; filter: brightness(1.06); } }
.ws-tile.fixed.wrong { background: linear-gradient(170deg, #ffd6d6, #ff9a9a 70%, #e36d6d); color: #6a0f0f; outline: none; animation: none; }
/* turn clock / challenge countdown, along the bottom of the banner */
.ws-banner { position: relative; overflow: hidden; }
.ws-banner.timed { padding-left: 52px; padding-right: 52px; }
.ws-clock-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .75); transform-origin: left; }
.ws-banner.mine .ws-clock-bar { background: rgba(0, 0, 0, .45); }
.ws-banner.low .ws-clock-bar { background: #ff7a7f; }
.ws-banner.mine.low .ws-clock-bar { background: #17133a; }
.ws-clock-t {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); min-width: 38px; padding: 3px 6px; border-radius: 99px;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, .3); color: #fff;
}
.ws-banner.low .ws-clock-t { background: #17133a; color: #ff7a7f; animation: ws-beat 1s ease-in-out infinite; }
@keyframes ws-beat { 50% { transform: translateY(-50%) scale(1.12); } }
.ws-banner.chal:not(.mine) { background: rgba(255, 138, 61, .22); }
.chip.ws-sitout { box-shadow: inset 0 0 0 2px #ff8a3d; }
.chip.ws-sitout::after { content: 'sits out'; font-size: 10px; color: #ffb27a; font-weight: 600; }
/* the challenge stamp over the board */
.ws-stamp {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-6deg); z-index: 8; pointer-events: none; display: none; width: max-content;
  padding: 10px 18px; border-radius: 14px; border: 4px solid currentColor; background: rgba(23, 19, 58, .92); color: #ffd34d;
  text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); max-width: 88%;
}
.ws-stamp.show { display: block; }
.ws-stamp b { display: block; font-size: 24px; line-height: 1.1; letter-spacing: .5px; text-transform: uppercase; overflow-wrap: break-word; }
.ws-stamp small { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: #fff; }
.ws-stamp.bad { color: #ff7a7f; }
.ws-stamp.good { color: var(--good); }
.ws-tools .ws-chal { background: linear-gradient(#ff9a52, #e5642a); color: #fff; box-shadow: 0 0 16px rgba(255, 138, 61, .6); animation: nudge 1.4s ease-in-out infinite; }
.ws-wait { font-size: 13px; color: var(--muted); font-weight: 600; }
.ws-preview .maybe { color: #ffd9a8; }
/* unseen-tiles tracker */
button.ws-bag { padding: 0; border: 0; background: none; cursor: pointer; }
.ws-trackbtn {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 7px; border: 0; border-radius: 10px;
  background: var(--panel2); color: var(--text); font: inherit; font-size: 10px; font-weight: 600; cursor: pointer;
}
.ws-trackbtn b { font-size: 12px; color: var(--accent); letter-spacing: .3px; }
.ws-track .hint { margin: 0 0 10px; }
.ws-track-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 5px; }
.ws-track-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--accent); }
.ws-track-cell .ws-tile { width: 100%; max-width: 40px; }
.ws-track-cell.none { opacity: .3; }
.ws-track-cell.none span { color: var(--muted); }
.ws-track-sum { text-align: center; color: var(--muted); font-size: 13px; font-weight: 600; margin: 10px 0; }
/* end of game: leftover tiles */
.ws-final { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ws-final-row { display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 4px; border-radius: 99px; background: rgba(0, 0, 0, .22); font-size: 14px; font-weight: 600; }
.ws-final-row .nm { min-width: 0; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-final-row b { margin-left: auto; color: #ffb0b3; }
.ws-final-row.out b { color: var(--accent); }
.ws-final-row em { font-size: 12px; color: var(--muted); font-weight: 500; }
.ws-final-tiles { display: flex; gap: 2px; flex-wrap: wrap; }
.ws-mini {
  width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #4a2a0c;
  background: linear-gradient(170deg, #fff6d8, #e9c477); box-shadow: inset 0 -2px 0 rgba(120, 70, 20, .4);
}
.ws-abc { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ws-abc .ws-tile { width: 100%; }
/* tutorial props */
.ws-tut-sq { width: 9cqw; height: 9cqw; border-radius: .8cqw; background: #f3e2bd; display: grid; place-items: center; font-size: 2.6cqw; font-weight: 700; color: rgba(0, 0, 0, .45); }
.ws-tut-sq.b-TW { background: #e05a5a; color: #fff; }
.ws-tut-sq.b-DW { background: #f4a6a6; color: #7a1f1f; }
.ws-tut-sq.b-TL { background: #3f7de0; color: #fff; }
.ws-tut-sq.b-DL { background: #a9cdf5; color: #1d3f8f; }
.ws-tut-tile {
  width: 9cqw; height: 9cqw; border-radius: 1.3cqw; display: grid; place-items: center; font-weight: 700; font-size: 5.4cqw; color: #4a2a0c; z-index: 3;
  background: linear-gradient(170deg, #fff6d8, #f9e3a6 60%, #e9c477); box-shadow: inset 0 -.7cqw 0 rgba(120, 70, 20, .42), 0 .5cqw .8cqw rgba(0, 0, 0, .4);
}
.ws-tut-tile.on { background: linear-gradient(170deg, #fff2b8, #ffd34d 70%, #f0b92a); }
.ws-tut-tile.back { background: linear-gradient(160deg, #9a6be0, #5a2fa0); color: transparent; }
.ws-tut-rack { width: 74cqw; height: 13cqw; border-radius: 2cqw; background: linear-gradient(#b27a3c, #7d4a1c); }
.ws-tut-btn { padding: 1.4cqw 3cqw; border-radius: 2cqw; background: var(--accent); color: #17133a; font-weight: 700; font-size: 4cqw; white-space: nowrap; }
.ws-tut-btn.alt { background: var(--panel2); color: var(--text); }
.ws-tut-bag { width: 12cqw; }
.ws-tut-bag svg { width: 100%; display: block; }
.ws-tut-chip { padding: 1cqw 3cqw; border-radius: 99px; background: var(--panel2); font-weight: 700; font-size: 4cqw; white-space: nowrap; }
.ws-tut-chip b { color: var(--accent); margin-left: 1.5cqw; }
.ws-tut-tile.pend { outline: .7cqw dashed #ff8a3d; outline-offset: -.7cqw; }
.ws-tut-tile.wrong { background: linear-gradient(170deg, #ffd6d6, #ff9a9a 70%, #e36d6d); color: #6a0f0f; }
.ws-tut-pill { padding: .8cqw 2.4cqw; border-radius: 99px; background: rgba(0, 0, 0, .35); font-weight: 700; font-size: 4cqw; color: #ffb27a; }
.ws-tut-btn.chal { background: linear-gradient(#ff9a52, #e5642a); color: #fff; }
.ws-tut-btn.hit { filter: brightness(1.25); }
.ws-tut-stamp, .tut-item.ws-tut-stamp {
  display: none; padding: 1.6cqw 4cqw; border-radius: 3cqw; border: 1cqw solid currentColor; background: rgba(23, 19, 58, .94); color: #ffd34d;
  font-weight: 700; font-size: 6cqw; white-space: nowrap; text-transform: uppercase; z-index: 6; transform: translate(-50%, -50%) rotate(-6deg);
}
.ws-tut-stamp.show { display: block; animation: ws-tut-stamp .3s cubic-bezier(.3, .7, .3, 1.2); }
.ws-tut-stamp.bad { color: #ff7a7f; }
.ws-tut-stamp.good { color: var(--good); }
@keyframes ws-tut-stamp { from { transform: translate(-50%, -50%) scale(1.8) rotate(-14deg); opacity: 0; } }
.ws-tut-banner {
  position: relative; overflow: hidden; width: 80cqw; padding: 2cqw 0 2.6cqw; border-radius: 3cqw; background: #ffc531; color: rgba(0, 0, 0, .7);
  text-align: center; font-weight: 700; font-size: 5cqw;
}
.ws-tut-banner i { position: absolute; left: 0; right: 0; bottom: 0; height: 1.2cqw; background: rgba(0, 0, 0, .45); transform-origin: left; transition: transform .4s linear; }
.ws-tut-banner span { position: absolute; right: 2cqw; top: 50%; transform: translateY(-50%); padding: .5cqw 1.8cqw; border-radius: 99px; background: rgba(0, 0, 0, .3); color: #fff; font-size: 3.8cqw; }
.ws-tut-banner.low i, .ws-tut-banner.low span { background: var(--bad); }
.ws-tut-panel {
  display: none; grid-template-columns: repeat(4, 1fr); gap: 1.4cqw 2cqw; padding: 2.4cqw 3cqw; border-radius: 3cqw; background: var(--panel2); z-index: 6;
  box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .45);
}
.ws-tut-panel.show { display: grid; animation: ws-tut-pop .25s ease-out; }
@keyframes ws-tut-pop { from { transform: translate(-50%, -40%) scale(.85); opacity: 0; } }
.ws-tut-count { display: flex; align-items: center; gap: 1cqw; font-weight: 700; font-size: 3.8cqw; color: var(--accent); }
.ws-tut-count b { width: 7cqw; height: 7cqw; border-radius: 1.1cqw; display: grid; place-items: center; font-size: 4.4cqw; color: #4a2a0c; background: linear-gradient(170deg, #fff6d8, #e9c477); }
.ws-tut-count.none { opacity: .35; }
.ws-tut-bag.empty { opacity: .35; }
.ws-tut-row {
  display: flex; align-items: center; gap: 2cqw; width: 62cqw; padding: 1cqw 3cqw; border-radius: 99px; background: rgba(0, 0, 0, .25);
  font-weight: 700; font-size: 4cqw; transition: background .3s;
}
.ws-tut-row em { display: flex; gap: .8cqw; flex: 1; }
.ws-tut-row em i { width: 5.4cqw; height: 5.4cqw; border-radius: .9cqw; display: grid; place-items: center; font-style: normal; font-size: 3.4cqw; color: #4a2a0c; background: linear-gradient(170deg, #fff6d8, #e9c477); }
.ws-tut-row b { color: var(--accent); }
.ws-tut-row.lose { background: rgba(255, 90, 95, .3); }
.ws-tut-row.lose em i { opacity: .3; }
.ws-tut-row.gain { background: rgba(90, 212, 90, .3); }

/* ================= Popcorn Words (id: sprint) ================= */

.sp-head { display: flex; align-items: center; gap: 10px; }
.sp-head .chips { flex: 1; min-width: 0; }
.sp-head .chip { padding: 3px 10px; font-size: 13px; }
.sp-mw { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: none; }
.sp-mw small { color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.sp-mw-door {
  padding: 5px 9px; border-radius: 9px; background: linear-gradient(#30343f, #181b23);
  box-shadow: inset 0 0 0 2px #5d6473, inset 0 2px 6px rgba(0, 0, 0, .6), 0 2px 5px rgba(0, 0, 0, .4);
}
.sp-lcd {
  display: inline-block; min-width: 4.6ch; text-align: center; font: 700 22px/1 'Courier New', ui-monospace, monospace; letter-spacing: .08em;
  color: #7dffa0; text-shadow: 0 0 6px rgba(125, 255, 160, .75); font-variant-numeric: tabular-nums;
}
.sp-mw.last .sp-lcd { color: #ffbe55; text-shadow: 0 0 6px rgba(255, 190, 85, .8); }
.sp-mw.low .sp-lcd { color: #ff6b6b; text-shadow: 0 0 7px rgba(255, 90, 90, .85); }
.sp-mw.ding .sp-lcd { color: #ffe066; text-shadow: 0 0 8px rgba(255, 224, 102, .9); animation: sp-blink .5s steps(2) 4; }
@keyframes sp-blink { 50% { opacity: .25; } }
.sp-left {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 9px; font-size: 11px;
  background: radial-gradient(circle at 40% 35%, #fff, #fbedc9 70%, #efd28a); color: #6a3a0c;
}
/* the board: a big 25x25 sheet you pinch, pan and zoom inside a square window */
.sp-view {
  position: relative; overflow: hidden; border-radius: 14px; touch-action: none; flex: none; align-self: center; aspect-ratio: 1;
  width: min(100%, calc(100dvh - 404px - var(--safe-top) - var(--safe-bottom)));
  background: radial-gradient(ellipse at 50% 40%, #5a2f14, #3a1c0b); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, .2), inset 0 0 18px rgba(0, 0, 0, .45);
}
@supports not (height: 100dvh) { .sp-view { width: min(100%, calc(100vh - 404px)); } }
.sp-view[hidden], .sp-bowl[hidden], .sp-bar[hidden], .sp-watch[hidden] { display: none; }
.sp-board {
  position: absolute; left: 0; top: 0; width: 960px; height: 960px; box-sizing: border-box; padding: 6px; transform-origin: 0 0;
  display: grid; grid-template-columns: repeat(25, 36px); grid-auto-rows: 36px; gap: 2px;
}
.sp-board.sp-glide { transition: transform .28s cubic-bezier(.25, .8, .3, 1); }
.sp-cell { position: relative; border-radius: 5px; background: rgba(255, 236, 200, .08); }
.sp-cell.mid::before { content: ''; position: absolute; inset: 38%; border-radius: 50%; background: rgba(255, 210, 63, .4); }
.sp-cell.drop-over { background: rgba(255, 210, 63, .55); }
.sp-board.picking .sp-cell:empty { background: rgba(255, 236, 200, .15); }
.sp-board.locked .sp-cell { pointer-events: none; }
.sp-zoom { position: absolute; right: 6px; bottom: 6px; display: flex; flex-direction: column; gap: 5px; }
.sp-zbtn {
  width: 34px; height: 34px; padding: 0; border-radius: 11px; font-size: 21px; font-weight: 700; line-height: 1; color: #fff;
  background: rgba(23, 19, 58, .78); box-shadow: 0 2px 5px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .15);
}
.sp-zbtn:disabled { opacity: .35; }
/* letter tiles: clean square tiles in a buttery cream, the letter big and dark */
.sp-tile {
  --pc: linear-gradient(165deg, #fffdf5 0%, #fff4d6 52%, #f8dfa0 100%);
  --edge: rgba(176, 112, 24, .55);
  position: relative; width: 100%; height: 100%; display: grid; place-items: center; color: #5a300a; font-weight: 700;
  container-type: size; user-select: none; -webkit-user-select: none; touch-action: none;
  filter: drop-shadow(0 1.5px 1.2px rgba(70, 35, 0, .5));
}
.sp-tile::before {
  content: ''; position: absolute; inset: 2%; border-radius: 17%; background: var(--pc);
  box-shadow: inset 0 -6cqw 0 rgba(176, 112, 24, .22), inset 0 4cqw 0 rgba(255, 255, 255, .75), inset 0 0 0 1px var(--edge);
}
.sp-tile b { position: relative; z-index: 1; font-size: 60cqw; line-height: 1; margin-top: -4cqw; pointer-events: none; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.sp-tile.good { color: #17652a; --edge: rgba(40, 130, 60, .6); --pc: linear-gradient(165deg, #f6fff2 0%, #def6d4 52%, #b3e3a2 100%); }
.sp-tile.butter { color: #17652a; --edge: rgba(190, 130, 0, .7); --pc: linear-gradient(165deg, #fffde8 0%, #fff0a0 52%, #f5c93c 100%); }
.sp-tile.bad { color: #a11d1d; --edge: rgba(190, 50, 50, .6); --pc: linear-gradient(165deg, #fff8f6 0%, #ffdcd6 52%, #f3aea4 100%); }
.sp-tile.sel { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px var(--accent)); z-index: 2; }
.sp-slot .sp-tile.sel { transform: translateY(-5px); }
.sp-tile.moving { z-index: 4; }
.sp-cell .sp-tile { position: absolute; inset: 0; width: auto; height: auto; }
.sp-tile.drag-ghost { filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .45)); }
/* the bowl: deep red inside, stripes round the bottom */
.sp-bowl {
  display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; min-height: 58px; padding: 6px 12px 18px;
  border-radius: 16px 16px 42% 42% / 16px 16px 40px 40px;
  background: repeating-linear-gradient(90deg, #e8434a 0 18px, #fff3e6 18px 36px) bottom / 100% 12px no-repeat, radial-gradient(ellipse at 50% 0%, #8e1d27, #5e0f17 80%);
  box-shadow: inset 0 5px 0 #f5f5f8, inset 0 9px 12px rgba(0, 0, 0, .35), 0 5px 12px rgba(0, 0, 0, .35);
}
.sp-slot { padding: 2px; width: min(9.3vw, 40px); aspect-ratio: 1; box-sizing: border-box; border-radius: 8px; }
.sp-slot .sp-tile { font-size: 4px; }
.sp-slot.end { width: 12px; }
.sp-slot.drop-over { box-shadow: inset 0 0 0 2px var(--accent) !important; }
.sp-empty { align-self: center; color: rgba(255, 236, 210, .75); font-size: 13px; font-weight: 600; padding: 8px 6px; }
.sp-bar { display: flex; align-items: center; gap: 6px; flex: none; }
.sp-bar .grow { flex: 1; }
.sp-ico { width: 40px; padding: 0; font-size: 20px; }
.sp-more.ready, .sp-show { animation: sp-glow 1.1s ease-in-out infinite; }
.sp-show { background: linear-gradient(160deg, #ffd23f, #ee8434); color: #17133a; }
@keyframes sp-glow { 50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .6), 0 0 18px var(--accent); } }
.sp-kettle { position: relative; width: 56px; height: 50px; padding: 0; background: none; flex: none; border-radius: 12px; }
.sp-kettle svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.sp-pool-n {
  position: absolute; right: -4px; bottom: -3px; min-width: 20px; height: 18px; padding: 0 4px; border-radius: 9px; font-size: 11px;
  line-height: 18px; background: #17133a; color: #fff; box-shadow: 0 0 0 2px var(--accent);
}
.sp-kettle.ready svg { animation: sp-jiggle 1s ease-in-out infinite; }
@keyframes sp-jiggle { 0%, 100% { transform: none; } 25% { transform: rotate(-4deg) translateY(-1px); } 75% { transform: rotate(4deg) translateY(-1px); } }
.sp-kettle.empty svg, .sp-kettle.low svg { opacity: .55; }
.sp-kettle.drop-over { box-shadow: 0 0 0 3px var(--accent), 0 0 18px rgba(255, 197, 49, .6) !important; }
.sp-watch { text-align: center; padding: 24px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sp-watch p { margin: 0; font-weight: 600; }
.sp-watch small { color: var(--muted); }
.sp-watch-kettle { width: 90px; animation: sp-jiggle 1.4s ease-in-out infinite; }
.sp-watch-kettle svg { width: 100%; display: block; }
.sp-status { text-align: center; font-weight: 600; font-size: 14px; min-height: 20px; color: var(--muted); }
.sp-status .ok { color: var(--good); }
.sp-status .bad { color: #ffb0b3; }
.sp-foot { padding-bottom: 6px; }
.sp-foot:empty { display: none; }
.sp-reveal { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; }
.sp-reveal:empty { display: none; }
.sp-over > .sp-reveal { order: 1; }
.sp-over > .sp-foot { order: 2; }
.sp-over > .sp-view, .sp-over > .sp-status, .sp-over > .sp-bowl { order: 3; }
.sp-outmsg { margin: 0; text-align: center; font-weight: 700; color: var(--accent); }
.sp-res { display: flex; align-items: center; gap: 10px; background: var(--panel); border-radius: 14px; padding: 8px; }
.sp-res.first { box-shadow: 0 0 0 2px var(--accent); }
.sp-res small { display: block; color: var(--muted); font-size: 12px; }
.sp-pts { color: var(--accent); font-weight: 700; font-size: 20px; white-space: nowrap; }
.sp-mini { display: grid; gap: 1px; flex: none; }
.sp-mini i {
  width: var(--s); height: var(--s); border-radius: 20%; font-size: calc(var(--s) * .7); font-style: normal; font-weight: 700;
  line-height: var(--s); text-align: center; color: #6a3a0c;
}
.sp-mini i.on { background: linear-gradient(165deg, #fffdf5, #fff4d6 52%, #f8dfa0); }
.sp-mini.none { width: 30px; }
/* tutorial props */
.sp-tut-tile {
  width: 9cqw; height: 9cqw; display: grid; place-items: center; font-weight: 700; font-size: 5cqw; color: #5a300a; z-index: 3;
  filter: drop-shadow(0 .5cqw .5cqw rgba(70, 35, 0, .5));
}
.sp-tut-tile::before {
  content: ''; position: absolute; inset: 2%; z-index: -1; border-radius: 17%;
  background: linear-gradient(165deg, #fffdf5, #fff4d6 52%, #f8dfa0);
  box-shadow: inset 0 -.6cqw 0 rgba(176, 112, 24, .22), inset 0 .4cqw 0 rgba(255, 255, 255, .75), inset 0 0 0 1px rgba(176, 112, 24, .55);
}
.sp-tut-tile.good { color: #17652a; }
.sp-tut-tile.good::before { background: linear-gradient(165deg, #f6fff2, #def6d4 52%, #b3e3a2); box-shadow: inset 0 -.6cqw 0 rgba(40, 130, 60, .2), inset 0 0 0 1px rgba(40, 130, 60, .6); }
.sp-tut-tile.butter { color: #17652a; }
.sp-tut-tile.butter::before { background: linear-gradient(165deg, #fffde8, #fff0a0 52%, #f5c93c); box-shadow: inset 0 -.6cqw 0 rgba(176, 112, 24, .25), inset 0 0 0 1px rgba(190, 130, 0, .7); }
.sp-tut-board {
  width: 58cqw; height: 46cqh; border-radius: 2cqw; overflow: hidden; background-color: #4a2410;
  background-image: linear-gradient(rgba(255, 236, 200, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 236, 200, .1) 1px, transparent 1px);
  background-size: 8.66cqw 8.66cqw;
}
.sp-tut-bowl {
  width: 82cqw; height: 15cqw; border-radius: 3cqw 3cqw 40% 40% / 3cqw 3cqw 6cqw 6cqw;
  background: repeating-linear-gradient(90deg, #e8434a 0 3cqw, #fff3e6 3cqw 6cqw) bottom / 100% 2.4cqw no-repeat, radial-gradient(ellipse at 50% 0%, #8e1d27, #5e0f17 80%);
  box-shadow: inset 0 1cqw 0 #f5f5f8;
}
.sp-tut-kettle { width: 15cqw; }
.sp-tut-kettle svg { width: 100%; display: block; }
.sp-tut-btn { padding: 1.4cqw 3cqw; border-radius: 2cqw; background: var(--accent); color: #17133a; font-weight: 700; font-size: 4cqw; white-space: nowrap; }
.sp-tut-mw { padding: 1.2cqw 2.4cqw; border-radius: 2cqw; background: linear-gradient(#30343f, #181b23); box-shadow: inset 0 0 0 .6cqw #5d6473; }
.sp-tut-mw b { font: 700 6cqw/1 'Courier New', monospace; color: #7dffa0; text-shadow: 0 0 1.5cqw rgba(125, 255, 160, .75); letter-spacing: .08em; }
.sp-tut-mw.last b { color: #ffbe55; }
.sp-tut-zoom { width: 70cqw; height: 52cqh; border-radius: 2cqw; overflow: hidden; background: #3a1c0b; }
.sp-tut-zoom > div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 50% 50%; }

/* ================= Iron Roads ================= */

.ir-bar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ir-p { flex: none; display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--panel); font-size: 13px; }
.ir-p.turn { box-shadow: 0 0 0 2px var(--c); }
.ir-p.out { opacity: .4; }
.ir-p .pts { color: var(--accent); font-weight: 700; }
.ir-wrap { display: flex; justify-content: center; }
.ir-map { width: min(100%, calc((100dvh - 380px - var(--safe-top) - var(--safe-bottom)) * .714)); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
@supports not (height: 100dvh) { .ir-map { width: min(100%, calc((100vh - 380px) * .714)); } }
.ir-map.mine { touch-action: none; }
.ir-tuft { fill: none; stroke: rgba(80, 130, 50, .28); stroke-width: .3; stroke-linecap: round; }
.ir-peak, .ir-hill, .ir-tree, .ir-tuft, .ir-compass, .ir-draft, .ir-trains { pointer-events: none; }
.ir-compass circle { fill: rgba(255, 255, 255, .6); stroke: rgba(60, 60, 80, .35); stroke-width: .3; }
.ir-compass path { fill: #e8505b; }
.ir-compass text { font: 700 2.4px Fredoka, sans-serif; text-anchor: middle; fill: #3b3a4a; }
.ir-edge .shade { stroke: rgba(40, 40, 30, .1); stroke-width: 3; stroke-linecap: round; }
.ir-edge .base { stroke-width: 2; stroke-linecap: round; opacity: .75; }
.ir-edge.owned .base, .ir-edge.can .base, .ir-edge.next .base, .ir-edge.sel .base { opacity: 1; }
.ir-edge .ties { stroke: rgba(255, 255, 255, .55); stroke-width: .5; stroke-dasharray: 1 1.2; }
.ir-edge .own { stroke-width: 2.3; stroke-linecap: butt; transition: stroke .3s; }
.ir-edge .rail { stroke: transparent; stroke-width: .45; stroke-dasharray: .9 .9; }
.ir-edge.owned .rail { stroke: rgba(255, 255, 255, .6); }
.ir-edge.owned .ties { display: none; }
.ir-edge .hit { stroke: transparent; stroke-width: 7; cursor: pointer; }
.ir-edge .tag circle { fill: #fff; stroke: rgba(0, 0, 0, .25); stroke-width: .3; }
.ir-edge .tag text { font: 700 2.8px Fredoka, sans-serif; text-anchor: middle; fill: #3b3a4a; pointer-events: none; }
.ir-edge .tag { pointer-events: none; }
.ir-edge.full .tag { display: none; }
.ir-edge.can .base { filter: drop-shadow(0 0 .8px #fff); }
.ir-edge.can .tag circle { fill: #ffe9a6; }
.ir-edge.sel .base { stroke: #ffc531; }
.ir-edge.next .base { stroke: #ffe27a; animation: ir-next .8s ease-in-out infinite; }
.ir-edge.next .tag circle { fill: #ffc531; }
@keyframes ir-next { 50% { stroke: #fff6c9; } }
.ir-edge.route .own, .ir-edge.route .base { animation: ir-pulse .7s ease-in-out infinite; }
@keyframes ir-pulse { 50% { opacity: .4; } }
.ir-draft line { stroke-width: 2.6; stroke-linecap: round; }
.ir-draft line.new { filter: drop-shadow(0 0 1px #fff); }
.ir-draft line.old { stroke-width: 1.2; stroke: #fff !important; opacity: .8; }
.ir-draft.fail line { stroke: #ff5a5f !important; transition: opacity .4s; opacity: .3; }
.ir-draft line.ir-drawin { stroke-width: 2.3; }
.ir-town .sh { fill: rgba(0, 0, 0, .2); pointer-events: none; }
.ir-town .dot { fill: #fff; stroke: var(--c); stroke-width: .8; pointer-events: none; }
.ir-town .house { fill: #6c6a80; pointer-events: none; }
.ir-town .star { display: none; font: 700 3px Fredoka, sans-serif; text-anchor: middle; fill: #fff; pointer-events: none; }
.ir-town.home .dot { fill: var(--c); stroke: #fff; r: 3.3; }
.ir-town.home .house { display: none; }
.ir-town.home .star { display: block; }
.ir-town.goal .dot { stroke: #ffc531; stroke-width: 1.3; }
.ir-town.goal .sh { fill: rgba(255, 197, 49, .55); animation: ir-goal 1.2s ease-in-out infinite; }
@keyframes ir-goal { 50% { opacity: .3; } }
.ir-town .name { font: 700 3px Fredoka, sans-serif; text-anchor: middle; fill: #2b2a38; paint-order: stroke; stroke: #eef5da; stroke-width: .8; pointer-events: none; }
.ir-town.goal .name { fill: #8a5a00; }
.ir-town .hit { fill: transparent; }
.ir-map.mine .ir-town.start .hit { cursor: grab; }
.ir-map.mine .ir-town.start .dot { animation: ir-start 1.4s ease-in-out infinite; }
@keyframes ir-start { 50% { stroke-width: 1.6; } }
.ir-map.drawing .ir-town.start .dot { animation: none; }
.ir-smoke { fill: #fff; transform-box: fill-box; transform-origin: center; }
.ir-coin {
  position: fixed; z-index: 9998; width: 18px; height: 18px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff6c2, #ffc531 55%, #d99a00); box-shadow: inset 0 0 0 2px #e0a800, 0 2px 4px rgba(0, 0, 0, .35);
}
.ir-bubble {
  position: fixed; z-index: 9999; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; padding: 5px 12px; border-radius: 14px;
  background: #fff; color: #17133a; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); font-size: 14px;
}
.ir-bubble b { font-size: 18px; }
.ir-bubble small { color: #6c6a80; font-size: 11px; font-weight: 600; }
.ir-bubble.over { background: #ff5a5f; color: #fff; }
.ir-bubble.over small { color: #ffe0e0; }
.ir-bubble::after { content: ''; position: absolute; bottom: -6px; left: 50%; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #fff; }
.ir-bubble.over::after { border-top-color: #ff5a5f; }
/* tutorial props */
.tut-ir-map { width: 100%; height: 100%; }
.tut-ir-town { width: 6cqw; height: 6cqw; border-radius: 50%; background: #fff; border: .8cqw solid #3b3a4a; z-index: 2; }
.tut-ir-town.home { background: #ff5a5f; border-color: #fff; display: grid; place-items: center; color: #fff; font-size: 3.6cqw; font-weight: 700; }
.tut-ir-name { font-weight: 700; font-size: 3.2cqw; color: #2b2a38; z-index: 2; }
.tut-ir-coin { width: 5cqw; height: 5cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c2, #ffc531 55%, #d99a00); box-shadow: inset 0 0 0 .5cqw #e0a800; z-index: 4; }
.tut-ir-chip { padding: 1cqw 2.6cqw; border-radius: 99px; background: #2a2266; color: #fff; font-weight: 700; font-size: 3.6cqw; white-space: nowrap; box-shadow: 0 0 0 .6cqw var(--c); }
.tut-ir-bubble { padding: .8cqw 2.4cqw; border-radius: 2.4cqw; background: #fff; color: #17133a; font-weight: 700; font-size: 3.8cqw; white-space: nowrap; box-shadow: 0 1cqw 2cqw rgba(0,0,0,.3); z-index: 5; }
.tut-ir-train { font-size: 8cqw; z-index: 4; }
.tut-ir-town.boom { box-shadow: 0 0 0 1.4cqw rgba(255, 197, 49, .6); }
.tut-ir-cargo { font-size: 4cqw; z-index: 3; }
.tut-ir-cargo.big { font-size: 7cqw; z-index: 5; }
.tut-ir-race { font-size: 6cqw; z-index: 3; color: #ff5a5f; animation: target-glow .9s infinite; }
.tut-ir-card { width: 20cqw; padding: 1.6cqw 1cqw; border-radius: 2.4cqw; display: flex; flex-direction: column; align-items: center; z-index: 4; transition: transform .2s, box-shadow .2s;
  background: linear-gradient(170deg, #fffdf5, #f1e3bd); color: #3b2a10; box-shadow: 0 .8cqw 0 #c9a46b, 0 1.6cqw 3cqw rgba(0, 0, 0, .3); font-size: 3.2cqw; }
.tut-ir-card b { font-size: 3.4cqw; }
.tut-ir-card i { font-style: normal; color: #a07a3a; }
.tut-ir-card span { color: #8a5a00; font-weight: 700; }
.tut-ir-card.back { height: 22cqw; justify-content: center; font-size: 8cqw; background: repeating-linear-gradient(45deg, #6b8f3a 0 2cqw, #5b7d2f 2cqw 4cqw); }
.tut-ir-card.on { box-shadow: 0 .8cqw 0 #c9a46b, 0 0 0 1cqw #ffc531, 0 1.6cqw 3cqw rgba(0, 0, 0, .3); }
.tut-ir-btn { padding: 1.6cqw 4cqw; border-radius: 3cqw; background: #ffc531; color: #2b2a38; font-weight: 700; font-size: 3.8cqw; white-space: nowrap; box-shadow: 0 .8cqw 0 #c99a12; z-index: 3; }
.tut-ir-stn { width: 11cqw; z-index: 5; }
.tut-ir-ev { width: 40cqw; min-height: 26cqw; padding: 2cqw; border-radius: 3cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 4;
  background: linear-gradient(165deg, #fffdf5, #f1e3bd); color: #3b2a10; box-shadow: inset 0 0 0 .8cqw #c9a46b, 0 2cqw 4cqw rgba(0, 0, 0, .35); }
.tut-ir-ev span { font-size: 9cqw; line-height: 1; }
.tut-ir-ev b { font-size: 4.6cqw; }
.tut-ir-ev small { font-size: 3.2cqw; }
.tut-ir-ev.back { background: repeating-linear-gradient(45deg, #6b8f3a 0 2cqw, #5b7d2f 2cqw 4cqw); }
.ir-panel { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; }
.ir-contracts { display: flex; flex-direction: column; gap: 6px; }
.ir-contracts > small { color: var(--muted); font-weight: 600; font-size: 12px; }
.ir-c { display: flex; align-items: center; gap: 8px; background: var(--panel); border-radius: 12px; padding: 6px 8px 6px 12px; }
.ir-c b { flex: 1; font-size: 14px; }
.ir-c .pts { color: var(--accent); font-weight: 700; }
.ir-c.boom { box-shadow: inset 0 0 0 2px #ffc531; }
.ir-c .need { font-style: normal; }
.ir-c .btn { padding: 0 10px; }
.ir-p .ll { margin-left: -2px; font-size: 13px; filter: drop-shadow(0 0 3px #ffe27a); }
.ir-info { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.ir-ev { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 6px; border-radius: 999px; border: 0; background: linear-gradient(160deg, #fff7dc, #f1e3bd); color: #3b2a10; font: inherit; font-size: 13px; cursor: pointer; box-shadow: 0 2px 0 #c9a46b; white-space: nowrap; }
.ir-ev span { font-size: 16px; }
.ir-ev small { color: #8a5a00; font-weight: 700; }
.ir-ev.off { background: var(--panel); color: var(--muted); box-shadow: none; padding: 3px 10px; }
.ir-ll { flex: 1; min-width: 0; text-align: right; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ir-ll b { color: #ffe27a; }
.ir-timer.low { color: #b00020; font-weight: 700; }
.ir-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ir-stnbtn.on, .ir-cargo .btn.on { box-shadow: 0 0 0 2px #ffc531; }
.ir-stntok { display: inline-block; }
.ir-stnghost { display: grid; place-items: center; font-size: 30px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4)); }
.ir-stnrow { background: var(--panel); border-radius: 12px; padding: 6px 8px 6px 12px; font-size: 13px; }
.ir-offer { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; background: rgba(255, 197, 49, .12); box-shadow: inset 0 0 0 2px rgba(255, 197, 49, .45); }
.ir-offer > small { color: var(--muted); font-weight: 600; font-size: 12px; }
.ir-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ir-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px 6px; border: 0; border-radius: 10px; font: inherit; cursor: pointer;
  background: linear-gradient(170deg, #fffdf5, #f1e3bd); color: #3b2a10; box-shadow: 0 3px 0 #c9a46b, 0 6px 12px rgba(0, 0, 0, .25); transition: transform .15s; }
.ir-card b { font-size: 13px; line-height: 1.1; text-align: center; }
.ir-card i { font-style: normal; color: #a07a3a; font-size: 11px; }
.ir-card .pts { margin-top: 2px; font-weight: 700; color: #8a5a00; font-size: 14px; }
.ir-card small { color: #2f7a2f; font-size: 10px; font-weight: 700; min-height: 12px; }
.ir-card .tick { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: transparent; color: #fff; }
.ir-card.on { transform: translateY(-3px); box-shadow: 0 3px 0 #c9a46b, 0 0 0 3px #ffc531, 0 8px 14px rgba(0, 0, 0, .3); }
.ir-card.on .tick { background: #2fa84f; box-shadow: 0 0 0 2px #fff; }
.ir-cargo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ir-cargo > small { color: var(--muted); font-weight: 600; font-size: 12px; }
.ir-good { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px; background: var(--panel); font-size: 15px; }
.ir-good b { font-size: 13px; }
.ir-good.none { opacity: .45; }
.ir-cargo .btn { margin-left: auto; }
.ir-depot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ir-depot > small { color: var(--muted); font-size: 12px; font-weight: 600; }
.ir-depot .btn { padding: 0 8px; font-size: 14px; }
.ir-fly { position: fixed; z-index: 9999; pointer-events: none; font-size: 20px; left: 0; top: 0; }
.ir-tally { display: flex; flex-direction: column; gap: 4px; }
.ir-tally .hd, .ir-tally .r { display: grid; grid-template-columns: 1.6fr repeat(4, .8fr) 1fr; align-items: center; gap: 4px; text-align: center; font-size: 14px; }
.ir-tally .hd { color: var(--muted); font-size: 13px; }
.ir-tally .r { background: var(--panel); border-radius: 10px; padding: 6px 4px; box-shadow: inset 3px 0 0 var(--c); }
.ir-tally .r > b:first-child { text-align: left; padding-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ir-tally .good { color: #6fdc8c; }
.ir-tally .bad { color: #ff7a7f; }
.ir-tally > small { color: var(--muted); font-size: 12px; }
/* map: double lanes, stations, leases, races, events, freight */
.ir-map.dbl .ir-edge.double .base { stroke-width: 3.4; }
.ir-map.dbl .ir-edge.double .shade { stroke-width: 4.4; }
.ir-map.dbl .ir-edge.double .own { stroke-width: 1.35; }
.ir-map.dbl .ir-edge.double .ties { stroke-dasharray: .5 .7; stroke-width: 1.8; stroke: rgba(255, 255, 255, .35); }
.ir-map.dbl .ir-edge.double .rail { display: none; }
.ir-edge.half .ties { display: inline; }
.ir-edge .lease { stroke: transparent; stroke-width: .9; stroke-dasharray: 1.2 .8; stroke-linecap: round; pointer-events: none; filter: drop-shadow(0 0 .4px #fff); }
.ir-edge .tag .race { display: none; font-size: 2.6px; }
.ir-edge.race .tag .race { display: inline; animation: ir-pulse 1s ease-in-out infinite; }
.ir-edge.race .tag circle { stroke: #ff5a5f; stroke-width: .5; }
.ir-edge .tag .need { display: none; font-size: 2.5px; }
.ir-map.freight .ir-edge .tag .need { display: inline; }
.ir-edge .tag text.up { fill: #c0392b; }
.ir-edge .tag text.down { fill: #2f7a2f; }
.ir-edge.closed .base { stroke: #e8f2ff; opacity: 1; stroke-dasharray: 1 .6; }
.ir-edge.closed .tag circle { fill: #dbeaff; }
.ir-edge.closed .own { opacity: .45; }
.ir-edge.stn-pick .own { animation: ir-pulse .7s ease-in-out infinite; }
.ir-edge.stn-pick .base { stroke: #ffe27a; }
.ir-edge.stn-pick .lease { stroke: #fff6c9 !important; stroke-width: 1.2; animation: ir-pulse .7s ease-in-out infinite; }
.ir-edge.stn-on .lease { stroke: #ffc531 !important; stroke-width: 1.6; animation: none; }
.ir-river { fill: none; stroke: #8cc6ef; stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.ir-river.thin { stroke-width: 1.3; }
.ir-snow { display: none; fill: #fff; pointer-events: none; }
.ir-map.snow .ir-snow { display: inline; animation: ir-flurry 3s linear infinite; }
.ir-map.snow .ir-rock { filter: brightness(1.18) saturate(.5); }
.ir-map.snow .ir-peak .cap { transform: scale(1.5); transform-box: fill-box; transform-origin: 50% 0; }
@keyframes ir-flurry { 0% { transform: translateY(-1.5px); opacity: .5; } 50% { opacity: 1; } 100% { transform: translateY(1.5px); opacity: .5; } }
.ir-town .halo { fill: transparent; pointer-events: none; }
.ir-town.boom .halo { fill: rgba(255, 197, 49, .4); stroke: #ffc531; stroke-width: .5; animation: ir-goal 1s ease-in-out infinite; }
.ir-town.offer .halo { fill: rgba(63, 169, 255, .3); stroke: #3fa9ff; stroke-width: .6; }
.ir-map.stn-mode .ir-town.stn-ok .halo { fill: rgba(255, 255, 255, .5); stroke: #ffc531; stroke-width: .7; stroke-dasharray: 1 .7; animation: ir-goal .9s ease-in-out infinite; }
.ir-map.stn-mode .ir-town.stn-ok .hit { cursor: pointer; }
.ir-town .hit.drop-over { fill: rgba(255, 197, 49, .45); }
.ir-town .cargo { display: none; font-size: 2.6px; text-anchor: middle; pointer-events: none; }
.ir-map.freight .ir-town .cargo { display: inline; }
.ir-stations, .ir-stn { pointer-events: none; }
.ir-stn .in { transform-box: fill-box; transform-origin: 50% 100%; }
.ir-load { font-size: 1.6px; text-anchor: middle; }
.ir-evcard { position: fixed; inset: 0; margin: auto; width: min(68vw, 260px); height: 200px; z-index: 9990; pointer-events: none; border-radius: 18px; perspective: 600px;
  background: linear-gradient(165deg, #fffdf5, #f1e3bd); color: #3b2a10; box-shadow: 0 0 0 4px #c9a46b inset, 0 18px 40px rgba(0, 0, 0, .5); }
.ir-evback, .ir-evface { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px; text-align: center; }
.ir-evback { border-radius: 18px; background: repeating-linear-gradient(45deg, #6b8f3a 0 10px, #5b7d2f 10px 20px); color: #fff; box-shadow: 0 0 0 4px #c9a46b inset; }
.ir-evback span { font-size: 56px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3)); }
.ir-evback small { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ir-evicon { font-size: 50px; line-height: 1; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .2)); }
.ir-evface b { font-size: 22px; }
.ir-evface p { margin: 0; font-size: 14px; line-height: 1.3; }
.ir-evface small { color: #8a5a00; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }

/* ================= Punchline ================= */

.pl-prompt { background: radial-gradient(circle at 90% 0%, rgba(255, 204, 51, .22), transparent 50%), linear-gradient(160deg, #241c58, #17133a); }
.pl-timer { text-align: center; font-weight: 700; font-size: 22px; color: var(--muted); min-height: 26px; font-variant-numeric: tabular-nums; }
.pl-timer.low { color: var(--bad); animation: pl-throb 1s ease-in-out infinite; }
@keyframes pl-throb { 50% { transform: scale(1.15); } }
.pl-list { display: flex; flex-direction: column; gap: 8px; }
.pl-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.pl-card {
  position: relative; background: linear-gradient(170deg, #fff, #fff4e3); color: #17133a; border-radius: 16px; padding: 14px; min-height: 70px;
  text-align: left; font-weight: 700; font-size: 17px; line-height: 1.25; box-shadow: 0 4px 0 rgba(0, 0, 0, .2); display: flex; flex-direction: column; gap: 6px;
}
.pl-card small { font-weight: 600; font-size: 12px; color: #b0607a; text-transform: uppercase; letter-spacing: .6px; }
.pl-card.mine { animation: pl-in .35s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes pl-in { from { transform: scale(.8) rotate(-3deg); opacity: 0; } }
.pl-paper { padding: 6px; }
.pl-write.field { background: transparent; border: 0; color: #17133a; min-height: 120px; }
.pl-write.field::placeholder { color: #b8a9a0; }
.pl-card.won { box-shadow: 0 0 0 4px var(--accent), 0 0 22px rgba(255, 197, 49, .5), 0 4px 0 rgba(0, 0, 0, .2); }
.pl-yours { background: rgba(0, 0, 0, .2); border-radius: 14px; padding: 8px 12px; color: var(--muted); font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
.pl-yours small { text-transform: uppercase; font-size: 11px; letter-spacing: .8px; font-weight: 600; }
.pl-count { font-weight: 600; }

/* head to head */
.pl-vs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; min-height: 170px; }
.pl-vs.solo { grid-template-columns: 1fr; max-width: 300px; width: 100%; margin: 0 auto; }
.pl-vs-card { min-height: 170px; justify-content: center; font-size: 17px; cursor: pointer; transition: transform .15s; }
.pl-vs-card.left { transform: rotate(-2deg); background: linear-gradient(170deg, #fff, #ffe9e0); padding-right: 24px; }
.pl-vs-card.right { transform: rotate(2deg); background: linear-gradient(170deg, #fff, #e6f2ff); padding-left: 24px; }
.pl-vs.solo .pl-vs-card { padding: 14px; }
.pl-vs-card:active { transform: scale(.97); }
.pl-vs-card.enter { animation: pl-enter .32s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes pl-enter { from { transform: translateX(80px) rotate(14deg) scale(.85); opacity: 0; } }
.pl-vs-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); z-index: 3; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 20px; color: #ffcc33; background: #17133a;
  box-shadow: 0 0 0 4px #fff, 0 6px 14px rgba(0, 0, 0, .4); animation: pl-vs 1.4s ease-in-out infinite; pointer-events: none;
}
@keyframes pl-vs { 50% { transform: translate(-50%, -50%) rotate(8deg) scale(1.1); } }
.pl-dots { display: flex; justify-content: center; gap: 6px; }
.pl-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.pl-dots i.on { background: var(--accent); }
.pl-dots i.now { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }

/* stickers (votes) */
.pl-stks { position: absolute; right: -6px; top: -12px; display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 0; max-width: 70%; pointer-events: none; }
.pl-stk { display: inline-flex; margin-left: -8px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 3px 6px rgba(0, 0, 0, .35); transform: rotate(var(--rot)); }
.pl-stk .avatar { --s: 30px; }
.pl-stk.stamp { animation: pl-stamp .38s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes pl-stamp { 0% { transform: scale(2.6) rotate(calc(var(--rot) - 30deg)); opacity: 0; } 55% { opacity: 1; } 100% { transform: rotate(var(--rot)); } }

/* the reveal */
.pl-res { padding-top: 16px; }
.pl-by { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.pl-by.show { opacity: 1; transform: none; }
.pl-pts { color: #c2185b; margin-left: auto; font-size: 15px; }
.pl-card.sweep { overflow: visible; }
.pl-sweep {
  position: absolute; left: 50%; top: 50%; z-index: 4; padding: 8px 16px; border-radius: 12px; text-align: center; white-space: nowrap;
  font-size: 26px; font-weight: 700; color: #fff; background: #c2185b; box-shadow: 0 0 0 4px #fff, 0 10px 24px rgba(0, 0, 0, .45);
  transform: translate(-50%, -50%) rotate(-8deg); animation: pl-sweep .6s cubic-bezier(.3, 1.6, .5, 1) backwards; pointer-events: none;
}
.pl-sweep small { display: block; color: #ffe28a; font-size: 13px; text-transform: none; letter-spacing: 0; }
@keyframes pl-sweep { from { transform: translate(-50%, -50%) rotate(-30deg) scale(3); opacity: 0; } }

/* score bars */
.pl-bars { display: flex; flex-direction: column; gap: 6px; background: rgba(0, 0, 0, .2); border-radius: 16px; padding: 10px 12px; }
.pl-bar { display: grid; grid-template-columns: 24px minmax(0, 72px) 1fr 44px 40px; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; }
.pl-bar .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-bar b { text-align: right; color: var(--accent); font-variant-numeric: tabular-nums; }
.pl-track { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.pl-track i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 60%, #fff)); transition: width .8s cubic-bezier(.3, .7, .3, 1); }
/* tutorial props */
.pl-tcard { width: 40cqw; min-height: 26cqw; padding: 2.5cqw; border-radius: 3cqw; display: flex; align-items: center; background: linear-gradient(170deg, #fff, #fff4e3); color: #17133a; font-weight: 700; font-size: 4.6cqw; line-height: 1.2; box-shadow: 0 1cqw 0 rgba(0, 0, 0, .2); z-index: 2; }
.pl-tcard.paper { width: 70cqw; min-height: 24cqw; align-items: flex-start; }
.pl-tcard.paper::after { content: '▍'; color: #ff6f3c; animation: ww-caret .6s steps(2) infinite; }
.pl-tcard.l { background: linear-gradient(170deg, #fff, #ffe9e0); }
.pl-tcard.r { background: linear-gradient(170deg, #fff, #e6f2ff); }
.pl-tcard.wide { width: 70cqw; }
.pl-tbtn { padding: 2cqw 8cqw; border-radius: 3cqw; background: var(--accent); color: #2b1d00; font-weight: 700; font-size: 4.6cqw; }
.pl-tvs { width: 14cqw; height: 14cqw; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 5cqw; color: #ffcc33; background: #17133a; box-shadow: 0 0 0 1cqw #fff; z-index: 4; }
.pl-tstk { width: 9cqw; height: 9cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), transparent 45%), var(--c); box-shadow: 0 0 0 .9cqw #fff, 0 1cqw 2cqw rgba(0, 0, 0, .35); z-index: 5; }
.pl-tstk.stamp { animation: pl-tstamp .38s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes pl-tstamp { from { transform: translate(-50%, -50%) scale(2.6) rotate(-30deg); opacity: 0; } }
.pl-tby { font-weight: 700; font-size: 4.2cqw; color: #ffcc33; animation: bm-by .35s ease-out backwards; }
.pl-tsweep { padding: 1.6cqw 4cqw; border-radius: 2.5cqw; background: #c2185b; color: #fff; font-weight: 700; font-size: 6cqw; white-space: nowrap; box-shadow: 0 0 0 1cqw #fff; z-index: 6; transform: translate(-50%, -50%) rotate(-8deg); animation: pl-tsweep .5s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes pl-tsweep { from { transform: translate(-50%, -50%) rotate(-30deg) scale(3); opacity: 0; } }
.pl-tbars { width: 70cqw; display: flex; flex-direction: column; gap: 1.6cqw; }
.pl-tbars i { display: block; height: 3cqw; border-radius: 2cqw; background: var(--c); width: 10%; transition: width .9s cubic-bezier(.3, .7, .3, 1); }
.pl-tbars.grow i:nth-child(1) { width: 95%; }
.pl-tbars.grow i:nth-child(2) { width: 40%; }
.pl-tbars.grow i:nth-child(3) { width: 25%; }
/* head-to-head matchups, the audience, round splash and the medal final */
.pl-vs-card.yours { box-shadow: 0 0 0 3px rgba(255, 255, 255, .7), 0 4px 0 rgba(0, 0, 0, .2); }
.pl-card .pl-tag { position: absolute; left: 10px; bottom: 8px; padding: 2px 8px; border-radius: 99px; background: #17133a; color: #ffcc33; font-size: 11px; }
.pl-vs-card.dim { opacity: .5; filter: saturate(.6); }
.pl-vs-card.drop-over, .pl-fcard.drop-over { box-shadow: 0 0 0 4px var(--accent), 0 0 22px rgba(255, 197, 49, .55); }
.pl-vs-card.drop-over { transform: scale(1.04); }
.pl-vs.done .pl-vs-badge { opacity: .3; animation: none; }
.pl-vs .pl-res { justify-content: flex-start; padding-top: 22px; }
.pl-vs .pl-by { flex-wrap: wrap; row-gap: 2px; }
.pl-vs .pl-sweep { font-size: 16px; padding: 6px 10px; top: 46%; }
.pl-vs .pl-sweep small { font-size: 11px; }
.pl-sweep.walk { background: #2f8f5b; }
.pl-blank { color: #8d86ad; font-style: italic; font-weight: 600; }
.pl-card.blank { background: linear-gradient(170deg, #ecebf3, #d9d7e6); }
.pl-dock { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 14px; font-weight: 600; }
.pl-mystk { cursor: grab; margin: 0; }
.pl-mystk .avatar { --s: 44px; }
.pl-ghost { display: grid; place-items: center; }
.pl-ghost .pl-stk .avatar { --s: 44px; }
.pl-aud { --rot: -4deg; display: inline-flex; align-items: center; gap: 4px; margin-left: -6px; padding: 4px 9px; border-radius: 99px; background: #17133a; color: #fff;
  font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 0 0 3px #fff, 0 3px 6px rgba(0, 0, 0, .35); transform: rotate(var(--rot)); }
.pl-aud b { color: #ffcc33; }
.pl-aud.stamp { animation: pl-stamp .38s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.pl-steps { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.pl-skip { flex: 0 0 auto; }
.pl-small { font-size: 12px; margin: 0; }
.pl-next { color: var(--accent); font-weight: 700; }
.pl-plus { font-style: normal; font-size: 12px; font-weight: 700; color: #5ad45a; opacity: 0; transition: opacity .3s .5s; text-align: right; }
.pl-plus.show { opacity: 1; }
.pl-pens { display: grid; place-items: center; }
.pl-pen1, .pl-pen2 { transform-box: fill-box; transform-origin: center; animation: pl-bob 1.2s ease-in-out infinite; }
.pl-pen2 { animation-delay: .6s; }
@keyframes pl-bob { 50% { transform: translateY(-5px) rotate(-3deg); } }
.pl-splash {
  position: fixed; left: 50%; top: 38%; z-index: 9000; padding: 14px 26px; border-radius: 18px; text-align: center; white-space: nowrap; pointer-events: none;
  background: linear-gradient(160deg, #ffcc33, #ff6f3c); color: #17133a; box-shadow: 0 0 0 5px #fff, 0 18px 40px rgba(0, 0, 0, .5);
  transform: translate(-50%, -50%) rotate(-6deg); animation: pl-splash 1.8s cubic-bezier(.3, 1.3, .5, 1) forwards;
}
.pl-splash b { display: block; font-size: 34px; letter-spacing: 1px; line-height: 1.1; }
.pl-splash small { font-size: 14px; font-weight: 700; }
@keyframes pl-splash {
  0% { transform: translate(-50%, -50%) rotate(-30deg) scale(3); opacity: 0; }
  18%, 78% { transform: translate(-50%, -50%) rotate(-6deg) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -150%) rotate(-6deg) scale(.8); opacity: 0; }
}
.pl-tray { display: flex; justify-content: center; gap: 14px; padding: 4px 0; }
.pl-token {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-content: center; text-align: center; line-height: 1.05; color: #3a2a00;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 0 0 3px #fff, 0 6px 12px rgba(0, 0, 0, .35); transition: opacity .2s, transform .2s; cursor: grab;
}
.pl-token b { font-size: 18px; }
.pl-token small { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.pl-token.used { opacity: .22; transform: scale(.85); box-shadow: none; cursor: default; }
.pl-token.m0, .pl-medal.solo.m0 { background: radial-gradient(circle at 35% 30%, #fff6c8, #ffc531 45%, #d99a00); }
.pl-token.m1, .pl-medal.solo.m1 { background: radial-gradient(circle at 35% 30%, #fff, #cfd8e6 45%, #8f9bb0); }
.pl-token.m2, .pl-medal.solo.m2 { background: radial-gradient(circle at 35% 30%, #ffe1c4, #e0915a 45%, #a65a26); }
.pl-medal.solo { width: 36px; height: 36px; display: inline-grid; place-items: center; font-size: 12px; color: #3a2a00; }
.pl-stk.pl-medal.m0 { box-shadow: 0 0 0 4px #ffc531, 0 3px 6px rgba(0, 0, 0, .35); }
.pl-stk.pl-medal.m1 { box-shadow: 0 0 0 4px #cfd8e6, 0 3px 6px rgba(0, 0, 0, .35); }
.pl-stk.pl-medal.m2 { box-shadow: 0 0 0 4px #e0915a, 0 3px 6px rgba(0, 0, 0, .35); }
.pl-fcard { padding-top: 16px; min-height: 64px; }
button.pl-fcard { cursor: pointer; transition: transform .15s, box-shadow .15s; }
button.pl-fcard:active { transform: scale(.98); }
.pl-fcard.medal.m0 { box-shadow: 0 0 0 4px #ffc531, 0 4px 0 rgba(0, 0, 0, .2); }
.pl-fcard.medal.m1 { box-shadow: 0 0 0 4px #cfd8e6, 0 4px 0 rgba(0, 0, 0, .2); }
.pl-fcard.medal.m2 { box-shadow: 0 0 0 4px #e0915a, 0 4px 0 rgba(0, 0, 0, .2); }
.pl-fcard.yours { opacity: .7; }
/* tutorial props for the new rules */
.pl-tchip { padding: 1cqw 2.6cqw; border-radius: 99px; background: var(--panel2); font-weight: 700; font-size: 3.8cqw; white-space: nowrap; z-index: 4; }
.pl-tchip i { display: inline-block; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: var(--c); margin-right: 1.2cqw; vertical-align: -.5cqw; }
.pl-tline { width: 0; border-top: .8cqw dashed rgba(255, 255, 255, .35); z-index: 1; }
.pl-tmedal { width: 10cqw; height: 10cqw; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 3.4cqw; color: #3a2a00; z-index: 5;
  box-shadow: 0 0 0 .8cqw #fff, 0 1cqw 2cqw rgba(0, 0, 0, .35); }
.pl-tmedal.m0 { background: radial-gradient(circle at 35% 30%, #fff6c8, #ffc531 45%, #d99a00); }
.pl-tmedal.m1 { background: radial-gradient(circle at 35% 30%, #fff, #cfd8e6 45%, #8f9bb0); }
.pl-tmedal.m2 { background: radial-gradient(circle at 35% 30%, #ffe1c4, #e0915a 45%, #a65a26); }
.pl-taud { padding: 1cqw 2.6cqw; border-radius: 99px; background: #17133a; color: #fff; font-weight: 700; font-size: 3.6cqw; white-space: nowrap; box-shadow: 0 0 0 .8cqw #fff; z-index: 6; }
.pl-taud b { color: #ffcc33; }
.pl-tx { padding: 1.2cqw 3cqw; border-radius: 2cqw; background: #c2185b; color: #fff; font-weight: 700; font-size: 5cqw; white-space: nowrap; box-shadow: 0 0 0 .8cqw #fff; z-index: 6; }
.pl-tcard.small { width: 30cqw; min-height: 18cqw; font-size: 3.8cqw; }
.pl-tcard.blank { background: linear-gradient(170deg, #ecebf3, #d9d7e6); color: #8d86ad; font-style: italic; }

/* ================= Bad Batch ================= */
/* (player tiles, role cards and vote hands come from the Werewolf section: .ww-p, .ww-rc, .ww-fc, .ww-hands) */

/* chalkboard with tally marks */
.bb-board {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-radius: 16px;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .06), transparent 60%), #2b3a35;
  box-shadow: inset 0 0 0 4px #8a5a2f, inset 0 0 0 6px #6b4426, 0 6px 14px rgba(0, 0, 0, .3);
}
.bb-side { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bb-side small, .bb-mid small { color: rgba(255, 255, 255, .7); font-weight: 600; font-size: 12px; }
.bb-mid { display: flex; flex-direction: column; align-items: center; color: #fff; }
.bb-mid b { font-size: 17px; }
.bb-tally { display: flex; gap: 6px; height: 34px; }
.bb-slot { width: 14px; height: 34px; border-bottom: 2px dashed rgba(255, 255, 255, .22); }
.bb-slot.on { border-bottom-color: transparent; }
.bb-slot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bb-slot path { fill: none; stroke: #f4f1e8; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .6)); }
.bb-tally.good .bb-slot path { stroke: #c9f0b4; }
.bb-tally.bad .bb-slot path { stroke: #ffb3b5; }
.bb-slot path.bb-new { stroke-dasharray: 40; stroke-dashoffset: 40; animation: bb-chalk .5s ease-out .15s forwards; }
@keyframes bb-chalk { to { stroke-dashoffset: 0; } }

.bb-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }

/* role cards in bakery colors */
.ww-rc-back .bb-back, .ww-fc-back.bb-back {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 8px, transparent 8px 16px), linear-gradient(160deg, #d0679c, #7a2552);
}
.ww-rc-back .bb-back { position: absolute; inset: 0; }
.bb-face.baker { background: radial-gradient(circle at 50% 25%, rgba(255, 214, 107, .35), transparent 55%), linear-gradient(160deg, #b0407a, #5a1f45); }
.bb-face.saboteur { background: radial-gradient(circle at 50% 25%, rgba(147, 211, 255, .3), transparent 55%), linear-gradient(160deg, #3d4a66, #17133a); }
.bb-emblem { width: 100%; height: 100%; }

/* chef hats */
.bb-rack {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .12)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1);
}
.bb-rack small { color: var(--muted); font-weight: 600; font-size: 12px; }
.bb-rack-row { display: flex; gap: 12px; justify-content: center; min-height: 52px; }
.bb-hat { width: 52px; height: 52px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3)); touch-action: none; }
.bb-rack .bb-hat:not(.empty) { animation: bb-bob 1.8s ease-in-out infinite; }
.bb-rack .bb-hat:nth-child(2n) { animation-delay: .3s; }
@keyframes bb-bob { 50% { transform: translateY(-4px) rotate(-4deg); } }
.bb-hat svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.bb-hat.empty { border: 2px dashed rgba(255, 255, 255, .15); border-radius: 50%; filter: none; }
.bb-hat-ghost { width: 52px; height: 52px; }
.ww-p .bb-hat { width: 34px; height: 34px; position: absolute; left: 6px; top: -20px; z-index: 2; }
.ww-p .bb-hat.land { animation: bb-land .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes bb-land { from { transform: translateY(-30px) scale(1.4) rotate(-20deg); opacity: 0; } }
.bb-kitchen .ww-p { margin-top: 6px; }

/* ingredient cards */
.bb-hand { display: flex; gap: 12px; justify-content: center; padding-top: 10px; }
.bb-ing {
  width: 86px; height: 116px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .25), inset 0 0 0 3px rgba(255, 255, 255, .6); font-size: 16px; transition: transform .18s;
}
.bb-ing-art { width: 64px; height: 64px; pointer-events: none; }
.bb-ing-art svg { width: 100%; height: 100%; display: block; }
.bb-ing.sugar { background: linear-gradient(170deg, #fff8fb, #ffd1e4); color: #b0407a; }
.bb-ing.salt { background: linear-gradient(170deg, #f5f8fc, #c9d3e4); color: #3d4a66; }
.bb-ing.up { transform: translateY(-14px) scale(1.06); box-shadow: 0 0 0 3px var(--accent), 0 12px 18px rgba(0, 0, 0, .35); }
.bb-ing.bb-down { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 6px, transparent 6px 12px), linear-gradient(160deg, #d0679c, #7a2552); }
.bb-ing.bb-down .bb-ing-art { width: 46px; height: 46px; }

/* the mixing bowl */
.bb-bowl { position: relative; width: 230px; height: 150px; margin: 4px auto 0; border-radius: 30px; }
.bb-bowl.target { animation: bb-wait 1.6s ease-in-out infinite; }
@keyframes bb-wait { 50% { filter: drop-shadow(0 0 14px rgba(255, 197, 49, .55)); } }
.bb-bowl.drop-over { box-shadow: none !important; filter: drop-shadow(0 0 18px rgba(255, 197, 49, .9)); transform: scale(1.04); }
.bb-bowl-back { position: absolute; left: 6px; right: 6px; top: 34px; height: 34px; border-radius: 50%; background: radial-gradient(ellipse at 50% 70%, #6b1f45, #3d0f28); }
.bb-bowl-cards { position: absolute; left: 0; right: 0; top: 8px; height: 70px; pointer-events: none; }
.bb-in { position: absolute; left: calc(50% - 22px); top: 4px; width: 44px; height: 60px; border-radius: 8px; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 5px, transparent 5px 10px), linear-gradient(160deg, #d0679c, #7a2552);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .5); transform: translateX(var(--x)) rotate(var(--r)); }
.bb-in .bb-ing-art { width: 30px; height: 30px; }
.bb-in.drop { animation: bb-drop .55s cubic-bezier(.4, 0, .6, 1.4); }
@keyframes bb-drop { from { transform: translateX(var(--x)) translateY(-90px) rotate(calc(var(--r) * -3)) scale(1.3); opacity: 0; } 60% { opacity: 1; } }
.bb-bowl-front { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.bb-bowl-front svg { width: 100%; height: 100%; display: block; }

/* the reveal */
.bb-reveal { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0 4px; border-radius: 18px; background: radial-gradient(ellipse at 50% 100%, rgba(255, 166, 107, .2), transparent 70%); }
.bb-row { position: relative; height: 84px; perspective: 700px; max-width: 100%; }
.bb-slotcard { position: absolute; top: 0; width: 62px; height: 84px; transition: left .22s cubic-bezier(.3, .7, .3, 1); }
.bb-slotcard .bb-ing { width: 62px; height: 84px; font-size: 12px; border-radius: 10px; }
.bb-slotcard .bb-ing-art { width: 44px; height: 44px; }
.bb-slotcard .bb-ing.bb-down .bb-ing-art { width: 34px; height: 34px; }
.bb-slotcard.up .salt { box-shadow: 0 0 0 3px var(--bad), 0 5px 0 rgba(0, 0, 0, .25); }
.bb-oven { position: relative; width: 170px; height: 120px; }
.bb-cake { position: absolute; inset: 0; transform-origin: 50% 92%; transform: scaleY(0); opacity: 0; }
.bb-cake svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bb-reveal.baking.good .bb-cake:not(.flop), .bb-reveal.done.good .bb-cake:not(.flop) { animation: bb-rise 1s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.bb-reveal.done.good .bb-cake:not(.flop) { animation-duration: 1ms; }
@keyframes bb-rise { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1.12) scaleX(.96); } 100% { transform: none; opacity: 1; } }
.bb-reveal.baking.ruined .bb-cake:not(.flop) { animation: bb-sag .8s ease-in forwards; }
.bb-reveal.done.ruined .bb-cake:not(.flop) { animation: none; opacity: 0; }
@keyframes bb-sag { 0% { transform: scaleY(0); opacity: 1; } 50% { transform: scaleY(.8); opacity: 1; } 80% { transform: scaleY(.5) skewX(8deg); opacity: 1; } 100% { transform: scaleY(.3); opacity: 0; } }
.bb-reveal.baking.ruined .bb-cake.flop, .bb-reveal.done.ruined .bb-cake.flop { animation: bb-flop .5s ease-out .55s forwards; }
.bb-reveal.done.ruined .bb-cake.flop { animation-delay: 0s; animation-duration: 1ms; }
@keyframes bb-flop { from { transform: scaleY(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.bb-flame { animation: bb-flicker .4s ease-in-out infinite alternate; transform-origin: 60px 4px; }
@keyframes bb-flicker { to { transform: scale(.85, 1.1); } }
.bb-smoke { position: absolute; left: 50%; top: 40px; width: 0; height: 0; opacity: 0; }
.bb-reveal.ruined .bb-smoke { opacity: 1; }
.bb-smoke i { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: rgba(120, 110, 130, .7); filter: blur(2px); animation: bb-puff 2.2s ease-out infinite; }
.bb-smoke i:nth-child(2) { left: -24px; animation-delay: .6s; }
.bb-smoke i:nth-child(3) { left: 14px; animation-delay: 1.2s; }
@keyframes bb-puff { 0% { transform: translateY(20px) scale(.4); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-60px) scale(1.6); opacity: 0; } }
/* rejected crews: order tickets on the chalkboard (the third means a rush order) */
.bb-tickets { display: flex; gap: 4px; margin: 2px 0; }
.bb-ticket { width: 14px; height: 18px; opacity: .25; transition: opacity .3s, transform .3s; }
.bb-ticket svg { width: 100%; height: 100%; display: block; }
.bb-ticket.on { opacity: 1; transform: rotate(-8deg); }
.bb-ticket.rush.on { filter: drop-shadow(0 0 4px #ff7a59); }
.bb-ticket.new { animation: bb-pin .5s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes bb-pin { from { transform: translateY(-14px) rotate(20deg) scale(1.4); opacity: 0; } }
.bb-clock { margin: -4px 6px 0; }
.bb-warn { color: #ffd76a !important; font-weight: 600; }

/* voting on the crew: ballot cards and the order spike */
.bb-ballots { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.bb-ballot {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 16px; touch-action: none;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .25), inset 0 0 0 3px rgba(255, 255, 255, .55); transition: transform .18s, box-shadow .2s; font-size: 16px;
}
.bb-ballot.yes { background: linear-gradient(170deg, #f4fff0, #c9f0b4); color: #2f7a45; }
.bb-ballot.no { background: linear-gradient(170deg, #fff5f6, #ffc9cc); color: #8a2034; }
.bb-ballot.on { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--accent), 0 10px 16px rgba(0, 0, 0, .3); }
.bb-ballot-art { width: 56px; height: 56px; pointer-events: none; }
.bb-ballot-art svg, .bb-vcard-art svg, .bb-vcard-back svg { width: 100%; height: 100%; display: block; }
.bb-spike { position: relative; width: 110px; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 8px 4px; border-radius: 18px; background: radial-gradient(ellipse at 50% 90%, rgba(0, 0, 0, .25), transparent 70%); }
.bb-ballots > .bb-spike { width: 100px; }
.bb-spike.target { animation: bb-wait 1.6s ease-in-out infinite; }
.bb-spike.drop-over { filter: drop-shadow(0 0 16px rgba(255, 197, 49, .9)); transform: scale(1.05); }
.bb-spike-pin { position: absolute; left: 50%; top: 8px; bottom: 26px; width: 4px; margin-left: -2px; border-radius: 2px; background: linear-gradient(180deg, #eef3fb, #8a9bb8); }
.bb-spike-pin::after { content: ''; position: absolute; left: -12px; right: -12px; bottom: -6px; height: 8px; border-radius: 4px; background: #6b4426; }
.bb-spike-cards { position: relative; width: 100%; height: 70px; }
.bb-spike-cards .bb-vcard { position: absolute; left: 50%; top: calc(4px + var(--i) * 4px); margin-left: -21px; transform: rotate(var(--r)); animation: bb-spiked .4s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes bb-spiked { from { transform: translateY(-40px) rotate(0) scale(1.3); opacity: 0; } }
.bb-spike small { color: var(--muted); font-weight: 600; font-size: 12px; position: relative; }
.bb-vcard { width: 42px; height: 56px; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 3px 6px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .55); }
.bb-vcard.down { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 5px, transparent 5px 10px), linear-gradient(160deg, #d0679c, #7a2552); }
.bb-vcard-back { width: 24px; height: 24px; opacity: .85; }
.bb-vcard.yes { background: linear-gradient(170deg, #f4fff0, #c9f0b4); }
.bb-vcard.no { background: linear-gradient(170deg, #fff5f6, #ffc9cc); }
.bb-vghost { width: 54px; height: 72px; }
/* everyone's ballots, turned over together */
.bb-vrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; perspective: 800px; }
.ww-fc.bb-vslot { width: auto; height: 92px; border-radius: 12px; }
.bb-vslot .bb-vcard { width: 100%; height: 92px; border-radius: 12px; }
.bb-vslot .bb-vcard small { font-size: 11px; font-weight: 700; color: #3d2a20; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 3px; }
.bb-vslot .bb-vcard.down small { color: #fff; }
.bb-vcard-art { width: 34px; height: 34px; }
.bb-vslot.up { animation: ww-glow 1s ease-out 1; }
.bb-rush { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; border-radius: 16px; background: linear-gradient(160deg, rgba(255, 122, 89, .35), rgba(176, 64, 122, .35)); animation: bb-stamp .5s cubic-bezier(.2, 1.4, .4, 1) .9s both; }
.bb-rush b { font-size: 22px; letter-spacing: 2px; color: #fff; }
.bb-rush small { color: #ffe0d0; font-weight: 600; }
.bb-rush-art { width: 34px; height: 44px; }
.bb-rush-art svg { width: 100%; height: 100%; display: block; }
@keyframes bb-stamp { from { transform: scale(2.2) rotate(-12deg); opacity: 0; } }
/* rush order: the top card comes off the pile */
.bb-pile { position: relative; width: 62px; height: 84px; margin-bottom: -84px; align-self: center; transform: translateX(-90px); }
.bb-pile .bb-ing { position: absolute; inset: 0; width: 62px; height: 84px; border-radius: 10px; }
.bb-pile .bb-ing + .bb-ing { transform: translate(3px, -3px); }
.bb-pile .bb-ing-art { width: 34px; height: 34px; }
.bb-reveal.rush .bb-row .bb-slotcard { animation: bb-deal .5s cubic-bezier(.3, .7, .3, 1) .3s both; }
@keyframes bb-deal { from { transform: translateX(-90px) translateY(-3px); } }

/* powers: taste test, apron */
.bb-spoon { width: 64px; height: 64px; margin: 0 auto; animation: ww-sway 2.4s ease-in-out infinite; }
.bb-spoon svg, .bb-spoon-big svg, .bb-apron-mini svg { width: 100%; height: 100%; display: block; }
.bb-spoon-big { width: 120px; height: 120px; }
.bb-apron-mini { width: 26px; height: 26px; display: inline-block; animation: ww-mark .4s cubic-bezier(.2, 1.6, .4, 1); }
.bb-peeks { box-shadow: inset 0 0 0 2px rgba(255, 214, 107, .45); }

/* tutorial props */
.bb-trole { width: 36cqw; height: 46cqw; perspective: 600px; }
.bb-trole-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .38s cubic-bezier(.3, .7, .35, 1.15); }
.bb-trole.peek .bb-trole-in { transform: rotateY(180deg); }
.bb-trole-back, .bb-trole-face { position: absolute; inset: 0; border-radius: 3cqw; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw; font-size: 4.4cqw; font-weight: 700; box-shadow: 0 1.5cqw 3cqw rgba(0, 0, 0, .45); }
.bb-trole-back { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 2cqw, transparent 2cqw 4cqw), linear-gradient(160deg, #d0679c, #7a2552); color: #fff; }
.bb-trole-face { transform: rotateY(180deg); background: linear-gradient(160deg, #3d4a66, #17133a); }
.bb-trole-face span { width: 60%; }
.bb-trole-face svg { width: 100%; display: block; }
.bb-tperson { width: 14cqw; height: 14cqw; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 5cqw; color: rgba(0, 0, 0, .55); background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), transparent 45%), var(--c); }
.bb-that { width: 12cqw; z-index: 3; }
.bb-that svg { width: 100%; display: block; }
.bb-tbowl { width: 50cqw; height: 26cqw; border-radius: 4cqw 4cqw 50% 50% / 2cqw 2cqw 100% 100%; background: linear-gradient(180deg, #ffd1e4, #c25a8f); box-shadow: inset 0 2cqw 0 #6b1f45, 0 2cqw 3cqw rgba(0, 0, 0, .35); }
.bb-tcard { width: 15cqw; height: 20cqw; perspective: 500px; z-index: 2; }
.bb-tcard-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .35s; }
.bb-tcard.down .bb-tcard-in { transform: rotateY(180deg); }
.bb-tcard-face, .bb-tcard-back { position: absolute; inset: 0; border-radius: 2cqw; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 1cqw 0 rgba(0, 0, 0, .25), inset 0 0 0 .6cqw rgba(255, 255, 255, .6); display: grid; place-items: center; }
.bb-tcard-face svg { width: 80%; }
.bb-tcard.sugar .bb-tcard-face { background: linear-gradient(170deg, #fff8fb, #ffd1e4); }
.bb-tcard.salt .bb-tcard-face { background: linear-gradient(170deg, #f5f8fc, #c9d3e4); }
.bb-tcard-back { transform: rotateY(180deg); background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 1.5cqw, transparent 1.5cqw 3cqw), linear-gradient(160deg, #d0679c, #7a2552); }
.bb-tspike { width: 2cqw; height: 22cqw; border-radius: 1cqw; background: linear-gradient(180deg, #eef3fb, #8a9bb8); box-shadow: 0 11cqw 0 -.4cqw #6b4426; }
.bb-tvote { width: 13cqw; height: 17cqw; perspective: 500px; z-index: 2; }
.bb-tvote-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .35s; }
.bb-tvote.down .bb-tvote-in { transform: rotateY(180deg); }
.bb-tvote-face, .bb-tvote-back { position: absolute; inset: 0; border-radius: 2cqw; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; font-size: 6cqw; box-shadow: 0 1cqw 0 rgba(0, 0, 0, .25), inset 0 0 0 .6cqw rgba(255, 255, 255, .6); }
.bb-tvote.yes .bb-tvote-face { background: linear-gradient(170deg, #f4fff0, #c9f0b4); }
.bb-tvote.no .bb-tvote-face { background: linear-gradient(170deg, #fff5f6, #ffc9cc); }
.bb-tvote-back { transform: rotateY(180deg); background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 1.5cqw, transparent 1.5cqw 3cqw), linear-gradient(160deg, #d0679c, #7a2552); }
.bb-tticket { width: 6cqw; height: 8cqw; opacity: .3; }
.bb-tticket.on { opacity: 1; animation: bb-pin .5s cubic-bezier(.2, 1.5, .4, 1); }
.bb-tticket svg, .bb-tspoon svg { width: 100%; height: 100%; display: block; }
.bb-tspoon { width: 14cqw; height: 14cqw; z-index: 3; }
.bb-trole.small { width: 22cqw; height: 28cqw; }
.bb-tperson { transition: opacity .4s, filter .4s; }
.bb-tperson.gone { opacity: .3; filter: grayscale(1); }
.bb-tcake { width: 34cqw; height: 28cqw; }
.bb-tcake-in { position: absolute; inset: 0; transform-origin: 50% 92%; animation: bb-rise .8s cubic-bezier(.2, 1.3, .4, 1) both; transition: transform .5s ease-in, filter .5s; }
.bb-tcake-in svg { width: 100%; height: 100%; display: block; }
.bb-tcake.flop .bb-tcake-in { animation: bb-tflop .5s ease-in forwards; }
@keyframes bb-tflop { from { transform: none; } to { transform: scaleY(.45) skewX(8deg); filter: sepia(1) brightness(.5) saturate(2); } }
.bb-tcake i { position: absolute; left: 45%; top: 20%; width: 6cqw; height: 6cqw; border-radius: 50%; background: rgba(120, 110, 130, .7); opacity: 0; }
.bb-tcake.flop i { animation: bb-puff 1.6s ease-out infinite; }
.bb-tcake.flop i + i { left: 55%; animation-delay: .6s; }

/* ================= Deep Dive ================= */

.dd-bar { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; flex: none; }
.dd-p { flex: none; display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--panel); font-size: 13px; transition: box-shadow .2s, opacity .2s; }
.dd-p.turn { box-shadow: 0 0 0 2px var(--c), 0 0 12px var(--c); }
.dd-p.out { opacity: .4; }
.dd-meter { width: 36px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .3); overflow: hidden; }
.dd-meter i { display: block; height: 100%; background: var(--c); border-radius: 3px; transition: width .5s; }
.dd-coin { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff2a8, #ffc531 50%, #d18f00); box-shadow: 0 0 0 1px #b07800; }
.dd-bank { font-weight: 700; color: #ffd76a; min-width: 16px; display: inline-block; }
.dd-defs { position: absolute; width: 0; height: 0; }
.dd-sea {
  position: relative; flex: 1; min-height: 300px; display: flex; flex-direction: column; gap: 10px; padding: 12px 10px 44px; overflow: hidden;
  border-radius: 22px; background: linear-gradient(180deg, #23c3dc 0%, #0e7fb5 30%, #0a4f86 65%, #062c52 100%);
  box-shadow: inset 0 4px 16px rgba(0, 0, 0, .35);
}
.dd-rays {
  position: absolute; inset: -20% -10% 30%; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(100deg, transparent 0 9%, rgba(255, 255, 255, .07) 9% 13%, transparent 13% 22%);
  animation: dd-sway 9s ease-in-out infinite alternate;
}
@keyframes dd-sway { to { transform: translateX(8%) skewX(-4deg); } }
.dd-bubbles i {
  position: absolute; bottom: -12px; width: var(--s); height: var(--s); border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(255, 255, 255, .55); background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .5), transparent 60%);
  animation: dd-bubble 6s linear infinite;
}
@keyframes dd-bubble { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(8px, -180px); } 100% { transform: translate(-4px, -380px); opacity: 0; } }
.dd-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40px; pointer-events: none;
  background: radial-gradient(ellipse 30% 60% at 20% 100%, #c9a465, transparent 70%), radial-gradient(ellipse 40% 70% at 75% 100%, #c9a465, transparent 70%), linear-gradient(180deg, transparent, #b8914f 80%);
}
.dd-floor::before, .dd-floor::after {
  content: ''; position: absolute; bottom: 10px; width: 10px; height: 46px; border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #4fc27f, #2a7d4c); transform-origin: bottom; animation: dd-weed 3s ease-in-out infinite alternate;
}
.dd-floor::before { left: 8%; }
.dd-floor::after { right: 10%; height: 34px; animation-delay: -1.5s; }
@keyframes dd-weed { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.dd-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.dd-deck { position: relative; width: 70px; height: 94px; flex: none; }
.dd-deck .dd-card { position: absolute; left: 0; top: 0; }
.dd-deck .dd-under2 { transform: translate(4px, 4px) rotate(4deg); filter: brightness(.7); }
.dd-deck .dd-under { transform: translate(2px, 2px) rotate(2deg); filter: brightness(.85); }
.dd-deck.empty .dd-card { opacity: .25; }
.dd-deck.can-move > .dd-card:nth-child(3) { animation: dd-lift 1.4s ease-in-out infinite; cursor: grab; touch-action: none; }
@keyframes dd-lift { 0%, 60%, 100% { transform: none; } 75% { transform: translateY(-6px) rotate(-3deg); filter: drop-shadow(0 0 8px #ffc531); } }
.dd-deckn {
  position: absolute; right: -6px; bottom: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
  background: #062c52; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(255, 255, 255, .3);
}
.dd-haulbox { display: flex; flex-direction: column; align-items: center; color: #fff; }
.dd-haulbox small { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; opacity: .75; }
.dd-haulbox b { font-size: 30px; line-height: 1; color: #ffd76a; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.dd-gauge { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; color: #fff; }
.dd-glabel { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; opacity: .9; }
.dd-gbar { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .3); overflow: hidden; }
.dd-gbar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #5ad45a, #ffc531); transition: width .4s; }
.dd-gbar i.hot { background: linear-gradient(90deg, #ffc531, #ff5a5f); }
.dd-seen { display: flex; align-items: center; gap: 3px; min-height: 22px; }
.dd-mini { width: 22px; height: 22px; border-radius: 6px; background: rgba(255, 138, 138, .35); }
.dd-mini.tank { background: rgba(106, 212, 154, .35); }
.dd-mini svg { width: 100%; height: 100%; display: block; }
.dd-seen small { font-weight: 700; font-size: 12px; }
.dd-haul { position: relative; z-index: 1; flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 8px; }
.dd-calm { margin: auto; color: rgba(255, 255, 255, .7); font-weight: 600; }
.dd-card {
  width: 70px; height: 94px; border-radius: 12px; flex: none; position: relative;
  background: linear-gradient(165deg, #e9f8ff, #b8e2f2); box-shadow: 0 4px 0 rgba(0, 0, 0, .28), 0 6px 12px rgba(0, 0, 0, .25);
}
.dd-card svg { width: 100%; height: 100%; display: block; }
.dd-card.back { background: linear-gradient(160deg, #1a78b8, #0b3f73); box-shadow: 0 4px 0 rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(255, 255, 255, .25); }
.dd-card.gold { background: linear-gradient(165deg, #fff6d6, #ffe08a); }
.dd-card.pearl { background: linear-gradient(165deg, #fbf6ff, #e3d3fb); }
.dd-card.tank { background: linear-gradient(165deg, #e2fbe9, #8fe3b2); }
.dd-card.tank.used { filter: grayscale(.7) brightness(.8); }
.dd-card.danger { background: linear-gradient(165deg, #ffe5e5, #ff9c9c); box-shadow: 0 4px 0 rgba(0, 0, 0, .28), 0 0 0 2px #ff5a5f; }
.dd-card.saved { box-shadow: 0 4px 0 rgba(0, 0, 0, .28), 0 0 0 3px #6ad49a; filter: saturate(.6); }
.dd-card.pending { animation: dd-pend .5s ease-in-out infinite alternate; }
@keyframes dd-pend { to { transform: translateY(-4px) rotate(2deg); } }
.dd-slot {
  width: 70px; height: 94px; border-radius: 12px; border: 2.5px dashed rgba(255, 255, 255, .7); display: grid; place-items: center;
  color: rgba(255, 255, 255, .8); font-size: 11px; font-weight: 700; text-align: center; text-transform: uppercase; line-height: 1.2;
  animation: target-glow .9s ease-in-out infinite; cursor: pointer;
}
.dd-slot.drop-over { background: rgba(255, 255, 255, .2); animation: none; }
.dd-ctrl { flex: none; }
.dd-dive { background: linear-gradient(160deg, #22b8cf, #0b6fa8); color: #fff; }
.dd-surface { background: linear-gradient(160deg, #ffe082, #ffc531); }

/* Deep Dive gear */
.dd-p.aimed { box-shadow: 0 0 0 2px #ff6b6b, 0 0 14px #ff6b6b; }
.dd-p.dd-aim { animation: dd-aimp .9s ease-in-out infinite; }
@keyframes dd-aimp { 50% { box-shadow: 0 0 0 2px #ffc531, 0 0 14px #ffc531; } }
.dd-p.drop-over { background: rgba(255, 197, 49, .35); box-shadow: 0 0 0 3px #ffc531; animation: none; }
.dd-p > * { pointer-events: none; }
.dd-gn { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: #ffb347; }
.dd-gn::before { content: ''; width: 8px; height: 11px; border-radius: 2px; background: linear-gradient(160deg, #1d5a85, #0a2440); box-shadow: 0 0 0 1.3px #ffb347; }
.dd-gn[hidden] { display: none; }
.dd-lks { display: inline-flex; gap: 2px; }
.dd-lks:empty { display: none; }
.dd-lks .dd-mini { width: 18px; height: 18px; animation: dd-lurk 1.1s ease-in-out infinite alternate; }
@keyframes dd-lurk { to { transform: translateY(-2px) rotate(-6deg); box-shadow: 0 0 6px #ff5a5f; } }
.dd-sea.dd-aim { box-shadow: inset 0 4px 16px rgba(0, 0, 0, .35), inset 0 0 0 3px rgba(255, 197, 49, .6); }
.dd-sea.drop-over { box-shadow: inset 0 4px 16px rgba(0, 0, 0, .35), inset 0 0 0 4px #ffc531, inset 0 0 40px rgba(255, 197, 49, .35); }
.dd-card.lurk { box-shadow: 0 4px 0 rgba(0, 0, 0, .28), 0 0 0 2px #ff5a5f, 0 0 16px #ff5a5f; }
.dd-card.lurk::after {
  content: 'lurking'; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); padding: 1px 6px; border-radius: 6px;
  background: #ff5a5f; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
/* the gear cards themselves */
.dd-gc {
  width: 64px; height: 88px; border-radius: 11px; display: flex; flex-direction: column; align-items: center; padding: 5px 3px 6px; color: #fff; position: relative;
  background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--gc) 38%, transparent), transparent 62%), linear-gradient(170deg, #1d5a85, #0a2440);
  box-shadow: inset 0 0 0 2px var(--gc), 0 4px 10px rgba(0, 0, 0, .35); transition: transform .18s, filter .2s, box-shadow .2s, opacity .2s; cursor: grab;
}
.dd-gc::before { content: ''; position: absolute; inset: 4px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12); pointer-events: none; }
.dd-gc-art { width: 48px; height: 48px; margin-top: 4px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.dd-gc-art svg { width: 100%; height: 100%; display: block; }
.dd-gc b { margin-top: auto; font-size: 10.5px; line-height: 1.05; text-align: center; color: var(--gc); text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.dd-gc.ok { box-shadow: inset 0 0 0 2px var(--gc), 0 0 12px color-mix(in srgb, var(--gc) 70%, transparent), 0 4px 10px rgba(0, 0, 0, .35); }
.dd-hand .dd-gc:not(.ok) { filter: saturate(.5) brightness(.75); }
.dd-gc.glow { animation: dd-glow .7s ease-in-out infinite alternate; }
@keyframes dd-glow { to { transform: translateY(-10px) scale(1.06); box-shadow: inset 0 0 0 2px var(--gc), 0 0 22px var(--gc); } }
.dd-gc.sel { transform: translateY(-14px) scale(1.08); }
.dd-gc.gone { opacity: 0; }
.dd-gc.drag-src { opacity: .3; }
.dd-gc.drag-ghost { transform-origin: 50% 50%; }
.dd-gc.dd-big { width: 108px; height: 148px; border-radius: 16px; padding: 8px 6px 10px; }
.dd-gc.dd-big .dd-gc-art { width: 80px; height: 80px; margin-top: 8px; }
.dd-gc.dd-big b { font-size: 16px; }
.dd-tray { flex: none; display: flex; flex-direction: column; }
.dd-tray[hidden] { display: none; }
.dd-tip { min-height: 30px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; padding: 2px 6px; text-align: center; font-size: 13px; line-height: 1.25; }
.dd-tip > small { opacity: .7; }
.dd-tiptext { flex: 1 1 200px; text-align: left; }
.dd-tipbtns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.dd-why { opacity: .75; font-style: italic; }
.dd-tbtn { min-height: 38px; padding: 0 12px; font-size: 14px; border-radius: 12px; background: linear-gradient(160deg, #ffe082, #ffc531); color: #2b1d00; }
.dd-hand { position: relative; height: 104px; touch-action: pan-y; }
.dd-fi {
  position: absolute; left: 50%; bottom: 0; width: 64px; height: 88px; margin-left: -32px; transform-origin: 50% 100%; transition: transform .25s cubic-bezier(.3, .7, .3, 1.2);
  transform: translateX(calc(var(--k) * 58px)) translateY(calc(var(--k) * var(--k) * 3px)) rotate(calc(var(--k) * 6deg));
}
.dd-fi.sel { z-index: 20 !important; }
/* sonar: the next cards, on my phone only */
.dd-peek { display: none; position: relative; z-index: 2; align-self: flex-start; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 12px; background: rgba(6, 48, 58, .7); box-shadow: inset 0 0 0 1.5px rgba(79, 209, 197, .7), 0 0 14px rgba(79, 209, 197, .35); color: #b8fff6; font-size: 12px; font-weight: 700; }
.dd-peek.on { display: flex; }
.dd-peek small { font-weight: 500; font-size: 10px; opacity: .7; max-width: 52px; line-height: 1.1; }
.dd-pc { width: 30px; height: 40px; border-radius: 6px; flex: none; background: linear-gradient(165deg, #e9f8ff, #b8e2f2); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.dd-pc svg { width: 100%; height: 100%; display: block; }
.dd-pc.gold { background: linear-gradient(165deg, #fff6d6, #ffe08a); }
.dd-pc.pearl { background: linear-gradient(165deg, #fbf6ff, #e3d3fb); }
.dd-pc.tank { background: linear-gradient(165deg, #e2fbe9, #8fe3b2); }
.dd-pc.danger { background: linear-gradient(165deg, #ffe5e5, #ff9c9c); box-shadow: 0 2px 0 rgba(0, 0, 0, .3), 0 0 0 1.5px #ff5a5f; }
.dd-pc:first-of-type { box-shadow: 0 2px 0 rgba(0, 0, 0, .3), 0 0 0 2px #4fd1c5; }
/* the Bubble Shield moment */
.dd-react {
  position: absolute; left: 8px; right: 8px; bottom: 44px; z-index: 5; display: none; gap: 10px; align-items: center; padding: 10px; border-radius: 16px;
  background: rgba(6, 30, 56, .93); box-shadow: 0 0 0 2px rgba(154, 216, 255, .5), 0 10px 24px rgba(0, 0, 0, .4); color: #fff;
}
.dd-react.on { display: flex; }
.dd-react.me { animation: dd-alarm .7s ease-in-out infinite alternate; }
@keyframes dd-alarm { from { box-shadow: 0 0 0 2px #ff6b6b, 0 10px 24px rgba(0, 0, 0, .4); } to { box-shadow: 0 0 0 3px #ff6b6b, 0 0 26px rgba(255, 107, 107, .7); } }
.dd-react.drop-over { background: rgba(28, 90, 140, .96); }
.dd-rcard .dd-gc { width: 54px; height: 74px; cursor: default; }
.dd-rcard .dd-gc-art { width: 38px; height: 38px; }
.dd-rbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dd-rbody > b { font-size: 15px; line-height: 1.2; }
.dd-rbody > small { font-size: 12px; opacity: .75; line-height: 1.25; }
.dd-clock { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.dd-clock i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ff6b6b, #ffc531); transform-origin: left; animation: dd-clock linear forwards; }
@keyframes dd-clock { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.dd-rbtns { gap: 6px; flex-wrap: wrap; }
.dd-rbtns .btn { min-height: 40px; padding: 0 12px; font-size: 14px; border-radius: 12px; }
.dd-rbtns small { opacity: .7; font-size: 12px; }
.dd-shieldbtn { background: linear-gradient(160deg, #d7f4ff, #6cc4f0); color: #06304f; }
.dd-wait { font-weight: 600; opacity: .85; }
/* gear in flight, for everyone to see */
.dd-fx { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; }
.dd-fx > * { grid-area: 1 / 1; }
.dd-play { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 70px; }
.dd-cap { padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .5); color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap; }
.dd-gb { width: 50px; height: 70px; border-radius: 8px; background: linear-gradient(160deg, #1d5a85, #0a2440); box-shadow: 0 0 0 1.5px #ffb347, 0 4px 10px rgba(0, 0, 0, .35); }
.dd-gb svg { width: 100%; height: 100%; display: block; }
.dd-gb.air { width: 56px; height: 56px; background: none; box-shadow: none; }
.dd-pop { width: 150px; height: 150px; }
.dd-pop svg { width: 100%; height: 100%; display: block; }
.dd-tossed { box-shadow: 0 0 0 3px #ff9f43, 0 8px 18px rgba(0, 0, 0, .4); }
.dd-ping { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 2px solid #4fd1c5; pointer-events: none; z-index: 3; animation: dd-ping 1.1s ease-out backwards; }
@keyframes dd-ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
.dd-sea.dd-swirl::after {
  content: ''; position: absolute; left: -30%; top: -10%; width: 160%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 4;
  background: repeating-conic-gradient(rgba(122, 162, 255, 0) 0 18deg, rgba(122, 162, 255, .3) 18deg 36deg); animation: dd-swirl .65s ease-in-out forwards;
}
@keyframes dd-swirl { from { transform: rotate(0) scale(.5); opacity: 0; } 40% { opacity: 1; } to { transform: rotate(260deg) scale(1.1); opacity: 0; } }
@media (max-height: 740px) { .dd-sea { min-height: 250px; } .dd-hand { height: 92px; } }

/* Deep Dive walkthrough props */
.dd-tut-sea { width: 100cqw; height: 100cqh; background: linear-gradient(180deg, #23c3dc 0%, #0e7fb5 35%, #0a4f86 70%, #062c52 100%); }
.dd-tw { z-index: 2; perspective: 60cqw; }
.dd-tc { width: 17cqw; height: 23cqw; border-radius: 2.4cqw; background: linear-gradient(165deg, #e9f8ff, #b8e2f2); box-shadow: 0 1cqw 0 rgba(0, 0, 0, .28); }
.dd-tc svg { width: 100%; height: 100%; display: block; }
.dd-tc.back { background: linear-gradient(160deg, #1a78b8, #0b3f73); box-shadow: 0 1cqw 0 rgba(0, 0, 0, .3), inset 0 0 0 .5cqw rgba(255, 255, 255, .25); }
.dd-tc.gold { background: linear-gradient(165deg, #fff6d6, #ffe08a); }
.dd-tc.pearl { background: linear-gradient(165deg, #fbf6ff, #e3d3fb); }
.dd-tc.tank { background: linear-gradient(165deg, #e2fbe9, #8fe3b2); }
.dd-tc.danger { background: linear-gradient(165deg, #ffe5e5, #ff9c9c); box-shadow: 0 1cqw 0 rgba(0, 0, 0, .28), 0 0 0 .6cqw #ff5a5f; }
.dd-tut-chip { display: flex; align-items: center; gap: 1.6cqw; padding: 1.2cqw 3cqw 1.2cqw 1.6cqw; border-radius: 5cqw; background: var(--panel); font-size: 5cqw; z-index: 1; }
.dd-tut-chip i { width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff2a8, #ffc531 50%, #d18f00); }
.dd-tut-chip b { color: #ffd76a; }
.dd-tut-btn { padding: 2.4cqw 5cqw; border-radius: 3.4cqw; background: linear-gradient(160deg, #ffe082, #ffc531); color: #2b1d00; font-weight: 700; font-size: 5cqw; }
.tut-item.dd-tgc { transform: translate(-50%, -50%) rotate(var(--r, 0deg)); transition: transform .2s; }
.dd-tgc {
  width: 14cqw; height: 19.5cqw; border-radius: 2.4cqw; display: flex; flex-direction: column; align-items: center; padding: 1cqw .6cqw 1.2cqw; z-index: 3;
  background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--gc) 38%, transparent), transparent 62%), linear-gradient(170deg, #1d5a85, #0a2440);
  box-shadow: inset 0 0 0 .5cqw var(--gc), 0 1cqw 2cqw rgba(0, 0, 0, .35);
}
.dd-tgc .dd-gc-art { width: 10.5cqw; height: 10.5cqw; margin-top: .8cqw; }
.dd-tgc b { margin-top: auto; font-size: 2.3cqw; line-height: 1.05; text-align: center; color: var(--gc); }
.dd-tgc.glow { box-shadow: inset 0 0 0 .5cqw var(--gc), 0 0 4cqw var(--gc); }
.dd-tpc { width: 9cqw; height: 12cqw; border-radius: 1.4cqw; background: linear-gradient(165deg, #e9f8ff, #b8e2f2); z-index: 2; box-shadow: 0 .6cqw 0 rgba(0, 0, 0, .3); }
.dd-tpc svg { width: 100%; height: 100%; display: block; }
.dd-tpc.gold { background: linear-gradient(165deg, #fff6d6, #ffe08a); }
.dd-tpc.pearl { background: linear-gradient(165deg, #fbf6ff, #e3d3fb); }
.dd-tpc.danger { background: linear-gradient(165deg, #ffe5e5, #ff9c9c); box-shadow: 0 .6cqw 0 rgba(0, 0, 0, .3), 0 0 0 .5cqw #4fd1c5; }
.dd-tping { width: 16cqw; height: 16cqw; border-radius: 50%; border: .6cqw solid #4fd1c5; z-index: 3; opacity: 0; }
.dd-tut-chip span { font-weight: 700; font-size: 4.2cqw; }
.dd-tut-chip.turn { box-shadow: 0 0 0 .6cqw #5ad45a, 0 0 3cqw #5ad45a; }
.dd-tlurk { width: 6cqw; height: 6cqw; border-radius: 1.2cqw; background: rgba(255, 138, 138, .45); }
.dd-tlurk svg { width: 100%; height: 100%; display: block; }
.dd-tpanel { width: 74cqw; padding: 2cqw 3cqw; border-radius: 3cqw; background: rgba(6, 30, 56, .93); box-shadow: 0 0 0 .7cqw #ff6b6b; color: #fff; font-size: 4cqw; z-index: 2; display: flex; flex-direction: column; gap: 1.4cqw; }
.dd-tpanel i { display: block; height: 1.6cqw; border-radius: 1cqw; background: linear-gradient(90deg, #ff6b6b, #ffc531); transform-origin: left; animation: dd-clock 2.4s linear forwards; }
.dd-tpop { width: 40cqw; height: 40cqw; z-index: 4; }
.dd-tpop svg { width: 100%; height: 100%; display: block; }

/* ================= Boomtown ================= */

.bo-bar { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; }
.bo-chip { flex: none; display: flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border-radius: 999px; background: var(--panel); font-size: 13px; }
.bo-chip.turn { box-shadow: 0 0 0 2px var(--c); }
.bo-chip.out { opacity: .4; }
.bo-chip .bo-av { width: 24px; height: 24px; border-radius: 50%; background: var(--c); }
.bo-chip span { font-variant-numeric: tabular-nums; }
.bo-chip em { font-style: normal; font-size: 11px; }
.bo-chip em:empty { display: none; }
.bo-board {
  position: relative; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); gap: 2px; aspect-ratio: 1;
  width: min(100%, calc(100dvh - 300px - var(--safe-top) - var(--safe-bottom))); min-width: 300px;
  max-width: 560px; margin: 0 auto; padding: 3px; border-radius: 14px;
  background: linear-gradient(160deg, #4f8f52, #2f6b3d); box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}
.bo-space {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; min-height: 0; padding: 0 0 1px; border-radius: 5px;
  background: linear-gradient(#fffaf0, #f6e7c8); color: #3a2a1a; box-shadow: inset 0 0 0 2px var(--o, transparent), 0 2px 0 rgba(0, 0, 0, .18); overflow: hidden;
}
.bo-space.owned { box-shadow: inset 0 0 0 2.5px var(--o), 0 2px 0 rgba(0, 0, 0, .18); background: linear-gradient(color-mix(in srgb, var(--o) 14%, #fffaf0), color-mix(in srgb, var(--o) 26%, #f6e7c8)); }
.bo-space:not(.lot):not(.trolley):not(.util) { background: linear-gradient(#ffe9b8, #ffd98a); }
.bo-space.corner { background: linear-gradient(#fff1c9, #ffcf6e) !important; }
.bo-space.jam { background: linear-gradient(#ffd6cf, #ffa98f) !important; }
.bo-space.detour { background: linear-gradient(#ffe0bf, #ffb36b) !important; }
.bo-space.gossip { background: linear-gradient(#ffe3f0, #f5bcd8) !important; }
.bo-space.mayor { background: linear-gradient(#e3ecff, #b9cdf7) !important; }
.bo-space.pawned { filter: saturate(.25); background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .07) 0 4px, transparent 4px 8px), linear-gradient(#ece6da, #d8d0c0) !important; }
.bo-band { position: absolute; left: 0; right: 0; top: 0; height: 14%; background: var(--h); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); }
.bo-art { width: 88%; margin-top: 12%; flex: 1; display: grid; place-items: center; min-height: 0; }
.bo-art svg { width: 100%; max-height: 100%; display: block; }
.bo-space:not(.lot) .bo-art { width: 92%; margin-top: 4%; }
.bo-art.bo-shops { display: flex; align-items: flex-end; justify-content: center; gap: 0; width: 100%; padding-bottom: 1px; }
.bo-shop { flex: none; width: 36%; margin: 0 -2%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.bo-art .bo-shop svg { width: 100%; max-height: none; display: block; }
.bo-art.bo-tower { width: 52%; }
.bo-price, .bo-name { font-size: 8.5px; font-weight: 700; line-height: 1.05; opacity: .8; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bo-name { font-size: 7.5px; opacity: .72; }
.bo-ticket {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) rotate(-18deg); padding: 1px 3px; border: 1.5px solid #c0392b; border-radius: 3px;
  color: #c0392b; font-size: 8px; font-weight: 800; letter-spacing: .5px; background: rgba(255, 250, 240, .85); pointer-events: none;
}
.bo-wheel { transform-box: fill-box; transform-origin: center; animation: bo-spin 14s linear infinite; }
@keyframes bo-spin { to { transform: rotate(360deg); } }
.bo-blink { animation: bo-blink 1.4s steps(1) infinite; }
@keyframes bo-blink { 50% { opacity: .35; } }
.bo-space.bo-target::after {
  content: ''; position: absolute; inset: 1px; border: 3px dashed var(--accent, #ffc531); border-radius: 5px;
  background: rgba(255, 197, 49, .32); animation: target-glow .9s ease-in-out infinite; pointer-events: none;
}
.bo-center {
  position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; padding: 6px;
  border-radius: 10px; min-width: 0; min-height: 0; overflow: hidden;
}
.bo-center > svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.bo-center > *:not(svg) { position: relative; z-index: 1; }
.bo-round { text-align: center; color: #fff; font-size: 12px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.bo-piles { display: flex; align-items: center; justify-content: center; gap: 14px; }
.bo-pile {
  width: 34px; height: 44px; border-radius: 6px; display: grid; place-items: center; padding: 3px;
  box-shadow: 0 1px 0 #fff, 0 3px 0 rgba(255, 255, 255, .8), 0 4px 0 rgba(0, 0, 0, .15), 0 6px 0 rgba(255, 255, 255, .7), 0 8px 8px rgba(0, 0, 0, .35);
}
.bo-pile svg { width: 100%; display: block; }
.bo-pile.gossip, .bo-card.gossip .back { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .14) 0 5px, transparent 5px 10px), linear-gradient(160deg, #f6a3c4, #b46ad0); }
.bo-pile.mayor, .bo-card.mayor .back { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .1) 0 5px, transparent 5px 10px), linear-gradient(160deg, #6f95e8, #2f4f9f); }
.bo-fountain { position: relative; width: 52px; display: flex; flex-direction: column; align-items: center; }
.bo-fountain svg { width: 100%; display: block; }
.bo-pot { margin-top: -4px; font-weight: 800; font-size: 12px; color: #fff3b0; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.bo-pot::before { content: '🪙'; font-size: 10px; margin-right: 1px; }
.bo-log { display: flex; flex-direction: column; align-items: center; min-height: 26px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.bo-log small { font-size: 11px; opacity: .92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bo-pieces { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.bo-tok {
  position: absolute; left: 0; top: 0; width: 15px; height: 19px; margin: -15px 0 0 -7.5px;
  border-radius: 50% 50% 45% 45%; border: 2px solid #fff;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .75), transparent 42%), var(--c);
  box-shadow: 0 3px 4px rgba(0, 0, 0, .4); pointer-events: none;
}
.bo-tok.stuck { border-color: #ffd0c8; box-shadow: 0 0 0 2px #e8655a, 0 3px 4px rgba(0, 0, 0, .4); }
.bo-tok.can-move { pointer-events: auto; touch-action: none; cursor: grab; }
.bo-tok.can-move::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; } /* a bigger finger target */
.bo-ghost { margin: 0; }
.bo-coin {
  position: fixed; width: 18px; height: 18px; margin: -9px 0 0 -9px; z-index: 9998; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c0, #ffd34d 45%, #e0a21a); box-shadow: inset 0 0 0 2px #c48a10, 0 2px 4px rgba(0, 0, 0, .35);
}
.bo-deed { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; perspective: 600px; pointer-events: none; }
.bo-deed-card { width: 156px; min-height: 196px; border-radius: 12px; background: #fffdf6; box-shadow: 0 14px 30px rgba(0, 0, 0, .45); overflow: hidden; color: #3a2a1a; display: flex; flex-direction: column; }
.bo-deed-face { display: flex; flex-direction: column; }
.bo-deed-face.back {
  min-height: 196px; align-items: center; justify-content: center; gap: 8px; color: #fff; letter-spacing: 2px;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .12) 0 8px, transparent 8px 16px), var(--h);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .6);
}
.bo-deed-face.back svg { width: 64%; }
.bo-deed-band { background: var(--h); padding: 7px 6px; text-align: center; display: flex; flex-direction: column; color: #2a1d10; }
.bo-deed-band small { font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.5px; opacity: .8; }
.bo-deed-rows { padding: 7px 11px 3px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.bo-deed-rows div { display: flex; justify-content: space-between; gap: 8px; }
.bo-deed-foot { padding: 4px 8px 9px; text-align: center; font-size: 10.5px; opacity: .7; border-top: 1px dashed rgba(0, 0, 0, .2); margin: 4px 10px 0; }
.bo-sheet-deed { display: grid; place-items: center; padding: 4px 0 2px; }
.bo-sheet-deed .bo-deed-card { width: 220px; min-height: 0; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.bo-sheet-deed .bo-deed-rows { font-size: 15px; }
.bo-sheet-art { width: 110px; margin: 0 auto; }
.bo-sheet-art svg { width: 100%; display: block; }
.bo-acts { flex-wrap: wrap; }
.bo-mini-deed {
  position: fixed; width: 26px; height: 34px; z-index: 9998; pointer-events: none; border-radius: 4px;
  background: linear-gradient(var(--h) 0 30%, #fffdf6 30%); box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
}
/* event cards */
.bo-card-wrap { z-index: 7; }
.bo-card { width: 178px; min-height: 232px; border-radius: 14px; background: #fffdf6; box-shadow: 0 16px 34px rgba(0, 0, 0, .5); overflow: hidden; color: #2e2238; display: flex; flex-direction: column; }
.bo-card-face { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bo-card-face.back { justify-content: center; gap: 10px; color: #fff; letter-spacing: 2px; font-size: 13px; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .55); }
.bo-card-face.back svg { width: 62%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.bo-card-band { align-self: stretch; padding: 7px; font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #fff; }
.bo-card.gossip .bo-card-band { background: linear-gradient(90deg, #e87ea1, #b46ad0); }
.bo-card.mayor .bo-card-band { background: linear-gradient(90deg, #5b8def, #2f4f9f); }
.bo-card-pic { font-size: 40px; line-height: 1; margin: 12px 0 6px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .2)); }
.bo-card-title { font-size: 18px; padding: 0 10px; }
.bo-card-text { margin: 6px 0 0; padding: 0 12px; font-size: 13px; line-height: 1.3; }
.bo-card-who { margin-top: auto; padding: 8px; font-size: 10.5px; opacity: .6; }
/* the auction, over the park */
.bo-auc {
  position: absolute; left: 50%; top: 50%; z-index: 5; width: 62%; display: none; flex-direction: column; align-items: stretch; gap: 4px;
  transform: translate(-50%, -50%); padding: 0 0 8px; border-radius: 12px; background: #fffdf6; color: #3a2a1a; box-shadow: 0 12px 28px rgba(0, 0, 0, .45); overflow: hidden; text-align: center;
}
.bo-auc.on { display: flex; }
.bo-auc-band { background: var(--h); padding: 6px; display: flex; flex-direction: column; }
.bo-auc-band small { font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 800; opacity: .75; }
.bo-auc-bid { display: flex; flex-direction: column; }
.bo-auc-bid b { font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.bo-auc-bid b::before { content: '🪙'; font-size: 18px; margin-right: 3px; }
.bo-auc-bid small { font-size: 12px; opacity: .75; }
.bo-auc .bo-timer { margin: 0 10px; background: rgba(0, 0, 0, .1); }
.bo-auc-call { min-height: 14px; font-size: 12px; font-weight: 800; color: #c0392b; }
.bo-timer { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.bo-timer i { display: block; height: 100%; background: var(--accent, #ffc531); border-left: 0 solid; transform-origin: left; }
/* the panel under the board */
.bo-panel { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; }
.bo-offer, .bo-bidbox, .bo-jam, .bo-buy, .bo-debt { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 2px var(--accent); }
.bo-debt { box-shadow: inset 0 0 0 2px #ff6b6b; }
.bo-bidbox small, .bo-jam small, .bo-debt small { color: var(--muted); }
.bo-warn { color: #ffb0a0; }
.bo-buy-deed { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 10px; border-top: 8px solid var(--h); background: #fffdf6; color: #3a2a1a; }
.bo-buy-deed small { opacity: .7; }
.bo-swap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bo-swap > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.bo-swap > div > small { color: var(--muted); }
.bo-mini-lots { display: flex; flex-wrap: wrap; gap: 4px; }
.bo-mini-lot { padding: 2px 7px 2px 5px; border-left: 5px solid var(--h); border-radius: 6px; background: var(--panel2); font-size: 12.5px; }
.bo-coins { font-weight: 700; color: #ffd76a; }
.bo-lots { display: flex; flex-direction: column; gap: 5px; }
.bo-lot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 5px 8px; border-radius: 12px; background: var(--panel); font-size: 14px; }
.bo-lot > i { width: 10px; height: 26px; border-radius: 4px; background: var(--h); }
.bo-lot small { color: var(--muted); }
.bo-lot.pawned { opacity: .75; }
.bo-lot.pawned > i { background: repeating-linear-gradient(135deg, var(--h) 0 3px, #777 3px 6px); }
.bo-lv { font-size: 12px; }
.bo-act { min-height: 34px; padding: 0 10px; font-size: 13px; }
.bo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bo-pick { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 12px; background: var(--panel2); font-weight: 600; font-size: 14px; }
.bo-pick > i { width: 8px; height: 16px; border-radius: 3px; background: var(--h); }
.bo-pick.on { background: var(--accent); color: #17133a; }
/* Boomtown tutorial props */
.tut-bo-park { width: 96%; height: 92%; border-radius: 4cqw; background: radial-gradient(ellipse at 50% 45%, #6cc46a, #3f9450); }
.tut-bo-sp { width: 13cqw; aspect-ratio: 1; border-radius: 2cqw; overflow: hidden; display: grid; place-items: end center; background: linear-gradient(#fffaf0, #f6e7c8); box-shadow: 0 .7cqw 0 rgba(0, 0, 0, .25); }
.tut-bo-sp > i { position: absolute; left: 0; right: 0; top: 0; height: 15%; }
.tut-bo-sp > svg { width: 86%; display: block; margin-bottom: 6%; }
.tut-bo-sp.owned { box-shadow: inset 0 0 0 .9cqw #3fa9ff, 0 .7cqw 0 rgba(0, 0, 0, .25); }
.tut-bo-sp.pawned { filter: saturate(.2) brightness(.92); }
.tut-bo-sp.jam { background: linear-gradient(#ffd6cf, #ffa98f); }
.tut-bo-shop { position: absolute; bottom: 8%; width: 54%; transform-origin: 50% 100%; filter: drop-shadow(0 .3cqw .3cqw rgba(0, 0, 0, .3)); }
.tut-bo-shop svg { width: 100%; display: block; }
.tut-bo-tower { position: absolute; bottom: 4%; left: 26%; width: 48%; transform-origin: 50% 100%; }
.tut-bo-tower svg { width: 100%; display: block; }
.tut-bo-tok { width: 6cqw; height: 7.4cqw; border-radius: 50% 50% 45% 45%; border: .7cqw solid #fff; z-index: 4; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .75), transparent 42%), var(--c); box-shadow: 0 1cqw 1.2cqw rgba(0, 0, 0, .4); }
.tut-bo-glow { width: 13cqw; aspect-ratio: 1; border: .8cqw dashed #fff; border-radius: 2cqw; background: rgba(255, 255, 255, .25); animation: target-glow .9s infinite; z-index: 2; }
.tut-bo-coin { width: 5cqw; aspect-ratio: 1; border-radius: 50%; z-index: 7; background: radial-gradient(circle at 35% 30%, #fff6c0, #ffd34d 45%, #e0a21a); box-shadow: inset 0 0 0 .5cqw #c48a10; }
.tut-bo-chip { display: flex; align-items: center; gap: 1.5cqw; padding: 1cqw 3cqw 1cqw 1cqw; border-radius: 99px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 4.4cqw; box-shadow: 0 0 0 .5cqw var(--c); white-space: nowrap; }
.tut-bo-chip i { width: 5cqw; aspect-ratio: 1; border-radius: 50%; background: var(--c); }
.tut-bo-deed { width: 30cqw; display: flex; flex-direction: column; gap: .6cqw; padding: 2cqw; border-radius: 2cqw; border-top: 5cqw solid var(--h, #e87ea1); background: #fffdf6; color: #3a2a1a; font-size: 3.6cqw; z-index: 6; box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, .45); }
.tut-bo-btn { background: var(--accent); color: #17133a; font-weight: 700; border-radius: 3cqw; padding: .7em 1.2em; font-size: 4.4cqw; box-shadow: 0 .8cqw 0 rgba(0, 0, 0, .25); white-space: nowrap; }
.tut-bo-btn.alt { background: #4a4470; color: #fff; }
.tut-bo-rent { color: #fff; font-weight: 700; font-size: 6cqw; white-space: nowrap; }
.tut-bo-auc { width: 40cqw; display: flex; flex-direction: column; align-items: stretch; text-align: center; border-radius: 2.6cqw; overflow: hidden; background: #fffdf6; color: #3a2a1a; box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, .45); z-index: 5; }
.tut-bo-auc > small { background: #6ec6d8; padding: 1cqw; font-size: 3.4cqw; font-weight: 800; letter-spacing: .3cqw; }
.tut-bo-auc > b { font-size: 8cqw; }
.tut-bo-auc > span { font-size: 3.4cqw; opacity: .75; }
.tut-bo-auc > i { display: block; height: 1.6cqw; margin: 1.4cqw 3cqw 2.4cqw; border-radius: 1cqw; background: #ffc531; transform-origin: left; }
.tut-bo-card { width: 36cqw; height: 48cqw; border-radius: 3cqw; z-index: 6; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; background: #fffdf6; color: #2e2238; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .5); }
.tut-bo-card > small { align-self: stretch; padding: 1.2cqw; font-size: 3cqw; font-weight: 800; letter-spacing: .4cqw; color: #fff; background: linear-gradient(90deg, #e87ea1, #b46ad0); }
.tut-bo-card > span { font-size: 9cqw; margin: 2cqw 0 1cqw; }
.tut-bo-card > b { font-size: 4.6cqw; }
.tut-bo-card > p { margin: 1cqw 2.4cqw 0; font-size: 3.2cqw; line-height: 1.25; }
.tut-bo-card.back { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .14) 0 2cqw, transparent 2cqw 4cqw), linear-gradient(160deg, #f6a3c4, #b46ad0); justify-content: center; }
.tut-bo-card.back svg { width: 60%; }
.tut-bo-stamp { padding: .4cqw 1.2cqw; border: .6cqw solid #c0392b; border-radius: 1cqw; color: #c0392b; font-weight: 800; font-size: 3.4cqw; background: rgba(255, 250, 240, .9); transform: translate(-50%, -50%) rotate(-18deg); z-index: 5; }
.tut-bo-mini { width: 9cqw; height: 12cqw; border-radius: 1.2cqw; z-index: 4; background: linear-gradient(var(--h) 0 30%, #fffdf6 30%); box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, .4); }

/* ================= Color Rush ================= */

.cr-root { gap: 10px; }
.pcard.rc { background: linear-gradient(150deg, var(--c1), var(--c2) 52%, var(--c3)); color: #fff; overflow: hidden; box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
.pcard.rc > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.pcard.rc-back { background: linear-gradient(160deg, #43359e, #2b2170 50%, #17133a); }
.pcard.cr-fly { --w: 44px; }
.pcard.rc.mini { --w: 24px; margin-right: -11px; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.cr-seats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 6px; padding-top: 6px; }
.cr-seat {
  position: relative; flex: 1 1 calc(25% - 6px); min-width: 74px; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 4px 9px; border-radius: 16px; background: var(--panel); color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
  transition: box-shadow .2s, transform .2s, background .3s, filter .3s;
}
.cr-seat.me { background: var(--panel2); }
.cr-seat.turn { box-shadow: 0 0 0 3px var(--c), 0 0 16px var(--c); transform: translateY(-2px); }
.cr-av .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); }
.cr-who { display: flex; flex-direction: column; align-items: center; line-height: 1.15; max-width: 100%; }
.cr-who b { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-cnt { font-size: 11px; color: var(--muted); font-weight: 600; }
.cr-seat.one .cr-cnt { color: var(--accent); }
.cr-fan { position: absolute; top: 6px; right: 7px; width: 22px; height: 20px; pointer-events: none; }
.cr-fan i {
  position: absolute; left: 6px; top: 2px; width: 10px; height: 14px; border-radius: 2px; transform-origin: 50% 120%;
  background: linear-gradient(160deg, #5a49c8, #2b2170); box-shadow: 0 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .4); rotate: calc(var(--k) * 13deg);
}
.cr-tm { position: absolute; left: 12px; right: 12px; bottom: 3px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); opacity: 0; transition: opacity .2s; }
.cr-seat.timed .cr-tm { opacity: 1; }
.cr-tm i { display: block; height: 100%; border-radius: 2px; background: var(--c); transform-origin: 0 50%; }
.cr-flag { position: absolute; top: -9px; left: 50%; translate: -50% 0; padding: 1px 7px; border-radius: 9px; font-size: 11px; font-weight: 700; white-space: nowrap; display: none; z-index: 2; }
.cr-flag.good { display: block; background: var(--good); color: #0d2b0d; }
.cr-flag.bad { display: block; background: var(--bad); color: #fff; animation: cr-pulse .7s ease-in-out infinite; }
.cr-seat.catch { box-shadow: 0 0 0 3px var(--bad), 0 0 18px rgba(255, 90, 95, .6); }
.cr-seat.pickable { box-shadow: 0 0 0 3px var(--accent), 0 0 16px rgba(255, 197, 49, .6); animation: cr-pulse 1.1s ease-in-out infinite; }
.cr-seat.frozen { filter: saturate(.5) brightness(1.15); background: linear-gradient(160deg, rgba(191, 232, 255, .45), rgba(63, 169, 255, .25)), var(--panel); }
.cr-table {
  --cc: #ffc531;
  position: relative; display: flex; justify-content: center; align-items: center; gap: 20px; padding: 22px 10px; border-radius: 26px;
  background: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.3px) 0 0 / 6px 6px, radial-gradient(ellipse at 50% 40%, #3b2f92 0%, #2a2266 62%, #1d1750 100%);
  box-shadow: inset 0 0 0 3px var(--cc), inset 0 0 0 7px rgba(0, 0, 0, .25), inset 0 10px 30px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .3);
  transition: box-shadow .45s;
}
.cr-deck { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 600; touch-action: none; }
.cr-stack { position: relative; width: 84px; aspect-ratio: 5 / 7; }
.cr-stack > .pcard { position: absolute; inset: 0; }
.cr-stack > .cr-under2 { translate: 5px 5px; filter: brightness(.7); }
.cr-stack > .cr-under1 { translate: 2.5px 2.5px; filter: brightness(.85); }
.cr-deck.live { cursor: pointer; color: var(--accent); }
.cr-deck.live .cr-stack > .pcard:last-child { box-shadow: 0 0 0 3px var(--accent), 0 0 20px rgba(255, 197, 49, .55); animation: cd-bob 1.6s ease-in-out infinite; }
.cr-pilebox { position: relative; display: grid; place-items: center; padding: 10px; border-radius: 50%; }
.cr-pilebox.drop-over { box-shadow: none !important; }
.cr-pilebox.drop-over .cr-pile { filter: drop-shadow(0 0 12px rgba(255, 255, 255, .8)); }
.cr-pilebox.cd-nope { box-shadow: none !important; }
.cr-pilebox.cd-nope .cr-pile { filter: drop-shadow(0 0 12px rgba(255, 90, 95, .95)); }
.cr-halo { position: absolute; inset: -30px; border-radius: 50%; pointer-events: none; opacity: .5; }
.cr-ring { position: absolute; inset: -14px; pointer-events: none; }
.cr-ring svg { width: 100%; height: 100%; display: block; animation: cr-spin 10s linear infinite; }
.cr-ring.ccw svg { animation-direction: reverse; transform: scaleX(-1); }
.cr-pile { position: relative; width: 84px; aspect-ratio: 5 / 7; }
.cr-pile > .pcard { position: absolute; inset: 0; }
.cr-pile > .pcard:not(:last-child) { filter: brightness(.82); }
.cr-badge {
  position: absolute; right: -10px; top: -6px; z-index: 3; min-width: 42px; height: 42px; padding: 0 6px; border-radius: 21px; display: none; place-items: center;
  background: radial-gradient(circle at 35% 30%, #ffe59a, #ffc531 55%, #d18a00); color: #3a2400; font-weight: 700; font-size: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .4), 0 0 0 3px #fff;
}
.cr-badge.on { display: grid; }
.cr-colortag { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 62px; color: #fff; font-size: 13px; }
.cr-glyph { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--cc); box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0, 0, 0, .4); transition: background .35s; }
.cr-glyph svg { width: 28px; height: 28px; }
.cr-picker { position: absolute; inset: 0; z-index: 8; border-radius: 26px; background: rgba(10, 8, 30, .6); }
.cr-pick-title { position: absolute; translate: -50% -50%; padding: 4px 10px; border-radius: 12px; background: #17133a; color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap; box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
.cr-pick {
  position: absolute; width: 68px; height: 68px; margin: -34px 0 0 -34px; padding: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8, transparent 55%), var(--cc);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(0, 0, 0, .45);
}
.cr-pick svg { width: 30px; height: 30px; }
.cr-pick small { font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.cr-handwrap { padding-top: 26px; }
.cr-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-height: 44px; }
.cr-actions .btn.small { white-space: nowrap; }
.cr-last { background: var(--accent); color: #2b1d00; }
.cr-last.hot { animation: cr-pulse .6s ease-in-out infinite; box-shadow: 0 0 0 3px #fff, 0 0 22px var(--accent); }
.cr-catch { background: var(--bad); color: #fff; animation: cr-pulse .6s ease-in-out infinite; box-shadow: 0 0 18px rgba(255, 90, 95, .6); }
.cr-said { color: var(--good); font-weight: 700; font-size: 14px; }
.cr-snow { position: fixed; z-index: 75; width: 70px; height: 70px; pointer-events: none; filter: drop-shadow(0 0 10px #bfe8ff); }
.cr-snow svg { width: 100%; height: 100%; display: block; }
.cr-bubble {
  position: fixed; z-index: 75; padding: 6px 12px; border-radius: 14px; background: #fff; color: #17133a; font-weight: 700; font-size: 15px;
  pointer-events: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); white-space: nowrap; transform: translate(-50%, -100%);
}
.cr-bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.cr-score {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--safe-bottom)); z-index: 30; max-width: 560px; margin: 0 auto; max-height: 80vh; overflow-y: auto;
  background: rgba(23, 19, 58, .97); border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 -10px 40px rgba(0, 0, 0, .5);
}
.cr-shead { display: flex; flex-direction: column; align-items: center; margin-bottom: 4px; }
.cr-shead b { font-size: 18px; }
.cr-shead small { color: var(--muted); }
.cr-shdr, .cr-srow { display: grid; grid-template-columns: minmax(0, 1fr) auto 42px 44px; align-items: center; gap: 8px; }
.cr-shdr { padding: 0 8px; color: var(--muted); font-size: 11px; text-align: right; }
.cr-srow { padding: 6px 8px; border-radius: 12px; background: rgba(0, 0, 0, .22); box-shadow: inset 4px 0 0 var(--c); }
.cr-srow.win { background: rgba(255, 197, 49, .14); }
.cr-sname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-scards { display: flex; padding-right: 11px; }
.cr-out { color: var(--accent); font-weight: 700; font-size: 13px; }
.cr-spts { text-align: right; color: var(--accent); font-weight: 700; }
.cr-stot { text-align: right; font-size: 17px; }
@keyframes cr-pulse { 50% { scale: 1.06; } }
@keyframes cr-spin { to { rotate: 360deg; } }
/* tutorial props */
.tut-cr-felt { width: 92cqw; height: 60cqh; border-radius: 6cqw; z-index: 0; background: radial-gradient(ellipse at 50% 40%, #3b2f92 0%, #2a2266 62%, #1d1750 100%); box-shadow: inset 0 0 0 .9cqw var(--cc, #ffc531); }
.tut-cr-seat { display: flex; align-items: center; gap: 1.2cqw; padding: .8cqw 2.2cqw .8cqw .8cqw; border-radius: 4cqw; background: var(--panel2); color: #fff; font-weight: 700; font-size: 3.4cqw; white-space: nowrap; box-shadow: 0 0 0 .6cqw var(--c, transparent); z-index: 3; }
.tut-cr-seat i { width: 6cqw; height: 6cqw; border-radius: 50%; background: var(--c); display: block; }
.tut-cr-seat small { color: var(--muted); font-size: 2.8cqw; }
.tut-cr-pick { width: 11cqw; height: 11cqw; border-radius: 50%; background: var(--cc); box-shadow: 0 0 0 .7cqw #fff, 0 1cqw 2cqw rgba(0, 0, 0, .45); z-index: 4; display: grid; place-items: center; }
.tut-cr-pick svg { width: 65%; height: 65%; }
.tut-cr-btn { padding: 1.6cqw 3.4cqw; border-radius: 3cqw; font-weight: 700; font-size: 4cqw; white-space: nowrap; z-index: 4; }
.tut-cr-btn.last { background: var(--accent); color: #2b1d00; box-shadow: 0 0 3cqw var(--accent); }
.tut-cr-btn.catch { background: var(--bad); color: #fff; box-shadow: 0 0 3cqw rgba(255, 90, 95, .7); }
.tut-cr-snow { width: 16cqw; height: 16cqw; z-index: 5; filter: drop-shadow(0 0 2cqw #bfe8ff); }
.tut-cr-snow svg, .tut-cr-ring svg { width: 100%; height: 100%; display: block; }
.tut-cr-ring { width: 34cqw; height: 34cqw; z-index: 1; }
.tut-cr-badge { min-width: 9cqw; height: 9cqw; padding: 0 1.4cqw; border-radius: 5cqw; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ffe59a, #ffc531 55%, #d18a00); color: #3a2400; font-weight: 700; font-size: 4.6cqw; box-shadow: 0 0 0 .6cqw #fff; z-index: 6; }
.cr-handwrap .hand { --cw: 74px; }
.cr-handwrap .pc-ghost > .pcard, .pc-ghost > .pcard.rc { --w: 74px; }

/* ================= Fictionary ================= */

.fc-card {
  position: relative; border-radius: 18px; padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 4px; color: #17133a; perspective: 800px;
  background: repeating-linear-gradient(180deg, transparent 0 25px, rgba(63, 169, 255, .16) 25px 26px) 0 38px / 100% calc(100% - 38px) no-repeat, linear-gradient(170deg, #fffdf5, #f1e7cf);
  box-shadow: inset 0 0 0 1px rgba(23, 19, 58, .08), 0 5px 0 rgba(0, 0, 0, .22), 0 10px 22px rgba(0, 0, 0, .3);
}
.fc-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; border-radius: 18px 18px 0 0; background: linear-gradient(90deg, #2ed3c6, #4b4fd8); }
.fc-card.place::before { background: linear-gradient(90deg, #ffb347, #ff6f3c); }
.fc-card.custom::before { background: linear-gradient(90deg, #ff6fb5, #a66bff); }
.fc-card.know { box-shadow: inset 0 0 0 1px rgba(23, 19, 58, .08), 0 0 0 4px var(--accent), 0 0 24px rgba(246, 181, 50, .5); }
.fc-cardtop { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.fc-kind, .fc-round { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #2c7d78; }
.fc-card.place .fc-kind { color: #c2501b; }
.fc-card.custom .fc-kind { color: #a03a85; }
.fc-round { color: #8b7f63; }
.fc-word { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 34px; line-height: 1.1; overflow-wrap: anywhere; }
.fc-card.l .fc-word { font-size: 28px; }
.fc-card.xl .fc-word { font-size: 22px; }
.fc-card.xxl .fc-word { font-size: 17px; word-break: break-all; }
.fc-card.done .fc-word { font-style: normal; font-family: inherit; font-size: 26px; }
.fc-ask { color: #6b6590; font-weight: 600; font-size: 13px; }
.fc-timer { text-align: center; font-weight: 700; font-size: 22px; color: var(--muted); min-height: 26px; font-variant-numeric: tabular-nums; }
.fc-timer.low { color: var(--bad); animation: fc-throb 1s ease-in-out infinite; }
@keyframes fc-throb { 50% { transform: scale(1.15); } }
.fc-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.fc-count { font-weight: 600; }
.fc-small { font-size: 12px; margin: 0; }

/* writing */
.fc-paper { position: relative; border-radius: 16px; padding: 8px 10px 22px; background: linear-gradient(170deg, #fff, #f4f8ff); box-shadow: 0 4px 0 rgba(0, 0, 0, .2); }
.fc-paper.know { background: linear-gradient(170deg, #fffbea, #ffefb8); box-shadow: 0 0 0 3px var(--accent), 0 4px 0 rgba(0, 0, 0, .2); }
.fc-write.field { background: transparent; border: 0; color: #17133a; min-height: 110px; font-size: 18px; resize: none; text-align: left; width: 100%; box-sizing: border-box; }
.fc-write.field::placeholder { color: #a7a2bf; }
.fc-chars { position: absolute; right: 12px; bottom: 6px; font-size: 11px; color: #8d86ad; font-variant-numeric: tabular-nums; }
.fc-knowtag { display: block; padding: 2px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #a26a00; }
.fc-skip { flex: 0 0 auto; }
.fc-knowbtn.idea { border: 2px dashed rgba(246, 181, 50, .55); color: var(--accent); background: rgba(246, 181, 50, .08); }
.fc-slip { align-self: center; width: min(100%, 340px); box-sizing: border-box; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(170deg, #fff, #f4f8ff); color: #17133a; font-weight: 700; font-size: 17px; line-height: 1.25; box-shadow: 0 4px 0 rgba(0, 0, 0, .2); transform: rotate(-1.5deg); }
.fc-slip small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #4b4fd8; }
.fc-slip.know { background: linear-gradient(170deg, #fffbea, #ffefb8); }
.fc-slip.know small { color: #a26a00; }
.fc-slip .fc-note { text-transform: none; letter-spacing: 0; color: #6b6590; font-weight: 600; }
.fc-slip.pass { background: linear-gradient(170deg, #ecebf3, #d9d7e6); }
.fc-blank { color: #8d86ad; font-style: italic; font-weight: 600; }
.fc-pens { display: grid; place-items: center; }
.fc-quill { transform-box: fill-box; transform-origin: 20% 90%; animation: fc-write 1.1s ease-in-out infinite; }
@keyframes fc-write { 50% { transform: translate(-6px, 2px) rotate(-5deg); } }

/* the list of answers (reading, voting, reveal) */
.fc-list { display: flex; flex-direction: column; gap: 8px; }
.fc-entry {
  position: relative; display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 4px 10px; text-align: left; width: 100%; box-sizing: border-box;
  border-radius: 14px; padding: 10px 12px; min-height: 52px; background: linear-gradient(170deg, #fff, #f4f8ff); color: #17133a; font: inherit; font-weight: 700;
  font-size: 16px; line-height: 1.25; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); border: 0; transition: opacity .2s, transform .15s, box-shadow .2s;
}
.fc-letter { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #17133a; color: #ffe28a; font-size: 15px; }
.fc-text { overflow-wrap: anywhere; padding-top: 3px; }
.fc-tag { grid-column: 2; justify-self: start; padding: 2px 8px; border-radius: 99px; background: #17133a; color: #ffcc33; font-size: 11px; }
.fc-list.big .fc-entry { font-size: 21px; padding: 14px 14px; line-height: 1.3; }
.fc-list.big .fc-letter { width: 34px; height: 34px; font-size: 18px; }
.fc-entry.yours { background: linear-gradient(170deg, #f1f0f7, #e2e0ee); }
button.fc-entry { cursor: pointer; }
button.fc-entry:active { transform: scale(.98); }
.fc-entry.votable { box-shadow: 0 3px 0 rgba(0, 0, 0, .2), inset 0 0 0 2px rgba(75, 79, 216, .15); }
.fc-entry.drop-over { transform: scale(1.03); box-shadow: 0 0 0 4px var(--accent), 0 0 22px rgba(246, 181, 50, .55); }
.fc-entry.picked { box-shadow: 0 0 0 4px var(--accent), 0 3px 0 rgba(0, 0, 0, .2); }
.fc-entry.dim { opacity: .55; }
.fc-readhead { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 16px; background: rgba(46, 211, 198, .14); box-shadow: inset 0 0 0 2px rgba(46, 211, 198, .45); }
.fc-readhead b { font-size: 18px; }
.fc-readhead span { color: var(--muted); font-size: 14px; }
.fc-readhead.listen { background: rgba(75, 79, 216, .18); box-shadow: inset 0 0 0 2px rgba(120, 124, 255, .45); }
.fc-go { font-size: 20px; padding: 16px; position: sticky; bottom: 10px; z-index: 5; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.fc-vhint { margin: 0; }

/* stickers (votes) */
.fc-stks { position: absolute; right: -4px; top: -10px; display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; max-width: 60%; pointer-events: none; }
.fc-stk { display: inline-flex; margin-left: -8px; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 3px 6px rgba(0, 0, 0, .35); transform: rotate(var(--rot)); }
.fc-stk.stamp { animation: fc-stamp .38s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes fc-stamp { 0% { transform: scale(2.6) rotate(calc(var(--rot) - 30deg)); opacity: 0; } 55% { opacity: 1; } 100% { transform: rotate(var(--rot)); } }
.fc-aud { --rot: -4deg; display: inline-flex; align-items: center; margin-left: -4px; padding: 3px 8px; border-radius: 99px; background: #17133a; color: #ffcc33; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 0 0 3px #fff, 0 3px 6px rgba(0, 0, 0, .35); transform: rotate(var(--rot)); }
.fc-aud.stamp { animation: fc-stamp .38s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.fc-dock { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 14px; font-weight: 600; }
.fc-mystk { cursor: grab; margin: 0; }
.fc-mystk .avatar, .fc-ghost .fc-stk .avatar { --s: 44px; }
.fc-ghost { display: grid; place-items: center; }

/* the reveal */
.fc-verdict { grid-column: 2; display: none; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: #6b6590; }
.fc-entry.shown .fc-verdict { display: flex; animation: fc-up .3s ease-out; }
@keyframes fc-up { from { transform: translateY(6px); opacity: 0; } }
.fc-by { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; border-radius: 99px; background: rgba(23, 19, 58, .08); color: #17133a; }
.fc-pts { color: #c2185b; margin-left: auto; font-size: 15px; }
.fc-stamp { padding: 2px 10px; border-radius: 8px; font-weight: 700; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; transform: rotate(-3deg); }
.fc-stamp.house { background: #e7e4f2; color: #6b6590; box-shadow: inset 0 0 0 2px #c8c3dc; }
.fc-stamp.real { background: #2f8f5b; color: #fff; box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(0, 0, 0, .3); font-size: 14px; }
.fc-entry.house { background: linear-gradient(170deg, #f1f0f7, #e2e0ee); }
.fc-entry.real { background: linear-gradient(170deg, #fffbea, #ffe9a6); box-shadow: 0 0 0 4px #ffc531, 0 0 26px rgba(255, 197, 49, .6), 0 3px 0 rgba(0, 0, 0, .2); }
.fc-entry.real .fc-letter { background: #2f8f5b; color: #fff; }
.fc-entry.turning { z-index: 3; }
.fc-knew { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: rgba(246, 181, 50, .12); box-shadow: inset 0 0 0 2px rgba(246, 181, 50, .4); font-size: 14px; }
.fc-knew > small { color: var(--accent); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.fc-knewrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fc-knewrow span { color: var(--muted); font-style: italic; }
.fc-nobody { align-self: center; padding: 8px 18px; border-radius: 14px; text-align: center; background: #c2185b; color: #fff; font-weight: 700; font-size: 22px; box-shadow: 0 0 0 4px #fff, 0 10px 24px rgba(0, 0, 0, .45); transform: rotate(-4deg); }
.fc-nobody small { display: block; color: #ffe28a; font-size: 13px; }
.fc-nobody.pop { animation: fc-slam .55s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes fc-slam { from { transform: rotate(-30deg) scale(3); opacity: 0; } }

/* score bars */
.fc-bars { display: flex; flex-direction: column; gap: 6px; background: rgba(0, 0, 0, .2); border-radius: 16px; padding: 10px 12px; }
.fc-bar { display: grid; grid-template-columns: 24px minmax(0, 72px) 1fr 34px 34px; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; }
.fc-bar .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-bar b { text-align: right; color: var(--accent); font-variant-numeric: tabular-nums; }
.fc-track { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.fc-track i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 60%, #fff)); transition: width .8s cubic-bezier(.3, .7, .3, 1); }
.fc-plus { font-style: normal; font-size: 12px; font-weight: 700; color: #5ad45a; opacity: 0; transition: opacity .3s .5s; text-align: right; }
.fc-plus.show { opacity: 1; }

/* the end */
.fc-awards { display: grid; gap: 10px; }
.fc-award { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(46, 211, 198, .22), rgba(75, 79, 216, .22)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }
.fc-award.none { opacity: .6; }
.fc-medal { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: radial-gradient(circle at 35% 30%, #fff6c8, #ffc531 45%, #d99a00); box-shadow: 0 0 0 3px #fff, 0 6px 12px rgba(0, 0, 0, .35); }
.fc-award small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.fc-award b { display: block; font-size: 19px; }
.fc-award span { color: var(--muted); font-size: 13px; }
.fc-avs { display: flex; }
.fc-avs .avatar + .avatar { margin-left: -10px; }
.fc-splash {
  position: fixed; left: 50%; top: 38%; z-index: 9000; padding: 14px 26px; border-radius: 18px; text-align: center; white-space: nowrap; pointer-events: none;
  background: linear-gradient(160deg, #2ed3c6, #4b4fd8); color: #fff; box-shadow: 0 0 0 5px #fff, 0 18px 40px rgba(0, 0, 0, .5);
  transform: translate(-50%, -50%) rotate(-5deg); animation: fc-splash 1.7s cubic-bezier(.3, 1.3, .5, 1) forwards;
}
.fc-splash b { display: block; font-size: 30px; letter-spacing: 1px; line-height: 1.1; }
.fc-splash small { font-size: 14px; font-weight: 700; }
@keyframes fc-splash {
  0% { transform: translate(-50%, -50%) rotate(-30deg) scale(3); opacity: 0; }
  18%, 78% { transform: translate(-50%, -50%) rotate(-5deg) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -150%) rotate(-5deg) scale(.8); opacity: 0; }
}

/* tutorial props */
.fc-tcard { width: 64cqw; padding: 2.4cqw 4cqw 3cqw; border-radius: 3cqw; background: linear-gradient(170deg, #fffdf5, #f1e7cf); color: #17133a; box-shadow: 0 1cqw 0 rgba(0, 0, 0, .25); z-index: 2; text-align: center; overflow: hidden; }
.fc-tcard::before { content: ''; display: block; height: 1.6cqw; margin: -2.4cqw -4cqw 1.6cqw; background: linear-gradient(90deg, #2ed3c6, #4b4fd8); }
.fc-tcard b { display: block; font-family: Georgia, serif; font-style: italic; font-size: 8cqw; line-height: 1.1; }
.fc-tcard small { display: block; font-size: 3.4cqw; font-weight: 700; color: #6b6590; }
.fc-tdef { width: 70cqw; min-height: 9cqw; padding: 1.6cqw 2.4cqw; border-radius: 2.4cqw; display: flex; align-items: center; gap: 2cqw; background: linear-gradient(170deg, #fff, #f4f8ff);
  color: #17133a; font-weight: 700; font-size: 3.9cqw; line-height: 1.15; box-shadow: 0 .8cqw 0 rgba(0, 0, 0, .2); z-index: 2; }
.fc-tdef i { flex: none; width: 6cqw; height: 6cqw; border-radius: 50%; display: grid; place-items: center; background: #17133a; color: #ffe28a; font-style: normal; font-size: 3.4cqw; }
.fc-tdef.paper { min-height: 16cqw; align-items: flex-start; }
.fc-tdef.paper::after { content: '▍'; color: #4b4fd8; animation: ww-caret .6s steps(2) infinite; }
.fc-tdef.real { background: linear-gradient(170deg, #fffbea, #ffe9a6); box-shadow: 0 0 0 1cqw #ffc531, 0 0 5cqw rgba(255, 197, 49, .6); }
.fc-tdef.house { background: linear-gradient(170deg, #f1f0f7, #e2e0ee); }
.fc-tdef.big { font-size: 4.6cqw; }
.fc-tstk { width: 8cqw; height: 8cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), transparent 45%), var(--c); box-shadow: 0 0 0 .8cqw #fff, 0 1cqw 2cqw rgba(0, 0, 0, .35); z-index: 5; }
.fc-tstk.stamp { animation: fc-tstamp .38s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes fc-tstamp { from { transform: translate(-50%, -50%) scale(2.6) rotate(-30deg); opacity: 0; } }
.fc-tstamp { padding: .8cqw 2.4cqw; border-radius: 1.6cqw; font-weight: 700; font-size: 3.4cqw; white-space: nowrap; z-index: 6; transform: translate(-50%, -50%) rotate(-6deg); animation: fc-tsl .45s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.fc-tstamp.house { background: #e7e4f2; color: #6b6590; box-shadow: inset 0 0 0 .6cqw #c8c3dc; }
.fc-tstamp.real { background: #2f8f5b; color: #fff; box-shadow: 0 0 0 .6cqw #fff; }
.fc-tstamp.by { background: #17133a; color: #ffcc33; box-shadow: 0 0 0 .6cqw #fff; }
@keyframes fc-tsl { from { transform: translate(-50%, -50%) rotate(-30deg) scale(2.4); opacity: 0; } }
.fc-tbtn { padding: 2cqw 6cqw; border-radius: 3cqw; background: var(--accent); color: #2b1d00; font-weight: 700; font-size: 4.4cqw; white-space: nowrap; z-index: 3; }
.fc-tbtn.idea { background: transparent; color: var(--accent); border: .6cqw dashed var(--accent); font-size: 3.8cqw; }
.fc-tphone { width: 30cqw; height: 50cqw; border-radius: 4cqw; background: #17133a; box-shadow: 0 0 0 1cqw #3b3870, 0 2cqw 4cqw rgba(0, 0, 0, .45); z-index: 1; }
.fc-tbubble { padding: 1.4cqw 3cqw; border-radius: 3cqw; background: #fff; color: #17133a; font-weight: 700; font-size: 3.6cqw; white-space: nowrap; z-index: 6; box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, .3); }

/* ================= Turn timer (shared timeouts: web/js/games/turn-timer.js) ================= */
.tmr-clock {
  position: absolute; top: -12px; right: -6px; z-index: 6; display: flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 4px; border-radius: 999px; background: #0c0a22; color: #fff; border: 2px solid var(--ink);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35); font: 700 14px/1 var(--f-body); font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(.6); pointer-events: none; transition: opacity .2s, transform .25s cubic-bezier(.2, .9, .3, 1.4);
}
.tmr-clock.on { opacity: 1; transform: none; }
.tmr-clock b { min-width: 1.3em; text-align: center; }
.tmr-ring { --f: 1; width: 20px; height: 20px; border-radius: 50%; display: block;
  background: conic-gradient(#ffc531 calc(var(--f) * 360deg), rgba(255, 255, 255, .15) 0); -webkit-mask: radial-gradient(circle, transparent 5px, #000 5.5px); mask: radial-gradient(circle, transparent 5px, #000 5.5px); }
.tmr-clock.mine { color: #ff8a8f; border-color: var(--bad); box-shadow: 0 0 0 2px rgba(227, 36, 43, .35), 0 3px 10px rgba(0, 0, 0, .35); animation: tmr-throb 1s ease-in-out infinite; }
.tmr-clock.mine .tmr-ring { background: conic-gradient(var(--bad) calc(var(--f) * 360deg), rgba(255, 255, 255, .15) 0); }
@keyframes tmr-throb { 50% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .tmr-clock.mine { animation: none; } }
.ws-banner > .tmr-clock { top: 4px; right: 4px; } /* that banner clips its overflow */

/* ================= Bidding War ================= */
.bw { display: flex; flex-direction: column; gap: 7px; }
.bw-bar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 3px 2px 5px; }
.bw-bar::-webkit-scrollbar { display: none; }
.bw-chip { flex: none; display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--panel); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.bw-chip.me { background: var(--panel2); }
.bw-chip.turn { box-shadow: 0 0 0 3px var(--c), 0 3px 0 var(--ink); }
.bw-chip.gone { opacity: .4; text-decoration: line-through; }
.bw-chip-txt { display: flex; flex-direction: column; line-height: 1.1; }
.bw-chip-name { font-size: 13px; font-weight: 700; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-chip small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bw-cash { color: var(--accent); font-size: 12px; }
.bw-av { --s: 22px; width: var(--s); height: var(--s); flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink); background: var(--c); color: var(--ink); font-style: normal; font-weight: 800; font-size: calc(var(--s) * .5); line-height: 1; }
.bw-banner { padding: 7px 12px; font-size: 17px; }
.bw-mapwrap { display: flex; justify-content: center; }
.bw-map {
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(10, 1fr); gap: 3px; padding: 5px; aspect-ratio: 8 / 10;
  width: min(100%, calc((100dvh - 318px - var(--safe-top) - var(--safe-bottom)) * .8), 470px); min-width: min(100%, 190px);
  border-radius: 14px; border: 3px solid var(--ink); background: #2b2f63; box-shadow: 0 5px 0 var(--ink);
}
.bw-lot { position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 5px; display: grid; place-items: center; background: #24379d; color: var(--muted); cursor: pointer; }
.bw-map .bw-lot { transition: box-shadow .12s, transform .12s; } /* no background fade: lots change color in one go */
.bw-lot svg { width: 80%; height: 80%; display: block; pointer-events: none; }
.bw-lot.empty { box-shadow: inset 0 0 0 1.5px rgba(255, 243, 214, .07); }
.bw-lbl { font: 600 clamp(8px, 2.5vw, 11px)/1 var(--f-body); color: rgba(185, 193, 236, .62); pointer-events: none; }
.bw-lot.park { background: #2f8f3a; box-shadow: inset 0 -3px 0 rgba(11, 16, 51, .25); }
.bw-lot.lone { background: #6a73b6; box-shadow: inset 0 -3px 0 rgba(11, 16, 51, .3); }
.bw-lot.biz { background: var(--c); box-shadow: inset 0 0 0 2px rgba(11, 16, 51, .4), inset 0 3px 0 rgba(255, 255, 255, .25); }
.bw-lot.hq { z-index: 1; box-shadow: inset 0 0 0 2.5px var(--ink), inset 0 3px 0 rgba(255, 255, 255, .3); }
.bw-size { position: absolute; right: -4px; top: -5px; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 999px; border: 2px solid var(--ink); background: var(--text); color: var(--ink); font: 400 10px/14px var(--f-display); text-align: center; pointer-events: none; }
.bw-lot.bw-mine { outline: 2px dashed var(--accent); outline-offset: -3px; }
.bw-lot.bw-target { z-index: 2; outline: 3px solid var(--accent); outline-offset: -1px; background: #3c4ed0; animation: bw-glow .9s ease-in-out infinite; }
@keyframes bw-glow { 50% { box-shadow: 0 0 18px 5px rgba(255, 183, 3, .8); } }
.bw-map .bw-lot.drop-over { box-shadow: 0 0 0 3px var(--cherry) !important; }
.bw-map .bw-lot.bw-target.drop-over { box-shadow: 0 0 0 3px var(--accent), 0 0 24px rgba(255, 183, 3, .95) !important; transform: scale(1.1); }
.bw-lot.bw-placing { z-index: 2; animation: bw-pulse .8s ease-in-out infinite; }
@keyframes bw-pulse { 50% { box-shadow: 0 0 0 3px var(--accent2), 0 0 18px var(--accent2); } }
.bw-log { min-height: 17px; text-align: center; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-dock { display: flex; flex-direction: column; gap: 7px; }
.bw-hand-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); padding: 0 2px; }
.bw-bag { flex: none; }
.bw-hand { display: flex; gap: 7px; justify-content: center; }
.bw-tile {
  flex: 1 1 0; max-width: 72px; min-width: 0; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 10px; border: 2.5px solid var(--ink); background: linear-gradient(#fffaea, #f2dfb2); color: var(--ink); box-shadow: 0 4px 0 var(--ink);
  transition: transform .15s; cursor: grab;
}
.bw-tile b { font: 400 19px/1 var(--f-display); }
.bw-hand:not(.live) .bw-tile { opacity: .8; box-shadow: 0 2px 0 var(--ink); cursor: default; }
.bw-tile.sel { transform: translateY(-7px); box-shadow: 0 0 0 3px var(--accent), 0 9px 0 var(--ink); }
.bw-tile.stuck { background: linear-gradient(#d7d1c2, #b3ab96); }
.bw-tile.bw-flying { box-sizing: border-box; }
.bw-hint { display: flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 700; color: #3d3770; white-space: nowrap; max-width: 100%; overflow: hidden; }
.bw-hint i { width: 8px; height: 8px; flex: none; border-radius: 50%; border: 1.5px solid var(--ink); }
.bw-hint.war { color: var(--cherry); }
.bw-hint.open { color: #0e7a75; }
.bw-hint.stuck { color: #5d5a52; }
.bw-ticker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bw-tick { position: relative; display: flex; align-items: center; gap: 5px; min-width: 0; padding: 4px 6px 4px 4px; border-radius: 10px; border: 2px solid var(--ink); background: var(--panel); color: var(--text); box-shadow: 0 3px 0 var(--ink); text-align: left; }
.bw-tick-ic, .bw-row-ic { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 7px; border: 2px solid var(--ink); background: var(--c); }
.bw-tick-ic svg { width: 22px; height: 22px; display: block; }
.bw-tick-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.bw-tick-txt b { font-size: 13px; font-variant-numeric: tabular-nums; }
.bw-tick-txt small { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-tick.closed { opacity: .5; }
.bw-tick.closed .bw-tick-ic { filter: grayscale(.8); }
.bw-mod { position: absolute; top: -7px; right: -5px; padding: 0 4px; border-radius: 999px; border: 1.5px solid var(--ink); font-style: normal; font-size: 9px; line-height: 14px; }
.bw-mod.up { background: var(--good); color: var(--ink); }
.bw-mod.down { background: var(--cherry); color: #fff; }
.bw-stock { display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 16px; border: 2.5px solid var(--ink); background: var(--panel); box-shadow: 0 4px 0 var(--ink); }
.bw-stock-head { display: flex; justify-content: space-between; padding: 0 4px; font-size: 14px; color: var(--muted); }
.bw-stock-head b { color: var(--accent); font-variant-numeric: tabular-nums; }
.bw-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 11px; background: var(--bg2); }
.bw-row.on { box-shadow: 0 0 0 2px var(--c); }
.bw-row-ic { width: 32px; height: 32px; }
.bw-row-ic svg { width: 27px; height: 27px; display: block; }
.bw-row-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.bw-row-txt b { font-size: 14px; }
.bw-row-txt small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-price { position: relative; font: 400 14px/1 var(--f-display); color: var(--accent); white-space: nowrap; }
.bw-price .bw-mod { top: -12px; right: -8px; font-family: var(--f-body); }
.bw-step { display: flex; align-items: center; gap: 4px; }
.bw-step button { width: 34px; height: 34px; padding: 0; border-radius: 9px; border: 2px solid var(--ink); background: var(--accent); color: var(--ink); font-weight: 800; font-size: 19px; box-shadow: 0 2px 0 var(--ink); }
.bw-step button:active { transform: translateY(2px); box-shadow: none; }
.bw-step button[disabled] { opacity: .3; }
.bw-step b { width: 14px; text-align: center; }
.bw-open { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.bw-open-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 6px 3px 5px; border-radius: 12px; border: 2.5px solid var(--ink); border-top: 6px solid var(--c); background: var(--panel2); color: var(--text); box-shadow: 0 4px 0 var(--ink); text-align: center; }
.bw-open-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.bw-open-btn b { display: block; font-size: 13px; line-height: 1.1; }
.bw-open-btn small { display: block; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.bw-open-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 9px; border: 2px solid var(--ink); background: var(--c); }
.bw-open-ic svg { width: 31px; height: 31px; display: block; }
.bw-cert { display: grid; place-items: center; border-radius: 5px; border: 2px solid var(--ink); background: var(--c); box-shadow: 0 2px 0 var(--ink); }
.bw-cert svg { width: 18px; height: 18px; }
.bw-war { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 12px; background: rgba(6, 9, 34, .8); }
.bw-war-box { position: relative; width: min(100%, 400px); max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 18px 12px 14px; border-radius: 20px; border: 3px solid var(--ink); background: var(--bg2); box-shadow: 0 6px 0 var(--ink); }
.bw-war-box::before { content: ''; position: absolute; inset: 0 0 auto; height: 8px; background: var(--stripe); }
.bw-war-box h2 { margin: 2px 0 0; text-align: center; font: 400 26px/1 var(--f-display); color: var(--accent); }
.bw-war-sub, .bw-war-note { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
.bw-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: stretch; }
.bw-vs { align-self: center; font: 400 18px var(--f-display); color: var(--accent2); }
.bw-side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 8px 6px 10px; border-radius: 14px; border: 2.5px solid var(--ink); background: var(--panel); box-shadow: 0 4px 0 var(--ink); text-align: center; cursor: pointer; transition: box-shadow .15s, background .15s; }
.bw-side.pick { background: color-mix(in srgb, var(--c) 32%, var(--panel)); box-shadow: 0 0 0 3px var(--c), 0 4px 0 var(--ink); }
.bw-side-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; border: 2.5px solid var(--ink); background: var(--c); }
.bw-side-ic svg { width: 40px; height: 40px; display: block; }
.bw-side > b { font-size: 15px; }
.bw-side > small { font-size: 11px; color: var(--muted); }
.bw-side > small.bw-own { color: var(--accent); font-weight: 700; }
.bw-pile { display: none; }
.bw-pile.shown { position: relative; display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; width: 100%; height: 132px; margin-top: 5px; padding: 3px 0; overflow: hidden; border-radius: 10px; background: rgba(11, 16, 51, .5); }
.bw-pile-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-top: 3px solid var(--ink); background: repeating-linear-gradient(0deg, #4cb944 0 9px, #2f8a2a 9px 11px); }
.bw-pile-tot { position: absolute; top: 4px; left: 0; right: 0; z-index: 2; font: 400 15px var(--f-display); color: var(--text); text-shadow: 0 2px 0 var(--ink); }
.bw-bill { position: relative; z-index: 1; display: flex; align-items: center; gap: 3px; padding: 1px 6px 1px 1px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--text); color: var(--ink); font-size: 10px; font-weight: 700; }
.bw-stamp { position: absolute; top: auto; bottom: 64px; left: 50%; z-index: 3; padding: 2px 8px; border: 3px solid currentColor; border-radius: 8px; background: rgba(255, 243, 214, .94); font: 400 15px var(--f-display); white-space: nowrap; transform: translate(-50%, -50%) rotate(-14deg); pointer-events: none; }
.bw-stamp:empty { display: none; }
.bw-side.win { box-shadow: 0 0 0 3px var(--accent), 0 0 26px rgba(255, 183, 3, .7), 0 4px 0 var(--ink); }
.bw-side.win .bw-stamp { color: #2b7f26; }
.bw-side.lose { filter: saturate(.45) brightness(.82); }
.bw-side.lose .bw-stamp { color: var(--cherry); }
.bw-deal { align-self: center; display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 12px 6px 6px; border-radius: 14px; border: 2.5px solid var(--ink); background: var(--accent2); color: var(--text); box-shadow: 0 4px 0 var(--ink); transform: rotate(-2deg); text-align: left; }
.bw-deal span { display: flex; flex-direction: column; line-height: 1.15; }
.bw-deal b { font: 400 18px/1.1 var(--f-display); }
.bw-deal small { font-size: 11px; }
.bw-open-txt { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.bw-war-body { display: flex; flex-direction: column; gap: 8px; }
.bw-amt-row { display: flex; align-items: baseline; justify-content: center; gap: 6px; color: var(--muted); font-size: 13px; }
.bw-amt { font: 400 34px/1 var(--f-display); color: var(--accent); font-variant-numeric: tabular-nums; }
.bw-slider { width: 100%; height: 30px; margin: 0; accent-color: var(--accent); }
.bw-chipsrow { display: flex; justify-content: center; gap: 8px; }
.bw-coin { width: 54px; height: 54px; padding: 0; border-radius: 50%; border: 3px solid var(--ink); background: radial-gradient(circle at 35% 30%, #ffe08a, #ffb703 58%, #e09a00); color: var(--ink); font: 400 14px var(--f-display); box-shadow: 0 4px 0 var(--ink), inset 0 0 0 4px rgba(255, 255, 255, .35); }
.bw-coin:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink), inset 0 0 0 4px rgba(255, 255, 255, .35); }
.bw-coin.clear { background: var(--panel2); color: var(--text); font: 700 12px var(--f-body); box-shadow: 0 4px 0 var(--ink); }
.bw-war-body .row .btn { margin-bottom: 0; }
.bw-who { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bw-who span { display: flex; align-items: center; gap: 2px; opacity: .55; }
.bw-who span.done { opacity: 1; }
.bw-who small { font-weight: 800; color: var(--good); }
.bw-pays { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 12px; }
.bw-pays small { width: 100%; text-align: center; color: var(--muted); }
.bw-pays span { display: flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border-radius: 999px; background: var(--panel); }
.bw-news { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 16px; background: rgba(6, 9, 34, .62); }
.bw-paper { width: min(100%, 330px); padding: 12px 14px 14px; border-radius: 6px; border: 3px solid var(--ink); background: #f7f0dc; color: #1d1a14; box-shadow: 0 7px 0 var(--ink); transform: rotate(-3deg); }
.bw-mast { padding-bottom: 5px; border-bottom: 4px double #1d1a14; text-align: center; font: 400 21px/1 var(--f-display); }
.bw-kicker { width: max-content; margin: 10px auto 2px; padding: 3px 14px 1px; border: 2.5px solid var(--ink); background: var(--good); color: #fff; font: 400 26px/1 var(--f-display); text-shadow: 0 2px 0 var(--ink); transform: rotate(-4deg); }
.bw-paper.bust .bw-kicker { background: var(--cherry); }
.bw-paper h3 { margin: 8px 0; text-align: center; font-size: 22px; font-weight: 800; line-height: 1.12; text-wrap: balance; }
.bw-story { display: flex; align-items: center; gap: 9px; padding-top: 8px; border-top: 1.5px solid #1d1a14; font-size: 13px; }
.bw-story > i { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 10px; border: 2px solid var(--ink); background: var(--c); }
.bw-story svg { width: 36px; height: 36px; display: block; }
.bw-story b { display: block; margin-top: 2px; font-size: 16px; }
.bw-bell { display: flex; flex-direction: column; gap: 6px; padding: 18px 24px; border-radius: 20px; border: 3px solid var(--ink); background: var(--bg2); box-shadow: 0 6px 0 var(--ink); text-align: center; }
.bw-bell > b { font: 400 28px var(--f-display); color: var(--accent); }
.bw-bell small { color: var(--muted); }
.bw-bell span b { color: var(--accent); }
.bw-sheet-head { display: flex; align-items: center; gap: 12px; }
.bw-sheet-head > i { width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 2.5px solid var(--ink); background: var(--c); }
.bw-sheet-head svg { width: 44px; height: 44px; display: block; }
.bw-sheet-head small { color: var(--muted); }
.bw-table { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.bw-table span { display: flex; flex-direction: column; align-items: center; padding: 4px; border-radius: 8px; background: var(--panel); font-size: 12px; }
.bw-table span.on { box-shadow: 0 0 0 2px var(--accent); }
.bw-table small { font-size: 10px; color: var(--muted); }
.bw-holders { display: flex; flex-wrap: wrap; gap: 6px; }
.bw-holders span { display: flex; align-items: center; gap: 5px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--panel); font-size: 13px; }
@media (max-height: 680px) { .bw-banner { padding: 5px 10px; font-size: 15px; } .bw-banner small { font-size: 12px; } .bw-tile { height: 50px; } .bw-tile b { font-size: 17px; } .bw-bar { padding-bottom: 3px; } .bw-chip { padding-top: 1px; padding-bottom: 1px; } }
@media (prefers-reduced-motion: reduce) { .bw-lot.bw-target, .bw-lot.bw-placing { animation: none; } .bw-tile { transition: none; } }
/* Bidding War walkthrough props (stage units: 300 × 190; 3 units = 1cqw) */
.tut-bw-lot { width: 9.3cqw; aspect-ratio: 1; display: grid; place-items: center; border-radius: 1.6cqw; background: #24379d; box-shadow: inset 0 0 0 .4cqw rgba(255, 243, 214, .08); }
.tut-bw-lot span { font: 600 2.8cqw var(--f-body); color: rgba(185, 193, 236, .7); }
.tut-bw-lot svg { width: 82%; height: 82%; display: block; }
.tut-bw-lot.park { background: #2f8f3a; }
.tut-bw-lot.lone { background: #6a73b6; }
.tut-bw-lot.biz { background: var(--c); box-shadow: inset 0 0 0 .6cqw rgba(11, 16, 51, .45); }
.tut-bw-lot.glow.empty { outline: .8cqw dashed var(--accent); animation: target-glow .9s ease-in-out infinite; }
.tut-bw-tile { z-index: 5; width: 13cqw; height: 15cqw; display: grid; place-items: center; border-radius: 2cqw; border: .8cqw solid var(--ink); background: linear-gradient(#fffaea, #f2dfb2); box-shadow: 0 1.2cqw 0 var(--ink); }
.tut-bw-tile b { font: 400 5.6cqw/1 var(--f-display); color: var(--ink); }
.tut-bw-pick { width: 40cqw; display: flex; align-items: center; gap: 1.5cqw; padding: 1cqw; border-radius: 2cqw; border: .6cqw solid var(--ink); border-left: 2cqw solid var(--c); background: var(--panel2); transition: opacity .2s; }
.tut-bw-pick svg { width: 8cqw; height: 8cqw; flex: none; border-radius: 1.5cqw; background: var(--c); }
.tut-bw-pick b { font-size: 3.8cqw; white-space: nowrap; }
.tut-bw-tag { display: flex; align-items: center; gap: 2cqw; padding: 1.5cqw 3cqw 1.5cqw 1.5cqw; border-radius: 3cqw; border: .7cqw solid var(--ink); background: var(--panel); box-shadow: 0 1cqw 0 var(--ink); }
.tut-bw-tag svg { width: 11cqw; height: 11cqw; border-radius: 2cqw; background: var(--c); }
.tut-bw-tag b { font: 400 7cqw/1 var(--f-display); color: var(--accent); }
.tut-bw-row { width: 70cqw; display: flex; align-items: center; gap: 2cqw; padding: 1.2cqw 1.6cqw; border-radius: 2.6cqw; border: .6cqw solid var(--ink); background: var(--bg2); }
.tut-bw-row.on { box-shadow: 0 0 0 .7cqw var(--c); }
.tut-bw-row i { width: 9cqw; height: 9cqw; flex: none; border-radius: 1.8cqw; background: var(--c); }
.tut-bw-row i svg { width: 100%; height: 100%; display: block; }
.tut-bw-row > b { flex: 1; font-size: 4cqw; white-space: nowrap; }
.tut-bw-row > span { font: 400 4cqw var(--f-display); color: var(--accent); }
.tut-bw-row em { width: 7cqw; height: 7cqw; display: grid; place-items: center; border-radius: 1.6cqw; border: .5cqw solid var(--ink); background: var(--accent); color: var(--ink); font: 800 4.6cqw/1 var(--f-body); font-style: normal; }
.tut-bw-row strong { width: 3cqw; text-align: center; font-size: 4.4cqw; }
.tut-bw-cash { font-size: 4.6cqw; color: var(--muted); white-space: nowrap; }
.tut-bw-cash b { color: var(--accent); }
.tut-bw-btn { padding: 1.6cqw 4cqw; border-radius: 3cqw; border: .7cqw solid var(--ink); background: var(--accent); color: var(--ink); font-weight: 800; font-size: 4.4cqw; box-shadow: 0 1cqw 0 var(--ink); white-space: nowrap; transition: opacity .2s; }
.tut-bw-side { width: 27cqw; height: 34cqw; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-top: 1.5cqw; border-radius: 3cqw; border: .7cqw solid var(--ink); background: var(--panel); box-shadow: 0 1.2cqw 0 var(--ink); }
.tut-bw-side > i { width: 10cqw; height: 10cqw; border-radius: 2cqw; border: .6cqw solid var(--ink); background: var(--c); }
.tut-bw-side > i svg { width: 100%; height: 100%; display: block; }
.tut-bw-stack { position: absolute; left: 2cqw; right: 2cqw; bottom: 0; height: 0; border-top: .7cqw solid var(--ink); background: repeating-linear-gradient(0deg, #4cb944 0 2.4cqw, #2f8a2a 2.4cqw 3cqw); }
.tut-bw-side > b { position: absolute; bottom: 1cqw; left: 0; right: 0; z-index: 1; text-align: center; font: 400 4.6cqw var(--f-display); color: var(--text); text-shadow: 0 .6cqw 0 var(--ink); }
.tut-bw-side.win { box-shadow: 0 0 0 1cqw var(--accent), 0 0 6cqw rgba(255, 183, 3, .7); }
.tut-bw-side.lose { filter: saturate(.4) brightness(.8); }
.tut-bw-deal { z-index: 6; padding: 1cqw 3cqw .6cqw; border-radius: 2.4cqw; border: .7cqw solid var(--ink); background: var(--accent2); color: var(--text); font: 400 4.4cqw var(--f-display); white-space: nowrap; transform: translate(-50%, -50%) rotate(-6deg); }
.tut-bw-paper { width: 64cqw; display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; padding: 2.4cqw 3cqw; border-radius: 1cqw; border: .8cqw solid var(--ink); background: #f7f0dc; color: #1d1a14; box-shadow: 0 1.6cqw 0 var(--ink); }
.tut-bw-paper small { align-self: stretch; padding-bottom: .8cqw; border-bottom: 1cqw double #1d1a14; text-align: center; font: 400 4.6cqw/1 var(--f-display); }
.tut-bw-paper > b { padding: .6cqw 3cqw .2cqw; border: .6cqw solid var(--ink); background: var(--good); color: #fff; font: 400 6.4cqw/1 var(--f-display); text-shadow: 0 .5cqw 0 var(--ink); transform: rotate(-4deg); }
.tut-bw-paper.bust > b { background: var(--cherry); }
.tut-bw-paper > span { text-align: center; font-size: 4.6cqw; font-weight: 800; line-height: 1.15; }
.tut-bw-paper em { display: flex; align-items: center; gap: 1.6cqw; font-style: normal; font-size: 3.8cqw; font-weight: 700; }
.tut-bw-paper em svg { width: 8cqw; height: 8cqw; border-radius: 1.6cqw; border: .5cqw solid var(--ink); background: var(--c); }
.tut-bw-who { width: 62cqw; display: flex; align-items: center; gap: 2.4cqw; padding: 1.2cqw 3cqw 1.2cqw 1.2cqw; border-radius: 99px; background: var(--panel); border: .6cqw solid var(--ink); }
.tut-bw-who.top { box-shadow: 0 0 0 1cqw var(--accent), 0 0 6cqw rgba(255, 183, 3, .6); }
.tut-bw-who i { width: 7cqw; height: 7cqw; border-radius: 50%; border: .5cqw solid var(--ink); background: var(--c); }
.tut-bw-who span { flex: 1; font-size: 4.4cqw; font-weight: 700; }
.tut-bw-who b { font: 400 4.6cqw var(--f-display); color: var(--accent); }
.tut-bw-bell { padding: 1.2cqw 4cqw .8cqw; border-radius: 3cqw; border: .7cqw solid var(--ink); background: var(--accent2); color: var(--text); font: 400 5cqw var(--f-display); box-shadow: 0 1cqw 0 var(--ink); white-space: nowrap; }

/* ================= Piggy Bank ================= */

.pg-root { gap: 8px; }
.pg-banner { font-size: 17px; padding: 8px 12px; }
.pg-banner small { font-size: 12.5px; }
/* coins: var(--cs) is a quarter's size; --s scales each coin to its real size */
.pg-coin { position: relative; flex: none; width: calc(var(--cs, 24px) * var(--s, 1)); height: calc(var(--cs, 24px) * var(--s, 1)); }
.pg-coin > svg { width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
.pg-fly { position: fixed; z-index: 80; pointer-events: none; margin: 0; }
.pg-artfly { width: var(--a, 46px); height: var(--a, 46px); filter: drop-shadow(3px 4px 0 rgba(11, 16, 51, .35)); }
.pg-artfly svg { width: 100%; height: 100%; display: block; }
.drag-ghost.pg-coin { --cs: 40px; }
/* cards */
.pcard.pg-card { overflow: hidden; border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.pcard.pg-card > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.pcard.pg-coincard { background: linear-gradient(170deg, #fffaf0, #fff3d6 55%, #f2ddb2); }
.pcard.pg-c-magnet { background: radial-gradient(circle at 50% 42%, #ff6a5f, #e3242b 55%, #a8141b); }
.pcard.pg-c-hammer { background: radial-gradient(circle at 50% 42%, #ff9a4f, #fb6107 55%, #c44400); }
.pcard.pg-c-butter { background: radial-gradient(circle at 50% 42%, #a86fd0, #7b3fa0 55%, #55246f); }
.pcard.pg-c-lock { background: radial-gradient(circle at 50% 42%, #3d55c4, #1a2a86 55%, #0d1650); }
.pcard.pg-back { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 3px, transparent 3px 9px), linear-gradient(160deg, #24379d, #0d1650); }
.pcard.pg-card.pg-fly, .pcard.pg-card.pc-fly { --w: 44px; }
.pg-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 47%, transparent 58%) 0 0 / 300% 100% no-repeat; animation: pg-sheen 3.2s ease-in-out infinite; }
@keyframes pg-sheen { 0%, 55% { background-position: 120% 0; } 100% { background-position: -60% 0; } }
.hand .pcard.pg-card.sel { transform: translateY(-22px); box-shadow: 0 0 0 3px var(--accent), 0 6px 0 var(--ink); }
.hand .pcard.pg-card.dim { filter: brightness(.75) saturate(.8); }
.pg-handwrap { padding: 24px 4px 14px; }

/* the spots round the table */
.pg-others { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 8px; }
.pg-spot {
  --cs: 21px; position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 6px 7px 7px; border-radius: 16px;
  background: var(--panel); border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); transition: box-shadow .2s, transform .2s, opacity .3s, filter .3s;
}
.pg-spot.turn { box-shadow: 0 0 0 3px var(--c), 0 4px 0 var(--ink); }
.pg-spot.gone { opacity: .45; filter: grayscale(.8); }
.pg-spot.pg-can, .pg-spot.drop-over { box-shadow: 0 0 0 3px var(--accent), 0 0 18px rgba(255, 183, 3, .55), 0 4px 0 var(--ink) !important; }
.pg-spot.pg-can:not(.drop-over) { animation: pg-pulse 1.1s ease-in-out infinite; }
.pg-spot.cd-nope, .pg-purse.cd-nope, .pg-pig.cd-nope, .pg-fountain.cd-nope, .pg-coin.cd-nope { box-shadow: 0 0 0 3px var(--bad), 0 0 18px rgba(227, 36, 43, .55) !important; }
.pg-head { display: flex; align-items: center; gap: 5px; min-width: 0; }
.pg-av { flex: none; }
.pg-av .avatar { border: 2px solid var(--ink); }
.pg-botav { background: var(--c); padding: 2px; }
.pg-botav svg { width: 100%; height: 100%; display: block; }
.pg-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-cnt { flex: none; display: flex; align-items: center; gap: 2px; color: var(--muted); font-size: 11px; font-weight: 700; }
.pg-fan { position: relative; width: 16px; height: 16px; }
.pg-fan i { position: absolute; left: 4px; top: 1px; width: 9px; height: 13px; border-radius: 2px; transform-origin: 50% 120%; rotate: calc(var(--k) * 14deg);
  background: linear-gradient(160deg, #3d55c4, #0d1650); border: 1.5px solid #fff3d6; }
.pg-score { flex: none; font: 400 13px/1 var(--f-display); color: var(--accent); }
.pg-body { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.pg-bank { flex: none; display: flex; align-items: flex-end; gap: 3px; min-width: 0; }
.pg-pig { position: relative; width: 44px; flex: none; border-radius: 12px; transition: box-shadow .2s; }
.pg-pig svg { width: 100%; height: auto; display: block; pointer-events: none; }
.pg-pign { position: absolute; left: -4px; top: -2px; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 999px; display: grid; place-items: center; font: 400 11px/1 var(--f-display); color: var(--ink); background: var(--accent); border: 2px solid var(--ink); pointer-events: none; z-index: 2; }
.pg-pign:empty { display: none; }
.pg-sets { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1px; max-width: 58px; }
.pg-stack3 { --cs: 15px; position: relative; display: flex; flex-direction: column-reverse; align-items: center; }
.pg-stack3 .pg-coin { --s: 1 !important; margin-top: -10px; }
.pg-stack3 .pg-coin:last-child { margin-top: 0; }
.pg-purse {
  position: relative; flex: 1; min-width: 0; min-height: calc(var(--cs) * 1.25 + 14px); padding: 9px 6px 5px; border-radius: 8px 8px 14px 14px;
  background: radial-gradient(ellipse at 50% 0%, #6e4526, #4a2c17 70%); border: 2px solid var(--ink); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .35);
  transition: box-shadow .2s, border-color .2s;
}
.pg-clasp { position: absolute; left: 50%; top: -5px; translate: -50% 0; width: 22px; height: 8px; border-radius: 6px 6px 3px 3px; background: linear-gradient(#ffd166, #e09400); border: 2px solid var(--ink); }
.pg-coins { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 2px; }
.pg-purse.empty .pg-coins::before { content: 'empty purse'; color: rgba(255, 243, 214, .4); font-size: 11px; font-weight: 600; font-style: italic; }
.pg-more { position: absolute; right: 4px; bottom: 2px; font-size: 11px; font-weight: 800; color: var(--accent); }
.pg-lockb { position: absolute; right: -9px; top: -12px; width: 28px; height: 28px; display: none; filter: drop-shadow(2px 2px 0 rgba(11, 16, 51, .5)); pointer-events: none; z-index: 3; }
.pg-lockb svg { width: 100%; height: 100%; display: block; }
.pg-purse.locked { border-color: var(--accent); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .35), 0 0 0 2px var(--accent); }
.pg-purse.locked .pg-lockb { display: block; }
.pg-purse.cracked::after {
  content: ''; position: absolute; inset: -6px; pointer-events: none; z-index: 4;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff3d6' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M50 25L38 8L30 14M50 25L66 4M50 25L72 30L86 22M50 25L44 44L32 47M50 25L58 46'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: pg-crack .25s ease-out;
}
@keyframes pg-crack { from { opacity: 0; transform: scale(.4); } }
.pg-purse.pg-can, .pg-purse.drop-over, .pg-pig.pg-can, .pg-pig.drop-over { box-shadow: 0 0 0 3px var(--accent), 0 0 18px rgba(255, 183, 3, .55) !important; }
.pg-pig.ready { animation: pg-wiggle 1.4s ease-in-out infinite; box-shadow: 0 0 0 2px var(--accent), 0 0 14px rgba(255, 183, 3, .55); cursor: pointer; }
.pg-coin.sel { outline: 3px solid var(--accent); outline-offset: 1px; border-radius: 50%; }
.pg-coin.pg-tug { animation: pg-tug .35s ease-in-out infinite; }
.pg-flag { position: absolute; top: -11px; right: 10px; z-index: 5; display: none; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border-radius: 999px;
  font-size: 11px; font-weight: 800; white-space: nowrap; border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.pg-flag.wait { display: flex; background: var(--accent); color: var(--ink); }
.pg-flag.good { display: flex; background: var(--good); color: var(--ink); padding-left: 8px; }
.pg-flag.gone { display: flex; background: var(--panel2); color: var(--muted); padding-left: 8px; }
.pg-ring { --p: 100%; width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(var(--ink) var(--p), rgba(11, 16, 51, .2) 0); animation: pg-ring var(--ms, 6s) linear forwards; }
@property --p { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@keyframes pg-ring { from { --p: 100%; } to { --p: 0%; } }
.pg-aimer { position: absolute; z-index: 6; width: var(--a, 46px); height: var(--a, 46px); translate: -50% -50%; pointer-events: none; transform-origin: 60% 80%;
  filter: drop-shadow(3px 4px 0 rgba(11, 16, 51, .4)); animation: pg-hover .5s ease-in-out infinite alternate; }
.pg-aimer svg { width: 100%; height: 100%; display: block; }
.pg-aimer.hammer { animation: pg-raise .6s ease-in-out infinite alternate; }
.pg-slam { position: absolute; left: 50%; top: 50%; z-index: 7; display: flex; flex-direction: column; align-items: center; pointer-events: none; transform: translate(-50%, -50%) rotate(-6deg); }
.pg-slamlock { width: 54px; height: 54px; filter: drop-shadow(3px 4px 0 rgba(11, 16, 51, .45)); }
.pg-slamlock svg { width: 100%; height: 100%; display: block; }
.pg-stamp { margin-top: -6px; padding: 3px 10px; border-radius: 8px; background: var(--cherry); color: #fff3d6; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
  font: 400 15px/1.1 var(--f-display); white-space: nowrap; }
/* my own spot */
/* three across: name on top, pig and sets, then the purse full width */
.pg-others.tight .pg-spot { --cs: 19px; padding: 5px 6px 6px; }
.pg-others.tight .pg-head { flex-wrap: wrap; row-gap: 1px; column-gap: 4px; }
.pg-others.tight .pg-name { flex: 1 1 calc(100% - 30px); font-size: 12.5px; }
.pg-others.tight .pg-cnt { order: 3; }
.pg-others.tight .pg-score { order: 4; margin-left: auto; }
.pg-others.tight .pg-body { flex-direction: column; gap: 6px; }
.pg-others.tight .pg-pig { width: 38px; }
.pg-others.tight .pg-sets { max-width: none; }
.pg-others.tight .pg-purse { min-height: calc(var(--cs) * 1.25 + 12px); padding: 8px 4px 4px; }
.pg-others.tight .pg-slamlock { width: 40px; height: 40px; }
.pg-others.tight .pg-stamp { font-size: 11px; padding: 2px 6px; }
.pg-spot.me { --cs: 30px; padding: 8px 10px 9px; background: var(--panel2); }
.pg-spot.me .pg-name { font-size: 14px; }
.pg-spot.me .pg-score { font-size: 16px; }
.pg-spot.me .pg-pig { width: 74px; cursor: pointer; }
.pg-spot.me .pg-pign { min-width: 22px; height: 22px; font-size: 14px; }
.pg-spot.me .pg-sets { max-width: 92px; }
.pg-spot.me .pg-stack3 { --cs: 20px; }
.pg-spot.me .pg-stack3 .pg-coin { margin-top: -14px; }
.pg-spot.me .pg-stack3 .pg-coin:last-child { margin-top: 0; }
.pg-spot.me .pg-purse { min-height: 64px; padding: 11px 8px 7px; }
.pg-spot.me .pg-coins { gap: 2px 3px; }
.pg-spot.me .pg-coin { touch-action: none; cursor: grab; }
.pg-spot.me .pg-lockb { width: 34px; height: 34px; }
/* the middle: the deck and the Fountain */
.pg-middle { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 12px 12px; border-radius: 22px;
  background: radial-gradient(ellipse at 50% 30%, #24379d, #142070 75%); border: 2.5px solid var(--ink); box-shadow: inset 0 0 0 3px rgba(255, 183, 3, .18), 0 4px 0 var(--ink); }
.pg-deck { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 700; touch-action: none; cursor: pointer; }
.pg-stack { position: relative; width: 52px; aspect-ratio: 5 / 7; }
.pg-stack > .pcard { --w: 52px; position: absolute; inset: 0; }
.pg-stack > .pg-u2 { translate: 4px 4px; filter: brightness(.7); }
.pg-stack > .pg-u1 { translate: 2px 2px; filter: brightness(.85); }
.pg-deck.empty .pg-stack { opacity: .25; }
.pg-deck.live { color: var(--accent); }
.pg-deck.live .pg-stack > .pcard:last-child { box-shadow: 0 0 0 3px var(--accent), 0 0 18px rgba(255, 183, 3, .6); animation: cd-bob 1.6s ease-in-out infinite; }
.pg-fountain { --cs: 22px; position: relative; flex: 1; max-width: 230px; height: 96px; border-radius: 50%; cursor: pointer;
  background: radial-gradient(ellipse at 50% 30%, #fff3d6, #d8c7a2 60%, #a8946c); border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.pg-water { position: absolute; inset: 9px 10px 10px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(11, 16, 51, .55);
  background: radial-gradient(ellipse at 50% 35%, #49d6cd, #1aa6a0 55%, #0e7f7a); box-shadow: inset 0 5px 0 rgba(11, 16, 51, .25); }
.pg-water i { position: absolute; left: 50%; top: 50%; width: 40%; aspect-ratio: 2; translate: -50% -50%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); animation: pg-ripple 3.2s ease-out infinite; }
.pg-water i + i { animation-delay: 1.6s; }
.pg-fcoins { position: absolute; inset: 9px 10px 10px; pointer-events: none; }
.pg-fcoins > * { position: absolute; translate: -50% -50%; rotate: var(--r, 0deg); pointer-events: none; }
.pg-fcoins > .pg-coin { opacity: .72; filter: saturate(.75) brightness(.9); }
.pg-fcoins > .pg-coin.top { --cs: 34px; left: 50% !important; top: 48% !important; rotate: 0deg; opacity: 1; filter: none; z-index: 3; pointer-events: auto; touch-action: none; animation: pg-float 2.4s ease-in-out infinite; }
.pg-fountain.live .pg-coin.top { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 50%; box-shadow: 0 0 18px rgba(255, 183, 3, .7); }
.pg-fountain.live { box-shadow: 0 0 0 3px var(--accent), 0 4px 0 var(--ink); }
.pg-fountain.dump, .pg-fountain.pg-can, .pg-fountain.drop-over { box-shadow: 0 0 0 3px var(--accent), 0 0 20px rgba(255, 183, 3, .5), 0 4px 0 var(--ink) !important; }
.pcard.pg-fcard { --w: 26px; opacity: .6; border-width: 1.5px; box-shadow: none; filter: saturate(.7); }
.pg-fn { position: absolute; left: 50%; bottom: -10px; translate: -50% 0; z-index: 4; padding: 1px 9px; border-radius: 999px; background: var(--ink); color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
/* the bar under the hand */
.pg-bar { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.pg-pips { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--muted); }
.pg-pips i { width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid var(--ink); background: rgba(255, 243, 214, .15); }
.pg-pips i.on { background: var(--accent); box-shadow: 0 2px 0 var(--ink); }
.pg-pips span { margin-left: 3px; }
.pg-hint { color: var(--muted); font-size: 13px; font-weight: 600; }
.pg-end { white-space: nowrap; }
/* the Lock button, Butterfingers and the Magnet's coin picker */
.pg-lockbox { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 45%, rgba(227, 36, 43, .45), rgba(11, 16, 51, .88) 70%); }
.pg-lbcard { width: min(340px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 16px 14px; border-radius: 22px; text-align: center;
  background: var(--bg2); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink), inset 0 6px 0 var(--cherry); }
.pg-lbwhat { --cs: 46px; display: flex; align-items: center; gap: 6px; }
.pg-lbart { width: 54px; height: 54px; animation: pg-hover .4s ease-in-out infinite alternate; }
.pg-lbart.ham { animation: pg-raise .5s ease-in-out infinite alternate; }
.pg-lbart svg, .pg-lbicon svg, .pg-sheetart svg { width: 100%; height: 100%; display: block; }
.pg-lbtitle { font-size: 17px; line-height: 1.25; }
.pg-lockbtn { position: relative; width: 168px; height: 168px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(circle at 40% 30%, #ffd166, #ffb703 60%, #e09400); border: 4px solid var(--ink); box-shadow: 0 8px 0 var(--ink), 0 0 40px rgba(255, 183, 3, .55);
  color: var(--ink); cursor: pointer; animation: pg-throb .8s ease-in-out infinite; }
.pg-lockbtn:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--ink); }
.pg-lbicon { width: 74px; height: 74px; }
.pg-lockbtn b { font: 400 19px/1 var(--f-display); }
.pg-lbring { --p: 100%; position: absolute; inset: -12px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(#fff3d6 var(--p), rgba(255, 243, 214, .12) 0); -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); mask: radial-gradient(circle, transparent 62%, #000 63%);
  animation: pg-ring var(--ms, 6s) linear forwards; }
.pg-lbsub { color: var(--muted); font-weight: 600; }
.pg-lbsecs { display: inline-block; min-width: 1.4em; color: var(--accent); font: 400 15px var(--f-display); }
.pg-sheet { position: fixed; inset: 0; z-index: 92; display: flex; align-items: flex-end; justify-content: center; padding: 12px; background: rgba(11, 16, 51, .7); }
.pg-sheetbox { width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 22px; background: var(--bg2); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink), inset 0 6px 0 var(--accent); }
.pg-sheethead { display: flex; align-items: center; gap: 10px; }
.pg-sheethead b { font-size: 16px; line-height: 1.25; }
.pg-sheetart { flex: none; width: 46px; height: 46px; }
.pg-pickrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pg-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 6px; min-width: 76px; border-radius: 16px; background: var(--panel); border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); cursor: pointer; }
.pg-pick:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.pg-pick small { font-size: 12px; font-weight: 700; color: var(--muted); }
.pg-timebar { height: 8px; border-radius: 4px; background: rgba(255, 243, 214, .15); overflow: hidden; }
.pg-timebar i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; animation: pg-bar var(--ms, 15s) linear forwards; }
@keyframes pg-bar { to { transform: scaleX(0); } }
/* the count at the end */
.pg-finalbox:empty { display: none; }
.pg-final { display: flex; flex-direction: column; gap: 5px; padding: 12px; border-radius: 20px; background: var(--wood); border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.pg-ftitle { text-align: center; font: 400 18px var(--f-display); color: var(--accent); }
.pg-frow { display: grid; grid-template-columns: minmax(0, 1fr) 56px 56px 60px; gap: 6px; align-items: center; padding: 5px 8px; border-radius: 12px; background: rgba(11, 16, 51, .45); box-shadow: inset 4px 0 0 var(--c); font-size: 14px; }
.pg-frow > :not(:first-child) { text-align: right; }
.pg-frow b:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-frow.hdr { background: none; box-shadow: none; padding-top: 0; padding-bottom: 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.pg-frow.win { background: rgba(255, 183, 3, .2); }
.pg-ftot { font-family: var(--f-display); font-weight: 400; color: var(--accent); }
@keyframes pg-pulse { 50% { scale: 1.025; } }
@keyframes pg-wiggle { 0%, 70%, 100% { rotate: 0deg; } 78% { rotate: -6deg; } 86% { rotate: 5deg; } 93% { rotate: -2deg; } }
@keyframes pg-tug { 50% { translate: 2px -3px; rotate: 8deg; } }
@keyframes pg-hover { from { transform: translateY(-3px) rotate(-6deg); } to { transform: translateY(3px) rotate(6deg); } }
@keyframes pg-raise { from { transform: rotate(-20deg); } to { transform: rotate(-38deg) translateY(-3px); } }
@keyframes pg-ripple { from { scale: .3; opacity: .9; } to { scale: 2.6; opacity: 0; } }
@keyframes pg-float { 50% { translate: -50% -56%; } }
@keyframes pg-throb { 50% { scale: 1.05; } }
@media (max-height: 700px) {
  .pg-root { gap: 6px; }
  .pg-banner { font-size: 15px; padding: 6px 10px; }
  .pg-spot.me .pg-pig { width: 62px; }
  .pg-spot.me .pg-purse { min-height: 54px; }
  .pg-fountain { height: 84px; }
  .pg-handwrap { padding: 20px 4px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-sheen, .pg-water i, .pg-fcoins > .pg-coin.top, .pg-aimer, .pg-lbart, .pg-lockbtn, .pg-pig.ready, .pg-coin.pg-tug, .pg-spot.pg-can { animation: none !important; }
}
/* tutorial props */
.tut-stage .pcard.pg-card { --w: 13cqw; }
.tut-stage .pcard.pg-card.sm { --w: 10cqw; }
.tut-pg-coin { --cs: 7cqw; z-index: 4; }
.tut-pg-coin.big { --cs: 10cqw; }
.tut-pg-pig { width: 22cqw; z-index: 3; }
.tut-pg-pig svg, .tut-pg-art svg { width: 100%; height: auto; display: block; }
.tut-pg-purse { width: 44cqw; height: 13cqw; border-radius: 2cqw 2cqw 4cqw 4cqw; background: radial-gradient(ellipse at 50% 0%, #6e4526, #4a2c17 70%); border: .7cqw solid var(--ink); z-index: 1; }
.tut-pg-purse.sm { width: 30cqw; height: 10cqw; }
.tut-pg-purse.locked { border-color: var(--accent); box-shadow: 0 0 0 .7cqw var(--accent); }
.tut-pg-pool { width: 40cqw; height: 22cqw; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #49d6cd, #1aa6a0 55%, #0e7f7a); border: 1.6cqw solid #d8c7a2; box-shadow: 0 0 0 .7cqw var(--ink); z-index: 0; }
.tut-pg-deck { --w: 11cqw; z-index: 2; }
.tut-pg-name { padding: .6cqw 2.4cqw; border-radius: 3cqw; background: var(--panel2); border: .5cqw solid var(--ink); color: var(--text); font-weight: 800; font-size: 3.4cqw; white-space: nowrap; z-index: 5; }
.tut-pg-art { width: 12cqw; z-index: 6; filter: drop-shadow(.6cqw .8cqw 0 rgba(11, 16, 51, .4)); }
.tut-pg-stamp { padding: .8cqw 3cqw; border-radius: 2cqw; background: var(--cherry); color: #fff3d6; border: .7cqw solid var(--ink); font: 400 5cqw var(--f-display); white-space: nowrap; z-index: 7; transform: translate(-50%, -50%) rotate(-6deg); }
.tut-pg-score { padding: 1.2cqw 3cqw; border-radius: 2.4cqw; background: var(--panel); border: .6cqw solid var(--ink); font-weight: 700; font-size: 4cqw; white-space: nowrap; z-index: 5; }
.tut-pg-score b { color: var(--accent); font-family: var(--f-display); font-weight: 400; }
.tut-pg-pips { display: flex; gap: 1.4cqw; z-index: 5; }
.tut-pg-pips i { width: 4cqw; height: 4cqw; border-radius: 50%; border: .6cqw solid var(--ink); background: var(--accent); transition: background .2s; }
.tut-pg-pips i.off { background: rgba(255, 243, 214, .2); }
.tut-pg-lockbtn { width: 26cqw; height: 26cqw; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, #ffd166, #ffb703 60%, #e09400); border: .9cqw solid var(--ink); box-shadow: 0 1.4cqw 0 var(--ink); z-index: 6; }
.tut-pg-lockbtn span { width: 60%; }
.tut-pg-lockbtn svg { width: 100%; display: block; }

/* Wordsmith: the action buttons as one even, centered row */
.ws-btns { display: grid; grid-template-columns: 1fr 1fr 1fr 1.25fr; gap: 8px; width: 100%; }
.ws-btns .btn { justify-content: center; padding-left: 6px; padding-right: 6px; min-width: 0; white-space: nowrap; }

/* ================= Know-It-All (knowitall): its builder adds rules ABOVE the end marker ================= */
.ka { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.ka-bar { padding-top: 2px; }
.ka-bar .chip { padding: 3px 10px 3px 3px; font-size: 14px; gap: 6px; }
.ka-bar .ka-sc { font-size: 14px; font-variant-numeric: tabular-nums; }
.ka-fire { font-size: 12px; font-weight: 700; }
.ka-bar .ka-in { color: var(--good); font-weight: 900; font-size: 13px; }
.ka-botav { color: initial; font-size: calc(var(--s) * .55); }
.ka-banner { position: relative; font-size: 18px; padding: 8px 14px; }
.ka-banner.ka-qbanner { text-align: left; border-left: 9px solid var(--c); }
.ka-stage { display: flex; flex-direction: column; gap: 10px; }
/* the wheel */
.ka-wheelbox { display: grid; place-items: center; padding-top: 8px; }
.ka-wheel { position: relative; width: min(76vw, 300px, 44vh); aspect-ratio: 1; touch-action: none; user-select: none; -webkit-user-select: none; }
.ka-wheel.can { cursor: grab; }
.ka-wheel.can .ka-rotor { box-shadow: 0 6px 0 var(--ink), 0 0 0 5px var(--accent), 0 0 30px rgba(255, 183, 3, .45); }
.ka-rotor { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 6px 0 var(--ink); will-change: transform; }
.ka-rotor svg { width: 100%; height: 100%; display: block; }
.ka-rotor text { pointer-events: none; }
.ka-wedge { transition: filter .3s; }
.ka-wedge.on { filter: brightness(1.3) saturate(1.2); }
.ka-flap { position: absolute; left: 50%; top: -14px; width: 30px; height: 38px; transform: translateX(-50%); transform-origin: 50% 15%; z-index: 2; filter: drop-shadow(0 3px 0 var(--ink)); }
.ka-flap svg { width: 100%; height: 100%; display: block; }
.ka-hub { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--accent); border: 4px solid var(--ink); display: grid; place-items: center; font-family: var(--f-display); font-size: clamp(18px, 7vw, 28px); color: var(--ink); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); pointer-events: none; }
.ka-callout { min-height: 46px; display: grid; place-items: center; text-align: center; }
.ka-callout small { color: var(--muted); font-size: 14px; font-weight: 600; }
.ka-landed { display: inline-flex; align-items: center; gap: 10px; padding: 5px 18px 5px 5px; border-radius: 999px; background: var(--text); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); font-family: var(--f-display); font-size: 20px; }
.ka-landed i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; background: var(--c); border: 2.5px solid var(--ink); display: grid; place-items: center; font-size: 18px; }
.ka-wctrl { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 30px; }
.ka-spinbtn { min-width: 190px; }
.ka-legend { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.ka-legend span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border-radius: 999px; background: var(--panel); border: 2px solid var(--ink); font-size: 12px; font-weight: 600; }
.ka-legend i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: var(--c); display: grid; place-items: center; font-size: 11px; }
/* a question */
.ka-qcard { position: relative; background: var(--text); color: var(--ink); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink); padding: 12px 14px 14px; }
.ka-qcard::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: var(--c); border-radius: 15px 15px 0 0; }
.ka-qtop { display: flex; align-items: center; gap: 8px; }
.ka-cat { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-weight: 800; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ka-cat i { font-style: normal; }
.ka-qtop small { margin-left: auto; flex: none; color: #4d527d; font-weight: 700; font-size: 13px; white-space: nowrap; }
.ka-num { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--accent); display: grid; place-items: center; font-family: var(--f-display); font-size: 17px; }
.ka-num:empty { opacity: .25; }
.ka-num.low { background: var(--cherry); color: #fff; animation: ka-beat 1s ease-in-out infinite; }
.ka-qtext { margin: 8px 0 0; font-size: 21px; font-weight: 700; line-height: 1.25; }
.ka-qcard.l .ka-qtext { font-size: 18px; }
.ka-tbar { height: 10px; border-radius: 999px; background: rgba(5, 9, 40, .6); border: 2px solid var(--ink); overflow: hidden; }
.ka-tbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--cherry), var(--accent2) 45%, var(--accent)); }
.ka-opts { display: grid; gap: 8px; perspective: 700px; }
.ka-opt {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 6px 10px 6px 6px;
  border-radius: 14px; background: var(--panel); color: var(--text); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  text-align: left; font: inherit; font-size: 17px; font-weight: 700; line-height: 1.2;
  transition: transform .07s, box-shadow .15s, opacity .2s, background .2s, color .2s;
}
.ka-opt:active:not([disabled]) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.ka-opt[disabled] { cursor: default; }
.ka-let { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--t); color: var(--ink); border: 2.5px solid var(--ink); display: grid; place-items: center; font-family: var(--f-display); font-size: 18px; }
.ka-otxt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ka-otxt.l { font-size: 15px; }
.ka-who { display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; max-width: 46%; }
.ka-who:empty { display: none; }
.ka-opt.down { background: repeating-linear-gradient(135deg, var(--panel) 0 10px, var(--panel2) 10px 20px); }
.ka-opt.down .ka-otxt { visibility: hidden; }
.ka-opt.picked { background: var(--t); color: var(--ink); box-shadow: 0 0 0 3px var(--text), 0 4px 0 var(--ink); }
.ka-opt.picked .ka-let { background: var(--text); }
.ka-opt.dim { opacity: .45; }
.ka-opt.x2::after { content: '×2'; position: absolute; right: 8px; top: -10px; padding: 0 6px; border-radius: 999px; background: var(--accent2); color: var(--ink); border: 2px solid var(--ink); font-size: 11px; font-weight: 900; }
.ka-opt.right { background: var(--good); color: var(--ink); opacity: 1; box-shadow: 0 0 0 3px var(--text), 0 0 22px rgba(76, 185, 68, .75), 0 4px 0 var(--ink); }
.ka-opt.right::after { content: '✓'; position: absolute; right: -8px; top: -11px; width: 26px; height: 26px; border-radius: 50%; background: var(--text); color: #2b8a26; border: 2.5px solid var(--ink); display: grid; place-items: center; font-size: 15px; font-weight: 900; }
.ka-opt.wrong { opacity: .5; }
.ka-opt.wrong.mine { opacity: 1; background: #5a1a28; box-shadow: 0 0 0 3px var(--cherry), 0 4px 0 var(--ink); }
.ka-pk, .ka-lock { position: relative; display: inline-flex; }
.ka-pk .avatar, .ka-lock .avatar { box-shadow: 0 0 0 2px var(--ink); }
.ka-bolt { position: absolute; right: -6px; top: -8px; font-style: normal; font-size: 13px; }
.ka-x2 { position: absolute; left: -6px; bottom: -5px; padding: 0 3px; border-radius: 999px; background: var(--accent2); color: var(--ink); border: 1.5px solid var(--ink); font-style: normal; font-size: 9px; font-weight: 900; }
.ka-audn { align-self: center; padding: 1px 6px; border-radius: 999px; background: rgba(5, 9, 40, .55); color: var(--text); font-size: 12px; font-weight: 700; }
.ka-foot { display: flex; align-items: center; gap: 10px; }
.ka-foot:has(.ka-lane:empty) { display: none; }
.ka-lane { flex: 1; min-width: 0; }
.ka-lane small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.ka-lanes { display: flex; flex-wrap: wrap; gap: 5px; min-height: 26px; }
.ka-lock.first .avatar { box-shadow: 0 0 0 3px var(--accent); }
.ka-lane .ka-aud { display: block; margin: 4px 0 0; }
.ka-dbl {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 12px 6px; border-radius: 14px;
  background: var(--panel2); color: var(--text); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); font: inherit; font-weight: 800;
  transition: transform .07s, box-shadow .15s, background .2s;
}
.ka-dbl:active:not([disabled]) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.ka-dbl b { font-family: var(--f-display); font-size: 20px; line-height: 1; color: var(--accent2); }
.ka-dbl span { font-size: 11px; }
.ka-dbl small { display: flex; gap: 3px; }
.ka-dbl small i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 243, 214, .2); border: 1.5px solid var(--ink); }
.ka-dbl small i.left { background: var(--accent2); }
.ka-dbl.on, .ka-dbl.used { background: var(--accent2); color: var(--ink); box-shadow: 0 0 0 3px var(--text), 0 0 18px rgba(251, 97, 7, .7), 0 4px 0 var(--ink); }
.ka-dbl.on b, .ka-dbl.used b { color: var(--ink); }
.ka-dbl[disabled]:not(.used) { opacity: .45; }
.ka-betpill { flex: none; text-align: center; padding: 4px 14px; border-radius: 14px; background: var(--panel2); border: 3px solid var(--ink); }
.ka-betpill small { display: block; color: var(--muted); font-size: 11px; font-weight: 700; }
.ka-betpill b { font-family: var(--f-display); font-size: 20px; color: var(--accent); }
.ka-gains { display: flex; flex-direction: column; gap: 8px; }
.ka-wait { min-height: 18px; }
/* the reveal */
.ka-verdict { text-align: center; padding: 8px 12px; border-radius: 14px; background: var(--panel); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font-size: 17px; font-weight: 800; }
.ka-verdict.good { background: var(--good); color: var(--ink); }
.ka-verdict.bad { background: #5a1a28; }
.ka-gainlist { display: flex; flex-direction: column; gap: 4px; }
.ka-gain { display: flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border-radius: 999px; background: var(--panel); border: 2px solid var(--ink); }
.ka-gain.me { background: var(--panel2); box-shadow: 0 0 0 2px var(--text); }
.ka-gain .n { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34%; }
.ka-tags { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.ka-tags i { font-style: normal; padding: 1px 7px; border-radius: 999px; background: rgba(5, 9, 40, .55); font-size: 11px; font-weight: 700; white-space: nowrap; }
.ka-tags i.x2 { background: var(--accent2); color: var(--ink); }
.ka-tags i.none { color: var(--muted); }
.ka-gain > b { font-family: var(--f-display); font-size: 16px; }
.ka-gain > b.up, .ka-lrow em.up { color: #9be87f; }
.ka-gain > b.down, .ka-lrow em.down { color: #ff8a80; }
.ka-bets { display: flex; flex-direction: column; gap: 5px; }
.ka-bets > small { text-align: center; color: var(--accent); font-family: var(--f-display); font-size: 13px; }
.ka-brow { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--panel); border: 2px solid var(--ink); transition: background .25s; }
.ka-brow.me { box-shadow: 0 0 0 2px var(--text); }
.ka-brow .n { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ka-bres { padding: 2px 9px; border-radius: 999px; background: rgba(5, 9, 40, .55); font-weight: 800; font-size: 14px; white-space: nowrap; }
.ka-bres.hid { color: transparent; background: repeating-linear-gradient(135deg, var(--panel2) 0 6px, var(--bg2) 6px 12px); }
.ka-bres.up { background: var(--good); color: var(--ink); }
.ka-bres.down { background: var(--cherry); color: var(--text); }
.ka-bsc { min-width: 52px; text-align: right; font-family: var(--f-display); font-size: 17px; }
/* the scoreboard between rounds */
.ka-boardcard { padding: 10px; border-radius: 20px; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); }
.ka-boardcard > small { display: block; margin-bottom: 8px; text-align: center; color: var(--accent); font-family: var(--f-display); font-size: 14px; }
.ka-board { position: relative; }
.ka-lrow { position: absolute; left: 0; right: 0; top: 0; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 6px; border-radius: 14px; background: var(--panel2); border: 2.5px solid var(--ink); }
.ka-lrow.me { box-shadow: 0 0 0 2px var(--text); }
.ka-lrow.lead { background: var(--accent); color: var(--ink); z-index: 1; }
.ka-lrow.lead em.up { color: #1f6a1b; }
.ka-rank { width: 22px; text-align: center; font-family: var(--f-display); font-size: 15px; }
.ka-lrow .n { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ka-lrow em { font-style: normal; font-weight: 800; font-size: 13px; }
.ka-lsc { min-width: 56px; text-align: right; font-family: var(--f-display); font-size: 18px; }
/* All In */
.ka-allcat { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 14px; border-radius: 20px; background: var(--text); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); }
.ka-allcat i { font-style: normal; width: 54px; height: 54px; border-radius: 50%; background: var(--c); border: 3px solid var(--ink); display: grid; place-items: center; font-size: 28px; }
.ka-allcat b { font-family: var(--f-display); font-size: 22px; }
.ka-wager { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.ka-wtext { margin: 0; color: var(--muted); font-size: 15px; }
.ka-betnum { font-family: var(--f-display); font-size: 44px; line-height: 1; color: var(--accent); }
.ka-range { width: 100%; height: 34px; accent-color: var(--accent2); }
.ka-quick { display: flex; gap: 8px; }
.ka-quick .btn { flex: 1; padding: 0 8px; }
.ka-betlock { text-align: center; padding: 12px; border-radius: 18px; background: var(--panel); border: 3px solid var(--ink); }
.ka-betlock small { display: block; color: var(--muted); font-weight: 700; }
.ka-betlock b { font-family: var(--f-display); font-size: 40px; color: var(--accent); }
/* the end */
.ka-final { display: flex; flex-direction: column; gap: 6px; }
.ka-frow { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 16px; background: var(--panel); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.ka-frow.top { background: var(--accent); color: var(--ink); }
.ka-frow.me { box-shadow: 0 0 0 3px var(--text), 0 3px 0 var(--ink); }
.ka-medal { width: 28px; text-align: center; font-size: 20px; }
.ka-frow .n { flex: 1; min-width: 0; font-weight: 700; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ka-fsc { font-family: var(--f-display); font-size: 20px; }
.ka-awards { display: grid; gap: 8px; }
.ka-award { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 16px; background: var(--panel); border: 2.5px solid var(--ink); }
.ka-award > i { font-style: normal; font-size: 26px; }
.ka-award small { display: block; color: var(--accent); font-family: var(--f-display); font-size: 12px; }
.ka-award b { display: block; }
.ka-award span { color: var(--muted); font-size: 13px; }
@keyframes ka-beat { 50% { transform: scale(1.12); } }
.ka-banner.ka-hide { display: none; }
.ka-qnote { margin: 6px 0 0; color: #4d527d; font-size: 13px; font-weight: 700; }
/* the walkthrough (stage units: 1 = 1/3 cqw) */
.ka-twheel { width: 54cqw; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 1.6cqw 0 var(--ink); }
.ka-twheel svg { width: 100%; height: 100%; display: block; }
.ka-tflap { width: 8cqw; height: 9cqw; background: var(--text); clip-path: polygon(0 0, 100% 0, 50% 100%); z-index: 3; }
.ka-tland { padding: 1.2cqw 4cqw; border-radius: 999px; background: var(--text); color: var(--ink); border: .9cqw solid var(--ink); box-shadow: inset 2.6cqw 0 0 var(--c); font-family: var(--f-display); font-size: 5cqw; white-space: nowrap; padding-left: 5cqw; }
.ka-tq { width: 92cqw; padding: 1.4cqw 3cqw; border-radius: 3cqw; background: var(--text); color: var(--ink); border: .8cqw solid var(--ink); font-weight: 800; font-size: 4.2cqw; text-align: center; }
.ka-topt { width: 64cqw; display: flex; align-items: center; gap: 2cqw; padding: 1cqw; border-radius: 2.6cqw; background: var(--panel); border: .8cqw solid var(--ink); box-shadow: 0 .9cqw 0 var(--ink); font-weight: 700; font-size: 4.2cqw; transition: opacity .2s, background .2s, color .2s; }
.ka-topt b { width: 6.5cqw; height: 6.5cqw; border-radius: 1.6cqw; background: var(--t); color: var(--ink); border: .6cqw solid var(--ink); display: grid; place-items: center; font-family: var(--f-display); font-size: 3.6cqw; }
.ka-topt.picked { background: var(--t); color: var(--ink); }
.ka-topt.dim { opacity: .45; }
.ka-topt.right { background: var(--good); color: var(--ink); opacity: 1; box-shadow: 0 0 0 .8cqw var(--text), 0 .9cqw 0 var(--ink); }
.ka-topt.x2::after { content: '×2'; margin-left: auto; padding: 0 1.6cqw; border-radius: 999px; background: var(--accent2); color: var(--ink); font-size: 3cqw; font-weight: 900; }
.ka-ttimer { width: 5cqw; height: 34cqw; border-radius: 999px; background: rgba(5, 9, 40, .6); border: .7cqw solid var(--ink); display: flex; align-items: flex-end; overflow: hidden; }
.ka-ttimer i { display: block; width: 100%; background: linear-gradient(0deg, var(--cherry), var(--accent)); }
.ka-tdot { width: 8cqw; height: 8cqw; border-radius: 50%; background: var(--c); border: .7cqw solid var(--ink); display: grid; place-items: center; font-weight: 800; font-size: 3.8cqw; color: rgba(0, 0, 0, .6); }
.ka-tdot.first { box-shadow: 0 0 0 .8cqw var(--accent); }
.ka-tbolt { font-size: 4cqw; z-index: 2; }
.ka-tdbl { display: flex; flex-direction: column; align-items: center; padding: 1.4cqw 2.6cqw; border-radius: 3cqw; background: var(--panel2); border: .8cqw solid var(--ink); box-shadow: 0 1cqw 0 var(--ink); font-weight: 800; }
.ka-tdbl b { font-family: var(--f-display); font-size: 6cqw; color: var(--accent2); line-height: 1; }
.ka-tdbl small { font-size: 3cqw; }
.ka-tdbl.on { background: var(--accent2); color: var(--ink); box-shadow: 0 0 0 .8cqw var(--text), 0 1cqw 0 var(--ink); }
.ka-tdbl.on b { color: var(--ink); }
.ka-trow { width: 80cqw; display: flex; align-items: center; gap: 3cqw; padding: 1cqw 4cqw 1cqw 1cqw; border-radius: 3cqw; background: var(--panel2); border: .8cqw solid var(--ink); font-weight: 700; font-size: 4.6cqw; }
.ka-trow span { flex: 1; }
.ka-trow b { font-family: var(--f-display); font-size: 5cqw; }
.ka-trow.lead { background: var(--accent); color: var(--ink); }
.ka-tbet { font-family: var(--f-display); font-size: 13cqw; color: var(--accent); }
.ka-ttrack { width: 48cqw; height: 2.4cqw; border-radius: 999px; background: var(--panel2); border: .6cqw solid var(--ink); }
.ka-tknob { width: 6cqw; height: 6cqw; border-radius: 50%; background: var(--accent2); border: .8cqw solid var(--ink); z-index: 2; }
.ka-tlock { padding: 1.6cqw 6cqw; border-radius: 3cqw; background: var(--accent); color: var(--ink); border: .8cqw solid var(--ink); box-shadow: 0 1.2cqw 0 var(--ink); font-weight: 800; font-size: 4.4cqw; }
@media (max-width: 360px) {
  .ka-qtext { font-size: 18px; }
  .ka-qcard.l .ka-qtext { font-size: 16px; }
  .ka-opt { min-height: 48px; font-size: 15px; gap: 8px; }
  .ka-otxt.l { font-size: 14px; }
  .ka-let { width: 32px; height: 32px; font-size: 15px; }
  .ka-banner { font-size: 16px; }
  .ka-cat, .ka-qtop small { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ka-num.low { animation: none; }
  .ka-lrow { transition: none !important; }
}
/* @end knowitall */

/* ================= On the Dial (dial): its builder adds rules ABOVE the end marker ================= */
.dl-head { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 24px; padding: 0 4px; }
.dl-head > b { font-family: var(--f-display); font-weight: 400; font-size: 14px; color: var(--accent); letter-spacing: .5px; }
.dl-secs { font-weight: 700; font-size: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dl-secs.low { color: #ff8a8f; }
.dl-head .tmr-clock { top: -4px; right: 52px; }

/* the radio cabinet */
.dl-radio { position: relative; background: linear-gradient(180deg, #24379d, #1a2a86 70%); border: 3px solid var(--ink); border-radius: 22px;
  box-shadow: 0 6px 0 var(--ink); padding: 10px 10px 12px; }
.dl-radio::before { content: ''; position: absolute; left: 18px; right: 18px; top: -3px; height: 6px; background: var(--stripe); border: 2px solid var(--ink); border-radius: 0 0 6px 6px; }
.dl-top { display: flex; gap: 8px; align-items: stretch; }
.dl-grille { width: 34px; flex: none; border-radius: 10px; border: 2.5px solid var(--ink);
  background: repeating-linear-gradient(180deg, #0b1033 0 4px, #2c41ad 4px 8px); }
.dl-display { flex: 1; min-width: 0; min-height: 60px; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 12px;
  background: #0b1033; border: 3px solid var(--ink); box-shadow: inset 0 4px 0 rgba(0, 0, 0, .45), 0 0 0 2px #2c41ad; overflow: hidden; position: relative; }
.dl-led { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #ffb703; box-shadow: 0 0 0 3px rgba(255, 183, 3, .22); }
.dl-display.static .dl-led { animation: dl-blink .8s steps(2) infinite; }
.dl-dtext { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dl-dsub { color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-dmain { font-family: var(--f-display); font-weight: 400; font-size: 21px; line-height: 1.1; color: var(--accent); overflow-wrap: anywhere; }
.dl-display.clue .dl-dmain { color: var(--text); font-size: 24px; }
.dl-display.long .dl-dmain { font-size: 17px; }
.dl-display.xlong .dl-dmain { font-size: 14px; }
.dl-display.static::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background: repeating-linear-gradient(180deg, #fff 0 1px, transparent 1px 3px); animation: dl-static .35s steps(3) infinite; }
@keyframes dl-blink { 50% { opacity: .2; } }
@keyframes dl-static { to { background-position: 0 6px; } }

.dl-dialwrap { margin-top: 8px; }
.dl-svg { display: block; width: 100%; height: auto; overflow: visible; outline: none; }
.dl-svg.live { touch-action: none; cursor: grab; }
.dl-svg.live.grabbed { cursor: grabbing; }
.dl-svg:focus-visible .dl-face-edge { stroke: var(--accent); }
.dl-face { fill: #fff3d6; }
.dl-face-sh { fill: #0b1033; opacity: .4; }
.dl-face-band { fill: #efdcb7; }
.dl-face-edge { fill: none; stroke: #0b1033; stroke-width: 5; stroke-linejoin: miter; }
.dl-rim { fill: none; stroke-width: 7; }
.dl-tk { stroke: #0b1033; stroke-width: 2; }
.dl-tk.big { stroke-width: 4; }
.dl-rot { transform-box: view-box; transform-origin: 150px 158px; }
.dl-band { stroke: #0b1033; stroke-width: 2.5; stroke-linejoin: miter; }
.dl-band.b4 { fill: #ffd98a; }
.dl-band.b3 { fill: #ffb703; }
.dl-band.b2 { fill: #fb6107; }
.dl-band.b1 { fill: #e3242b; }
.dl-svg.reveal .dl-zlab { display: none; }
.dl-zlab { font-family: var(--f-display); font-size: 9px; fill: #fff3d6; text-anchor: middle; dominant-baseline: middle; }
.dl-beam { fill: #fff; opacity: 0; transition: opacity .15s; }
.dl-beam.on { opacity: .55; }
.dl-nd { fill: #e3242b; stroke: #0b1033; stroke-width: 3; stroke-linejoin: miter; transition: fill .2s; }
.dl-svg.locked .dl-nd { fill: #0b1033; stroke: #ffb703; }
.dl-svg:not(.live):not(.locked) .dl-needle { opacity: .55; }
.dl-kb { fill: #1a2a86; stroke: #0b1033; stroke-width: 4; }
.dl-ridge { fill: #0b1033; }
.dl-kcap { fill: #ffb703; stroke: #0b1033; stroke-width: 3; }
.dl-knotch { fill: #0b1033; }
.dl-svg.live .dl-knob { cursor: ew-resize; }
.dl-nudge { cursor: pointer; }
.dl-nudge rect { fill: #24379d; stroke: #0b1033; stroke-width: 3; }
.dl-nudge path { fill: none; stroke: #fff3d6; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.dl-nudge:active rect { fill: #ffb703; }
.dl-nudge:active path { stroke: #0b1033; }
.dl-gn-o { stroke: #0b1033; stroke-width: 6.5; stroke-linecap: round; }
.dl-gn-i { stroke: var(--c); stroke-width: 3; stroke-linecap: round; }
.dl-gn-flag { fill: var(--c); stroke: #0b1033; stroke-width: 2.5; }
.dl-gn.me .dl-gn-flag { stroke: #fff3d6; stroke-width: 3; }
.dl-gn.bull .dl-gn-flag { stroke: #ffb703; stroke-width: 3.5; }
.dl-gn-t { font-family: var(--f-body); font-weight: 800; font-size: 11px; fill: rgba(0, 0, 0, .7); text-anchor: middle; }
.dl-gn.aud .dl-gn-i { stroke-dasharray: 4 3; }
.dl-gn.aud .dl-gn-t { font-size: 10px; }

.dl-ends { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.dl-end { display: flex; align-items: center; gap: 6px; min-height: 46px; padding: 6px 10px; border: 2.5px solid var(--ink); border-radius: 12px;
  box-shadow: 0 3px 0 var(--ink); font-weight: 800; font-size: 15px; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.dl-end.l { background: #1aa6a0; }
.dl-end.r { background: #fb6107; justify-content: flex-end; text-align: right; }
.dl-end i { font-style: normal; font-size: 11px; opacity: .65; flex: none; }
.dl-end span.s { font-size: 13.5px; }
.dl-end span.xs { font-size: 12px; }
.dl-radio.blank .dl-end { opacity: .45; }

.dl-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.dl-small, .dl-count { font-size: 13px; }
.dl-count { font-weight: 600; }
.dl-stations { display: grid; gap: 12px; }
.dl-station { display: grid; grid-template-columns: 1fr 30px 1fr; align-items: center; gap: 8px; padding: 12px; border-radius: 16px; text-align: left;
  background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); font-weight: 800; font-size: 16px; line-height: 1.15; margin-bottom: 5px;
  transition: transform .07s, box-shadow .07s; }
.dl-station:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.dl-sl { color: #5fe0d8; overflow-wrap: anywhere; }
.dl-sr { color: #ff9a5c; text-align: right; overflow-wrap: anywhere; }
.dl-sbar { height: 10px; border-radius: 99px; border: 2px solid var(--ink); background: linear-gradient(90deg, #1aa6a0, #ffb703, #fb6107); }
.dl-say { display: flex; flex-direction: column; gap: 4px; text-align: center; padding: 12px 14px; border-radius: 16px; background: var(--panel2); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.dl-say b { font-family: var(--f-display); font-weight: 400; font-size: 17px; color: var(--accent); }
.dl-say span { color: var(--muted); font-size: 14px; }
.dl-say.calm b { color: var(--text); }
.dl-cluebox { display: flex; gap: 8px; align-items: flex-start; }
.dl-cluebox .field { flex: 1; min-width: 0; font-size: 20px; }
.dl-cluebox .btn { min-height: 58px; }
.dl-lockrow { align-items: stretch; }
.dl-lock { min-width: 0; padding: 0 12px; white-space: nowrap; }
.dl-sure { display: flex; align-items: center; gap: 8px; flex: none; min-height: 64px; padding: 6px 12px 6px 6px; margin-bottom: 5px; border-radius: 16px; text-align: left;
  background: var(--panel2); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); transition: transform .07s, box-shadow .07s, background .15s; }
.dl-sure:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.dl-sure b { display: block; font-size: 14px; font-weight: 800; }
.dl-sure small { display: block; font-size: 12px; opacity: .8; }
.dl-token { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--f-display); font-size: 13px; color: var(--ink);
  background: #f5ad1b; border: 3px solid var(--ink); box-shadow: inset 0 -5px 0 #c07800, inset 0 0 0 4px #ffd166; transition: transform .25s cubic-bezier(.2, 1.5, .4, 1); }
.dl-sure.on { background: var(--accent); color: var(--ink); }
.dl-sure.on .dl-token { transform: rotate(-18deg) scale(1.08); }
.dl-sure.none { opacity: .45; }
.dl-lockedtag { display: flex; flex-direction: column; gap: 2px; text-align: center; padding: 12px; border-radius: 16px; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.dl-lockedtag b { font-size: 18px; }
.dl-lockedtag span { color: var(--muted); font-size: 13px; }
.dl-lockedtag.sure { border-color: var(--accent); }

/* the reveal */
.dl-rows { display: flex; flex-direction: column; gap: 6px; }
.dl-row { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 14px; background: var(--panel); border: 2.5px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink); font-size: 15px; }
.dl-row.me { box-shadow: 0 0 0 2px var(--c), 0 3px 0 var(--ink); }
.dl-rn { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-rn small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); white-space: normal; }
.dl-off { color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.dl-rp { font-family: var(--f-display); font-weight: 400; font-size: 18px; color: var(--accent); min-width: 44px; text-align: right; }
.dl-rp.neg { color: #ff8a8f; }
.dl-row.none { opacity: .6; }
.dl-row.bull { background: var(--accent); color: var(--ink); }
.dl-row.bull .dl-off, .dl-row.bull .dl-rp { color: var(--ink); }
.dl-surebadge { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 99px; background: var(--accent); color: var(--ink); border: 2px solid var(--ink); white-space: nowrap; }
.dl-surebadge.miss { background: var(--cherry); color: var(--text); }
.dl-row.bull .dl-surebadge { background: var(--text); }
.dl-dialrow { background: var(--panel2); border-style: dashed; }
.dl-audrow { color: var(--muted); font-size: 13px; text-align: center; }
.dl-bars { display: flex; flex-direction: column; gap: 6px; background: rgba(0, 0, 0, .2); border-radius: 16px; padding: 10px 12px; }
.dl-bar { display: grid; grid-template-columns: 24px minmax(0, 72px) 1fr 38px 38px; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; }
.dl-bar .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-bar b { text-align: right; color: var(--accent); font-variant-numeric: tabular-nums; }
.dl-track { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.dl-track i { display: block; height: 100%; border-radius: 6px; background: var(--c); transition: width .8s cubic-bezier(.3, .7, .3, 1); }
.dl-plus { font-style: normal; font-size: 12px; font-weight: 700; color: #5ad45a; opacity: 0; transition: opacity .3s .5s; text-align: right; }
.dl-plus.neg { color: #ff8a8f; }
.dl-plus.show { opacity: 1; }
.dl-next { margin-top: 2px; }

.dl-awards { display: grid; gap: 10px; }
.dl-award { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.dl-award.none { opacity: .6; }
.dl-medal { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: #f5ad1b; border: 3px solid var(--ink); box-shadow: inset 0 -5px 0 #c07800; }
.dl-award small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.dl-award b { display: block; font-size: 19px; }
.dl-award span { color: var(--muted); font-size: 13px; }

.dl-splash { position: fixed; left: 50%; top: 42%; z-index: 90; pointer-events: none; text-align: center; padding: 14px 22px; border-radius: 18px;
  background: #0b1033; color: var(--accent); border: 3px solid var(--accent); box-shadow: 0 6px 0 var(--ink); white-space: nowrap;
  transform: translate(-50%, -50%); animation: dl-splash 1.6s cubic-bezier(.3, 1.3, .5, 1) forwards; }
.dl-splash b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1.1; }
.dl-splash small { color: var(--text); font-size: 15px; font-weight: 700; }
@keyframes dl-splash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-4deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(-2deg); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(.96) rotate(-2deg); }
}
@media (max-width: 360px) {
  .dl-display { min-height: 52px; padding: 5px 10px; }
  .dl-dmain { font-size: 18px; }
  .dl-display.clue .dl-dmain { font-size: 20px; }
  .dl-grille { width: 22px; }
  .dl-end { font-size: 13.5px; min-height: 42px; padding: 5px 8px; }
  .dl-end span.s { font-size: 12.5px; }
  .dl-end span.xs { font-size: 11px; }
  .dl-sure { padding-right: 8px; gap: 6px; }
  .dl-sure b { font-size: 13px; }
  .dl-token { width: 34px; height: 34px; font-size: 11px; }
  .dl-lock { font-size: 17px; padding: 0 8px; }
  .dl-bar { grid-template-columns: 22px minmax(0, 60px) 1fr 34px 34px; gap: 6px; }
}
/* tutorial */
.tut-item.dl-tdial { width: 64cqw; }
.tut-item.dl-tdial .dl-svg { width: 100%; }
.tut-item.dl-tend { padding: 1cqw 2.4cqw; border: .8cqw solid var(--ink); border-radius: 2.4cqw; font-weight: 800; font-size: 4.2cqw; color: var(--ink); white-space: nowrap; box-shadow: 0 .8cqw 0 var(--ink); }
.dl-tend.l { background: #1aa6a0; }
.dl-tend.r { background: #fb6107; }
.tut-item.dl-tst { display: grid; grid-template-columns: 1fr 9cqw 1fr; align-items: center; gap: 2cqw; width: 78cqw; padding: 3cqw; border-radius: 4cqw; background: var(--panel);
  border: .9cqw solid var(--ink); box-shadow: 0 1.4cqw 0 var(--ink); font-weight: 800; font-size: 4.6cqw; transition: background .2s; }
.dl-tst .l { color: #5fe0d8; }
.dl-tst .r { color: #ff9a5c; text-align: right; }
.dl-tst i { height: 2.6cqw; border-radius: 99px; border: .6cqw solid var(--ink); background: linear-gradient(90deg, #1aa6a0, #ffb703, #fb6107); }
.dl-tst.on { background: var(--accent); }
.dl-tst.on .l, .dl-tst.on .r { color: var(--ink); }
.tut-item.dl-tdisp { min-width: 40cqw; padding: 1.2cqw 4cqw; border-radius: 2.6cqw; background: #0b1033; border: .8cqw solid var(--ink); box-shadow: 0 0 0 .6cqw #2c41ad;
  font-family: var(--f-display); font-size: 6.4cqw; color: var(--text); text-align: center; min-height: 10cqw; z-index: 3; }
.tut-item.dl-tdisp.small { font-size: 5cqw; min-height: 0; }
.tut-item.dl-tbtn { padding: 2cqw 5cqw; border-radius: 3.4cqw; background: var(--accent); color: var(--ink); border: .8cqw solid var(--ink); box-shadow: 0 1.2cqw 0 var(--ink); font-weight: 800; font-size: 4.6cqw; white-space: nowrap; transition: opacity .2s; z-index: 4; }
.tut-item.dl-tbtn.on { background: #0b1033; color: var(--accent); }
.tut-item.dl-ttoken { width: 26cqw; height: 26cqw; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-size: 8cqw; color: var(--ink);
  background: #f5ad1b; border: 1cqw solid var(--ink); box-shadow: inset 0 -2.4cqw 0 #c07800, inset 0 0 0 1.6cqw #ffd166, 0 1.4cqw 0 var(--ink); }
.tut-item.dl-trow { display: flex; align-items: center; gap: 2.4cqw; padding: 1.6cqw 3.4cqw; border-radius: 3cqw; background: var(--panel); border: .8cqw solid var(--ink); font-size: 5cqw; font-weight: 700; white-space: nowrap; }
.dl-trow b { font-family: var(--f-display); font-weight: 400; color: var(--text); }
.dl-trow b.gold { color: var(--accent); }
.dl-trow b.bad { color: #ff8a8f; }
.dl-trow span { color: var(--muted); }
.tut-item.dl-trow.wide { font-size: 4.2cqw; }
.tut-item.dl-tscore { display: flex; align-items: center; gap: 1.6cqw; padding: 1.2cqw 3cqw 1.2cqw 1.6cqw; border-radius: 99px; background: var(--panel); border: .8cqw solid var(--ink); font-weight: 800; font-size: 4.4cqw; white-space: nowrap; }
.dl-tscore i { width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: var(--c); border: .5cqw solid var(--ink); }
.tut-item.dl-tscore.bull { background: var(--accent); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .dl-display.static::after, .dl-display.static .dl-led { animation: none; }
  .dl-splash { animation: none; display: none; }
}
/* @end dial */

/* ================= Doodle Dash (doodle): its builder adds rules ABOVE the end marker ================= */
.dd-root { display: flex; flex-direction: column; gap: 8px; }
.dd-banner { font-size: 17px; padding: 7px 12px; }
.dd-banner small { font-size: 12.5px; }
.dd-chips { padding: 2px 2px 4px; }
.dd-chips .chip { transition: box-shadow .2s, background .2s; }
.dd-chips .chip.dd-got { background: rgba(76, 185, 68, .28); }
.dd-chips .dd-tick { color: var(--good); font-weight: 800; font-size: 13px; }
.dd-main { display: flex; flex-direction: column; gap: 10px; }

/* the page: cream paper with a faint dot grid and a spiral binding along the top */
.dd-paper {
  position: relative; border-radius: 6px 6px 10px 10px; border: 2.5px solid var(--ink);
  background: radial-gradient(rgba(70, 50, 20, .11) 1px, transparent 1.4px) 0 0 / 20px 20px, linear-gradient(#fffdf6, #f7efdc);
  box-shadow: 0 5px 0 var(--ink); margin-top: 6px;
}
.dd-paper.small { width: 74%; align-self: center; }
.dd-spiral {
  position: absolute; top: -9px; left: 5%; right: 5%; height: 18px; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 2.4px 8px at 50% 50%, #c9c3e0 0 70%, #6e688c 85%, transparent 100%) 0 0 / 16px 18px repeat-x;
}
.dd-canvas { display: block; width: 100%; aspect-ratio: 4 / 3; touch-action: none; border-radius: 4px 4px 8px 8px; -webkit-user-select: none; user-select: none; }

.dd-timer { position: relative; height: 16px; border-radius: 8px; background: rgba(5, 9, 40, .55); border: 2px solid var(--ink); margin-right: 42px; }
.dd-timer i { position: absolute; inset: 0; border-radius: 6px; background: var(--good); transform-origin: 0 50%; }
.dd-timer b { position: absolute; right: -42px; top: 50%; transform: translateY(-50%); width: 36px; text-align: right; font-size: 15px; font-weight: 800; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.dd-timer.low i { background: var(--cherry); }
.dd-timer.low b { color: #ff7a7f; }

/* picking a word: three index cards */
.dd-picks { display: flex; flex-direction: column; gap: 10px; }
.dd-pick {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; text-align: left;
  padding: 12px 14px 12px 22px; border-radius: 14px; border: 2.5px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
  background: linear-gradient(#fffdf6, #f3e9d2); color: #1b1640; overflow: hidden;
}
.dd-pick::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--tc); }
.dd-pick small { grid-column: 1; font-weight: 800; font-size: 12px; color: var(--tc2); }
.dd-pick b { grid-column: 1; font-size: clamp(20px, 6.4vw, 27px); line-height: 1.1; font-weight: 800; overflow-wrap: anywhere; }
.dd-pick .dd-pts { grid-column: 2; grid-row: 1 / span 2; font-size: 12px; font-weight: 700; color: #6a5f80; text-align: right; max-width: 76px; }
.dd-pick:active, .dd-pick.on { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.dd-pick.on { outline: 3px solid var(--accent); outline-offset: 2px; }
.t-e { --tc: #4cb944; --tc2: #2b7a26; }
.t-m { --tc: #ffb703; --tc2: #a86a00; }
.t-h { --tc: #e3242b; --tc2: #b3161c; }
.dd-tier { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--tc); color: var(--ink); font-size: 12px; font-weight: 800; border: 2px solid var(--ink); }

.dd-wait { aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #3a3160; padding: 16px; text-align: center; }
.dd-wait p { margin: 0; font-weight: 700; font-size: 17px; }
.dd-pencil {
  position: relative; width: 22px; height: 86px; border-radius: 3px 3px 0 0; border: 2.5px solid var(--ink); border-bottom: 0;
  background: linear-gradient(90deg, #f8cc55 0 33%, #f0a81c 33% 66%, #c98500 66%); transform-origin: 50% 100%;
  animation: dd-scribble 1.1s ease-in-out infinite; margin-bottom: 18px;
}
.dd-pencil::before { content: ''; position: absolute; left: -2.5px; right: -2.5px; top: -14px; height: 12px; background: #e07a8f; border: 2.5px solid var(--ink); border-radius: 4px 4px 0 0; }
.dd-pencil::after { content: ''; position: absolute; left: -2.5px; bottom: -17px; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 17px solid #e9c99a; }
@keyframes dd-scribble { 0%, 100% { transform: rotate(-14deg) translateX(-6px); } 50% { transform: rotate(12deg) translateX(6px); } }

/* the artist's word: a sticky note */
.dd-note {
  align-self: center; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px; max-width: 100%;
  padding: 7px 14px; background: linear-gradient(#fff6b8, #ffe98a); color: #2a2340; border: 2.5px solid var(--ink); border-radius: 4px 4px 10px 4px;
  box-shadow: 0 4px 0 var(--ink); transform: rotate(-1.2deg);
}
.dd-note small { font-weight: 700; color: #7a6a2a; font-size: 13px; }
.dd-note .dd-rule { flex-basis: 100%; text-align: center; font-size: 12px; font-weight: 600; margin-top: -2px; }
.dd-note b { font-size: clamp(20px, 6.6vw, 28px); line-height: 1.1; font-weight: 800; text-align: center; overflow-wrap: anywhere; }

/* the guessers' word: blanks that fill in */
.dd-mask { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; justify-content: center; }
.dd-letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; perspective: 400px; }
.dd-mword { display: inline-flex; gap: 3px; }
.dd-mword i {
  font-style: normal; width: clamp(15px, 5.2vw, 24px); height: 30px; display: grid; place-items: end center; padding-bottom: 2px;
  border-bottom: 3.5px solid var(--text); font-weight: 800; font-size: clamp(16px, 5.4vw, 23px); text-transform: uppercase; line-height: 1;
}
.dd-mword i.dash { border-bottom-color: transparent; color: var(--muted); }
.dd-mword i:not(.blank):not(.dash) { color: var(--accent); border-bottom-color: var(--accent); }
.dd-letters.known .dd-mword i { color: var(--good); border-bottom-color: var(--good); }
.dd-lens { color: var(--muted); font-size: 12px; font-weight: 600; min-height: 14px; }

.dd-guess { position: relative; }
.dd-guessrow .field { min-height: 48px; font-size: 18px; padding: 0 12px; flex: 1; min-width: 0; }
.dd-guessrow .btn { min-height: 48px; }
.dd-gotit { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: 14px; background: var(--good); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); font-size: 18px; }
.dd-gotit b { font-family: var(--f-display); font-weight: 400; }
.dd-gotit span { font-weight: 800; }
.dd-gotit.wait { background: var(--panel); color: var(--muted); box-shadow: none; font-size: 15px; }
.dd-closepop {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 0); z-index: 5; white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; padding: 6px 12px; border-radius: 12px; background: var(--accent); color: var(--ink);
  border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font-size: 14px; font-weight: 600; pointer-events: none;
}

/* the guess feed: newest on top */
.dd-feed { display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow-y: auto; padding: 2px; }
.dd-line { padding: 6px 10px; border-radius: 10px; background: var(--panel); font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.dd-line b { font-weight: 800; }
.dd-line.ok { background: rgba(76, 185, 68, .25); box-shadow: inset 0 0 0 2px rgba(76, 185, 68, .6); }
.dd-line.close { background: rgba(255, 183, 3, .16); box-shadow: inset 0 0 0 2px rgba(255, 183, 3, .5); }
.dd-line em { margin-left: 6px; font-style: normal; font-weight: 800; font-size: 12px; color: var(--accent); }
.dd-line.empty { background: transparent; color: var(--muted); text-align: center; font-size: 14px; }
.dd-plus { float: right; font-weight: 800; color: var(--good); }
.dd-eye { margin-right: 4px; }

/* the artist's tools */
.dd-tools { display: flex; flex-direction: column; gap: 8px; }
.dd-colors { display: flex; justify-content: space-between; gap: 6px; padding: 6px 6px 0; }
.dd-color {
  flex: 1; aspect-ratio: 1; max-width: 44px; border-radius: 50%; background: var(--c); border: 2.5px solid var(--ink);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22), 0 0 0 2px rgba(255, 243, 214, .45); transition: transform .12s; display: grid; place-items: center; padding: 0;
}
.dd-color.on { transform: translateY(-3px) scale(1.04); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22), 0 0 0 3px var(--bg), 0 0 0 6px var(--accent); }
.dd-rubber { width: 60%; height: 34%; border-radius: 3px; background: linear-gradient(90deg, #3d8fe0 0 38%, #ff9ec9 38%); border: 2px solid var(--ink); transform: rotate(-30deg); }
.dd-toolrow .btn { padding: 0 12px; }
.dd-sizes { flex: 1; padding: 3px; }
.dd-sizes button { min-height: 36px; display: grid; place-items: center; color: var(--text); }
.dd-sizes button.on { color: var(--ink); }
.dd-dot { display: block; width: var(--d); height: var(--d); border-radius: 50%; background: currentColor; }

/* the reveal */
.dd-answer {
  align-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 22px 10px; max-width: 100%;
  background: var(--accent); color: var(--ink); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 5px 0 var(--ink); text-align: center;
}
.dd-answer small { font-weight: 800; font-size: 13px; }
.dd-answer b { font-family: var(--f-display); font-weight: 400; font-size: clamp(22px, 8vw, 34px); line-height: 1.05; overflow-wrap: anywhere; }
.dd-results { display: flex; flex-direction: column; gap: 5px; }
.dd-res { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: var(--panel); border: 2px solid var(--ink); font-weight: 600; }
.dd-res > span:not(.dd-medal) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dd-res b { font-family: var(--f-display); font-weight: 400; color: var(--accent); }
.dd-res em { font-style: normal; font-size: 12px; color: var(--accent); font-weight: 800; }
.dd-res.artist { background: var(--panel2); }
.dd-res.miss { background: transparent; border-color: transparent; color: var(--muted); font-size: 14px; padding: 2px 10px; }
.dd-res.win { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.dd-results.final .dd-res { padding: 9px 12px; font-size: 17px; }
.dd-medal { width: 28px; text-align: center; font-size: 20px; }
.dd-next { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dd-next .hint { text-align: left; flex: 1; }

/* the end-of-game gallery */
.dd-galhead { font-family: var(--f-display); font-weight: 400; font-size: 18px; text-align: center; margin: 10px 0 0; color: var(--accent); }
.dd-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; padding-top: 6px; }
.dd-gal { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dd-gal .dd-canvas { touch-action: auto; }
.dd-gal figcaption { text-align: center; line-height: 1.15; }
.dd-gal figcaption b { display: block; font-weight: 800; font-size: 15px; }
.dd-gal figcaption small { color: var(--muted); font-size: 12px; }

@media (max-height: 640px) {
  .pk-banner { padding: 6px 12px; font-size: 17px; }
  .pk-banner small { display: none; }
  .pk-dir { margin-bottom: 4px; }
  .pk-trow { padding: 2px 8px 2px 5px; grid-template-columns: 26px 1fr auto; }
  .pk-trow > i { width: 26px; height: 26px; }
  .pk-trow span { font-size: 13px; }
  .pk-trow small { font-size: 11px; }
  .pk-trow > b { font-size: 18px; }
  .pk-tally { gap: 6px; }
  .pk-tally h2 { font-size: 18px; }
  .dd-root { gap: 6px; }
  .dd-main { gap: 7px; }
  .dd-banner { font-size: 15px; padding: 5px 10px; }
  .dd-feed { max-height: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .dd-pencil { animation: none; }
}

/* tutorial props */
.tut-dd-phone { width: 40cqw; padding: 1.4cqw; border-radius: 4cqw; background: #0b1033; border: .6cqw solid #24379d; z-index: 1; }
.tut-dd-phone .dd-paper { border-width: .5cqw; box-shadow: 0 .8cqw 0 var(--ink); }
.tut-dd-phone svg { display: block; width: 100%; aspect-ratio: 4 / 3; }
.tut-dd-cap { margin-top: 1cqw; font-size: 2.8cqw; font-weight: 700; color: var(--muted); text-align: center; }
.tut-dd-card { width: 70cqw; padding: 1.6cqw 3cqw 1.6cqw 4.4cqw; border-radius: 2.6cqw; border: .6cqw solid var(--ink); box-shadow: 0 1cqw 0 var(--ink); background: linear-gradient(#fffdf6, #f3e9d2); color: #1b1640; display: flex; align-items: baseline; gap: 3cqw; overflow: hidden; z-index: 2; }
.tut-dd-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1.8cqw; background: var(--tc); }
.tut-dd-card small { font-weight: 800; font-size: 2.8cqw; color: var(--tc2); width: 12cqw; }
.tut-dd-card b { font-size: 5cqw; font-weight: 800; }
.tut-dd-card.on { outline: .8cqw solid var(--accent); }
.tut-dd-line { padding: 1cqw 2.4cqw; border-radius: 2cqw; background: var(--panel); font-size: 3.4cqw; white-space: nowrap; z-index: 3; }
.tut-dd-line.ok { background: #2f6b3a; box-shadow: inset 0 0 0 .5cqw #4cb944; }
.tut-dd-line.close { background: #6b5317; box-shadow: inset 0 0 0 .5cqw #ffb703; }
.tut-dd-mask { display: flex; gap: 1.2cqw; z-index: 3; }
.tut-dd-mask i { font-style: normal; width: 5cqw; height: 6cqw; border-bottom: .8cqw solid var(--text); font-weight: 800; font-size: 4.6cqw; text-align: center; text-transform: uppercase; color: var(--accent); }
.tut-dd-pts { padding: .8cqw 2.4cqw; border-radius: 2cqw; background: var(--good); color: var(--ink); font-weight: 800; font-size: 4cqw; border: .5cqw solid var(--ink); z-index: 4; white-space: nowrap; }
/* @end doodle */

/* ================= Great Minds (greatminds): its builder adds rules ABOVE the end marker ================= */
.gm { display: flex; flex-direction: column; gap: 9px; padding-bottom: 14px; }
.gm-chips { margin: 0 -2px; }
.gm-chips .chip.turn .tag { color: var(--text); }
.gm-botav { color: var(--ink); font-weight: 800; }

/* the brain meter */
.gm-top { display: flex; align-items: stretch; gap: 8px; }
.gm-meter { flex: 1; min-width: 0; padding: 6px 10px 8px; border-radius: 14px; background: var(--panel); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.gm-mhead { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.gm-mhead small { font: 400 11px/1 var(--f-display); color: var(--muted); letter-spacing: .5px; }
.gm-num { font-size: 15px; color: var(--accent); font-variant-numeric: tabular-nums; }
.gm-track { position: relative; height: 14px; margin: 6px 0 12px; border-radius: 999px; background: #0d1650; border: 2px solid var(--ink); }
.gm-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, #f2762a, #ffb703 70%, #ffd866); transition: width .7s cubic-bezier(.3, .8, .3, 1); box-shadow: inset 0 -3px 0 rgba(11, 16, 51, .25); }
.gm-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: rgba(255, 243, 214, .35); font-style: normal; }
.gm-tick span { position: absolute; top: 17px; left: 50%; transform: translateX(-50%); font-size: 8px; line-height: 1; color: var(--muted); white-space: nowrap; letter-spacing: -1px; }
.gm-side { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 4px; flex: none; }
.gm-top > .gm-side:only-child { flex: 1; flex-direction: row; justify-content: space-between; align-items: center; }
.gm-round { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.gm-bulbs { padding: 3px 9px; border-radius: 999px; background: var(--panel2); border: 2px solid var(--ink); font-weight: 800; font-size: 13px; color: var(--accent); white-space: nowrap; }
.gm-bulbs.none { opacity: .45; filter: grayscale(1); }

.gm-banner { position: relative; padding: 8px 12px; font-size: 18px; }
.gm-banner small { font-size: 12.5px; }
.gm-time { height: 5px; margin-top: -4px; border-radius: 999px; background: rgba(255, 243, 214, .08); overflow: hidden; visibility: hidden; }
.gm-time.on { visibility: visible; }
.gm-time i { display: block; height: 100%; width: 100%; background: var(--accent); border-radius: 999px; }

/* the secret word on its stand-up card */
.gm-wordwrap { display: flex; justify-content: center; perspective: 900px; }
.gm-wordwrap:empty { display: none; }
.gm-wcard {
  min-width: min(100%, 250px); max-width: 100%; padding: 8px 18px 10px; border-radius: 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: linear-gradient(175deg, #fff8e6, #fff3d6 60%, #f3e2b8); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
}
.gm-wcard small { font-size: 11px; font-weight: 700; color: #6b5a33; }
.gm-w { font: 400 32px/1.1 var(--f-display); letter-spacing: .5px; overflow-wrap: anywhere; text-transform: uppercase; }
.gm-w.long { font-size: 24px; }
.gm-wcard.back { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 4px, transparent 4px 11px), linear-gradient(160deg, #3478c9, #1d4d93); color: var(--text); }
.gm-wcard.back small { color: #c9d8f5; }
.gm-q { font: 400 34px/1.05 var(--f-display); color: var(--accent); text-shadow: 0 3px 0 var(--ink); }

/* the table and the clue cards */
.gm-body { display: flex; flex-direction: column; gap: 10px; }
.gm-table {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px 8px; padding: 12px 10px; border-radius: 18px;
  background: radial-gradient(ellipse at 50% 30%, #1aa6a0, #0d6460 75%); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink), inset 0 0 0 3px rgba(255, 255, 255, .06);
}
.gm-table.many { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.gm-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; transform: rotate(var(--r, 0deg)); transition: filter .3s, opacity .3s; }
.gm-face {
  position: relative; display: grid; place-items: center; min-height: 52px; padding: 6px 5px; border-radius: 9px; overflow: hidden;
  background: #fffdf6; border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
}
.gm-clue { font-weight: 800; font-size: 17px; line-height: 1.1; color: #1d2a7a; overflow-wrap: anywhere; text-align: center; }
.gm-by { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--text); min-width: 0; }
.gm-by span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-card.back .gm-face { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 3px, transparent 3px 9px), linear-gradient(160deg, #3478c9, #1d4d93); }
.gm-card.back .gm-clue::before { content: '?'; font: 400 22px/1 var(--f-display); color: var(--accent); text-shadow: 0 2px 0 var(--ink); }
.gm-card.wait .gm-face { background: rgba(11, 16, 51, .25); border: 2.5px dashed rgba(255, 243, 214, .4); box-shadow: none; }
.gm-card.wait .gm-clue { color: rgba(255, 243, 214, .6); animation: gm-dots 1.2s ease-in-out infinite; }
@keyframes gm-dots { 50% { opacity: .3; } }
.gm-card.blank .gm-face { background: rgba(11, 16, 51, .3); box-shadow: none; border-style: dashed; }
.gm-card.blank .gm-clue { color: var(--muted); font-size: 12px; font-weight: 600; }
.gm-card.up .gm-face { box-shadow: 0 4px 0 var(--ink), 0 0 0 0 var(--accent); }
.gm-stamp { display: none; }
.gm-card.out .gm-face, .gm-card.out .gm-by { filter: grayscale(.9) brightness(.85); opacity: .8; }
.gm-card.out .gm-face { background: #d9d3c4; }
.gm-card.out.back .gm-face { background: linear-gradient(160deg, #59607f, #3a3f5c); }
.gm-card.out .gm-clue { text-decoration: line-through 2.5px #e3242b; color: #4a4a5e; }
.gm-card.out .gm-stamp, .gm-card.bulb .gm-stamp {
  display: block; position: absolute; left: 50%; top: -4px; transform: translate(-50%, -50%) rotate(-6deg); padding: 2px 6px; border-radius: 5px;
  font: 400 11px/1.1 var(--f-display); color: #fff3d6; background: var(--cherry); border: 2px solid var(--ink); white-space: nowrap; pointer-events: none;
}
.gm-card.out .gm-stamp::before { content: 'Fizzled'; }
.gm-card.bulb .gm-face { background: #fff6cf; box-shadow: 0 4px 0 var(--ink), 0 0 0 3px var(--accent), 0 0 18px rgba(255, 183, 3, .8); }
.gm-card.bulb .gm-stamp { background: var(--accent); color: var(--ink); }
.gm-card.bulb .gm-stamp::before { content: 'Back!'; }
.gm-card.can .gm-face { animation: gm-can 1s ease-in-out infinite; }
.gm-card.drop-over .gm-face { box-shadow: 0 4px 0 var(--ink), 0 0 0 4px var(--accent), 0 0 22px rgba(255, 183, 3, .9); }
@keyframes gm-can { 50% { box-shadow: 0 4px 0 var(--ink), 0 0 0 3px var(--accent); } }

/* writing and guessing */
.gm-write { display: flex; flex-direction: column; gap: 8px; }
.gm-write.sent { opacity: .6; pointer-events: none; }
.gm-pad { position: relative; padding: 8px 10px 10px; border-radius: 14px; background: #fffdf6; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); transition: box-shadow .2s; }
.gm-pad.bad { box-shadow: 0 5px 0 var(--ink), 0 0 0 3px var(--cherry); }
.gm-padtag { display: block; font-size: 11px; font-weight: 700; color: #6b5a33; padding: 0 2px 2px; }
.gm-input.field { width: 100%; min-height: 50px; background: transparent; border: 0; border-bottom: 2.5px dashed rgba(11, 16, 51, .3); border-radius: 0; color: #1d2a7a; font-size: 26px; font-weight: 800; text-align: center; padding: 0 6px; }
.gm-input.field:focus { border-color: var(--accent2); }
.gm-input.field::placeholder { color: #b0a891; font-weight: 600; }
.gm-why { min-height: 16px; text-align: center; font-size: 13px; font-weight: 700; color: #ff8a8f; }
.gm-send:disabled { opacity: .5; }
.gm-pass { flex: 0 0 auto; }
.gm-bulbrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 2px dashed rgba(255, 183, 3, .6); background: rgba(255, 183, 3, .08); cursor: pointer; }
.gm-bulbrow > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gm-bulbrow b { color: var(--accent); font-size: 15px; }
.gm-bulbrow small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.gm-bulbicon { flex: none; width: 40px; height: 52px; display: block; filter: drop-shadow(2px 3px 0 rgba(11, 16, 51, .45)); animation: gm-glow 1.6s ease-in-out infinite; }
.gm-bulbicon svg, .gm-bulbghost svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.gm-bulbghost { width: 40px; height: 52px; filter: drop-shadow(0 0 12px rgba(255, 183, 3, .9)); }
@keyframes gm-glow { 50% { filter: drop-shadow(2px 3px 0 rgba(11, 16, 51, .45)) drop-shadow(0 0 10px rgba(255, 183, 3, .8)); } }

/* "Great minds!" */
.gm-note { display: flex; flex-direction: column; gap: 6px; padding: 9px 12px; border-radius: 14px; background: var(--panel); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.gm-note:empty { display: none; }
.gm-note b { font-size: 15px; color: var(--accent); }
.gm-note.free { box-shadow: 0 3px 0 var(--ink), 0 0 0 3px var(--good); }
.gm-note.free b { color: #8be07f; }
.gm-note small { color: var(--muted); font-size: 12.5px; }
.gm-twins { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.gm-avs { display: flex; flex: none; }
.gm-avs > * + * { margin-left: -7px; }
.gm-avs > * { box-shadow: 0 0 0 2px var(--panel); }
.gm-burst { position: fixed; z-index: 70; width: 0; height: 0; pointer-events: none; }
.gm-burst::before { content: ''; position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 6px solid var(--accent); animation: gm-ring .6s ease-out forwards; }
.gm-burst i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; background: var(--accent2); border: 2px solid var(--ink); transform: rotate(var(--a)) translateX(0); animation: gm-spark .6s ease-out forwards; }
.gm-burst i:nth-child(odd) { background: var(--accent); }
@keyframes gm-ring { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes gm-spark { to { transform: rotate(var(--a)) translateX(64px) scale(.3); opacity: 0; } }
.gm-splash {
  position: fixed; left: 50%; top: 38%; z-index: 60; transform: translate(-50%, -50%); padding: 14px 24px; border-radius: 18px; text-align: center; pointer-events: none;
  background: var(--accent); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); animation: gm-splash 1.6s ease-in-out forwards;
}
.gm-splash b { display: block; font: 400 24px/1.1 var(--f-display); white-space: nowrap; }
.gm-splash small { display: block; margin-top: 4px; font-weight: 700; font-size: 14px; }
@keyframes gm-splash { 0% { transform: translate(-50%, -50%) scale(.5); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; } 25%, 80% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -60%) scale(.95); opacity: 0; } }

/* the reveal */
.gm-result { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 22px; border-radius: 14px; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); background: var(--panel2); transform: rotate(-2deg); }
.gm-result b { font: 400 24px/1.1 var(--f-display); }
.gm-result small { font-size: 13px; font-weight: 600; opacity: .9; }
.gm-result.yes, .gm-result.close { background: var(--good); color: var(--ink); }
.gm-result.no { background: var(--cherry); color: var(--text); }
.gm-gain { align-self: center; display: flex; flex-direction: column; align-items: center; font-weight: 800; font-size: 18px; color: var(--muted); }
.gm-gain.up { color: var(--accent); }
.gm-gain.down { color: #ff8a8f; }
.gm-gain small { font-size: 12px; font-weight: 600; color: var(--muted); }
.gm-pts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.gm-pt { display: flex; align-items: center; gap: 5px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--panel); border: 2px solid var(--ink); font-weight: 800; font-size: 13px; color: var(--accent); }
.gm-pt.down { color: #ff8a8f; }

/* the end */
.gm-rating { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 12px 12px; border-radius: 20px; background: var(--wood); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); text-align: center; }
.gm-stars { display: flex; gap: 4px; }
.gm-star { font-style: normal; font-size: 40px; line-height: 1; color: rgba(255, 243, 214, .18); text-shadow: 0 3px 0 var(--ink); }
.gm-star.on { color: var(--accent); }
.gm-tier { font: 400 24px/1.15 var(--f-display); color: var(--text); }
.gm-rating span { color: var(--muted); font-weight: 600; font-size: 14px; }
.gm-awards { display: flex; flex-direction: column; gap: 8px; }
.gm-award { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--panel); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.gm-award > div:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gm-award small { font-size: 11px; font-weight: 700; color: var(--muted); }
.gm-award b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.gm-award span { font-size: 12.5px; color: var(--muted); }
.gm-medal { font-size: 26px; flex: none; }
.gm-log small { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin: 2px 2px 6px; }
.gm-logrow { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-logw { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 4px; border-radius: 999px; background: var(--panel); border: 2px solid var(--ink); font-size: 13px; font-weight: 700; }
.gm-logw i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: rgba(255, 243, 214, .15); }
.gm-logw.yes i { background: var(--good); color: var(--ink); }
.gm-logw.no i { background: var(--cherry); }
.gm-bars { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 18px; background: var(--wood); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); }
.gm-bar { display: grid; grid-template-columns: 24px minmax(0, 80px) 1fr 30px; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.gm-bar .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-btrack { height: 12px; border-radius: 999px; background: rgba(0, 0, 0, .3); overflow: hidden; }
.gm-btrack i { display: block; height: 100%; background: var(--c); border-radius: 999px; }
.gm-bar b { text-align: right; color: var(--accent); }
@media (max-width: 360px) {
  .gm-table, .gm-table.many { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px 6px; padding: 10px 8px; }
  .gm-face { min-height: 44px; }
  .gm-clue { font-size: 15px; }
  .gm-w { font-size: 26px; }
  .gm-input.field { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-card.wait .gm-clue, .gm-bulbicon, .gm-card.can .gm-face { animation: none; }
  .gm-fill { transition: none; }
}
/* tutorial props (stage units: 100cqw = 300) */
.gm-tword { min-width: 34cqw; padding: 1.6cqw 3cqw 2cqw; border-radius: 3cqw; text-align: center; background: linear-gradient(175deg, #fff8e6, #f3e2b8); color: var(--ink); border: .9cqw solid var(--ink); box-shadow: 0 1.4cqw 0 var(--ink); }
.gm-tword small { display: block; font-size: 3.2cqw; font-weight: 700; color: #6b5a33; }
.gm-tword b { display: block; font: 400 8cqw/1.1 var(--f-display); text-transform: uppercase; }
.gm-tword.back { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 1cqw, transparent 1cqw 3cqw), linear-gradient(160deg, #3478c9, #1d4d93); color: var(--accent); }
.gm-tword.back small { color: #c9d8f5; }
.gm-tword.mini { min-width: 0; padding: .8cqw 3cqw; box-shadow: 0 .8cqw 0 var(--ink); }
.gm-tword.mini b { font-size: 5cqw; }
.gm-tcard { width: 19cqw; display: flex; flex-direction: column; align-items: center; gap: .8cqw; }
.gm-tcard b { width: 100%; min-height: 12cqw; display: grid; place-items: center; border-radius: 2.2cqw; background: #fffdf6; border: .8cqw solid var(--ink); box-shadow: 0 1.1cqw 0 var(--ink); color: #1d2a7a; font-size: 3.8cqw; font-weight: 800; }
.gm-tcard i { font-style: normal; font-size: 3.2cqw; font-weight: 700; color: var(--c); }
.gm-tcard.back b { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 1cqw, transparent 1cqw 3cqw), linear-gradient(160deg, #3478c9, #1d4d93); }
.gm-tcard.back b::before { content: '?'; font: 400 6cqw/1 var(--f-display); color: var(--accent); }
.gm-tcard.out { filter: grayscale(.9) brightness(.8); }
.gm-tcard.out b { text-decoration: line-through .8cqw #e3242b; background-color: #d9d3c4; }
.gm-tcard.bulb b { background: #fff6cf; box-shadow: 0 1.1cqw 0 var(--ink), 0 0 0 1cqw var(--accent), 0 0 6cqw rgba(255, 183, 3, .8); }
.gm-tboom { width: 26cqw; height: 26cqw; border-radius: 50%; border: 2cqw solid var(--accent); z-index: 4; }
.gm-tpad { width: 62cqw; min-height: 15cqw; display: grid; place-items: center; border-radius: 3cqw; background: #fffdf6; border: .9cqw solid var(--ink); box-shadow: 0 1.4cqw 0 var(--ink); color: #1d2a7a; font-size: 7cqw; font-weight: 800; }
.gm-tpad span::after { content: '|'; color: var(--accent2); animation: gm-dots .9s steps(2) infinite; }
.gm-tbtn { padding: 1.8cqw 5cqw; border-radius: 3cqw; background: var(--accent); color: var(--ink); border: .8cqw solid var(--ink); box-shadow: 0 1.1cqw 0 var(--ink); font-weight: 800; font-size: 4.4cqw; white-space: nowrap; }
.gm-tbtn.ghost { background: var(--panel2); color: var(--text); }
.gm-tstamp { padding: 1.8cqw 6cqw; border-radius: 3cqw; background: var(--good); color: var(--ink); border: .9cqw solid var(--ink); box-shadow: 0 1.4cqw 0 var(--ink); font: 400 8cqw/1.1 var(--f-display); z-index: 5; }
.gm-tbulb { width: 13cqw; z-index: 6; filter: drop-shadow(0 0 4cqw rgba(255, 183, 3, .8)); }
.gm-tbulb svg { width: 100%; display: block; }
.gm-tmeter { width: 76cqw; height: 6cqw; border-radius: 99px; background: #0d1650; border: .8cqw solid var(--ink); overflow: hidden; }
.gm-tmeter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f2762a, #ffb703 70%, #ffd866); }
.gm-tstars { display: flex; gap: 2cqw; font-size: 11cqw; line-height: 1; }
.gm-tstars i { font-style: normal; color: rgba(255, 243, 214, .2); transition: color .3s, transform .3s; }
.gm-tstars i.on { color: var(--accent); transform: scale(1.1); }
/* @end greatminds */

/* ================= Farkle (farkle): its builder adds rules ABOVE the end marker ================= */
.fk-root { gap: 10px; }
.fk-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
.fk-seat {
  position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 4px 8px 6px;
  border-radius: 12px; background: var(--panel); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
  transition: box-shadow .2s, transform .2s, opacity .2s;
}
.fk-seat.me { background: var(--panel2); }
.fk-seat.turn { box-shadow: 0 0 0 3px var(--c), 0 3px 0 var(--ink), 0 0 16px var(--c); transform: translateY(-1px); }
.fk-seat.gone { opacity: .4; }
.fk-who { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12.5px; font-weight: 600; }
.fk-who .avatar { flex: none; font-size: 10px; }
.fk-bot { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--c); font-size: 11px; }
.fk-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-sc { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; line-height: 1.1; min-width: 0; }
.fk-sc b { font-size: 17px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; display: inline-block; }
.fk-seat.lead .fk-sc b { color: var(--accent); }
.fk-sc small { font-size: 11.5px; font-weight: 700; color: var(--good); }
.fk-prog { display: block; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .35); overflow: hidden; }
.fk-prog i { display: block; height: 100%; background: var(--c); transition: width .6s; }
.fk-tag { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fk-banner { font-size: 18px; }

.fk-table { position: relative; flex: none; }
.fk-table .d3-keep {
  border-radius: 22px 22px 0 0; background: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .14));
  border-bottom: 2px dashed rgba(255, 243, 214, .22); transition: background .2s;
}
.fk-table .d3-keep::after {
  content: 'Kept'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: rgba(255, 243, 214, .3); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px;
}
.fk-table.kept .d3-keep::after { opacity: 0; }
.fk-table .d3-tray.fk-over .d3-keep { background: linear-gradient(180deg, rgba(255, 183, 3, .35), rgba(255, 183, 3, .12)); }
.fk-table .d3-hint { bottom: 10px; }
.fk-table.fresh .d3-keep { opacity: .45; }
.fk-table .d3 { transition: opacity .25s; }
.fk-table .d3.fk-lift { z-index: 6; }
.fk-table .d3.fk-lift .d3-cube { transform-origin: 50% 50%; }
.fk-table .d3.held:not(.fk-lock) .d3-face { background: radial-gradient(circle at 30% 25%, #fffbe9, #ffd257); box-shadow: inset 0 0 0 3px #b87200, 0 0 10px rgba(255, 183, 3, .7); }
.fk-table .d3.fk-lock .d3-face { background: radial-gradient(circle at 30% 25%, #fffaf0, #e6dcc6); box-shadow: inset 0 0 0 2px rgba(11, 16, 51, .25), inset 0 -5px 8px rgba(11, 16, 51, .12); }
.fk-table .d3.fk-lock { opacity: .9; }
.fk-table.bust .d3.fk-lock { opacity: .55; }
.fk-table .d3.fk-can .d3-shadow { background: radial-gradient(ellipse, rgba(120, 255, 120, .9), transparent 70%); height: 34%; bottom: -18%; }
.fk-table .d3.fk-can .d3-face { box-shadow: inset 0 0 0 3px #4cb944, inset 0 -6px 10px rgba(23, 19, 58, .12); }
.fk-table .d3.fk-can { animation: fk-glow 1.3s ease-in-out infinite; }
@keyframes fk-glow { 50% { filter: drop-shadow(0 0 7px rgba(110, 240, 110, .85)); } }
.fk-table .d3.fk-dead .d3-face { filter: brightness(.68) saturate(.5); }
.fk-table.bust .d3-tray { background: radial-gradient(ellipse at 50% 40%, #6b2a2a 0%, #4a1a1f 70%, #351216 100%); transition: background .4s; }
.fk-table.bust .d3:not(.fk-lock) .d3-face { filter: grayscale(.7) brightness(.75); }
.fk-burst {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  pointer-events: none; opacity: 0; z-index: 8; text-align: center;
}
.fk-burst b {
  font-family: var(--f-display); font-weight: 400; font-size: 50px; line-height: 1; color: var(--accent);
  -webkit-text-stroke: 2px var(--ink); text-shadow: 0 5px 0 var(--ink);
}
.fk-burst b.bust { color: var(--cherry); font-size: 56px; }
.fk-burst b.hot { color: var(--accent2); }
.fk-burst b.last { font-size: 40px; }
.fk-burst small {
  font-weight: 800; font-size: 17px; color: var(--text); background: var(--ink); padding: 3px 12px; border-radius: 999px;
}
.fk-burst small.pen { background: var(--cherry); font-size: 14px; }

.fk-bar {
  display: flex; flex-direction: column; gap: 6px; padding: 7px 10px; border-radius: 16px;
  background: var(--panel); border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
}
.fk-row { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.fk-bar.mine > .fk-sel { min-height: 20px; }
.fk-stake { display: flex; flex-direction: column; align-items: flex-start; flex: none; line-height: 1.05; min-width: 64px; }
.fk-stake small { font-size: 11px; color: var(--muted); font-weight: 600; }
.fk-stake b { font-size: 24px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.fk-sel { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--muted); line-height: 1.2; }
.fk-sel.ok { color: var(--text); }
.fk-sel.ok b { color: var(--good); font-size: 18px; margin-right: 6px; }
.fk-sel.bad { color: #ff9a8a; }
.fk-btns { flex: 1; min-width: 0; display: flex; gap: 8px; }
.fk-btns .btn { flex: 1; min-width: 0; min-height: 48px; font-size: 16px; padding: 0 6px; margin-bottom: 4px; white-space: nowrap; }
.fk-throw.hot { background: var(--accent2); color: var(--text); }

.fk-guide { padding: 8px 10px 10px; border-radius: 16px; background: rgba(5, 9, 40, .45); border: 2px solid var(--ink); }
.fk-gh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.fk-gh span { font-family: var(--f-display); font-size: 14px; color: var(--accent); }
.fk-gh small { font-size: 11px; color: var(--muted); text-align: right; }
.fk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; }
.fk-g {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 28px; padding: 2px 8px;
  border-radius: 8px; background: rgba(255, 255, 255, .05); font-size: 12.5px; transition: background .2s, box-shadow .2s;
}
.fk-g.wide { grid-column: 1 / -1; }
.fk-gd.small .fk-mini + .fk-mini { margin-left: 2px; }
.fk-g b { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.fk-g.on { background: rgba(76, 185, 68, .25); box-shadow: inset 0 0 0 2px var(--good); }
.fk-g.on b { color: #9df294; }
.fk-gd { display: flex; gap: 2px; }
.fk-gl { color: var(--muted); font-weight: 600; white-space: nowrap; }
.fk-mini { display: block; width: 15px; height: 15px; }
.fk-gd.small .fk-mini { width: 15px; height: 15px; }
.fk-mini svg { width: 100%; height: 100%; display: block; }
.fk-mini .die-body { fill: #fff3d6; }
.fk-mini .die-pips { fill: var(--ink); }
@media (max-width: 359px) {
  .fk-board { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
  .fk-burst b { font-size: 40px; }
  .fk-burst b.bust { font-size: 44px; }
  .fk-btns .btn { font-size: 14px; min-height: 44px; }
  .fk-stake { min-width: 52px; }
  .fk-stake b { font-size: 20px; }
  .fk-banner { font-size: 16px; padding: 7px 10px; }
  .fk-banner small { font-size: 12px; }
  .fk-root { gap: 8px; }
  .fk-g { padding: 2px 6px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .fk-table .d3.fk-can { animation: none; filter: drop-shadow(0 0 5px rgba(110, 240, 110, .8)); }
}

/* Farkle walkthrough props (stage units: 300 × 190) */
.fk-tut-tray {
  width: 92cqw; height: 88cqh; border-radius: 6cqw;
  background: radial-gradient(ellipse at 50% 40%, #2f7a4f 0%, #1f5a39 70%, #174a2e 100%); box-shadow: inset 0 0 0 1.6cqw #6b4426;
}
.fk-tut-tray.bust { background: radial-gradient(ellipse at 50% 40%, #6b2a2a 0%, #4a1a1f 70%, #351216 100%); }
.fk-tut-keep {
  position: absolute; left: 0; right: 0; top: 0; height: 33%; border-radius: 6cqw 6cqw 0 0; background: rgba(0, 0, 0, .25);
  border-bottom: .6cqw dashed rgba(255, 243, 214, .25); color: rgba(255, 243, 214, .35); font-weight: 700; font-size: 3.6cqw;
  text-transform: uppercase; letter-spacing: .5cqw; display: flex; align-items: center; justify-content: flex-end; padding-right: 4cqw;
}
.fk-tut-pill {
  padding: 1.4cqw 3.4cqw; border-radius: 999px; background: var(--ink); color: var(--text); font-weight: 800; font-size: 4.6cqw; white-space: nowrap;
}
.fk-tut-pill b { color: var(--good); }
.fk-tut-btn {
  padding: 2cqw 4cqw; border-radius: 3cqw; background: var(--accent); color: var(--ink); border: .7cqw solid var(--ink);
  box-shadow: 0 1.2cqw 0 var(--ink); font-weight: 800; font-size: 4.4cqw; white-space: nowrap;
}
.fk-tut-btn.sec { background: var(--panel2); color: var(--text); }
.fk-tut-big {
  font-family: var(--f-display); font-size: 13cqw; color: var(--cherry); -webkit-text-stroke: .5cqw var(--ink); text-shadow: 0 1.5cqw 0 var(--ink); white-space: nowrap;
}
.fk-tut-big.hot { color: var(--accent2); }
.tut-item.d3.fk-glow .d3-face { box-shadow: inset 0 0 0 3px #4cb944; }
.tut-item.d3.fk-dim .d3-face { filter: brightness(.65) saturate(.5); }
.tut-item.d3.fk-grey .d3-face { filter: grayscale(.8) brightness(.7); }
.fk-tut-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw 2.4cqw; width: 88cqw; }
.fk-tut-guide div {
  display: flex; justify-content: space-between; align-items: center; padding: 1cqw 2.4cqw; border-radius: 2cqw;
  background: rgba(255, 255, 255, .07); font-size: 4cqw; font-weight: 600;
}
.fk-tut-guide div.on { background: rgba(76, 185, 68, .3); box-shadow: inset 0 0 0 .6cqw var(--good); }
.fk-tut-guide .fk-mini { width: 4.4cqw; height: 4.4cqw; }
.fk-tut-guide div.wide { grid-column: 1 / -1; }
.fk-tut-guide span { display: flex; gap: .6cqw; }
/* @end farkle */

/* ================= Checkers (checkers): its builder adds rules ABOVE the end marker ================= */
.ck { display: flex; flex-direction: column; gap: 8px; }
.ck-banner { padding: 8px 14px; }
.ck-side { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 3px 10px; border-radius: 16px; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); transition: box-shadow .2s; }
.ck-side.to-move { box-shadow: 0 0 0 3px var(--accent), 0 4px 0 var(--ink); }
.ck-me { width: 28px; height: 28px; flex: none; }
.ck-me svg, .ck-mini svg, .ck-big svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ck-side .who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
.ck-side .who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-side .who small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-tray { display: flex; align-items: center; flex: none; min-height: 22px; padding-right: 9px; }
.ck-mini { width: 20px; height: 20px; margin-right: -9px; flex: none; }
.ck-tray .ck-n { margin-left: 14px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ck-frame { position: relative; border-radius: 20px; padding: 7px; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); align-self: center; width: min(100%, calc(100dvh - 350px - var(--safe-top) - var(--safe-bottom))); min-width: min(100%, 240px); }
@supports not (height: 100dvh) { .ck-frame { width: min(100%, calc(100vh - 350px)); } }
.ck-board { position: relative; isolation: isolate; aspect-ratio: 1; width: 100%; border-radius: 11px; outline: 2px solid var(--ink); overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; cursor: pointer; }
.ck-sqs { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.ck-sq { position: relative; background: #fffaf0; }
.ck-sq.d { background: #e6ebf8; }
.ck-sq::before, .ck-sq::after { content: ""; position: absolute; pointer-events: none; }
.ck-sq::before { inset: 0; transition: background-color .15s; }
.ck-sq.trail::before { background: rgba(61, 143, 224, .2); }
.ck-sq.trail-to::before { background: rgba(61, 143, 224, .36); }
.ck-sq.sel::before { background: rgba(255, 183, 3, .5); }
.ck-sq.pre { outline: 3px dashed rgba(123, 63, 160, .9); outline-offset: -4px; }
.ck-sq.pre-to::before { background: rgba(123, 63, 160, .22); }
/* landing squares glow marigold (blaze for a jump); the one under a dragged piece turns green */
.ck-sq.tgt::after { inset: 22%; border-radius: 50%; background: rgba(255, 183, 3, .85); box-shadow: 0 0 0 3px rgba(255, 183, 3, .35), 0 0 14px 4px rgba(255, 183, 3, .55); animation: ck-glow 1.2s ease-in-out infinite; }
.ck-sq.tgt.jump::after { background: rgba(251, 97, 7, .9); box-shadow: 0 0 0 3px rgba(251, 97, 7, .35), 0 0 16px 5px rgba(251, 97, 7, .55); }
.ck-sq.tgt.over::before { background: rgba(76, 185, 68, .45); box-shadow: inset 0 0 0 4px #4cb944; }
.ck-sq.tgt.over::after { background: #4cb944; box-shadow: 0 0 16px 6px rgba(76, 185, 68, .7); animation: none; }
/* hints: pieces that can move get a ring, pieces that must jump pulse */
.ck-sq.can::after { inset: 4%; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 183, 3, .75); }
.ck-sq.must::after { inset: 2%; border-radius: 50%; box-shadow: 0 0 0 4px #fb6107, 0 0 14px 4px rgba(251, 97, 7, .6); animation: ck-glow .9s ease-in-out infinite; }
.ck-sq.flash::before { animation: ck-flash .9s ease-out; }
@keyframes ck-glow { 50% { opacity: .55; } }
@keyframes ck-flash { 0%, 50% { background: rgba(251, 97, 7, .65); } 25%, 75% { background: rgba(251, 97, 7, .15); } }
.ck-pcs { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ck-pc { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; padding: .5%; will-change: transform; }
.ck-pc svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ck-pc.moving { z-index: 8; }
.ck-pc.dragging { z-index: 10; filter: drop-shadow(0 10px 6px rgba(11, 16, 51, .35)); }
.ck-svg .ck-top { display: none; }
.ck-svg.king .ck-top { display: inline; transform: translate(0, -8px); }
.ck-svg.king .ck-base { transform: translate(0, 5px); }
.ck-why { position: absolute; z-index: 12; left: 50%; top: 8px; transform: translate(-50%, -6px); max-width: 92%; width: max-content; padding: 6px 12px; border-radius: 12px; background: var(--ink); color: var(--text); font-weight: 700; font-size: 14px; text-align: center; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.ck-why.on { opacity: 1; transform: translate(-50%, 0); }
.ck-float { position: absolute; z-index: 13; transform: translate(-50%, -50%); font-family: var(--f-display); font-size: 17px; color: var(--accent); white-space: nowrap; pointer-events: none; text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); animation: ck-rise 1.1s ease-out forwards; }
@keyframes ck-rise { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
.ck-offer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; border-radius: 16px; background: rgba(255, 183, 3, .14); box-shadow: inset 0 0 0 2px rgba(255, 183, 3, .5); }
.ck-offer b { flex: 1 1 100%; }
.ck-offer[hidden] { display: none; }
.ck-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ck-tools:empty { display: none; }
.ck-tools .grow { flex: 1; }
.ck-tools .ck-resign { color: #ffb0b3; }
.ck-setup { display: flex; flex-direction: column; gap: 12px; }
.ck-h { margin: 4px 0 0; text-align: center; font-family: var(--f-display); font-weight: 400; color: var(--accent); font-size: 22px; }
.ck-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.ck-vside { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 12px; border-radius: 18px; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); min-width: 0; text-align: center; }
.ck-vside b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-vside small { color: var(--muted); font-size: 12px; }
.ck-big { width: 54px; height: 54px; margin-bottom: 2px; }
.ck-vsx { font-family: var(--f-display); color: var(--muted); }
.ck-label { font-weight: 700; color: var(--muted); font-size: 14px; }
.ck-levels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-level { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 6px; border-radius: 16px; background: var(--panel); color: var(--text); font: inherit; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); cursor: pointer; transition: background .15s, box-shadow .15s; }
.ck-level:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.ck-level.on { background: var(--panel2); box-shadow: inset 0 0 0 3px var(--accent), 0 4px 0 var(--ink); }
.ck-level .i { font-size: 24px; line-height: 1.2; }
.ck-level small { color: var(--muted); font-size: 12px; }
.ck-level.on b { color: var(--accent); }
.ck-level:disabled { cursor: default; opacity: .8; }
.ck-auto { min-height: 18px; }
@media (prefers-reduced-motion: reduce) { .ck-sq.tgt::after, .ck-sq.must::after { animation: none; } }
/* tutorial props */
.tut-ck-sq { width: 13cqw; aspect-ratio: 1; background: #fffaf0; }
.tut-ck-sq.d { background: #e6ebf8; }
.tut-ck-sq.glow::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: rgba(255, 183, 3, .85); box-shadow: 0 0 3cqw 1cqw rgba(255, 183, 3, .55); animation: ck-glow 1.2s ease-in-out infinite; }
.tut-ck-sq.jump::after { background: rgba(251, 97, 7, .9); box-shadow: 0 0 3cqw 1cqw rgba(251, 97, 7, .55); }
.tut-ck-sq.must { box-shadow: inset 0 0 0 1cqw #fb6107; }
.tut-ck-pc { width: 12cqw; aspect-ratio: 1; z-index: 3; }
.tut-ck-pc svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tut-ck-tray { width: 9cqw; height: 34cqw; border-radius: 3cqw; background: var(--panel); border: .8cqw solid var(--ink); }
/* @end checkers */

/* ================= Mancala (mancala): its builder adds rules ABOVE the end marker ================= */
.mc-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; min-height: 0; }
.mc-wrap::before { content: ''; flex: 1 1 0; }
.mc-wrap::after { content: ''; flex: 1.5 1 0; }
.mc-table { width: min(100%, 760px, calc((100dvh - 330px - var(--safe-top) - var(--safe-bottom)) * 1.7)); min-width: 280px; display: flex; flex-direction: column; gap: 10px; }
@supports not (height: 100dvh) { .mc-table { width: min(100%, 760px); } }
.mc-board { width: 100%; display: block; touch-action: none; overflow: visible; user-select: none; -webkit-user-select: none; }
.mc-slab { stroke: var(--ink); stroke-width: .07; }
.mc-grain path { fill: none; stroke: rgba(38, 18, 4, .28); stroke-width: .028; }
.mc-grain path.lt { stroke: rgba(255, 214, 160, .13); stroke-width: .04; }
.mc-grain ellipse { fill: none; stroke: rgba(38, 18, 4, .3); stroke-width: .025; }
.mc-bevel { fill: none; stroke: rgba(255, 226, 180, .2); stroke-width: .045; }
.mc-lip { fill: rgba(255, 220, 170, .22); }
.mc-hole { stroke: var(--ink); stroke-width: .055; transition: stroke .15s; }
.mc-pit.can .mc-hole { stroke: var(--accent); stroke-width: .07; animation: mc-can 1.4s ease-in-out infinite; }
@keyframes mc-can { 50% { stroke: #fff3d6; } }
.mc-pit.picked .mc-hole { stroke: #fff3d6; stroke-width: .09; animation: none; }
.mc-pit.cap .mc-hole { stroke: var(--cherry); stroke-width: .11; animation: none; }
.mc-pit.glow .mc-hole { stroke: var(--accent); stroke-width: .11; animation: mc-glow .5s ease-in-out infinite alternate; }
@keyframes mc-glow { to { stroke: #fff3d6; } }
.mc-aim { fill: none; stroke: #fff3d6; stroke-width: .06; stroke-dasharray: .14 .1; opacity: 0; pointer-events: none; transition: opacity .12s; }
.mc-aim.on { opacity: .9; animation: mc-aim 1.2s linear infinite; }
@keyframes mc-aim { to { stroke-dashoffset: -.48; } }
.mc-stones, .mc-handful, .mc-stone { pointer-events: none; }
.mc-handful { filter: drop-shadow(.05px .12px 0 rgba(11, 16, 51, .45)); }
.mc-st-base { stroke: var(--ink); stroke-width: .035; }
.mc-st-glow { fill: #fff; opacity: .16; }
.mc-st-hi { fill: #fff; opacity: .8; }
.mc-labels text { font-family: var(--f-body); font-weight: 800; font-size: .3px; fill: #fff3d6; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: rgba(30, 14, 3, .7); stroke-width: .07; pointer-events: none; transform-box: fill-box; transform-origin: center; }
.mc-labels text.store { font-size: .36px; fill: var(--accent); }
.mc-board.mine { cursor: pointer; }
.mc-plate { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-radius: 14px; background: var(--panel); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); max-width: 86%; transition: box-shadow .2s, transform .2s; }
.mc-plate.top { align-self: flex-start; }
.mc-plate.bot { align-self: flex-end; }
.mc-plate.on { box-shadow: 0 3px 0 var(--ink), 0 0 0 3px var(--c); }
.mc-plate.won { background: var(--accent); color: var(--ink); }
.mc-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); flex: none; }
.mc-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mc-name small { font-weight: 500; font-size: 12px; opacity: .75; margin-left: 6px; }
.mc-score { font-family: var(--f-display); font-weight: 400; font-size: 17px; min-width: 34px; padding: 2px 8px; text-align: center; border-radius: 999px; background: var(--ink); color: var(--accent); flex: none; }
.mc-dots { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.mc-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: mc-dot 1s ease-in-out infinite; }
.mc-dots i:nth-child(2) { animation-delay: .15s; }
.mc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes mc-dot { 50% { opacity: .25; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .mc-pit.can .mc-hole, .mc-aim.on, .mc-pit.glow .mc-hole, .mc-dots i { animation: none; }
}
.mc-tips { margin-top: 6px; display: grid; gap: 6px; color: var(--muted); font-size: 13px; line-height: 1.3; }
.mc-tips p { margin: 0; display: flex; gap: 8px; align-items: baseline; }
.mc-tips b { flex: none; min-width: 64px; text-align: center; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 999px; background: var(--panel); color: var(--accent); border: 2px solid var(--ink); }
@media (max-width: 360px) { .mc-name { font-size: 14px; } .mc-name small { margin-left: 4px; } .mc-score { font-size: 15px; min-width: 30px; } }
.tut-mc-board { width: 94.7cqw; height: 41.3cqw; border-radius: 5cqw; background: repeating-linear-gradient(176deg, rgba(38,18,4,0) 0 2.2cqw, rgba(38,18,4,.22) 2.2cqw 2.5cqw), linear-gradient(#9a6233, #7d4b24 48%, #5e3517); border: .7cqw solid var(--ink); box-shadow: .8cqw 1.2cqw 0 var(--ink); z-index: 1; }
.tut-mc-pit { width: 9.4cqw; height: 14.7cqw; border-radius: 50%; background: radial-gradient(ellipse at 50% 62%, #4a2a12, #3a200c 70%, #1e0f05); border: .5cqw solid var(--ink); box-shadow: 0 .4cqw 0 rgba(255,220,170,.22); z-index: 2; transition: border-color .2s; }
.tut-mc-pit.store { width: 10cqw; height: 34.7cqw; }
.tut-mc-pit.tut-mc-glow { border-color: var(--accent); box-shadow: 0 0 2cqw var(--accent); }
.tut-mc-pit.tut-mc-cap { border-color: var(--cherry); }
.tut-mc-stone { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.85) 0 12%, rgba(255,255,255,0) 40%), radial-gradient(circle at 50% 50%, var(--c) 55%, color-mix(in srgb, var(--c), #000 35%)); border: .3cqw solid var(--ink); z-index: 3; }
/* @end mancala */

/* ================= Slap Happy (slaphappy): its builder adds rules ABOVE the end marker ================= */
.sh { --pw: clamp(62px, min(25vw, 14vh), 120px); flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sh-banner { position: relative; }
.sh-seats { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 12px 6px; padding-top: 6px; }
.sh-seat {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 6px 4px 5px;
  border-radius: 14px; background: var(--panel); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); transition: opacity .3s, box-shadow .2s, border-color .2s;
}
.sh-seat.turn { border-color: var(--c); box-shadow: 0 3px 0 var(--ink), 0 0 0 2px var(--c), 0 0 16px var(--c); }
.sh-seat.out { opacity: .42; filter: grayscale(.6); }
.sh-seat.zero .sh-mini { opacity: .45; }
.sh-mini {
  display: grid; place-items: center; width: 30px; aspect-ratio: 5 / 7; border-radius: 4px;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .13) 0 2px, transparent 2px 6px), linear-gradient(160deg, #7b52ff, #3d1fa8);
  box-shadow: inset 0 0 0 2px #fff, 2px 2px 0 0 #ddd, 4px 4px 0 0 #3d1fa8, 4px 4px 0 2px var(--ink);
}
.sh-mini b { font: 800 14px var(--f-body); color: #fff; text-shadow: 0 0 3px var(--ink), 0 1.5px 0 var(--ink); }
.sh-who { display: flex; align-items: center; gap: 4px; max-width: 100%; font-size: 12px; font-weight: 700; }
.sh-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-tag2 {
  position: absolute; top: -9px; right: -3px; padding: 0 6px; border-radius: 999px; white-space: nowrap;
  font-size: 10px; font-weight: 800; line-height: 15px; background: var(--accent); color: var(--ink); border: 2px solid var(--ink);
}
.sh-seat.zero .sh-tag2 { background: #ff9a5c; }
.sh-seat.out .sh-tag2 { background: var(--muted); }

.sh-table {
  position: relative; flex: 1; min-height: 200px; display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; align-items: center; gap: 2px; padding: 12px 12px 9px;
  border-radius: 22px; touch-action: none; overflow: hidden; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.3px) 0 0 / 5px 5px, radial-gradient(ellipse at 50% 42%, #2f7a4f 0%, #1f5a39 75%, #174a2e 100%);
  box-shadow: inset 0 0 0 5px #6b4426, inset 0 0 0 8px #4e2f18, inset 0 8px 24px rgba(0, 0, 0, .35), 0 5px 0 var(--ink);
  border: 2.5px solid var(--ink);
}
.sh-table.can { cursor: pointer; }
.sh-table.can::before { content: ''; position: absolute; inset: 16px; border: 2.5px dashed rgba(255, 243, 214, .16); border-radius: 16px; pointer-events: none; }
.sh-pilewrap { position: relative; width: calc(var(--pw) * 1.9); height: calc(var(--pw) * 1.6); }
.sh-pile, .sh-bottom { position: absolute; inset: 0; }
.sh-slot { position: absolute; left: 50%; top: 50%; }
.sh-slot .pcard, .sh-bottom .pcard { --w: var(--pw); box-shadow: 0 2px 0 rgba(11, 16, 51, .55), 0 0 0 1.5px rgba(11, 16, 51, .35); }
.sh-slot.old .pcard { filter: brightness(.88); }
.sh-pile.empty::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: var(--pw); aspect-ratio: 5 / 7; transform: translate(-50%, -50%);
  border: 2.5px dashed rgba(255, 243, 214, .3); border-radius: calc(var(--pw) * .11);
}
.sh-bottom .pcard { position: absolute; left: 50%; top: 50%; --w: calc(var(--pw) * .92); transform: translate(-50%, -50%) translate(calc(var(--pw) * -.42), calc(var(--pw) * .2)) rotate(-28deg); filter: brightness(.85); }
.sh-pilecount { min-height: 15px; font-size: 12px; font-weight: 700; color: #d8e8df; }
.sh-fx { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.sh-hand { position: absolute; left: 50%; top: 50%; width: calc(var(--pw) * 1.35); transform: translate(-50%, -54%) rotate(var(--r, 0deg)); }
.sh-hand.under { width: calc(var(--pw) * 1.12); transform: translate(-50%, -54%) translate(var(--dx), var(--dy)) rotate(var(--r)); }
.sh-palm { display: block; width: 100%; height: auto; filter: drop-shadow(4px 5px 0 rgba(11, 16, 51, .4)); }
.sh-ring { position: absolute; left: 50%; top: 50%; width: calc(var(--pw) * 1.5); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 5px solid #fff3d6; opacity: 0; }
.sh-name {
  position: absolute; left: 50%; top: calc(50% + var(--pw) * .62); transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; padding: 4px 14px 5px; border-radius: 14px; white-space: nowrap;
  background: var(--c); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
}
.sh-name b { font: 400 22px/1.1 var(--f-display); }
.sh-name small { font-size: 12px; font-weight: 700; }
.sh-chal {
  position: relative; z-index: 5; display: flex; visibility: hidden; align-items: center; gap: 7px; min-width: 0;
  padding: 4px 10px 4px 4px; border-radius: 999px; white-space: nowrap; font-size: 13px; font-weight: 700;
  background: rgba(11, 16, 51, .72); border: 2.5px solid var(--c); color: var(--text);
}
.sh-chal.on { visibility: visible; }
.sh-toprow { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 30px; }
.sh-chal > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.sh-face { min-width: 24px; padding: 1px 5px; border-radius: 999px; text-align: center; font: 400 15px var(--f-display); background: var(--c); color: var(--ink); }
.sh-dots { display: flex; gap: 3px; }
.sh-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--ink); }
.sh-dots i.used { background: rgba(255, 243, 214, .2); }
.sh-legend { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 2px 12px; font-size: 11px; font-weight: 600; color: rgba(255, 243, 214, .66); pointer-events: none; }
.sh-legend i { margin-left: 4px; font-style: normal; font-weight: 800; color: #fff3d6; letter-spacing: .04em; }
.sh-time { flex: none; z-index: 6; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(11, 16, 51, .7); border: 2px solid var(--ink); }
.sh-time.low { color: #ff8a8f; }
.sh-flash { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; pointer-events: none; opacity: 0; font: 400 52px var(--f-display); color: var(--accent); -webkit-text-stroke: 2px var(--ink); text-shadow: 0 5px 0 var(--ink); }
.sh-mark { position: absolute; z-index: 30; width: 78px; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; }
.sh-oops {
  position: absolute; left: 50%; top: 8px; z-index: 28; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 8px; translate: -50% 0;
  padding: 5px 14px 5px 8px; border-radius: 14px; white-space: nowrap; pointer-events: none;
  background: var(--cherry); color: #fff; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
}
.sh-oops .sh-hand.small { position: relative; left: auto; top: auto; grid-row: span 2; width: 32px; transform: rotate(-12deg); }
.sh-oops b { font: 400 16px/1.1 var(--f-display); }
.sh-oops small { font-size: 11px; font-weight: 700; }
.pcard.sh-ghost { position: fixed; --w: 46px; z-index: 60; pointer-events: none; margin: 0; }
.sh-me { display: flex; align-items: center; gap: 16px; padding: 2px 6px 4px; min-height: 104px; }
.sh-me.out { opacity: .6; }
.sh-stack { position: relative; flex: none; width: 74px; height: 104px; touch-action: none; cursor: grab; }
.sh-stack .pcard { --w: 70px; position: absolute; left: 0; top: 0; transform: translate(calc(var(--k, 0) * 3px), calc(var(--k, 0) * 3px)); box-shadow: 0 2px 0 var(--ink), 0 0 0 1.5px var(--ink), inset 0 0 0 calc(var(--w) * .055) #fff, inset 0 0 0 calc(var(--w) * .075) #ffc531; transition: translate .12s; }
.sh-stack .pcard.empty { box-shadow: none; border: 2.5px dashed rgba(255, 243, 214, .3); }
.sh-stack.live .sh-top { box-shadow: 0 0 0 3px var(--accent), 0 0 22px rgba(255, 183, 3, .65), inset 0 0 0 calc(var(--w) * .055) #fff, inset 0 0 0 calc(var(--w) * .075) #ffc531; animation: sh-bob 1.3s ease-in-out infinite; }
@keyframes sh-bob { 50% { top: -6px; } }
.sh-mytext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sh-mycount { font: 400 20px var(--f-display); }
.sh-myhint { font-size: 13px; line-height: 1.3; color: var(--muted); }
.sh-stack.live + .sh-mytext .sh-myhint { color: var(--accent); font-weight: 700; }
@media (max-height: 640px) {
  .pk-banner { padding: 6px 12px; font-size: 17px; }
  .pk-banner small { display: none; }
  .pk-dir { margin-bottom: 4px; }
  .pk-trow { padding: 2px 8px 2px 5px; grid-template-columns: 26px 1fr auto; }
  .pk-trow > i { width: 26px; height: 26px; }
  .pk-trow span { font-size: 13px; }
  .pk-trow small { font-size: 11px; }
  .pk-trow > b { font-size: 18px; }
  .pk-tally { gap: 6px; }
  .pk-tally h2 { font-size: 18px; }
  .sh { gap: 7px; }
  .sh-table { min-height: 180px; }
  .sh-me { min-height: 92px; }
  .sh-stack { width: 64px; height: 92px; }
  .sh-stack .pcard { --w: 62px; }
}
.tut-sh-hand { width: 26cqw; z-index: 20; pointer-events: none; }
.tut-sh-hand .sh-palm { filter: drop-shadow(.8cqw 1cqw 0 rgba(11, 16, 51, .4)); }
.tut-sh-hand.under { width: 22cqw; rotate: 24deg; z-index: 19; }
.tut-sh-tag { z-index: 21; padding: .4em .9em; border-radius: 3cqw; white-space: nowrap; font: 400 5.4cqw var(--f-display); background: var(--c); color: var(--ink); border: .8cqw solid var(--ink); box-shadow: 0 1cqw 0 var(--ink); }
.tut-sh-dots { display: flex; gap: 1.6cqw; z-index: 6; }
.tut-sh-dots i { width: 3.6cqw; aspect-ratio: 1; border-radius: 50%; background: var(--accent); border: .7cqw solid var(--ink); transition: background .2s; }
.tut-sh-dots i.used { background: rgba(255, 243, 214, .25); }
/* @end slaphappy */

/* ================= Rummy: Ten Steps mode (rummy-steps): its builder adds rules ABOVE the end marker ================= */
/* the Ten Steps cards: a Star (wild) and a Snooze, drawn over the joker card */
.pcard.joker.rs-star { background: linear-gradient(155deg, #fffaf0 0%, #fff3d6 55%, #ffe3a3 100%); color: #c75200; }
.pcard.joker.rs-snooze { background: linear-gradient(160deg, #3a2a8f 0%, #23196b 60%, #170f4d 100%); color: #fff3d6;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35), inset 0 0 0 calc(var(--w) * .045) #7b3fa0; }
.pcard.joker.rs-star .mid, .pcard.joker.rs-snooze .mid { writing-mode: horizontal-tb; letter-spacing: 0; }
.pcard.rs-star .tl i, .pcard.rs-star .br i, .pcard.rs-snooze .tl i, .pcard.rs-snooze .br i { font-size: 1em; margin: 0; font-weight: 800; }
.pcard.rs-snooze .tl i, .pcard.rs-snooze .br i { font-size: .72em; letter-spacing: -.04em; }
.pcard.mini.rs-snooze .tl i { font-size: .62em; }
/* your step: the goal panel */
.rs-goal { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 16px; background: var(--panel);
  border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.rs-goal:empty { display: none; }
.rs-goal.ready { background: #1f5a3a; }
.rs-goal.done { background: #24379d; }
.rs-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.rs-head b { font-family: var(--f-display); font-weight: 400; font-size: 15px; color: var(--accent); white-space: nowrap; }
.rs-head > span { color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.rs-pips { display: flex; gap: 3px; margin-left: auto; align-self: center; }
.rs-pips i { width: 11px; height: 11px; border-radius: 3px; background: rgba(5, 9, 40, .55); border: 2px solid var(--ink); }
.rs-pips i.on { background: var(--accent); }
.rs-pips i.now { background: transparent; border-color: var(--accent); }
.rs-pips i.on.now { background: var(--good); border-color: var(--ink); }
.rs-need { font-weight: 800; font-size: 17px; line-height: 1.2; }
.rs-parts { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.rs-part { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.rs-part.full { color: var(--good); }
.rs-goal.ready .rs-part.full { color: #b8f5a9; }
.rs-dots { display: flex; gap: 2px; }
.rs-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(5, 9, 40, .6); box-shadow: inset 0 0 0 1.5px rgba(185, 193, 236, .5); }
.rs-dots i.on { background: var(--accent); box-shadow: none; }
.rs-part.full .rs-dots i.on { background: var(--good); }
.rs-ready { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rs-ready small { color: #b8f5a9; font-weight: 700; font-size: 13px; }
.rs-ready .btn.small { flex: none; }
.rs-sub { color: var(--muted); font-size: 12px; font-weight: 600; }
.rs-sub.zz { color: #d5b8ff; }
/* who gets the Snooze */
.rs-whobtn { display: flex; justify-content: space-between; align-items: center; gap: 8px; box-shadow: inset 5px 0 0 var(--c), 0 4px 0 var(--ink); }
.rs-whobtn small { color: var(--muted); font-weight: 600; }
/* between hands: everyone's ladder */
.rs-lrows { display: flex; flex-direction: column; gap: 8px; }
.rs-lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'name tag pts' 'pips pips pips'; gap: 3px 8px; align-items: center;
  padding: 7px 10px; border-radius: 12px; background: rgba(5, 9, 40, .45); box-shadow: inset 4px 0 0 var(--c); }
.rs-lrow.up { background: rgba(76, 185, 68, .18); }
.rs-lname { grid-area: name; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-ltag { grid-area: tag; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.rs-lrow.up .rs-ltag { color: var(--good); }
.rs-lpts { grid-area: pts; white-space: nowrap; text-align: right; }
.rs-lpts small { color: #ff8a7a; font-weight: 700; }
.rs-lpips { grid-area: pips; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.rs-lpips i { height: 10px; border-radius: 3px; background: rgba(255, 255, 255, .1); }
.rs-lpips i.on { background: var(--c); }
.rs-lpips i.new { animation: rs-pop .6s cubic-bezier(.2, .9, .3, 1.4) .2s both; }
@keyframes rs-pop { from { transform: scaleY(.2); filter: brightness(2); } to { transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .rs-lpips i.new { animation: none; } }
.rs-need.one { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
@media (max-width: 380px) {
  .rs-goal { padding: 8px 10px; gap: 4px; }
  .rs-head > span { display: none; }
  .rs-pips { gap: 2px; }
  .rs-pips i { width: 9px; height: 9px; border-width: 1.5px; }
  .rs-need { font-size: 16px; }
}
.tut-label.tut-rs { white-space: nowrap; }
/* @end rummy-steps */

/* ===== Thorns & Roses ===== */
.tr-root { gap: 8px; }
.tr-table {
  position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 8px 6px; border-radius: 20px; border: 2.5px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
  background: radial-gradient(circle at 50% 40%, rgba(76, 185, 68, .14), transparent 70%), linear-gradient(#1a2a86, #142070);
}
.tr-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 6px 4px; width: 100%; align-items: end; }
.tr-seat {
  --sw: 52px; --shh: 29px; --st: 8px; --pw: 70px; --ph: 43.75px;
  position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 12px 2px 4px;
  border-radius: 14px; transition: background .2s, opacity .3s, box-shadow .2s;
}
.tr-seat.big { --sw: 64px; --shh: 36px; --st: 10px; --pw: 86px; --ph: 53.75px; padding-top: 14px; }
.tr-grid.many .tr-seat { --sw: 46px; --shh: 26px; --st: 7px; --pw: 62px; --ph: 38.75px; }
.tr-seat.turn { background: rgba(255, 183, 3, .12); box-shadow: inset 0 0 0 2.5px var(--accent); }
.tr-seat.picker { background: rgba(251, 97, 7, .16); box-shadow: inset 0 0 0 2.5px var(--accent2); }
.tr-seat.passed { opacity: .55; }
.tr-seat.out { opacity: .35; filter: grayscale(.7); }
.tr-spot { position: relative; width: calc(var(--pw) + 16px); height: calc(var(--ph) + var(--shh) + 4 * var(--st) + 6px); }
.tr-pot { position: absolute; left: 50%; bottom: 0; width: var(--pw); transform: translateX(-50%); z-index: 1; line-height: 0; }
.tr-potsvg { width: 100%; height: auto; display: block; }
.tr-stack { position: absolute; left: 50%; bottom: calc(var(--ph) - 7px); width: 0; height: 0; z-index: 2; }
.tr-slab {
  position: absolute; left: calc(var(--sw) / -2); bottom: calc(var(--k) * var(--st)); width: var(--sw); height: var(--shh);
  border: 2px solid var(--ink); border-radius: 5px; background-color: #0d6460;
  background-image: repeating-linear-gradient(135deg, rgba(31, 158, 151, .6) 0 3px, transparent 3px 7px);
  box-shadow: inset 0 0 0 2px #0d6460, inset 0 0 0 3.5px #f5ad1b, 0 2px 0 var(--ink);
}
.tr-slab::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; background: #f5ad1b; border: 1.5px solid var(--ink);
  transform: translate(-50%, -50%) scaleY(.6) rotate(45deg);
}
.tr-slab.mr::before, .tr-slab.mt::before {
  content: ''; position: absolute; left: 5px; top: 50%; width: 7px; height: 7px; border: 1.5px solid var(--ink); border-radius: 50%;
  background: #d93a3f; transform: translateY(-50%);
}
.tr-slab.mt::before { background: #efe2c4; border-radius: 1px; transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 0 1.5px #3b1d52; }
.tr-spot.pickable { cursor: pointer; }
.tr-spot.pickable .tr-slab:last-child { box-shadow: inset 0 0 0 2px #0d6460, inset 0 0 0 3.5px #f5ad1b, 0 2px 0 var(--ink), 0 0 0 3px var(--accent); animation: tr-glow 1s ease-in-out infinite; }
@keyframes tr-glow { 50% { filter: brightness(1.35); } }
.tr-seat.big .tr-spot.drop-ok::before {
  content: ''; position: absolute; inset: -4px -2px; border: 2.5px dashed var(--accent); border-radius: 14px; animation: tr-breathe 1.4s ease-in-out infinite;
}
.tr-spot.drop-over { box-shadow: none !important; background: radial-gradient(circle at 50% 60%, rgba(255, 183, 3, .35), transparent 70%); border-radius: 14px; }
@keyframes tr-breathe { 50% { opacity: .35; } }
.tr-up { position: absolute; left: 0; right: 0; bottom: 1px; display: flex; justify-content: center; z-index: 3; pointer-events: none; }
.tr-mini { width: calc(var(--pw) * .36); aspect-ratio: 60 / 84; margin: 0 calc(var(--pw) * -.07); transform: rotate(calc((var(--k) - 1) * 7deg)); line-height: 0; }
.tr-mini svg, .tr-card svg, .tr-snipcard svg, .tr-fly svg { width: 100%; height: 100%; display: block; }
.tr-mini svg { filter: drop-shadow(0 2px 0 rgba(11, 16, 51, .7)); }
.tr-count {
  position: absolute; right: -4px; bottom: calc(var(--ph) + var(--shh) + var(--d, 0) * var(--st) - 14px); min-width: 19px; height: 19px; padding: 0 4px; border-radius: 999px; z-index: 4;
  background: var(--ink); color: var(--text); font-size: 11px; font-weight: 800; display: none; place-items: center; border: 1.5px solid rgba(255, 243, 214, .35);
}
.tr-count.on { display: grid; }
.tr-spot.empty .tr-count { bottom: calc(var(--ph) - 8px); }
.tr-spot::after { content: ''; position: absolute; left: 50%; bottom: -3px; width: calc(var(--pw) * .9); height: 7px; transform: translateX(-50%); border-radius: 50%; background: rgba(11, 16, 51, .45); z-index: 0; }
.tr-info { position: absolute; top: 8px; left: 12px; right: 12px; display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--muted); pointer-events: none; }
.tr-table { padding-top: 26px; }
.tr-tag {
  position: absolute; top: -3px; left: 50%; transform: translateX(-50%); z-index: 5; white-space: nowrap;
  padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; background: var(--panel2); color: var(--text);
  border: 2px solid var(--ink); opacity: 0;
}
.tr-tag.on { opacity: 1; }
.tr-tag.hot { background: var(--accent); color: var(--ink); }
.tr-tag.pass { background: #39407a; color: var(--muted); }
.tr-who { display: flex; align-items: center; gap: 4px; max-width: 100%; margin-top: 3px; font-size: 12px; }
.tr-who b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-seat.big .tr-who { font-size: 13px; }
.tr-meta { display: flex; align-items: center; gap: 6px; margin-top: 1px; font-size: 11px; font-weight: 700; }
.tr-blooms { display: flex; gap: 1px; }
.tr-blooms i, .tr-pips i { width: 14px; height: 14px; display: block; }
.tr-blooms svg, .tr-pips svg, .tr-flyrose svg { width: 100%; height: 100%; display: block; }
.tr-blooms svg path:first-child, .tr-pips svg path:first-child { fill: rgba(255, 243, 214, .14); }
.tr-blooms i.on svg path:first-child, .tr-pips i.on svg path:first-child, .tr-flyrose svg path:first-child { fill: #d93a3f; }
.tr-cards { display: flex; align-items: center; gap: 2px; color: var(--muted); }
.tr-cards i { width: 8px; height: 11px; border: 1.5px solid var(--ink); border-radius: 2px; background: #0d6460; box-shadow: inset 0 0 0 1px #f5ad1b; }
.tr-cards.low span { color: #ff8a8f; }

.tr-mine { display: flex; align-items: flex-end; gap: 4px; flex: none; }
.tr-myseat { flex: none; }
.tr-hand { --cw: 58px; position: relative; flex: 1; min-width: 0; height: 104px; }
.tr-card {
  position: absolute; bottom: 4px; width: var(--cw); aspect-ratio: 60 / 84; line-height: 0;
  left: calc(50% - var(--cw) / 2 + var(--x) * min(46px, (100% - var(--cw)) / max(var(--n) - 1, 1)));
  transform: translateY(var(--y)) rotate(var(--a)); transform-origin: 50% 130%; transition: transform .15s, filter .2s;
}
.tr-card svg { filter: drop-shadow(0 3px 0 rgba(11, 16, 51, .65)); }
.tr-hand.can .tr-card { cursor: grab; }
.tr-hand.can .tr-card:hover { transform: translateY(calc(var(--y) - 6px)) rotate(var(--a)); }
.tr-hand:not(.can) .tr-card { filter: brightness(.75) saturate(.8); }
.tr-card.sel, .tr-hand.can .tr-card.sel { transform: translateY(-18px) rotate(var(--a)); }
.tr-card.drag-ghost { transform-origin: 50% 50%; }
.tr-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; text-align: center; padding: 0 8px; }

.tr-ctrl { flex: none; min-height: 24px; }
.tr-hint { margin: 6px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.tr-bidrow { display: flex; gap: 8px; align-items: center; }
.tr-wheel { display: flex; align-items: center; flex: none; background: var(--panel); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 5px 0 var(--ink); margin-bottom: 5px; }
.tr-step { width: 40px; height: 56px; border: 0; background: none; color: var(--text); font-size: 28px; font-weight: 800; cursor: pointer; }
.tr-step:active { color: var(--accent); }
.tr-num { position: relative; width: 54px; display: flex; flex-direction: column; align-items: center; line-height: 1; cursor: ns-resize; user-select: none; }
.tr-num b { font-family: var(--f-display); font-weight: 400; font-size: 32px; color: var(--accent); }
.tr-num small { font-size: 11px; color: var(--muted); font-weight: 600; }
.tr-dbl {
  position: absolute; top: -14px; right: -14px; padding: 1px 6px; border-radius: 999px; border: 2px solid var(--ink);
  background: #d93a3f; color: #fff3d6; font-size: 12px; font-weight: 800; transform: scale(0); transition: transform .2s cubic-bezier(.2, 1.5, .4, 1);
}
.tr-dbl.on { transform: scale(1) rotate(10deg); }
.tr-btns { flex: 1; display: flex; gap: 8px; min-width: 0; }
.tr-bidbtn { flex: 1; padding: 0 10px; min-width: 0; white-space: nowrap; }
.tr-pass { flex: none; padding: 0 14px; }
.tr-pickbar { display: flex; justify-content: center; }
.tr-pips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tr-pips i { width: 30px; height: 30px; }
.tr-hand.snipping { display: flex; align-items: center; justify-content: center; }
.tr-snip { text-align: center; width: 100%; }
.tr-snip small { color: var(--muted); font-weight: 700; font-size: 13px; }
.tr-snip.can small { color: var(--accent); }
.tr-sniprow { display: flex; justify-content: center; gap: 6px; margin-top: 4px; perspective: 600px; }
.tr-snipcard { width: min(46px, calc((100% - 24px) / 5)); aspect-ratio: 60 / 84; padding: 0; border: 0; background: none; line-height: 0; color: inherit; }
.tr-snipcard svg { filter: drop-shadow(0 3px 0 rgba(11, 16, 51, .65)); }
.tr-snip.can .tr-snipcard { cursor: pointer; animation: tr-hop 1.1s ease-in-out infinite alternate; }
.tr-snip.can .tr-snipcard:nth-child(2n) { animation-delay: -.5s; }
.tr-snipcard.picked { animation: none !important; }
@keyframes tr-hop { to { transform: translateY(-5px); } }

.tr-stamp { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; pointer-events: none; z-index: 6; }
.tr-stamp.on { animation: tr-stampfade .5s 2.8s forwards; }
.tr-stamp.quiet { animation-delay: .4s; }
.tr-stamp b {
  font-family: var(--f-display); font-weight: 400; font-size: 32px; padding: 6px 16px; border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 0 5px 0 var(--ink); transform: rotate(-5deg); white-space: nowrap;
}
.tr-stamp.bloom b { background: #d93a3f; color: #fff3d6; }
.tr-stamp.thorn b { background: #3b1d52; color: #efe2c4; }
.tr-stamp small { background: rgba(11, 16, 51, .88); padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; }
@keyframes tr-stampfade { to { opacity: 0; transform: translateY(-10px); } }

.tr-fly { position: fixed; z-index: 9990; pointer-events: none; perspective: 700px; transform-origin: 50% 50%; }
.tr-fly-in { width: 100%; height: 100%; line-height: 0; }
.tr-fly svg { filter: drop-shadow(0 7px 0 rgba(11, 16, 51, .55)); }
.tr-fly.rose .tr-fly-in { filter: drop-shadow(0 0 18px rgba(255, 120, 130, .55)); }
.tr-fly.thorn .tr-fly-in { filter: drop-shadow(0 0 18px rgba(227, 36, 43, .7)); }
.tr-crack { position: absolute; inset: 0; line-height: 0; }
.tr-crack svg { filter: none; }
.tr-petal {
  position: fixed; width: 15px; height: 11px; z-index: 9991; pointer-events: none;
  background: var(--h); border: 1.5px solid var(--ink); border-radius: 80% 0 80% 0;
}
.tr-spike { position: fixed; width: 9px; height: 24px; z-index: 9991; pointer-events: none; background: #efe2c4; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tr-flyrose { position: fixed; width: 28px; height: 28px; z-index: 9992; pointer-events: none; }

@media (max-width: 360px), (max-height: 680px) {
  .tr-seat, .tr-grid.many .tr-seat { --sw: 38px; --shh: 21px; --st: 5px; --pw: 50px; --ph: 31.25px; padding-top: 11px; }
  .tr-seat.big { --sw: 46px; --shh: 26px; --st: 6px; --pw: 60px; --ph: 37.5px; padding-top: 12px; }
  .tr-hand { --cw: 46px; height: 84px; }
  .tr-step { width: 32px; height: 48px; font-size: 24px; }
  .tr-num { width: 42px; }
  .tr-bidbtn { font-size: 15px; padding: 0 6px; min-height: 48px; }
  .tr-pickhint { display: none; }
  .tr-pips i { width: 26px; height: 26px; }
  .tr-pass { font-size: 15px; padding: 0 10px; min-height: 48px; }
  .tr-blooms i { width: 11px; height: 11px; }
  .tr-meta { gap: 3px; }
  .tr-root { gap: 6px; }
  .tr-banner { padding: 7px 12px; font-size: 17px; }
  .tr-num b { font-size: 28px; }
  .tr-stamp b { font-size: 26px; }
  .tr-hint { font-size: 12px; margin-top: 4px; }
  .tr-who { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-spot.pickable .tr-slab:last-child, .tr-seat.big .tr-spot.drop-ok::before, .tr-snip.can .tr-snipcard { animation: none; }
  .tr-stamp.on { animation-duration: .01s; }
}
.tr-tut-card { width: 11cqw; aspect-ratio: 60 / 84; z-index: 4; perspective: 60cqw; }
.tr-tut-card.small { width: 8cqw; }
.tr-tut-card .in { width: 100%; height: 100%; line-height: 0; }
.tr-tut-card svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 .8cqw 0 rgba(11, 16, 51, .6)); }
.tr-tut-pot { width: 18cqw; line-height: 0; z-index: 1; }
.tr-tut-pot svg { width: 100%; height: auto; display: block; }
.tr-tut-slab {
  width: 13.5cqw; height: 7.5cqw; z-index: 2; border: .6cqw solid var(--ink); border-radius: 1.6cqw; background-color: #0d6460;
  background-image: repeating-linear-gradient(135deg, rgba(31, 158, 151, .6) 0 1cqw, transparent 1cqw 2.3cqw);
  box-shadow: inset 0 0 0 .6cqw #0d6460, inset 0 0 0 1.1cqw #f5ad1b, 0 .6cqw 0 var(--ink);
}
.tr-tut-tag { padding: .4cqw 2.6cqw; border-radius: 999px; border: .6cqw solid var(--ink); background: var(--panel2); font-size: 4cqw; font-weight: 800; white-space: nowrap; z-index: 6; }
.tr-tut-tag.hot { background: var(--accent); color: var(--ink); }
.tr-tut-tag.pass { background: #39407a; color: var(--muted); }
.tr-tut-tag.old { opacity: .5; }
.tr-tut-wheel { display: flex; align-items: center; gap: 3cqw; padding: 1cqw 3cqw; border-radius: 4cqw; border: .8cqw solid var(--ink); background: var(--panel); font-size: 6cqw; font-weight: 800; }
.tr-tut-wheel b { font-family: var(--f-display); font-weight: 400; color: var(--accent); font-size: 8cqw; }
.tr-tut-btn { padding: 2cqw 6cqw; border-radius: 4cqw; border: .8cqw solid var(--ink); background: var(--accent); color: var(--ink); font-weight: 800; font-size: 5.5cqw; box-shadow: 0 1.2cqw 0 var(--ink); white-space: nowrap; }
.tr-tut-stamp { font-family: var(--f-display); font-size: 9cqw; padding: 1cqw 4cqw; border: .8cqw solid var(--ink); border-radius: 3cqw; box-shadow: 0 1.4cqw 0 var(--ink); z-index: 8; rotate: -5deg; white-space: nowrap; }
.tr-tut-stamp.bloom { background: #d93a3f; color: #fff3d6; }
.tr-tut-stamp.thorn { background: #3b1d52; color: #efe2c4; }
.tr-tut-petal { width: 3.6cqw; height: 2.6cqw; background: var(--h); border: .4cqw solid var(--ink); border-radius: 80% 0 80% 0; z-index: 7; }
.tr-tut-count { font-weight: 800; font-size: 5cqw; color: var(--text); background: rgba(11, 16, 51, .7); padding: .5cqw 3cqw; border-radius: 999px; }
.tr-tut-bloom { width: 14cqw; line-height: 0; }
.tr-tut-bloom svg { width: 100%; height: auto; display: block; }
.tr-tut-bloom svg > path:nth-child(3) { fill: rgba(255, 243, 214, .14); transition: fill .2s; }
.tr-tut-bloom.on svg > path:nth-child(3) { fill: #d93a3f; }
/* @end thorns */

/* ===== Mystery Guest ===== */
.mg-root { gap: 8px; position: relative; }
.mg-banner { font-size: 18px; padding: 8px 12px; }
.mg-banner small { font-size: 12.5px; }

/* one tab per opponent (a plain header with two players) */
.mg-tabs { display: flex; gap: 6px; }
.mg-tab {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 14px;
  background: var(--panel); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); color: var(--text);
  font: inherit; text-align: left; position: relative; transition: transform .12s, background .2s;
}
.mg-tab.on { background: var(--panel2); box-shadow: 0 3px 0 var(--ink), inset 0 0 0 2.5px var(--c); }
.mg-tab:not(.on) { opacity: .78; }
.mg-tab.turn::after {
  content: ''; position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--ink);
}
.mg-tabs.one .mg-tab { pointer-events: none; opacity: 1; }
.mg-tabname { display: flex; flex-direction: column; min-width: 0; font-weight: 800; font-size: 14px; line-height: 1.1; }
.mg-tabname, .mg-tabname small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-tabname small { font-weight: 600; font-size: 11.5px; color: var(--muted); }
.mg-tab.found .mg-tabname small { color: #9df294; }
.mg-tab.gone { opacity: .45; }
.mg-finders { display: flex; position: absolute; right: 3px; bottom: -6px; }
.mg-finders .avatar + .avatar { margin-left: -5px; }

/* the last question and answer */
.mg-talk { min-height: 46px; display: flex; align-items: center; }
.mg-say { display: flex; align-items: center; gap: 8px; width: 100%; }
.mg-say.hint { color: var(--muted); font-size: 13.5px; justify-content: center; text-align: center; line-height: 1.3; }
.mg-bubble {
  flex: 1; min-width: 0; background: #fff3d6; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 14px 14px 14px 4px;
  padding: 4px 10px 5px; box-shadow: 0 3px 0 var(--ink); line-height: 1.2;
}
.mg-bubble small { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #5a5f86; white-space: nowrap; overflow: hidden; }
.mg-bubble > span { display: block; font-weight: 800; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-to { display: inline-flex; align-items: center; gap: 3px; }
.mg-ans {
  flex: none; font-family: var(--f-display); font-weight: 400; font-size: 17px; padding: 6px 10px; border-radius: 12px;
  border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); transform: rotate(-4deg);
}
.mg-ans.yes { background: var(--good); color: var(--ink); }
.mg-ans.no { background: var(--cherry); color: #fff3d6; }

/* the board: 24 guests standing in frames */
.mg-boardwrap {
  padding: 7px; border-radius: 18px; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
  background: linear-gradient(#e0473f, #b82c33);
}
.mg-board { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.mg-tile {
  position: relative; padding: 0; border: 0; background: rgba(11, 16, 51, .55); border-radius: 7px; aspect-ratio: 4 / 5;
  perspective: 260px; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .25); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mg-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: 7px; overflow: hidden;
  background: #f3e6c9; border: 2px solid var(--ink); transform-origin: 50% 100%;
  transition: transform .42s cubic-bezier(.55, .05, .7, 1.4), filter .3s; transition-delay: var(--d, 0ms);
}
.mg-pic { flex: 1; min-height: 0; }
.mg-pic svg, .mg-minepic svg, .mg-bigpic svg, .mg-endpic svg, .mg-face svg { display: block; width: 100%; height: 100%; }
.mg-pic svg { object-fit: cover; }
.mg-name {
  flex: none; background: var(--ink); color: #fff3d6; font-size: 10px; font-weight: 700; text-align: center; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px;
}
.mg-tile.down .mg-card { transform: rotateX(74deg); filter: brightness(.45) saturate(.4); }
.mg-tile:active:not(:disabled) .mg-card { scale: .96; }
.mg-x {
  position: absolute; top: -3px; right: -3px; width: 15px; height: 15px; border-radius: 50%; background: var(--cherry);
  border: 2px solid var(--ink); display: none; pointer-events: none;
}
.mg-x::before, .mg-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 2px; background: #fff; translate: -50% -50%; rotate: 45deg; }
.mg-x::after { rotate: -45deg; }
.mg-tile.pend .mg-x { display: block; }
.mg-tile.pend .mg-card { box-shadow: inset 0 0 0 2px var(--cherry); }
.mg-tile.answer .mg-card { box-shadow: 0 0 0 3px var(--accent), 0 0 14px var(--accent); filter: none; transform: none; }
.mg-board.picking .mg-tile:not(.down) .mg-card { animation: mg-pick 1.1s ease-in-out infinite; box-shadow: 0 0 0 2.5px var(--accent); }
.mg-board.picking .mg-tile:nth-child(2n) .mg-card { animation-delay: -.5s; }
@keyframes mg-pick { 50% { transform: translateY(-2px); } }
.mg-board.watch .mg-tile { cursor: default; }
.mg-tile:disabled { cursor: default; }

/* clues about the opponent on show, and the "Flip them down" button */
.mg-clues { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 30px; }
.mg-chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 100%; }
.mg-chips.center { justify-content: center; }
.mg-clue {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 6px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: var(--panel); border: 2px solid var(--ink); white-space: nowrap;
}
.mg-clue b { font-size: 12px; }
.mg-clue.yes b { color: #7fe877; }
.mg-clue.no { color: var(--muted); }
.mg-clue.no b { color: #ff7a7e; }
.mg-hint { color: var(--muted); font-size: 12.5px; }
.mg-flip { flex: 1 1 100%; min-height: 46px; font-size: 17px; background: var(--accent2); color: var(--text); margin-bottom: 4px; }

/* your own guest, in the card slot, and the turn buttons */
.mg-dock { display: flex; gap: 8px; align-items: stretch; margin-top: auto; }
.mg-mine {
  flex: none; display: flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 14px; max-width: 46%;
  background: linear-gradient(#8a5a2f, #6b4220); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); color: var(--text); font: inherit; text-align: left;
}
.mg-minepic { width: 46px; height: 46px; border-radius: 8px; overflow: hidden; border: 2px solid var(--ink); flex: none; }
.mg-minetxt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.mg-minetxt small { font-size: 11px; color: #f1d9b5; font-weight: 600; }
.mg-minetxt small.mg-near { line-height: 1.15; }
.mg-minetxt b { font-size: 16px; font-weight: 800; }
.mg-acts { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mg-acts.wait { justify-content: center; align-items: center; color: var(--muted); font-size: 13.5px; text-align: center; }
.mg-act { min-height: 40px; font-size: 15.5px; padding: 0 10px; margin-bottom: 3px; box-shadow: 0 3px 0 var(--ink); border-width: 2.5px; }
.mg-act:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/* question sheet */
.sheet.mg-sheet { max-height: 86vh; overflow-y: auto; gap: 10px; }
.mg-qhead { display: flex; flex-direction: column; gap: 8px; }
.mg-qhead .how { font-size: 13px; }
.mg-qwho { display: flex; gap: 6px; flex-wrap: wrap; }
.mg-qwho .chip { font: inherit; color: var(--text); font-size: 14px; }
.mg-qlist { display: flex; flex-direction: column; gap: 10px; }
.mg-qcat h3 { margin: 0 0 5px; font-family: var(--f-display); font-weight: 400; font-size: 14px; color: var(--accent); }
.mg-qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mg-q {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 42px; padding: 4px 6px 4px 10px; border-radius: 12px;
  background: var(--panel2); color: var(--text); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font: inherit; font-size: 13.5px;
  font-weight: 700; text-align: left; line-height: 1.15;
}
.mg-q:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.mg-q small { flex: none; min-width: 24px; padding: 2px 6px; border-radius: 999px; background: var(--ink); color: var(--muted); font-size: 11.5px; text-align: center; }
.mg-q.asked { opacity: .55; box-shadow: none; }
.mg-q.asked.yes small { color: #7fe877; }
.mg-q.asked.no small { color: #ff7a7e; }
.mg-big { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mg-big b { font-family: var(--f-display); font-weight: 400; font-size: 24px; }
.mg-bigpic { width: 150px; height: 150px; border-radius: 18px; overflow: hidden; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); }

/* someone found someone: their card turns over */
.mg-reveal { position: absolute; inset: 0; display: none; place-items: center; z-index: 5; background: rgba(5, 9, 40, .55); border-radius: 18px; }
.mg-reveal.on { display: grid; }
.mg-found {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 18px; border-radius: 20px; max-width: 88%;
  background: var(--bg2); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink), 0 0 0 3px var(--c) inset; text-align: center;
}
.mg-foundt { font-family: var(--f-display); font-weight: 400; font-size: 21px; line-height: 1.1; color: var(--accent); }
.mg-foundn { font-weight: 800; font-size: 18px; }
.mg-flipcard { width: 140px; height: 140px; position: relative; perspective: 600px; }
.mg-face {
  position: absolute; inset: 0; border-radius: 16px; overflow: hidden; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
  backface-visibility: hidden; transition: transform .55s cubic-bezier(.4, .2, .2, 1.2);
}
.mg-face.front { transform: rotateY(180deg); }
.mg-flipcard.turned .mg-face.back { transform: rotateY(-180deg); }
.mg-flipcard.turned .mg-face.front { transform: rotateY(0deg); }

/* the end: everyone's guest */
.mg-end { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mg-endrow {
  display: flex; align-items: center; gap: 7px; padding: 5px; border-radius: 14px; min-width: 0;
  background: var(--panel); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink), inset 0 0 0 2px var(--c);
}
.mg-endrow.win { background: var(--panel2); }
.mg-endpic { width: 44px; height: 44px; flex: none; border-radius: 8px; overflow: hidden; border: 2px solid var(--ink); }
.mg-endtxt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.mg-endtxt b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-endtxt span { font-size: 12.5px; }
.mg-endtxt small { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 3px; }
.mg-endby { display: inline-flex; align-items: center; gap: 3px; }

@media (max-width: 359px) {
  .mg-root { gap: 6px; }
  .mg-board { gap: 4px; }
  .mg-boardwrap { padding: 5px; border-radius: 14px; }
  .mg-name { font-size: 8.5px; }
  .mg-tab { padding: 3px 6px 3px 3px; gap: 4px; }
  .mg-tab > .avatar { display: none; }
  .mg-tab { padding-left: 8px; }
  .mg-banner { font-size: 15.5px; padding: 6px 8px; }
  .mg-banner small { font-size: 11.5px; }
  .mg-talk { min-height: 38px; }
  .mg-say > .avatar { display: none; }
  .mg-bubble { padding: 3px 8px 4px; }
  .mg-clues { min-height: 0; }
  .mg-clue { font-size: 11.5px; padding: 2px 7px 2px 5px; }
  .mg-tabname { font-size: 12.5px; }
  .mg-bubble > span { font-size: 14px; }
  .mg-ans { font-size: 15px; padding: 5px 8px; }
  .mg-minepic { width: 38px; height: 38px; }
  .mg-minetxt b { font-size: 14px; }
  .mg-act { min-height: 36px; font-size: 14px; }
  .mg-flip { min-height: 40px; font-size: 15px; }
  .mg-q { font-size: 12.5px; }
  .mg-end { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-card, .mg-face { transition: none; }
  .mg-board.picking .mg-tile:not(.down) .mg-card { animation: none; }
}

/* Mystery Guest walkthrough props (stage units: 300 × 190) */
.mg-tut-board { display: grid; grid-template-columns: repeat(6, 11cqw); gap: 1.2cqw; padding: 1.6cqw; border-radius: 3cqw; background: linear-gradient(#e0473f, #b82c33); border: .8cqw solid var(--ink); }
.mg-tut-board .mg-tile { border-radius: 1.4cqw; }
.mg-tut-board .mg-card { border-width: .5cqw; border-radius: 1.4cqw; }
.mg-tut-board .mg-name { font-size: 2.4cqw; }
.mg-tut-board .mg-x { width: 3.4cqw; height: 3.4cqw; border-width: .5cqw; }
.mg-tut-board .mg-x::before, .mg-tut-board .mg-x::after { width: 1.8cqw; height: .5cqw; }
.mg-tut-q {
  padding: 1.6cqw 3cqw; border-radius: 3cqw; background: #fff3d6; color: var(--ink); border: .7cqw solid var(--ink); box-shadow: 0 1cqw 0 var(--ink);
  font-weight: 800; font-size: 4.6cqw; white-space: nowrap;
}
.mg-tut-ans { font-family: var(--f-display); font-size: 6cqw; padding: 1cqw 2.6cqw; border-radius: 2.4cqw; border: .7cqw solid var(--ink); box-shadow: 0 1cqw 0 var(--ink); transform: rotate(-5deg); }
.mg-tut-ans.yes { background: var(--good); color: var(--ink); }
.mg-tut-ans.no { background: var(--cherry); color: #fff3d6; }
.mg-tut-btn {
  padding: 2cqw 4cqw; border-radius: 3cqw; background: var(--accent2); color: var(--text); border: .7cqw solid var(--ink);
  box-shadow: 0 1.2cqw 0 var(--ink); font-weight: 800; font-size: 4.4cqw; white-space: nowrap;
}
.mg-tut-btn.alt { background: var(--accent); color: var(--ink); }
.mg-tut-card { width: 22cqw; height: 22cqw; border-radius: 3cqw; overflow: hidden; border: .8cqw solid var(--ink); box-shadow: 0 1.2cqw 0 var(--ink); }
.mg-tut-card svg { display: block; width: 100%; height: 100%; }
.mg-tut-tag { font-family: var(--f-display); font-size: 4.6cqw; color: var(--accent); white-space: nowrap; }
/* @end mystery */

/* ===== Potluck ===== */
.pk-root { gap: 8px; }
.pk-banner { position: relative; }
.pk-stage { flex: 1; display: flex; flex-direction: column; gap: 8px; position: relative; min-height: 0; }
/* the table: a dark tablecloth with a soft check */
.pk-table {
  flex: 1 1 0; height: 0; min-height: 104px; overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 8px; border-radius: 18px;
  border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  background-color: #1a2a86;
  background-image: linear-gradient(90deg, rgba(255, 243, 214, .045) 50%, transparent 50%), linear-gradient(rgba(255, 243, 214, .045) 50%, transparent 50%);
  background-size: 26px 26px;
}
.pk-dir { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--muted); margin: 0 0 6px; }
.pk-dir b { font-weight: 700; }
.pk-dir span { color: var(--accent); font-size: 16px; line-height: 1; }
.pk-menu { margin-top: 12px; padding: 8px 8px 6px; border-radius: 12px; border: 2px dashed rgba(185, 193, 236, .28); }
.pk-menu h3 { margin: 0 0 6px; text-align: center; font-family: var(--f-display); font-weight: 400; font-size: 13px; color: var(--muted); }
.pk-menugrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; }
.pk-menuitem { display: flex; align-items: center; gap: 6px; font-size: 11.5px; line-height: 1.2; color: var(--muted); min-width: 0; }
.pk-menuitem i { flex: none; width: 24px; height: 24px; border-radius: 6px; background: #fff3d6; border: 1.5px solid var(--ink); box-shadow: inset 0 -2px 0 var(--c); padding: 1px; box-sizing: border-box; }
.pk-menuitem i svg { width: 100%; height: 100%; display: block; }
.pk-menuitem b { color: var(--text); font-weight: 700; }
.pk-seats { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 6px; }
.pk-seat {
  position: relative; min-width: 0; background: #142070; border: 2px solid var(--ink); border-top: 4px solid var(--c);
  border-radius: 12px; padding: 4px 5px 5px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 3px 0 rgba(11, 16, 51, .7);
}
.pk-seat.next { box-shadow: 0 0 0 2px var(--accent), 0 3px 0 rgba(11, 16, 51, .7); }
.pk-seat.next::after {
  content: 'gets your hand'; white-space: nowrap; position: absolute; right: 4px; bottom: -8px; font-size: 9px; font-weight: 800; color: var(--ink);
  background: var(--accent); border: 1.5px solid var(--ink); border-radius: 999px; padding: 0 5px; line-height: 13px; z-index: 2;
}
.pk-who { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; min-width: 0; }
.pk-who > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-who .avatar { flex: none; font-size: 11px; }
.pk-score { flex: none; background: var(--accent); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px; padding: 0 6px; font-size: 12px; font-weight: 800; line-height: 16px; }
.pk-mid { display: flex; gap: 4px; align-items: flex-start; min-height: 40px; }
.pk-plate { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 5px 4px; align-content: flex-start; padding: 3px 4px 0 0; }
.pk-empty { color: var(--muted); font-size: 11px; opacity: .8; }
.pk-slot { flex: none; width: 28px; min-height: 39px; display: grid; place-items: center; perspective: 300px; }
.pk-thinking { display: flex; gap: 2px; }
.pk-thinking i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: pk-dot 1s ease-in-out infinite; }
.pk-thinking i:nth-child(2) { animation-delay: .15s; }
.pk-thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes pk-dot { 40% { transform: translateY(-4px); opacity: 1; } 0%, 80%, 100% { opacity: .45; } }
.pk-keep { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 5px; font-size: 11px; color: var(--muted); min-height: 18px; }
.pk-keep .pk-chip { width: 21px; height: 21px; border-radius: 6px; }
.pk-keep .pk-chip > i { width: 16px; height: 16px; }
.pk-keep .pk-chip > em { top: -9px; }
.pk-hcount { display: inline-flex; align-items: center; gap: 3px; }
.pk-hcount i { width: 9px; height: 12px; border-radius: 2px; border: 1.5px solid var(--ink); background: repeating-linear-gradient(90deg, #e3242b 0 2px, #fff3d6 2px 4px); }
.pk-hcount b { color: var(--text); font-weight: 700; }
.pk-desmini { display: inline-flex; gap: 2px; }
.pk-desmini i { position: relative; width: 16px; height: 16px; display: inline-block; }
.pk-desmini i svg { width: 16px; height: 16px; display: block; }
.pk-desmini b { position: absolute; right: -4px; bottom: -4px; font-size: 9px; color: var(--text); }
/* a dish on a table */
.pk-chip {
  position: relative; flex: none; width: 26px; height: 26px; border-radius: 7px; background: #fff3d6; border: 2px solid var(--ink);
  box-shadow: inset 0 -3px 0 var(--c); display: grid; place-items: center; box-sizing: border-box;
}
.pk-chip > i { width: 20px; height: 20px; display: block; }
.pk-chip > i svg { width: 100%; height: 100%; display: block; }
.pk-chip > b {
  position: absolute; right: -6px; bottom: -6px; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; border-radius: 999px;
  background: var(--ink); color: var(--text); font-size: 10px; font-weight: 800; line-height: 15px; text-align: center;
}
.pk-chip > em {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 8px; font-weight: 800; line-height: 11px;
  padding: 0 3px; border-radius: 4px; background: var(--c); color: var(--ink); border: 1px solid var(--ink); white-space: nowrap;
}
.pk-chip.warn > em { background: var(--accent); }
.pk-chip.bad > em { background: var(--cherry); color: #fff; }
.pk-chip.bad { opacity: .8; }
.pk-chip.simmer { animation: pk-simmer 1.6s ease-in-out infinite; }
@keyframes pk-simmer { 50% { transform: translateY(-1.5px); } }
/* my spot */
.pk-mine {
  flex: none; display: flex; align-items: stretch; gap: 8px; padding: 7px 8px; border-radius: 16px; border: 2.5px solid var(--ink);
  background: linear-gradient(180deg, #24379d, #1a2a86); box-shadow: inset 5px 0 0 var(--c), 0 4px 0 var(--ink); transition: box-shadow .2s;
}
.pk-picking .pk-mine { box-shadow: inset 5px 0 0 var(--c), 0 0 0 2px var(--accent), 0 4px 0 var(--ink); }
.pk-mine.drop-over { box-shadow: inset 5px 0 0 var(--c), 0 0 0 3px var(--accent), 0 0 22px rgba(255, 183, 3, .6) !important; }
.pk-mewho { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding-left: 4px; width: 50px; text-align: center; font-size: 12px; }
.pk-mewho b { display: block; font-size: 13px; }
.pk-mewho .pk-score { display: inline-block; margin-top: 1px; white-space: nowrap; }
.pk-mymid { flex: 1; min-width: 0; display: flex; gap: 6px; align-items: center; }
.pk-myplate { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 9px 7px; align-content: center; padding: 6px 4px 4px; min-height: 44px; }
.pk-myplate .pk-chip { width: 32px; height: 32px; border-radius: 9px; }
.pk-myplate .pk-chip > i { width: 25px; height: 25px; }
.pk-myslot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.pk-myslot .pk-card.sm { --w: 38px; transform: rotate(-4deg); }
.pk-myslot small { font-size: 9px; color: var(--muted); }
.pk-myslot.drop { width: 38px; height: 53px; border: 2.5px dashed var(--accent); border-radius: 7px; display: grid; place-items: center; }
.pk-dropmark { color: var(--accent); font-size: 22px; font-weight: 800; animation: pk-dot 1.6s ease-in-out infinite; }
.pk-mykeep { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.pk-mykeep:empty { display: none; }
.pk-desbox { display: flex; flex-direction: column; gap: 1px; background: rgba(11, 16, 51, .35); border-radius: 8px; padding: 3px 5px; }
.pk-desbox span { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; }
.pk-desbox span.none { opacity: .4; }
.pk-desbox i { width: 15px; height: 15px; display: block; }
.pk-desbox i svg { width: 100%; height: 100%; display: block; }
/* what the tapped dish does */
.pk-ctrl { flex: none; min-height: 50px; display: flex; align-items: center; gap: 8px; }
.pk-note { flex: 1; text-align: center; color: var(--muted); font-size: 13px; }
.pk-rule { flex: 1; min-width: 0; font-size: 13px; line-height: 1.25; border-left: 5px solid var(--c); padding: 2px 0 2px 8px; }
.pk-rule b { display: block; font-size: 14px; font-weight: 800; }
.pk-serve { flex: none; min-height: 46px; padding: 0 16px; font-size: 16px; margin-bottom: 5px; }
/* the fanned hand */
.pk-handwrap { --hw: 78px; flex: none; position: relative; height: calc(var(--hw) * 1.4 + 30px); margin: -6px 0 -8px; }
.pk-handwrap.empty { height: 0; }
.pk-hand { position: absolute; inset: 0; }
.pk-hslot {
  position: absolute; bottom: 14px; width: var(--hw); transform: translateY(var(--y, 0px)) rotate(var(--r, 0deg)); transform-origin: 50% 130%;
  transition: transform .18s ease, left .25s ease, bottom .25s ease; cursor: grab;
}
.pk-hslot .pk-card { --w: var(--hw); }
.pk-hslot.sel { transform: translateY(-20px) rotate(0deg); }
.pk-hslot.sel .pk-card { box-shadow: 0 0 0 3px var(--accent), 0 6px 0 var(--ink); }
.pk-hslot.off .pk-card { filter: brightness(.82) saturate(.85); }
.pk-ghost { display: grid; place-items: center; }
.pk-ghost .pk-card { --w: var(--gw, 78px); box-shadow: 0 10px 20px rgba(0, 0, 0, .45); }
/* a dish card */
.pk-card {
  --w: 76px; --c: #888; width: var(--w); height: calc(var(--w) * 1.4); box-sizing: border-box; border-radius: calc(var(--w) * .12);
  background: #fff3d6; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); display: flex; flex-direction: column; overflow: hidden;
  color: var(--ink); font-family: var(--f-body); font-size: calc(var(--w) * .118); user-select: none; flex: none; min-width: 0; -webkit-user-select: none; position: relative;
}
.pk-cn {
  background: var(--c); color: var(--ink); font-weight: 800; font-size: 1em; text-align: left; padding: .4em .1em .32em .45em; line-height: 1;
  border-bottom: 2px solid var(--ink); white-space: nowrap; overflow: hidden; letter-spacing: -.02em;
}
.pk-card.light .pk-cn { color: #fff; }
.pk-ci { flex: 1; min-height: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--c) 24%, #fff3d6) 0 40%, transparent 41%); }
.pk-ci svg { width: 74%; height: auto; display: block; }
.pk-cr { font-size: .9em; font-weight: 700; line-height: 1.1; text-align: center; padding: 0 .3em .4em; height: 2.6em; display: flex; align-items: center; justify-content: center; }
.pk-cr.long { font-size: .8em; letter-spacing: -.01em; }
.pk-card.back {
  background-color: #fff3d6;
  background-image: linear-gradient(90deg, rgba(227, 36, 43, .55) 50%, transparent 50%), linear-gradient(rgba(227, 36, 43, .55) 50%, transparent 50%);
  background-size: calc(var(--w) * .2) calc(var(--w) * .2); display: grid; place-items: center;
}
.pk-backmark { position: absolute; left: 28%; top: 36%; width: 44%; height: 28%; border-radius: 50%; background: #fff3d6; border: 2px solid var(--ink); box-sizing: border-box; }
.pk-card.sm { --w: 28px; border-width: 2px; box-shadow: 0 2px 0 var(--ink); border-radius: 5px; }
.pk-card.sm .pk-cn, .pk-card.sm .pk-cr { display: none; }
.pk-card.sm .pk-ci { background: none; box-shadow: inset 0 -3px 0 var(--c); }
.pk-card.sm .pk-ci svg { width: 92%; }
.pk-card.sm.back .pk-backmark { border-width: 1.5px; }
/* the course tally */
.pk-tally {
  position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column; gap: 8px; padding: 0 12px 12px; background: var(--bg2);
  border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 5px 0 var(--ink); overflow-y: auto;
}
.pk-tally.on { display: flex; }
.pk-tally::before { content: ''; flex: none; height: 7px; margin: 0 -12px; background: var(--stripe); }
.pk-tally h2 { margin: 2px 0 0; text-align: center; font-family: var(--f-display); font-weight: 400; font-size: 21px; color: var(--accent); }
.pk-tmine { display: flex; flex-direction: column; gap: 5px; }
.pk-trows { display: flex; flex-direction: column; gap: 5px; }
.pk-trow {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; background: var(--panel); border: 2px solid var(--ink);
  border-left: 6px solid var(--c); border-radius: 11px; padding: 4px 10px 4px 6px;
}
.pk-trow > i { width: 30px; height: 30px; border-radius: 8px; background: #fff3d6; border: 2px solid var(--ink); box-sizing: border-box; padding: 2px; display: block; }
.pk-trow > i svg { width: 100%; height: 100%; display: block; }
.pk-trow span { display: block; font-weight: 700; font-size: 14px; line-height: 1.15; }
.pk-trow small { display: block; color: var(--muted); font-size: 12px; line-height: 1.2; }
.pk-trow > b { font-size: 20px; font-weight: 800; color: var(--accent); min-width: 34px; text-align: right; }
.pk-trow.neg > b { color: #ff8a8e; }
.pk-trow.meh > b { color: var(--muted); }
.pk-trow.none { display: block; text-align: center; color: var(--muted); border-left-width: 2px; padding: 8px; }
.pk-ttotal { display: flex; align-items: center; justify-content: space-between; padding: 2px 10px 0; font-weight: 800; }
.pk-ttotal b { font-size: 24px; color: var(--accent); }
.pk-tboard { display: flex; flex-direction: column; gap: 4px; border-top: 2px dashed rgba(185, 193, 236, .3); padding-top: 8px; }
.pk-tline {
  display: grid; grid-template-columns: 24px 1fr auto 40px; gap: 8px; align-items: center; padding: 4px 8px; border-radius: 10px;
  background: rgba(26, 42, 134, .7); border: 2px solid transparent; font-size: 14px;
}
.pk-tline > span { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-tline em { font-style: normal; font-weight: 800; color: var(--good); font-size: 13px; }
.pk-tline > b { text-align: right; font-size: 17px; font-weight: 800; }
.pk-tline.me { border-color: var(--c); }
.pk-tline.top { background: var(--accent); color: var(--ink); border-color: var(--ink); }
.pk-tline.top em { color: var(--ink); }
.pk-tbtn { margin-top: auto; padding-top: 6px; position: sticky; bottom: -12px; background: var(--bg2); margin-bottom: -12px; padding-bottom: 8px; }
.pk-tbtn:empty { display: none; }
.pk-tbtn .pk-note { padding: 10px 0; }
@media (min-height: 780px) and (min-width: 380px) {
  .pk-handwrap { --hw: 86px; }
}
@media (max-width: 360px) {
  .pk-handwrap { --hw: 64px; }
  .pk-seats:not(.few) .pk-who .avatar { display: none; }
  .pk-seats.many { gap: 4px; }
  .pk-seat { padding: 3px 4px 4px; }
  .pk-chip { width: 22px; height: 22px; border-radius: 6px; }
  .pk-chip > i { width: 17px; height: 17px; }
  .pk-mewho { width: 40px; }
  .pk-myplate .pk-chip { width: 28px; height: 28px; }
  .pk-myplate .pk-chip > i { width: 22px; height: 22px; }
  .pk-rule { font-size: 12px; }
  .pk-serve { padding: 0 12px; font-size: 15px; }
}
@media (max-height: 640px) {
  .pk-banner { padding: 6px 12px; font-size: 17px; }
  .pk-banner small { display: none; }
  .pk-dir { margin-bottom: 4px; }
  .pk-trow { padding: 2px 8px 2px 5px; grid-template-columns: 26px 1fr auto; }
  .pk-trow > i { width: 26px; height: 26px; }
  .pk-trow span { font-size: 13px; }
  .pk-trow small { font-size: 11px; }
  .pk-trow > b { font-size: 18px; }
  .pk-tally { gap: 6px; }
  .pk-tally h2 { font-size: 18px; }
  .pk-ctrl { min-height: 44px; }
  .pk-mid { min-height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-thinking i, .pk-dropmark, .pk-chip.simmer { animation: none; }
  .pk-hslot { transition: none; }
}
/* tutorial */
.tut-stage .pk-card { --w: 15cqw; border-width: .6cqw; box-shadow: 0 .8cqw 0 var(--ink); }
.tut-stage .pk-card.sm { --w: 8cqw; }
.tut-stage .pk-chip { width: 7.5cqw; height: 7.5cqw; border-width: .55cqw; border-radius: 2cqw; }
.tut-stage .pk-chip > i { width: 6cqw; height: 6cqw; }
.tut-stage .pk-chip > b { font-size: 2.8cqw; min-width: 4.4cqw; height: 4.4cqw; line-height: 4.4cqw; right: -1.6cqw; bottom: -1.6cqw; }
.tut-pk-seat { width: 27cqw; height: 18cqw; border-radius: 3cqw; border: .6cqw solid var(--ink); border-top: 1.4cqw solid var(--c); background: #142070; }
.tut-pk-name { font-size: 3.6cqw; font-weight: 800; white-space: nowrap; }
.tut-pk-pts { font-size: 5cqw; font-weight: 800; color: var(--accent); white-space: nowrap; }
.tut-pk-pts.bad { color: #ff8a8e; }
.tut-stage .pk-card { rotate: 0deg; }
.tut-pk-mine { width: 70cqw; height: 18cqw; border-radius: 3cqw; border: .7cqw solid var(--ink); background: #24379d; box-shadow: inset 1.4cqw 0 0 #ffb703; }
/* @end potluck */

/* ===== Euchre ===== */
/* team scores with the trump badge between them */
.eu-top { display: grid; grid-template-columns: 1fr 66px 1fr; gap: 8px; align-items: center; }
.eu-team {
  min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 7px 10px; border-radius: 14px;
  background: rgba(0, 0, 0, .25); box-shadow: inset 0 -4px 0 var(--c); border: 2.5px solid transparent; transition: border-color .25s;
}
.eu-team.makers { border-color: var(--accent); }
.eu-trow { display: flex; align-items: baseline; gap: 6px; min-height: 16px; }
.eu-tname { font-weight: 700; color: var(--c); }
.eu-team b { font-size: 22px; line-height: 1; margin-left: auto; }
.eu-team .eu-trow small { color: var(--muted); font-size: 12px; }
.eu-tricks { display: flex; gap: 3px; align-self: center; }
.eu-tricks i { width: 9px; height: 9px; border-radius: 2px; background: rgba(255, 255, 255, .15); rotate: 45deg; }
.eu-tricks i.on { background: var(--c); box-shadow: 0 0 0 1.5px var(--ink); }
.eu-mk {
  margin-left: auto; align-self: center; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--ink);
  font-size: 11px; font-weight: 800; line-height: 16px;
}
.eu-trump {
  width: 66px; height: 66px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff3d6; color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink), inset 0 0 0 4px var(--accent);
}
.eu-trump small { font-family: var(--f-display); font-size: 9px; letter-spacing: .5px; color: #6b5a2c; margin-top: 2px; }
.eu-trump b { font-size: 34px; line-height: .95; }
.eu-trump.red b { color: #e0344a; }
.eu-trump.open { background: #2a3a8f; color: var(--text); box-shadow: 0 4px 0 var(--ink), inset 0 0 0 4px rgba(255, 255, 255, .15); }
.eu-trump.open small { color: var(--muted); }
.eu-trump.open b { opacity: .55; }
.eu-trump.open.red b { color: #ff8a8f; }

/* the deck in the middle of the table, with the turned-up card */
.eu-kitty {
  grid-area: trick; align-self: center; justify-self: center; z-index: 2; position: relative;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; max-width: 170px;
  padding: 10px 12px; border-radius: 18px; transition: opacity .35s, scale .35s, box-shadow .2s, background .2s;
}
.eu-kitty.gone { opacity: 0; scale: .8; visibility: hidden; transition: opacity .35s .3s, scale .35s .3s, visibility 0s .65s; }
.eu-deck { position: relative; width: 50px; aspect-ratio: 5 / 7; }
.eu-deck .pcard { --w: 50px; position: absolute; left: 0; top: 0; }
.eu-d1 { translate: 4px 4px; }
.eu-d2 { translate: 2px 2px; }
.eu-upslot { width: 64px; aspect-ratio: 5 / 7; perspective: 500px; }
.eu-upslot .pcard { --w: 64px; rotate: 6deg; box-shadow: 0 0 0 3px var(--accent), 0 6px 14px rgba(0, 0, 0, .45); }
.eu-upslot .pcard.back { box-shadow: 0 3px 8px rgba(0, 0, 0, .35), inset 0 0 0 calc(var(--w) * .055) #fff, inset 0 0 0 calc(var(--w) * .075) #ffc531; rotate: 90deg; scale: .9; }
.eu-upnote { flex-basis: 100%; text-align: center; font-size: 12px; font-weight: 700; color: #d8e8df; min-height: 0; }
.eu-upnote:empty, .eu-upslot:empty { display: none; }
.eu-upnote .red { color: #ffb0b4; }
.eu-kitty.live { box-shadow: 0 0 0 3px var(--accent), 0 0 22px rgba(255, 197, 49, .45); background: rgba(0, 0, 0, .18); animation: target-glow 1.2s ease-in-out infinite; }
.eu-kitty.drop-over { box-shadow: 0 0 0 3px var(--accent), 0 0 30px rgba(255, 197, 49, .8) !important; background: rgba(255, 197, 49, .2); }

/* while bidding the middle of the table only holds the deck */
.tt-table.eu-bidding { grid-template-rows: auto minmax(136px, auto) auto; }
.tt-table.eu-bidding .tt-trick { min-height: 136px; }

/* seats: the partner sitting out, the makers, the dealer chip */
.tt-seat.eu-out { opacity: .42; filter: grayscale(.6); }
.tt-seat.eu-maker small { color: var(--accent); font-weight: 800; }
.tt-seat.eu-dealer { position: relative; }
.tt-seat.eu-dealer::after {
  content: 'D'; position: absolute; top: 0; right: 2px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  background: #fff3d6; color: var(--ink); font-size: 10px; font-weight: 800; box-shadow: 0 0 0 2px var(--ink);
}
.tt-seat.bottom.eu-dealer::after { right: -10px; top: -4px; }

/* trump cards in my hand wear a little badge of the trump suit (so does the left bower) */
.hand .pcard.eu-tr::after {
  position: absolute; left: 5%; top: 39%; width: 26%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; z-index: 2;
  background: var(--accent); color: var(--ink); font-size: calc(var(--w) * .17); line-height: 1; box-shadow: 0 0 0 1.5px var(--ink);
}
.hand .pcard.eu-tr0::after { content: '♠'; }
.hand .pcard.eu-tr1::after { content: '♥'; color: #c0182c; }
.hand .pcard.eu-tr2::after { content: '♦'; color: #c0182c; }
.hand .pcard.eu-tr3::after { content: '♣'; }

/* bidding */
.eu-bid { display: flex; flex-direction: column; gap: 8px; }
.eu-bid:empty { display: none; }
.eu-call .eu-sym { font-size: 24px; line-height: 1; }
.eu-call .eu-sym.red { color: #c0182c; }
.eu-suits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.eu-suit {
  display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 2px 4px; border-radius: 14px; margin-bottom: 4px;
  background: #fff3d6; color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); transition: transform .07s, box-shadow .07s;
}
.eu-suit b { font-size: 30px; line-height: 1; }
.eu-suit small { font-size: 11px; font-weight: 700; color: #5d5130; }
.eu-suit.red b { color: #d0243a; }
.eu-suit:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.eu-suit[disabled] { opacity: .35; box-shadow: none; transform: translateY(3px); }
.eu-alone {
  align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: var(--panel2); color: var(--text); font-weight: 700; font-size: 15px; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
}
.eu-alone i { width: 34px; height: 20px; border-radius: 999px; background: rgba(0, 0, 0, .35); position: relative; transition: background .2s; }
.eu-alone i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff3d6; transition: translate .2s; }
.eu-alone.on { background: var(--accent2); }
.eu-alone.on i { background: var(--accent); }
.eu-alone.on i::after { translate: 14px 0; }

/* the hand's story in the score panel, and the bursts */
.eu-story { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.eu-story b { font-family: var(--f-display); font-weight: 400; font-size: 20px; color: var(--accent); }
.eu-story.euchre b { color: #ff6b66; }
.eu-story span { font-size: 13px; color: var(--muted); }
.tt-burst.eu-burst { background: var(--accent); color: var(--ink); box-shadow: 0 6px 0 var(--ink), 0 0 0 3px var(--ink); }
.tt-burst.eu-burst.red { background: #fff3d6; color: #c0182c; }
.tt-burst.eu-burst.alone { background: var(--accent2); color: var(--text); }
.tt-burst.eu-burst.bad { background: var(--cherry); color: var(--text); }
@media (max-width: 360px) {
  .eu-top { grid-template-columns: 1fr 58px 1fr; gap: 6px; }
  .eu-trump { width: 58px; height: 58px; }
  .eu-trump b { font-size: 29px; }
  .eu-team { padding: 6px 8px; }
  .eu-team b { font-size: 19px; }
  .eu-tricks i { width: 7px; height: 7px; }
  .eu-suit b { font-size: 26px; }
  .eu-kitty { padding: 8px 6px; column-gap: 0; }
  .eu-deck, .eu-deck .pcard { --w: 40px; width: 40px; }
  .eu-upslot { width: 52px; margin-left: -2px; }
  .eu-upslot .pcard { --w: 52px; }
  .tt-table.eu-bidding { grid-template-rows: auto minmax(116px, auto) auto; }
  .tt-table.eu-bidding .tt-trick { min-height: 116px; }
}
/* tutorial */
.tut-stage .eu-trump.tut-eu-badge { width: 15cqw; height: 15cqw; border-width: .7cqw; box-shadow: 0 .9cqw 0 var(--ink), inset 0 0 0 .9cqw var(--accent); }
.tut-eu-badge small { font-size: 2.1cqw; }
.tut-eu-badge b { font-size: 7.5cqw; }
.tut-eu-btn { padding: 1.6cqw 4cqw; border-radius: 3cqw; background: var(--accent); color: var(--ink); font-weight: 800; font-size: 4cqw; border: .7cqw solid var(--ink); box-shadow: 0 1cqw 0 var(--ink); white-space: nowrap; }
.tut-eu-btn.on { translate: 0 .8cqw; box-shadow: 0 .2cqw 0 var(--ink); }
/* @end euchre */

/* ===== Cribbage ===== */
.cb-root { gap: 8px; }
.cb-scores { display: flex; gap: 6px; }
.cb-chip {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 8px 8px 5px 4px;
  border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08), 0 3px 0 var(--ink);
  transition: box-shadow .2s;
}
.cb-chip.turn { box-shadow: inset 0 0 0 2.5px var(--c), 0 3px 0 var(--ink); }
.cb-chip .avatar { flex: none; }
.cb-chip-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
.cb-chip-t b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-chip-t small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.15em; }
.cb-pts { flex: none; font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; color: var(--c); text-shadow: 0 2px 0 var(--ink); }
.cb-tag {
  position: absolute; top: -10px; right: 8px; line-height: 1.3; padding: 1px 8px; border-radius: 999px; font-style: normal; font-weight: 800; font-size: 11px;
  background: var(--panel2); color: var(--text); box-shadow: 0 0 0 2px var(--ink);
}
.cb-tag:empty { display: none; }
.cb-dealer {
  display: none; position: absolute; top: -10px; left: 34px; line-height: 1.3; padding: 1px 8px; border-radius: 999px; font-style: normal; font-weight: 800; font-size: 11px;
  background: var(--accent); color: var(--ink); box-shadow: 0 0 0 2px var(--ink);
}
.cb-chip.dealer .cb-dealer { display: block; }
.cb-scores { padding-top: 8px; }
.cb-tag.go { background: var(--accent2); color: var(--ink); animation: cb-pop .3s cubic-bezier(.2, 1.6, .4, 1); }
.cb-tag.games { background: var(--accent); color: var(--ink); }
@keyframes cb-pop { from { transform: scale(.3); } }
.cb-board { position: relative; margin: 0 -6px; }
.cb-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cb-felt {
  position: relative; padding: 10px; border-radius: 20px; min-height: 132px; display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.3px) 0 0 / 5px 5px, radial-gradient(ellipse at 50% 40%, #2f7a4f 0%, #1f5a39 75%, #174a2e 100%);
  box-shadow: inset 0 0 0 4px #6b4426, inset 0 0 0 6px #4e2f18, inset 0 8px 24px rgba(0, 0, 0, .4), 0 4px 0 var(--ink);
}
.cb-mid { display: grid; grid-template-columns: 62px minmax(0, 1fr) 66px; gap: 8px; align-items: center; min-height: 108px; }
.cb-root.cb-showing .cb-mid { display: none; }
.cb-deck { position: relative; width: 58px; height: 96px; padding: 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #d8e8df; font: inherit; }
.cb-deck small, .cb-criblabel { font-size: 11px; font-weight: 700; color: #d8e8df; white-space: nowrap; }
.cb-deck .cb-stack { --w: 50px; box-shadow: 0 3px 8px rgba(0, 0, 0, .35), 2px 2px 0 -1px #ddd, 4px 4px 0 -2px #3d1fa8, 5px 5px 8px rgba(0, 0, 0, .3); }
.cb-deck.live { cursor: pointer; }
.cb-deck.live .cb-stack { box-shadow: 0 0 0 3px var(--accent), 0 0 20px rgba(255, 197, 49, .6); animation: cd-bob 1.4s ease-in-out infinite; }
.cb-starter { position: absolute; left: 4px; top: -3px; width: 50px; height: 70px; pointer-events: none; }
.cb-starter .pcard { --w: 50px; position: absolute; left: 0; top: 0; rotate: 5deg; }
.cb-play { position: relative; height: 100px; border-radius: 16px; transition: background .2s, box-shadow .2s; }
.cb-play.ready { box-shadow: inset 0 0 0 2px rgba(255, 197, 49, .5); background: rgba(255, 197, 49, .06); }
.cb-play.drop-over { box-shadow: inset 0 0 0 3px var(--accent), 0 0 22px rgba(255, 197, 49, .45) !important; }
.cb-old { position: absolute; left: 0; bottom: 6px; width: 24px; height: 34px; }
.cb-ocard { --w: 24px; position: absolute; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.cb-ocard::after { display: none; }
.cb-series { position: absolute; left: 30px; top: 22px; height: 70px; }
.cb-scard { --w: 46px; position: absolute; top: 0; box-shadow: 0 3px 6px rgba(0, 0, 0, .35), inset 0 -4px 0 var(--pc, transparent); }
.cb-count {
  position: absolute; right: -2px; top: -4px; z-index: 20; width: 42px; height: 42px; border-radius: 50%; display: none; place-items: center; align-content: center;
  background: var(--bg2); color: var(--text); box-shadow: 0 0 0 2.5px var(--ink), 0 3px 0 2.5px var(--ink); line-height: 1;
}
.cb-count.on { display: grid; }
.cb-count b { font-family: var(--f-display); font-weight: 400; font-size: 19px; }
.cb-count small { font-size: 9px; color: var(--muted); font-weight: 700; }
.cb-count.hot { background: var(--accent); color: var(--ink); }
.cb-count.hot small { color: var(--ink); }
.cb-play.paused .cb-scard { filter: brightness(.88); }
.cb-crib { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 96px; justify-content: flex-end; border-radius: 16px; padding: 4px 0; }
.cb-cribstack { position: relative; width: 40px; height: 56px; }
.cb-ccard { --w: 38px; position: absolute; }
.cb-crib.mine .cb-criblabel { color: var(--accent); }
.cb-slots { display: none; gap: 6px; }
.cb-slot { width: 46px; aspect-ratio: 5 / 7; border-radius: 7px; border: 2px dashed rgba(255, 255, 255, .4); display: grid; place-items: center; }
.cb-slotcard { --w: 46px; pointer-events: auto; cursor: pointer; }
.cb-mid.discard { grid-template-columns: 62px 0 minmax(0, 1fr); gap: 4px; }
.cb-mid.discard .cb-play { visibility: hidden; }
.cb-crib.open { flex-direction: row; justify-content: center; flex-wrap: wrap; align-content: center; gap: 8px 10px; background: rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14); padding: 8px; }
.cb-crib.open .cb-slots { display: flex; }
.cb-crib.open .cb-criblabel { flex-basis: 100%; text-align: center; order: -1; font-size: 12px; }
.cb-crib.drop-over { box-shadow: inset 0 0 0 3px var(--accent), 0 0 22px rgba(255, 197, 49, .5) !important; }
.cb-show { display: none; flex-direction: column; align-items: center; gap: 8px; }
.cb-root.cb-showing .cb-show { display: flex; }
.cb-show-h { font-family: var(--f-display); font-size: 16px; color: var(--text); text-shadow: 0 2px 0 var(--ink); display: flex; align-items: baseline; gap: 8px; }
.cb-show-h small { font-family: var(--f-body); font-size: 11px; color: #d8e8df; font-weight: 600; }
.cb-showcards { display: flex; gap: 4px; align-items: flex-end; }
.cb-showcard { --w: 48px; transition: transform .2s, box-shadow .2s; }
.cb-showcard.hot { transform: translateY(-10px); box-shadow: 0 0 0 3px var(--accent), 0 6px 14px rgba(0, 0, 0, .45); }
.cb-showstart { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-left: 10px; }
.cb-showstart small { font-size: 10px; font-weight: 700; color: #d8e8df; }
.cb-tally { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; }
.cb-tally:has(> .cb-items:empty) { display: none; }
.cb-items { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.cb-item { padding: 3px 8px; border-radius: 999px; background: rgba(11, 16, 51, .55); color: var(--text); font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.cb-item.run { box-shadow: inset 0 0 0 1.5px var(--accent2); }
.cb-item.pair, .cb-item.three, .cb-item.four { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cb-item.flush { box-shadow: inset 0 0 0 1.5px #3d8fe0; }
.cb-item.nobs { box-shadow: inset 0 0 0 1.5px #ff5d8f; }
.cb-item.zero { color: #d8e8df; font-weight: 600; }
.cb-total { flex: none; min-width: 44px; text-align: center; font-family: var(--f-display); font-size: 30px; color: var(--accent); text-shadow: 0 3px 0 var(--ink); }
.cb-total:empty { display: none; }
.cb-note { margin: 0; font-size: 13px; font-weight: 600; color: #fff3d6; text-align: center; }
.cb-note:empty { display: none; }
.cb-drawrow { display: flex; gap: 22px; }
.cb-drawone { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 700; color: #d8e8df; }
.cb-drawone.low .pcard { box-shadow: 0 0 0 3px var(--accent), 0 6px 14px rgba(0, 0, 0, .45); }
.cb-drawone.low small { color: var(--accent); }
.cb-endrows { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 320px; }
.cb-endrow { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 12px; background: rgba(11, 16, 51, .45); box-shadow: inset 4px 0 0 var(--c); }
.cb-endrow b { flex: 1; }
.cb-endrow span { font-family: var(--f-display); font-size: 20px; color: var(--c); }
.cb-endrow small { color: var(--muted); font-weight: 600; }
.cb-sk { font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--cherry); color: #fff3d6; }
.cb-root.cb-nohand .cb-handwrap { display: none; }
.cb-handwrap { padding-top: 18px; padding-bottom: 18px; }
.cb-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cb-actions:empty { display: none; }
.cb-actions > .btn.grow { flex: 1; max-width: 360px; }
.cb-mug { background: var(--cherry); color: #fff3d6; }
.cb-claim { display: flex; flex-direction: column; gap: 8px; width: 100%; align-items: center; }
.cb-claim > .btn { width: 100%; max-width: 360px; }
.cb-pad { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; width: 100%; max-width: 420px; }
.cb-num {
  height: 34px; padding: 0; border-radius: 9px; border: 0; font: inherit; font-weight: 800; font-size: 15px; color: var(--text);
  background: var(--panel2); box-shadow: 0 3px 0 var(--ink); cursor: pointer;
}
.cb-num:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.cb-num.on { background: var(--accent); color: var(--ink); }
@media (max-width: 360px) {
  .cb-chip { gap: 4px; padding-right: 6px; }
  .cb-chip-t b { font-size: 12px; }
  .cb-pts { font-size: 18px; }
  .cb-mid { grid-template-columns: 56px minmax(0, 1fr) 58px; gap: 6px; }
  .cb-showcard { --w: 42px; }
  .cb-scard { --w: 42px; }
}
/* walkthrough */
.tut-cb-board { width: 92cqw; }
.tut-cb-board svg { display: block; width: 100%; height: auto; }
.tut-cb-crib { width: 34cqw; height: 40cqh; border-radius: 3cqw; border: .6cqw dashed rgba(255, 255, 255, .45); background: rgba(0, 0, 0, .2); display: grid; place-items: end center; padding-bottom: .8cqw; color: #d8e8df; font-weight: 700; font-size: 3.4cqw; }
.tut-cb-count { width: 13cqw; height: 13cqw; border-radius: 50%; display: grid; place-items: center; background: var(--bg2); color: var(--text); font-family: var(--f-display); font-size: 5.6cqw; box-shadow: 0 0 0 .7cqw var(--ink), 0 .9cqw 0 .7cqw var(--ink); }
.tut-cb-count.hot { background: var(--accent); color: var(--ink); }
.tut-cb-items { width: 94cqw; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2cqw; }
.tut-cb-item { padding: .6cqw 2cqw; border-radius: 999px; background: rgba(11, 16, 51, .7); color: var(--text); font-weight: 700; font-size: 3.3cqw; white-space: nowrap; }
.tut-stage .pcard.hot { box-shadow: 0 0 0 .8cqw var(--accent), 0 0 4cqw rgba(255, 197, 49, .7); }
/* @end cribbage */

/* ===== Homestead ===== */
.hs-root { gap: 8px; }
.hs-bar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; }
.hs-chip { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 4px 6px 4px 4px; border-radius: 12px; background: var(--panel); border: 2px solid var(--ink); position: relative; transition: box-shadow .2s, transform .2s; }
.hs-chip.me { background: var(--panel2); }
.hs-chip.turn { box-shadow: 0 0 0 3px var(--c), 0 3px 0 3px var(--ink); transform: translateY(-1px); }
.hs-chip.gone { opacity: .4; }
.hs-chip .avatar { flex: none; }
.hs-botav { background: var(--c); display: grid; place-items: center; padding: 2px; }
.hs-botav svg { width: 100%; height: 100%; }
.hs-chipmid { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.1; }
.hs-nm { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-chipstats { display: flex; gap: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.hs-chipstats span { display: inline-flex; align-items: center; gap: 2px; }
.hs-chipstats svg { width: 13px; height: 13px; }
.hs-cards.hoard b { color: #ff9c8a; }
.hs-badges { position: absolute; top: -8px; right: -3px; display: flex; gap: 1px; }
.hs-badges:empty { display: none; }
.hs-badges i { width: 18px; height: 18px; border-radius: 50%; background: var(--bg2); border: 1.5px solid var(--ink); display: grid; place-items: center; }
.hs-badges i.aw { background: #fff3d6; }
.hs-badges svg { width: 14px; height: 14px; }
.hs-banner { font-size: 17px; padding: 7px 12px; }
.hs-banner small { font-size: 12.5px; }
.hs-boardwrap { position: relative; width: 100%; max-width: 470px; margin: -4px auto 0; aspect-ratio: 1; overflow: hidden; border-radius: 14px; }
.hs-board { display: block; width: 100%; height: 100%; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.hs-num { font: 800 25px var(--f-body); fill: var(--ink); }
.hs-num.hot { fill: #c22a20; }
.hs-rate { font: 800 17px var(--f-body); fill: var(--ink); }
.hs-field > rect { transition: filter .25s; }
.hs-token, .hs-in, .hs-spot .glow { transform-box: fill-box; transform-origin: center; }
.hs-field.hit > rect { filter: brightness(1.28) saturate(1.15); }
.hs-field.hit .hs-token { animation: hs-ping .55s ease-out 2; }
@keyframes hs-ping { 40% { transform: scale(1.32); } }
.hs-dryfx { opacity: 0; pointer-events: none; transition: opacity .4s; }
.hs-field.dry .hs-dryfx { opacity: 1; }
.hs-field.dry .hs-token { opacity: .7; }
.hs-mark { pointer-events: none; }
.hs-spot { cursor: pointer; }
.hs-spot .glow { fill: rgba(255, 183, 3, .38); stroke: #ffb703; stroke-width: 4.5; animation: hs-glow 1.1s ease-in-out infinite; }
.hs-spot.barn .glow { fill: rgba(255, 183, 3, .2); }
.hs-spot.drop-over .glow, .hs-spot.picked .glow { fill: #ffb703; stroke: #fff3d6; animation: none; transform: scale(1.3); }
@keyframes hs-glow { 50% { transform: scale(1.22); stroke-opacity: .55; } }
.hs-haze { position: absolute; inset: -10%; pointer-events: none; background: radial-gradient(ellipse at 30% 40%, rgba(214, 170, 104, .95), rgba(170, 120, 60, .75) 45%, rgba(140, 95, 45, 0) 75%); border-radius: 40%; }
.hs-panel:empty { display: none; }
.hs-panel { display: flex; flex-direction: column; gap: 8px; }
.hs-choose, .hs-confirm { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: var(--panel); border: 2.5px solid var(--ink); box-shadow: inset 0 0 0 2px var(--accent); }
.hs-choose > b { text-align: center; font-size: 15px; }
.hs-confirm { padding: 8px 10px; gap: 6px; }
.hs-confirm span { font-weight: 700; font-size: 14px; text-align: center; }
.hs-confirm .btn.small { margin: 0; }
.hs-confirm.inline { flex-direction: row; align-items: center; }
.hs-confirm.inline span { flex: 1; text-align: left; }
.hs-kinds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.hs-kind { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 5px; border-radius: 12px; background: var(--panel2); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink), inset 0 5px 0 var(--f, transparent); color: var(--text); font: 700 11px var(--f-body); line-height: 1.1; text-align: center; }
.hs-kind:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink), inset 0 5px 0 var(--f, transparent); }
.hs-kind i { width: 30px; height: 30px; }
.hs-kind i svg { width: 100%; height: 100%; }
.hs-kind small { font-weight: 500; font-size: 10px; color: var(--muted); }
.hs-kind.on { background: var(--accent); color: var(--ink); }
.hs-kind.on small { color: var(--ink); }
.hs-kind.deal span { color: #8fe08a; }
.hs-kind.on.deal span { color: var(--ink); }
.hs-kind[disabled] { opacity: .4; box-shadow: none; }
.hs-dock { display: flex; gap: 8px; align-items: stretch; }
.hs-dock .d3-tray { flex: 1; min-width: 0; }
.hs-side { flex: none; width: 116px; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.hs-side .btn.small { min-height: 34px; margin: 0; padding: 0 8px; font-size: 14px; gap: 5px; }
.hs-dock.watch .hs-side { display: none; }
.hs-ico { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; }
.hs-ico svg { width: 100%; height: 100%; }
.hs-end.win { background: var(--good); color: var(--ink); animation: nudge 1.4s ease-in-out infinite; }
.hs-hand { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.hs-hand:empty, .hs-build:empty { display: none; }
.hs-tile { position: relative; display: flex; flex-direction: column; align-items: center; padding: 4px 2px 3px; border-radius: 12px; background: var(--panel); border: 2px solid var(--ink); box-shadow: inset 0 -4px 0 var(--g); }
.hs-tile i { width: 30px; height: 30px; }
.hs-tile i svg { width: 100%; height: 100%; }
.hs-tile small { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.hs-count { position: absolute; top: 1px; right: 5px; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hs-tile.zero i, .hs-tile.zero .hs-count { opacity: .35; }
.hs-build { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.hs-piece { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 3px 4px; border-radius: 13px; background: var(--panel); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); color: var(--text); font: 700 12px var(--f-body); touch-action: none; }
.hs-piece.ok { background: var(--panel2); box-shadow: 0 3px 0 var(--ink), inset 0 0 0 2px var(--accent); }
.hs-piece.armed { background: var(--accent); color: var(--ink); }
.hs-piece[disabled] { opacity: .5; box-shadow: none; }
.hs-pic { width: 34px; height: 34px; }
.hs-pic svg, .hs-dragghost svg { width: 100%; height: 100%; }
.sheet h2 .hs-ico { width: 28px; height: 28px; margin-right: 8px; vertical-align: -3px; }
.hs-cost { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; max-width: 72px; }
.hs-cost i { width: 14px; height: 14px; }
.hs-cost i svg { width: 100%; height: 100%; }
.hs-free { color: #8fe08a; font-weight: 800; }
.hs-left { font-style: normal; font-size: 10px; font-weight: 500; color: var(--muted); }
.hs-piece.armed .hs-left { color: var(--ink); }
.hs-dragghost { display: flex; justify-content: center; align-items: flex-start; }
.hs-dragghost i { width: 50px; height: 50px; margin-top: -34px; filter: drop-shadow(0 6px 0 rgba(11, 16, 51, .5)); }
.hs-fly { position: fixed; z-index: 9000; pointer-events: none; }
.hs-fly svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(11, 16, 51, .45)); }
.hs-log { display: flex; flex-direction: column; align-items: center; min-height: 32px; }
.hs-log small { color: var(--muted); font-size: 12.5px; text-align: center; line-height: 1.3; }
.hs-offers { position: fixed; left: 0; right: 0; bottom: calc(12px + var(--safe-bottom)); z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 12px; }
.hs-offer { pointer-events: auto; width: min(420px, 100%); display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border-radius: 16px; background: var(--bg2); border: 3px solid var(--ink); border-left: 9px solid var(--c); box-shadow: 0 6px 0 var(--ink); }
.hs-offer > b { font-size: 15px; }
.hs-offer.peek, .hs-offer.small { padding: 7px 12px; box-shadow: 0 4px 0 var(--ink); }
.hs-offer.peek small, .hs-offer.small small { font-size: 13px; color: var(--muted); }
.hs-offer .row { gap: 6px; }
.hs-offer .btn.small { margin: 0; padding: 0 6px; white-space: nowrap; font-size: 14px; }
.hs-short { font-size: 12.5px; color: #ffcf8a; }
.hs-deal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.hs-deal b { font-size: 14px; }
.hs-offhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hs-offhead .btn.small { min-height: 32px; font-size: 13px; }
.hs-swap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hs-swap > div { background: rgba(5, 9, 40, .45); border-radius: 10px; padding: 4px 6px 5px; }
.hs-swap small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.hs-goods { display: flex; flex-wrap: wrap; gap: 1px; min-height: 26px; align-items: center; }
.hs-goods i { width: 26px; height: 26px; }
.hs-goods i svg { width: 100%; height: 100%; }
.hs-anses { display: flex; flex-wrap: wrap; gap: 5px; }
.hs-ans { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--panel); border-left: 5px solid var(--c); }
.hs-ans em { font-style: normal; font-weight: 500; color: var(--muted); }
.hs-ans.no { opacity: .55; }
.hs-ans.counter em { color: var(--accent); }
.hs-counter { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: var(--panel); border-left: 6px solid var(--c); }
.hs-timer { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.hs-timer i { display: block; height: 100%; background: var(--accent); transform-origin: left; }
.hs-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.hs-step { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hs-stepbtn { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 6px 2px 4px; border-radius: 12px; background: var(--panel2); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); color: var(--text); }
.hs-stepbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.hs-stepbtn i { width: 30px; height: 30px; }
.hs-stepbtn i svg { width: 100%; height: 100%; }
.hs-stepbtn b { position: absolute; top: 0; right: 4px; font-size: 16px; color: var(--accent); }
.hs-stepbtn .plus { font-size: 12px; font-weight: 800; color: var(--muted); line-height: 1; }
.hs-step.on .hs-stepbtn { background: var(--panel); box-shadow: 0 3px 0 var(--ink), inset 0 0 0 2px var(--accent); }
.hs-stepbtn[disabled] { opacity: .45; box-shadow: none; }
.hs-minus { width: 34px; height: 26px; border-radius: 9px; background: var(--panel); border: 2px solid var(--ink); color: var(--text); font-weight: 800; font-size: 16px; line-height: 1; }
.hs-minus[disabled] { opacity: .3; }
.hs-step small { font-size: 10.5px; color: var(--muted); }
.hs-tos { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-to { padding: 7px 12px; border-radius: 999px; background: var(--panel2); border: 2px solid var(--ink); border-left: 6px solid var(--c, var(--accent)); color: var(--text); font-weight: 700; font-size: 14px; }
.hs-to.on { background: var(--accent); color: var(--ink); }
@media (max-width: 360px) {
  .hs-side { width: 100px; }
  .hs-chip .avatar { display: none; }
  .hs-chip { padding-left: 6px; }
  .hs-tile i, .hs-kind i, .hs-stepbtn i { width: 26px; height: 26px; }
  .hs-piece { font-size: 11px; }
  .hs-pic { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-spot .glow, .hs-field.hit .hs-token, .hs-end.win { animation: none; }
}
/* Homestead tutorial props */
.tut-hs-board { width: 50cqw; }
.tut-hs-board svg { display: block; width: 100%; }
.tut-hs-board g.tut-hs-hit > rect:first-child { filter: brightness(1.35) saturate(1.2); }
.tut-hs-piece { width: 9cqw; z-index: 3; }
.tut-hs-piece svg, .tut-hs-good svg { display: block; width: 100%; }
.tut-hs-piece.barn { width: 11cqw; }
.tut-hs-piece.big { width: 15cqw; }
.tut-hs-piece.row { width: 8cqw; }
.tut-hs-piece.bar { width: 11cqw; padding: .8cqw; border-radius: 2cqw; background: var(--panel2); border: .6cqw solid var(--ink); box-shadow: inset 0 0 0 .5cqw var(--accent); }
.tut-hs-piece.tut-hs-placed { width: 11cqw; z-index: 6; }
.tut-hs-piece.tut-hs-placed.on-board { width: 12cqw; height: 3cqw; border-radius: .6cqw; background: #ff5a5f; border: .7cqw solid var(--ink); }
.tut-hs-piece.on-board svg { display: none; }
.tut-hs-good { width: 7cqw; z-index: 7; filter: drop-shadow(0 .6cqw 0 rgba(11, 16, 51, .4)); }
.tut-hs-glow { width: 6cqw; height: 6cqw; border-radius: 50%; background: rgba(255, 183, 3, .4); border: .8cqw solid #ffb703; z-index: 4; animation: hs-tglow 1s ease-in-out infinite; }
.tut-hs-glow.h { width: 12cqw; height: 3cqw; border-radius: 2cqw; }
.tut-hs-glow.v { width: 3cqw; height: 12cqw; border-radius: 2cqw; }
@keyframes hs-tglow { 50% { opacity: .5; } }
.tut-hs-ring { width: 31cqw; height: 49cqh; border: .8cqw dashed var(--accent); border-radius: 2cqw; z-index: 2; }
.tut-hs-no { width: 5cqw; height: 5cqw; z-index: 5; background: linear-gradient(45deg, transparent 42%, var(--bad) 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--bad) 42% 58%, transparent 58%); }
.tut-hs-chip { padding: .8cqw 3cqw; border-radius: 999px; background: var(--panel2); border: .6cqw solid var(--ink); border-left: 2cqw solid var(--c); font-weight: 800; font-size: 4cqw; color: var(--text); }
.tut-hs-offer { width: 70cqw; display: flex; flex-direction: column; gap: 1.5cqw; padding: 2.5cqw 3cqw; border-radius: 3.5cqw; background: var(--bg2); border: .8cqw solid var(--ink); border-left: 2.4cqw solid #5b8def; box-shadow: 0 1.4cqw 0 var(--ink); font-size: 4.2cqw; }
.tut-hs-swap { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.tut-hs-swap > div { display: flex; align-items: center; gap: 1.5cqw; padding: 1cqw 2cqw; border-radius: 2cqw; background: rgba(5, 9, 40, .45); }
.tut-hs-swap small { font-size: 3.2cqw; color: var(--muted); }
.tut-hs-swap svg { width: 8cqw; }
.tut-hs-btns { display: flex; gap: 1.5cqw; }
.tut-hs-btns span { flex: 1; text-align: center; padding: 1.2cqw 0; border-radius: 2cqw; background: var(--panel2); border: .5cqw solid var(--ink); font-weight: 700; font-size: 3.4cqw; }
.tut-hs-btns span.deal { background: var(--accent); color: var(--ink); }
.tut-hs-store { padding: 1.4cqw 4cqw; border-radius: 2.4cqw; background: #c2543a; border: .7cqw solid var(--ink); color: var(--text); font-weight: 800; font-size: 4cqw; }
.tut-hs-haze { width: 70cqw; height: 100cqh; border-radius: 40%; background: radial-gradient(ellipse, rgba(214, 170, 104, .95), rgba(170, 120, 60, .6) 55%, rgba(140, 95, 45, 0) 75%); z-index: 6; }
.tut-label.tut-hs-name { background: transparent; box-shadow: none; color: var(--text); font-weight: 700; }
.tut-label.tut-hs-cost { background: transparent; box-shadow: none; color: var(--muted); font-size: 3.2cqw; }
/* @end homestead */

/* ===== Rank & File ===== */
.rf { display: flex; flex-direction: column; gap: 8px; }
.rf-banner { padding: 8px 14px; }
.rf-num { font-family: var(--f-display); font-size: 12.5px; }
.rf-side { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 3px 10px; border-radius: 16px; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); transition: box-shadow .2s; }
.rf-side.to-move { box-shadow: 0 0 0 3px var(--accent), 0 4px 0 var(--ink); }
.rf-me { width: 26px; height: 26px; flex: none; display: block; }
.rf-me svg, .rf-mini svg, .rf-tile svg, .rf-ghost svg, .rf-stile svg, .rf-chip-t svg, .rf-ch-tile svg, .rf-cl-tile svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rf-side .who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
.rf-side .who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-side .who small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-fallen { display: flex; align-items: center; flex: none; padding-right: 8px; }
.rf-mini { width: 20px; height: 20px; margin-right: -8px; flex: none; filter: grayscale(.55) brightness(.85); }
.rf-fallen .rf-n { margin-left: 13px; font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rf-frame { position: relative; border-radius: 18px; padding: 6px; background: #8a5a2f; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink), inset 0 0 0 2px #a8743f; align-self: center; width: min(100%, calc((100dvh - 330px - var(--safe-top) - var(--safe-bottom)) * 8 / 9)); min-width: min(100%, 250px); }
.rf-board { position: relative; isolation: isolate; background: #4f9a47; aspect-ratio: 8 / 9; width: 100%; border-radius: 10px; outline: 2px solid var(--ink); overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; cursor: pointer; perspective: 700px; }
.rf-sqs { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(9, 1fr); }
.rf-sq { position: relative; background: #4f9a47; }
.rf-sq.d { background: #468e3f; }
.rf-sq.pond, .rf-scell.pond { background: #1aa6a0; box-shadow: inset 0 0 0 2px #0d6460; border-radius: 26%; }
.rf-sq.pond svg, .rf-scell.pond svg { width: 100%; height: 100%; display: block; }
.rf-sq::before, .rf-sq::after { content: ""; position: absolute; pointer-events: none; }
.rf-sq::before { inset: 0; transition: background-color .15s; }
.rf-sq.trail::before { background: rgba(255, 243, 214, .22); }
.rf-sq.sel::before { background: rgba(255, 183, 3, .55); }
.rf-sq.pre { outline: 3px dashed #c99bec; outline-offset: -4px; }
.rf-sq.pre::before { background: rgba(123, 63, 160, .3); }
.rf-sq.tgt::after { inset: 34%; border-radius: 50%; background: rgba(255, 183, 3, .9); box-shadow: 0 0 0 3px rgba(11, 16, 51, .35), 0 0 12px 3px rgba(255, 183, 3, .6); animation: rf-glow 1.2s ease-in-out infinite; z-index: 4; }
.rf-sq.tgt.hit::after { inset: 3%; border-radius: 22%; background: none; box-shadow: inset 0 0 0 4px #fb6107, 0 0 14px 4px rgba(251, 97, 7, .55); }
.rf-sq.tgt.over::before { background: rgba(255, 243, 214, .4); box-shadow: inset 0 0 0 4px var(--accent); }
@keyframes rf-glow { 50% { opacity: .55; } }
.rf-pcs { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.rf-pc { position: absolute; left: 0; top: 0; width: 12.5%; height: calc(100% / 9); padding: .5%; will-change: transform; display: flex; align-items: center; justify-content: center; }
.rf-tile { width: 100%; height: 100%; transform-style: preserve-3d; }
.rf-pc.mv:not(.mine)::after { content: ""; position: absolute; left: 50%; bottom: 3%; width: 16%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--text); box-shadow: 0 0 0 1.5px var(--ink); }
.rf-pc.moving { z-index: 8; }
.rf-pc.dragging { z-index: 10; filter: drop-shadow(0 10px 6px rgba(11, 16, 51, .35)); }
.rf-why { position: absolute; z-index: 14; left: 50%; top: 8px; transform: translate(-50%, -6px); max-width: 92%; width: max-content; padding: 6px 12px; border-radius: 12px; background: var(--ink); color: var(--text); font-weight: 700; font-size: 14px; line-height: 1.3; text-align: center; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.rf-why.on { opacity: 1; transform: translate(-50%, 0); }
.rf-clash { position: absolute; z-index: 12; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92%, 330px); padding: 12px 10px 10px; border-radius: 20px; background: var(--bg2); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); pointer-events: none; }
.rf-cl-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.rf-cl-side { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.rf-cl-tile { width: min(84px, 24vw); aspect-ratio: 1; transform-style: preserve-3d; }
.rf-cl-name { display: flex; flex-direction: column; align-items: center; line-height: 1.1; transition: opacity .15s; }
.rf-cl-name b { font-size: 15px; }
.rf-cl-name small { font-size: 12px; color: var(--muted); }
.rf-cl-vs { font-family: var(--f-display); color: var(--accent); font-size: 20px; flex: none; text-shadow: 2px 2px 0 var(--ink); }
.rf-cl-say { margin-top: 8px; min-height: 2.6em; text-align: center; font-weight: 700; font-size: 15px; line-height: 1.3; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.rf-cl-say.on { opacity: 1; transform: none; }
.rf-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rf-tools .grow { flex: 1; }
.rf-tools .rf-resign { color: #ffb0b3; }
.rf-setup { display: flex; flex-direction: column; gap: 10px; }
.rf-opp { display: flex; flex-direction: column; gap: 6px; }
.rf-st { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 14px; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font-weight: 600; font-size: 14px; }
.rf-st.ok { box-shadow: inset 0 0 0 2px var(--good), 0 3px 0 var(--ink); }
.rf-st.ok::after { content: "✓"; margin-left: auto; color: var(--good); font-weight: 800; }
.rf-sframe { border-radius: 16px; padding: 5px; background: #8a5a2f; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink), inset 0 0 0 2px #a8743f; }
.rf-sgrid { background: #4f9a47; display: grid; grid-template-columns: repeat(8, 1fr); border-radius: 9px; overflow: hidden; outline: 2px solid var(--ink); }
.rf-scell { position: relative; aspect-ratio: 1; background: #4f9a47; display: flex; align-items: center; justify-content: center; touch-action: none; }
.rf-scell.d { background: #468e3f; }
.rf-scell.far { opacity: .55; aspect-ratio: 2 / 1; }
.rf-scell.far.pond { border-radius: 30%; }
.rf-scell.can::after { content: ""; position: absolute; inset: 36%; border-radius: 50%; background: rgba(255, 183, 3, .75); animation: rf-glow 1.2s ease-in-out infinite; pointer-events: none; }
.rf-scell.held { box-shadow: inset 0 0 0 3px var(--accent); background: #6aa95c; }
.rf-scell.drop-over { box-shadow: inset 0 0 0 3px var(--accent) !important; background: #74b866; }
.rf-stile { width: 88%; height: 88%; }
.rf-scell.held .rf-stile { transform: translateY(-6%) scale(1.06); }
.rf-scell.lock .rf-stile { filter: saturate(.85); }
.rf-ghost { width: 100%; height: 100%; }
.rf-tray { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 8px; border-radius: 16px; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.rf-tray.drop-over { box-shadow: 0 0 0 3px var(--accent), 0 4px 0 var(--ink) !important; }
.rf-chip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 2px 2px; border-radius: 12px; background: var(--panel2); border: 2px solid var(--ink); color: var(--text); font: inherit; cursor: grab; touch-action: none; }
.rf-chip-t { width: min(40px, 100%); aspect-ratio: 1; display: block; }
.rf-chip-n { font-size: 12px; font-variant-numeric: tabular-nums; }
.rf-chip.on { background: var(--accent); color: var(--ink); box-shadow: 0 0 0 2px var(--accent); }
.rf-chip.none { opacity: .35; }
.rf-chip:disabled { cursor: default; }
.rf-hint { margin: 0; min-height: 2.6em; color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.rf-sbtns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rf-sbtns .rf-ready { flex: 1 1 100%; }
.rf-sheet .rf-chart { display: flex; flex-direction: column; gap: 4px; max-height: 58dvh; overflow-y: auto; }
.rf-ch-head, .rf-ch-row { display: grid; grid-template-columns: 34px 1fr 46px 46px; align-items: center; gap: 8px; }
.rf-ch-head b { font-size: 13px; color: var(--muted); text-align: center; }
.rf-ch-row { padding: 4px 0; border-bottom: 1px solid rgba(185, 193, 236, .18); }
.rf-ch-tile { width: 34px; height: 34px; display: block; }
.rf-ch-what { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.rf-ch-what small { color: var(--muted); font-size: 12px; }
.rf-ch-n { text-align: center; font-variant-numeric: tabular-nums; }
.rf-slot { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(185, 193, 236, .18); }
.rf-slot-btns { grid-column: 1 / -1; display: flex; gap: 6px; }
.rf-slot-btns .btn { flex: 1; }
.rf-prev { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.rf-pv { aspect-ratio: 1; border-radius: 3px; background: rgba(76, 185, 68, .35); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 1; }
.rf-pv[class*="t"] { background: var(--panel2); }
.rf-pv.tX, .rf-pv.tB { background: var(--accent); color: var(--ink); }
.tut-rf-sq { position: absolute; width: 13%; aspect-ratio: 1; transform: translate(-50%, -50%); background: #4f9a47; border-radius: 3px; }
.tut-rf-sq.d { background: #468e3f; }
.tut-rf-sq.pond { background: #1aa6a0; border-radius: 26%; }
.tut-rf-sq.glow { box-shadow: inset 0 0 0 3px var(--accent); }
.tut-rf-sq.hit { box-shadow: inset 0 0 0 3px #fb6107; }
.tut-rf-pc { position: absolute; width: 11.5%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.tut-rf-pc svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tut-rf-pc.big { width: 21%; }
.tut-rf-pc.tut-lifted { z-index: 5; filter: drop-shadow(0 6px 4px rgba(11, 16, 51, .4)); }
@media (prefers-reduced-motion: reduce) { .rf-sq.tgt::after, .rf-scell.can::after { animation: none; } }
/* @end rankfile */

/* ===== Conquest ===== */
.cq-root { gap: 8px; }
.cq-banner { padding: 7px 12px; font-size: 17px; }
.cq-banner small { font-size: 12.5px; }
.cq-strip { display: flex; gap: 6px; align-items: stretch; }
.cq-seats { flex: 1; min-width: 0; display: flex; gap: 4px; }
.cq-seat {
  flex: 1 1 0; min-width: 0; padding: 3px 5px 3px 7px; border-radius: 10px; border: 2px solid var(--ink);
  background: var(--panel); position: relative; overflow: hidden; box-shadow: 0 2px 0 var(--ink);
}
.cq-seat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.cq-seat.turn { background: var(--c); color: var(--ink); }
.cq-seat.turn .cq-stats { color: var(--ink); }
.cq-seat.out { opacity: .4; }
.cq-sname { display: block; font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.cq-stats { display: flex; align-items: center; gap: 1px; font-size: 11.5px; font-weight: 700; color: var(--muted); line-height: 1; white-space: nowrap; overflow: hidden; }
.cq-stats > span:not(.cq-ic) { margin-right: 3px; }
.cq-ic { display: inline-flex; width: 12px; height: 12px; flex: none; }
.cq-ic svg { width: 100%; height: 100%; }
.cq-crates { position: absolute; top: 2px; right: 3px; display: inline-flex; align-items: center; gap: 1px; padding: 0 2px; border-radius: 6px; background: var(--ink); color: var(--text); font-size: 10.5px; }
.cq-seat.crated .cq-sname { padding-right: 22px; }
.cq-round {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px 7px;
  border-radius: 10px; border: 2px solid var(--ink); background: var(--bg2); line-height: 1.1;
}
.cq-round b { font-family: var(--f-display); font-weight: 400; font-size: 13px; color: var(--accent); }
.cq-round small { font-size: 10px; color: var(--muted); font-weight: 700; white-space: nowrap; }

.cq-board { flex: 1 1 0; min-height: 230px; max-height: calc((min(100vw, 720px) - 32px) * 316 / 300 + 8px); display: flex; justify-content: center; align-items: center; container-type: size; }
.cq-map {
  width: min(100cqw, calc(100cqh * 300 / 316)); height: auto; aspect-ratio: 300 / 316; display: block; touch-action: none; user-select: none; -webkit-user-select: none;
  border-radius: 18px; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); background: #123f6b;
}
.cq-rname { font: 700 7.4px var(--f-body); fill: #d9ecff; fill-opacity: .82; letter-spacing: .3px; text-transform: uppercase; pointer-events: none; }
.cq-lanes path { fill: none; stroke: #e9f5ff; stroke-opacity: .7; stroke-width: 1.3; stroke-dasharray: 3.2 2.4; stroke-linecap: round; }
.cq-land { stroke: var(--ink); stroke-width: .9; stroke-linejoin: round; cursor: pointer; transition: fill .25s; }
.cq-land.neutral { filter: saturate(.6); }
.cq-tex { pointer-events: none; }
.cq-flood { pointer-events: none; display: none; }
.cq-region { fill: none; stroke: var(--ink); stroke-width: 2.1; stroke-linejoin: round; pointer-events: none; }
.cq-region-own { fill: none; stroke-width: 1.1; stroke-linejoin: round; pointer-events: none; stroke-dasharray: 4 2.2; }
.cq-coast { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; pointer-events: none; }
.cq-hl, .cq-arrows, .cq-chips { pointer-events: none; }
.cq-hl-src { fill: #fff; fill-opacity: .28; stroke: #fff; stroke-width: 2.2; stroke-linejoin: round; }
.cq-hl-tgt { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 3 2; animation: cq-march 0.9s linear infinite; }
.cq-hl-tgt.attack { stroke: #ffe36b; }
.cq-hl-tgt.place, .cq-hl-tgt.fort { stroke: #fff; stroke-opacity: .75; stroke-width: 1.1; }
.cq-hl-tgt.fort { stroke: #ffb703; stroke-opacity: 1; stroke-width: 1.5; }
@keyframes cq-march { to { stroke-dashoffset: -10; } }
.cq-arrow-ink { fill: none; stroke: var(--ink); stroke-width: 5.4; stroke-linecap: round; }
.cq-arrow { fill: none; stroke-width: 3; stroke-linecap: round; }
.cq-head-ink { fill: var(--ink); stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: miter; }
.cq-head { stroke: none; }
.cq-chip { transform-box: view-box; }
.cq-disc { stroke: var(--ink); stroke-width: 1.6; }
.cq-num { font: 800 9.4px var(--f-body); fill: #fff; }
.cq-crown { fill: #ffb703; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: miter; }
.cq-tower { fill: #d8d4e6; stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: miter; }

.cq-dock { flex: none; height: 104px; display: flex; gap: 8px; align-items: stretch; }
.cq-traybox { flex: 1 1 0; min-width: 0; position: relative; }
.cq-traybox .d3-tray { height: 104px !important; border-radius: 16px; }
.cq-traybox .d3 .d3-face { background: radial-gradient(circle at 30% 25%, #fff 0%, var(--dc, #f4f1ff) 55%, color-mix(in srgb, var(--dc, #dcd6f5) 70%, #0b1033) 100%); box-shadow: inset 0 0 0 2px rgba(11, 16, 51, .35); }
.cq-traybox .d3 .d3-pips circle { fill: #0b1033; }
.cq-traybox .d3.cq-won .d3-face { box-shadow: inset 0 0 0 3px #fff, 0 0 14px #fff; }
.cq-traybox .d3.cq-lost { opacity: .55; }
.cq-traybox .d3 { transition: opacity .2s; }
.cq-traybox .d3-hint { top: 7px; font-size: 11.5px; }
.cq-traycap { position: absolute; left: 10px; right: 10px; bottom: 6px; display: flex; justify-content: space-between; pointer-events: none; gap: 6px; }
.cq-side { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 800; color: #fff; text-shadow: 0 1px 0 var(--ink); min-width: 0; white-space: nowrap; overflow: hidden; }
.cq-side i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); border: 1.5px solid var(--ink); flex: none; }
.cq-mod { display: none; padding: 0 4px; border-radius: 6px; background: var(--accent); color: var(--ink); text-shadow: none; font-size: 10px; border: 1.5px solid var(--ink); }
.cq-mod.on { display: inline-block; }
.cq-ctl { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.cq-ctl.side { flex: 0 0 86px; gap: 8px; }
.cq-ctl.side .btn { width: 100%; padding: 0 6px; }
.cq-note { text-align: center; font-family: var(--f-display); color: var(--accent); font-size: 15px; }
.cq-row { display: flex; gap: 10px; align-items: center; width: 100%; }
.cq-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cq-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.cq-btns .btn { flex: 1 1 auto; padding: 0 8px; min-height: 36px; font-size: 13.5px; margin-bottom: 0; }
.cq-btns .btn.on { background: var(--accent); color: var(--ink); }
.cq-cost { display: inline-flex; align-items: center; gap: 1px; margin-left: 4px; font-size: 12px; }
.cq-cost .cq-ic { width: 13px; height: 13px; }
.cq-pile {
  flex: none; width: 74px; height: 74px; border-radius: 50%; background: var(--c); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); line-height: 1;
}
.cq-pile b { font-family: var(--f-display); font-weight: 400; font-size: 26px; }
.cq-pile small { font-size: 11px; font-weight: 800; }
.cq-pile.ghost { width: 50px; height: 50px; }
.cq-pile.ghost b { font-size: 18px; }
.cq-amt { display: flex; border: 2px solid var(--ink); border-radius: 11px; overflow: hidden; }
.cq-amt button { flex: 1; min-height: 34px; border: 0; background: var(--panel2); color: var(--text); font: 800 14px var(--f-body); }
.cq-amt button + button { border-left: 2px solid var(--ink); }
.cq-amt button.on { background: var(--accent); color: var(--ink); }
.cq-help { flex: 1; min-width: 0; font-size: 13.5px; color: var(--muted); line-height: 1.3; }
.cq-row > .btn { flex: none; margin-bottom: 0; }
.cq-stepper { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cq-stepper small { font-size: 12.5px; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-stepper > div { display: flex; align-items: center; gap: 8px; }
.cq-stepper .btn { width: 44px; padding: 0; font-size: 20px; margin-bottom: 0; }
.cq-stepper b { min-width: 30px; text-align: center; font-family: var(--f-display); font-weight: 400; font-size: 22px; color: var(--accent); }
.cq-wait { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.cq-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); flex: none; }
.cq-legend { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px; }
.cq-legend span { font-size: 11.5px; color: var(--muted); padding: 1px 6px; border-radius: 999px; border: 1.5px solid var(--panel2); }
.cq-legend span.held { border-color: var(--c); color: var(--text); }
.cq-legend b { color: var(--accent); }
@media (max-width: 360px) {
  .cq-banner { font-size: 15px; padding: 6px 10px; }
  .cq-banner small { font-size: 11.5px; }
  .cq-dock { height: 96px; }
  .cq-traybox .d3-tray { height: 96px !important; }
  .cq-pile { width: 62px; height: 62px; }
  .cq-pile b { font-size: 22px; }
  .cq-sname { font-size: 11px; }
  .cq-seat { padding: 2px 3px 2px 6px; }
  .cq-stats { font-size: 10.5px; }
  .cq-stats > span:not(.cq-ic) { margin-right: 1px; }
  .cq-ic { width: 10px; height: 10px; }
  .cq-round { padding: 2px 4px; }
  .cq-ctl.side { flex-basis: 74px; }
  .cq-legend { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cq-hl-tgt { animation: none; }
  .cq-land { transition: none; }
}
.cq-tut-map { width: 100%; height: 100%; display: block; }
.cq-tchip {
  width: 8.5cqw; height: 8.5cqw; border-radius: 50%; background: var(--c); border: .6cqw solid var(--ink); box-shadow: .3cqw .5cqw 0 var(--ink);
  color: #fff; font: 800 4.4cqw var(--f-body); display: flex; align-items: center; justify-content: center;
}
.cq-tchip.cap::before {
  content: ''; position: absolute; left: 50%; top: -4.2cqw; width: 6cqw; height: 3.6cqw; transform: translateX(-50%); background: #ffb703;
  clip-path: polygon(0 100%, 0 20%, 27% 55%, 50% 0, 73% 55%, 100% 20%, 100% 100%);
}
.cq-tpile {
  width: 13cqw; height: 13cqw; border-radius: 50%; background: #ff5a5f; border: .8cqw solid var(--ink); box-shadow: 0 .8cqw 0 var(--ink);
  color: var(--ink); font: 400 6cqw var(--f-display); display: flex; align-items: center; justify-content: center;
}
.cq-tpile.small { width: 9cqw; height: 9cqw; font-size: 4cqw; }
.cq-tut-pill { padding: 1.2cqw 3cqw; border-radius: 999px; background: var(--ink); color: var(--text); font-weight: 800; font-size: 3.9cqw; white-space: nowrap; }
.cq-tut-pill.good { background: var(--good); color: #0d2b0d; }
.cq-tut-pill.bad { background: var(--cherry); color: #fff; }
.cq-tut-pill.gold { background: var(--accent); color: var(--ink); }
.cq-tdie .d3-face { background: radial-gradient(circle at 30% 25%, #fff 0%, var(--dc) 55%, color-mix(in srgb, var(--dc) 70%, #0b1033) 100%); }
.cq-tdie .d3-pips circle { fill: #0b1033; }
/* @end conquest */

/* ===== Most Likely To ===== */
.lk { display: flex; flex-direction: column; gap: 8px; }
.lk-chips .chip .tag { color: var(--good); font-weight: 800; }
.lk-card {
  position: relative; perspective: 800px; border-radius: 20px; padding: 14px 16px 15px; color: var(--ink);
  background: linear-gradient(175deg, #fff8e6, #f6e3b8); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
}
.lk-card::before { content: ''; position: absolute; left: 14px; right: 14px; top: -3px; height: 7px; background: var(--stripe); border: 2px solid var(--ink); border-top: 0; border-radius: 0 0 6px 6px; }
.lk-cardtop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 2px; }
.lk-who { font-size: 13px; font-weight: 800; color: #c04a08; }
.lk-round { font-size: 12px; font-weight: 700; color: #7a6a48; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lk-prompt { display: block; margin-top: 4px; font-size: 25px; line-height: 1.15; font-weight: 800; text-wrap: balance; overflow-wrap: anywhere; }
.lk-card.l .lk-prompt { font-size: 21px; }
.lk-card.xl .lk-prompt { font-size: 18px; }
.lk-card.done { text-align: center; }
.lk-card.done .lk-prompt { font-family: var(--f-display); font-weight: 400; font-size: 26px; color: var(--ink); }
.lk-card .tmr-clock { top: -12px; right: -4px; }
.lk-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; }
.lk-hint { margin: 2px 0 0; }
.lk-count { margin: 0; font-weight: 600; }

/* the avatar grid */
.lk-grid { --gap: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.lk-tile {
  position: relative; width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 9px;
  background: var(--panel); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink);
  transition: transform .12s, box-shadow .12s, opacity .2s, background .15s; touch-action: manipulation;
}
.lk-tile.can { cursor: pointer; }
.lk-tile.can:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.lk-tile.you { background: var(--panel2); }
.lk-av { display: block; border-radius: 50%; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.lk-av .avatar { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22); }
.lk-name { max-width: 100%; padding: 0 4px; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-note { font-size: 11px; color: var(--muted); margin-top: -4px; }
.lk-tile.sel { background: var(--accent); color: var(--ink); transform: translateY(-4px); box-shadow: 0 8px 0 var(--ink); }
.lk-tile.picked { background: var(--accent); color: var(--ink); }
.lk-tile.dim { opacity: .45; }
.lk-tile.banned { opacity: .5; }
.lk-tile.drop-over, .lk-tile.over { background: var(--accent2); }
.lk-stamp { position: absolute; top: -8px; right: -6px; width: 38px; height: 38px; display: grid; place-items: center; transform: rotate(12deg); }
.lk-stamp i, .lk-stamp i svg { display: block; width: 38px; height: 38px; }
.lk-stamp.guess { border-radius: 50%; background: #7d4aa8; color: #fff3d6; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font: 400 20px var(--f-display); }
.lk-stamp.in { animation: lk-stamp .38s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes lk-stamp { from { transform: scale(2.4) rotate(-20deg); opacity: 0; } 60% { opacity: 1; } to { transform: rotate(12deg); } }

/* the ballot you drag */
.lk-dock { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; color: var(--muted); font-size: 14px; }
.lk-token { width: 50px; height: 50px; display: grid; place-items: center; cursor: grab; touch-action: none; border-radius: 12px; background: var(--panel2); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.lk-token svg { width: 40px; height: 40px; display: block; }
.lk-token.guess { border-radius: 50%; background: #7d4aa8; color: #fff3d6; font: 400 26px var(--f-display); }
.lk-ghost .lk-token { transform: rotate(-8deg) scale(1.1); box-shadow: 0 10px 0 rgba(11, 16, 51, .5); }
.lk-act { position: sticky; bottom: 0; z-index: 4; display: flex; gap: 8px; padding: 8px 0 2px; background: linear-gradient(transparent, var(--bg) 30%); }
.lk-act .btn { margin-bottom: 5px; }
.lk-act .btn.grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-room { display: flex; flex-direction: column; gap: 2px; padding: 9px 14px; border-radius: 16px; background: #7d4aa8; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); text-align: center; }
.lk-room b { font: 400 17px var(--f-display); color: var(--accent); letter-spacing: .5px; }
.lk-room span { font-size: 14px; font-weight: 600; }

/* the reveal */
.lk-box { align-self: center; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 150px; height: 46px; padding-bottom: 5px;
  background: linear-gradient(180deg, #d98a00, #b86f00); border: 3px solid var(--ink); border-radius: 8px 8px 12px 12px; box-shadow: 0 4px 0 var(--ink); color: var(--ink); }
.lk-box b { font-size: 13px; font-weight: 800; }
.lk-slot { position: absolute; top: 7px; left: 34px; right: 34px; height: 8px; border-radius: 4px; background: var(--ink); }
.lk-board { display: flex; justify-content: center; align-items: flex-end; gap: 6px; padding-top: 4px; }
.lk-board.two { flex-wrap: wrap; row-gap: 12px; }
.lk-col { width: var(--w); display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.lk-stack { position: relative; width: 100%; height: var(--h); }
.lk-vchip { position: absolute; left: 50%; bottom: calc(var(--i) * var(--step)); width: var(--chip); height: var(--chip); margin-left: calc(var(--chip) / -2); z-index: calc(var(--i) + 1);
  border-radius: 50%; border: 2.5px solid var(--ink); box-shadow: 0 2px 0 var(--ink); display: grid; place-items: center; background: #fff3d6; }
.lk-vchip .avatar { width: 100%; height: 100%; box-shadow: none; font-size: calc(var(--chip) * .45); }
.lk-vchip.anon svg { width: 82%; height: 82%; display: block; }
.lk-num { font: 400 18px var(--f-display); color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; transition: color .2s, transform .2s; }
.lk-base { display: grid; place-items: center; padding: 3px; border-radius: 50%; background: var(--panel2); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); transition: box-shadow .2s, background .2s; }
.lk-cname { max-width: 100%; font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.lk-col.lead .lk-base { box-shadow: 0 3px 0 var(--ink), 0 0 0 3px var(--accent2); }
.lk-col.lead .lk-num { color: var(--accent2); }
.lk-col.won .lk-base { background: var(--accent); box-shadow: 0 3px 0 var(--ink), 0 0 0 4px var(--accent); }
.lk-col.won .lk-num { color: var(--accent); transform: scale(1.35); }
.lk-col.won .lk-cname { color: var(--accent); }
.lk-reveal { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 290px; }
.lk-reveal .lk-board { transition: opacity .35s, filter .35s; }
.lk-reveal.done .lk-board, .lk-reveal.done .lk-box { opacity: .22; filter: saturate(.4); }
.lk-stage { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.lk-stage > * { pointer-events: auto; width: 100%; }
.lk-stage:empty, .lk-foot:empty { display: none; }
.lk-title { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 18px 14px 14px; color: var(--ink);
  background: linear-gradient(175deg, #fff8e6, #f6e3b8); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink); }
.lk-title::before { content: ''; position: absolute; left: -3px; right: -3px; top: -3px; height: 10px; background: var(--stripe); border: 3px solid var(--ink); border-radius: 20px 20px 0 0; }
.lk-tavs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 4px; }
.lk-tavs .avatar { border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.lk-tname { font: 400 30px/1.05 var(--f-display); text-wrap: balance; overflow-wrap: anywhere; }
.lk-tname.long { font-size: 22px; }
.lk-tis { font-weight: 700; font-size: 15px; color: #7a6a48; }
.lk-tprompt { font-weight: 800; font-size: 22px; line-height: 1.15; text-wrap: balance; }
.lk-tvotes { margin-top: 4px; font-weight: 700; color: #c04a08; }
.lk-tprompt.l { font-size: 19px; }
.lk-tprompt.xl { font-size: 16px; }
.lk-tby { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.lk-tby small { font-weight: 700; color: #7a6a48; }
.lk-tby .lk-oavs { flex-wrap: wrap; justify-content: center; }
.lk-peek { font-size: 11px; font-weight: 600; color: #9a8a68; }
.lk-title { cursor: pointer; transition: opacity .25s, transform .25s; }
.lk-reveal.peek .lk-title { opacity: .12; transform: scale(.96); }
.lk-reveal.peek .lk-board, .lk-reveal.peek .lk-box { opacity: 1; filter: none; }
.lk-reveal.peek .lk-stage { z-index: 1; }
.lk-title.none .lk-tname { color: #7a6a48; }
.lk-roomres { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 14px; font-weight: 600; }
.lk-mine { padding: 6px 12px; border-radius: 999px; background: var(--panel); border: 2px solid var(--ink); }
.lk-mine.good { background: var(--good); color: #0d2b0d; font-weight: 800; }
.lk-others { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.lk-oavs { display: inline-flex; }
.lk-oavs .avatar { margin-left: -6px; border: 2px solid var(--ink); }
.lk-oavs .avatar:first-child { margin-left: 0; }
.lk-next { display: flex; justify-content: center; }
.lk-next .hint { margin: 0; }

/* the end */
.lk-people { display: flex; flex-direction: column; gap: 8px; }
.lk-person { padding: 10px 12px; border-radius: 16px; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); border-left: 9px solid var(--c); }
.lk-phead { display: flex; align-items: center; gap: 9px; }
.lk-phead b { font-size: 17px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-phead small { margin-left: auto; color: var(--muted); font-weight: 600; white-space: nowrap; }
.lk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lk-tag { display: flex; flex-direction: column; max-width: 100%; padding: 5px 10px 6px; border-radius: 10px; background: #fff3d6; color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); font-weight: 700; font-size: 14px; line-height: 1.2; }
.lk-tag small { font-size: 10px; font-weight: 800; color: #c04a08; }
.lk-h { margin: 4px 0 2px; font: 400 17px var(--f-display); color: var(--accent); }
.lk-bars { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border-radius: 16px; background: var(--bg2); border: 3px solid var(--ink); }
.lk-bar { display: flex; align-items: center; gap: 8px; }
.lk-bar .n { width: 72px; flex: none; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-track { flex: 1; height: 14px; border-radius: 999px; background: var(--panel); border: 2px solid var(--ink); overflow: hidden; }
.lk-track i { display: block; height: 100%; background: var(--c); }
.lk-bar b { min-width: 1.4em; text-align: right; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .lk-stamp.in { animation: none; } .lk-tile { transition: none; } }

/* how to play */
.lk-tcard { width: 78cqw; padding: 3cqw 4cqw 3.6cqw; border-radius: 4cqw; background: linear-gradient(175deg, #fff8e6, #f6e3b8); color: var(--ink); border: .9cqw solid var(--ink); box-shadow: 0 1.5cqw 0 var(--ink); }
.lk-tcard small { display: block; font-size: 3.6cqw; font-weight: 800; color: #c04a08; }
.lk-tcard b { display: block; font-size: 7cqw; line-height: 1.1; font-weight: 800; }
.lk-tmini { padding: 1.2cqw 3.4cqw; border-radius: 999px; background: #fff3d6; color: var(--ink); border: .7cqw solid var(--ink); font-size: 3.8cqw; font-weight: 800; white-space: nowrap; }
.lk-tmini.room { background: #7d4aa8; color: #fff3d6; }
.lk-tav { --c: #ff5a5f; width: 13cqw; height: 13cqw; border-radius: 50%; display: grid; place-items: center; background: var(--c); border: .8cqw solid var(--ink); box-shadow: 0 .9cqw 0 var(--ink); color: rgba(0, 0, 0, .55); font-weight: 800; font-size: 6cqw; }
.lk-tav.base { width: 10cqw; height: 10cqw; font-size: 4.6cqw; }
.lk-ttile { width: 20cqw; padding: 2.4cqw 0 1.6cqw; display: flex; flex-direction: column; align-items: center; gap: 1cqw; border-radius: 3.6cqw; background: var(--panel); border: .8cqw solid var(--ink); box-shadow: 0 1.1cqw 0 var(--ink); transition: background .2s; }
.lk-ttile b { font-size: 3.8cqw; }
.lk-ttile.on { background: var(--accent); color: var(--ink); }
.lk-ttoken, .lk-tchip { width: 11cqw; height: 11cqw; display: grid; place-items: center; border-radius: 2.4cqw; background: var(--panel2); border: .8cqw solid var(--ink); box-shadow: 0 1cqw 0 var(--ink); }
.lk-ttoken svg, .lk-tchip svg { width: 82%; display: block; }
.lk-tchip { width: 9cqw; height: 9cqw; border-radius: 50%; background: #fff3d6; box-shadow: 0 .6cqw 0 var(--ink); }
.lk-tstamp { width: 10cqw; height: 10cqw; display: grid; place-items: center; z-index: 3; }
.lk-tstamp svg { width: 100%; display: block; }
.lk-tstamp.guess { border-radius: 50%; background: #7d4aa8; color: #fff3d6; border: .8cqw solid var(--ink); font: 400 5cqw var(--f-display); }
.lk-tbox { width: 34cqw; height: 9cqw; border-radius: 1.6cqw; background: linear-gradient(180deg, #d98a00, #b86f00); border: .8cqw solid var(--ink); box-shadow: 0 1cqw 0 var(--ink); z-index: 4; }
.lk-tbox i { position: absolute; left: 25%; right: 25%; top: 1.6cqw; height: 1.8cqw; border-radius: 1cqw; background: var(--ink); }
.lk-tnum { font: 400 5.4cqw var(--f-display); color: var(--accent); }
.lk-ttitle { width: 76cqw; display: flex; flex-direction: column; align-items: center; gap: .6cqw; padding: 3.4cqw 3cqw; border-radius: 4cqw; background: linear-gradient(175deg, #fff8e6, #f6e3b8); color: var(--ink); border: .9cqw solid var(--ink); box-shadow: 0 1.6cqw 0 var(--ink); z-index: 6; text-align: center; }
.lk-ttitle b { font: 400 8cqw/1 var(--f-display); }
.lk-ttitle span { font-size: 3.8cqw; font-weight: 700; color: #7a6a48; }
.lk-ttitle em { font-style: normal; font-size: 5.6cqw; font-weight: 800; }
.lk-trow { width: 88cqw; display: flex; align-items: center; gap: 2.4cqw; padding: 1.8cqw 2.6cqw; border-radius: 3cqw; background: var(--panel); border: .8cqw solid var(--ink); box-shadow: 0 1cqw 0 var(--ink); }
.lk-trow .lk-tav { width: 9cqw; height: 9cqw; font-size: 4.4cqw; flex: none; }
.lk-ttags { flex: 1; display: flex; flex-wrap: wrap; gap: 1.2cqw; min-width: 0; }
.lk-ttags span { padding: .6cqw 1.8cqw; border-radius: 1.6cqw; background: #fff3d6; color: var(--ink); border: .5cqw solid var(--ink); font-size: 3.2cqw; font-weight: 700; white-space: nowrap; }
.lk-tpts { font-size: 3.8cqw; color: var(--muted); white-space: nowrap; }
.lk-tpts.best { color: var(--accent); }
/* @end likely */

/* ===== Two Truths & a Lie ===== */
.chip.tl-hot { box-shadow: 0 0 0 2px var(--accent2); }
.tl-banner { position: relative; display: flex; flex-direction: column; gap: 2px; margin: 4px 0 10px; padding: 10px 14px; border-radius: 18px;
  background: var(--panel); border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.tl-banner > b { font-family: var(--f-display); font-weight: 400; font-size: 18px; color: var(--accent); letter-spacing: .5px; line-height: 1.15; }
.tl-banner > span { color: var(--muted); font-size: 14px; }
.tl-banner > .tl-time { position: absolute; right: 12px; top: 10px; padding: 2px 9px; border-radius: 999px; background: var(--ink); color: var(--text);
  font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.tl-banner > .tl-time.low { background: var(--cherry); }
.tl-banner:has(.tmr-clock.on) > .tl-time { visibility: hidden; }
.tl-banner:has(.tl-time) { padding-right: 76px; }
.tl-seatrow { display: flex; align-items: center; gap: 12px; }
.tl-seatrow b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 17px; color: var(--accent); line-height: 1.15; }
.tl-seatrow span { color: var(--muted); font-size: 13px; }
.tl-seatav { position: relative; flex: 0 0 auto; display: grid; padding: 3px; border-radius: 50%; background: var(--accent2); border: 2.5px solid var(--ink); }
.tl-seatav::after { content: '🔥'; position: absolute; right: -8px; bottom: -6px; font-size: 18px; }
.tl-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; }
.tl-small { font-size: 12.5px; margin: 0; }
.tl-how { text-align: left; color: var(--text); font-size: 14px; }
.tl-how b { color: var(--cherry); background: #fff3d6; padding: 0 5px; border-radius: 5px; }

/* writing: three slips of paper */
.tl-slips { display: flex; flex-direction: column; gap: 9px; }
.tl-slip { position: relative; display: grid; grid-template-columns: 26px 1fr 64px; align-items: center; gap: 8px; padding: 8px 8px 16px 10px;
  border-radius: 12px; background: #fff3d6; color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); transition: background .2s, transform .15s; }
.tl-slip:nth-child(1) { transform: rotate(-.6deg); }
.tl-slip:nth-child(2) { transform: rotate(.5deg); }
.tl-slip:nth-child(3) { transform: rotate(-.3deg); }
.tl-slip.lie { background: #ffe1d9; }
.tl-slip.bad { box-shadow: 0 0 0 3px var(--cherry), 0 4px 0 var(--ink); }
.tl-slip.done { padding-bottom: 8px; min-height: 48px; }
.tl-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--accent); font-size: 14px; }
.tl-input { width: 100%; box-sizing: border-box; min-height: 44px; resize: none; border: 0; outline: 0; background: transparent; color: var(--ink);
  font: 500 16px/1.3 var(--f-body); padding: 2px 0; }
.tl-input::placeholder { color: #9b8f75; }
.tl-stext { font-weight: 600; font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere; }
.tl-chars { position: absolute; left: 44px; bottom: 2px; font-size: 10.5px; color: #8b7f63; font-variant-numeric: tabular-nums; }
.tl-mark { justify-self: end; min-width: 60px; min-height: 40px; padding: 4px 6px; border-radius: 9px; border: 2.5px dashed #b7a98a; background: transparent;
  color: #8b7f63; font: 700 13px/1.1 var(--f-body); cursor: pointer; }
.tl-mark.truth { border-style: solid; border-color: transparent; color: #2b6e2b; }
.tl-mark.on { border: 3px solid #9e1a1f; background: var(--cherry); color: #fff; font-family: var(--f-display); font-weight: 400; font-size: 12px;
  transform: rotate(-8deg); box-shadow: 0 3px 0 var(--ink); white-space: nowrap; }
div.tl-mark { display: grid; place-items: center; cursor: default; }
span.tl-mark { display: grid; place-items: center; cursor: default; }
.tl-idearow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tl-ideabtn { flex: 0 0 auto; margin-bottom: 3px; }
.tl-idea { display: none; flex: 1 1 160px; flex-direction: column; padding: 6px 12px; border-radius: 12px; background: var(--panel2); border: 2px solid var(--ink); }
.tl-idea.on { display: flex; }
.tl-idea small { color: var(--muted); font-size: 11.5px; }
.tl-idea b { color: var(--accent); font-size: 15px; }
.tl-err { margin: 0; min-height: 0; color: #ff8a80; font-weight: 700; font-size: 14px; text-align: center; }
.tl-err:empty { display: none; }
.tl-go { font-size: 19px; }
.tl-sample { margin-top: -6px; }
.tl-senthead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tl-senthead b { font-family: var(--f-display); font-weight: 400; font-size: 17px; color: var(--good); }
.tl-ready { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 16px; background: rgba(0, 0, 0, .2); }
.tl-ready > small { color: var(--muted); font-weight: 700; font-size: 12px; }
.tl-readyrow { display: flex; flex-wrap: wrap; gap: 10px; }
.tl-rdy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 50px; opacity: .5; transition: opacity .3s; }
.tl-rdy.on { opacity: 1; }
.tl-rdy i { position: absolute; right: 4px; top: 18px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  font-size: 11px; font-weight: 800; background: var(--panel2); color: var(--muted); border: 2px solid var(--ink); }
.tl-rdy.on i { background: var(--good); color: #fff; }
.tl-rdy em { font-style: normal; font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-pens { display: grid; place-items: center; }
.tl-pencil { transform-box: fill-box; transform-origin: 20% 90%; animation: tl-write 1.1s ease-in-out infinite; }
@keyframes tl-write { 50% { transform: translate(-8px, 3px) rotate(-6deg); } }

/* the hot seat */
.tl-grill { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 16px; background: rgba(251, 97, 7, .16);
  border: 2.5px solid var(--accent2); }
.tl-grill b { font-size: 18px; }
.tl-grill span { color: var(--muted); font-size: 14px; }
.tl-grill.vote { background: rgba(255, 183, 3, .12); border-color: var(--accent); }
.tl-grill.me { background: var(--accent2); border-color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.tl-grill.me span { color: var(--text); }
.tl-defend { font-family: var(--f-display); font-weight: 400; font-size: 26px !important; color: var(--text); line-height: 1.1; animation: tl-throb 1.2s ease-in-out infinite; transform-origin: left center; }
@keyframes tl-throb { 50% { transform: scale(1.05); } }
.tl-gtime { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--accent); font-size: 19px; font-variant-numeric: tabular-nums; }
.tl-gtime.low { color: #ff8a80; }
.tl-grill:has(.tl-gtime) { padding-right: 68px; }
.tl-cards { display: flex; flex-direction: column; gap: 10px; perspective: 900px; }
.tl-card { position: relative; display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 4px 12px; width: 100%; box-sizing: border-box; min-height: 64px;
  padding: 12px 14px; border-radius: 16px; background: #fff3d6; color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
  font: 700 17px/1.3 var(--f-body); text-align: left; transition: opacity .2s, transform .15s, background .25s; }
button.tl-card { cursor: pointer; }
button.tl-card:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.tl-letter { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--ink); color: var(--accent); font-family: var(--f-display); font-weight: 400; font-size: 17px; }
.tl-ctext { overflow-wrap: anywhere; }
.tl-mylie { grid-column: 2; justify-self: start; padding: 1px 8px; border-radius: 6px; background: var(--cherry); color: #fff; font-size: 11.5px; font-weight: 700; }
.tl-card.mylie { background: #ffe1d9; border-style: dashed; }
.tl-card.votable { box-shadow: 0 5px 0 var(--ink), inset 0 0 0 2px rgba(255, 183, 3, .5); }
.tl-card.drop-over { transform: scale(1.03); box-shadow: 0 0 0 4px var(--accent), 0 5px 0 var(--ink); }
.tl-card.picked { box-shadow: 0 0 0 4px var(--accent), 0 5px 0 var(--ink); }
.tl-card.dim { opacity: .55; }
.tl-card.turning { z-index: 3; }
.tl-card.truth { background: #d5f2cd; }
.tl-card.truth .tl-letter { background: var(--good); color: #fff; }
.tl-card.lie { background: #ffd2c9; box-shadow: 0 0 0 4px var(--cherry), 0 5px 0 var(--ink); }
.tl-card.lie .tl-letter { background: var(--cherry); color: #fff; }
.tl-verdict { display: none; position: absolute; left: 6px; bottom: -12px; }
.tl-card.shown .tl-verdict { display: block; }
.tl-card.shown { margin-bottom: 6px; }
.tl-card.shown.lie { margin-bottom: 30px; }
.tl-stamp { display: inline-block; padding: 1px 9px; border-radius: 7px; font: 700 12px/1.4 var(--f-body); background: var(--good); color: #fff; border: 2px solid var(--ink); transform: rotate(-4deg); }
.tl-stamp.lie { padding: 2px 12px; font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1.1; letter-spacing: 1px;
  background: var(--cherry); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); transform: rotate(-14deg); white-space: nowrap; }
.tl-card.lie .tl-verdict { left: auto; right: 16px; top: auto; bottom: -30px; z-index: 2; }
.tl-stks { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; min-width: 0; pointer-events: none; }
.tl-stks:empty { display: none; }
.tl-stk { display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 2px #fff3d6, 0 0 0 4px var(--ink); transform: rotate(var(--rot)); }
.tl-more { display: inline-grid; place-items: center; min-width: 30px; height: 28px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--ink);
  color: var(--accent); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.tl-stk.stamp { animation: tl-stamp .38s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes tl-stamp { 0% { transform: scale(2.6) rotate(calc(var(--rot) - 30deg)); opacity: 0; } 55% { opacity: 1; } 100% { transform: rotate(var(--rot)); } }
.tl-dock { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 14px; font-weight: 600; }
.tl-mystk { cursor: grab; margin: 0; }
.tl-mystk .avatar, .tl-ghost .tl-stk .avatar { --s: 44px; }
.tl-ghost { display: grid; place-items: center; }
.tl-count { margin: 0; font-weight: 600; }
.tl-vhint { margin: 0; font-weight: 700; color: var(--text); }
.tl-skip { color: var(--muted); font-style: italic; }
.tl-sum { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 16px; background: var(--panel2); border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.tl-sumrow { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; }
.tl-sumrow > span:not(.tl-avs) { flex: 1; }
.tl-plus { color: var(--good); font-size: 17px; white-space: nowrap; }
.tl-avs { display: flex; flex: 0 0 auto; }
.tl-avs .avatar + .avatar, .tl-avs .avatar + .tl-more { margin-left: -9px; }
.tl-more.sm { min-width: 26px; height: 22px; font-size: 11px; padding: 0 5px; box-shadow: 0 0 0 2px var(--panel2); }
.tl-splash { position: fixed; left: 50%; top: 38%; z-index: 9000; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 28px 12px;
  border-radius: 20px; text-align: center; white-space: nowrap; pointer-events: none; background: var(--accent2); color: var(--text); border: 4px solid var(--ink);
  box-shadow: 0 8px 0 var(--ink); transform: translate(-50%, -50%) rotate(-4deg); animation: tl-splash 1.6s cubic-bezier(.3, 1.3, .5, 1) forwards; }
.tl-splash b { font-family: var(--f-display); font-weight: 400; font-size: 32px; line-height: 1.05; }
.tl-splash small { font-size: 16px; font-weight: 700; }
@keyframes tl-splash {
  0% { transform: translate(-50%, -50%) rotate(-30deg) scale(3); opacity: 0; }
  18%, 78% { transform: translate(-50%, -50%) rotate(-4deg) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -150%) rotate(-4deg) scale(.8); opacity: 0; }
}

/* scores and awards */
.tl-bars { display: flex; flex-direction: column; gap: 6px; background: rgba(0, 0, 0, .2); border-radius: 16px; padding: 10px 12px; }
.tl-bar { display: grid; grid-template-columns: 24px minmax(0, 76px) 1fr 30px 30px; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; }
.tl-bar .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-bar b { text-align: right; color: var(--accent); font-variant-numeric: tabular-nums; }
.tl-track { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.tl-track i { display: block; height: 100%; border-radius: 6px; background: var(--c); transition: width .8s cubic-bezier(.3, .7, .3, 1); }
.tl-bplus { font-style: normal; font-size: 12px; font-weight: 700; color: var(--good); opacity: 0; transition: opacity .3s .5s; text-align: right; }
.tl-bplus.show { opacity: 1; }
.tl-awards { display: grid; gap: 10px; }
.tl-award { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px;
  background: var(--panel); border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.tl-award.none { opacity: .6; }
.tl-medal { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: var(--accent); border: 3px solid var(--ink); }
.tl-award small { display: block; color: var(--accent); font-family: var(--f-display); font-weight: 400; font-size: 13px; letter-spacing: .5px; }
.tl-award b { display: block; font-size: 19px; }
.tl-award span { color: var(--muted); font-size: 13px; }
@media (max-width: 360px) {
  .tl-slip { grid-template-columns: 22px 1fr 56px; gap: 6px; padding-left: 8px; }
  .tl-mark { min-width: 52px; font-size: 12px; }
  .tl-mark.on { font-size: 10.5px; padding: 4px 4px; }
  .tl-card { font-size: 16px; padding: 10px 12px; }
  .tl-defend { font-size: 22px !important; }
}
/* tutorial */
.tl-tslip { width: 84cqw; height: 13cqw; box-sizing: border-box; display: grid; grid-template-columns: 6cqw 1fr 16cqw; align-items: center; gap: 2cqw; padding: 0 2cqw;
  border-radius: 2.4cqw; background: #fff3d6; color: var(--ink); border: .8cqw solid var(--ink); box-shadow: 0 1.2cqw 0 var(--ink); font-size: 4.2cqw; font-weight: 600; }
.tl-tslip.lie { background: #ffe1d9; }
.tl-tslip i { width: 6cqw; height: 6cqw; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--accent); font-style: normal; font-size: 3.4cqw; }
.tl-tslip span { white-space: nowrap; overflow: hidden; }
.tl-tslip em { justify-self: end; white-space: nowrap; padding: .8cqw 1.6cqw; border-radius: 1.6cqw; border: .6cqw dashed #b7a98a; color: #8b7f63; font-style: normal; font-size: 3.2cqw; font-weight: 700; }
.tl-tslip em.truth { border-color: transparent; color: #2b6e2b; }
.tl-tslip em.on { border: .8cqw solid #9e1a1f; background: var(--cherry); color: #fff; transform: rotate(-8deg); font-family: var(--f-display); font-weight: 400; }
.tl-tcard { width: 82cqw; min-height: 12cqw; box-sizing: border-box; display: flex; align-items: center; gap: 2.6cqw; padding: 1.6cqw 2.6cqw; border-radius: 3cqw;
  background: #fff3d6; color: var(--ink); border: .9cqw solid var(--ink); box-shadow: 0 1.3cqw 0 var(--ink); font-size: 4.4cqw; font-weight: 700; }
.tl-tcard i { flex: 0 0 auto; width: 7cqw; height: 7cqw; border-radius: 2cqw; display: grid; place-items: center; background: var(--ink); color: var(--accent); font-style: normal; font-family: var(--f-display); font-size: 3.8cqw; }
.tl-tcard.truth { background: #d5f2cd; }
.tl-tcard.truth i { background: var(--good); color: #fff; }
.tl-tcard.lie { background: #ffd2c9; box-shadow: 0 0 0 1.2cqw var(--cherry), 0 1.3cqw 0 var(--ink); }
.tl-tcard.lie i { background: var(--cherry); color: #fff; }
.tl-tseat { display: flex; align-items: center; gap: 2cqw; padding: 1cqw 3cqw 1cqw 1cqw; border-radius: 99px; background: var(--panel); border: .7cqw solid var(--ink);
  color: var(--accent); font-family: var(--f-display); font-size: 4cqw; white-space: nowrap; }
.tl-tseat b { width: 7cqw; height: 7cqw; border-radius: 50%; display: grid; place-items: center; background: #f2762a; color: #fff; font-family: var(--f-body); font-size: 3.8cqw; border: .6cqw solid var(--ink); }
.tl-tbubble { padding: 1.6cqw 3.4cqw; border-radius: 3cqw; background: var(--panel2); color: var(--text); border: .7cqw solid var(--ink); font-size: 4.2cqw; font-weight: 700; white-space: nowrap; z-index: 3; }
.tl-tbubble.me { background: var(--accent2); font-family: var(--f-display); font-weight: 400; font-size: 6cqw; }
.tl-tstk { width: 9cqw; height: 9cqw; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-weight: 800; font-size: 4.2cqw;
  box-shadow: 0 0 0 .9cqw #fff3d6, 0 0 0 1.5cqw var(--ink); z-index: 4; }
.tl-tstk.stamp { animation: tl-tstamp .38s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes tl-tstamp { from { transform: translate(-50%, -50%) scale(2.6) rotate(-30deg); opacity: 0; } }
.tl-tlie { padding: .6cqw 3.4cqw; border-radius: 2cqw; background: var(--cherry); color: #fff; border: .9cqw solid var(--ink); box-shadow: 0 1.2cqw 0 var(--ink);
  font-family: var(--f-display); font-size: 8cqw; line-height: 1.1; z-index: 5; transform: translate(-50%, -50%) rotate(-14deg); }
.tl-trow { width: 80cqw; display: flex; align-items: center; gap: 3cqw; padding: 1.6cqw 3cqw; box-sizing: border-box; border-radius: 3cqw; background: var(--panel2); border: .7cqw solid var(--ink); font-size: 4.6cqw; font-weight: 700; }
.tl-trow b { width: 8cqw; height: 8cqw; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-size: 4cqw; }
.tl-trow span { flex: 1; }
.tl-trow em { font-style: normal; color: var(--good); font-size: 5.4cqw; }
@media (prefers-reduced-motion: reduce) {
  .tl-defend, .tl-pencil { animation: none; }
  .tl-stk.stamp { animation: none; }
}
/* @end truths */

/* ===== Milestones ===== */
.ms { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.ms-chips { flex: none; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 5px; }
.ms-chips::-webkit-scrollbar { display: none; }
.ms-chip { flex: none; position: relative; display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--panel); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); color: var(--text); }
.ms-chip.turn { background: var(--c); color: var(--ink); }
.ms-chip.gone { opacity: .4; }
.ms-chip.done:not(.turn) { background: #1f2f78; }
.ms-av { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; color: var(--ink); }
.ms-chip.turn .ms-av { background: #fff3d6; }
.ms-cn { display: flex; flex-direction: column; min-width: 0; text-align: left; line-height: 1.1; }
.ms-cn b { font-size: 12px; font-weight: 700; max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-cn em { font-style: normal; font-size: 13px; font-weight: 800; }
.ms-flag { position: absolute; top: -9px; right: -5px; font-size: 14px; }
.ms-banner { flex: none; padding: 7px 12px; font-size: 17px; }
.ms-frame { position: relative; flex: 1 1 0; min-height: 210px; border-radius: 18px; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); overflow: hidden; background: #3f9a48; }
.ms-map { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y; }
.ms-map::-webkit-scrollbar { display: none; }
.ms-svg { display: block; width: 100%; height: auto; }
.ms-svg text { pointer-events: none; }
.ms-glyph { font-family: var(--f-display); font-size: 17px; fill: #fff3d6; stroke: var(--ink); stroke-width: 3px; paint-order: stroke; }
.ms-emo { font-size: 18px; }
.ms-emo.sm { font-size: 15px; }
.ms-emo.xs { font-size: 11px; }
.ms-emo.vx { font-size: 7px; }
.ms-stoptxt { font-family: var(--f-body); font-weight: 800; font-size: 11px; fill: #fff3d6; }
.ms-signtxt { font-family: var(--f-display); font-size: 10px; fill: var(--ink); }
.ms-bigtxt { font-family: var(--f-display); font-size: 13px; fill: var(--ink); }
.ms-region { font-family: var(--f-display); font-size: 17px; fill: #fff3d6; fill-opacity: .55; stroke: var(--ink); stroke-width: 2px; stroke-opacity: .5; paint-order: stroke; letter-spacing: 1px; }
.ms-car.gone { opacity: 0; }

.ms-wheelbox { position: absolute; right: 8px; bottom: 8px; width: 108px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none;
  transition: width .32s cubic-bezier(.2, .9, .3, 1.15), right .32s cubic-bezier(.2, .9, .3, 1.15); }
.ms-wheelbox.big { width: min(62%, 230px); right: calc(50% - min(31%, 115px)); }
.ms-wheel { position: relative; width: 100%; aspect-ratio: 1; touch-action: none; user-select: none; -webkit-user-select: none; pointer-events: auto; transform-origin: 85% 100%; transition: transform .3s cubic-bezier(.3, .7, .3, 1), opacity .25s; }
.ms-wheelbox.mini .ms-wheel { transform: scale(.15); opacity: 0; pointer-events: none; }
.ms-wheelbox.mini { align-items: flex-end; }
.ms-wheelbox.can .ms-wheel { cursor: grab; }
.ms-rotor { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 5px 0 var(--ink); will-change: transform; }
.ms-wheelbox.can .ms-rotor { box-shadow: 0 5px 0 var(--ink), 0 0 0 4px var(--accent), 0 0 26px rgba(255, 183, 3, .55); }
.ms-rotor svg { width: 100%; height: 100%; display: block; }
.ms-wnum { font-family: var(--f-display); font-size: 24px; fill: #fff3d6; stroke: var(--ink); stroke-width: 4px; paint-order: stroke; pointer-events: none; }
.ms-wedge.on { filter: brightness(1.3) saturate(1.2); }
.ms-flap { position: absolute; left: 50%; top: -11%; width: 20%; transform: translateX(-50%); transform-origin: 50% 15%; z-index: 2; filter: drop-shadow(0 3px 0 var(--ink)); }
.ms-flap svg { width: 100%; display: block; }
.ms-hub { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--accent); border: 3px solid var(--ink); display: grid; place-items: center;
  font-family: var(--f-display); font-size: 11px; color: var(--ink); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.ms-wheelbox.big .ms-hub { font-size: 17px; }
.ms-hub:disabled { background: #e7dcc0; color: rgba(11, 16, 51, .45); cursor: default; }
.ms-wheelbox.can .ms-hub { animation: ms-hub 1.2s ease-in-out infinite; }
@keyframes ms-hub { 50% { transform: translate(-50%, -50%) scale(1.08); } }
.ms-wlabel { font-weight: 800; font-size: 13px; background: var(--ink); color: var(--text); padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.ms-wlabel:empty { display: none; }
.ms-wlabel b { font-family: var(--f-display); font-weight: 400; font-size: 22px; color: var(--accent); }

.ms-layer { position: absolute; inset: 0; z-index: 4; display: none; padding: 10px; overflow-y: auto; pointer-events: none; }
.ms-layer.on { display: flex; }
.ms-layer.decide, .ms-layer.final { background: rgba(11, 16, 51, .5); pointer-events: auto; }
.ms-card { pointer-events: auto; width: min(100%, 340px); margin: auto; background: #fff3d6; color: var(--ink); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink); overflow: hidden; }
.ms-chead { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--c); border-bottom: 3px solid var(--ink); font-family: var(--f-display); font-size: 13px; color: var(--ink); }
.ms-chead i { width: 26px; height: 26px; display: grid; place-items: center; font-style: normal; font-size: 15px; background: #fff3d6; border: 2px solid var(--ink); border-radius: 50%; }
.ms-card h3 { margin: 10px 14px 2px; font-family: var(--f-display); font-weight: 400; font-size: 21px; line-height: 1.1; }
.ms-card p { margin: 4px 14px 10px; font-size: 15px; line-height: 1.35; }
.ms-lines { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 12px 12px; }
.ms-lines span { padding: 3px 9px; border-radius: 999px; font-weight: 800; font-size: 13px; border: 2px solid var(--ink); background: #fff; }
.ms-lines .good { background: #c9f0b4; }
.ms-lines .bad { background: #ffcfcc; }
.ms-lines .mile { background: var(--k); }
.ms-lines .rider { background: #ffe7a3; }
.ms-lines .spin { background: #cfe3ff; }
.ms-opt .ms-lines { margin: 4px 0 0; justify-content: center; }
.ms-opt .ms-lines span { font-size: 11px; padding: 2px 7px; }
.ms-opts { display: flex; flex-direction: column; gap: 8px; margin: 6px 12px 12px; }
.ms-opts.two { flex-direction: row; }
.ms-opt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; text-align: center; border-radius: 14px; background: #fff; border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); color: var(--ink); }
.ms-opt:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.ms-opt:disabled { cursor: default; }
.ms-opt:not(:disabled):hover { background: #fffaf0; }
.ms-opt.picked { background: var(--accent); }
.ms-opt .big { font-style: normal; font-size: 28px; line-height: 1.1; }
.ms-opt b { font-size: 15px; font-weight: 800; }
.ms-opt em { font-style: normal; font-weight: 800; color: #2b6e2b; font-size: 14px; }
.ms-opt small { font-size: 12px; opacity: .8; line-height: 1.25; }
.ms-opt small.tag { opacity: 1; font-weight: 700; color: #1d4d93; }
.ms-opt small.warn { color: #9e1a1f; }
.ms-opt.job, .ms-opt.home, .ms-opt.spot { display: grid; grid-template-columns: 40px 1fr auto; grid-auto-flow: row; align-items: center; column-gap: 8px; row-gap: 0; text-align: left; padding: 7px 10px; }
.ms-opt.job .big, .ms-opt.home .big, .ms-opt.spot .big { grid-row: span 3; font-size: 26px; text-align: center; }
.ms-opt.job em, .ms-opt.home em, .ms-opt.spot em { grid-column: 3; grid-row: 1; text-align: right; }
.ms-opt.job small, .ms-opt.home small, .ms-opt.spot small { grid-column: 2 / span 2; }
.ms-opt.keep { padding: 8px 10px; background: #e9e2cf; flex-direction: row; justify-content: center; gap: 10px; }
.ms-wait { margin: -2px 0 12px; text-align: center; font-weight: 800; color: #3448b0; }
.ms-say { position: absolute; left: 50%; top: 10px; z-index: 3; max-width: 92%; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; background: var(--c); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
  font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; animation: ms-say 1.7s ease both; }
@keyframes ms-say { 0% { opacity: 0; transform: translate(-50%, -10px); } 12%, 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.ms-mile { position: fixed; left: 50%; top: 42%; z-index: 60; width: 160px; transform: translate(-50%, -50%); padding: 12px 10px; border-radius: 14px; background: var(--c); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; color: var(--ink); pointer-events: none; }
.ms-mile i { font-style: normal; font-size: 30px; line-height: 1; color: #fff3d6; -webkit-text-stroke: 2px var(--ink); }
.ms-mile b { font-family: var(--f-display); font-weight: 400; font-size: 16px; line-height: 1.1; }
.ms-mile small { font-size: 12px; font-weight: 700; }
.ms-coin { position: fixed; z-index: 61; width: 22px; height: 22px; border-radius: 50%; background: #ffd166; border: 2.5px solid var(--ink); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .18); pointer-events: none; }

.ms-hud { flex: none; display: flex; align-items: center; gap: 8px; min-height: 62px; padding: 5px 8px; border-radius: 16px; background: var(--panel); border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.ms-hl { flex: none; width: 78px; display: flex; flex-direction: column; align-items: center; }
.ms-hvan { width: 62px; height: 40px; }
.ms-riders { max-width: 80px; display: flex; flex-wrap: wrap; justify-content: center; font-size: 12px; line-height: 1.1; }
.ms-riders i { font-style: normal; }
.ms-riders small { font-size: 10px; color: var(--muted); text-align: center; }
.ms-hm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ms-hcash { font-family: var(--f-display); font-weight: 400; font-size: 20px; line-height: 1; color: var(--accent); }
.ms-hm small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-pips { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ms-pips i { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; background: rgba(255, 255, 255, .1); border: 2px solid var(--ink); font-style: normal; font-size: 11px; font-weight: 800; color: var(--ink); }
.ms-pips i.on { background: var(--k); }
.ms-hhome { min-width: 0; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-hr { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ms-hr small { font-size: 11px; color: var(--muted); }
.ms-loan { min-height: 34px; padding: 4px 10px; font-size: 13px; }

.ms-final { width: min(100%, 380px); margin: 0 auto; display: flex; flex-direction: column; gap: 8px; pointer-events: auto; }
.ms-final h3 { margin: 2px 0; text-align: center; font-family: var(--f-display); font-weight: 400; font-size: 22px; color: var(--accent); }
.ms-frow { padding: 8px 10px; border-radius: 14px; background: var(--panel); border: 2.5px solid var(--ink); border-left: 9px solid var(--c); box-shadow: 0 4px 0 var(--ink); }
.ms-frow.win { background: #2c3fa8; box-shadow: 0 4px 0 var(--ink), 0 0 0 3px var(--accent); }
.ms-fhead { display: flex; align-items: center; gap: 8px; }
.ms-fhead b { flex: 1; min-width: 0; font-weight: 800; }
.ms-fhead .ms-ftot { flex: none; font-family: var(--f-display); font-weight: 400; font-size: 18px; color: var(--accent); }
.ms-story { margin: 4px 0; font-size: 13px; line-height: 1.35; }
.ms-fline { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; font-weight: 700; color: var(--muted); }
.ms-fline .bad { color: #ff9a9a; }
.ms-fline.bon { color: #8af07f; }
.ms-fmiles { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0; }
.ms-fmiles span { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px 1px 4px; border-radius: 7px; background: var(--k); border: 2px solid var(--ink); color: var(--ink); font-size: 12px; font-weight: 800; }
.ms-fmiles i, .ms-fmiles em { font-style: normal; }
.ms-sheet h2 { font-family: var(--f-display); font-weight: 400; }
.ms-srows > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.ms-srows span { color: var(--muted); }
.ms-srows b { text-align: right; }
.ms-sheet h4 { margin: 14px 0 6px; }
.ms-smiles { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-smiles span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; background: var(--k); border: 2px solid var(--ink); color: var(--ink); font-weight: 700; font-size: 13px; }
.ms-smiles i, .ms-smiles em { font-style: normal; }
.ms-smiles em { opacity: .7; }
@media (max-width: 360px) {
  .ms-wheelbox { width: 92px; }
  .ms-wheelbox.big { width: min(66%, 200px); right: calc(50% - min(33%, 100px)); }
  .ms-opts.two { flex-direction: column; }
  .ms-card h3 { font-size: 19px; }
  .ms-card p { font-size: 14px; }
  .ms-hl { width: 64px; }
  .ms-hvan { width: 52px; height: 34px; }
  .ms-hcash { font-size: 17px; }
}
.tut-ms-van { width: 22cqw; z-index: 3; }
.tut-ms-van svg { width: 100%; display: block; }
.tut-ms-road { width: 100%; height: 13cqw; background: #565b8c; border-block: 1.2cqw solid var(--ink); }
.tut-ms-sp { width: 11cqw; height: 11cqw; display: grid; place-items: center; border-radius: 50%; border: 1cqw solid var(--ink); font-family: var(--f-display); font-size: 5.4cqw; color: #fff3d6; -webkit-text-stroke: .4cqw var(--ink); z-index: 2; }
.tut-ms-sp.payday { background: #4cb944; }
.tut-ms-sp.event { background: #fb6107; }
.tut-ms-sp.choice { background: #3d8fe0; }
.tut-ms-card { width: 36cqw; padding: 2.4cqw 2cqw; display: flex; flex-direction: column; align-items: center; gap: .6cqw; text-align: center; background: #fff3d6; color: var(--ink); border: 1cqw solid var(--ink); border-top: 4cqw solid var(--c); border-radius: 4cqw; box-shadow: 0 1.6cqw 0 var(--ink); }
.tut-ms-card i { font-style: normal; font-size: 8cqw; line-height: 1; }
.tut-ms-card b { font-size: 4.6cqw; font-weight: 800; }
.tut-ms-card small { font-size: 3.6cqw; font-weight: 600; }
.tut-ms-card.on { background: var(--accent); }
.tut-ms-card.sm { width: 30cqw; }
.tut-ms-card.sm b { font-size: 4cqw; }
.tut-ms-wheel { width: 54cqw; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 1.6cqw 0 var(--ink); }
.tut-ms-wheel svg { width: 100%; height: 100%; display: block; }
.tut-ms-flap { width: 6cqw; height: 7cqw; background: #fff3d6; clip-path: polygon(0 0, 100% 0, 50% 100%); z-index: 3; }
.tut-ms-stop { width: 16cqw; height: 16cqw; display: grid; place-items: center; font-size: 8cqw; background: #e3242b; border: 1cqw solid var(--ink); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.tut-ms-hop { font-size: 8cqw; z-index: 4; }
.tut-ms-mile { width: 15cqw; height: 21cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw; background: var(--k); border: 1cqw solid var(--ink); border-radius: 3cqw; box-shadow: 0 1.4cqw 0 var(--ink); color: var(--ink); }
.tut-ms-mile i { font-style: normal; font-size: 7cqw; line-height: 1; color: #fff3d6; -webkit-text-stroke: .5cqw var(--ink); }
.tut-ms-mile em { font-style: normal; font-weight: 800; font-size: 4.2cqw; }
@media (max-height: 700px) {
  .ms-layer { padding: 6px; }
  .ms-chead { padding: 3px 10px; font-size: 12px; }
  .ms-card h3 { margin: 7px 12px 0; font-size: 17px; }
  .ms-card p { margin: 3px 12px 6px; font-size: 13px; line-height: 1.3; }
  .ms-opts { gap: 6px; margin: 4px 10px 10px; }
  .ms-opt { padding: 7px 6px; }
  .ms-opt.job, .ms-opt.home, .ms-opt.spot { padding: 4px 8px; grid-template-columns: 30px 1fr auto; }
  .ms-opt .big, .ms-opt.job .big, .ms-opt.home .big, .ms-opt.spot .big { font-size: 21px; }
  .ms-opt b { font-size: 14px; }
  .ms-opt small { font-size: 11px; }
  .ms-hud { min-height: 54px; padding: 3px 8px; }
  .ms-hvan { width: 48px; height: 31px; }
  .ms-riders { font-size: 10px; }
  .ms-banner { padding: 5px 10px; font-size: 15px; }
  .ms-banner small { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-wheelbox, .ms-wheel { transition: none; }
  .ms-wheelbox.can .ms-hub, .ms-say { animation: none; }
}
/* @end milestones */

/* ===== Rack & Run ===== */
.rr-root {
  display: flex; flex-direction: column; gap: 7px; min-height: 430px;
  height: calc(100dvh - 90px - var(--safe-top) - var(--safe-bottom)); margin-bottom: -14px; /* the footer below is empty mid-game */
}
/* seats */
.rr-seats { display: flex; gap: 6px; flex: none; }
.rr-seat {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 5px; padding: 4px 6px;
  border-radius: 12px; background: var(--panel); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); transition: background .2s;
}
.rr-seat .avatar { flex: none; }
.rr-seat.turn { background: var(--panel2); box-shadow: 0 0 0 2.5px var(--c), 0 2px 0 var(--ink); }
.rr-seat.gone { opacity: .4; }
.rr-sinfo { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.rr-sname { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-scount { display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.rr-scount em { font-style: normal; color: var(--accent); margin-left: 3px; }
.rr-snote { align-self: flex-start; margin-top: 2px; padding: 0 5px; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 14px; white-space: nowrap; color: var(--muted); background: rgba(5, 9, 40, .55); border: 1.5px solid rgba(11, 16, 51, .8); }
@media (max-width: 380px) { .rr-seats:has(> :nth-child(4)) .avatar { display: none; } .rr-status { font-size: 12px; gap: 5px; } .rr-sort { padding: 2px 6px; } }
.rr-minitile { width: 8px; height: 11px; border-radius: 2px; background: var(--text); border: 1.5px solid var(--ink); flex: none; }
.rr-botav { font-size: 12px; }
.rr-banner { flex: none; padding: 7px 12px; font-size: 17px; }
.rr-banner small { font-size: 12px; }
@media (max-height: 680px) { .rr-banner { padding: 5px 10px; font-size: 16px; } .rr-banner small { display: none; } .rr-seat { padding: 3px 5px; } }
/* the table box: scrolling felt plus a few things pinned over it */
.rr-tablebox {
  position: relative; flex: 1 1 auto; min-height: 150px; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 16px; border: 2.5px solid var(--ink); background-color: #0e4d56;
}
.rr-tfoot { flex: none; display: flex; align-items: center; gap: 6px; padding: 5px 6px; background: rgba(5, 9, 40, .5); border-top: 2px solid var(--ink); }
.rr-float { margin-left: auto; display: flex; gap: 5px; align-items: center; }
.rr-bag { display: flex; align-items: center; gap: 5px; font-size: 14px; height: 30px; flex: none; padding: 0 9px 0 6px; border-radius: 999px; background: var(--panel); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.rr-bagicon { width: 13px; height: 17px; border-radius: 3px; border: 2px solid var(--ink); background: repeating-linear-gradient(45deg, #24379d 0 3px, #1a2a86 3px 6px); }
.rr-zbtn { width: 32px; height: 30px; border-radius: 9px; background: var(--panel2); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); font-size: 18px; font-weight: 800; line-height: 1; }
.rr-zbtn:active { transform: translateY(2px); box-shadow: none; }
.rr-log {
  position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%); z-index: 3; pointer-events: none; max-width: calc(100% - 20px);
  padding: 4px 11px; border-radius: 999px; background: rgba(11, 16, 51, .88); border: 2px solid var(--ink); font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0;
}
.rr-log.on { animation: rr-log 3.2s ease-out forwards; }
@keyframes rr-log { 0% { opacity: 0; transform: translate(-50%, -6px); } 8% { opacity: 1; transform: translate(-50%, 0); color: var(--accent); } 40% { color: var(--text); } 80% { opacity: 1; } 100% { opacity: 0; } }
.rr-newbtn {
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 5px;
  border-radius: 11px; border: 2px dashed rgba(255, 243, 214, .7); background: rgba(11, 16, 51, .8); font-size: 13px; font-weight: 700; cursor: pointer;
}
.rr-newbtn b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--accent); color: var(--ink); font-size: 18px; border: 2px solid var(--ink); }
.rr-newbtn.hot { border-style: solid; border-color: var(--accent); color: var(--accent); }
.rr-newbtn.drop-over { border-style: solid; border-color: var(--accent); background: rgba(80, 56, 0, .9); }
/* the table */
.rr-wrap {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  background-color: #0e4d56; background-image: radial-gradient(rgba(255, 243, 214, .08) 1.2px, transparent 1.6px); background-size: 14px 14px;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .25); touch-action: pan-x pan-y; overscroll-behavior: contain;
}
.rr-table {
  --tw: calc(30px * var(--rr-z, 1));
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px 7px; padding: 8px; min-height: 100%;
}
.rr-table.drop-over { box-shadow: inset 0 0 0 3px var(--accent) !important; }
.rr-meld {
  display: flex; gap: 2px; padding: 4px; border-radius: 10px; flex: none;
  background: rgba(5, 9, 40, .38); border: 2px solid rgba(11, 16, 51, .7);
}
.rr-meld .rr-tile { --w: var(--tw); }
.rr-meld.bad { border-color: var(--cherry); background: rgba(227, 36, 43, .16); box-shadow: 0 0 0 2px rgba(227, 36, 43, .3), 0 0 14px rgba(227, 36, 43, .75); animation: rr-bad 1.6s ease-in-out infinite; }
@keyframes rr-bad { 50% { box-shadow: 0 0 0 2px rgba(227, 36, 43, .2), 0 0 6px rgba(227, 36, 43, .45); } }
.rr-meld.drop-over { border-color: var(--accent); background: rgba(255, 183, 3, .2); }
.rr-empty { margin: auto; color: var(--muted); font-size: 14px; padding: 24px 0; width: 100%; text-align: center; }
/* tiles */
.rr-tile {
  --w: 30px; --tf: #fff3d6; --ts: #d9c79f; --tn: #0b1033;
  position: relative; flex: none; width: var(--w); height: calc(var(--w) * 1.33);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--w) * .04);
  border-radius: calc(var(--w) * .17); border: 2px solid var(--ink);
  background: linear-gradient(135deg, rgba(255, 255, 255, .32) 0 18%, transparent 18%) var(--tf);
  box-shadow: inset 0 calc(var(--w) * -.13) 0 var(--ts), 0 2px 0 var(--ink);
  user-select: none; -webkit-user-select: none; transition: transform .15s, outline-color .2s;
}
.rr-tile b { font: 800 calc(var(--w) * .56)/1 var(--f-body); color: var(--tn); margin-top: calc(var(--w) * -.1); letter-spacing: -.04em; }
.rr-mk { width: calc(var(--w) * .26); height: calc(var(--w) * .26); fill: var(--tn); }
.rr-c0 { --tf: #f5ad1b; --ts: #c98200; --tn: #0b1033; }
.rr-c1 { --tf: #e0383e; --ts: #a5222a; --tn: #fff3d6; }
.rr-c2 { --tf: #1aa6a0; --ts: #0d6c68; --tn: #0b1033; }
.rr-c3 { --tf: #8a4fc0; --ts: #5e2f8c; --tn: #fff3d6; }
.rr-star .rr-starsvg { width: 76%; height: auto; margin-top: calc(var(--w) * -.12); }
.rr-star[data-as]::after {
  content: attr(data-as); position: absolute; right: calc(var(--w) * .06); bottom: calc(var(--w) * .12);
  font: 800 calc(var(--w) * .3)/1 var(--f-body); color: var(--ink);
}
.rr-tile.rr-placed { outline: 2.5px solid var(--accent); outline-offset: 1px; }
.rr-tile.sel { transform: translateY(-6px); outline: 3px solid var(--text); outline-offset: 1px; box-shadow: inset 0 calc(var(--w) * -.13) 0 var(--ts), 0 7px 0 rgba(11, 16, 51, .55); z-index: 2; }
.rr-tile.rr-new { animation: rr-new 1.1s ease-in-out 3; }
@keyframes rr-new { 50% { box-shadow: inset 0 calc(var(--w) * -.13) 0 var(--ts), 0 2px 0 var(--ink), 0 0 0 3px var(--accent), 0 0 14px var(--accent); } }
.rr-tile.drop-over { box-shadow: inset 0 calc(var(--w) * -.13) 0 var(--ts), -5px 0 0 -1px var(--accent) !important; }
.rr-back { background: repeating-linear-gradient(45deg, #24379d 0 4px, #1a2a86 4px 8px); box-shadow: 0 2px 0 var(--ink); }
.rr-ghost { will-change: transform; }
.rr-tile.drag-ghost { transition: none; }
/* status, buttons */
.rr-dock { flex: none; display: flex; flex-direction: column; gap: 6px; }
.rr-status { display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: 13px; font-weight: 600; color: var(--muted); }
.rr-smsg { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; }
.rr-smsg > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-smsg > span { white-space: nowrap; }
.rr-sorts { display: flex; gap: 5px; flex: none; }
.rr-why { color: #ff9a9e; }
.rr-ok { color: #8ee088; }
.rr-openchip { flex: none; padding: 2px 9px; border-radius: 999px; background: var(--panel2); border: 2px solid var(--ink); color: var(--text); font-weight: 800; font-size: 12px; }
.rr-openchip.full { background: var(--good); color: var(--ink); }
.rr-actions { display: flex; gap: 7px; }
.rr-actions .btn { flex: 1; margin-bottom: 3px; padding: 0 8px; }
.rr-done.ready { background: var(--good); animation: rr-ready 1.4s ease-in-out infinite; }
@keyframes rr-ready { 50% { box-shadow: 0 3px 0 var(--ink), 0 0 16px rgba(76, 185, 68, .8); } }
/* the wooden rack */
.rr-rack {
  border-radius: 14px; border: 2.5px solid var(--ink); padding: 5px 6px 2px; box-shadow: 0 4px 0 var(--ink);
  background:
    repeating-linear-gradient(91deg, rgba(0, 0, 0, .13) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(88deg, rgba(255, 220, 170, .07) 0 1px, transparent 1px 27px),
    linear-gradient(180deg, #a36a37, #7d4f27);
}
.rr-sort {
  display: flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--panel); color: var(--text); border: 2px solid var(--ink); height: 26px;
}
.rr-sort.on { background: var(--accent); color: var(--ink); }
.rr-sorticon { width: 12px; height: 10px; border-radius: 2px; border: 1.5px solid var(--ink); }
.rr-sorticon.c { background: linear-gradient(90deg, #f5ad1b 0 25%, #e0383e 25% 50%, #1aa6a0 50% 75%, #8a4fc0 75%); }
.rr-sorticon.n { background: linear-gradient(90deg, #fff3d6 0 33%, #d9c79f 33% 66%, #b3a07a 66%); }
.rr-shelf { --rr-rw: 38px; display: flex; flex-direction: column; }
.rr-row {
  display: flex; gap: 4px; padding: 2px 2px 9px; min-height: calc(var(--rr-rw) * 1.33 + 11px);
  background: linear-gradient(to top, #4a2c17 0 5px, #c99058 5px 7px, transparent 7px);
}
.rr-row .rr-tile { --w: var(--rr-rw); }
.rr-row.drop-over { box-shadow: none !important; background: linear-gradient(to top, #4a2c17 0 5px, var(--accent) 5px 7px, rgba(255, 183, 3, .14) 7px); }
.rr-dock:not(.mine) .rr-row .rr-tile { cursor: grab; }
/* between hands */
.rr-score {
  position: fixed; left: 50%; bottom: calc(14px + var(--safe-bottom)); transform: translateX(-50%); z-index: 40;
  width: min(560px, calc(100% - 20px)); max-height: 75vh; overflow: auto; padding: 16px 14px 10px; border-radius: 20px;
  background-image: linear-gradient(var(--bg2), var(--bg2)), var(--stripe); background-size: 100% 100%, 100% 6px; background-repeat: no-repeat;
  background-color: var(--bg2); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); animation: rr-up .3s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes rr-up { from { transform: translate(-50%, 40px); opacity: 0; } }
.rr-score h3 { margin: 4px 0 10px; font-family: var(--f-display); font-weight: 400; font-size: 18px; text-align: center; color: var(--accent); }
.rr-srows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.rr-srow { display: grid; grid-template-columns: minmax(0, 72px) 1fr auto auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: var(--panel); border: 2px solid var(--ink); }
.rr-srow.win { box-shadow: 0 0 0 2.5px var(--c); }
.rr-srname { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-sleft { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; min-width: 0; }
.rr-sleft small { color: var(--muted); font-size: 12px; }
.rr-mini { --w: 16px; border-width: 1.5px; box-shadow: 0 1px 0 var(--ink); }
.rr-mini .rr-mk { display: none; }
.rr-mini b { margin-top: 0; }
.rr-sdelta { font-weight: 800; font-size: 14px; }
.rr-sdelta.up { color: #8ee088; }
.rr-sdelta.down { color: #ff9a9e; }
.rr-stotal { font-size: 16px; min-width: 32px; text-align: right; }
@media (prefers-reduced-motion: reduce) {
  .rr-meld.bad, .rr-done.ready, .rr-tile.rr-new, .rr-log.on { animation: none; }
}
/* tutorial */
.rr-tut .rr-tile { position: absolute; transform: translate(-50%, -50%); --w: 9.3cqw; z-index: 1; }
.rr-tut-meld { position: absolute; transform: translate(-50%, -50%); border-radius: 9px; border: 2px solid rgba(11, 16, 51, .7); background: rgba(5, 9, 40, .38); }
.rr-tut-meld.bad { border-color: var(--cherry); box-shadow: 0 0 12px rgba(227, 36, 43, .8); }
.rr-tut-meld.good { border-color: var(--good); box-shadow: 0 0 10px rgba(76, 185, 68, .7); }
.rr-tut-felt { position: absolute; transform: translate(-50%, -50%); width: 96.7cqw; height: 37.3cqw; border-radius: 14px; border: 2.5px solid var(--ink); background-color: #0e4d56; background-image: radial-gradient(rgba(255, 243, 214, .08) 1.2px, transparent 1.6px); background-size: 12px 12px; }
.rr-tut-rack { position: absolute; transform: translate(-50%, -50%); width: 96.7cqw; height: 19.3cqw; border-radius: 12px; border: 2.5px solid var(--ink); background: linear-gradient(to top, #4a2c17 0 5px, #c99058 5px 7px, transparent 7px), linear-gradient(180deg, #a36a37, #7d4f27); }
.rr-tut-btn { position: absolute; transform: translate(-50%, -50%); z-index: 3; padding: 5px 12px; border-radius: 10px; border: 2.5px solid var(--ink); background: var(--panel2); font-weight: 800; font-size: 13px; box-shadow: 0 3px 0 var(--ink); white-space: nowrap; }
.rr-tut-btn.on { background: var(--good); color: var(--ink); }
/* @end rackrun */

/* ===== Safecracker ===== */
.sc-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.sc-banner { position: relative; flex: none; padding: 8px 12px; font-size: 18px; }
.sc-banner small { font-size: 12.5px; }
.sc-time { position: absolute; top: -11px; left: -4px; z-index: 6; display: flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 999px;
  background: #0c0a22; color: var(--accent); border: 2px solid var(--ink); font: 400 13px/1 var(--f-display); font-variant-numeric: tabular-nums; box-shadow: 0 3px 0 var(--ink); }
.sc-time::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
.sc-time.low { color: #fff; background: var(--cherry); }
/* other safecrackers: clicks only */
.sc-rivals { flex: none; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 5px; }
.sc-rivals::-webkit-scrollbar { display: none; }
.sc-rivals[hidden] { display: none; }
.sc-rival { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 9px 4px 4px; border-radius: 999px; background: var(--panel); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink), inset 0 0 0 2px var(--c); }
.sc-rival.won { background: #6b4a00; box-shadow: 0 3px 0 var(--ink), inset 0 0 0 2px var(--accent); }
.sc-rival.out { opacity: .7; }
.sc-rv-mid { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.sc-rv-mid b { font-size: 13px; white-space: nowrap; max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
.sc-rv-mid b.sm { font-size: 12px; }
.sc-rv-mid b.xs { font-size: 11px; }
.sc-rv-row { display: grid; grid-template-columns: repeat(3, 7px); gap: 2px; }
.sc-rv-row:has(i:nth-child(4):last-child) { grid-template-columns: repeat(2, 7px); }
.sc-rv-row.none { opacity: .45; }
.sc-rv-row i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.sc-rv-row i.gold { background: #ffb703; box-shadow: 0 0 0 1px var(--ink); }
.sc-rv-row i.silver { background: transparent; box-shadow: inset 0 0 0 1.6px #dfe4f2; }
.sc-rival small { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.sc-rival.won small { color: var(--accent); }
/* the vault: brushed steel with a rivet in each corner */
.sc-vault { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 10px 10px; border-radius: 20px; overflow: hidden;
  border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
  background:
    radial-gradient(circle, #aab3d2 0 2.3px, var(--ink) 2.6px 3.6px, transparent 3.9px) left 2px top 2px / 12px 12px no-repeat,
    radial-gradient(circle, #aab3d2 0 2.3px, var(--ink) 2.6px 3.6px, transparent 3.9px) right 2px top 2px / 12px 12px no-repeat,
    radial-gradient(circle, #aab3d2 0 2.3px, var(--ink) 2.6px 3.6px, transparent 3.9px) left 2px bottom 2px / 12px 12px no-repeat,
    radial-gradient(circle, #aab3d2 0 2.3px, var(--ink) 2.6px 3.6px, transparent 3.9px) right 2px bottom 2px / 12px 12px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 5px),
    linear-gradient(172deg, #3b4778, #252d57); }
.sc-tabs { flex: none; display: flex; gap: 6px; }
.sc-tabs[hidden] { display: none; }
.sc-tab { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; border-radius: 12px; background: rgba(11, 16, 51, .5); color: var(--muted);
  border: 2px solid var(--ink); font: 700 13.5px var(--f-body); white-space: nowrap; }
.sc-tab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sc-tab b { flex: none; background: var(--ink); color: var(--accent); border-radius: 999px; padding: 1px 7px; font-size: 12px; }
.sc-tab.on { background: var(--panel2); color: var(--text); box-shadow: inset 0 -4px 0 var(--c); }
.sc-tab.turn::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--ink); }
/* the log of tries */
.sc-log { flex: 1 1 0; min-height: 60px; contain: size; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding: 1px; scrollbar-width: thin; }
.sc-log > :first-child { margin-top: auto; }
.sc-log > .sc-mycode:first-child { margin-top: 0; }
.sc-mycode + .sc-row, .sc-mycode + .sc-hint { margin-top: auto; }
.sc-log > .sc-row { flex: 1 0 auto; max-height: 54px; }
.sc-row { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 12px; background: rgba(11, 16, 51, .5); border: 2px solid rgba(11, 16, 51, .95);
  transition: opacity .2s, transform .25s cubic-bezier(.2, .9, .3, 1.2); }
.sc-row.hide { opacity: 0; transform: translateX(-10px); }
.sc-row.spare { background: rgba(11, 16, 51, .18); border: 2px dashed rgba(170, 179, 210, .16); }
.sc-row.spare .sc-pins i { background: transparent; border-color: rgba(170, 179, 210, .16); opacity: 1; }
.sc-gem.slot { border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(170, 179, 210, .16); transform: scale(.8); }
.sc-hint { flex: none; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 0 6px 2px; line-height: 1.3; }
.sc-n { flex: none; width: 18px; text-align: right; font: 400 12px var(--f-display); color: var(--muted); }
.sc-rgems { display: flex; gap: 4px; }
.sc-gem { display: block; flex: none; width: 28px; height: 28px; }
.sc-gem svg { display: block; width: 100%; height: 100%; }
.sc-gem.blank { background: rgba(255, 255, 255, .07); border-radius: 30%; box-shadow: inset 0 0 0 2px rgba(11, 16, 51, .9); }
.sc-gem.hide svg { opacity: 0; }
.sc-gem.hide { background: rgba(11, 16, 51, .6); border-radius: 30%; }
.sc-rgems.big { gap: 6px; }
.sc-rgems.big .sc-gem { width: 40px; height: 40px; }
.sc-pins { margin-left: auto; flex: none; display: grid; grid-template-columns: repeat(2, 13px); gap: 3px; }
.sc-pins.p5 { grid-template-columns: repeat(3, 13px); }
.sc-pins i { width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--ink); background: #11163a; }
.sc-pins i.gold { background: radial-gradient(circle at 36% 34%, #ffe7a3 0 18%, #ffb703 22% 60%, #c98200 64%); }
.sc-pins i.silver { background: radial-gradient(circle, var(--ink) 0 2px, #dfe4f2 2.6px 60%, #9aa3c4 64%); }
.sc-pins i.none { background: #11163a; opacity: .7; }
.sc-pins i.wait { background: #11163a; opacity: .7; }
.sc-empty { margin: auto; padding: 12px; text-align: center; color: var(--muted); }
.sc-empty > div { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sc-empty b { display: block; color: var(--text); font-size: 16px; }
.sc-empty small { display: block; font-size: 13px; line-height: 1.35; max-width: 260px; margin: 4px auto 0; }
.sc-mycode { flex: none; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 12px; background: rgba(255, 183, 3, .1); border: 2px dashed rgba(255, 183, 3, .55); }
.sc-mycode small { flex: 1; font-weight: 800; color: var(--accent); font-size: 13px; }
/* the lock: tumbler dials and the handle */
.sc-lock { position: relative; flex: none; display: flex; align-items: stretch; gap: 8px; padding: 8px; border-radius: 16px; background: linear-gradient(#1b2250, #11163a);
  border: 2.5px solid var(--ink); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .35); }
.sc-lock[hidden] { display: none; }
.sc-slots { flex: 1; min-width: 0; display: flex; gap: 6px; justify-content: center; align-items: center; }
.sc-slot { position: relative; flex: 1; max-width: 60px; aspect-ratio: .8; display: flex; align-items: center; justify-content: center; border-radius: 12px; overflow: hidden; cursor: ns-resize;
  background: repeating-linear-gradient(0deg, #9aa3c4 0 3px, #6f7aa0 3px 6px); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); transition: transform .12s, box-shadow .15s; user-select: none; -webkit-user-select: none; }
.sc-rib { position: absolute; left: 0; right: 0; height: 26%; pointer-events: none; z-index: 2; }
.sc-rib.top { top: 0; background: linear-gradient(rgba(11, 16, 51, .6), transparent); }
.sc-rib.bot { bottom: 0; background: linear-gradient(transparent, rgba(11, 16, 51, .6)); }
.sc-win { width: 80%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #0f1430; border: 2px solid var(--ink); overflow: hidden; pointer-events: none; }
.sc-win .sc-gem { width: 88%; height: 88%; }
.sc-socket { width: 46%; height: 46%; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .2); }
.sc-slot.sel { box-shadow: 0 3px 0 var(--ink), 0 0 0 3px var(--accent); }
.sc-slot.sel .sc-win { border-color: var(--accent); }
.sc-lock.sent .sc-slot { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.sc-handle { --p: 0; position: relative; flex: none; width: 44px; min-height: 70px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
.sc-handle .sc-track { position: absolute; left: 50%; top: 4px; bottom: 2px; width: 16px; margin-left: -8px; border-radius: 999px; background: #070a24; box-shadow: inset 0 0 0 2px #2a3360; }
.sc-handle .sc-arm { position: absolute; left: 50%; width: 10px; margin-left: -5px; top: calc(19px + (100% - 40px) * var(--p)); bottom: 3px; border-radius: 4px;
  background: linear-gradient(90deg, #eef1f9, #8e98b8); border: 2px solid var(--ink); transition: top .22s cubic-bezier(.3, 1.5, .5, 1); }
.sc-handle .sc-knob { position: absolute; left: 50%; width: 36px; height: 36px; margin-left: -18px; top: calc(2px + (100% - 40px) * var(--p)); border-radius: 50%; box-sizing: border-box;
  background: radial-gradient(circle at 36% 30%, #ff9a9e 0 14%, #e3242b 20% 62%, #9e1a1f 68%); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); transition: top .22s cubic-bezier(.3, 1.5, .5, 1); }
.sc-handle.ready .sc-knob { animation: sc-ready 1.3s ease-in-out infinite; }
@keyframes sc-ready { 50% { box-shadow: 0 3px 0 var(--ink), 0 0 0 5px rgba(255, 183, 3, .55); } }
.sc-lock.wait .sc-handle { opacity: .45; }
.sc-lockmsg { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); z-index: 3; padding: 2px 10px; border-radius: 999px; background: var(--ink); color: var(--muted);
  font-size: 12px; font-weight: 700; white-space: nowrap; pointer-events: none; }
.sc-lockmsg:empty { display: none; }
.sc-lock.flash .sc-lockmsg { background: var(--cherry); color: #fff; }
/* the gem tray */
.sc-tray { flex: none; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 5px; max-width: 420px; width: 100%; margin: 0 auto; }
.sc-tray[hidden], .sc-tools[hidden] { display: none; }
.sc-tgem { position: relative; aspect-ratio: 1; max-height: 50px; justify-self: center; width: 100%; max-width: 50px; padding: 3px; border-radius: 12px; background: var(--panel);
  border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); transition: transform .1s; }
.sc-tgem svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.sc-tgem:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.sc-tgem.ruled svg { opacity: .3; }
.sc-tgem.ruled::after { content: ''; position: absolute; inset: 3px; pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 2.5px), var(--cherry) calc(50% - 2.5px) calc(50% + 2.5px), transparent calc(50% + 2.5px)); }
.sc-tray.notes .sc-tgem { background: #3a2a14; border-style: dashed; border-color: var(--accent); }
.sc-tools { flex: none; display: flex; gap: 6px; justify-content: center; }
.sc-tool { flex: 1; max-width: 150px; padding: 7px 8px; border-radius: 12px; background: var(--panel); color: var(--text); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font: 700 13.5px var(--f-body); white-space: nowrap; }
.sc-tool[hidden] { display: none; }
.sc-tool:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.sc-tool.on { background: var(--accent); color: var(--ink); }
/* the vault door swinging open */
.sc-open { position: absolute; inset: 0; z-index: 8; background: radial-gradient(circle, #1b2250, #0b1033 70%); perspective: 900px; container-type: size; overflow: hidden; }
.sc-open .sc-inside, .sc-door { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(80cqw, 84cqh, 300px); aspect-ratio: 1; border-radius: 50%; }
.sc-inside { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--ink); }
.sc-open .sc-inside { width: min(74cqw, 78cqh, 280px); background: radial-gradient(circle at 50% 42%, #ffeaa8, #ffb703 48%, #b87700 84%); border: 4px solid var(--ink); box-shadow: inset 0 0 0 10px rgba(11, 16, 51, .2); }
.sc-inside b { position: relative; font: 400 26px var(--f-display); }
.sc-inside small { position: relative; font-weight: 800; font-size: 14px; }
.sc-inside .sc-rgems { position: relative; }
.sc-glow { position: absolute; inset: -45%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 90, .75), rgba(255, 183, 3, .25) 40%, transparent 65%); opacity: 0; transition: opacity .7s; pointer-events: none; }
.sc-open.lit .sc-glow { opacity: 1; }
.sc-door { width: min(84cqw, 88cqh, 300px); transform-origin: 0 50%; transition: transform 1s cubic-bezier(.55, 0, .25, 1); z-index: 2; }
.sc-door.swing { transform: rotateY(-108deg); }
.sc-door-face { position: relative; width: 100%; height: 100%; border-radius: 50%; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 36% 32%, #c6cde3, #8e98b8 42%, #5a6589 80%); border: 5px solid var(--ink); box-shadow: 7px 9px 0 rgba(0, 0, 0, .4), inset 0 0 0 10px rgba(11, 16, 51, .16); }
.sc-bolts { position: absolute; inset: 7%; border-radius: 50%; border: 7px dotted rgba(11, 16, 51, .55); transition: inset .2s; }
.sc-door.bolts .sc-bolts { inset: 11%; }
.sc-wheel { width: 60%; aspect-ratio: 1; }
.sc-wheelsvg { display: block; width: 100%; height: 100%; }
/* the end: every try revealed */
.sc-final { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.sc-inside.final { position: relative; flex: none; padding: 10px; border-radius: 16px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #ffeaa8, #ffb703 55%, #c98200);
  border: 3px solid var(--ink); box-shadow: 0 0 26px rgba(255, 183, 3, .4); gap: 6px; }
.sc-inside.final .sc-glow { opacity: .6; }
.sc-boards { display: flex; flex-direction: column; gap: 8px; }
.sc-fboard { display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 14px; background: rgba(11, 16, 51, .42); border: 2px solid var(--ink); box-shadow: inset 4px 0 0 var(--c); }
.sc-fboard.won { background: rgba(255, 183, 3, .16); }
.sc-fhead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sc-fhead b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-fhead small { flex: none; color: var(--muted); font-weight: 700; font-size: 12.5px; }
.sc-fboard.won .sc-fhead small { color: var(--accent); }
.sc-fcode { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 10px; background: rgba(255, 183, 3, .12); }
.sc-fcode small { flex: 1; font-weight: 800; color: var(--accent); font-size: 12.5px; }
.sc-fcode .sc-gem, .sc-frows .sc-gem { width: 24px; height: 24px; }
.sc-frows { display: flex; flex-direction: column; gap: 4px; }
.sc-frows .sc-row { padding: 2px 6px 2px 2px; }
.sc-frows .sc-pins { grid-template-columns: repeat(5, 11px); gap: 2px; }
.sc-frows .sc-pins i { width: 11px; height: 11px; border-width: 1.6px; }
.sc-fnone { color: var(--muted); font-size: 13px; padding: 2px 4px; }
.sc-wrap.spectate .sc-vault { flex: 1; }
@media (max-width: 360px) {
  .sc-gem { width: 24px; height: 24px; }
  .sc-row { gap: 6px; }
  .sc-pins { grid-template-columns: repeat(2, 12px); }
  .sc-pins.p5 { grid-template-columns: repeat(3, 12px); }
  .sc-pins i { width: 12px; height: 12px; }
  .sc-vault { padding: 10px 8px 8px; }
  .sc-tool { font-size: 13px; padding: 6px; }
}
@media (max-height: 640px) {
  .sc-wrap { gap: 6px; }
  .sc-banner { padding: 6px 10px; font-size: 16px; }
  .sc-banner small { font-size: 12px; }
    .sc-tool { padding: 5px 8px; }
  .sc-vault { gap: 6px; }
}
@media (min-width: 380px) and (min-height: 740px) {
  .sc-slot { max-width: 76px; }
  .sc-log .sc-gem { width: 32px; height: 32px; }
  .sc-log .sc-pins { grid-template-columns: repeat(2, 15px); }
  .sc-log .sc-pins.p5 { grid-template-columns: repeat(3, 15px); }
  .sc-log .sc-pins i { width: 15px; height: 15px; }
  .sc-tgem { max-width: 58px; max-height: 58px; }
  }
@media (prefers-reduced-motion: reduce) {
  .sc-door, .sc-row, .sc-handle .sc-knob, .sc-handle .sc-arm { transition: none; }
  .sc-handle.ready .sc-knob { animation: none; }
}
/* tutorial */
.tut-sc-panel { width: 92cqw; height: 30cqw; border-radius: 4cqw; background: linear-gradient(172deg, #3b4778, #252d57); border: .8cqw solid var(--ink); box-shadow: 0 1.2cqw 0 var(--ink); z-index: 1; }
.tut-sc-slot { width: 12cqw; height: 15cqw; border-radius: 2.6cqw; background: repeating-linear-gradient(0deg, #9aa3c4 0 .8cqw, #6f7aa0 .8cqw 1.6cqw); border: .7cqw solid var(--ink); z-index: 2; display: flex; align-items: center; justify-content: center; }
.tut-sc-slot::after { content: ''; width: 9cqw; height: 9cqw; border-radius: 2cqw; background: #0f1430; border: .5cqw solid var(--ink); }
.tut-sc-gem { width: 8.6cqw; height: 8.6cqw; z-index: 4; }
.tut-sc-gem.sm { width: 6.4cqw; height: 6.4cqw; }
.tut-sc-gem svg { display: block; width: 100%; height: 100%; }
.tut-sc-handle { width: 9cqw; height: 22cqw; z-index: 2; }
.tut-sc-handle i { position: absolute; left: 50%; top: 0; bottom: 0; width: 3.4cqw; margin-left: -1.7cqw; border-radius: 2cqw; background: #070a24; }
.tut-sc-handle b { position: absolute; left: 50%; top: 0; width: 8cqw; height: 8cqw; margin-left: -4cqw; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #ff9a9e 0 14%, #e3242b 20% 62%, #9e1a1f 68%); border: .7cqw solid var(--ink); box-sizing: border-box; transition: top .25s; }
.tut-sc-handle.down b { top: 14cqw; }
.tut-sc-pins { display: grid; grid-template-columns: repeat(2, 3.6cqw); gap: .8cqw; z-index: 3; }
.tut-sc-pins i { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; box-sizing: border-box; border: .5cqw solid var(--ink); background: #11163a; transition: background .15s, transform .2s; }
.tut-sc-pins i.gold { background: radial-gradient(circle at 36% 34%, #ffe7a3 0 18%, #ffb703 22% 60%, #c98200 64%); transform: scale(1.1); }
.tut-sc-pins i.silver { background: radial-gradient(circle, var(--ink) 0 .55cqw, #dfe4f2 .7cqw 60%, #9aa3c4 64%); }
.tut-sc-row { width: 70cqw; height: 10cqw; border-radius: 2.6cqw; background: rgba(11, 16, 51, .55); border: .5cqw solid var(--ink); z-index: 1; }
.tut-sc-key { display: flex; align-items: center; gap: 1.6cqw; padding: 1.2cqw 2.6cqw; border-radius: 2.4cqw; background: #0c0a22; color: #fff3d6; font-weight: 700; font-size: 3.8cqw; white-space: nowrap; z-index: 6; }
.tut-sc-key i { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; border: .5cqw solid var(--ink); box-sizing: border-box; flex: none; }
.tut-sc-key i.gold { background: #ffb703; }
.tut-sc-key i.silver { background: radial-gradient(circle, var(--ink) 0 .55cqw, #dfe4f2 .7cqw); }
.tut-sc-rival { width: 20cqw; height: 26cqw; border-radius: 3cqw; background: var(--panel); border: .6cqw solid var(--ink); box-shadow: 0 1cqw 0 var(--ink); z-index: 1; }
.tut-sc-mini { display: flex; gap: .6cqw; z-index: 2; }
.tut-sc-mini i { width: 2cqw; height: 2cqw; border-radius: 50%; background: rgba(255, 255, 255, .15); }
.tut-sc-mini i.gold { background: #ffb703; }
.tut-sc-mini i.silver { background: transparent; box-shadow: inset 0 0 0 .5cqw #dfe4f2; }
.tut-sc-name { font-weight: 800; font-size: 3.6cqw; color: #fff3d6; z-index: 2; white-space: nowrap; }
.tut-sc-door { width: 46cqw; height: 46cqw; border-radius: 50%; box-sizing: border-box; background: radial-gradient(circle at 36% 32%, #c6cde3, #8e98b8 42%, #5a6589 80%); border: 1cqw solid var(--ink); z-index: 3; transform-origin: 0 50%; display: flex; align-items: center; justify-content: center; }
.tut-sc-door > div { width: 60%; height: 60%; }
.tut-sc-door svg { display: block; width: 100%; height: 100%; }
.tut-sc-gold { width: 42cqw; height: 42cqw; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #ffeaa8, #ffb703 48%, #b87700 84%); border: 1cqw solid var(--ink); box-shadow: 0 0 8cqw rgba(255, 196, 60, .8); z-index: 2; }
.tut-sc-tgem { width: 9cqw; height: 9cqw; padding: .6cqw; border-radius: 2.4cqw; background: var(--panel); border: .6cqw solid var(--ink); box-sizing: border-box; z-index: 2; }
.tut-sc-tgem svg { display: block; width: 100%; height: 100%; }
.tut-sc-tgem.ruled svg { opacity: .3; }
.tut-sc-tgem.ruled::after { content: ''; position: absolute; inset: .6cqw; background: linear-gradient(to top right, transparent calc(50% - .6cqw), var(--cherry) calc(50% - .6cqw) calc(50% + .6cqw), transparent calc(50% + .6cqw)); }
/* @end safecracker */

/* ===== Gumdrop Trail ===== */
.gd-area { position: relative; gap: 10px; }
.gd-banner { font-size: 21px; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gd-banner small { font-size: 14px; }
.gd-bh { display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.gd-bh i { display: inline-flex; }
.gd-bpic { width: 30px; height: 33px; margin: -6px 0 -4px; }
.gd-bshape { width: 30px; height: 30px; margin: -5px 0 -5px 2px; filter: drop-shadow(0 2px 0 rgba(11, 16, 51, .45)); }
.gd-wrap { flex: 1 1 0; min-height: 0; position: relative; display: flex; justify-content: center; align-items: center; container-type: size; }
.gd-board {
  display: block; width: min(100cqw, calc(100cqh * var(--ar, .8))); aspect-ratio: var(--ar, .8); height: auto;
  border-radius: 18px; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); background: #fffaf0; touch-action: manipulation;
}
.gd-bed { fill: none; stroke: rgba(43, 24, 56, .2); stroke-width: 8.6; stroke-linecap: round; stroke-linejoin: round; }
.gd-bed2 { fill: none; stroke: #fffaf2; stroke-width: 7.6; stroke-linecap: round; stroke-linejoin: round; }
.gd-bg, .gd-labels, .gd-start, .gd-bridge, .gd-slide, .gd-cottage, .gd-mug, .gd-rtrail { pointer-events: none; }
.gd-tile { pointer-events: none; }
.gd-tile rect[data-drop] { pointer-events: all; }
.gd-tile rect.drop-over { stroke: #fff; stroke-width: 1.1; }
.gd-land { font-family: var(--f-display); font-size: 2.7px; fill: rgba(43, 24, 56, .42); letter-spacing: .05px; }
.gd-land-creek { fill: #ffe7c9; font-size: 2.3px; }
.gd-start-t { font: 800 2.6px var(--f-body); fill: #2b1838; text-anchor: middle; }
.gd-target { pointer-events: none; opacity: 0; }
.gd-target.on { opacity: 1; pointer-events: all; cursor: pointer; }
.gd-target rect { fill: rgba(255, 255, 255, .4); stroke: #fff; stroke-width: .9; stroke-dasharray: 2.2 1.2; animation: gd-glow .9s ease-in-out infinite; }
@keyframes gd-glow { 50% { stroke: #2b1838; fill: rgba(255, 255, 255, .75); } }
.gd-piece { pointer-events: none; }
.gd-piece.can-move { pointer-events: all; cursor: grab; touch-action: none; }
.gd-piece.turn .gd-bob { animation: gd-bob 1.1s ease-in-out infinite; }
.gd-piece.can-move .gd-bob { animation: gd-bob-big .7s ease-in-out infinite; }
.gd-piece.moving .gd-bob { animation: none; }
.gd-piece.winner .gd-bob { animation: gd-dance .5s ease-in-out 4; }
@keyframes gd-bob { 50% { transform: translateY(-1px); } }
@keyframes gd-bob-big { 50% { transform: translateY(-2.2px) scale(1.06); } }
@keyframes gd-dance { 25% { transform: translateY(-3px) rotate(-8deg); } 75% { transform: translateY(-3px) rotate(8deg); } }
.gd-bubble { fill: rgba(191, 233, 255, .35); stroke: #2f9bff; stroke-width: .5; opacity: 0; transition: opacity .2s; }
.gd-piece.floating .gd-bubble { opacity: 1; }
.gd-zz { opacity: 0; transition: opacity .3s; }
.gd-piece.resting .gd-zz { opacity: 1; }

.gd-dock { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: center; min-height: 100px; }
.gd-pile { position: relative; width: 74px; height: 100px; }
.gd-deck {
  position: absolute; inset: 0; padding: 0; border: 0; background: none; touch-action: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.gd-deck i { position: absolute; left: 0; top: 0; width: 66px; height: 92px; display: block; }
.gd-deck i:nth-child(1) { transform: translate(6px, 6px) rotate(4deg); }
.gd-deck i:nth-child(2) { transform: translate(3px, 3px) rotate(-3deg); }
.gd-deck i svg { filter: drop-shadow(0 3px 0 rgba(11, 16, 51, .55)); }
.gd-deck:disabled { cursor: default; }
.gd-deck.ready i:nth-child(3) { animation: gd-wiggle 1.3s ease-in-out infinite; }
.gd-deck.pulled i:nth-child(3) { opacity: 0; }
@keyframes gd-wiggle { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-8px) rotate(-6deg); } 85% { transform: translateY(-8px) rotate(5deg); } }
.gd-deck-tap {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); background: var(--accent); color: var(--ink); border: 2.5px solid var(--ink);
  border-radius: 999px; padding: 1px 10px; font: 400 15px var(--f-display); box-shadow: 0 3px 0 var(--ink); opacity: 0; pointer-events: none; transition: opacity .2s;
}
.gd-deck.ready .gd-deck-tap { opacity: 1; animation: gd-tap 1.3s ease-in-out infinite; }
@keyframes gd-tap { 50% { transform: translateX(-50%) scale(1.12); } }
.gd-hop {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--accent); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 5px 0 var(--ink); color: var(--ink); padding: 4px; cursor: pointer;
}
.gd-hop span { width: 52px; height: 57px; display: block; }
.gd-hop span svg { width: 100%; height: 100%; display: block; }
.gd-hop b { font: 400 17px var(--f-display); }
.gd-hop:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.gd-dock.hopping .gd-hop { display: flex; animation: gd-hop-bounce .8s ease-in-out infinite; }
.gd-dock.hopping .gd-deck { visibility: hidden; }
@keyframes gd-hop-bounce { 50% { transform: translateY(-4px); } }
.gd-last { width: 58px; height: 81px; border-radius: 9px; border: 2.5px dashed rgba(255, 243, 214, .3); }
.gd-last i { display: block; width: 100%; height: 100%; margin: -2.5px; width: calc(100% + 5px); height: calc(100% + 5px); }
.gd-last i svg { filter: drop-shadow(0 3px 0 rgba(11, 16, 51, .5)); }
.gd-seats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; align-content: center; }
.gd-seat {
  display: flex; align-items: center; gap: 4px; min-width: 0; background: var(--panel); border: 2px solid var(--ink); border-radius: 999px;
  padding: 1px 8px 1px 2px; font-weight: 700; font-size: 13px; line-height: 1.1; position: relative; box-shadow: inset 4px 0 0 var(--c);
}
.gd-seatpic { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fffaf0; display: grid; place-items: center; overflow: hidden; }
.gd-seatpic svg { width: 22px; height: 24px; display: block; }
.gd-seatname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-seat.turn { background: var(--c); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.gd-seat.me .gd-seatname { font-weight: 800; }
.gd-seatmug { flex: none; width: 16px; height: 17px; margin-left: auto; }
.gd-seatmug svg { width: 100%; height: 100%; display: block; }

.gd-fly {
  --w: min(60vw, 250px, 40vh); position: fixed; z-index: 9990; width: var(--w); left: calc(50vw - var(--w) / 2); top: calc(46vh - var(--w) * .8);
  perspective: 1000px; pointer-events: none;
}
.gd-fly-who {
  display: flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; margin: 0 auto 10px; background: var(--c); color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: 999px; padding: 2px 14px 2px 4px; font: 800 17px var(--f-body); box-shadow: 0 3px 0 var(--ink);
}
.gd-fly-who span { width: 28px; height: 30px; flex: none; }
.gd-fly-who span svg { width: 100%; height: 100%; display: block; }
.gd-fly-in { position: relative; width: 100%; aspect-ratio: 50 / 70; transform-style: preserve-3d; }
.gd-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12%; box-shadow: 0 8px 0 rgba(11, 16, 51, .55); }
.gd-face.back { transform: rotateY(180deg); }
.gd-cardsvg { display: block; width: 100%; height: 100%; }
.gd-ghost { width: 40px; height: 44px; }
.gd-ghost svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .35)); }

.gd-pick { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; background: rgba(13, 22, 80, .6); border-radius: 18px; z-index: 2; overflow: auto; }
.gd-pickgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(100%, 420px); }
.gd-pickbtn {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 6px; min-width: 0; cursor: pointer;
  background: #fffaf0; color: #2b1838; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink); font: 800 13px var(--f-body);
  transition: transform .12s, box-shadow .12s;
}
.gd-pickbtn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.gd-pickpic { width: min(100%, 80px, 24cqh); aspect-ratio: 40 / 44; display: block; }
.gd-picking .gd-dock { display: none; }
.gd-pickpic svg { width: 100%; height: 100%; display: block; }
.gd-pickbtn b { font-weight: 800; line-height: 1.1; text-align: center; }
.gd-pickbtn small { min-height: 18px; padding: 1px 8px; border-radius: 999px; background: var(--c); color: #fff; font-weight: 800; font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-pickbtn small:empty { background: none; }
.gd-pickbtn.mine { background: var(--c); box-shadow: 0 5px 0 var(--ink), 0 0 0 4px #fff; }
.gd-pickbtn.mine small { background: var(--ink); }
.gd-pickbtn.taken { opacity: .6; filter: saturate(.5); cursor: default; }
@media (max-width: 360px) {
  .gd-banner { font-size: 18px; min-height: 52px; padding: 6px 10px; }
  .gd-pile { width: 64px; height: 88px; }
  .gd-deck i { width: 58px; height: 81px; }
  .gd-last { width: 48px; height: 67px; }
  .gd-hop span { width: 42px; height: 46px; }
  .gd-dock { min-height: 88px; gap: 8px; }
  .gd-seat { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .gd-piece .gd-bob, .gd-deck.ready i, .gd-deck-tap, .gd-dock.hopping .gd-hop, .gd-target rect { animation: none !important; }
}
/* tutorial props */
.tut-gd-tile { width: 12cqw; aspect-ratio: 1; border-radius: 3cqw; border: .6cqw solid #2b1838; display: grid; place-items: center; box-shadow: 0 .8cqw 0 rgba(11, 16, 51, .35); }
.tut-gd-tile svg { width: 70%; height: 70%; }
.tut-gd-tile.rainbow { background: linear-gradient(135deg, #ff4b5c, #ff9a1f, #ffd21a, #3ccf4e, #2f9bff, #a55eea); }
.tut-gd-buddy { width: 14cqw; aspect-ratio: 40 / 44; z-index: 3; }
.tut-gd-buddy svg, .tut-gd-card svg, .tut-gd-pic svg { width: 100%; height: 100%; display: block; }
.tut-gd-card { width: 22cqw; aspect-ratio: 50 / 70; z-index: 4; filter: drop-shadow(0 1cqw 0 rgba(11, 16, 51, .5)); }
.tut-gd-card.big { width: 30cqw; }
.tut-gd-pic { width: 18cqw; aspect-ratio: 1; }
.tut-gd-bubble { width: 18cqw; aspect-ratio: 1; border-radius: 50%; border: .6cqw solid #2f9bff; background: rgba(191, 233, 255, .35); z-index: 4; }
/* @end gumdrop */

/* ===== Word Shaker ===== */
.shk-root { gap: 10px; }
.shk-top { display: flex; flex-direction: column; gap: 4px; }
.shk-bar-row { display: flex; align-items: center; gap: 10px; }
.shk-round { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.shk-bar { flex: 1; height: 12px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--bg2); overflow: hidden; }
.shk-bar i { display: block; height: 100%; width: 100%; background: var(--accent); transition: width .25s linear; }
.shk-time { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3.1em; text-align: right; }
.shk-top.low .shk-bar i { background: var(--cherry); }
.shk-top.low .shk-time { color: #ff7a6e; animation: shk-pulse 1s infinite; }
@keyframes shk-pulse { 50% { transform: scale(1.12); } }
.shk-chips .chip { padding-right: 10px; }

.shk-stage { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.shk-stage:empty { display: none; }
.shk-word {
  min-height: 46px; max-width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 18px;
  background: var(--panel); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink);
  font-weight: 800; font-size: 24px; letter-spacing: .06em; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shk-word.idle, .shk-word.tap { color: var(--muted); font-size: 16px; font-weight: 600; letter-spacing: 0; }
.shk-word.tap { color: var(--accent); font-size: 22px; font-weight: 800; letter-spacing: .06em; }
.shk-word.good { background: var(--good); color: #0d2b0d; }
.shk-word.bad, .shk-word.late { background: var(--cherry); color: #fff; font-size: 16px; letter-spacing: 0; }
.shk-word.dup { background: var(--accent); color: var(--ink); font-size: 16px; letter-spacing: 0; }
.shk-word s { opacity: .8; letter-spacing: .04em; }
.shk-word i { font-style: normal; }

.shk-box {
  width: min(100%, 460px, calc(100dvh - 300px)); min-width: min(100%, 240px); padding: 8px; border-radius: 22px;
  background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px var(--panel2);
}
@supports not (height: 100dvh) { .shk-box { width: min(100%, 460px, calc(100vh - 300px)); } }
.shk-grid {
  position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); aspect-ratio: 1; container-type: inline-size;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.shk-cube { position: relative; aspect-ratio: 1; }
.shk-face {
  position: absolute; inset: 5.5%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#fff6df 0 76%, #e6cf9f 76%); border: 2.5px solid var(--ink); border-radius: 16%; box-shadow: 0 4px 0 var(--ink);
}
.shk-face b { font-weight: 800; font-size: calc(100cqw / var(--n) * .5); line-height: 1; color: var(--ink); margin-top: -8%; }
.shk-cube.qu .shk-face b { font-size: calc(100cqw / var(--n) * .38); }
.shk-cube.on .shk-face { background: linear-gradient(#ffc93c 0 76%, #d98a00 76%); transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.shk-cube.hl .shk-face { background: linear-gradient(#3fc9c1 0 76%, #1a8a85 76%); }
.shk-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.shk-line { fill: none; stroke: var(--accent2); stroke-width: .17; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.shk-dot { fill: var(--accent2); opacity: .85; }
.shk-trail.hl .shk-line { stroke: var(--ink); opacity: .55; }
.shk-trail.hl .shk-dot { fill: var(--ink); opacity: .7; }
.shk-grid.jumble .shk-cube { transform: var(--jt); }
.shk-grid.jumble .shk-face { animation: shk-rattle 1.2s var(--d, 0s) infinite ease-in-out; }
.shk-grid.hard .shk-face { animation: shk-rattle-hard .16s infinite linear; }
@keyframes shk-rattle { 0%, 100% { transform: none; } 25% { transform: translate(2px, -1px) rotate(3deg); } 50% { transform: translate(-1px, 1px) rotate(-2deg); } 75% { transform: translate(1px, 2px) rotate(1deg); } }
@keyframes shk-rattle-hard { 0%, 100% { transform: none; } 25% { transform: translate(5px, -4px) rotate(9deg); } 50% { transform: translate(-5px, 3px) rotate(-8deg); } 75% { transform: translate(3px, 5px) rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .shk-grid.jumble .shk-face, .shk-grid.hard .shk-face { animation: none; } .shk-top.low .shk-time { animation: none; } }

.shk-below { display: flex; flex-direction: column; gap: 10px; }
.shk-mine, .shk-card, .shk-missed { background: var(--panel); border: 2.5px solid var(--ink); border-radius: 18px; padding: 10px 12px; box-shadow: 0 4px 0 var(--ink); }
.shk-minehead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.shk-minehead b { font-size: 15px; }
.shk-minehead span { font-size: 13px; color: var(--muted); }
.shk-list { display: flex; flex-wrap: wrap; gap: 6px; }
.shk-mine .shk-list { max-height: 30vh; overflow-y: auto; }
.shk-w {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; min-height: 30px; font: inherit; font-size: 14px; font-weight: 700;
  letter-spacing: .03em; color: var(--text); background: var(--panel2); border: 2px solid var(--ink); border-radius: 10px;
}
button.shk-w { cursor: pointer; }
button.shk-w:active { transform: translateY(1px); }
.shk-w i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--accent); }
.shk-w.shared i { color: var(--muted); }
.shk-w.strike { text-decoration: line-through; text-decoration-thickness: 2.5px; text-decoration-color: var(--cherry); opacity: .6; }
.shk-empty { font-size: 13px; color: var(--muted); }
.shk-foot { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.shk-shakebox { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.shk-say { font-size: 16px; font-weight: 600; margin: 0; }
.shk-note { margin: 0; }
.shk-box { position: relative; }
.shk-shake { position: absolute; left: 50%; top: 50%; z-index: 4; min-width: 52%; translate: -50% -50%; animation: shk-wiggle 1.8s infinite; }
@keyframes shk-wiggle { 0%, 80%, 100% { transform: none; } 84% { transform: rotate(-3deg); } 88% { transform: rotate(3deg); } 92% { transform: rotate(-2deg); } 96% { transform: rotate(2deg); } }
.shk-shake:active { animation: none; }
.shk-shake.gone { opacity: 0; scale: .6; transition: opacity .2s, scale .2s; filter: none; }
@media (prefers-reduced-motion: reduce) { .shk-shake { animation: none; } }

.shk-revhead {
  display: flex; align-items: center; gap: 12px; position: sticky; top: 6px; z-index: 3; width: 100%; padding: 8px;
  background: var(--bg2); border: 2.5px solid var(--ink); border-radius: 20px; box-shadow: 0 4px 0 var(--ink);
}
.shk-box.small { width: min(40vw, 180px); min-width: 0; flex: none; padding: 4px; border-radius: 13px; border-width: 2.5px; box-shadow: none; }
.shk-box.small .shk-face { border-width: 1.5px; box-shadow: 0 2px 0 var(--ink); }
.shk-revinfo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.shk-revtitle { font-family: var(--f-display); font-weight: 400; font-size: 16px; color: var(--accent); }
.shk-revinfo span { font-size: 13px; color: var(--muted); }
.shk-long {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 14px; text-align: center;
  background: var(--accent); color: var(--ink); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink);
}
.shk-long span { font-size: 13px; font-weight: 700; }
.shk-big { font-family: var(--f-display); font-size: 28px; letter-spacing: .04em; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; overflow-wrap: anywhere; }
.shk-pb { text-align: center; font-weight: 700; padding: 8px 12px; border-radius: 14px; background: var(--panel2); border: 2.5px solid var(--ink); }
.shk-pb.new { background: var(--good); color: #0d2b0d; }
.shk-card { border-left: 8px solid var(--c); display: flex; flex-direction: column; gap: 8px; }
.shk-card.me { background: var(--panel2); }
.shk-card.me .shk-w { background: var(--panel); }
.shk-cardhead { display: flex; align-items: center; gap: 8px; }
.shk-cardhead b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shk-cnt { font-size: 13px; color: var(--muted); white-space: nowrap; }
.shk-pts { margin-left: auto; font-size: 19px; font-weight: 800; color: var(--accent); }
.shk-missed { background: var(--bg2); border-style: dashed; }
.shk-missed > b { display: block; font-size: 14px; margin-bottom: 8px; }
.shk-missed .shk-w { background: var(--panel); }
.shk-below .wait { visibility: hidden; }

/* tutorial */
.tut-shk-box { width: 34cqw; aspect-ratio: 1; padding: 1.2cqw; border-radius: 3.4cqw; background: var(--panel); border: .8cqw solid var(--ink); box-shadow: 0 1cqw 0 var(--ink); }
.tut-shk-box .shk-grid { width: 100%; touch-action: auto; }
.tut-shk-box .shk-face { border-width: .45cqw; box-shadow: 0 .6cqw 0 var(--ink); }
.tut-shk-word { font-weight: 800; font-size: 5cqw; letter-spacing: .06em; color: var(--accent); background: var(--panel); border: .6cqw solid var(--ink); border-radius: 2.6cqw; padding: .8cqw 3cqw; white-space: nowrap; }
.tut-shk-word.good { background: var(--good); color: #0d2b0d; }
.tut-shk-list { display: flex; flex-wrap: wrap; gap: 1.2cqw; width: 34cqw; }
.tut-shk-list .shk-w { font-size: 3.4cqw; padding: .6cqw 1.6cqw; min-height: 0; border-width: .5cqw; border-radius: 1.8cqw; }
.tut-shk-list .shk-w i { font-size: 2.6cqw; }
.tut-shk-table { display: grid; grid-template-columns: auto auto; gap: .6cqw 3cqw; font-size: 4cqw; font-weight: 700; background: var(--panel); border: .6cqw solid var(--ink); border-radius: 3cqw; padding: 2cqw 4cqw; }
.tut-shk-table b { color: var(--accent); text-align: right; }
.tut-shk-table span, .tut-shk-table b { white-space: nowrap; }
.tut-shk-card { width: 40cqw; background: var(--panel); border: .6cqw solid var(--ink); border-left: 2cqw solid var(--c); border-radius: 3cqw; padding: 1.6cqw 2cqw; display: flex; flex-direction: column; gap: 1.2cqw; }
.tut-shk-card > b { font-size: 3.6cqw; }
.tut-shk-card .tut-shk-list { width: auto; }
.tut-shk-phone { width: 15cqw; height: 26cqw; border-radius: 3cqw; background: #1a2a86; border: .8cqw solid var(--ink); box-shadow: 0 1cqw 0 var(--ink); }
/* @end wordshaker */

/* ===== Go ===== */
.go { display: flex; flex-direction: column; gap: 8px; }
.go-banner { padding: 8px 14px; }
.go-side { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 3px 8px 3px 10px; border-radius: 16px; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); transition: box-shadow .2s; }
.go-side[hidden] { display: none; }
.go-side.to-move { box-shadow: 0 0 0 3px var(--accent), 0 4px 0 var(--ink); }
.go-side .who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
.go-side .who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.go-side .who small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.go-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.go-me { width: 28px; height: 28px; flex: none; }
.go-clk { flex: none; font-variant-numeric: tabular-nums; padding: 2px 9px; border-radius: 999px; background: var(--bg2); border: 2px solid var(--ink); font-size: 14px; }
.go-clk.run { background: var(--accent); color: var(--ink); }
.go-clk.byo.run { background: var(--cherry); color: #fff; }
/* the bowl of captured stones */
.go-bowl { position: relative; flex: none; width: 62px; height: 30px; margin-top: 8px; border: 3px solid var(--ink); border-radius: 5px 5px 30px 30px / 5px 5px 24px 24px; background: linear-gradient(180deg, #b07a43 0, #8a5a2f 55%, #6e4522 100%); box-shadow: inset 0 4px 0 rgba(11, 16, 51, .35); }
.go-pile { position: absolute; left: 6px; right: 18px; top: -9px; display: flex; justify-content: center; }
.go-mini { width: 16px; height: 16px; margin-right: -7px; flex: none; }
.go-n { position: absolute; right: -6px; bottom: -6px; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--bg2); border: 2px solid var(--ink); font-size: 12px; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.go-fly { position: fixed; z-index: 60; pointer-events: none; }
/* the board */
.go-frame { position: relative; border-radius: 20px; padding: 7px; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); align-self: center; width: min(100%, calc(100dvh - 340px - var(--safe-top) - var(--safe-bottom))); min-width: min(100%, 260px); }
@supports not (height: 100dvh) { .go-frame { width: min(100%, calc(100vh - 340px)); } }
.go-board { display: block; width: 100%; aspect-ratio: 1; border-radius: 12px; outline: 2px solid var(--ink); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; }
.go-grain { fill: none; stroke: #c4954f; opacity: .32; }
.go-grid line, .go-grid rect { stroke: #4a3215; }
.go-star { fill: #4a3215; }
.go-stone.dead .go-st { opacity: .38; }
.go-t { stroke: #0b1033; stroke-width: .045; }
.go-t.c0 { fill: #262833; }
.go-t.c1 { fill: #f7f3e8; }
.go-last { fill: none; stroke-width: .085; }
.go-last.c0 { stroke: #ffb703; }
.go-last.c1 { stroke: #fb6107; }
.go-ko { fill: none; stroke: #e3242b; stroke-width: .07; }
.go-lib { fill: #4cb944; stroke: #0b1033; stroke-width: .05; }
.go-lib.atari { fill: #e3242b; }
.go-chain { fill: none; stroke: #ffb703; stroke-width: .09; }
.go-ghost, .go-pre { opacity: 0; pointer-events: none; }
.go-ghost.on { opacity: .62; }
.go-ghost.on.pre { opacity: .45; }
.go-ghost .x { fill: none; stroke: #e3242b; stroke-width: .1; stroke-linecap: round; opacity: 0; }
.go-ghost.bad use { opacity: .35; }
.go-ghost.bad .x { opacity: 1; }
.go-pre.on { opacity: .6; }
.go-pre circle { fill: none; stroke: #7b3fa0; stroke-width: .07; stroke-dasharray: .14 .1; }
.go-cross { display: none; pointer-events: none; }
.go-cross.on { display: inline; }
.go-cross line { stroke: #fb6107; stroke-width: .05; opacity: .75; }
.go-loupe { position: absolute; z-index: 20; border-radius: 50%; overflow: hidden; border: 4px solid var(--accent); outline: 3px solid var(--ink); background: #efcf92; pointer-events: none; }
.go-loupe[hidden] { display: none; }
.go-loupe svg { width: 100%; height: 100%; display: block; overflow: hidden; clip-path: circle(50%); }
.go-loupe-x::before, .go-loupe-x::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(251, 97, 7, .9); }
.go-loupe-x::before { width: 2px; height: 22px; transform: translate(-50%, -50%); }
.go-loupe-x::after { width: 22px; height: 2px; transform: translate(-50%, -50%); }
.go-bubble { position: absolute; z-index: 12; left: 50%; top: 10px; transform: translate(-50%, -6px); max-width: 92%; width: max-content; padding: 6px 12px; border-radius: 12px; background: var(--ink); color: var(--text); font-weight: 700; font-size: 14px; text-align: center; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.go-bubble.on { opacity: 1; transform: translate(-50%, 0); }
.go-float { position: absolute; z-index: 13; left: 50%; top: 45%; transform: translate(-50%, -50%); font-family: var(--f-display); font-size: 20px; color: var(--accent); white-space: nowrap; pointer-events: none; text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); animation: go-rise 1.2s ease-out forwards; }
@keyframes go-rise { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -150%) scale(1); } }
/* counting */
.go-card { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.go-card[hidden] { display: none; }
.go-col { padding: 6px 10px 8px; border-radius: 16px; background: var(--panel); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); min-width: 0; }
.go-col.acc { box-shadow: 0 0 0 3px var(--good), 0 4px 0 var(--ink); }
.go-col-h { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; min-width: 0; }
.go-col-h .go-me { width: 20px; height: 20px; }
.go-col-h b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.go-ok { flex: none; font-style: normal; font-weight: 800; color: var(--good); }
.go.counting .go-frame { width: min(100%, calc(100dvh - 430px - var(--safe-top) - var(--safe-bottom))); }
.go-l { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); line-height: 1.3; font-variant-numeric: tabular-nums; }
.go-l b { color: var(--text); }
.go-l.tot { margin-top: 2px; padding-top: 2px; border-top: 2px solid rgba(255, 243, 214, .18); font-size: 15px; color: var(--text); font-weight: 700; }
.go-l.tot b { color: var(--accent); }
.go-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.go-tools:empty { display: none; }
.go-tools .grow { flex: 1; }
.go-tools .go-resign { color: #ffb0b3; }
.go-pass.armed { background: var(--accent2); }
/* play the computer */
.go-setup { display: flex; flex-direction: column; gap: 12px; }
.go-h { margin: 4px 0 0; text-align: center; font-family: var(--f-display); font-weight: 400; color: var(--accent); font-size: 22px; }
.go-label { font-weight: 700; color: var(--muted); font-size: 14px; }
.go-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.go-vside { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 12px; border-radius: 18px; background: var(--panel); color: var(--text); font: inherit; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); min-width: 0; text-align: center; cursor: pointer; }
.go-vside.you { box-shadow: inset 0 0 0 3px var(--accent), 0 5px 0 var(--ink); background: var(--panel2); }
.go-vside:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.go-vside b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.go-vside small { color: var(--muted); font-size: 12px; }
.go-big { width: 52px; height: 52px; margin-bottom: 2px; }
.go-vsx { font-family: var(--f-display); color: var(--muted); }
.go-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.go-level { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 4px; border-radius: 16px; background: var(--panel); color: var(--text); font: inherit; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); cursor: pointer; min-width: 0; }
.go-level:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.go-level.on { background: var(--panel2); box-shadow: inset 0 0 0 3px var(--accent), 0 4px 0 var(--ink); }
.go-level .i { font-size: 24px; line-height: 1.2; }
.go-level small { color: var(--muted); font-size: 12px; }
.go-level.on b { color: var(--accent); }
.go-level:disabled, .go-vside:disabled { cursor: default; opacity: .85; }
.go-info { margin: 0; text-align: center; }
.go-auto { min-height: 18px; margin: 0; text-align: center; }
/* tutorial props */
.tut-go-board { width: 64cqw; aspect-ratio: 1; }
.tut-go-board svg { width: 100%; height: 100%; display: block; border-radius: 2cqw; outline: .7cqw solid var(--ink); }
.tut-go-st { width: 10cqw; aspect-ratio: 1; z-index: 3; }
.tut-go-st.sm { width: 7cqw; }
.tut-go-st svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tut-go-st.ghost { opacity: .55; }
.tut-go-st.dead { opacity: .4; }
.tut-go-dot { width: 3.4cqw; aspect-ratio: 1; border-radius: 50%; background: #4cb944; border: .6cqw solid var(--ink); z-index: 4; }
.tut-go-dot.red { background: #e3242b; }
.tut-go-sq { width: 3.6cqw; aspect-ratio: 1; border: .5cqw solid var(--ink); z-index: 4; }
.tut-go-sq.b { background: #262833; }
.tut-go-sq.w { background: #f7f3e8; }
.tut-go-bowl { width: 16cqw; height: 8cqw; border: .8cqw solid var(--ink); border-radius: 1cqw 1cqw 8cqw 8cqw / 1cqw 1cqw 6cqw 6cqw; background: linear-gradient(180deg, #b07a43, #6e4522); }
.tut-go-loupe { width: 22cqw; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: .8cqw solid var(--ink); background: #efcf92; z-index: 6; }
.tut-go-loupe svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { .go-float { animation: none; opacity: 0; } }
/* @end go */

/* ===== Mahjong ===== */
.mj { position: relative; display: flex; flex-direction: column; gap: 8px; --t: 18px; --th: 24px; --rw: 26px; --mw: 14px; }
/* a tile: ivory face, marigold back showing as its thickness */
.mj-t {
  --w: 24px; --d: max(2px, calc(var(--w) * .12));
  position: relative; flex: none; box-sizing: border-box; width: var(--w); height: calc(var(--w) * 4 / 3);
  background: linear-gradient(160deg, #fffaf0, #f1e3c2); border: max(1px, calc(var(--w) * .055)) solid var(--ink);
  border-radius: calc(var(--w) * .16); box-shadow: 0 var(--d) 0 #e8a317, 0 calc(var(--d) + 1px) 0 var(--ink);
}
.mj-t svg { display: block; width: 100%; height: 100%; }
.mj-t.back { background: linear-gradient(160deg, #f5ad1b, #d98a00); }
.mj-t.back::after { content: ''; position: absolute; inset: 16%; border: max(1px, calc(var(--w) * .06)) solid rgba(11, 16, 51, .3); border-radius: 22%; }
.mj-ico { --w: 11px; }
.mj-meld { display: flex; flex: none; }
.mj-meld .took { box-shadow: 0 var(--d) 0 var(--accent2), 0 calc(var(--d) + 1px) 0 var(--ink); }

.mj-banner { font-size: 17px; padding: 8px 12px; line-height: 1.15; }
.mj-banner small { font-size: 12.5px; margin-top: 2px; }

/* the other three players: left, across, right */
.mj-opps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mj-opp {
  min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 5px 6px 7px;
  background: var(--panel); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink);
  transition: box-shadow .2s, transform .2s;
}
.mj-opp.turn { box-shadow: 0 3px 0 var(--ink), 0 0 0 3px var(--c), 0 0 16px var(--c); transform: translateY(-1px); }
.mj-opp-head { display: flex; align-items: center; gap: 5px; min-width: 0; }
.mj-opp-head .avatar { font-size: 12px; }
.mj-opp-head b { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-wind { --w: 15px; }
.mj-opp.dealer .mj-wind { outline: 2px solid var(--accent); outline-offset: 1px; }
.mj-opp-sub { display: flex; gap: 7px; align-items: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.mj-cnt, .mj-fl { display: inline-flex; align-items: center; gap: 3px; }
.mj-pts { margin-left: auto; color: var(--text); }
.mj-melds { display: flex; flex-wrap: wrap; gap: 4px 5px; }
.mj-melds .mj-t { --w: var(--mw); }

/* the table: four rivers of discards in a pinwheel, the latest throw in the middle */
.mj-board { position: relative; display: flex; justify-content: center; }
.mj-felt {
  --R: calc((var(--th) + 2px) * 4 + 6px); --C: calc(var(--t) * 6 + 8px);
  position: relative; flex: none; width: calc(var(--R) * 2 + var(--C)); height: calc(var(--R) * 2 + var(--C));
  background: radial-gradient(circle at 50% 42%, #1c8f84, #0d5a55 72%); border: 3px solid var(--ink); border-radius: 22px;
  box-shadow: 0 5px 0 var(--ink), inset 0 0 0 3px rgba(255, 255, 255, .06); transition: box-shadow .15s;
}
.mj-felt.drop-over { box-shadow: 0 5px 0 var(--ink), 0 0 0 4px var(--accent), inset 0 0 30px rgba(255, 183, 3, .25); }
.mj-river {
  position: absolute; width: var(--C); height: var(--R); display: grid; grid-template-columns: repeat(6, var(--t));
  grid-auto-rows: calc(var(--th) + 2px); justify-content: center; align-content: start; padding-top: 5px; box-sizing: border-box;
}
.mj-river::before { content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 3px; border-radius: 3px; background: var(--c); opacity: .85; }
.mj-river .mj-t { --w: var(--t); border-radius: 3px; }
.mj-river .mj-t.last { outline: 2.5px solid var(--accent); outline-offset: 0; z-index: 1; }
.mj-river.sp0 { left: var(--R); top: calc(var(--R) + var(--C)); }
.mj-river.sp2 { left: var(--R); top: 0; transform: rotate(180deg); }
.mj-river.sp1 { left: calc(var(--R) * 1.5 + var(--C) / 2); top: calc(var(--R) / 2 + var(--C) / 2); transform: rotate(-90deg); }
.mj-river.sp3 { left: calc(var(--R) / 2 - var(--C) / 2); top: calc(var(--R) / 2 + var(--C) / 2); transform: rotate(90deg); }
.mj-center {
  position: absolute; left: var(--R); top: var(--R); width: var(--C); height: var(--C); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 5px 2px;
  border-radius: 14px; background: rgba(5, 30, 40, .28); border: 2px dashed rgba(255, 243, 214, .2);
}
.mj-round { display: flex; align-items: center; gap: 4px; font-size: clamp(9px, calc(var(--t) * .62), 12px); font-weight: 700; white-space: nowrap; }
.mj-offer { display: flex; flex-direction: column; align-items: center; gap: max(4px, calc(var(--t) * .35)); min-width: 0; }
.mj-offer .big { --w: calc(var(--t) * 2); }
.mj.tight .mj-round span, .mj.tight .mj-offer small { display: none; }
.mj.tight .mj-offer .big { --w: calc(var(--t) * 2); }
.mj.tight .mj-center { padding: 3px 2px; }
.mj-offer small { font-size: clamp(9px, calc(var(--t) * .62), 12px); font-weight: 700; max-width: calc(var(--C) - 10px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mj-offer.open .big { outline: 3px solid var(--accent); outline-offset: 2px; animation: mj-offer 1s ease-in-out infinite; }
.mj-offer.empty { justify-content: center; flex: 1; color: var(--muted); }
.mj-wallct { font-size: clamp(9px, calc(var(--t) * .62), 12px); color: var(--muted); white-space: nowrap; }
.mj-wallct b { color: var(--text); font-size: 1.15em; }
@keyframes mj-offer { 50% { transform: scale(1.07); } }

/* my laid-down sets and flowers, then my rack */
.mj-mine { display: flex; flex-wrap: wrap; gap: 5px 9px; justify-content: center; align-items: flex-end; min-height: 22px; }
.mj-mine .mj-t { --w: max(15px, calc(var(--rw) * .78)); }
.mj-flowers { display: flex; gap: 2px; }
.mj-rack {
  display: flex; justify-content: center; align-items: flex-end; gap: 2px; padding: 12px 4px 9px;
  min-height: calc(var(--rw) * 4 / 3 + 26px); box-sizing: border-box;
  background: linear-gradient(#1f2f8f, #15216f); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink);
}
.mj-rt { position: relative; flex: none; transition: transform .14s; touch-action: none; cursor: grab; }
.mj-rt .mj-t { --w: var(--rw); }
.mj-rt.drawn { margin-left: calc(var(--rw) * .4); }
.mj-rt.sel { transform: translateY(-9px); }
.mj-rt.sel .mj-t { outline: 3px solid var(--accent); outline-offset: 1px; }
.mj-rt.leaving { opacity: 0; }
.mj-rt.g-set::after, .mj-rt.g-pair::after { content: ''; position: absolute; left: 1px; right: 1px; bottom: -9px; height: 4px; border-radius: 2px; background: var(--good); box-shadow: 0 0 0 1px var(--ink); }
.mj-rt.g-pair::after { background: #6ec3ff; }
.mj-rt.suggest::before { content: ''; position: absolute; left: 50%; top: -10px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--accent2); border: 1.5px solid var(--ink); box-sizing: border-box; }
.drag-ghost.mj-rt { margin: 0 !important; }

.mj-hint { min-height: 22px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.2; }
.mj-hint em { font-style: normal; font-weight: 500; opacity: .85; }
.mj-key { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; font-size: 12px; }
.mj-key i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; background: var(--good); box-shadow: 0 0 0 1px var(--ink); margin-left: 4px; }
.mj-key i.pair { background: #6ec3ff; }
.mj-wait { display: inline-flex; gap: 3px; }
.mj-wait .mj-t { --w: 18px; }
.mj-wait .dead { opacity: .35; }

.mj-actions { min-height: 50px; display: flex; flex-direction: column; gap: 6px; }
.mj-actions.claiming { position: sticky; bottom: calc(6px + var(--safe-bottom)); z-index: 20; }
.mj-row { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.mj-row .btn { margin-bottom: 0; }
.mj-call { min-height: 56px; padding: 0 16px; font-family: var(--f-display); font-weight: 400; font-size: 21px; letter-spacing: .5px; }
.mj-row .mj-call.win { flex: 1 1 160px; font-size: 24px; }
.mj-call .mj-t, .mj-throw .mj-t, .mj-kong .mj-t { --w: 19px; }
.mj-throw { min-height: 50px; }
.mj-run { display: inline-flex; gap: 1px; }
.mj-run .mj-t { --w: 17px; }
.mj-run .took { outline: 2px solid var(--ink); outline-offset: 1px; }
.mj-tip { font-size: 13px; padding: 6px 0; }
.mj-claim { position: relative; padding: 12px 8px 8px; background: var(--bg2); border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); overflow: hidden; }
.mj-bar { position: absolute; left: 0; top: 0; width: 100%; height: 5px; background: var(--accent2); transform-origin: left; animation: mj-bar linear forwards; }
@keyframes mj-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.mj-claim-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mj-claim-btns .btn { flex: 1 1 auto; margin-bottom: 4px; }
.mj-claim-btns .mj-call.win { flex-basis: 100%; }
.mj-pass { min-height: 56px; }
.mj-sort { align-self: center; min-height: 34px; }

/* the big call bubble every phone sees */
.mj-bubble {
  position: absolute; z-index: 30; pointer-events: none; padding: 7px 16px 8px; white-space: nowrap;
  background: var(--text); color: var(--ink); font-family: var(--f-display); font-size: 26px; line-height: 1;
  border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink);
}
.mj-bubble::after { content: ''; position: absolute; left: 50%; bottom: -11px; margin-left: -9px; border: 9px solid transparent; border-bottom: 0; border-top-color: var(--ink); }
.mj-bubble.pung { background: #ffd166; }
.mj-bubble.chow { background: #9fe28f; }
.mj-bubble.kong { background: #ff9f6b; }
.mj-bubble.win { background: var(--accent); font-size: 34px; padding: 10px 20px; }
.mj-bubble.flower { background: #ffc2d1; font-size: 19px; }

/* between hands */
.mj-score { position: relative; width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 16px 12px 12px; overflow: hidden; background: var(--bg2); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 5px 0 var(--ink); animation: mj-in .3s ease-out; }
.mj-score::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: var(--stripe); }
.mj-score h3 { margin: 2px 0 0; font-family: var(--f-display); font-weight: 400; font-size: 24px; color: var(--accent); text-align: center; }
.mj-score .row .btn { margin-bottom: 4px; }
.mj-how { margin: 0; text-align: center; color: var(--muted); font-size: 14px; }
.mj-win { display: flex; flex-wrap: wrap; gap: 7px 6px; justify-content: center; padding: 10px 6px 12px; background: #0d5a55; border: 2.5px solid var(--ink); border-radius: 14px; }
.mj-win .mj-t { --w: min(24px, calc((100vw - 96px) / 17)); }
.mj-win .won { outline: 3px solid var(--accent); outline-offset: 1px; z-index: 1; }
.mj-win .fl { margin-left: 6px; }
.mj-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.mj-lines li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 9px; font-size: 14px; background: var(--panel); border-radius: 9px; }
.mj-lines b { color: var(--accent); white-space: nowrap; }
.mj-total { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 9px 0; font-weight: 700; }
.mj-total b { font-family: var(--f-display); font-weight: 400; font-size: 21px; color: var(--accent); }
.mj-pay { display: flex; flex-direction: column; gap: 4px; }
.mj-payrow { display: flex; align-items: center; gap: 8px; padding: 4px 9px; background: var(--panel); border-radius: 10px; }
.mj-payrow .avatar { font-size: 11px; }
.mj-payrow.me { background: var(--panel2); }
.mj-pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mj-pd { min-width: 42px; text-align: right; font-weight: 800; color: var(--muted); }
.mj-pd.pos { color: var(--good); }
.mj-pd.neg { color: #ff7a7f; }
.mj-payrow b { min-width: 46px; text-align: right; }
@keyframes mj-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }

.mj-sheet .mj-dis { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
.mj-dis-row { display: flex; flex-wrap: wrap; gap: 6px 2px; }
.mj-dis-row .mj-t { --w: 26px; }
.tut-mj-felt { width: 54cqw; height: 52cqh; border-radius: 4cqw; background: radial-gradient(circle at 50% 42%, #1c8f84, #0d5a55 72%); border: .8cqw solid var(--ink); }
.tut-mj-btn { padding: 1.6cqw 4cqw; border-radius: 2.6cqw; background: var(--accent); color: var(--ink); font-family: var(--f-display); font-size: 5cqw; border: .7cqw solid var(--ink); box-shadow: 0 1cqw 0 var(--ink); white-space: nowrap; }
.tut-mj-btn.pass { background: var(--panel2); color: var(--text); font-family: var(--f-body); font-weight: 800; }
.tut-mj-btn.on { transform: translate(-50%, -50%) translateY(.8cqw); box-shadow: 0 .2cqw 0 var(--ink); }
.tut-mj-bubble { padding: 1.4cqw 3.6cqw; border-radius: 3cqw; background: #ffd166; color: var(--ink); font-family: var(--f-display); font-size: 6.4cqw; border: .8cqw solid var(--ink); box-shadow: 0 1.2cqw 0 var(--ink); white-space: nowrap; z-index: 6; }
.tut-mj-bubble.win { background: var(--accent); font-size: 8cqw; }
@media (max-width: 370px) {
  .mj-banner { font-size: 15px; padding: 7px 10px; }
  .mj-banner small { font-size: 12px; }
  .mj-opp { padding: 4px 4px 6px; }
  .mj-opp-head { gap: 3px; }
  .mj-opp-head .avatar { --s: 18px !important; font-size: 10px; }
  .mj-opp-head b { font-size: 12px; }
  .mj-call { font-size: 18px; min-height: 50px; }
  .mj-pass { min-height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .mj-offer.open .big, .mj-score { animation: none; }
  .mj-rt { transition: none; }
}
/* @end mahjong */

/* ===== President ===== */
.pr { position: relative; flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; user-select: none; -webkit-user-select: none; }
.pr-banner { position: relative; }
.pr-seats { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 10px 6px; padding-top: 6px; }
.pr-chip {
  position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 5px 6px 5px;
  border-radius: 14px; background: var(--panel); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); transition: opacity .3s, box-shadow .2s, border-color .2s, background .2s;
}
.pr-chip.turn { border-color: var(--c); box-shadow: 0 3px 0 var(--ink), 0 0 0 2px var(--c), 0 0 16px var(--c); }
.pr-chip.passed { opacity: .62; }
.pr-chip.out { background: #2a2f6e; }
.pr-chip.lastp { background: var(--panel2); }
.pr-who { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; font-weight: 700; }
.pr-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-row2 { display: flex; align-items: center; gap: 4px; min-width: 0; height: 22px; }
.pr-mini {
  flex: none; display: grid; place-items: center; width: 17px; height: 22px; border-radius: 3px;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .13) 0 2px, transparent 2px 5px), linear-gradient(160deg, #7b52ff, #3d1fa8);
  box-shadow: inset 0 0 0 1.5px #fff, 2px 2px 0 0 var(--ink);
}
.pr-mini b { font: 800 11px var(--f-body); color: #fff; text-shadow: 0 0 3px var(--ink), 0 1px 0 var(--ink); }
.pr-chip.out .pr-mini { opacity: .35; }
.pr-bslot { flex: none; display: flex; }
.pr-bslot:empty { display: none; }
.pr-badge { display: inline-block; width: 20px; height: 20px; flex: none; }
.pr-badge svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pr-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 800; color: var(--muted); }
.pr-chip[data-title="pres"] .pr-title, .t-pres { color: var(--accent); }
.pr-chip[data-title="vp"] .pr-title, .t-vp { color: #dfe5ff; }
.pr-chip[data-title="vs"] .pr-title, .t-vs { color: #e8c35a; }
.pr-chip[data-title="scum"] .pr-title, .t-scum { color: #a9c27f; }
.pr-chip[data-title="pres"] { background: linear-gradient(180deg, #3b3a8f, var(--panel)); }
.pr-tag {
  position: absolute; top: -9px; right: -3px; padding: 0 6px; border-radius: 999px; white-space: nowrap;
  font-size: 10px; font-weight: 800; line-height: 15px; background: var(--muted); color: var(--ink); border: 2px solid var(--ink);
}
.pr-tag.gold { background: var(--accent); }
.pr-tag.done { background: #dfe5ff; }
.pr-tag.think { background: var(--c); }
.pr-tag.think::after { content: '…'; }

.pr-table {
  position: relative; flex: 1; min-height: 168px; display: grid; place-items: center; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.3px) 0 0 / 5px 5px, radial-gradient(ellipse at 50% 42%, #2f7a4f 0%, #1f5a39 75%, #174a2e 100%);
  box-shadow: inset 0 0 0 5px #6b4426, inset 0 0 0 8px #4e2f18, inset 0 8px 24px rgba(0, 0, 0, .35), 0 5px 0 var(--ink);
  border: 2.5px solid var(--ink);
}
.pr-info { position: absolute; left: 14px; top: 11px; font-size: 11px; font-weight: 700; color: #cfe3d6; opacity: .85; }
.pr-pile { position: absolute; inset: 12px 12px 34px; border-radius: 18px; isolation: isolate; z-index: 1; }
.pr-table.giving .pr-info { display: none; }
.pr .hand .pcard.got { box-shadow: 0 0 0 3px #a66bff, 0 0 14px rgba(166, 107, 255, .7), 0 6px 14px rgba(0, 0, 0, .4); }
.pr-pile.drop-over { box-shadow: none !important; background: radial-gradient(ellipse, rgba(255, 197, 49, .28), transparent 70%); }
.pr-pile.cd-nope { box-shadow: none !important; background: radial-gradient(ellipse, rgba(255, 70, 80, .5), transparent 70%); }
.pr-slot {
  position: absolute; left: 50%; top: calc(50% - 11px); translate: -50% -50%; width: 56px; aspect-ratio: 5 / 7; border-radius: 8px; pointer-events: none;
  border: 2px dashed rgba(255, 255, 255, .45); display: grid; place-items: center; opacity: 0; transition: opacity .25s;
  color: rgba(255, 255, 255, .7); font-size: 10px; font-weight: 700; text-transform: uppercase; text-align: center;
}
.pr-table.ready.empty .pr-slot { opacity: 1; animation: target-glow 1.2s ease-in-out infinite; }
.pr-set {
  --w: clamp(50px, 8.5vh, 78px); position: absolute; left: 50%; top: 50%; display: flex;
  transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg));
  transition: filter .3s;
}
.pr-set .pcard { --w: inherit; }
.pr-set .pcard + .pcard { margin-left: calc(var(--w) * -.55); }
.pr-set.old { filter: brightness(.72) saturate(.8); }
.pr-set.top .pcard { box-shadow: 0 3px 0 rgba(11, 16, 51, .6), 0 0 0 1.5px rgba(11, 16, 51, .4); }
.pr-said {
  position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: #fff3d6; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); white-space: nowrap; overflow: hidden;
}
.pr-said span { overflow: hidden; text-overflow: ellipsis; }
.pr-said i { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); }
.pr-hot { color: var(--accent); }
.pr-tray {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%; display: none; flex-direction: column; align-items: center; gap: 6px; z-index: 3;
  padding: 8px 10px 10px; border-radius: 18px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14);
}
.pr-tray.on { display: flex; }
.pr-tray.drop-over { box-shadow: inset 0 0 0 2px var(--accent), 0 0 22px rgba(255, 197, 49, .5) !important; }
.pr-traylabel { font-weight: 700; font-size: 14px; color: #fff; white-space: nowrap; }
.pr-trayslots { display: flex; gap: 8px; }
.pr-tslot { width: 54px; aspect-ratio: 5 / 7; border-radius: 8px; border: 2px dashed rgba(255, 255, 255, .4); display: grid; place-items: center; }
.pr-tcard { --w: 54px; cursor: pointer; }
.pr-burst {
  position: absolute; left: 50%; top: 44%; z-index: 6; translate: -50% -50%; pointer-events: none; white-space: nowrap; max-width: 92%;
  padding: 8px 16px; border-radius: 14px; font: 400 19px var(--f-display); color: var(--text); background: var(--accent2);
  border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
}
.pr-burst.hot { background: var(--cherry); font-size: 22px; }
.pr-burst.gold { background: var(--accent); color: var(--ink); }
.pr-burst.tax { background: var(--panel2); font: 700 15px var(--f-body); }

.pr-me { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 22px; font-size: 13px; color: var(--muted); padding: 0 8px; border-radius: 999px; }
.pr-me.turn { color: var(--text); }
.pr-mebadge { display: flex; }
.pr-mebadge .pr-badge { width: 22px; height: 22px; }
.pr-metext { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; justify-content: center; }
.pr-metext b { font-weight: 800; }
.pr-place { color: var(--accent); font-weight: 800; }
.pr-passed { color: #ff9a5c; font-weight: 700; }
.pr-handwrap { padding: 20px 4px 18px; }
.pr-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.pr-actions.two { grid-template-columns: 1fr 1.5fr; }
.pr-actions:empty { display: none; }
.pr-actions .btn { min-height: 54px; font-size: 18px; }
.pr-pass.live { background: var(--panel2); color: var(--text); }
.pr-actions .btn[disabled] { opacity: .5; }

.pr-popup {
  position: absolute; left: 0; right: 0; top: var(--top, 76px); z-index: 20; display: flex; flex-direction: column; gap: 10px;
  max-height: calc(100% - var(--top, 76px)); overflow-y: auto; padding: 14px 12px; border-radius: 22px;
  background: var(--wood); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink);
}
.pr-popup.anim { animation: rise .3s cubic-bezier(.2, .9, .3, 1.2); }
.pr-popup h3 { margin: 0; text-align: center; font: 400 18px var(--f-display); color: var(--accent); }
.pr-shead, .pr-srow { display: grid; grid-template-columns: 30px 24px minmax(0, 1fr) minmax(0, 1.6fr) 28px 28px; align-items: center; gap: 6px; }
.pr-shead { font-size: 10px; font-weight: 800; color: #f3e0bf; opacity: .8; padding: 0 8px; }
.pr-shead span:nth-child(n+5) { text-align: right; }
.pr-srows { display: flex; flex-direction: column; gap: 5px; }
.pr-srow { padding: 5px 8px; border-radius: 12px; background: rgba(11, 16, 51, .55); border: 2px solid var(--ink); font-size: 14px; }
.pr-srow.me { box-shadow: inset 0 0 0 2px var(--c); }
.pr-popup.anim .pr-srow { animation: pr-in .38s cubic-bezier(.2, .9, .3, 1.2) backwards; animation-delay: var(--d, 0ms); }
.pr-popup.anim .pr-srow .pr-badge { animation: pr-crown .6s cubic-bezier(.3, .7, .3, 1) backwards; animation-delay: calc(var(--d, 0ms) + 250ms); }
.pr-splace { font-weight: 800; color: var(--accent); }
.pr-sname { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-stitle { display: flex; align-items: center; gap: 3px; font-size: 11.5px; letter-spacing: -.01em; font-weight: 800; min-width: 0; white-space: nowrap; overflow: hidden; }
.pr-stitle.t-cit { color: var(--muted); }
.pr-stitle .short { display: none; }
@media (max-width: 380px) { .pr-stitle .full { display: none; } .pr-stitle .short { display: inline; } }
.pr-stitle .pr-badge { width: 18px; height: 18px; }
.pr-sdelta { text-align: right; color: var(--good); font-weight: 700; font-size: 13px; }
.pr-stotal { text-align: right; font-size: 16px; }
@keyframes pr-in { from { opacity: 0; translate: -24px 0; } }
@keyframes pr-crown { 0% { opacity: 0; translate: 0 -22px; scale: 2; rotate: -40deg; } 60% { opacity: 1; translate: 0 1px; scale: 1.15; rotate: 8deg; } 100% { translate: 0 0; scale: 1; rotate: 0deg; } }
@media (max-width: 360px) {
  .pr-seats { gap: 9px 4px; }
  .pr-chip { padding: 4px 4px; }
  .pr-who { font-size: 11px; }
  .pr-title { display: none; }
  .pr-table { min-height: 150px; }
  .pr-shead, .pr-srow { grid-template-columns: 26px 22px minmax(0, 1fr) minmax(0, 1fr) 28px 30px; gap: 4px; }
  .pr-srow { font-size: 13px; }
  .pr-actions .btn { min-height: 50px; font-size: 17px; }
}
@media (max-height: 700px) {
  .pr { gap: 6px; }
  .pr-banner { font-size: 16px; padding: 7px 12px; }
  .pr-banner small { font-size: 12px; }
  .pr-seats { padding-top: 4px; gap: 9px 4px; }
  .pr-handwrap { padding: 14px 4px 10px; }
  .pr-table { min-height: 118px; }
  .pr-me { min-height: 18px; font-size: 12px; }
  .pr-actions .btn { min-height: 46px; }
  /* lots of seats on a short phone: one-line chips */
  .pr-seats.many { gap: 10px 4px; }
  .pr-seats.many .pr-chip { flex-direction: row; align-items: center; justify-content: space-between; gap: 3px; padding: 4px 5px; }
  .pr-seats.many .pr-who .avatar { display: none; }
  .pr-seats.many .pr-row2 { height: auto; flex: none; }
  .pr-seats.many .pr-title { display: none; }
  .pr-seats.many .pr-bslot { position: absolute; left: -6px; top: -9px; }
  .pr-seats.many .pr-bslot .pr-badge { width: 17px; height: 17px; }
  .pr-seats.many .pr-mini { width: 15px; height: 19px; }
  .pr-table { min-height: 108px; }
  .pr-traylabel { display: none; }
}
.tut-pr-badge { width: 11cqw; aspect-ratio: 1; z-index: 3; }
.tut-pr-badge svg { width: 100%; height: 100%; display: block; overflow: visible; }
@media (prefers-reduced-motion: reduce) {
  .pr-popup.anim, .pr-popup.anim .pr-srow, .pr-popup.anim .pr-srow .pr-badge, .pr-table.ready.empty .pr-slot { animation: none; }
}
/* @end president */

/* ===== I Doubt It ===== */
.dbt { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.dbt-banner { position: relative; }
.dbt-seats { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 11px 6px; padding-top: 6px; }
.dbt-seat {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 6px 4px 5px;
  border-radius: 14px; background: var(--panel); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); transition: box-shadow .2s, border-color .2s;
}
.dbt-seat.turn, .dbt-seat.claim, .dbt-seat.win { border-color: var(--c); box-shadow: 0 3px 0 var(--ink), 0 0 0 2px var(--c), 0 0 16px var(--c); }
.dbt-mini {
  flex: none; display: grid; place-items: center; width: 30px; aspect-ratio: 5 / 7; border-radius: 4px;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .13) 0 2px, transparent 2px 6px), linear-gradient(160deg, #7b52ff, #3d1fa8);
  box-shadow: inset 0 0 0 2px #fff, 2px 2px 0 0 #ddd, 4px 4px 0 0 #3d1fa8, 4px 4px 0 2px var(--ink);
}
.dbt-mini b { font: 800 14px var(--f-body); color: #fff; text-shadow: 0 0 3px var(--ink), 0 1.5px 0 var(--ink); }
.dbt-who { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; font-size: 12px; font-weight: 700; }
.dbt-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbt-tag {
  position: absolute; top: -9px; right: -3px; max-width: calc(100% + 6px); overflow: hidden; text-overflow: ellipsis; padding: 0 6px; border-radius: 999px; white-space: nowrap;
  font-size: 10px; font-weight: 800; line-height: 15px; background: var(--c); color: var(--ink); border: 2px solid var(--ink);
}
.dbt-tag.warn { background: #ff9a5c; }
.dbt-tag.red { background: var(--cherry); color: #fff; }
.dbt-tag.gold { background: var(--accent); }

.dbt-table {
  --pw: clamp(56px, min(23vw, 12vh), 110px);
  position: relative; flex: 1; min-height: 214px; display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; align-items: center; gap: 4px;
  padding: 10px 10px 8px; border-radius: 22px; overflow: hidden; border: 2.5px solid var(--ink);
  background: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.3px) 0 0 / 5px 5px, radial-gradient(ellipse at 50% 42%, #2f7a4f 0%, #1f5a39 75%, #174a2e 100%);
  box-shadow: inset 0 0 0 5px #6b4426, inset 0 0 0 8px #4e2f18, inset 0 8px 24px rgba(0, 0, 0, .35), 0 5px 0 var(--ink);
}
.dbt-ladder { display: flex; align-items: center; gap: 5px; }
.dbt-ladder small { margin-right: 2px; font-size: 11px; font-weight: 700; color: rgba(255, 243, 214, .7); }
.dbt-ladder span {
  min-width: 22px; padding: 1px 5px; border-radius: 999px; text-align: center; font: 400 12px/1.3 var(--f-display);
  background: rgba(11, 16, 51, .5); color: rgba(255, 243, 214, .7);
}
.dbt-ladder span.past { opacity: .4; }
.dbt-ladder span.now { min-width: 36px; padding: 1px 10px; font-size: 20px; background: var(--accent); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.dbt-pilewrap { position: relative; width: calc(var(--pw) * 1.9); height: calc(var(--pw) * 1.6); border-radius: 30%; }
.dbt-pile { position: absolute; inset: 0; }
.dbt-layer { position: absolute; left: 50%; top: 50%; }
.dbt-layer .pcard { --w: var(--pw); box-shadow: 0 2px 0 rgba(11, 16, 51, .6), 0 0 0 1.5px rgba(11, 16, 51, .4), inset 0 0 0 calc(var(--w) * .055) #fff, inset 0 0 0 calc(var(--w) * .075) #ffc531; }
.dbt-pile.empty::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: var(--pw); aspect-ratio: 5 / 7; transform: translate(-50%, -50%);
  border: 2.5px dashed rgba(255, 243, 214, .3); border-radius: calc(var(--pw) * .11);
}
.dbt-pilewrap.drop-over { box-shadow: none !important; background: radial-gradient(circle, rgba(255, 197, 49, .4), transparent 70%); }
.dbt-pilewrap.sus::before {
  content: ''; position: absolute; inset: -8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 183, 3, .5) 0%, rgba(251, 97, 7, .25) 45%, transparent 70%); animation: dbt-glow 1s ease-in-out infinite;
}
.dbt-pilewrap.sus .dbt-pile { animation: dbt-jitter .45s steps(2) infinite; }
.dbt-pilewrap.hot::before { background: radial-gradient(circle, rgba(255, 90, 95, .65) 0%, rgba(227, 36, 43, .3) 45%, transparent 70%); animation-duration: .6s; }
.dbt-pilewrap.hot .dbt-pile { animation-duration: .3s; }
@keyframes dbt-glow { 50% { opacity: .45; transform: scale(.94); } }
@keyframes dbt-jitter { 0% { translate: -1px 0; rotate: -.6deg; } 50% { translate: 1px -1px; rotate: .6deg; } 100% { translate: 0 1px; rotate: 0deg; } }
.dbt-count { min-height: 15px; font-size: 12px; font-weight: 700; color: #d8e8df; }
.dbt-claim {
  visibility: hidden; display: flex; flex-direction: column; align-items: center; min-height: 38px; padding: 2px 14px 4px; border-radius: 14px; white-space: nowrap;
  background: var(--c); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); transition: opacity .25s, background .25s, color .25s;
}
.dbt-claim.on { visibility: visible; }
.dbt-claim.old { background: rgba(11, 16, 51, .7); color: var(--text); border-color: var(--c); box-shadow: none; opacity: .75; }
.dbt-claim small { font-size: 11px; font-weight: 700; }
.dbt-claim b { font: 400 20px/1.1 var(--f-display); }
.dbt-claim em { margin-top: 2px; padding: 0 7px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 800; background: var(--ink); color: #ff8a8f; }

.dbt-reveal { position: absolute; inset: 0; z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgba(11, 16, 51, .55), rgba(11, 16, 51, .2) 70%); }
.dbt-reveal.on { display: flex; }
.dbt-call { display: flex; flex-direction: column; align-items: center; padding: 3px 14px 4px; border-radius: 14px; background: var(--c); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); white-space: nowrap; }
.dbt-call b { font: 400 18px/1.15 var(--f-display); }
.dbt-call small { font-size: 11px; font-weight: 700; }
.dbt-row { --rw: clamp(48px, 16vw, 74px); display: flex; gap: 6px; perspective: 700px; }
.dbt-rc { width: var(--rw); aspect-ratio: 5 / 7; }
.dbt-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .36s cubic-bezier(.3, .7, .3, 1); }
.dbt-flip.up { transform: rotateY(180deg); }
.dbt-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.dbt-front { transform: rotateY(180deg); }
.dbt-face .pcard { --w: var(--rw); }
.dbt-back .pcard { box-shadow: 0 2px 0 rgba(11, 16, 51, .6), inset 0 0 0 calc(var(--w) * .055) #fff, inset 0 0 0 calc(var(--w) * .075) #ffc531; }
.dbt-flip.up.good .dbt-front .pcard { box-shadow: 0 0 0 3px var(--good), 0 0 14px rgba(76, 185, 68, .7); }
.dbt-flip.up.bad .dbt-front .pcard { box-shadow: 0 0 0 3px var(--cherry), 0 0 16px rgba(227, 36, 43, .8); }
.dbt-reveal.truth .dbt-flip.bad .dbt-front .pcard, .dbt-reveal.lie .dbt-flip.good .dbt-front .pcard { filter: brightness(.8); }
.dbt-stamp {
  position: absolute; left: 50%; top: 56%; translate: -50% -50%; rotate: -12deg; z-index: 3; padding: 0 12px; border-radius: 10px; opacity: 0;
  font: 400 clamp(26px, 8.5vw, 38px)/1.15 var(--f-display); letter-spacing: .04em; border: 5px solid currentColor; background: #fff3d6; box-shadow: 0 5px 0 var(--ink), 0 0 0 2px var(--ink);
}
.dbt-stamp.in { opacity: 1; }
.dbt-reveal.truth .dbt-stamp { color: #1f7a2a; }
.dbt-reveal.lie .dbt-stamp { color: #c81d25; }
.dbt-note { opacity: 0; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(11, 16, 51, .8); white-space: nowrap; transition: opacity .2s; }
.dbt-note.in { opacity: 1; }

.dbt-act { min-height: 68px; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.dbt-hint { font-size: 12.5px; line-height: 1.3; color: var(--muted); text-align: center; }
.dbt-act.mine .dbt-hint { color: var(--text); }
.dbt-play { width: 100%; }
.dbt-doubt {
  position: relative; width: 100%; min-height: 64px; overflow: hidden; border-radius: 16px; cursor: pointer; touch-action: manipulation;
  font: 400 27px var(--f-display); color: #fff; background: var(--cherry); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink);
  text-shadow: 0 2px 0 var(--ink); animation: dbt-pulse .9s ease-in-out infinite; -webkit-tap-highlight-color: transparent;
}
.dbt-doubt span { position: relative; z-index: 1; }
.dbt-doubt:active { translate: 0 4px; box-shadow: 0 2px 0 var(--ink); }
.dbt-doubt.hot { animation-duration: .5s; background: #f0262e; }
@keyframes dbt-pulse { 50% { scale: 1.03; } }
.dbt-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 7px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); animation: dbt-drain linear forwards; }
.dbt-bar.thin { height: 4px; }
@keyframes dbt-drain { from { transform: scaleX(var(--f, 1)); } to { transform: scaleX(0); } }
.dbt-wait { position: relative; overflow: hidden; padding: 11px 12px; border-radius: 14px; text-align: center; font-size: 14px; font-weight: 700; color: var(--muted); background: rgba(5, 9, 40, .45); border: 2.5px solid var(--ink); }
.dbt-wait span { position: relative; }
.dbt-handwrap { padding: 20px 4px 16px; }
.hand .pcard.dbt-match { box-shadow: 0 0 0 3px var(--good), 0 0 12px rgba(76, 185, 68, .6), 0 3px 8px rgba(0, 0, 0, .35); }
.hand .pcard.dbt-match.sel, .hand .pcard.sel { box-shadow: 0 0 0 3px var(--accent), 0 8px 18px rgba(0, 0, 0, .45); }
@media (max-height: 700px) {
  .dbt { gap: 6px; }
  .dbt-banner { padding: 7px 12px; font-size: 17px; }
  .dbt-banner small { font-size: 12px; }
  .dbt-seats { gap: 10px 5px; }
  .dbt-seat { padding: 4px 3px 3px; flex-direction: row; justify-content: center; gap: 5px; }
  .dbt-mini { width: 25px; }
  .dbt-mini b { font-size: 12px; }
  .dbt-who .avatar { display: none; }
  .dbt-table { min-height: 178px; padding: 7px 8px 6px; gap: 2px; }
  .dbt-claim { min-height: 34px; }
  .dbt-claim b { font-size: 17px; }
  .dbt-act { min-height: 58px; }
  .dbt-doubt { min-height: 54px; font-size: 23px; }
  .dbt-handwrap { padding: 16px 4px 10px; }
}
@media (max-height: 640px) {
  .dbt-seats { gap: 9px 4px; padding-top: 4px; }
  .dbt-seat { padding: 3px 3px 2px; border-radius: 11px; }
  .dbt-who { font-size: 11px; }
  .dbt-mini { width: 20px; border-radius: 3px; }
  .dbt-mini b { font-size: 11px; }
  .dbt-table { --pw: clamp(50px, min(19vw, 9.5vh), 80px); min-height: 150px; }
  .dbt-ladder span.now { font-size: 15px; padding: 0 9px; }
  .dbt-ladder span { font-size: 11px; }
  .dbt-table { grid-template-rows: auto 1fr auto; }
  .dbt-pilewrap { height: calc(var(--pw) * 1.38); }
  .dbt-count { position: absolute; left: 13px; bottom: 11px; max-width: 74px; font-size: 11px; line-height: 1.2; text-align: left; }
  .dbt-act.mine .dbt-hint { display: none; }
  .dbt-banner { padding: 5px 10px; }
  .dbt-claim { min-height: 30px; padding: 1px 12px 2px; }
  .dbt-claim b { font-size: 15px; }
  .dbt-banner small { font-size: 11.5px; }
  .dbt-row { --rw: clamp(42px, 13vw, 60px); }
  .dbt-act { min-height: 50px; gap: 3px; }
  .dbt-hint { font-size: 11.5px; }
  .dbt-act .btn { min-height: 44px; font-size: 16px; }
  .dbt-doubt { min-height: 50px; font-size: 22px; }
  .dbt .hand { --cw: 58px; }
  .dbt-handwrap { padding: 10px 4px 2px; }
}
.dbt-table.revealing .dbt-claim, .dbt-table.revealing .dbt-count { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .dbt-pilewrap.sus .dbt-pile, .dbt-doubt { animation: none; }
  .dbt-pilewrap.sus::before { animation: none; }
  .dbt-flip { transition: none; }
}
.tut-dbt-claim { z-index: 6; padding: .3em .9em; border-radius: 3cqw; white-space: nowrap; font: 400 5cqw var(--f-display); background: var(--c); color: var(--ink); border: .8cqw solid var(--ink); box-shadow: 0 1cqw 0 var(--ink); }
.tut-dbt-btn { z-index: 6; padding: .35em 1em; border-radius: 3cqw; white-space: nowrap; font: 400 6cqw var(--f-display); color: #fff; background: var(--cherry); border: .8cqw solid var(--ink); box-shadow: 0 1.2cqw 0 var(--ink); text-shadow: 0 .5cqw 0 var(--ink); }
.tut-dbt-stamp { z-index: 8; width: max-content; white-space: nowrap; padding: 0 .4em; border-radius: 2cqw; font: 400 9cqw/1.15 var(--f-display); border: 1.1cqw solid currentColor; background: #fff3d6; rotate: -12deg; box-shadow: 0 1.2cqw 0 var(--ink); }
.tut-dbt-stamp.truth { color: #1f7a2a; }
.tut-dbt-stamp.lie { color: #c81d25; }
.tut-dbt-rank { z-index: 6; padding: .1em .6em; border-radius: 999px; font: 400 6cqw var(--f-display); background: var(--accent); color: var(--ink); border: .7cqw solid var(--ink); box-shadow: 0 .8cqw 0 var(--ink); }
.tut-dbt-glow { width: 30cqw; aspect-ratio: 1; border-radius: 50%; z-index: 1; background: radial-gradient(circle, rgba(255, 90, 95, .65), rgba(227, 36, 43, .25) 45%, transparent 70%); animation: dbt-glow .7s ease-in-out infinite; }
/* @end doubt */

/* ===== Nertz ===== */
.nz { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 8px; user-select: none; -webkit-user-select: none; }
.nz-bar { position: relative; display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 2px; font-size: 13px; }
.nz-hand { font-family: var(--f-display); font-size: 13px; color: var(--accent); white-space: nowrap; }
.nz-stat { flex: 1; min-width: 0; text-align: center; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nz-stat.hot { color: var(--accent); }
.nz-score { white-space: nowrap; font-weight: 700; }
.nz-score b { font-family: var(--f-display); font-weight: 400; font-size: 16px; }
.nz-score small { font-size: 12px; color: var(--good); font-weight: 800; }
.nz-score small.neg { color: #ff8a8f; }
.nz-bar .tmr-clock { top: -4px; right: auto; left: 50%; translate: -50% 0; }

/* other players: a mini deck back with their Nertz count */
.nz-opps { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 5px; }
.nz-chip {
  display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 7px 3px 3px; border-radius: 12px;
  background: var(--panel); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); transition: opacity .2s;
}
.nz-mb {
  flex: none; position: relative; width: 24px; height: 32px; border-radius: 4px; display: grid; place-items: center;
  box-shadow: inset 0 0 0 2px #fff6e0, 0 1px 0 var(--ink);
}
.nz-mb b { font-size: 14px; font-weight: 800; color: #fff; text-shadow: 0 1px 0 var(--ink), 0 0 3px var(--ink), 0 0 2px var(--ink); }
.nz-cw { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.nz-cn { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nz-cw small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.nz-chip.stuck { border-style: dashed; }
.nz-chip.stuck small { color: var(--accent); }
.nz-chip.low .nz-mb { animation: nz-pulse 1s ease-in-out infinite; }
.nz-chip.gone { opacity: .45; }
.nz-opps.tight .nz-chip { flex-direction: column; gap: 2px; padding: 3px 2px 2px; }
.nz-opps.tight .nz-cw { align-items: center; max-width: 100%; }
.nz-opps.tight .nz-cn { font-size: 11px; max-width: 100%; }
.nz-opps.tight .nz-cw small { display: none; }
.nz-opps.tight .nz-chip.stuck .nz-cw small { display: block; font-size: 10px; }
@keyframes nz-pulse { 50% { box-shadow: inset 0 0 0 2px #fff6e0, 0 0 0 3px var(--cherry); } }

/* the shared foundations: one row per suit (two suits a row for up to three players) */
.nz-mid {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border-radius: 16px;
  background: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.3px) 0 0 / 5px 5px, radial-gradient(ellipse at 50% 40%, #1c8a62 0%, #136247 80%);
  border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); transition: box-shadow .12s;
}
.nz-mid.drop-over { box-shadow: 0 4px 0 var(--ink) !important; }
.nz-mid.nz-nope { box-shadow: 0 4px 0 var(--ink), 0 0 0 3px var(--cherry) !important; }
.nz-frow { display: flex; gap: 10px; justify-content: center; }
.nz-fgrp { display: flex; gap: 3px; }
.nz-ft {
  position: relative; width: var(--tw); height: var(--th); flex: none; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  background: #fff6e0; color: #17133a; border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink);
  font-weight: 800; font-size: calc(var(--th) * .44); line-height: 1; letter-spacing: -.03em; transition: transform .15s, outline-color .15s;
}
.nz-ft.red { color: #d42a2f; }
.nz-fs { font-size: .86em; margin-left: .04em; }
.nz-fo { position: absolute; left: 2px; right: 2px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--o, transparent); }
.nz-ft.deep { box-shadow: 0 2px 0 var(--ink), 2px 3px 0 0 #e8dcc0, 2px 4px 0 1px var(--ink); }
.nz-ft.done { background: #e2d6b8; }
.nz-ft.done::after { content: '✓'; position: absolute; top: 1px; right: 3px; font-size: 10px; color: var(--good); }
.nz-ft.empty { background: rgba(255, 255, 255, .05); border: 2px dashed rgba(255, 255, 255, .2); box-shadow: none; color: rgba(255, 255, 255, .22); }
.nz-ft.empty .nz-fo { display: none; }
.nz-ft.drop-over { box-shadow: none !important; }
.nz-ft.deep.drop-over { box-shadow: 0 2px 0 var(--ink), 2px 3px 0 0 #e8dcc0, 2px 4px 0 1px var(--ink) !important; }
.nz-ft.nz-hit { outline: 3px solid var(--accent); outline-offset: 1px; transform: scale(1.1); z-index: 2; }
.nz-ft.empty.nz-hit { background: rgba(255, 197, 49, .25); color: var(--accent); }

/* my piles */
.nz-board { position: relative; flex: none; --cw: 64px; }
.nz-board .pcard { --w: var(--cw); position: absolute; margin: 0; }
.nz-board .pcard.nz-under { pointer-events: none; filter: brightness(.94); }
.nz-slot { position: absolute; border-radius: calc(var(--cw) * .11); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16); }
.nz-snz::before { content: 'Nertz'; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-size: calc(var(--cw) * .2); color: rgba(255, 255, 255, .25); }
.nz-snz.call { box-shadow: inset 0 0 0 3px var(--accent); animation: nz-glow 1s ease-in-out infinite; }
.nz-snz.call::before { color: var(--accent); }
@keyframes nz-glow { 50% { background: rgba(255, 197, 49, .2); } }
.nz-wz { position: absolute; z-index: 80; border-radius: 12px; }
.nz-wz.drop-over { box-shadow: none !important; }
.nz-wz.nz-hit { background: linear-gradient(to bottom, rgba(255, 197, 49, 0), rgba(255, 197, 49, .22)); }
.nz-wz.nz-nope { background: linear-gradient(to bottom, rgba(227, 36, 43, 0), rgba(227, 36, 43, .18)); }
.nz-stockhit { position: absolute; z-index: 60; padding: 0; border: 0; background: transparent; border-radius: calc(var(--cw) * .11); cursor: pointer; touch-action: manipulation; }
.nz-stockhit.live { box-shadow: 0 0 0 2px rgba(255, 197, 49, .6); }
.nz-stockhit:active:not([disabled]) { background: rgba(255, 255, 255, .12); }
.nz-recycle { position: absolute; z-index: 2; display: grid; place-items: center; font-size: calc(var(--cw) * .5); color: rgba(255, 255, 255, .45); pointer-events: none; }
.nz-badge, .nz-sbadge {
  position: absolute; z-index: 70; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); pointer-events: none; box-sizing: border-box;
}
.nz-badge { background: var(--accent); color: var(--ink); }
.nz-badge:empty, .nz-sbadge:empty { display: none; }
.nz-badge.low { background: var(--cherry); color: #fff; }
.nz-sbadge { background: var(--panel2); color: var(--text); min-width: 22px; height: 22px; font-size: 12px; }
.nz-side { position: absolute; z-index: 5; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.nz-stuck {
  align-self: stretch; padding: 6px 8px; border-radius: 12px; background: var(--panel2); color: var(--text); border: 2.5px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink); font: 700 14px var(--f-body); line-height: 1.1;
}
.nz-stuck small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.nz-stuck.on { background: var(--accent); color: var(--ink); }
.nz-stuck.on small { color: var(--ink); }
.nz-stuck:active:not([disabled]) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.nz-tip { font-size: 12px; line-height: 1.25; color: var(--muted); text-align: center; }
.nz-side.row { flex-direction: row; align-items: stretch; gap: 10px; }
.nz-side.row .nz-stuck { align-self: stretch; flex: none; min-width: 112px; display: flex; flex-direction: column; justify-content: center; }
.nz-side.row .nz-tip { flex: 1; align-self: center; text-align: left; font-size: 13px; }
.nz-side.row .nz-call { font-size: 28px; }
.nz-tip:empty { display: none; }
.nz-call {
  flex: 1; border-radius: 16px; background: var(--accent); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
  font-family: var(--f-display); font-size: 26px; animation: nz-bob 1s ease-in-out infinite;
}
.nz-call:active:not([disabled]) { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); animation: none; }
@keyframes nz-bob { 50% { transform: scale(1.05); box-shadow: 0 5px 0 var(--ink), 0 0 26px rgba(255, 183, 3, .8); } }
.nz-ghost { position: relative; }
.nz-ghost .pcard { --w: var(--cw); position: absolute; left: 0; margin: 0; }
.pcard.nz-fly { --w: 40px; }

/* each player's deck has its own back: their color and a pattern */
.pcard.back.nz-bk {
  background: var(--pat), linear-gradient(160deg, var(--bk), color-mix(in srgb, var(--bk) 55%, #0b1033));
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35), inset 0 0 0 calc(var(--w) * .055) #fff6e0, inset 0 0 0 calc(var(--w) * .085) color-mix(in srgb, var(--bk) 60%, #0b1033);
}
.pcard.back.nz-bk::after { background: #fff6e0; color: var(--bk); box-shadow: 0 0 0 calc(var(--w) * .025) #0b1033; width: 30%; }
.nz-mb.nz-bk { background: var(--pat), var(--bk); }
.nz-bk[data-pat="0"] { --pat: repeating-linear-gradient(45deg, rgba(255, 255, 255, .22) 0 3px, transparent 3px 8px); }
.nz-bk[data-pat="1"] { --pat: radial-gradient(circle, rgba(255, 255, 255, .32) 1.6px, transparent 2.1px) 0 0 / 7px 7px; }
.nz-bk[data-pat="2"] { --pat: repeating-linear-gradient(45deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 9px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 9px); }
.nz-bk[data-pat="3"] { --pat: conic-gradient(rgba(255, 255, 255, .2) 25%, transparent 0 50%, rgba(255, 255, 255, .2) 0 75%, transparent 0) 0 0 / 10px 10px; }
.nz-bk[data-pat="4"] { --pat: repeating-linear-gradient(0deg, rgba(255, 255, 255, .22) 0 2px, transparent 2px 6px); }
.nz-bk[data-pat="5"] { --pat: repeating-linear-gradient(90deg, rgba(11, 16, 51, .22) 0 3px, transparent 3px 7px); }

/* moments */
.nz-go { position: absolute; left: 0; right: 0; top: 40%; z-index: 85; display: none; justify-content: center; pointer-events: none; }
.nz-go.on { display: flex; }
.nz-go b {
  font-family: var(--f-display); font-weight: 400; font-size: 84px; line-height: 1; color: var(--accent);
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); animation: nz-count .9s ease-out both;
}
.nz-go.go b { color: var(--good); }
@keyframes nz-count { from { transform: scale(1.8); opacity: 0; } 25% { transform: scale(1); opacity: 1; } to { transform: scale(.9); opacity: .9; } }
.nz-burst {
  position: absolute; left: 50%; top: 34%; z-index: 90; translate: -50% -50%; min-width: 220px; padding: 12px 22px 14px; text-align: center;
  background: var(--c); color: var(--ink); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink); pointer-events: none;
}
.nz-burst b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 46px; line-height: 1.05; }
.nz-burst small { display: block; font-size: 15px; font-weight: 700; }
.nz-sheet { position: absolute; left: 0; right: 0; top: 30px; z-index: 88; display: none; }
.nz-sheet.on { display: block; }
.nz-sbox { position: relative; overflow: hidden; padding: 16px 12px 14px; background: var(--bg2); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink); }
.nz-sbox::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--stripe); }
.nz-sbox h3 { margin: 4px 0 2px; text-align: center; font-family: var(--f-display); font-weight: 400; font-size: 22px; color: var(--accent); }
.nz-shead { margin: 0 0 10px; text-align: center; color: var(--muted); font-size: 14px; }
.nz-shdr, .nz-srow { display: grid; grid-template-columns: minmax(0, 1fr) 34px 46px 40px 46px; align-items: center; gap: 4px; }
.nz-shdr { font-size: 11px; font-weight: 700; color: var(--muted); padding: 0 8px 3px; text-align: right; }
.nz-srow { padding: 5px 8px; margin-bottom: 4px; border-radius: 12px; background: var(--panel); border-left: 5px solid var(--c); }
.nz-srow.me { background: var(--panel2); }
.nz-srow.gone { opacity: .5; }
.nz-sn { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; }
.nz-sn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nz-sn .avatar { font-size: 11px; flex: none; }
.nz-sv { text-align: right; font-weight: 700; color: var(--good); font-size: 14px; }
.nz-sv.neg { color: #ff8a8f; }
.nz-sv.d { color: var(--text); }
.nz-sv.d.neg { color: #ff8a8f; }
.nz-st { text-align: right; font-family: var(--f-display); font-weight: 400; font-size: 18px; color: var(--accent); }
.nz-sfoot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; }
.nz-sfoot small { color: var(--muted); font-size: 13px; text-align: center; }
.nz-sfoot .btn.small { padding: 6px 14px; font-size: 13px; min-height: 0; }
.tut-nz-felt { width: 64cqw; height: 30cqh; border-radius: 4cqw; background: radial-gradient(ellipse at 50% 40%, #1c8a62, #136247 80%); border: .7cqw solid var(--ink); }
.tut-nz-slot { width: 10cqw; aspect-ratio: 5 / 7; border-radius: 1.1cqw; box-shadow: inset 0 0 0 .5cqw rgba(255, 255, 255, .18); }
.tut-nz-badge { z-index: 6; min-width: 6cqw; height: 6cqw; padding: 0 1cqw; border-radius: 99px; display: grid; place-items: center; background: var(--accent); color: var(--ink); border: .5cqw solid var(--ink); font-weight: 800; font-size: 3.4cqw; box-sizing: border-box; }
.tut-nz-btn { z-index: 6; padding: 2cqw 6cqw; border-radius: 3cqw; background: var(--accent); color: var(--ink); border: .7cqw solid var(--ink); box-shadow: 0 1.2cqw 0 var(--ink); font-family: var(--f-display); font-size: 6.4cqw; white-space: nowrap; }
.tut-nz-btn.stuck { background: var(--panel2); color: var(--text); font-family: var(--f-body); font-weight: 700; font-size: 4.6cqw; }
.tut-nz-btn.on { translate: 0 .8cqw; box-shadow: 0 .4cqw 0 var(--ink); }
.tut-nz-btn.stuck.on { background: var(--accent); color: var(--ink); }
@media (max-width: 370px) {
  .nz-bar { font-size: 12px; }
  .nz-call { font-size: 21px; }
  .nz-stuck { font-size: 13px; padding: 5px 6px; }
  .nz-tip { font-size: 11px; }
  .nz-shdr, .nz-srow { grid-template-columns: minmax(0, 1fr) 30px 38px 36px 40px; gap: 3px; }
  .nz-sv { font-size: 13px; }
  .nz-burst b { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .nz-call, .nz-snz.call, .nz-chip.low .nz-mb, .nz-go b { animation: none; }
}
/* @end nertz */