/* ============ Game: table, cards, controls ============ */
[hidden] { display: none !important; }

.game { --accent: #f0b24b; --accent-ink: #3a2400; --ivory: #f6f3ea; --ink-card: #1d2433; --red-card: #c4402f; position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- HUD: one slim row above the table ---- */
.hud { display: flex; align-items: center; justify-content: space-between; gap: 8px 22px; padding: 7px clamp(10px, 1.6vw, 24px); flex-wrap: wrap; background: var(--surface); border-bottom: 1px solid var(--line); }
.hud-modes { display: flex; gap: 8px; flex-wrap: wrap; }
.hud-stats { display: flex; gap: clamp(14px, 2.4vw, 30px); }
.hud-actions { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }
.hud-main, .hud-icons { display: flex; gap: 6px; align-items: center; }
.hud-stat { display: flex; flex-direction: column; min-width: 48px; }
.hud-stat .k { font: 600 10.5px/1 "Figtree", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hud-stat .v { font: 700 24px/1.1 "Zilla Slab", Georgia, serif; font-variant-numeric: tabular-nums; color: var(--ink); }
.hud-stat .v.sm { font-size: 16px; line-height: 1.55; white-space: nowrap; }
@media (max-width: 560px) { .hud-deal { display: none; } }

.toast {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2500;
  display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px); padding: 7px 8px 7px 18px;
  border-radius: 999px; background: rgba(8,22,22,.92); color: #f3efe3; backdrop-filter: blur(4px);
  box-shadow: 0 10px 26px rgba(0,0,0,.45); animation: toast-in .25s ease;
}
.toast .status-text { font: 500 14.5px/1.35 "Figtree", system-ui, sans-serif; padding: 4px 6px 4px 0; }
.toast .status-text:empty { display: none; }
.toast:has(.status-text:empty) { padding-left: 8px; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---- Table: edge to edge ---- */
.board-wrap { position: relative; width: 100%; }
.board {
  --felt: #17403f; --felt-2: #0d2a2a;
  --dur: .24s;
  position: relative; width: 100%; min-height: 320px; overflow: hidden;
  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='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse 85% 75% at 50% 30%, var(--felt) 0%, var(--felt-2) 100%);
  box-shadow: inset 0 24px 60px rgba(0,0,0,.26);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: height .2s ease;
}
.board[data-table="felt"]     { --felt: #1f6b3f; --felt-2: #0f3b22; }
.board[data-table="forest"]   { --felt: #2b4a2c; --felt-2: #16261a; }
.board[data-table="navy"]     { --felt: #213a63; --felt-2: #111f3b; }
.board[data-table="burgundy"] { --felt: #59232f; --felt-2: #34121c; }

.slot {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch);
  border: 1.5px dashed rgba(255,255,255,.2); border-radius: calc(var(--cw) * .09);
  background: rgba(255,255,255,.035);
}
.slot .ghost { position: absolute; inset: 0; display: grid; place-items: center; font: 700 calc(var(--cw) * .42)/1 "Zilla Slab", Georgia, serif; color: rgba(255,255,255,.12); }
.slot .ghost.small { font: 600 calc(var(--cw) * .17)/1 "Figtree", sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.slot-stock.recycle::after { content: "\21BB"; position: absolute; inset: 0; display: grid; place-items: center; font: 400 calc(var(--cw) * .55)/1 system-ui, sans-serif; color: rgba(255,255,255,.42); }
.slot-stock { cursor: pointer; }
.slot-cell { border-style: solid; border-color: rgba(255,255,255,.16); }
.slot.hint-dst { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240,178,75,.55); }
.slot.glow { animation: glow 1.2s ease-out; }
@keyframes glow { 0% { box-shadow: 0 0 0 0 rgba(240,178,75,.9), 0 0 0 0 rgba(240,178,75,.6); background: rgba(240,178,75,.35); } 100% { box-shadow: 0 0 0 calc(var(--cw) * .22) rgba(240,178,75,0), 0 0 calc(var(--cw) * .5) calc(var(--cw) * .12) rgba(240,178,75,0); background: rgba(255,255,255,.035); } }
.slot.flash { animation: flash .6s ease; }
@keyframes flash { 0%, 100% { background: rgba(255,255,255,.035); } 30% { background: rgba(240,178,75,.45); border-color: var(--accent); } }
.slot.nudge { animation: nudge .3s ease; }

/* ---- Cards ---- */
.card {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch);
  touch-action: none; cursor: pointer;
  transition: transform var(--dur) cubic-bezier(.2,.75,.25,1);
  will-change: transform;
}
.card.no-anim { transition: none; }
.card.dragging { transition: none; cursor: grabbing; rotate: var(--tilt, 0deg); scale: 1.045; }
/* Flat two-sided card: no 3D transforms, so the lettering stays sharp and never shimmers while resizing. */
.card .inner { position: absolute; inset: 0; }
.back, .face { position: absolute; inset: 0; border-radius: var(--r); background: var(--ivory); box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.16); overflow: hidden; }
.card.dragging .back, .card.dragging .face { box-shadow: 0 18px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.2); }
.face { color: var(--ink-card); visibility: hidden; }
.card.up .face { visibility: visible; }
.card.up .back { visibility: hidden; }
.face.red { color: var(--red-card); }
.card.flip .inner { animation: flip .3s ease; }
.card.flip .face { animation: face-in .3s steps(1, end); }
.card.flip .back { animation: back-out .3s steps(1, end); }
@keyframes flip { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.05); } }
@keyframes face-in { 0% { visibility: hidden; } 50%, 100% { visibility: visible; } }
@keyframes back-out { 0% { visibility: visible; } 50%, 100% { visibility: hidden; } }

/* card backs */
.back::before {
  content: ""; position: absolute; inset: calc(var(--cw) * .055); border-radius: calc(var(--cw) * .06);
  background-color: #27396a;
  background-image:
    repeating-linear-gradient(45deg, rgba(240,178,75,.5) 0 1px, transparent 1px calc(var(--cw) * .11)),
    repeating-linear-gradient(-45deg, rgba(240,178,75,.5) 0 1px, transparent 1px calc(var(--cw) * .11));
  box-shadow: inset 0 0 0 1.5px rgba(240,178,75,.75);
}
.board[data-back="crimson"] .back::before {
  background-color: #7c1d2e;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(246,243,234,.9) 0 calc(var(--cw) * .03), transparent calc(var(--cw) * .035)),
    repeating-linear-gradient(45deg, rgba(246,243,234,.22) 0 calc(var(--cw) * .035), transparent calc(var(--cw) * .035) calc(var(--cw) * .14));
  box-shadow: inset 0 0 0 1.5px rgba(246,243,234,.7);
}
.board[data-back="teal"] .back::before {
  background-color: #14605c;
  background-image: radial-gradient(circle, rgba(246,243,234,.55) 0 calc(var(--cw) * .028), transparent calc(var(--cw) * .032));
  background-size: calc(var(--cw) * .12) calc(var(--cw) * .12);
  box-shadow: inset 0 0 0 1.5px rgba(246,243,234,.65);
}

/* ---- Card face: one index in the corner + one big mark in the middle. Sizes are whole-pixel variables set by ui.js
        (--fs rank size, --ip inset, --sx small suit, --big centre suit, --court court letter). ---- */
.s { fill: currentColor; display: block; }
.ix { position: absolute; left: var(--ip); top: var(--ip); height: var(--fs); display: flex; align-items: center; gap: 1px; font: 700 var(--fs)/1 "Zilla Slab", Georgia, serif; letter-spacing: -.04em; white-space: nowrap; }
.ix .s { width: var(--sx); height: var(--sx); flex: none; }
.ace, .big { position: absolute; inset: 0; display: grid; place-items: center; padding-top: var(--fs); }
.big .s { width: var(--big); height: var(--big); }
.ace .s { width: calc(var(--big) * 1.2); height: calc(var(--big) * 1.2); }
.court { display: none; position: absolute; left: calc(var(--cw) * .22); right: calc(var(--cw) * .22); top: calc(var(--ch) * .33); bottom: calc(var(--ch) * .12);
  flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1.5px solid currentColor; border-radius: calc(var(--r) * .6); background: color-mix(in srgb, currentColor 8%, transparent); }
.court b { font: 700 var(--court)/1 "Zilla Slab", Georgia, serif; }
.court .s { width: calc(var(--court) * .55); height: calc(var(--court) * .55); }
.board:not([data-size="sm"]) .court { display: flex; }
.board:not([data-size="sm"]) .court ~ .big { display: none; }
/* ---- Card faces (Settings > Card faces) ---- */
/* Classic: illustrated King / Queen / Jack (public-domain vector deck, see README). Art sits below the index. */
.board[data-deck="classic"] .court { display: block; left: calc(var(--cw) * .06); right: calc(var(--cw) * .06); top: calc(var(--up, var(--minup)) + 1px); bottom: calc(var(--cw) * .06);
  border: 1.5px solid #1d2433; border-radius: 3px; background-color: #fff; background-size: cover; background-position: 50% 12%; background-repeat: no-repeat; }
.board[data-deck="classic"] .court b, .board[data-deck="classic"] .court .s { display: none; }
.board[data-deck="classic"] .court ~ .big { display: none; }
.court.c-JS { background-image: url(../img/court/JS.webp); } .court.c-JH { background-image: url(../img/court/JH.webp); }
.court.c-JD { background-image: url(../img/court/JD.webp); } .court.c-JC { background-image: url(../img/court/JC.webp); }
.court.c-QS { background-image: url(../img/court/QS.webp); } .court.c-QH { background-image: url(../img/court/QH.webp); }
.court.c-QD { background-image: url(../img/court/QD.webp); } .court.c-QC { background-image: url(../img/court/QC.webp); }
.court.c-KS { background-image: url(../img/court/KS.webp); } .court.c-KH { background-image: url(../img/court/KH.webp); }
.court.c-KD { background-image: url(../img/court/KD.webp); } .court.c-KC { background-image: url(../img/court/KC.webp); }
/* the letter frame is the fallback for every other deck: no art */
.board:not([data-deck="classic"]) .court { background-image: none; }
/* 4-colour: four distinct suit colours (helps colour-blind players) */
.board[data-deck="fourcolor"] .face.su-D { color: #1f5fbf; }
.board[data-deck="fourcolor"] .face.su-C { color: #1f8a46; }
/* Large print: bolder, bigger index and mark (sizes come from ui.js) */
.board[data-deck="large"] .ix { letter-spacing: -.06em; }
.board[data-deck="large"] .face { background: #fff; }

.deck-row { flex-wrap: wrap; }
.deck-row .seg button { padding: 8px 11px; font-size: 13px; }
.win-joker { display: block; margin: -62px auto 6px; width: 84px; height: auto; border-radius: 6px; box-shadow: 0 8px 18px rgba(0,0,0,.35); transform: rotate(-6deg); }
.win-joker:not([src]) { display: none; }
/* hints + feedback */
.card.hint-src .face, .card.hint-src .back, .card.hint-dst .face { box-shadow: 0 0 0 3px var(--accent), 0 0 20px 3px rgba(240,178,75,.75); animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { from { filter: brightness(1); } to { filter: brightness(1.12); } }
.card.nudge { animation: nudge .3s ease; }
@keyframes nudge { 0%, 100% { translate: 0 0; } 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
.card.settle { animation: settle .26s ease-out; }
@keyframes settle { 0% { scale: 1.07; } 60% { scale: .985; } 100% { scale: 1; } }
.pop { position: absolute; z-index: 2200; transform: translateX(-50%); pointer-events: none; font: 700 calc(var(--cw, 90px) * .3)/1 "Zilla Slab", Georgia, serif; color: #ffe29a; text-shadow: 0 2px 6px rgba(0,0,0,.6); animation: pop .9s ease-out forwards; }
.pop.neg { color: #ffb3a6; }
.board-wrap .pop { font-size: clamp(18px, 2.2vw, 30px); }
@keyframes pop { 0% { opacity: 0; margin-top: 8px; } 20% { opacity: 1; } 100% { opacity: 0; margin-top: -46px; } }

/* win */
.board.won .card, .board.won .slot { opacity: 0; transition: opacity .7s ease .1s; }
.win-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 2000; }
.overlay { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: rgba(6,18,18,.55); backdrop-filter: blur(3px); padding: 16px; overflow: auto; }
.win-card { background: var(--ivory); color: var(--ink-card); border-radius: 18px; padding: clamp(22px, 4vw, 36px); text-align: center; width: min(400px, 100%); box-shadow: 0 30px 60px rgba(0,0,0,.5); animation: rise .45s cubic-bezier(.2,.9,.3,1.2); }
@keyframes rise { from { transform: translateY(18px) scale(.96); opacity: 0; } }
.win-card h2 { font: 700 clamp(34px, 6vw, 46px)/1 "Zilla Slab", Georgia, serif; margin: 0 0 10px; }
.win-card p { margin: 0 0 6px; font: 500 15px/1.4 "Figtree", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.win-card .note { color: #6a5a2a; font-weight: 600; margin-bottom: 14px; }
.win-card .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.win-lb { margin-top: 12px; text-align: left; font: 500 14px/1.4 "Figtree", sans-serif; }
.win-lb:empty { display: none; }
.win-lb .lb-msg { background: rgba(23,64,63,.08); border-radius: 12px; padding: 11px 14px; color: var(--ink-card); }
.win-lb .lb-msg b { font-weight: 700; }
.win-lb .lb-msg .btn { margin: 8px 6px 0 0; }

/* ---- Controls ---- */
.btn {
  appearance: none; border: 1.5px solid var(--line, #cfd4cc); background: var(--surface, #fff); color: var(--ink);
  font: 600 14.5px/1 "Figtree", system-ui, sans-serif; padding: 10px 15px; border-radius: 999px; cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .08s;
}
.btn:hover:not(:disabled) { border-color: var(--ink); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover:not(:disabled) { background: #f6c066; border-color: #f6c066; }
.btn.small { padding: 9px 14px; font-size: 13.5px; }
.btn.icon { padding: 0; width: 40px; height: 38px; display: inline-grid; place-items: center; }
.btn[data-act="sound"][aria-pressed="false"] .wave { display: none; }
.btn:focus-visible, .seg button:focus-visible, .swatch:focus-visible { outline: 3px solid #2b6cb0; outline-offset: 2px; }

.seg { display: inline-flex; border: 1.5px solid var(--line, #cfd4cc); border-radius: 999px; overflow: hidden; background: var(--surface, #fff); }
.seg button { appearance: none; border: 0; background: transparent; color: var(--ink); font: 600 13.5px/1 "Figtree", sans-serif; padding: 10px 13px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface, #fff); }

.swatches { display: inline-flex; gap: 9px; align-items: center; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--surface, #fff); padding: 0; cursor: pointer; box-shadow: 0 0 0 1.5px var(--line, #cfd4cc); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--ink); }
.swatch[data-table-set="teal"] { background: #17403f; } .swatch[data-table-set="felt"] { background: #1f6b3f; } .swatch[data-table-set="forest"] { background: #2b4a2c; }
.swatch[data-table-set="navy"] { background: #213a63; } .swatch[data-table-set="burgundy"] { background: #59232f; }
.swatch.back-sw { border-radius: 6px; width: 24px; height: 32px; }
.swatch[data-back-set="lattice"] { background: repeating-linear-gradient(45deg, #27396a 0 3px, #d9a24a 3px 4px); }
.swatch[data-back-set="crimson"] { background: repeating-linear-gradient(45deg, #7c1d2e 0 4px, #c7677a 4px 5px); }
.swatch[data-back-set="teal"] { background: radial-gradient(circle, #cfe8e3 0 1.5px, #14605c 2px) 0 0/6px 6px; }

dialog.stats, dialog.settings { border: 0; border-radius: 18px; padding: 26px 28px; background: var(--surface, #fff); color: var(--ink); width: min(440px, calc(100vw - 32px)); box-shadow: 0 30px 70px rgba(0,0,0,.4); }
dialog.stats::backdrop, dialog.settings::backdrop { background: rgba(6,18,18,.55); backdrop-filter: blur(2px); }
dialog h2 { font: 700 26px/1.1 "Zilla Slab", Georgia, serif; margin: 0 0 12px; }
.dlg-sub { margin: 0 0 16px; font-size: 14.5px; color: var(--muted); }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; margin-bottom: 20px; }
.stat-grid div { display: flex; flex-direction: column; gap: 3px; }
.stat-grid .k { font: 600 11px/1.2 "Figtree", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.stat-grid .v { font: 700 26px/1.1 "Zilla Slab", Georgia, serif; font-variant-numeric: tabular-nums; }
.set-group { border-top: 1px solid var(--line); padding: 8px 0; }
.set-group:first-of-type { border-top: 0; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; font: 600 15px/1.2 "Figtree", sans-serif; }
.set-row small { font-weight: 500; color: var(--muted); margin-left: 4px; }
.set-row input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--brand); }
.set-row input[type=range] { width: 150px; accent-color: var(--brand); }
.set-buttons { padding: 12px 0 16px; }

@media (prefers-reduced-motion: reduce) {
  .card, .card .inner, .board { transition: none !important; }
  .card.hint-src .face, .card.hint-src .back, .card.hint-dst .face, .card.nudge, .card.settle, .slot.glow { animation: none !important; }
}
@media (max-width: 760px) {
  .hud { gap: 6px 12px; padding: 6px 10px; }
  .hud-stat .v { font-size: 20px; }
  .hud-stat { min-width: 40px; }
  .btn { padding: 9px 12px; font-size: 14px; }
  .btn.icon { width: 36px; height: 34px; }
  .seg button { padding: 8px 10px; font-size: 13px; }
  /* phone: stats + icon buttons on one row, then the three main buttons, then the game switches */
  .hud-actions { display: contents; }
  .hud-stats { order: 1; }
  .hud-icons { order: 2; margin-left: auto; }
  .hud-main { order: 3; width: 100%; display: grid; grid-template-columns: 1.5fr 1fr 1fr; }
  .hud-modes { order: 4; width: 100%; }
}


/* ---- Report a problem ---- */
.game-foot { margin: 0; padding: 10px 16px; text-align: center; font: 500 14px/1.4 "Figtree", system-ui, sans-serif; color: var(--muted); }
.linkbtn { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
dialog.report { border: 0; border-radius: 18px; padding: 26px 28px; background: var(--surface, #fff); color: var(--ink); width: min(480px, calc(100vw - 32px)); box-shadow: 0 30px 70px rgba(0,0,0,.4); }
dialog.report::backdrop { background: rgba(6,18,18,.55); backdrop-filter: blur(2px); }
dialog.report label { display: block; margin-top: 12px; font: 600 14px/1.3 "Figtree", sans-serif; color: var(--ink); }
dialog.report label small { font-weight: 500; color: var(--muted); }
dialog.report textarea, dialog.report input:not(.hp) { display: block; width: 100%; margin-top: 6px; padding: 11px 13px; font: 500 16px/1.4 "Figtree", sans-serif; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; resize: vertical; }
dialog.report textarea:focus, dialog.report input:focus { outline: 3px solid #2b6cb0; outline-offset: 1px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rep-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.rep-status { margin: 10px 0 0; min-height: 1.3em; font: 600 14px/1.3 "Figtree", sans-serif; }
.rep-status.bad { color: #c0392b; } .rep-status.good { color: #1f8a46; }
.rep-row { display: flex; gap: 10px; margin-top: 8px; }