/* ============================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
:root {
  --accent: #f4c95d;
  --ink: #f4f7f5;
  --card-w: 80px; --card-h: 112px; --gap: 10px; --card-fs: 24px; --pad: 14px;
  --card-radius: clamp(5px, calc(var(--card-w) * 0.09), 11px);
  --red: #c0282a; --black: #2a2a32;
  --t-fast: .18s; --t-mid: .28s;
}
[data-theme="green"]  { --felt1:#0e7a52; --felt2:#063b28; --bar:#062b1d; --bar2:#0a3a27; --accent:#f4c95d; }
[data-theme="blue"]   { --felt1:#1769a8; --felt2:#0a2e4d; --bar:#08233c; --bar2:#0c3151; --accent:#ffd479; }
[data-theme="purple"] { --felt1:#5b3f9d; --felt2:#251743; --bar:#1c1233; --bar2:#2a1c4a; --accent:#ffd479; }
[data-theme="crimson"]{ --felt1:#a8324a; --felt2:#4a0f1d; --bar:#360a14; --bar2:#4d1320; --accent:#ffd479; }
[data-theme="dark"]   { --felt1:#2c3140; --felt2:#15181f; --bar:#0c0e12; --bar2:#1a1d25; --accent:#7fd4ff; }

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); }
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* ============================================================ topbar */
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px max(10px, env(safe-area-inset-left)) 8px max(10px, env(safe-area-inset-right));
  padding-top: max(8px, env(safe-area-inset-top));
  background: linear-gradient(180deg, var(--bar2), var(--bar));
  box-shadow: 0 2px 10px rgba(0,0,0,.4); z-index: 30; flex: none;
}
.icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  background: rgba(255,255,255,.08); border: none; border-radius: 10px;
  color: var(--ink); font-size: 18px; cursor: pointer; transition: background var(--t-fast);
}
.icon-btn:hover { background: rgba(255,255,255,.16); }
.bars, .bars::before, .bars::after {
  content: ""; display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); position: relative;
}
.bars::before { position: absolute; top: -6px; } .bars::after { position: absolute; top: 6px; }

.title-wrap { display: flex; flex-direction: column; min-width: 0; }
.title { font-weight: 700; font-size: 17px; letter-spacing: .3px; line-height: 1.1; }
.seed { font-size: 11px; opacity: .55; white-space: nowrap; }

.scoreboard { display: flex; gap: 14px; margin-left: auto; }
.stat { display: flex; flex-direction: column; align-items: center; min-width: 42px; }
.stat .lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; opacity: .55; }
.stat b { font-size: 16px; font-variant-numeric: tabular-nums; }
#app.hide-timer .time-stat { display: none; }

.toolbar { display: flex; gap: 6px; margin-left: 8px; }
.tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 46px; height: 42px; gap: 1px; padding: 0 6px;
  background: rgba(255,255,255,.08); border: none; border-radius: 10px; color: var(--ink);
  font-size: 16px; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast);
}
.tool span { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; opacity: .8; }
.tool:hover:not(:disabled) { background: rgba(255,255,255,.18); }
.tool:active:not(:disabled) { transform: translateY(1px); }
.tool:disabled { opacity: .32; cursor: default; }
.tool.primary { background: linear-gradient(180deg, var(--accent), #d8a73d); color: #2a200a; }
.tool.primary span { opacity: .9; }

.progress { height: 3px; background: rgba(0,0,0,.35); flex: none; z-index: 20; }
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #fff6); transition: width .4s ease; }

/* ============================================================ board */
.board {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.45), transparent 60%),
    radial-gradient(120% 140% at 50% 50%, var(--felt1), var(--felt2));
}
.slots, .cards, .fx { position: absolute; inset: 0; }
.slots { padding: var(--pad); display: flex; flex-direction: column; gap: var(--gap); }
.cards { padding: 0; pointer-events: none; perspective: 1500px; perspective-origin: 50% 32%; }
.fx { pointer-events: none; z-index: 95; }

.row { display: flex; gap: var(--gap); justify-content: center; }
.top-row { height: var(--card-h); flex: none; }
.tableau-row { flex: 1; align-items: flex-start; }
.board.left-handed .row { flex-direction: row-reverse; }

.slot {
  width: var(--card-w); flex: none; border-radius: var(--card-radius);
  position: relative;
}
.top-row .slot { height: var(--card-h); }
.tableau-row .slot { height: var(--card-h); }
.slot-foundation, .slot-free, .slot-stock, .slot-waste, .slot-tableau {
  border: 1.5px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.14);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}
.slot.spacer { border: none; background: none; box-shadow: none; }
.slot-mark {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: calc(var(--card-w) * .42); color: rgba(255,255,255,.16); font-weight: 700;
}
.slot-stock .slot-mark { font-size: calc(var(--card-w) * .5); }
.slot-stock.empty.recycle .slot-mark { color: rgba(255,255,255,.34); }
.slot-stock { cursor: pointer; }
.slot.drop-ok {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 0 18px -2px var(--accent);
}
.slot.hint-slot { animation: hintPulse 1.4s ease; }

/* ============================================================ cards (3D) */
.card {
  position: absolute; top: 0; left: 0; width: var(--card-w); height: var(--card-h);
  pointer-events: auto; cursor: grab; border-radius: var(--card-radius);
  transform-style: preserve-3d;
  /* rest at z=0 so screen positioning / drag math is unaffected by perspective */
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0);
  transition: transform var(--t-mid) cubic-bezier(.2,.7,.3,1), box-shadow var(--t-mid);
  box-shadow: 0 1px 2px rgba(0,0,0,.32), 0 4px 9px rgba(0,0,0,.26);
}
.card.dragging { cursor: grabbing; will-change: transform; box-shadow: 0 22px 40px -8px rgba(0,0,0,.6); }

/* hover / keyboard-focus pops the card toward the viewer in 3D and tilts it to
   follow the cursor (--rx/--ry set in JS). The transform is applied to the inner
   element only — the .card box itself stays put so it remains a stable hover
   target and the pop can't move out from under the cursor (no flicker loop). */
.board:not(.busy) .card:not(.dragging):not(.face-down):hover,
.card:not(.dragging):not(.face-down):focus-visible {
  box-shadow: 0 30px 50px -10px rgba(0,0,0,.55);
  z-index: 9999 !important;
}
.board:not(.busy) .card:not(.dragging):not(.face-down):hover .card-inner,
.card:not(.dragging):not(.face-down):focus-visible .card-inner {
  transform: translateZ(150px) translateY(-12px)
             rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.card:focus-visible { outline: none; }
.card:focus-visible .front, .card:focus-visible .back {
  box-shadow: 0 0 0 3px var(--accent), 0 0 18px -2px var(--accent);
}
.card-inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .38s cubic-bezier(.3,.8,.4,1);
}
.card.face-down .card-inner { transform: rotateY(180deg); }
.face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--card-radius); overflow: hidden;
}
.front {
  background: linear-gradient(157deg, #ffffff 0%, #f3f4f8 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), inset 0 0 0 2px rgba(255,255,255,.6);
}
.back { transform: rotateY(180deg); background: #21407a; }

/* card faces colours */
.card.red  { --c: var(--red); }
.card.black { --c: var(--black); }

.corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: .86; color: var(--c); }
.corner .rk { font-weight: 800; font-size: var(--card-fs); letter-spacing: -.02em; }
.corner .su { font-size: calc(var(--card-fs) * .72); margin-top: 0; }
.corner.tl { top: calc(var(--card-h) * .04); left: calc(var(--card-w) * .06); }
.corner.br { bottom: calc(var(--card-h) * .04); right: calc(var(--card-w) * .06); transform: rotate(180deg); }

/* keep the pip cluster in the central band so it never crowds the corner index */
.pips { position: absolute; inset: 15% 16%; }
.pip {
  position: absolute; transform: translate(-50%, -50%); color: var(--c);
  font-size: calc(var(--card-fs) * .72); line-height: 1;
}
.pip.flip { transform: translate(-50%, -50%) rotate(180deg); }
.center-ace {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--c); font-size: calc(var(--card-w) * .5);
}
.court {
  position: absolute; inset: 12% 14%; border-radius: calc(var(--card-radius) * .8);
  display: grid; place-items: center; color: var(--c);
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 6px, transparent 6px 12px);
  box-shadow: inset 0 0 0 2px currentColor, inset 0 0 0 4px rgba(255,255,255,.78);
}
.court-letter { font-size: calc(var(--card-w) * .46); font-weight: 800; }
.court-suit { position: absolute; bottom: 6%; right: 10%; font-size: calc(var(--card-w) * .26); }
.court::before { content: ""; position: absolute; top: 6%; left: 10%; width: calc(var(--card-w)*.18); height: calc(var(--card-w)*.18);
  background: radial-gradient(circle at 35% 35%, var(--c), transparent 70%); border-radius: 50%; opacity: .55; }

/* card backs */
.board[data-back="lattice"] .back {
  background:
    repeating-linear-gradient(45deg, #2a55a8 0 6px, #1d3f80 6px 12px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.10) 0 6px, transparent 6px 12px);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.5), inset 0 0 0 5px #1d3f80;
}
.board[data-back="waves"] .back {
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.16) 0 10%, transparent 11%) 0 0/22px 22px,
    linear-gradient(160deg, #7a1f3d, #45122a);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.45), inset 0 0 0 5px #45122a;
}
.board[data-back="dots"] .back {
  background:
    radial-gradient(rgba(255,255,255,.22) 22%, transparent 24%) 0 0/14px 14px,
    linear-gradient(160deg, #16786a, #0c463d);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.45), inset 0 0 0 5px #0c463d;
}
.board[data-back="royal"] .back {
  background:
    repeating-conic-gradient(from 0deg, #b8902f 0deg 18deg, #8c6c1f 18deg 36deg) 50%/180% 180%,
    #6d540f;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.55), inset 0 0 0 6px #6d540f;
}

/* hints / feedback */
.card.hint .front { animation: hintGlow 1.6s ease; }
.card.hint-dest .front { animation: hintDest 1.6s ease; }
.card.shake { animation: shake .32s ease; }
@keyframes hintGlow { 0%,100%{ box-shadow:0 1px 2px rgba(0,0,0,.35);} 30%,70%{ box-shadow:0 0 0 3px var(--accent), 0 0 20px -2px var(--accent);} }
@keyframes hintDest { 0%,100%{ box-shadow:0 1px 2px rgba(0,0,0,.35);} 50%{ box-shadow:0 0 0 3px #fff, 0 0 16px -2px #fff;} }
@keyframes hintPulse { 0%,100%{ box-shadow: inset 0 1px 2px rgba(0,0,0,.25);} 50%{ box-shadow:0 0 0 3px var(--accent), 0 0 18px -2px var(--accent);} }
@keyframes shake { 0%,100%{ transform: translateX(0);} 20%{ transform: translateX(-6px);} 60%{ transform: translateX(6px);} }
.board.busy .card { cursor: default; }

/* jiggle physics — springy squash-and-stretch when a card lands. Applied to
   .card-inner so it composes with the card's 3D position/tilt transform. */
@keyframes jiggle {
  0%   { transform: scale(1.18, .82) rotate(-2.6deg); }
  20%  { transform: scale(.91, 1.09) rotate(1.9deg); }
  40%  { transform: scale(1.07, .95) rotate(-1.2deg); }
  58%  { transform: scale(.975, 1.025) rotate(.65deg); }
  76%  { transform: scale(1.018, .99) rotate(-.3deg); }
  100% { transform: none; }
}
@keyframes jiggleSoft {
  0%   { transform: scale(1.08, .93); }
  35%  { transform: scale(.975, 1.035); }
  62%  { transform: scale(1.014, .99); }
  100% { transform: none; }
}
.card.jiggle .card-inner { animation: jiggle .55s cubic-bezier(.34,.7,.42,1.3); }
.card.jiggle-soft .card-inner { animation: jiggleSoft .4s ease-out; }

/* ============================================================ scrim / drawer / modal */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t-mid), visibility var(--t-mid); z-index: 40; backdrop-filter: blur(2px); }
.scrim.show { opacity: 1; visibility: visible; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 86vw); z-index: 50;
  background: linear-gradient(180deg, var(--bar2), var(--bar)); color: var(--ink);
  transform: translateX(-104%); visibility: hidden;
  transition: transform .32s cubic-bezier(.3,.8,.3,1), visibility .32s;
  display: flex; flex-direction: column; box-shadow: 4px 0 24px rgba(0,0,0,.4);
  padding-top: env(safe-area-inset-top);
}
.drawer.open { transform: translateX(0); visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.drawer-head h2 { margin: 0; font-size: 20px; }
.drawer-body { overflow-y: auto; padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 18px; }
.drawer-body section { display: flex; flex-direction: column; gap: 8px; }
.drawer-body h4 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; opacity: .55; }

.game-picks { display: flex; flex-direction: column; gap: 6px; }
.game-pick {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: none; border-radius: 12px;
  background: rgba(255,255,255,.07); color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background var(--t-fast);
}
.game-pick:hover { background: rgba(255,255,255,.14); }
.game-pick.active { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1.5px var(--accent); }
.gp-icon { font-size: 20px; }

.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1; padding: 10px 6px; border: none; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.07); color: var(--ink); font-weight: 600; font-size: 13px; transition: background var(--t-fast);
}
.seg button:hover { background: rgba(255,255,255,.14); }
.seg button.active { background: var(--accent); color: #2a200a; }

.menu-btn {
  padding: 12px 14px; border: none; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 600;
  background: rgba(255,255,255,.08); color: var(--ink); text-align: left; transition: background var(--t-fast);
}
.menu-btn:hover { background: rgba(255,255,255,.16); }
.menu-btn.primary { background: linear-gradient(90deg, var(--accent), #d8a73d); color: #2a200a; }
.menu-btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.menu-btn.ghost:hover { background: rgba(255,255,255,.08); }
.menu-btn.danger { color: #ff8b8b; }
.menu-actions, .menu-links { display: flex; flex-direction: column; gap: 8px; }

/* modal */
.modal {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 18px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-mid), visibility var(--t-mid);
}
.modal.open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal-box {
  width: min(440px, 96vw); max-height: 88vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--bar2), var(--bar)); color: var(--ink);
  border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.1);
  transform: translateY(12px) scale(.98); transition: transform var(--t-mid);
}
.modal.open .modal-box { transform: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.modal-body h4 { margin: 6px 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; opacity: .55; }
.modal-foot { padding: 0 18px 18px; }

.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-pick { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); cursor: pointer; }
.theme-pick.active { border-color: #fff; box-shadow: 0 0 0 3px var(--accent); }
.sw-green { background: radial-gradient(#0e7a52, #063b28); }
.sw-blue { background: radial-gradient(#1769a8, #0a2e4d); }
.sw-purple { background: radial-gradient(#5b3f9d, #251743); }
.sw-crimson { background: radial-gradient(#a8324a, #4a0f1d); }
.sw-dark { background: radial-gradient(#2c3140, #15181f); }
.back-pick { width: 40px; height: 56px; border-radius: 7px; border: 2px solid transparent; padding: 0; cursor: pointer; overflow: hidden; background: none; }
.back-pick.active { border-color: var(--accent); }
.back-prev { display: block; width: 100%; height: 100%; }
.back-prev[data-back="lattice"] { background: repeating-linear-gradient(45deg,#2a55a8 0 5px,#1d3f80 5px 10px); }
.back-prev[data-back="waves"] { background: radial-gradient(circle at 50% 0, rgba(255,255,255,.2) 0 10%, transparent 11%) 0 0/16px 16px, linear-gradient(160deg,#7a1f3d,#45122a); }
.back-prev[data-back="dots"] { background: radial-gradient(rgba(255,255,255,.25) 22%, transparent 24%) 0 0/10px 10px, linear-gradient(160deg,#16786a,#0c463d); }
.back-prev[data-back="royal"] { background: repeating-conic-gradient(from 0deg,#b8902f 0 18deg,#8c6c1f 18deg 36deg) 50%/160% 160%; }

.toggle { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; cursor: pointer; font-size: 14px; }
.toggle input { display: none; }
.toggle i { width: 44px; height: 26px; border-radius: 13px; background: rgba(255,255,255,.18); position: relative; transition: background var(--t-fast); flex: none; }
.toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--t-fast); }
.toggle input:checked + i { background: var(--accent); }
.toggle input:checked + i::after { transform: translateX(18px); }

/* stats */
.stat-card { background: rgba(255,255,255,.05); border-radius: 14px; padding: 12px 14px; }
.stat-card h3 { margin: 0 0 8px; font-size: 15px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat-grid > div { display: flex; flex-direction: column; align-items: center; text-align: center; }
.stat-grid b { font-size: 16px; font-variant-numeric: tabular-nums; }
.stat-grid span { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; opacity: .55; margin-top: 2px; }

.help h3 { margin: 0 0 4px; } .help p { margin: 0 0 10px; line-height: 1.5; font-size: 14px; opacity: .92; }
.help b { color: var(--accent); }

/* win modal */
.win-modal .modal-box { text-align: center; padding: 8px 0 22px; }
.win-burst { font-size: 48px; margin-top: 14px; animation: pop .5s cubic-bezier(.2,1.4,.4,1); }
.win-modal h2 { margin: 6px 0 14px; font-size: 28px; color: var(--accent); }
.win-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 18px; }
.win-grid > div { display: flex; flex-direction: column; align-items: center; }
.win-grid b { font-size: 20px; } .win-grid span { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; opacity: .55; }
.win-sub { opacity: .6; font-size: 12px; margin: 12px 0 0; }
.win-actions { display: flex; gap: 10px; justify-content: center; padding: 18px 18px 0; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  background: rgba(0,0,0,.82); color: #fff; padding: 10px 18px; border-radius: 22px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity var(--t-mid), transform var(--t-mid); z-index: 70;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===================== anime art themes (shared behaviour) ===================
   DxD / Steins;Gate / No Game No Life all use the same full-bleed face-card art,
   hidden court box and white-stroked index; only colours + images differ. */
:root:is([data-theme="dxd"], [data-theme="steinsgate"], [data-theme="ngnl"], [data-theme="goat"]) .front {
  background: linear-gradient(157deg, #fffaf6 0%, #f1e3e6 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.4),
              inset 0 0 0 1px rgba(150,110,40,.45),
              inset 0 0 0 2px rgba(255,255,255,.7);
}
:root:is([data-theme="dxd"], [data-theme="steinsgate"], [data-theme="ngnl"], [data-theme="goat"]) .slot-foundation,
:root:is([data-theme="dxd"], [data-theme="steinsgate"], [data-theme="ngnl"], [data-theme="goat"]) .slot-free,
:root:is([data-theme="dxd"], [data-theme="steinsgate"], [data-theme="ngnl"], [data-theme="goat"]) .slot-stock,
:root:is([data-theme="dxd"], [data-theme="steinsgate"], [data-theme="ngnl"], [data-theme="goat"]) .slot-waste,
:root:is([data-theme="dxd"], [data-theme="steinsgate"], [data-theme="ngnl"], [data-theme="goat"]) .slot-tableau {
  border-color: rgba(255,255,255,.22);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
}
:root:is([data-theme="dxd"], [data-theme="steinsgate"], [data-theme="ngnl"], [data-theme="goat"]) .slot-mark {
  color: rgba(255,255,255,.20);
}
:root:is([data-theme="dxd"], [data-theme="steinsgate"], [data-theme="ngnl"], [data-theme="goat"]) .court { display: none; }
:root:is([data-theme="dxd"], [data-theme="steinsgate"], [data-theme="ngnl"], [data-theme="goat"]) .card.face-card .front {
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  background-color: #140810;
}
:root:is([data-theme="dxd"], [data-theme="steinsgate"], [data-theme="ngnl"], [data-theme="goat"]) .card.face-card .corner {
  text-shadow:
    -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px 1.5px 0 #fff,
    0 0 4px rgba(0,0,0,.55);
}

/* ---- High School DxD ---- */
[data-theme="dxd"] { --felt1: #4a0d1b; --felt2: #160509; --bar: #1a060c; --bar2: #2c0a14; --accent: #e8b24a; }
:root[data-theme="dxd"] .board {
  background: linear-gradient(rgba(8,2,4,.80), rgba(8,2,4,.93)),
    url(../assets/background.jpg) center / cover no-repeat,
    radial-gradient(120% 140% at 50% 50%, var(--felt1), var(--felt2));
}
:root[data-theme="dxd"] .card.face-card[data-suit="S"] .front { background-image: url(../assets/court-spade.jpg); }
:root[data-theme="dxd"] .card.face-card[data-suit="H"] .front { background-image: url(../assets/court-heart.jpg); }
:root[data-theme="dxd"] .card.face-card[data-suit="D"] .front { background-image: url(../assets/court-diamond.jpg); }
:root[data-theme="dxd"] .card.face-card[data-suit="C"] .front { background-image: url(../assets/court-club.jpg); }
.board[data-back="dxd"] .back { background: url(../assets/cardback.jpg) center / cover no-repeat, #160509; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }
.sw-dxd { background: url(../assets/cardback.jpg) center / cover; }
.back-prev[data-back="dxd"] { background: url(../assets/cardback.jpg) center / cover; }

/* ---- Steins;Gate ---- */
[data-theme="steinsgate"] { --felt1: #1d3640; --felt2: #0a1015; --bar: #0c1318; --bar2: #16242c; --accent: #e8a23a; }
:root[data-theme="steinsgate"] .board {
  background: linear-gradient(rgba(4,8,10,.82), rgba(4,8,10,.93)),
    url(../assets/sg-bg.jpg) center / cover no-repeat,
    radial-gradient(120% 140% at 50% 50%, var(--felt1), var(--felt2));
}
:root[data-theme="steinsgate"] .card.face-card[data-suit="S"] .front { background-image: url(../assets/sg-spade.jpg); }
:root[data-theme="steinsgate"] .card.face-card[data-suit="H"] .front { background-image: url(../assets/sg-heart.jpg); }
:root[data-theme="steinsgate"] .card.face-card[data-suit="D"] .front { background-image: url(../assets/sg-diamond.jpg); }
:root[data-theme="steinsgate"] .card.face-card[data-suit="C"] .front { background-image: url(../assets/sg-club.jpg); }
.board[data-back="steinsgate"] .back { background: url(../assets/sg-back.jpg) center / cover no-repeat, #0a1015; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }
.sw-sg { background: url(../assets/sg-back.jpg) center / cover; }
.back-prev[data-back="steinsgate"] { background: url(../assets/sg-back.jpg) center / cover; }

/* ---- No Game No Life ---- */
[data-theme="ngnl"] { --felt1: #3a164a; --felt2: #160a22; --bar: #170a26; --bar2: #2a1340; --accent: #38d2e0; }
:root[data-theme="ngnl"] .board {
  background: linear-gradient(rgba(10,4,16,.78), rgba(10,4,16,.92)),
    url(../assets/ngnl-bg.jpg) center / cover no-repeat,
    radial-gradient(120% 140% at 50% 50%, var(--felt1), var(--felt2));
}
:root[data-theme="ngnl"] .card.face-card[data-suit="S"] .front { background-image: url(../assets/ngnl-spade.jpg); }
:root[data-theme="ngnl"] .card.face-card[data-suit="H"] .front { background-image: url(../assets/ngnl-heart.jpg); }
:root[data-theme="ngnl"] .card.face-card[data-suit="D"] .front { background-image: url(../assets/ngnl-diamond.jpg); }
:root[data-theme="ngnl"] .card.face-card[data-suit="C"] .front { background-image: url(../assets/ngnl-club.jpg); }
.board[data-back="ngnl"] .back { background: url(../assets/ngnl-back.jpg) center / cover no-repeat, #160a22; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }
.sw-ngnl { background: url(../assets/ngnl-back.jpg) center / cover; }
.back-prev[data-back="ngnl"] { background: url(../assets/ngnl-back.jpg) center / cover; }

/* ---- Goat (G.O.A.T.) ---- */
[data-theme="goat"] { --felt1: #1e4a30; --felt2: #0a1a11; --bar: #0c1c12; --bar2: #163524; --accent: #d8b34a; }
:root[data-theme="goat"] .board {
  background: linear-gradient(rgba(5,14,9,.80), rgba(5,14,9,.92)),
    url(../assets/goat-bg.jpg) center / cover no-repeat,
    radial-gradient(120% 140% at 50% 50%, var(--felt1), var(--felt2));
}
:root[data-theme="goat"] .card.face-card[data-suit="S"] .front { background-image: url(../assets/goat-spade.jpg); }
:root[data-theme="goat"] .card.face-card[data-suit="H"] .front { background-image: url(../assets/goat-heart.jpg); }
:root[data-theme="goat"] .card.face-card[data-suit="D"] .front { background-image: url(../assets/goat-diamond.jpg); }
:root[data-theme="goat"] .card.face-card[data-suit="C"] .front { background-image: url(../assets/goat-club.jpg); }
.board[data-back="goat"] .back { background: url(../assets/goat-back.jpg) center / cover no-repeat, #0a1a11; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }
.sw-goat { background: url(../assets/goat-back.jpg) center / cover; }
.back-prev[data-back="goat"] { background: url(../assets/goat-back.jpg) center / cover; }

/* ============================================================ responsive */
@media (max-width: 620px) {
  .tool span, .tool#redoBtn span { display: none; }
  .tool { min-width: 38px; }
  .scoreboard { gap: 8px; }
  .stat { min-width: 34px; } .stat b { font-size: 14px; }
  .title { font-size: 15px; }
}
@media (max-width: 420px) {
  .tool#redoBtn { display: none; }
  .seed { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}