/* All In: game-specific styles on top of Check-Mate's app.css + themes.css (shared bits copied from Four Play). */
@font-face { font-family: "NDG Script"; src: url("../assets/fonts/KaushanScript.ttf") format("truetype"); font-display: swap; }

/* tap targets: 44 px minimum everywhere */
.icon-btn { width: 44px; height: 44px; }
.home-link, .topbar .home-link { min-height: 44px; }
.btn, .opt { min-height: 44px; }
.btn.link { min-height: 44px; padding: 10px 12px; }
.btn small { display: block; font-weight: 400; font-size: 12px; opacity: .8; margin-top: 2px; }
.btn.small { font-size: 14px; padding: 8px 12px; }

/* brand */
.brand-mark { width: 54px; height: 54px; display: block; margin: 0 auto 4px; }
.brand.big .brand-mark { width: 76px; height: 76px; }
.brand .title { font-family: "NDG Script", var(--display); font-weight: 400; padding: 0 .1em; }
.brand .tagline { margin-top: 6px; color: var(--pink-soft); font-style: italic; font-size: 15px; }
.mini-brand { display: flex; align-items: center; gap: 8px; }
.mini-brand img { width: 34px; height: 34px; }
.mini-brand b { font-family: "NDG Script", var(--display); font-weight: 400; }
.gate-legal a { color: var(--pink-soft); display: inline-block; padding: 10px 2px; }

/* consent (The Table Oath) */
.pact h2 { font-family: var(--display); font-size: 26px; }
.pact-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; line-height: 1.45; }
.btn.pledge.pink { border-color: var(--pink); color: var(--pink-soft); }
.btn.pledge.blue { border-color: var(--blue); color: var(--blue-soft); }
.btn.pledge.pink.on { background: var(--pink-d); color: #fff; }
.btn.pledge.blue.on { background: var(--blue-d); color: #fff; }
.btn.pledge.static { display: flex; align-items: center; justify-content: center; opacity: .8; cursor: default; }

/* setup */
.side-line { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; border: 1px solid var(--line); }
.side-line.pink { background: rgba(255,111,174,.12); border-color: rgba(255,111,174,.5); }
.side-line.blue { background: rgba(79,163,255,.12); border-color: rgba(79,163,255,.5); }
.side-line .side-piece { width: 40px; height: 40px; }
.side-line small { display: block; color: var(--muted); font-size: 12px; }
.side-pick.pink.on { background: rgba(255,111,174,.35); } .side-pick.blue.on { background: rgba(79,163,255,.35); }
.qr { display: grid; place-items: center; margin: 8px auto; width: 184px; padding: 8px; background: #fff; border-radius: 12px; }
.qr svg { width: 168px; height: 168px; display: block; }
.net-banner .rejoin { margin-left: 6px; background: transparent; border: 1px solid currentColor; color: inherit; border-radius: 8px; padding: 8px 12px; font: 600 13px var(--font); min-height: 36px; }
.waiting { color: var(--muted); font-style: italic; }


/* rounds picker */
.seg.rounds { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.seg.rounds .opt { padding: 10px 4px; font-size: 20px; font-family: var(--display); }
.seg.rounds .opt small { font-family: var(--font); font-size: 11px; }
.seg.rounds .opt.on, .seg.length .opt.on { border-color: var(--pink); background: rgba(255,111,174,.18); }

/* scoreboard */
.stats.score .pink b { color: var(--pink-soft); } .stats.score .blue b { color: var(--blue-soft); }
/* task screens */
.task-main, .task-side { display: flex; flex-direction: column; gap: 10px; }
.task-side { align-items: stretch; }
.task-side .ring { align-self: center; }
.task-screen.up .timer { color: var(--danger); font-size: 22px; text-align: center; animation: pulse .3s 6 alternate; }
.done-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.crown { font-family: var(--display); font-size: 22px; font-weight: 700; }
.crown.pink { color: var(--pink-soft); } .crown.blue { color: var(--blue-soft); }
.crown.both { background: linear-gradient(90deg, var(--pink), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.crown.big { font-size: 56px; line-height: 1; width: 64px; text-align: center; flex: none; }
.task-card .task-text { white-space: pre-line; }
.prompt-title { margin: 0 0 4px; font-family: var(--display); font-size: 22px; }
.prompt-src { margin: 6px 0 0; }
.modal.wide { width: min(620px, 100%); }
table.quick th small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; }
.finished .btn small, .closed .btn small, .between .btn small { display: block; }


/* hands picker (4 options) */
.seg.rounds.hands { grid-template-columns: repeat(4, 1fr); }
table.prices td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--pink-soft); }
.side-line .chip { width: 40px; height: 40px; font-size: 14px; }

/* ---------- casino chips (pure CSS) ---------- */
.chip { --c: #d4a64a; --c2: #8a6420; position: relative; display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%; color: #fff; font: 800 12px var(--font); letter-spacing: -.3px;
  background: repeating-conic-gradient(from 0deg, var(--c) 0 30deg, #fff 30deg 45deg) ; box-shadow: 0 2px 0 var(--c2), 0 3px 6px rgba(0,0,0,.45); }
.chip::before { content: ""; position: absolute; inset: 16%; border-radius: 50%; background: var(--c); border: 1px dashed rgba(255,255,255,.7); }
.chip > span { position: relative; text-shadow: 0 1px 1px rgba(0,0,0,.5); }
.chip.pink { --c: #e24b8f; --c2: #8c1f53; }
.chip.blue { --c: #2f7fe0; --c2: #123f7a; }
.chip.gold { --c: #d4a64a; --c2: #7c5a19; }
.chip.mini { width: 16px; height: 16px; box-shadow: 0 1px 0 var(--c2); margin-right: 4px; vertical-align: -3px; }
.chip.mini::before { border: none; }
.chip.stack { width: 30px; height: 30px; box-shadow: 0 2px 0 var(--c2), 0 4px 0 var(--c), 0 6px 0 var(--c2), 0 7px 6px rgba(0,0,0,.4); }
.chip.bet { width: 52px; height: 52px; font-size: 15px; }
.chip.bet.mini { width: 16px; height: 16px; font-size: 0; }
.chip.task-chip { width: 64px; height: 64px; font-size: 16px; }
.chips-n { white-space: nowrap; }

/* ---------- the felt ---------- */
.table-screen { gap: 10px; }
.felt { position: relative; border-radius: 22px 22px 120px 120px / 22px 22px 60px 60px; padding: 10px 10px 14px;
  background: radial-gradient(130% 90% at 50% 0%, #6a1c3e 0%, #4a1230 45%, #2b0a1f 100%);
  border: 6px solid #3a1a0c; box-shadow: 0 0 0 2px #d4a64a, inset 0 0 0 1px rgba(212,166,74,.55), inset 0 10px 40px rgba(0,0,0,.45), 0 12px 30px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 8px; }
.felt-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #f3d9a0; letter-spacing: .5px; }
.hand-tag { font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; }
.shoe { opacity: .85; }
.arc { text-align: center; font-family: var(--display); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #e6c27a;
  border-top: 1px solid rgba(212,166,74,.5); border-bottom: 1px solid rgba(212,166,74,.5); padding: 4px 0; margin: 2px 12px; }
.dealer { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 96px; }
.dealer .total, .hand .total { font-weight: 800; font-variant-numeric: tabular-nums; }
.dealer .total { background: rgba(0,0,0,.35); padding: 2px 10px; border-radius: 999px; font-size: 13px; color: #fff; }
.cards { display: flex; justify-content: center; min-height: 74px; padding-left: 26px; }
.seats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seat { border-radius: 14px; padding: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.seat.pink { border-color: rgba(255,111,174,.45); } .seat.blue { border-color: rgba(79,163,255,.45); }
.seat.turn.pink { box-shadow: 0 0 0 2px var(--pink), 0 0 18px rgba(255,111,174,.45); }
.seat.turn.blue { box-shadow: 0 0 0 2px var(--blue), 0 0 18px rgba(79,163,255,.45); }
.seat-head { display: flex; align-items: center; gap: 8px; }
.seat-head b { font-size: 15px; } .seat-head small { display: block; font-size: 11px; color: var(--muted); }
.seat.pink .seat-head b { color: var(--pink-soft); } .seat.blue .seat-head b { color: var(--blue-soft); }
.chips-count { margin-left: auto; font: 800 18px var(--font); font-variant-numeric: tabular-nums; color: #f3d9a0; }
.net { font-weight: 800; font-size: 13px; padding: 1px 6px; border-radius: 8px; background: rgba(0,0,0,.3); }
.net.up { color: #8ff0a4; } .net.down { color: #ff9a9e; }
.bet-spot { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; border: 2px dashed rgba(212,166,74,.5); border-radius: 50%/40%; margin: 0 10%; }
.ready-tag { font-size: 12px; font-weight: 800; color: #8ff0a4; text-transform: uppercase; letter-spacing: 1px; }
.seat-hands { display: flex; flex-direction: column; gap: 6px; }
.hand { border-radius: 10px; padding: 4px 2px; }
.hand.active { background: rgba(255,255,255,.08); }
.hand .cards { min-height: 64px; }
.hand-meta { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.hand .total { background: rgba(0,0,0,.35); padding: 1px 8px; border-radius: 999px; }
.bet-n { color: #f3d9a0; font-weight: 700; }
.outcome { font-weight: 800; font-size: 12px; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .5px; }
.outcome.win { background: #1f8a4c; color: #fff; } .outcome.blackjack { background: #d4a64a; color: #2b1a00; }
.outcome.push { background: #5b5566; color: #fff; }
.outcome.lose, .outcome.bust, .outcome.dealer-bj { background: rgba(0,0,0,.45); color: #ff9a9e; }
.hand.lose .cards, .hand.bust .cards, .hand.dealer-bj .cards { opacity: .6; }

/* bet controls */
.bet-ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.bet-row { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.attention-btn { grid-column: 1 / -1; margin-top: 6px; min-height: 52px; border-radius: 14px; font: 800 16px var(--font); letter-spacing: .2px;
  border: 2px solid #d4a64a; color: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.45); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.attention-btn small { font: 600 11px var(--font); opacity: .85; letter-spacing: 0; }
.attention-btn.for-pink { background: linear-gradient(180deg, #e0457b, #a8234f); }
.attention-btn.for-blue { background: linear-gradient(180deg, #3f7fe0, #1f4ea8); }
.attention-btn:disabled { opacity: .45; }
.chip-btn { appearance: none; min-height: 44px; min-width: 0; border-radius: 999px; border: 2px dashed rgba(255,255,255,.6); cursor: pointer;
  background: #2f2536; color: #fff; font: 800 13px var(--font); padding: 0 2px; box-shadow: 0 2px 0 rgba(0,0,0,.5); }
.chip-btn.d10 { background: #3a63b5; } .chip-btn.d50 { background: #b0263f; } .chip-btn.d100 { background: #1d1d1d; border-color: #d4a64a; }
.chip-btn.minus { background: #4a3f52; }
.chip-btn.txt { border-style: solid; border-color: rgba(255,255,255,.25); font-weight: 700; }
.chip-btn.allin { background: linear-gradient(90deg, #8a6420, #d4a64a); color: #2b1a00; }
.chip-btn:disabled, .btn:disabled { opacity: .4; cursor: default; }

/* controls under the felt */
.controls { display: flex; flex-direction: column; gap: 8px; }
.turn-pill { align-self: center; padding: 4px 14px; border-radius: 999px; font-weight: 800; font-size: 14px; }
.turn-pill.pink { background: var(--pink-d); } .turn-pill.blue { background: var(--blue-d); }
.moves { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.btn.move { min-height: 54px; font-size: 16px; padding: 8px 4px; }
.btn.move.hit { background: #1f8a4c; border-color: transparent; } .btn.move.stand { background: #b0263f; border-color: transparent; }
.btn.move.double { background: #8a6420; border-color: transparent; } .btn.move.split { background: #3a63b5; border-color: transparent; }
.result-line { font-weight: 600; margin: 0; }

/* ---------- playing cards (pure CSS) ---------- */
.pc { --w: 50px; position: relative; flex: none; width: var(--w); height: calc(var(--w) * 1.4); margin-left: -26px; border-radius: 6px;
  background: linear-gradient(160deg, #fff, #f1ece4); color: #17121b; box-shadow: 0 2px 5px rgba(0,0,0,.45); border: 1px solid #cfc6ba;
  font-family: var(--display); overflow: hidden; }
.pc.red { color: #c3173a; }
.pc b { position: absolute; top: 3px; left: 5px; font-size: 17px; line-height: 1; font-weight: 700; }
.pc i { position: absolute; top: 20px; left: 6px; font-style: normal; font-size: 13px; line-height: 1; }
.pc em { position: absolute; right: 5px; bottom: 2px; font-style: normal; font-size: 26px; line-height: 1; }
.pc.back { background: repeating-linear-gradient(45deg, #7a1d45 0 5px, #5a1233 5px 10px); border: 3px solid #fff; }
.pc.back::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(212,166,74,.8); border-radius: 3px; }
.pc.slot { background: none; border: 2px dashed rgba(212,166,74,.35); box-shadow: none; }
.hand .pc { --w: 44px; margin-left: -24px; }
.hand .cards { padding-left: 24px; }
.pc.deal { animation: deal .32s cubic-bezier(.2,.8,.3,1) both; animation-delay: var(--d); }
@keyframes deal { from { transform: translate(40px, -140px) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pc.deal { animation: none; } }

/* shop modal */
.modal.shop .modal-actions { display: flex; flex-direction: column; gap: 6px; }
.btn.shop-item { text-align: left; border-color: #d4a64a; }
.btn.shop-item small { color: #f3d9a0; }

/* task head */
.task-head { display: flex; align-items: center; gap: 12px; }
.task-screen.buyback .task-card { box-shadow: 0 0 0 2px #d4a64a55 inset; }
.task-screen.cashout .task-card { box-shadow: 0 0 0 2px #d4a64a inset; }

/* small phones (360 x 740) */
@media (max-width: 370px) {
  .felt { padding: 8px 6px 12px; }
  .seats { gap: 5px; } .seat { padding: 6px 5px; }
  .pc { --w: 44px; margin-left: -24px; } .hand .pc { --w: 38px; margin-left: -21px; } .hand .cards { padding-left: 21px; }
  .chip-btn { font-size: 12px; }
  .chips-count { font-size: 16px; }
  .ring { width: 150px; height: 150px; } .timer { width: 130px; height: 130px; }
}

/* landscape / desktop: felt left, controls right */
@media (orientation: landscape) and (min-width: 700px) {
  #app { max-width: 1100px; }
  .table-screen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); grid-template-rows: auto 1fr; gap: 10px 20px; align-content: start; }
  .table-screen .topbar { grid-column: 1 / -1; }
  .table-screen .felt { align-self: start; padding-bottom: 26px; }
  .table-screen .controls { align-self: start; margin-top: 40px; }
  .pc { --w: 62px; margin-left: -30px; } .cards { padding-left: 30px; min-height: 90px; }
  .hand .pc { --w: 54px; margin-left: -28px; } .hand .cards { padding-left: 28px; }
  .task-screen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); grid-template-rows: auto 1fr; gap: 12px 24px; align-content: start; }
  .task-screen .topbar { grid-column: 1 / -1; }
  .screen.mode, .screen.setup, .screen.consent, .screen.lobby, .screen.gate, .screen.finished, .screen.closed { max-width: 560px; margin: 0 auto; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .task-screen .ring { width: 130px; height: 130px; } .task-screen .timer { width: 112px; height: 112px; font-size: 34px; }
  .brand.big { padding-top: 2vh; }
  .table-screen .topbar { grid-column: 2; grid-row: 1; }
  .table-screen .felt { grid-row: 1 / span 2; grid-column: 1; }
  .table-screen .controls { grid-column: 2; grid-row: 2; align-self: start; }
  .felt { gap: 4px; padding: 6px 8px 10px; }
  .dealer { min-height: 0; }
  .pc { --w: 40px; margin-left: -22px; } .cards { padding-left: 22px; min-height: 56px; }
  .hand .pc { --w: 36px; margin-left: -20px; } .hand .cards { padding-left: 20px; min-height: 50px; }
  .bet-spot { min-height: 40px; } .chip.bet { width: 38px; height: 38px; font-size: 12px; }
  .btn.move { min-height: 46px; }
}
/* "10" fits in the visible strip of an overlapped card */
.pc b { letter-spacing: -1.5px; }
.pc.slot + .pc.slot { margin-left: 6px; }
/* v0.1.1 (house standard, as King Me v0.2.2 / Four Play v0.1.2): on phones held upright the action buttons stick to the bottom
   of the screen, so they are on screen without scrolling even on an iPhone SE (375x667): the table's Deal / Ready, Hit / Stand /
   Double / Split and Next hand, and the task screen's Start timer / Done. .task-side becomes display: contents so the button's
   sticky box is the whole screen. */
@media (orientation: portrait) {
  .table-screen .controls { position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 5; padding: 8px; border-radius: 16px;
    background: var(--bg); box-shadow: 0 8px 24px rgba(0, 0, 0, .55); }
  .table-screen .controls .btn.link { min-height: 44px; margin: 0; }
  .task-screen .task-side { display: contents; }
  .task-screen .task-side > .btn, .task-screen .task-side > .done-row { position: sticky; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .55); border-radius: 14px; }
  .task-screen .task-side > .done-row { background: var(--bg); }
  /* "In progress…" is not a button anyone can press: leave it in the flow so it never covers the running timer. */
  .task-screen .task-side > .btn[data-testid="in-progress"] { position: static; box-shadow: none; }
}
/* v0.1.1: the site's shared scoreboard box (/js/nd-stats.js) on the setup screen, with phone-sized tap targets. */
.nds label.nds-on { min-height: 44px; align-items: center; }
.nds .nds-nick input { min-height: 44px; box-sizing: border-box; }