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

.cc-wrap { flex: 1; display: grid; place-items: center; min-height: 0; }
.cc-board {
  --gap: clamp(3px, 1.2vw, 6px);
  position: relative;
  width: min(100%, calc(100dvh - 250px - var(--safe-top) - var(--safe-bottom)));
  aspect-ratio: 1;
  display: grid; gap: var(--gap); padding: var(--gap);
  border-radius: 22px;
  background: rgba(0, 0, 0, .28);
  box-shadow: 0 0 0 3px var(--turn, transparent), 0 0 28px color-mix(in srgb, var(--turn, transparent) 45%, transparent);
  transition: box-shadow .3s;
  touch-action: manipulation;
}
@supports not (height: 100dvh) {
  .cc-board { width: min(100%, calc(100vh - 250px)); }
}
.cc-cell {
  position: relative; border-radius: 22%;
  background: rgba(255, 255, 255, .07);
  transition: background .45s ease, box-shadow .3s;
}
.cc-cell.owned { background: rgba(255, 255, 255, .12); background: color-mix(in srgb, var(--c) 26%, rgba(255, 255, 255, .05)); }
.cc-board.first-move .cc-cell:not(.owned) { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--me) 55%, transparent); }
.cc-cell.last::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
}

.cc-orbs { position: absolute; inset: 0; }
.cc-orbs i, .cc-fly {
  position: absolute; width: 40%; height: 40%; border-radius: 50%;
  background: var(--c);
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .85) 0 12%, transparent 13%),
              radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000));
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
  transform: translate(-50%, -50%);
}
.cc-orbs.n1 i { left: 50%; top: 50%; width: 46%; height: 46%; }
.cc-orbs.n2 i:nth-child(1) { left: 34%; top: 50%; }
.cc-orbs.n2 i:nth-child(2) { left: 66%; top: 50%; }
.cc-orbs.n3 i:nth-child(1) { left: 50%; top: 31%; }
.cc-orbs.n3 i:nth-child(2) { left: 31%; top: 64%; }
.cc-orbs.n3 i:nth-child(3) { left: 69%; top: 64%; }
.cc-orbs.n4 i:nth-child(1) { left: 33%; top: 33%; }
.cc-orbs.n4 i:nth-child(2) { left: 67%; top: 33%; }
.cc-orbs.n4 i:nth-child(3) { left: 33%; top: 67%; }
.cc-orbs.n4 i:nth-child(4) { left: 67%; top: 67%; }
.cc-cell.warm .cc-orbs { animation: cc-spin 7s linear infinite; }
.cc-cell.crit .cc-orbs { animation: cc-jitter 1.1s ease-in-out infinite; }
.cc-cell.warm { animation: cc-breathe 2.4s ease-in-out infinite; }
.cc-cell.crit { animation: cc-wobble .7s ease-in-out infinite; box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
@keyframes cc-breathe { 50% { transform: scale(1.025); } }
@keyframes cc-wobble { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(1.06, .95); } 50% { transform: scale(.97, 1.04); } 75% { transform: scale(1.04, .97); } }
@media (prefers-reduced-motion: reduce) { .cc-cell.warm, .cc-cell.crit { animation: none; } }
.cc-cell.charging { box-shadow: 0 0 22px 2px var(--c); z-index: 1; }
@keyframes cc-spin { to { transform: rotate(360deg); } }
@keyframes cc-jitter {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: scale(1.04) rotate(-5deg); }
  75% { transform: scale(1.04) rotate(5deg); }
}
.cc-fx { position: absolute; inset: var(--gap); pointer-events: none; }
.cc-fly { width: calc(100% / var(--w) * .38); height: auto; aspect-ratio: 1; z-index: 2; }
.cc-ring {
  position: absolute; width: calc(100% / var(--w)); aspect-ratio: 1; border-radius: 50%;
  border: 4px solid var(--c); transform: translate(-50%, -50%);
}
.cc-fly.ghost { opacity: .35; filter: blur(2px); z-index: 1; }
.cc-spark {
  position: absolute; width: 7px; height: 7px; border-radius: 50%; z-index: 2;
  background: #fff; box-shadow: 0 0 8px 2px var(--c);
}
.cc-cell.shake { animation: shake .3s; }

/* tutorial props */
.tut-cc-cell { width: 17cqw; aspect-ratio: 1; border-radius: 22%; background: rgba(255, 255, 255, .1); }
.tut-cc-cell.mine { background: color-mix(in srgb, #ff5a5f 26%, rgba(255, 255, 255, .05)); }
.tut-cc-orb { width: 6cqw; aspect-ratio: 1; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .85) 0 12%, transparent 13%), radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000));
  box-shadow: 0 .5cqw 1cqw rgba(0, 0, 0, .35); }
.tut-cc-ring { width: 17cqw; aspect-ratio: 1; border-radius: 50%; border: 1cqw solid #ff5a5f; z-index: 2; }

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

/* ================= Clue Crew ================= */

.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; 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; }
.cl-stack { position: relative; width: 20px; height: 26px; flex: none; }
.cl-stack::before, .cl-stack::after {
  content: ''; position: absolute; inset: 0; border-radius: 4px; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), 0 0 0 1.5px rgba(255, 255, 255, .5);
}
.cl-stack::before { transform: rotate(-12deg) translate(-3px, 1px); opacity: .6; }
.cl-stack::after { transform: rotate(5deg); }

/* the captain's key card: a little dark card with the 5x5 map, edged in the color that goes first */
.cl-keycard {
  flex: none; width: 66px; aspect-ratio: 1; padding: 5px; border-radius: 11px; background: linear-gradient(160deg, #2c2556, #17133a);
  border: 3px solid var(--first, #fff); box-shadow: 0 0 12px color-mix(in srgb, var(--first, #fff) 50%, transparent), inset 0 2px 0 rgba(255, 255, 255, .12), 0 4px 10px rgba(0, 0, 0, .4);
  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(10, 8, 30, .7), 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: #e8e3d3; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); position: relative; }
.cl-keycard.big .cl-keygrid i { border-radius: 6px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
.cl-keygrid i.k0 { background: #ff5a5f; }
.cl-keygrid i.k1 { background: #3fa9ff; }
.cl-keygrid i.k3 { background: #0c0a1c; box-shadow: inset 0 0 0 1px #ff5a5f; }
.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); }

/* clue: a handwritten index card dropped on the table */
.cl-cluecard {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 26px; border-radius: 6px; color: #2a2340;
  background: linear-gradient(to right, transparent 16px, rgba(255, 90, 95, .5) 16px 17.5px, transparent 17.5px),
    repeating-linear-gradient(to bottom, #fffdf5 0 21px, rgba(63, 169, 255, .28) 21px 22px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .38), inset 0 5px 0 var(--c); transform: rotate(-1.5deg);
}
.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: -9px; display: flex; gap: 4px; align-items: center; background: #2a2266; padding: 3px 7px; border-radius: 99px; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.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, #ff6fb5 0 6px, #c9c2b0 6px 9px, #ffc531 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 28px; }
.cl-in {
  background: transparent; border: 0; border-bottom: 2px dashed rgba(42, 35, 64, .3); color: #2a2340; font: inherit; font-weight: 700; font-size: 28px;
  padding: 2px; outline: none; transform: skewX(-6deg); min-width: 0;
}
.cl-in::placeholder { color: rgba(42, 35, 64, .3); }
.cl-cluecard.form small { color: #6b6380; 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(42, 35, 64, .25); color: #2a2340; 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 word grid: cards that flip over */
.cl-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.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 {
  background: linear-gradient(170deg, #fdf8ea, #e7dec5); color: #2a2340; padding: 2px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16), 0 2px 4px rgba(0, 0, 0, .28); transition: box-shadow .2s;
}
.cl-front::before { content: ''; position: absolute; inset: 3px; border-radius: 7px; border: 1px solid rgba(90, 70, 30, .14); 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(90, 70, 30, .18); margin-top: 4px; }
.cl-back { transform: rotateY(180deg); background: #b9ae8f; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .28); }
.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, .5); padding-bottom: 2px; }
.cl-card.k0 .cl-back { background: radial-gradient(circle at 50% 30%, #ff8a8d, #e2484f); }
.cl-card.k1 .cl-back { background: radial-gradient(circle at 50% 30%, #7cc6ff, #2a8de0); }
.cl-card.k2 .cl-back { background: radial-gradient(circle at 50% 30%, #e3d8ba, #a89c7a); }
.cl-card.k3 .cl-back { background: radial-gradient(circle at 50% 35%, #3b3550, #0c0a1c); 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; }
.cl-spark { animation: cl-spark .25s steps(2) infinite; transform-origin: 40px 8px; }
@keyframes cl-spark { 50% { transform: scale(.7) rotate(20deg); } }
/* captains (and everyone at the end) see the key as a colored edge */
.cl-grid.spy .cl-card.k0:not(.shown) .cl-front { box-shadow: inset 0 0 0 4px #ff5a5f, 0 2px 4px rgba(0, 0, 0, .28); }
.cl-grid.spy .cl-card.k1:not(.shown) .cl-front { box-shadow: inset 0 0 0 4px #3fa9ff, 0 2px 4px rgba(0, 0, 0, .28); }
.cl-grid.spy .cl-card.k3:not(.shown) .cl-front { background: linear-gradient(170deg, #4a4366, #2c2647); color: #fff; box-shadow: inset 0 0 0 2px #ff5a5f; }
/* fingers on cards: 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 4px rgba(0, 0, 0, .28); }
.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, 90, 95, .55), rgba(12, 10, 28, .88) 70%); }
.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 5cqw; 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-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; }

/* ================= 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: #ffffff; --sq-dark: #e2e7ec; --coord: #9aa3ad; --sel: rgba(110, 150, 205, .32); --last: rgba(110, 150, 205, .18);
  --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: 14px; padding: 5px; background: rgba(255, 255, 255, .12); 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: 9px; 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 { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(140deg, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 0) 38%); }
.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.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-size: 9.5px; font-weight: 600; 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: #fff; } .tut-eq-sq.d { background: #e2e7ec; }
.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: 34px; padding: 3px 10px; border-radius: 14px; background: var(--panel); transition: box-shadow .2s; }
.eq-player.to-move { box-shadow: 0 0 0 2px var(--c); }
.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; color: var(--muted); background: rgba(255, 255, 255, .08); 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: rgba(0, 0, 0, .25); color: var(--muted); }
.eq-player .clock.run { background: #fff; color: #17133a; }
.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; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .25s; min-width: 0; }
.eq-side.ready { box-shadow: inset 0 0 0 2px var(--good); }
.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, 214, 90, .16); color: #ffe7a3; 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(90, 212, 90, .14); box-shadow: inset 0 0 0 1px rgba(90, 212, 90, .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); }
.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: rgba(255, 255, 255, .07); 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: rgba(255, 214, 90, .18); box-shadow: inset 0 0 0 1.5px #ffd65a; color: #fff3c4; }
.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: rgba(255, 255, 255, .1); 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(90, 212, 90, .2); color: var(--good); opacity: 1; }
.eq-auto { text-align: center; min-height: 1em; }
.eq-count { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(12, 10, 35, .55); backdrop-filter: blur(3px); }
.eq-count[hidden] { display: none; }
.eq-count .box { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 34px; border-radius: 24px; background: var(--panel); box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.eq-count small { color: var(--muted); font-size: 15px; }
.eq-count b { font-size: 72px; line-height: 1; font-variant-numeric: tabular-nums; color: #ffd65a; }
.eq-count b.pop { animation: eq-countpop .5s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes eq-countpop { from { transform: scale(1.6); 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, 214, 90, .16); color: #ffe7a3; }
.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, 214, 90, .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: #ffc531; 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, 197, 49, .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, 197, 49, .95) 0 7%, transparent 8%); }
.eq .sq.peeked.sel::before { background: radial-gradient(circle at 84% 16%, rgba(255, 197, 49, .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: linear-gradient(160deg, #ffd65a, #f0a81c); color: #3a2600; }
.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: #2a2350; 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.shake 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(30, 24, 70, .92); 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(110, 150, 205, .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: #ffd65a; } .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: #ffc531; box-shadow: 0 0 2cqw rgba(255, 197, 49, .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, 214, 90, .2); color: #ffe7a3; font-weight: 700; font-size: 4.2cqw; white-space: nowrap; z-index: 5; }
.tut-eq-chip.off { background: rgba(255, 255, 255, .08); color: #b9b3e0; }
.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 #5ad45a; }
.tut-eq-text { color: #fff; font-weight: 700; font-size: 4.6cqw; white-space: nowrap; z-index: 5; }
.tut-eq-big { color: #ffd65a; font-weight: 800; font-size: 18cqw; z-index: 6; }
.tut-eq-btn { padding: 1.6cqw 4cqw; border-radius: 3cqw; background: #ffd65a; color: #3a2600; 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 */