/* Thunderlark Classics - "juice" layer: depth, gradients, textures, motion, accessibility.
   Loaded after style.css and overrides it. Everything animated respects prefers-reduced-motion and Settings > Effects. */
:root {
  --lift: 0 1px 0 rgba(255,255,255,.7) inset, 0 8px 22px rgba(20,33,61,.12), 0 2px 5px rgba(20,33,61,.08);
  --card-grad: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, #fff), var(--card));
  --ease-out: cubic-bezier(.2, .9, .25, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --accent-hi: color-mix(in srgb, var(--accent) 82%, #fff);
  --accent-lo: color-mix(in srgb, var(--accent) 80%, #000);
  --gc: var(--accent);
}
:root[data-theme="dark"] { --lift: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 22px rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.3); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --lift: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 22px rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.3); } }
html { scrollbar-gutter: stable; }
body {
  background:
    radial-gradient(900px 500px at 12% -8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
    radial-gradient(800px 520px at 100% 8%, color-mix(in srgb, var(--p1) 10%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%) fixed;
  -webkit-touch-callout: none;
}
.game, .game button, .ttt-board, .c4-board, .ck-board, .fs-grid, .simon { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.game button, .game .die { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--card) 80%, transparent); border-radius: inherit; }
[aria-disabled="true"], .locked { cursor: default; }
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 90; pointer-events: none; }
.small-note { font-size: .8rem; margin: 6px 0 0; }

/* ---------- header ---------- */
.topbar { grid-template-columns: var(--tap) 1fr auto var(--tap); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.topbar h1 { font-weight: 850; letter-spacing: -.01em; }
.icon-btn { background: var(--card-grad); box-shadow: var(--lift); font-weight: 900; font-size: 1.25rem; position: relative; overflow: hidden; transition: transform .12s var(--spring), box-shadow .12s; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { transform: translateY(-1px); } }
.icon-btn:active { transform: scale(.92); box-shadow: 0 1px 2px rgba(0,0,0,.2) inset; }
#helpBtn { color: var(--accent-text); font-size: 1.35rem; }
.brand svg { filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }

/* ---------- buttons ---------- */
.btn { position: relative; overflow: hidden; background: var(--card-grad); box-shadow: 0 3px 0 color-mix(in srgb, var(--line) 85%, #000), 0 6px 14px rgba(20,33,61,.08); transition: transform .1s var(--spring), box-shadow .1s, filter .15s; }
.btn:active:not(:disabled), .btn.pressed { transform: translateY(3px); box-shadow: 0 0 0 color-mix(in srgb, var(--line) 85%, #000), 0 1px 3px rgba(20,33,61,.15) inset; }
.btn.primary { background: linear-gradient(180deg, var(--accent-hi), var(--accent) 55%, var(--accent-lo)); border-color: var(--accent-lo); text-shadow: 0 1px 1px rgba(0,0,0,.25);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 55%, #000), 0 8px 18px color-mix(in srgb, var(--accent) 35%, transparent), 0 1px 0 rgba(255,255,255,.4) inset; }
.btn.primary:active:not(:disabled) { box-shadow: 0 0 0 transparent, 0 2px 4px rgba(0,0,0,.25) inset; }
.btn.primary.big { font-size: 1.15rem; letter-spacing: .01em; animation: breathe 2.8s ease-in-out infinite; }
@keyframes breathe { 50% { filter: brightness(1.08); } }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0); animation: ripple .55s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
.seg-btn { background: var(--card-grad); position: relative; overflow: hidden; transition: transform .1s var(--spring), background .15s, box-shadow .15s; }
.seg-btn:active { transform: scale(.96); }
.seg-btn.on { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.35); }
.seg-btn.on::before { content: "✓ "; font-weight: 900; }
.panel { background: var(--card-grad); box-shadow: var(--lift); border-radius: 20px; }
.setup h2 { font-size: 1.5rem; }
.rec-line { font-size: .85rem; margin: 10px 0 0; }
input[type="range"].range { width: 100%; accent-color: var(--accent-text); height: 32px; }
.range-row { display: flex; align-items: center; gap: 12px; } .range-row output { min-width: 3.2em; font-weight: 800; text-align: right; }

/* ---------- page transitions ---------- */
main#view.page-in { animation: pageFwd .34s var(--ease-out) backwards; }
main#view.page-in[data-dir="back"] { animation-name: pageBack; }
main#view.page-in[data-dir="same"] { animation-name: pageFade; }
@keyframes pageFwd { from { opacity: 0; transform: translateX(28px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes pageBack { from { opacity: 0; transform: translateX(-28px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- hub ---------- */
.hero { padding: 14px 0 18px; }
.hero h2 { font-size: 1.9rem; font-weight: 900; letter-spacing: -.02em; background: linear-gradient(90deg, var(--accent-text), var(--p1)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.game-card { background: var(--card-grad); box-shadow: var(--lift); border: 1px solid color-mix(in srgb, var(--gc) 25%, var(--line)); overflow: hidden; isolation: isolate;
  animation: cardIn .5s var(--spring) both; animation-delay: calc(var(--i, 0) * 45ms); transition: transform .18s var(--spring), box-shadow .18s; }
.game-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--gc) 22%, transparent), transparent 65%); }
.game-card::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: var(--gc); opacity: .8; }
@media (hover: hover) and (pointer: fine) { .game-card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 16px 30px color-mix(in srgb, var(--gc) 28%, transparent), var(--lift); } }
.game-card:active { transform: scale(.96); }
.game-card .gicon-wrap { display: block; width: 68px; height: 68px; transition: transform .25s var(--spring); filter: drop-shadow(0 6px 6px rgba(0,0,0,.25)); }
.game-card .gicon { width: 100%; height: 100%; }
@media (hover: hover) and (pointer: fine) { .game-card:hover .gicon-wrap { transform: scale(1.1) rotate(-4deg); } }
.game-card .gname { font-size: 1rem; }
.game-card .gdesc { color: var(--muted); }
@keyframes cardIn { from { opacity: 0; transform: translateY(22px) scale(.92); } to { opacity: 1; transform: none; } }
.game-card[data-game="ttt"] { --gc: #2563eb; } .game-card[data-game="utt"] { --gc: #7c3aed; } .game-card[data-game="c4"] { --gc: #1d4ed8; }
.game-card[data-game="checkers"] { --gc: #b45309; } .game-card[data-game="dab"] { --gc: #059669; } .game-card[data-game="memory"] { --gc: #ea580c; }
.game-card[data-game="simon"] { --gc: #dc2626; } .game-card[data-game="fleet"] { --gc: #0284c7; } .game-card[data-game="dice"] { --gc: #db2777; }
.unlock-slot { background: color-mix(in srgb, var(--card) 60%, transparent); }

/* ---------- dialogs ---------- */
.overlay { animation: fadeIn .2s ease-out; }
@keyframes fadeIn { from { opacity: 0; } }
.dialog { background: var(--card-grad); border: 1px solid color-mix(in srgb, var(--line) 70%, #fff); box-shadow: 0 24px 60px rgba(0,0,0,.45), var(--lift); }
.pop { animation: pop .36s var(--spring); }
.dialog-emoji { filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
.dialog.party .dialog-emoji { animation: emojiBounce 1s var(--spring) .1s both; }
@keyframes emojiBounce { 0% { transform: scale(.2) rotate(-30deg); } 60% { transform: scale(1.3) rotate(8deg); } 100% { transform: none; } }
.dialog h2 { font-size: 1.5rem; }
.help-dialog { text-align: left; max-height: 86vh; overflow: auto; width: min(94vw, 460px); }
.help-dialog h2 { text-align: center; }
.help-steps { padding-left: 1.3em; margin: 8px 0 12px; } .help-steps li { margin-bottom: 8px; line-height: 1.4; }
.help-tips { background: var(--accent-soft); border-radius: 14px; padding: 10px 14px; font-size: .92rem; } .help-tips ul { margin: 6px 0 0; padding-left: 1.2em; }
.cover { background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 80%, #fff), #0f172a 70%); }

/* ---------- shared widgets ---------- */
.status { transition: color .2s; }
.chip { box-shadow: 0 2px 0 rgba(0,0,0,.25), inset 0 2px 2px rgba(255,255,255,.4); }
.scoreboard .score { background: var(--card-grad); box-shadow: var(--lift); transition: transform .2s var(--spring); }
.score.bump { animation: bump .5s var(--spring); }
@keyframes bump { 40% { transform: scale(1.18); } }
.toolbar .btn { min-width: 96px; }
.toolbar .btn[aria-disabled="true"], .btn:disabled { opacity: .5; box-shadow: none; }
.turn-chip { display: inline-flex; align-items: center; gap: 8px; }
.shape-mark { display: inline-block; width: 1em; text-align: center; font-weight: 900; }

@media (prefers-reduced-motion: reduce) {
  .game-card, main#view.page-in, .btn.primary.big, .overlay, .pop { animation: none !important; }
}
:root[data-fx="reduced"] *, :root[data-fx="reduced"] *::before, :root[data-fx="reduced"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
:root[data-fx="reduced"] .ripple, :root[data-fx="reduced"] .fx-canvas { display: none; }

/* ---------- strike lines (winning line highlights) ---------- */
.strike-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.strike-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: strike .55s .1s var(--ease-out) forwards; }
.strike-line.shadow { transform: translateY(3px); filter: blur(2px); }
@keyframes strike { to { stroke-dashoffset: 0; } }

/* ---------- Tic Tac Toe ---------- */
.ttt-board { position: relative; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 14%, var(--card)), var(--card)); box-shadow: var(--lift); gap: 10px; padding: 12px; border-radius: 26px; }
.ttt-cell { background: linear-gradient(180deg, color-mix(in srgb, var(--card2) 85%, #fff), var(--card2)); box-shadow: 0 4px 0 color-mix(in srgb, var(--line) 90%, #000), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .12s var(--spring), background .15s, box-shadow .12s; position: relative; border-radius: 16px; }
@media (hover: hover) and (pointer: fine) { .ttt-cell:not(.locked):hover { background: var(--accent-soft); transform: translateY(-2px); } }
.ttt-cell:not(.locked):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.ttt-cell.locked:not([data-v=""]) { box-shadow: 0 2px 0 var(--line); }
.ttt-cell:disabled { opacity: 1; }
.ttt-mark { width: 78%; height: 78%; overflow: visible; filter: drop-shadow(0 3px 2px rgba(0,0,0,.3)); }
.ttt-mark path, .ttt-mark circle { fill: none; stroke-width: 13; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: markDraw .38s var(--ease-out) forwards; }
.ttt-mark path:nth-child(2) { animation-delay: .14s; }
.ttt-mark.X path { stroke: var(--p1); } .ttt-mark.O circle { stroke: var(--p2); }
@keyframes markDraw { to { stroke-dashoffset: 0; } }
.ttt-cell.win { animation: none; background: color-mix(in srgb, #fde68a 55%, var(--card2)); }
:root[data-theme="dark"] .ttt-cell.win { background: #5b4a12; }
.ttt-cell.win .ttt-mark { animation: winBounce .7s var(--spring) .3s 2; }
@keyframes winBounce { 50% { transform: scale(1.18) rotate(-4deg); } }

/* ---------- Ultimate Tic Tac Toe: overview + zoom + mini map ---------- */
.utt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: min(94vw, 520px); min-height: 96px; }
.utt-note { flex: 1; font-size: .92rem; line-height: 1.35; min-width: 0; }
.utt-note b { font-size: 1rem; } .utt-note .small { font-size: .8rem; color: var(--muted); display: block; }
.any-pill { display: inline-block; background: linear-gradient(180deg, #fde047, #f59e0b); color: #422006; font-weight: 900; padding: 3px 12px; border-radius: 99px; box-shadow: 0 2px 0 #b45309; animation: anyPulse 1.2s ease-in-out infinite; }
@keyframes anyPulse { 50% { transform: scale(1.08); } }
.utt-mini { flex: none; width: 92px; height: 92px; padding: 5px; border-radius: 14px; border: 2px solid var(--accent-text); background: var(--card-grad); box-shadow: var(--lift); display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; transition: transform .15s var(--spring), opacity .2s; cursor: pointer; }
.utt-mini.off { visibility: hidden; opacity: 0; transform: scale(.7); }
.utt-mini:active { transform: scale(.94); }
.mm-b { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 1px; padding: 2px; border-radius: 4px; background: var(--card2); border: 1.5px solid transparent; }
.mm-b i { display: block; width: 100%; height: 100%; border-radius: 1px; background: color-mix(in srgb, var(--line) 55%, transparent); }
.mm-b i.v1 { background: var(--p1); border-radius: 1px; transform: scale(.9) rotate(45deg); } .mm-b i.v2 { background: var(--p2); border-radius: 50%; }
.mm-b i.last { box-shadow: 0 0 0 1.5px #facc15; }
.mm-b em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 1.15rem; line-height: 1; border-radius: 3px; pointer-events: none; }
.mm-b.won-1 em { background: color-mix(in srgb, var(--p1) 80%, #fff); color: #fff; } .mm-b.won-2 em { background: color-mix(in srgb, var(--p2) 80%, #fff); color: #fff; }
.mm-b.drawn em { background: color-mix(in srgb, var(--muted) 55%, var(--card)); color: #fff; }
.mm-b.legal { border-color: #f59e0b; animation: legalBlink 1.1s ease-in-out infinite; background: color-mix(in srgb, #fde047 35%, var(--card2)); }
@keyframes legalBlink { 50% { box-shadow: 0 0 0 2px rgba(245, 158, 11, .6); } }
.mm-b.here { outline: 3px solid var(--accent-text); outline-offset: 1px; z-index: 2; transform: scale(1.08); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.mm-b.line { box-shadow: 0 0 0 2px #facc15; }

.utt-stage { position: relative; width: min(94vw, 520px); aspect-ratio: 1; }
.utt-overview { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; padding: 9px; border-radius: 24px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 16%, var(--card)), var(--card)); border: 1px solid var(--line); box-shadow: var(--lift); transition: opacity .3s, filter .3s, transform .3s var(--ease-out); }
.utt-overview.dim { opacity: .35; filter: blur(1.5px) saturate(.7); transform: scale(.97); }
.utt-sub { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; padding: 6px; border-radius: 16px; border: 3px solid transparent; background: linear-gradient(180deg, color-mix(in srgb, var(--card2) 85%, #fff), var(--card2)); box-shadow: 0 3px 0 color-mix(in srgb, var(--line) 90%, #000); cursor: pointer; min-width: 0; min-height: 0; transition: transform .15s var(--spring), border-color .2s, background .2s; }
.utt-sub:active { transform: translateY(2px) scale(.97); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .utt-sub:hover { transform: translateY(-2px); } }
.utt-sub .mc { display: grid; place-items: center; font-size: clamp(.7rem, 3.6vw, 1.3rem); font-weight: 900; line-height: 1; min-width: 0; border-radius: 4px; background: color-mix(in srgb, var(--card) 70%, transparent); }
.utt-sub .mc.v1 { color: var(--p1); } .utt-sub .mc.v2 { color: var(--p2); }
.utt-sub .mc.last { background: #fde047; box-shadow: 0 0 0 2px #f59e0b; animation: lastPing 1s ease-out 2; color: #7c2d12; }
@keyframes lastPing { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
.utt-sub.legal { border-color: #f59e0b; background: color-mix(in srgb, #fde047 24%, var(--card2)); animation: subGlow 1.3s ease-in-out infinite; }
.utt-sub.anywhere { border-style: dashed; }
@keyframes subGlow { 50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, .35), 0 3px 0 #b45309; } }
.utt-sub .big { position: absolute; inset: 3px; display: grid; place-items: center; font-size: clamp(2.6rem, 17vw, 5.2rem); font-weight: 900; border-radius: 12px; pointer-events: none; opacity: 0; }
.utt-sub.won .big, .utt-sub.drawn .big { opacity: 1; }
.utt-sub.won-1 .big { background: color-mix(in srgb, var(--p1) 24%, var(--card)); color: var(--p1); } .utt-sub.won-2 .big { background: color-mix(in srgb, var(--p2) 24%, var(--card)); color: var(--p2); }
.utt-sub.drawn .big { background: color-mix(in srgb, var(--muted) 18%, var(--card)); color: var(--muted); font-size: 2.2rem; }
.big.pop-in { animation: bigPop .55s var(--spring); } @keyframes bigPop { from { transform: scale(2.4) rotate(-12deg); opacity: 0; } }
.utt-sub.line { box-shadow: 0 0 0 3px #facc15, 0 0 18px #facc15; }
.utt-sub.flash { animation: flashB .7s ease-out 2; } @keyframes flashB { 0% { box-shadow: 0 0 0 0 rgba(250,204,21,.9); } 100% { box-shadow: 0 0 0 14px rgba(250,204,21,0); } }
.utt-sub.lastboard:not(.won):not(.drawn) { border-color: color-mix(in srgb, #facc15 70%, transparent); }

.utt-zoom { position: absolute; inset: 0; z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; padding: 12px; border-radius: 24px; transform-origin: 0 0; visibility: hidden; pointer-events: none;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, var(--card)), var(--card)); border: 3px solid var(--accent-text); box-shadow: 0 18px 40px rgba(0,0,0,.35), var(--lift); }
.utt-zoom.on { visibility: visible; pointer-events: auto; }
.utt-zoom.legal { border-color: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .35), 0 18px 40px rgba(0,0,0,.35); }
.utt-zcell { position: relative; display: grid; place-items: center; border: 0; padding: 0; border-radius: 18px; font-size: clamp(2.6rem, 18vw, 5rem); font-weight: 900; line-height: 1; min-width: 0; min-height: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--card2) 80%, #fff), var(--card2)); box-shadow: 0 5px 0 color-mix(in srgb, var(--line) 90%, #000), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .12s var(--spring), background .15s, box-shadow .12s; }
.utt-zcell:not(.locked) { background: color-mix(in srgb, #fde047 22%, var(--card2)); cursor: pointer; }
.utt-zcell:not(.locked):active { transform: translateY(4px); box-shadow: 0 1px 0 var(--line); }
@media (hover: hover) and (pointer: fine) { .utt-zcell:not(.locked):hover { transform: translateY(-2px); } }
.utt-zcell.last { box-shadow: 0 0 0 4px #facc15, 0 5px 0 color-mix(in srgb, var(--line) 90%, #000); }
.zmark { animation: zIn .35s var(--spring); filter: drop-shadow(0 3px 2px rgba(0,0,0,.3)); } .zmark.z1 { color: var(--p1); } .zmark.z2 { color: var(--p2); }
@keyframes zIn { from { transform: scale(.2) rotate(-40deg); opacity: 0; } }
.zbig { position: absolute; inset: 10px; z-index: 3; display: grid; place-items: center; font-size: clamp(8rem, 62vw, 15rem); font-weight: 900; border-radius: 18px; pointer-events: none; opacity: 0; transition: opacity .3s; }
.zbig.show { opacity: .88; } .zbig.z1 { background: color-mix(in srgb, var(--p1) 22%, var(--card)); color: var(--p1); } .zbig.z2 { background: color-mix(in srgb, var(--p2) 22%, var(--card)); color: var(--p2); } .zbig.z3 { background: color-mix(in srgb, var(--muted) 20%, var(--card)); color: var(--muted); }
#helpBtn[hidden] { display: none !important; }
.topbar { gap: 6px; }
.topbar h1 { font-size: 1.08rem; }
.brand { gap: 6px; } .brand svg { width: 26px; height: 26px; }
@media (min-width: 700px) { .topbar h1 { font-size: 1.3rem; } }

/* ---------- Connect Four ---------- */
.c4-wrap { --cw: min(94vw, 480px); width: var(--cw); margin-top: calc(var(--cw) / 7 - 6px); position: relative; }
.c4-frame { position: relative; padding: 12px; border-radius: 26px; background: linear-gradient(160deg, color-mix(in srgb, var(--board) 85%, #fff), var(--board) 45%, color-mix(in srgb, var(--board) 75%, #000)); box-shadow: 0 14px 28px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.4), inset 0 -4px 0 rgba(0,0,0,.25); }
.c4-frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4; background: linear-gradient(115deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 62%, rgba(255,255,255,.14) 78%, rgba(255,255,255,0) 100%); }
.c4-feet { position: absolute; left: 10%; right: 10%; bottom: -12px; height: 16px; border-radius: 0 0 14px 14px; background: linear-gradient(#0f172a55, #0f172a00); z-index: -1; filter: blur(4px); }
.c4-board { position: relative; aspect-ratio: 7 / 6; border-radius: 10px; --hole: #0b1226; }
.c4-hole-bg { position: absolute; inset: 0; background: var(--hole); border-radius: 8px; }
.c4-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); }
.c4-front { z-index: 2; pointer-events: none; }
.c4-front i { display: block; background: radial-gradient(circle at 50% 50%, transparent 0 39%, rgba(0,0,0,.45) 40.5%, rgba(255,255,255,.28) 43%, var(--board) 44.5%); }
.c4-front i::after { content: none; }
.c4-discs { z-index: 1; overflow: visible; }
.c4-disc { position: relative; place-self: center; width: 82%; aspect-ratio: 1; border-radius: 50%; will-change: transform; }
.c4-disc::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 3px solid rgba(255,255,255,.4); box-shadow: inset 0 2px 3px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.35); }
.c4-disc::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%, -50%); }
.c4-disc.p1 { background: radial-gradient(circle at 34% 28%, #fecaca 0, #f87171 22%, #dc2626 62%, #991b1b 100%); box-shadow: inset 0 -5px 8px rgba(0,0,0,.35); }
.c4-disc.p2 { background: radial-gradient(circle at 34% 28%, #fef9c3 0, #fde047 24%, #eab308 62%, #a16207 100%); box-shadow: inset 0 -5px 8px rgba(0,0,0,.3); }
.c4-disc.p1::after { background: rgba(255,255,255,.92); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }          /* red = diamond */
.c4-disc.p2::after { border-radius: 50%; border: 4px solid rgba(60,30,0,.75); background: transparent; }                                                        /* yellow = ring */
.c4-disc.drop { animation: c4Drop calc(.35s + var(--r) * .07s) cubic-bezier(.55, 0, .85, .45) both, c4Squash .3s calc(.22s + var(--r) * .045s) ease-out; --fall: calc((var(--r) + 1.6) * -124%); }
@keyframes c4Drop { 0% { transform: translateY(var(--fall)); } 64% { transform: translateY(0); animation-timing-function: ease-out; } 77% { transform: translateY(-9%); animation-timing-function: ease-in; } 88% { transform: translateY(0); } 94% { transform: translateY(-2.5%); } 100% { transform: translateY(0); } }
@keyframes c4Squash { 0% { scale: 1 1; } 30% { scale: 1.07 .93; } 100% { scale: 1 1; } }
.c4-disc.last:not(.win) { outline: 3px solid rgba(255,255,255,.0); }
.c4-disc.win { animation: c4Win .9s ease-in-out infinite; z-index: 3; filter: brightness(1.25) drop-shadow(0 0 8px #fff); }
@keyframes c4Win { 50% { transform: scale(1.12); } }
.c4-cols { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: repeat(7, 1fr); }
.c4-col { position: relative; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 12px; min-height: var(--tap); }
@media (hover: hover) and (pointer: fine) { .c4-col:not(.locked):hover { background: rgba(255,255,255,.14); } }
.c4-col.locked { cursor: default; }
.c4-col .ghost { position: absolute; left: 9%; right: 9%; top: -88%; aspect-ratio: 1; border-radius: 50%; opacity: 0; transition: opacity .15s, transform .15s; transform: translateY(8px) scale(.9); pointer-events: none; }
.c4-board[data-turn="1"] .ghost { background: radial-gradient(circle at 34% 28%, #fecaca, #dc2626); } .c4-board[data-turn="2"] .ghost { background: radial-gradient(circle at 34% 28%, #fef9c3, #eab308); }
@media (hover: hover) and (pointer: fine) { .c4-col:not(.locked):hover .ghost { opacity: .75; transform: none; } }
.c4-col:not(.locked):focus-visible .ghost { opacity: .75; transform: none; }
.c4-col:focus-visible { outline: 4px solid #fff; outline-offset: -4px; box-shadow: none; background: rgba(255,255,255,.18); }
.c4-legend .chip.p1 { background: #dc2626; } .c4-legend .chip.p2 { background: #eab308; color: #3b2300; }

/* ---------- Checkers: wood board, embossed pieces ---------- */
.ck-frame { width: min(94vw, 520px); padding: 12px; border-radius: 18px; background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.012 .5' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 .22  0 0 0 0 .11  0 0 0 0 .03  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(135deg, #a8672f, #6b3b17 55%, #8a4f22);
  box-shadow: 0 16px 30px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.35); }
.ck-board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; border: 3px solid #3d2210; box-shadow: inset 0 0 14px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.2); }
.ck-sq { position: relative; border: 0; padding: 0; display: grid; place-items: center; border-radius: 0; min-width: 0; min-height: 0; cursor: default; }
.ck-sq.light { background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.02 .55' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .38  0 0 0 0 .15  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(135deg, #f6e4bd, #e9cf9c); }
.ck-sq.dark { background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.015 .6' numOctaves='3' seed='11'/><feColorMatrix values='0 0 0 0 .15  0 0 0 0 .06  0 0 0 0 .02  0 0 0 .75 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(135deg, #8a5430, #6a3b1c); box-shadow: inset 0 0 8px rgba(0,0,0,.35); }
.ck-sq:not(.locked) { cursor: pointer; }
.ck-sq.hl::after { content: ""; position: absolute; width: 34%; height: 34%; border-radius: 50%; background: radial-gradient(circle, #fde68a, #f59e0b); box-shadow: 0 0 0 4px rgba(250,204,21,.35), 0 0 14px #facc15; animation: hlPulse 1s ease-in-out infinite; }
@keyframes hlPulse { 50% { transform: scale(1.22); } }
.ck-sq.sel { box-shadow: inset 0 0 0 4px #facc15, inset 0 0 18px rgba(250,204,21,.7); }
.ck-sq.movable::before { content: ""; position: absolute; inset: 4px; border: 3px dashed rgba(250,204,21,.9); border-radius: 50%; animation: spinSlow 8s linear infinite; pointer-events: none; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.ck-sq.last { box-shadow: inset 0 0 0 3px rgba(74,222,128,.9), inset 0 0 12px rgba(74,222,128,.5); }
.ck-sq:focus-visible { outline: 4px solid #fff; outline-offset: -4px; box-shadow: inset 0 0 0 7px #1d4ed8; }
.ck-piece { position: relative; width: 82%; height: 82%; border-radius: 50%; display: grid; place-items: center; z-index: 2; transition: transform .15s var(--spring);
  box-shadow: 0 5px 0 rgba(0,0,0,.45), 0 8px 10px rgba(0,0,0,.35), inset 0 -4px 6px rgba(0,0,0,.3), inset 0 3px 3px rgba(255,255,255,.45); }
.ck-sq.sel .ck-piece { transform: translateY(-5px) scale(1.08); box-shadow: 0 10px 0 rgba(0,0,0,.3), 0 14px 16px rgba(0,0,0,.4), 0 0 0 3px #facc15, inset 0 -4px 6px rgba(0,0,0,.3), inset 0 3px 3px rgba(255,255,255,.45); }
.ck-piece.r { background: radial-gradient(circle at 34% 28%, #fecaca 0, #ef4444 28%, #b91c1c 70%, #7f1d1d); }
.ck-piece.b { background: radial-gradient(circle at 34% 28%, #bfdbfe 0, #3b82f6 28%, #1d4ed8 70%, #1e3a8a); }
.ck-piece::before { content: ""; position: absolute; inset: 11%; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); box-shadow: inset 0 0 0 3px rgba(0,0,0,.12), 0 0 0 2px rgba(0,0,0,.15); }
.ck-piece::after { content: ""; position: absolute; width: 26%; height: 26%; background: rgba(255,255,255,.88); filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.ck-piece.r::after { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }                  /* red = diamond */
.ck-piece.b::after { border-radius: 50%; background: transparent; border: 3px solid rgba(255,255,255,.9); width: 24%; height: 24%; } /* blue = ring */
.ck-piece.k::after { display: none; }
.ck-piece .crown { position: relative; z-index: 3; font-size: clamp(1rem, 6.5vw, 2rem); line-height: 1; color: #fef08a; text-shadow: 0 1px 0 #92400e, 0 0 8px rgba(253,224,71,.9), 0 2px 3px rgba(0,0,0,.6); animation: crownIn .5s var(--spring); }
@keyframes crownIn { from { transform: translateY(-14px) scale(.2); opacity: 0; } }
.ck-piece.k { box-shadow: 0 5px 0 rgba(0,0,0,.45), 0 8px 10px rgba(0,0,0,.35), 0 0 0 3px #fde047, inset 0 -4px 6px rgba(0,0,0,.3), inset 0 3px 3px rgba(255,255,255,.45); }
.ck-piece.ghost { position: absolute; pointer-events: none; z-index: 4; }
.ck-counts { display: flex; gap: 16px; justify-content: center; font-weight: 700; font-size: .9rem; }
.ck-count { display: inline-flex; align-items: center; gap: 6px; }
.ck-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; box-shadow: inset 0 2px 2px rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.4); }
.ck-dot.r { background: radial-gradient(circle at 35% 30%, #fecaca, #dc2626); } .ck-dot.b { background: radial-gradient(circle at 35% 30%, #bfdbfe, #1d4ed8); }

/* ---------- Dots and Boxes ---------- */
.dab-wrap { width: min(94vw, 520px); }
.dab-svg { width: 100%; height: auto; display: block; border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--lift);
  background:
    linear-gradient(color-mix(in srgb, var(--line) 35%, transparent) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, var(--card)), var(--card)); }
.dab-edge-hit { stroke: transparent; stroke-linecap: butt; cursor: pointer; outline: none; }
.dab-edge-vis { stroke: color-mix(in srgb, var(--line) 90%, var(--text) 10%); stroke-linecap: round; pointer-events: none; transition: stroke .15s, stroke-width .15s; stroke-dasharray: 6 14; }
@media (hover: hover) and (pointer: fine) { .dab-edge-hit:hover + .dab-edge-vis { stroke: var(--accent-text); stroke-dasharray: none; stroke-width: 14; } }
.dab-edge-hit:focus-visible + .dab-edge-vis { stroke: var(--accent-text); stroke-dasharray: none; stroke-width: 14; }
.dab-edge-vis.p1, .dab-edge-vis.p2 { stroke-dasharray: 1; stroke-dashoffset: 0; stroke-width: 12; }
.dab-edge-vis.p1 { stroke: var(--p1); } .dab-edge-vis.p2 { stroke: var(--p2); }
.dab-edge-vis.new { animation: lineDraw .28s var(--ease-out); }
@keyframes lineDraw { from { stroke-dashoffset: 1; stroke-width: 6; } to { stroke-dashoffset: 0; } }
.dab-edge-vis.last { filter: drop-shadow(0 0 4px #facc15); }
.dab-dot { filter: drop-shadow(0 2px 1.5px rgba(0,0,0,.35)); pointer-events: none; }
.dab-box { fill: transparent; }
.dab-box.p1 { fill: color-mix(in srgb, var(--p1) 38%, var(--card)); } .dab-box.p2 { fill: color-mix(in srgb, var(--p2) 38%, var(--card)); }
.dab-box-pat { fill: transparent; pointer-events: none; }
.dab-box-pat.p1 { fill: url(#dabHatch); opacity: .8; } .dab-box-pat.p2 { fill: url(#dabDots); opacity: .8; }  /* patterns, not just colours */
.dab-box.new, .dab-box-pat.new { animation: boxFill .5s var(--spring); transform-box: fill-box; transform-origin: center; }
@keyframes boxFill { from { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.1); } }
.dab-box-t { font-weight: 900; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: var(--card); stroke-width: 5px; pointer-events: none; }
.dab-box-t.p1 { fill: var(--p1); } .dab-box-t.p2 { fill: var(--p2); }
.dab-box-t.new { animation: boxFill .6s .1s var(--spring) both; transform-box: fill-box; transform-origin: center; }
.dab-box.cheer { animation: cheer .6s ease-in-out 3; transform-box: fill-box; transform-origin: center; }
@keyframes cheer { 50% { transform: scale(1.12); filter: brightness(1.3); } }
.score.x-mark .score-label { color: var(--p1); } .score.o-mark .score-label { color: var(--p2); }

/* ---------- Memory Match ---------- */
.mm-grid { display: grid; gap: 9px; width: min(94vw, 520px); }
.mm-card { position: relative; aspect-ratio: 1 / 1.08; border: 0; padding: 0; background: transparent; perspective: 700px; cursor: pointer; border-radius: 14px; }
.mm-card.locked { cursor: default; }
.mm-card.deal { animation: dealIn .5s var(--spring) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes dealIn { from { opacity: 0; transform: translateY(-40px) rotate(-12deg) scale(.6); } }
.mm-inner { position: absolute; inset: 0; transition: transform .5s var(--spring); transform-style: preserve-3d; }
.mm-card:active:not(.locked) .mm-inner { transform: scale(.95); }
.mm-card.up .mm-inner, .mm-card.matched .mm-inner { transform: rotateY(180deg); }
.mm-card.up:active .mm-inner { transform: rotateY(180deg); }
.mm-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; display: grid; place-items: center; box-shadow: 0 5px 0 rgba(0,0,0,.2), 0 8px 14px rgba(20,33,61,.18); }
.mm-back { color: rgba(255,255,255,.9); font-size: 1.6rem; border: 3px solid #fff;
  background: radial-gradient(circle at 50% 50%, transparent 0 22%, rgba(255,255,255,.18) 23% 25%, transparent 26%),
    repeating-linear-gradient(45deg, var(--accent) 0 9px, color-mix(in srgb, var(--accent) 78%, #fff) 9px 18px); }
.mm-back span { text-shadow: 0 2px 3px rgba(0,0,0,.35); background: color-mix(in srgb, var(--accent) 85%, #000); width: 46%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); }
.mm-front { background: linear-gradient(160deg, #fff, color-mix(in srgb, var(--card2) 80%, #fff)); transform: rotateY(180deg); font-size: var(--mm-font, 2.2rem); border: 2px solid var(--line); color: #1f2937; }
.mm-card.matched .mm-front { background: linear-gradient(160deg, #dcfce7, #86efac); border-color: #16a34a; box-shadow: 0 0 0 3px rgba(34,197,94,.45), 0 0 16px rgba(34,197,94,.55); }
.mm-card.matched .mm-front::after { content: "✓"; position: absolute; right: 6px; top: 2px; font-size: .9rem; font-weight: 900; color: #15803d; }
.mm-card.sparkle .mm-inner { animation: matchHop .6s var(--spring); }
@keyframes matchHop { 40% { transform: rotateY(180deg) translateY(-12px) scale(1.08); } }
.mm-card.shake .mm-inner { animation: wiggle .35s; }
@keyframes wiggle { 20% { transform: rotateY(180deg) translateX(-6px) rotateZ(-3deg); } 50% { transform: rotateY(180deg) translateX(6px) rotateZ(3deg); } 80% { transform: rotateY(180deg) translateX(-3px); } }

/* ---------- Simon ---------- */
.simon { position: relative; width: min(88vw, 400px); aspect-ratio: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; background: radial-gradient(circle at 35% 25%, #374151, #0f172a 70%); border-radius: 50%; box-shadow: 0 18px 36px rgba(0,0,0,.45), inset 0 0 0 5px #1f2937, inset 0 4px 10px rgba(255,255,255,.12); }
.simon.buzz { animation: buzz .5s; } @keyframes buzz { 10%, 50%, 90% { transform: translateX(-7px) rotate(-1deg); box-shadow: 0 0 0 6px rgba(239,68,68,.55), 0 18px 36px rgba(0,0,0,.45); } 30%, 70% { transform: translateX(7px) rotate(1deg); } }
.simon-pad { --c: #22c55e; position: relative; border: 0; padding: 0; min-height: 90px; cursor: pointer; display: grid; place-items: center; overflow: hidden; transition: filter .08s, transform .08s, box-shadow .1s; filter: brightness(.62) saturate(.9);
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 70%, #000)); box-shadow: inset 0 -8px 14px rgba(0,0,0,.35), inset 0 4px 6px rgba(255,255,255,.3); }
.simon-pad::before { content: ""; position: absolute; inset: 6% 6% auto 6%; height: 40%; border-radius: inherit; background: linear-gradient(rgba(255,255,255,.35), transparent); pointer-events: none; }
.simon-pad .sym { font-size: clamp(2.2rem, 12vw, 3.6rem); color: rgba(255,255,255,.92); text-shadow: 0 2px 4px rgba(0,0,0,.45); line-height: 1; pointer-events: none; }
.simon-pad.locked { cursor: default; }
@media (hover: hover) and (pointer: fine) { .simon-pad:not(.locked):hover { filter: brightness(.8); } }
.simon-pad.lit, .simon-pad:not(.locked):active { filter: brightness(1.45) saturate(1.3); transform: scale(1.035); box-shadow: 0 0 40px 8px var(--c), 0 0 90px 20px color-mix(in srgb, var(--c) 55%, transparent), inset 0 -4px 10px rgba(0,0,0,.15), inset 0 4px 8px rgba(255,255,255,.55); z-index: 2; }
.simon-pad.g { --c: #22c55e; border-top-left-radius: 100% } .simon-pad.r { --c: #ef4444; border-top-right-radius: 100% }
.simon-pad.y { --c: #facc15; border-bottom-left-radius: 100% } .simon-pad.b { --c: #3b82f6; border-bottom-right-radius: 100% }
.simon-pad.g .sym { transform: translate(-30%, -30%); } .simon-pad.r .sym { transform: translate(30%, -30%); } .simon-pad.y .sym { transform: translate(-30%, 30%); } .simon-pad.b .sym { transform: translate(30%, 30%); }
.simon-pad.y .sym { color: #422006; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.simon-center { position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; z-index: 3; background: radial-gradient(circle at 35% 28%, #4b5563, #111827 70%); color: #fff; display: grid; place-items: center; text-align: center; font-weight: 800; border: 5px solid #0b1220; box-shadow: 0 6px 14px rgba(0,0,0,.5), inset 0 3px 6px rgba(255,255,255,.2); }
.simon-center small { display: block; font-size: .65rem; font-weight: 700; opacity: .85; letter-spacing: .08em; text-transform: uppercase; }
.simon-center b { font-size: clamp(1.6rem, 9vw, 2.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.btn.pulse { animation: breathe 1.6s ease-in-out infinite, startRing 1.6s ease-out infinite; }
@keyframes startRing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }

/* ---------- Fleet Strike: animated ocean, ship art, splash / explosion / sunk reveal ---------- */
.fs-wrap { width: min(94vw, 460px); }
.fs-small { width: min(58vw, 230px); margin: 0 auto; }
.fs-boardlabel { text-align: center; font-weight: 800; font-size: .85rem; color: var(--muted); margin: 4px 0; }
.fs-fleet { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0; }
.fs-ship-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--card-grad); border: 2px solid var(--line); border-radius: 99px; padding: 4px 11px; font-size: .8rem; font-weight: 700; min-height: 36px; box-shadow: 0 2px 0 var(--line); }
button.fs-ship-pill { cursor: pointer; min-height: 40px; }
.fs-ship-pill.sel { border-color: var(--accent-text); background: var(--accent-soft); }
.fs-ship-pill.done { opacity: .75; }
.fs-ship-pill.sunk { text-decoration: line-through; opacity: .65; }
.fs-gridwrap { position: relative; width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 4px solid #0f3a5f; box-shadow: 0 12px 24px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.25); background: #0c4a6e; }
.fs-gridwrap.shake { animation: gridShake .45s; } @keyframes gridShake { 20% { transform: translate(-5px, 2px) rotate(-.6deg); } 40% { transform: translate(5px, -2px) rotate(.6deg); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(3px, -1px); } }
.fs-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); z-index: 0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='40'><path d='M0 20 Q15 8 30 20 T60 20 T90 20 T120 20' fill='none' stroke='white' stroke-opacity='.22' stroke-width='2'/></svg>") 0 0 / 120px 40px,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='60'><path d='M0 30 Q25 12 50 30 T100 30 T150 30 T200 30' fill='none' stroke='white' stroke-opacity='.14' stroke-width='3'/></svg>") 0 18px / 200px 60px,
    radial-gradient(circle at 25% 15%, #38bdf8, transparent 60%),
    linear-gradient(180deg, #0ea5e9, #0369a1 60%, #075985);
  animation: waves 9s linear infinite; }
@keyframes waves { to { background-position: 120px 0, -200px 18px, 0 0, 0 0; } }
.fs-cell { position: relative; border: 0; border-right: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); padding: 0; background: transparent; min-width: 0; min-height: 0; display: grid; place-items: center; cursor: default; border-radius: 0; z-index: 2; }
.fs-cell:nth-child(10n) { border-right: 0; } .fs-cell:nth-child(n+91) { border-bottom: 0; }
.fs-gridwrap .fs-cell:not(.locked) { cursor: crosshair; }
@media (hover: hover) and (pointer: fine) { .fs-gridwrap .fs-cell:not(.locked):hover { background: rgba(255,255,255,.28); box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); } }
.fs-cell:focus-visible { outline: 3px solid #fde047; outline-offset: -3px; box-shadow: none; background: rgba(253,224,71,.25); }
.fs-mark { pointer-events: none; font-size: clamp(.8rem, 4vw, 1.5rem); line-height: 1; font-weight: 900; color: #fff; }
.fs-cell.miss .fs-mark { color: #e0f2fe; font-size: clamp(.9rem, 4.4vw, 1.6rem); text-shadow: 0 0 6px rgba(255,255,255,.7); }
.fs-cell.miss.splashing::after { content: ""; position: absolute; inset: 15%; border-radius: 50%; border: 2px solid #e0f2fe; animation: ripple2 .9s ease-out forwards; pointer-events: none; }
@keyframes ripple2 { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.fs-cell.hit { background: radial-gradient(circle, rgba(255,214,102,.95) 0, rgba(249,115,22,.85) 38%, rgba(220,38,38,.55) 70%, transparent 100%); }
.fs-cell.hit .fs-mark { color: #fff; text-shadow: 0 0 8px #ff3b30, 0 0 2px #7f1d1d; animation: flame .5s ease-in-out infinite alternate; }
@keyframes flame { from { transform: scale(.9) rotate(-6deg); } to { transform: scale(1.18) rotate(6deg); } }
.fs-cell.sunk { background: radial-gradient(circle, rgba(15,23,42,.65), rgba(15,23,42,.25)); }
.fs-cell.sunk .fs-mark { color: #fca5a5; text-shadow: 0 1px 2px #000; }
.fs-cell.last { box-shadow: inset 0 0 0 3px #fde047; }
.fs-ships { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; filter: drop-shadow(0 .6px .5px rgba(0,0,0,.5)); }
.fs-ship .hull { stroke: #1e293b; stroke-width: .35; } .fs-ship .deck { stroke: rgba(0,0,0,.25); stroke-width: .2; }
.fs-ship .cabin { fill: #475569; stroke: #1e293b; stroke-width: .2; } .fs-ship .turret { fill: #334155; stroke: #0f172a; stroke-width: .2; }
.fs-ship.sunk .cabin, .fs-ship.sunk .turret { fill: #292524; }
.fs-ship.sunk .hull { stroke: #ea580c; stroke-width: .5; }
.fs-ship.drop { animation: shipDrop .35s var(--spring); } @keyframes shipDrop { from { opacity: 0; filter: brightness(2); } }
.fs-ship.reveal { animation: shipReveal 1s ease-out; } @keyframes shipReveal { 0% { opacity: 0; filter: brightness(3); } 40% { opacity: 1; filter: brightness(1.6) saturate(2); } 100% { filter: none; } }
.fs-cell.ship:not(.hit):not(.sunk) { }
.fs-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(circle, rgba(255,240,200,.9), rgba(255,140,0,.4) 40%, transparent 70%); opacity: 0; }
.fs-flash.go { animation: flashGo .4s ease-out; } @keyframes flashGo { 0% { opacity: .85; } 100% { opacity: 0; } }
.fs-small .fs-mark { font-size: .75rem; }

/* ---------- Dice: felt tray, real 3D d6 cubes, shaded polyhedra, tumbling roll ---------- */
.tray { position: relative; border-radius: 22px; border: 3px solid #5b3a1a; padding: 14px 12px; color: #f8fafc;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 .1  0 0 0 0 0  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse at 50% 30%, #1f9d5f, #0f6b3f 65%, #0a4a2c);
  box-shadow: inset 0 0 28px rgba(0,0,0,.55), 0 10px 24px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.2); }
.tray .muted, .tray .detail, .tray .help-line, .tray .tray-note { color: #d1fae5; }
.tray-dice { perspective: 700px; gap: 14px; min-height: 92px; padding: 12px 0; }
.tray-total .big-num { color: #fde68a; text-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 18px rgba(253,230,138,.4); }
.big-num.pop-num { animation: numPop .5s var(--spring); } @keyframes numPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.25); } 100% { transform: none; } }
.tray .yz span { background: rgba(0,0,0,.3); color: #fef9c3; }
.tray .konst { color: #d1fae5; }
.tray .dgroup .note { color: #d1fae5; }
.die { --ds: 58px; position: relative; width: var(--ds); height: var(--ds); border: 0; padding: 0; background: transparent; display: grid; place-items: center; font-weight: 900; font-size: 1.35rem; color: #fff; cursor: pointer; transform-style: preserve-3d; transition: transform .18s var(--spring), filter .2s; filter: drop-shadow(0 5px 3px rgba(0,0,0,.4)); }
.die:disabled { opacity: 1; cursor: default; }
.die-shadow { display: none; }
.die-body { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px; background: radial-gradient(circle at 30% 22%, color-mix(in srgb, var(--dc, var(--accent)) 55%, #fff), var(--dc, var(--accent)) 45%, color-mix(in srgb, var(--dc, var(--accent)) 70%, #000)); box-shadow: inset 0 -5px 8px rgba(0,0,0,.28), inset 0 3px 4px rgba(255,255,255,.4); text-shadow: 0 2px 2px rgba(0,0,0,.45); }
.die-body::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: conic-gradient(from 20deg at 50% 55%, rgba(255,255,255,.22), rgba(0,0,0,.14), rgba(255,255,255,.1), rgba(0,0,0,.2), rgba(255,255,255,.22)); mix-blend-mode: soft-light; pointer-events: none; }
.die .sides { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); font-size: .52rem; font-weight: 800; opacity: .8; }
.die.d4 .die-body { clip-path: polygon(50% 4%, 96% 92%, 4% 92%); border-radius: 6px; padding-top: 14px; }
.die.d8 .die-body, .die.d10 .die-body, .die.d12 .die-body, .die.d20 .die-body, .die.d100 .die-body { clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); border-radius: 0; }
.die.d12 .die-body { clip-path: polygon(30% 4%, 70% 4%, 96% 38%, 96% 62%, 70% 96%, 30% 96%, 4% 62%, 4% 38%); }
.die.d10 .die-body { clip-path: polygon(50% 0, 96% 40%, 82% 100%, 18% 100%, 4% 40%); }
.die.dcoin .die-body { border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fef3c7, #fbbf24 45%, #b45309); color: #78350f; text-shadow: 0 1px 0 rgba(255,255,255,.5); border: 3px solid #d97706; }
.die.fudge .die-body { font-size: 1.8rem; border-radius: 12px; }
.die.dropped { opacity: .4; }
.die.dropped .die-body, .die.dropped .cube { filter: grayscale(.8); }
.die.dropped::after { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; border-top: 3px solid rgba(255,255,255,.9); transform: rotate(-20deg); box-shadow: 0 1px 2px #000; }
.die.held { transform: translateY(-8px); filter: drop-shadow(0 0 0 transparent) drop-shadow(0 0 7px #fbbf24) drop-shadow(0 8px 4px rgba(0,0,0,.4)); }
.die.held::before { content: "🔒"; position: absolute; top: -12px; right: -8px; font-size: .9rem; z-index: 3; }
.die.exploded { filter: drop-shadow(0 0 7px #fde047) drop-shadow(0 4px 3px rgba(0,0,0,.4)); }
.die.success { filter: drop-shadow(0 0 7px #4ade80) drop-shadow(0 4px 3px rgba(0,0,0,.4)); }
.die.crit { filter: drop-shadow(0 0 10px #fde047) drop-shadow(0 0 18px #f59e0b); animation: glowPulse 1s ease-in-out infinite; }
.die.fumble { filter: drop-shadow(0 0 10px #ef4444) drop-shadow(0 0 16px #7f1d1d); }
@keyframes glowPulse { 50% { filter: drop-shadow(0 0 16px #fde047) drop-shadow(0 0 28px #f59e0b); } }
.die.light { color: #1f2937; }
.pips { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); width: 74%; height: 74%; }
.pips i { place-self: center; width: 78%; aspect-ratio: 1; border-radius: 50%; background: #0f172a; box-shadow: inset 0 2px 2px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.7); }
/* 3D cube */
.cube-spin { position: absolute; inset: 0; transform-style: preserve-3d; }
.cube { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .3s; transform: rotateX(-22deg) rotateY(-30deg); }
.cube[data-v="1"] { transform: rotateX(-22deg) rotateY(-30deg); } .cube[data-v="6"] { transform: rotateX(-22deg) rotateY(-30deg) rotateY(180deg); }
.cube[data-v="2"] { transform: rotateX(-22deg) rotateY(-30deg) rotateY(-90deg); } .cube[data-v="5"] { transform: rotateX(-22deg) rotateY(-30deg) rotateY(90deg); }
.cube[data-v="3"] { transform: rotateX(-22deg) rotateY(-30deg) rotateX(-90deg); } .cube[data-v="4"] { transform: rotateX(-22deg) rotateY(-30deg) rotateX(90deg); }
.cube .face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 16%; background: linear-gradient(145deg, #ffffff, #e5e7eb 70%, #cbd5e1); border: 1px solid rgba(100,116,139,.55); box-shadow: inset 0 0 8px rgba(0,0,0,.15); backface-visibility: hidden; }
.cube .f1 { transform: translateZ(calc(var(--ds) / 2)); } .cube .f6 { transform: rotateY(180deg) translateZ(calc(var(--ds) / 2)); }
.cube .f2 { transform: rotateY(90deg) translateZ(calc(var(--ds) / 2)); } .cube .f5 { transform: rotateY(-90deg) translateZ(calc(var(--ds) / 2)); }
.cube .f3 { transform: rotateX(90deg) translateZ(calc(var(--ds) / 2)); } .cube .f4 { transform: rotateX(-90deg) translateZ(calc(var(--ds) / 2)); }
.cube .f1 .pips i { background: #dc2626; width: 92%; }  /* the 1 is red, like real dice */
.cube .qm { font-size: 1.6rem; font-weight: 900; color: #475569; }
.die.pipdie.colored .face { background: linear-gradient(145deg, color-mix(in srgb, var(--dc) 60%, #fff), var(--dc) 70%, color-mix(in srgb, var(--dc) 70%, #000)); border-color: rgba(255,255,255,.4); }
.die.pipdie.colored .pips i { background: #fff; box-shadow: inset 0 2px 2px rgba(0,0,0,.35); } .die.pipdie.colored .f1 .pips i { background: #fff; }
/* roll animation: the die tumbles in 3D and ends exactly at rest (all transforms resolve to none) */
.die.rolling { animation: dieHop .65s cubic-bezier(.3, .7, .4, 1); }
.die.rolling .cube-spin { animation: spin3d .65s cubic-bezier(.2, .75, .3, 1); }
.die.rolling .die-body { animation: spinFlat .65s cubic-bezier(.2, .75, .3, 1); }
@keyframes spin3d { from { transform: rotateX(var(--rx, 540deg)) rotateY(var(--ry, -720deg)) rotateZ(var(--rz, 180deg)); } to { transform: none; } }
@keyframes spinFlat { from { transform: rotate3d(1, 1, 0, var(--rx, 540deg)) rotateZ(var(--rz, 180deg)) scale(.85); } to { transform: none; } }
@keyframes dieHop { 0% { transform: translateY(0); } 35% { transform: translateY(calc(var(--hop, 20px) * -2)); } 60% { transform: translateY(0); } 74% { transform: translateY(calc(var(--hop, 20px) * -.45)); } 88% { transform: translateY(0); } 94% { transform: translateY(calc(var(--hop, 20px) * -.12)); } 100% { transform: translateY(0); } }
.roll-row .btn.primary { font-size: 1.3rem; min-height: 60px; letter-spacing: .02em; }
.roll-row .btn.primary:not(:disabled) { animation: breathe 3s ease-in-out infinite; }
.picker .pick { background: var(--card-grad); box-shadow: 0 2px 0 var(--line); transition: transform .12s var(--spring); } .picker .pick.has { box-shadow: 0 0 0 2px var(--accent-text), 0 3px 8px color-mix(in srgb, var(--accent) 30%, transparent); }
.stepper button { box-shadow: 0 2px 0 var(--line); transition: transform .08s; } .stepper button:active { transform: translateY(2px); box-shadow: none; }
.histo .bar { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); transform-origin: bottom; animation: barGrow .5s var(--ease-out) backwards; }
@keyframes barGrow { from { transform: scaleY(0); } }
.preset { background: var(--card-grad); box-shadow: 0 2px 0 var(--line); }
@media (min-width: 700px) { .die { --ds: 66px; } }
.tray { min-height: 232px; }
/* header grid: explicit columns so a hidden back/help button never shifts the title */
#backBtn { grid-column: 1; } .topbar h1 { grid-column: 2; } #helpBtn { grid-column: 3; } #settingsBtn { grid-column: 4; }
#backBtn[hidden], #helpBtn[hidden] { display: none !important; }
.topbar:has(#backBtn[hidden]) { grid-template-columns: 0 1fr auto var(--tap); column-gap: 0; }
.topbar:has(#backBtn[hidden]) h1 { text-align: left; padding-left: 4px; }
.topbar:has(#backBtn[hidden]) .brand { justify-content: flex-start; }
#settingsBtn[hidden] { display: none !important; }