/* Le République — felt v2 design layer.
 * Drop in AFTER public/style.css (desktop) and public/mobile.css (phone).
 * Overrides existing classes where the design changed and adds new classes
 * (marked NEW) for elements the current UI doesn't have yet.
 * Fonts: add to index.html <head>
 *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,700&display=swap">
 */

:root {
  /* existing tokens, unchanged */
  --felt-1: #2f7a4a;
  --felt-2: #1d4f30;
  --ink: #eef6ee;
  --red: #c62828;
  --gold: #c9a227;
  --cream: #f7f1dc;
  --yellow: #ffd54f;
  --label: #ffe082;
  --jester: #5b2a86;
  /* new */
  --page: #161a17;
  --ink-soft: #cfe3d3;              /* secondary text on felt */
  --chip-red: #ff8a80;              /* red suit glyphs/chips on felt */
  --chip-joker: #d7b8f3;            /* Joker chips on felt */
  --panel-dark: rgba(14, 38, 23, .94);
  --inset: rgba(0, 0, 0, .18);
  --four-diamond: #1d4ed8;          /* four-colour deck option */
  --four-club: #047857;
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;

  /* card geometry (desktop) */
  --card-w: 60px;
  --card-h: 84px;
  --peek: 22px;                     /* was 36px: index is now one horizontal row */
  --hand-w: 76px;
  --hand-h: 106px;
}

body.felt-page { font-family: var(--font-sans); background: var(--page); }
.panel h1, .topbar .brand, .result h2, .modal h2, .celebration-banner { font-family: var(--font-serif); }

/* ---------------------------------------------------------- cards */
.card { border-radius: 6px; }
.card.face { box-shadow: 0 1px 3px rgba(0, 0, 0, .45); border: 1px solid rgba(0, 0, 0, .12); }
/* Corner index is ONE row (rank then suit) so a 22px peek shows it in full. */
.card .corner { flex-direction: row; align-items: center; gap: 1px; left: 4px; top: 4px; }
.card .corner b { font-size: 16px; font-weight: 700; letter-spacing: -.05em; }
.card .corner i { font-size: 13px; margin-top: 0; }
.card .pip { font-size: 28px; padding-top: 0; align-items: flex-start; padding-top: 34px; }
.hand.mine .card { width: var(--hand-w); height: var(--hand-h); }
.hand.mine .card .corner { left: 6px; top: 6px; }
.hand.mine .card .corner b { font-size: 19px; }
.hand.mine .card .corner i { font-size: 15px; }
.hand.mine .card .pip { font-size: 38px; padding-top: 40px; }
.card.lose { opacity: .5; filter: grayscale(.6); }                 /* NEW: losing side at reveal */
.card.win { box-shadow: 0 0 0 2px var(--yellow), 0 0 14px 2px rgba(255, 213, 79, .65); } /* NEW */

/* four-colour deck option (NEW): toggle body.four-colour */
body.four-colour .card.face.suit-d { color: var(--four-diamond); }
body.four-colour .card.face.suit-c { color: var(--four-club); }

/* card back: keep stripes; slimmer frame on small backs */
.hand.opp .card.back, .deck .card.back { border-width: 2px; }
.hand.opp .card { width: 46px; height: 64px; }

/* empty slots: full card-size dashed outlines, stacked at the same peek as cards */
.card.slot { border: 2px dashed rgba(215, 239, 220, .45); background: rgba(0, 0, 0, .1); opacity: 1; }
.card.slot.strip { height: var(--card-h); }
.lane.playable .card.slot.next { border-color: rgba(255, 213, 79, .85); background: rgba(255, 213, 79, .12); } /* NEW: the slot your card will land in */
.lane.playable .card.slot.next::after { content: "+"; position: absolute; top: 3px; left: 0; right: 0; text-align: center; color: var(--yellow); font: 600 12px var(--font-mono); }
.stack .card + .card { margin-top: calc(var(--peek) - var(--card-h)); }

/* ---------------------------------------------------------- royalty */
.royal { width: var(--card-w); height: var(--card-h); border-radius: 8px; border-width: 3px; justify-content: flex-start; padding-top: 16px; gap: 1px; }
.royal .idx { position: absolute; left: 5px; top: 5px; font: 700 13px/1 var(--font-sans); white-space: nowrap; } /* NEW: "K♠" / "Jk I" */
.royal b { font-family: var(--font-serif); font-size: 30px; font-weight: 500; }
.royal i { font-size: 14px; }
.royal .pts { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); opacity: 1; font: 700 10px/1.4 var(--font-sans); color: #3a3a3a; background: rgba(0, 0, 0, .07); border-radius: 999px; padding: 1px 6px; white-space: nowrap; }
.royal .jest + .pts, .royal.joker .pts { color: var(--jester); }
.jester-icon { width: 26px; height: 26px; margin-top: 6px; }

/* ---------------------------------------------------------- lanes */
.lane { border-radius: 10px; padding: 6px 0; gap: 6px; }
.lane .side { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; border-radius: 6px; border: 1px solid transparent; } /* NEW wrapper per side */
.lane.playable:hover, .lane.drop-target { background: rgba(255, 213, 79, .22); box-shadow: inset 0 0 0 2px var(--yellow); }
.lane.full { opacity: .45; }
.hl { font-size: 11px; font-weight: 700; color: var(--label); }
.lane.rv .hl { color: rgba(238, 246, 238, .6); font-weight: 500; }
.lane.won-bottom .side.bottom, .lane.won-top .side.top { background: rgba(255, 213, 79, .12); border-color: rgba(255, 213, 79, .55); }
.lane.won-bottom .hl.bottom, .lane.won-top .hl.top { color: var(--yellow); font-weight: 700; }
.lane.won-bottom .hl.bottom::before, .lane.won-top .hl.top::before { content: "✓ "; }
.lane.dead .side { background: rgba(0, 0, 0, .15); border: 1px dashed rgba(238, 246, 238, .25); }
.lane.dead .royal { opacity: .14; }
.lane.resolving { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }                 /* NEW */
.lane.resolving .royal { box-shadow: 0 0 0 3px #fff, 0 0 18px 4px rgba(255, 255, 255, .45); }
/* NEW: points tag to the right of the Royalty card; arrow points at the winner */
.pts-tag { position: absolute; top: 50%; left: calc(50% + 36px); transform: translateY(-50%); z-index: 6; background: var(--yellow); color: #222; border-radius: 999px; padding: 2px 7px; font: 700 11px var(--font-sans); white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.tag { z-index: 6; }

/* ---------------------------------------------------------- whose turn / last move */
.tbl.turn-me .bar.bottom .prompt { font-size: 16px; font-weight: 700; color: var(--label); }
.last-move { display: inline-flex; align-items: center; gap: 6px; color: var(--label); font-weight: 600; } /* NEW: "Marat played 8♦ on Jk I" */
.last-move::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 8px 2px rgba(255, 213, 79, .7); }
.card.flying { transform: rotate(-7deg); box-shadow: 0 0 0 3px var(--yellow), 0 14px 30px rgba(0, 0, 0, .55); } /* NEW: opponent card in flight */
.spectating { display: inline-flex; gap: 8px; padding: 4px 12px; border-radius: 8px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 224, 130, .5); font-size: 13px; } /* NEW */
.spectating b { color: var(--label); }

/* ---------------------------------------------------------- clocks */
.clock { font-weight: 800; border-radius: 6px; display: inline-flex; align-items: center; gap: 5px; }
.clock.running::before { content: "●"; font-size: 10px; }
.clock.low::before { content: "▲"; font-size: 10px; }
.clock.low::after { content: " low"; }
.clock.out::before { content: "✕"; font-size: 10px; }
.clock.paused { color: var(--ink-soft); }                                           /* NEW */
.clock.paused::before { content: "⏸"; font-size: 10px; }
.clock.paused::after { content: " paused"; }

/* ---------------------------------------------------------- tally + chips */
.chip.red { color: var(--chip-red); }
.chip.joker { color: var(--chip-joker); }                                             /* NEW */

/* ---------------------------------------------------------- round-over / match panels */
.strip-panel.result.panel { width: min(900px, 100%); border-radius: 14px; background: var(--panel-dark); }
.strip-panel > h2 { font-size: 23px; }
.score-table th { font-size: 10px; }
.seg-btn.on::before { content: "✓ "; }
.result.offer { box-shadow: 0 12px 50px rgba(0, 0, 0, .6), inset 0 0 0 3px var(--yellow), 0 0 30px 6px rgba(255, 213, 79, .5); }
.celebration-banner { font-size: 48px; padding: 22px 44px; background: rgba(14, 38, 23, .88); }

@media (prefers-reduced-motion: reduce) {
  #fireworks { display: none; }
  .celebration-banner { animation: bannerFade .4s ease-out; }
  .pill.me, .clock.low, .result.offer, .btn.pulse, .offer-banner { animation: none; }
  .royal, .card { transition: none; }
}
@keyframes bannerFade { from { opacity: 0; } to { opacity: 1; } }

/* ======================================================================
 * Client additions: rules the handoff layer implies but doesn't spell out.
 * ====================================================================== */

/* toggles (four-colour deck): "on" is cream with a check */
.btn.toggle.on, .icon-btn.on { background: var(--cream); color: #222; border-color: var(--cream); }
.btn.toggle.on::before { content: "✓ "; }

/* royalty: K and suit ink, jester at 44% of the card height, four-colour suits */
.royal { color: #111; }
.royal .idx { display: flex; align-items: center; gap: 1px; }
.royal .red { color: var(--red); }
.royal .blk { color: #111827; }
body.four-colour .royal .suit-d { color: var(--four-diamond); }
body.four-colour .royal .suit-c { color: var(--four-club); }
.royal b { line-height: 1; }
.royal i { font-style: normal; line-height: 1; margin-top: 1px; }
.royal .jester-icon { width: 37px; height: 37px; margin-top: 4px; }
/* small Royalty cards (rules, rankings): 46 × 64 with a 2px border */
.royal-row .royal { width: 46px; height: 64px; border-width: 2px; padding-top: 12px; }
.royal-row .royal .idx { font-size: 11px; left: 4px; top: 4px; }
.royal-row .royal b { font-size: 23px; }
.royal-row .royal i { font-size: 10px; }
.royal-row .royal .pts { font-size: 9px; bottom: 4px; padding: 0 5px; }
.royal-row .royal .jester-icon { width: 28px; height: 28px; margin-top: 3px; }

/* the "✓ " on a winning lane label keeps its space inside the flex label */
.lane .hl::before { white-space: pre; }