/* ================= Taash Adda · Indian card games ================= */

/* ---- shared entrance animations (added only on a fresh move via ctx.fresh) ---- */
.anim-deal { animation: deal-in 0.34s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes deal-in {
  0%   { transform: translateY(14px) scale(.82) rotate(-4deg); opacity: 0; }
  100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
}
.anim-pop { animation: pop-in 0.3s cubic-bezier(.2,1.4,.5,1) both; }
@keyframes pop-in {
  0%   { transform: scale(0.3); opacity: 0; }
  70%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
.anim-flip { animation: flip-in 0.4s ease both; transform-style: preserve-3d; }
@keyframes flip-in {
  0%   { transform: rotateY(90deg); opacity: 0; }
  100% { transform: rotateY(0); opacity: 1; }
}
.anim-slide { animation: slide-up 0.3s ease-out both; }
@keyframes slide-up {
  0%   { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.anim-drop { animation: drop-in 0.34s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes drop-in {
  0%   { transform: translateY(-18px) scale(.9); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .anim-deal, .anim-pop, .anim-flip, .anim-slide, .anim-drop,
  .cowrie.cast, .cp-die.cast { animation: none !important; }
}

/* ---- vintage Indian litho: ink indigo, vermillion, marigold, brass on paper ---- */
:root {
  --bg1: #16223D;          /* deepest ink */
  --bg2: #1B2A4A;          /* indigo */
  --felt: #1E4D3A;         /* bottle-green table */
  --gold: #E8A33D;         /* marigold (alias kept so all rules re-skin) */
  --marigold: #E8A33D;
  --vermillion: #C1362F;
  --brass: #B08D57;
  --ink: #16223D;
  --paper: #F4EAD5;        /* ivory card stock */
  --danger: #C1362F;
  --ok: #2F7A55;
  --muted: #9DA9C4;
  --rule: rgba(176,141,87,.55);            /* brass hairline */
  --rule-strong: rgba(176,141,87,.85);
  --shadow: 0 12px 28px rgba(0,0,0,.45);
  /* litho is rectilinear — small, deliberate radii instead of soft blobs */
  --r-sm: 3px; --r-md: 5px; --r-lg: 9px;
  /* letterpress paper grain, generated (no image asset) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  font-size: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: 'Karla', system-ui, sans-serif;
  color: var(--paper);
  /* grain rides on top of the wash so the whole table reads as printed paper */
  background:
    var(--grain),
    radial-gradient(1200px 700px at 50% -18%, rgba(232,163,61,.12), transparent 62%),
    linear-gradient(178deg, #16223D 0%, #1B2A4A 46%, #111A2E 100%);
  background-attachment: fixed;
  min-height: 100dvh;
  overflow-x: hidden;
}

h1, h2, h3, .lobby-code, .logo-mini, .gc-name {
  font-family: 'Rozha One', Georgia, serif; font-weight: 400; letter-spacing: .005em;
}
.btn, .turn-banner { font-family: 'Karla', system-ui, sans-serif; font-weight: 800; letter-spacing: .03em; }
.hidden { display: none !important; }
.screen { min-height: 100dvh; display: flex; flex-direction: column; }

/* ---------------- buttons ---------------- */
/* letterpress buttons: flat ink, brass rule, a single crisp shoulder — no gloss */
.btn {
  border: 1px solid var(--rule); cursor: pointer; border-radius: var(--r-md);
  font-size: 0.95rem; padding: 0.66rem 1.3rem;
  transition: transform 0.1s ease, box-shadow 0.12s ease, filter 0.12s, background 0.12s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary {
  background: var(--marigold); color: #3B2609; border-color: #8C5F1E;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 0 #8C5F1E;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-secondary {
  background: #26406E; color: var(--paper); border-color: var(--rule);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 0 #101B33;
}
.btn-ghost { background: rgba(244,234,213,.06); color: var(--paper); border-color: var(--rule); }
.btn-ghost:hover { background: rgba(244,234,213,.13); }
.btn-danger {
  background: var(--vermillion); color: #fff; border-color: #7E211C;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 2px 0 #7E211C;
}
.btn-small {
  padding: 0.3rem 0.7rem; font-size: 0.74rem; border-radius: var(--r-sm);
  text-transform: uppercase; letter-spacing: .07em;
}

/* ---------------- home / lobby ---------------- */
#screen-home, #screen-lobby { align-items: center; justify-content: center; padding: 1rem; }
/* printed panel: ink stock, brass double-rule, paper grain — no frosted glass */
.home-card {
  background: var(--grain), linear-gradient(180deg, rgba(27,42,74,.94), rgba(17,26,46,.96));
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg); padding: 1.8rem 1.9rem; width: min(430px, 94vw);
  box-shadow: var(--shadow), inset 0 0 0 3px rgba(176,141,87,.13);
  text-align: center;
  display: flex; flex-direction: column; gap: 0.9rem;
}
.home-wide { width: min(560px, 96vw); }
.logo-coin {
  font-size: 2rem; display: grid; place-items: center; width: 62px; height: 62px;
  margin: 0 auto 2px; border: 1px solid var(--rule-strong); border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, rgba(232,163,61,.22), rgba(0,0,0,.3));
  box-shadow: inset 0 0 0 3px rgba(176,141,87,.12);
}
.logo h1 {
  font-size: 3rem; color: var(--marigold);
  background: none; -webkit-background-clip: initial; background-clip: initial;
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}
.tagline { color: var(--brass); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; font-size: 0.68rem; }
.home-form { display: flex; flex-direction: column; gap: 0.7rem; text-align: left; }
.home-form label { font-weight: 700; font-size: 0.85rem; color: #cdd7f0; }
.home-form input, .join-row input {
  width: 100%; padding: 0.68rem 0.9rem; border-radius: var(--r-sm);
  border: 1px solid var(--rule); background: rgba(8,14,26,.55);
  color: var(--paper); font-size: 1.02rem; font-weight: 600; outline: none; font-family: inherit;
}
.home-form input:focus { border-color: var(--marigold); box-shadow: inset 0 0 0 1px rgba(232,163,61,.35); }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; }
#code-input { text-transform: uppercase; letter-spacing: 8px; text-align: center; font-family: 'Rozha One', Georgia, serif; }
.home-hint { color: var(--muted); font-size: 0.78rem; }

.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; }
.game-card {
  background: rgba(10,17,32,.5); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: 0.8rem 0.5rem 0.7rem; cursor: pointer; color: var(--paper);
  font-family: inherit; display: flex; flex-direction: column; gap: 3px; align-items: center;
  transition: transform .12s, border-color .12s, background .12s;
}
.game-card:hover { transform: translateY(-2px); border-color: var(--brass); background: rgba(14,24,44,.7); }
.game-card.picked { border-color: var(--marigold); box-shadow: inset 0 0 0 2px rgba(232,163,61,.3); }
/* emoji framed in a brass medallion so it reads as a struck mark, not a raw glyph */
.gc-icon {
  font-size: 1.35rem; width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, rgba(232,163,61,.16), rgba(0,0,0,.28));
}
.gc-name { font-size: 1.06rem; letter-spacing: .01em; }
.gc-tag { font-size: 0.66rem; color: var(--muted); line-height: 1.25; }
.gc-players { font-size: 0.6rem; color: var(--brass); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.lobby-label { color: var(--muted); font-weight: 600; font-size: .85rem; }
.lobby-code {
  font-size: 3.1rem; letter-spacing: 14px; padding-left: 14px;
  color: var(--marigold); text-shadow: 0 1px 0 rgba(0,0,0,.5); user-select: all; cursor: pointer;
}
.lobby-players { display: flex; flex-direction: column; gap: 0.45rem; }
.lobby-player {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.9rem;
  background: rgba(10,17,32,.5); border: 1px solid var(--rule);
  border-radius: var(--r-sm); font-weight: 700;
}
.lobby-player .avatar { font-size: 1.3rem; }
.lobby-player .host-tag {
  margin-left: auto; font-size: 0.62rem; color: var(--brass); border: 1px solid var(--rule);
  padding: 2px 8px; border-radius: var(--r-sm); text-transform: uppercase; letter-spacing: .08em;
}

/* ---------------- game chrome ---------------- */
#screen-game { padding: 0.5rem 0.8rem 0.8rem; gap: 0.5rem; max-width: 1100px; margin: 0 auto; width: 100%; }
.topbar { display: flex; align-items: center; gap: 0.8rem; }
.logo-mini { font-size: 1.2rem; }
.room-tag {
  font-size: 0.7rem; background: rgba(10,17,32,.55); border: 1px solid var(--rule);
  padding: 3px 10px; border-radius: var(--r-sm); letter-spacing: 2px; font-weight: 700; color: var(--brass);
}
.turn-banner {
  flex: 1; text-align: center; font-size: 0.95rem;
  padding: 0.4rem 1rem; border-radius: var(--r-sm);
  background: rgba(10,17,32,.5); border: 1px solid var(--rule);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.turn-banner.mine {
  background: linear-gradient(90deg, rgba(232,163,61,.2), rgba(193,54,47,.16));
  color: #FBE7C2; border-color: var(--marigold);
}
.game-root { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }

/* shared game widgets */
.ta-opps { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.ta-opp {
  background: rgba(10,17,32,.5); border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: 0.42rem 0.75rem; display: flex; align-items: center; gap: 0.5rem;
  font-weight: 700; font-size: 0.88rem; flex-wrap: wrap;
}
.ta-opp.turn { border-color: var(--marigold); box-shadow: inset 0 0 0 1px rgba(232,163,61,.4); }
.ta-opp.dim { opacity: 0.42; }
.ta-opp .avatar { font-size: 1.1rem; }
.ta-count { color: var(--brass); font-size: 0.76rem; font-weight: 700; }
.ta-alert { color: #ff8f8f; font-size: 0.75rem; font-weight: 800; animation: pulse-gold 1.2s infinite; border-radius: 8px; padding: 0 6px; }
/* the table: bottle-green felt, grained, held in a brass double rule */
.ta-center {
  display: flex; align-items: center; justify-content: center; gap: 1.6rem; padding: 0.9rem;
  background: var(--grain),
    radial-gradient(ellipse at 50% 0%, rgba(244,234,213,.07), transparent 68%),
    linear-gradient(180deg, rgba(30,77,58,.62), rgba(18,52,39,.55));
  border: 1px solid var(--rule);
  box-shadow: inset 0 0 0 3px rgba(176,141,87,.1);
  border-radius: var(--r-lg); min-height: 120px; flex-wrap: wrap;
}
.ta-centertext { font-weight: 600; color: #EDE3CD; max-width: 420px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.ta-lastlog { font-size: 0.78rem; color: var(--muted); font-weight: 500; }
.ta-bar { display: flex; gap: 0.6rem; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 44px; }
.ta-hint { font-size: 0.85rem; color: #cdd7f0; font-weight: 700; }
.ta-hand { display: flex; justify-content: center; flex-wrap: wrap; padding: 4px; row-gap: 10px; }
.ta-hand .pcard { margin: 0 -9px; }
@media (hover: hover) { .ta-hand .pcard:hover { margin: 0 4px; transform: translateY(-8px); z-index: 5; } }

/* ---------------- playing cards (crisp SVG faces) ---------------- */
.pcard {
  width: 64px; height: 90px; border-radius: var(--r-md); position: relative;
  background: var(--grain), linear-gradient(165deg, #FBF4E4, #EFE3C9);
  border: 1px solid rgba(22,34,61,.3);
  box-shadow: 0 3px 7px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.5);
  flex-shrink: 0; padding: 0; overflow: hidden;
  transition: transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .14s;
}
.pcard .pc-svg { width: 100%; height: 100%; display: block; }
.pcard .pc-svg text { text-anchor: middle; dominant-baseline: middle; }
.pcard .idx-r { font: 800 24px 'Karla', system-ui, sans-serif; fill: var(--suit, #20262f); text-anchor: middle; }
.pcard .idx-s { font: 700 15px sans-serif; fill: var(--suit, #20262f); text-anchor: middle; }
.pcard .pip { font: 26px sans-serif; fill: var(--suit); text-anchor: middle; }
.pcard .pip-ace { font: 62px sans-serif; fill: var(--suit); text-anchor: middle; }
.pcard .court-frame { fill: color-mix(in srgb, var(--suit) 12%, #fffefb); stroke: var(--suit); stroke-width: 1.5; }
.pcard .court-letter { font: 800 38px 'Karla', system-ui, sans-serif; fill: var(--suit); text-anchor: middle; }
.pcard .court-suit { font: 20px sans-serif; fill: var(--suit); text-anchor: middle; }
.pcard .court-motif { font: 26px sans-serif; fill: var(--suit); opacity: .55; text-anchor: middle; }
.pcard .joker-face { font: 46px sans-serif; text-anchor: middle; }
.pcard .joker-name { font: 800 12px 'Karla', system-ui, sans-serif; fill: #8b5cf6; letter-spacing: 1px; text-anchor: middle; }
.pcard.clickable { cursor: pointer; }
.pcard.selected { outline: 3px solid var(--gold); outline-offset: -1px; transform: translateY(-9px); box-shadow: 0 10px 20px rgba(0,0,0,.5); }
.pcard.glow { box-shadow: 0 0 0 2px rgba(242,194,48,.85), 0 5px 14px rgba(0,0,0,.5); }
.pcard:disabled { opacity: 0.5; filter: grayscale(.3); }
.pcard-sm { width: 46px; height: 66px; border-radius: 6px; }
.pcard-back {
  background: linear-gradient(160deg, #7c3aed, #5b21b6);
  border-color: #4c1d95;
}
.pcard-back .back-panel { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 2;
  stroke-dasharray: 4 3; }
.pcard-back .back-mark { font: 34px sans-serif; text-anchor: middle; dominant-baseline: middle; opacity: .9; }
.rm-wildmark { outline: 2px dashed #8b5cf6; }

/* ---------------- sevens ---------------- */
.sv-board { display: flex; flex-direction: column; gap: 6px; padding: 0.8rem; background: linear-gradient(180deg, rgba(23,96,63,.55), rgba(23,96,63,.35)); border-radius: 16px; border: 1px solid rgba(255,255,255,.1); }
.sv-row { display: flex; align-items: center; gap: 8px; }
.sv-suit { font-size: 1.3rem; width: 28px; text-align: center; }
.sv-row.red .sv-suit { color: #ff8f8f; }
.sv-line { display: flex; gap: 3px; flex: 1; }
.sv-cell {
  flex: 1; text-align: center; border-radius: 5px; font-size: 0.72rem; font-weight: 800;
  padding: 5px 0; background: rgba(0,0,0,0.3); color: rgba(255,255,255,0.25);
}
.sv-cell.seven { border: 1px dashed rgba(242,194,48,.5); }
.sv-cell.played { background: #fdf6e3; color: var(--ink); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
/* frontier cells you can play onto this turn — teaches placement at a glance */
.sv-cell.playable { border: 1px solid var(--marigold); background: rgba(232,163,61,.18); color: #ffe9a3;
  animation: pulse-gold 1.2s infinite; }
/* an opponent down to their last cards */
.ta-opp.sv-danger { animation: pulse-gold 1s infinite; }
.ta-opp.sv-danger .ta-count { color: #F6A8A2; font-weight: 800; }
/* least count: your own race-to-100 score, hot when elimination nears */
.lc-myscore { font-weight: 800; color: #C9D3EA; margin-top: 2px; }
.lc-myscore.hot { color: #F6A8A2; text-shadow: 0 0 8px rgba(224,60,49,.5); }
.tp-result.lc-good { color: #7EE0A8; }
.tp-result.lc-bad { color: #F6A8A2; }
/* teen patti: your named hand once seen */
.tp-handname { margin-top: 6px; text-align: center; font-weight: 800; color: #FFD98A; font-size: 1.02rem;
  text-shadow: 0 1px 3px rgba(0,0,0,.5); }
/* rummy: the safe-to-throw card gets a subtle green under-glow */
.pcard.rm-safe { box-shadow: 0 0 0 2px rgba(47,122,85,.7), 0 4px 10px rgba(0,0,0,.4); }
.pcard.rm-safe::after { content: '↓'; position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: #7EE0A8; font-weight: 800; }

/* ---------------- bluff ---------------- */
.bl-pile { width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(circle, #7c3aed, #4c1d95); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,.45); }
.bl-pile-count { font-size: 1.8rem; font-family: 'Rozha One', Georgia, serif; color: #FFD98A; }
.bl-pile-label { font-size: 0.6rem; font-weight: 700; color: #ddd1ff; }
.bl-claim { font-weight: 800; font-size: 1.05rem; color: #ffe9a3; }
.bl-rankgrid { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.bl-rankbtn { position: relative; }
.bl-held { position: absolute; top: -6px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
  background: #2F7A55; color: #fff; font-size: 9px; font-weight: 800; line-height: 15px; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
/* the challenge reveal: flipped cards tinted by the verdict */
.bl-reveal { margin-top: 10px; padding: 8px 10px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 2px solid; animation: pop-in 0.3s ease both; }
.bl-reveal.lie   { border-color: #2F7A55; background: rgba(47,122,85,.16); }
.bl-reveal.truth { border-color: #C1362F; background: rgba(193,54,47,.16); }
.bl-reveal-tag { font-weight: 800; font-size: 0.95rem; }
.bl-reveal.lie   .bl-reveal-tag { color: #7EE0A8; }
.bl-reveal.truth .bl-reveal-tag { color: #F6A8A2; }
.bl-reveal-cards { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }

/* ---------------- court piece ---------------- */
.cp-score { display: flex; justify-content: center; gap: 1rem; font-weight: 800; align-items: center; flex-wrap: wrap; }
.cp-team { background: rgba(255,255,255,.08); padding: 4px 14px; border-radius: 99px; font-size: 0.9rem; }
.cp-team.mine { box-shadow: inset 0 0 0 1px var(--gold); color: #ffe9a3; }
.cp-rang { font-size: 1.05rem; color: var(--gold); }
.cp-rang.set { font-weight: 800; text-shadow: 0 0 10px rgba(232,163,61,.55); }
/* mark trump cards in your own hand so you never lose track of the rang */
.cp-trumpcard { position: relative; }
.cp-trumpcard::after { content: '★'; position: absolute; top: 1px; right: 2px; font-size: 9px; color: var(--marigold);
  text-shadow: 0 1px 2px rgba(0,0,0,.8); pointer-events: none; }
.cp-table { display: flex; justify-content: center; gap: 1rem; align-items: center; padding: 0.9rem; background: linear-gradient(180deg, rgba(23,96,63,.55), rgba(23,96,63,.35)); border-radius: 16px; border: 1px solid rgba(255,255,255,.1); min-height: 120px; flex-wrap: wrap; }
.cp-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cp-who { font-size: 0.7rem; font-weight: 800; color: #cdd7f0; }
.cp-trumpgrid { display: flex; gap: 0.8rem; justify-content: center; }
.cp-suitbtn { font-size: 1.8rem; padding: 0.5rem 1.2rem; }
.cp-suitbtn.red { color: #c0392b; }

/* ---------------- donkey (bhabhi) ---------------- */
.dk-trick { display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.4rem; }
.dk-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.dk-led { font-size: 1rem; color: var(--gold); font-weight: 800; }

/* ---------------- teen patti ---------------- */
.tp-pot { width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, #b8860b, #7a5800); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,.45); }
.tp-pot-num { font-size: 1.9rem; font-family: 'Rozha One', Georgia, serif; color: #FFD98A; }
.tp-pot-label { font-size: 0.62rem; font-weight: 700; color: #ffe9a3; }
.tp-status { font-size: 0.7rem; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: rgba(0,0,0,.3); }
.tp-status.seen { color: #ffd45e; }
.tp-status.folded, .tp-status.out { color: #ff9c9c; }
.tp-reveal { display: flex; gap: 3px; width: 100%; justify-content: center; }
.tp-mine { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.tp-chips { font-weight: 800; color: #ffe9a3; }
.tp-result { font-weight: 800; color: #ffd45e; }

/* ---------------- rummy ---------------- */
.rm-deck { position: relative; cursor: default; }
.rm-decknum { position: absolute; bottom: 4px; width: 100%; text-align: center; font-size: 0.7rem; font-weight: 800; color: #ffe9a3; text-shadow: 0 1px 2px #000; }
.rm-wild { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rm-groups { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; min-height: 10px; }
.rm-group { border-radius: 12px; padding: 5px 7px; background: rgba(0,0,0,.28); border: 1.5px solid rgba(255,255,255,.15); }
.rm-group.ok { border-color: rgba(46,158,91,.7); }
.rm-group.bad { border-color: rgba(217,59,59,.8); }
.rm-gtag { font-size: 0.62rem; font-weight: 800; color: #cdd7f0; margin-bottom: 3px; text-align: center; }
.rm-grow { display: flex; }
.rm-grow .pcard { margin: 0 -12px 0 0; }

/* ---------------- modals, log, toast, fx ---------------- */
.modal-root { position: fixed; inset: 0; background: rgba(14, 10, 22, 0.75); display: flex; align-items: center; justify-content: center; z-index: 50; backdrop-filter: blur(4px); padding: 1rem; }
.modal {
  background: linear-gradient(180deg, #2c2140, #221935);
  border: 1px solid rgba(255,255,255,0.18); border-radius: 20px;
  padding: 1.4rem; max-width: 640px; width: 100%; max-height: 86dvh; overflow-y: auto;
  box-shadow: var(--shadow); text-align: center; display: flex; flex-direction: column; gap: 0.9rem;
  animation: modal-in .22s ease-out;
}
.modal h3 { font-size: 1.25rem; color: #ffe9a3; }
.modal .modal-sub { color: #cdd7f0; font-size: 0.9rem; }
.modal-btns { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
@keyframes modal-in { from { transform: scale(.92) translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.winner-overlay .trophy { font-size: 4.2rem; animation: bounce 1.2s infinite; }
@keyframes bounce { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-14px);} }
.confetti { position: fixed; top: -12px; font-size: 1.3rem; animation: fall linear forwards; z-index: 60; pointer-events: none; }
@keyframes fall { to { transform: translateY(110dvh) rotate(720deg); } }

.toast {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg,#ff6b6b,var(--danger)); color: #fff; font-weight: 800;
  padding: 0.6rem 1.3rem; border-radius: 99px; z-index: 80;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); font-size: 0.9rem; max-width: 92vw; text-align: center;
}
.toast.info { background: linear-gradient(180deg,#4c6ef5,#3b5bdb); }

.log-panel { position: fixed; right: 12px; top: 56px; width: min(320px, 92vw); max-height: 60dvh; background: rgba(24, 16, 36, 0.97); border: 1px solid rgba(255,255,255,0.2); border-radius: 14px; z-index: 40; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.log-head { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.9rem; font-weight: 800; color: var(--gold); }
.log-body { overflow-y: auto; padding: 0 0.9rem 0.9rem; display: flex; flex-direction: column; gap: 5px; font-size: 0.8rem; color: #dce4f5; }

@keyframes pulse-gold { 0%,100% { box-shadow: 0 0 0 0 rgba(242,194,48,.6);} 50% { box-shadow: 0 0 0 8px rgba(242,194,48,0);} }

@media (prefers-reduced-motion: reduce) {
  .confetti, .winner-overlay .trophy, .modal, .ta-alert { animation: none !important; }
}

/* ---------------- mobile ---------------- */
@media (max-width: 720px) {
  :root { font-size: 14px; }
  #screen-game { padding: 0.3rem 0.45rem 0.6rem; gap: 0.4rem; }
  .topbar { gap: 0.35rem; }
  .btn-txt { display: none; }
  .turn-banner { font-size: 0.8rem; padding: 0.28rem 0.5rem; }
  .topbar .btn-small { padding: 0.28rem 0.45rem; font-size: 0.85rem; }
  .pcard { width: 52px; height: 76px; }
  .pcard .pc-center { font-size: 1.5rem; }
  .ta-hand .pcard { margin: 0 -12px; }
  .sv-cell { font-size: 0.6rem; padding: 4px 0; }
  .ta-center { gap: 0.9rem; min-height: 100px; padding: 0.5rem; }
}

/* ---------------- home card win line ---------------- */
.gc-win { font-size: 0.6rem; color: #ffd7a1; font-weight: 700; line-height: 1.2; margin-top: 2px; }

/* ---------------- chaupar board ---------------- */
/* Chaupar player strip: avatar face with a glossy seat-colour pawn chip badge */
.cp-plr-av { position: relative; display: inline-flex; flex: none; }
.cp-seatdot {
  position: absolute; right: -3px; bottom: -2px; width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 1.5px solid rgba(12,18,32,.9);
  background-image: radial-gradient(circle at 34% 28%, rgba(255,255,255,.85) 0 12%, rgba(255,255,255,0) 55%);
  box-shadow: 0 1px 3px rgba(0,0,0,.6), inset 0 -2px 3px rgba(0,0,0,.35);
}
.cp-plr-name { font-weight: 700; }
.cp-board {
  display: grid; grid-template-columns: repeat(21, 1fr); grid-template-rows: repeat(21, 1fr);
  width: min(96vw, 520px); aspect-ratio: 1; margin: 0 auto; gap: 1px;
  background: transparent; padding: 0;
}
/* off-cross corners are just table: no fill */
.cp-empty { background: transparent !important; box-shadow: none; }
/* min-width/height:0 stops a cell from growing to fit its pawn, so the 1fr grid
   tracks stay a fixed equal size no matter what sits in them (the board never
   resizes when pawns move) */
.cp-cell { position: relative; min-width: 0; min-height: 0; border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 0.5rem; overflow: visible; }
.cp-track { background: #F1E6CC; color: #8A6A2F; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,.15); }
/* safe squares get a light-blue tile (like a real Chaupad board) so they stay
   recognisable even when a pawn sits on top and hides the ★ glyph */
.cp-safe { background: #AFCBDE; color: #1B4A6B; font-size: 0.7rem; box-shadow: inset 0 0 0 1px rgba(31,96,145,.4); }
.cp-centre { background: linear-gradient(135deg,#ffe9a3,#f2c230); }
.cp-centre:last-child { font-size: 0.9rem; }
.cp-yard { border-radius: 3px; }
/* pawns read as glossy turned tokens: a bright top-left highlight, a darker
   lower rim and a real contact shadow — layered OVER the inline seat colour */
.cp-token {
  position: relative;
  width: 74%; height: 74%; border-radius: 50%; box-sizing: border-box; flex: none;
  border: 1px solid rgba(0,0,0,0.4);
  background-image:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.9) 0 5%, rgba(255,255,255,.4) 16%, rgba(255,255,255,0) 46%),
    radial-gradient(circle at 50% 116%, rgba(0,0,0,.5), rgba(0,0,0,0) 58%);
  box-shadow:
    0 2px 4px rgba(0,0,0,.55),
    inset 0 -3px 5px rgba(0,0,0,.32),
    inset 0 2px 3px rgba(255,255,255,.45),
    inset 0 0 0 2px rgba(255,255,255,.14);
}
/* pieces sharing a cell keep the same round shape: absolutely stacked and
   fanned so the grid cell never stretches, no matter how many pile up */
.cp-token.cp-stack {
  position: absolute; top: 50%; left: 50%;
  width: 56%; height: 56%; border-radius: 50%;
  transform: translate(calc(-50% + var(--dx, 0px)), -50%);
  /* keep the gloss, just add the fan's drop shadow */
  box-shadow: 0 2px 4px rgba(0,0,0,.6), inset 0 -2px 4px rgba(0,0,0,.3), inset 0 2px 3px rgba(255,255,255,.4);
}
/* a bawli: a finished pawn back out hunting, drawn a darker shade */
.cp-token.cp-bawli { filter: brightness(0.55) saturate(1.3); border-color: rgba(0,0,0,.75); border-width: 2px; }
.cp-token.cp-legal { cursor: pointer; animation: pulse-gold 1.1s infinite; outline: 2px solid var(--gold); }
/* a seat shape inside each disc so hue isn't the only cue (colourblind support) */
.cp-glyph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 8px; line-height: 1;
  color: rgba(255,255,255,.92); text-shadow: 0 1px 1px rgba(0,0,0,.6); pointer-events: none; }
/* a persistent faint ring on MY pawns, so I can spot them even off-turn */
.cp-token.cp-mine { box-shadow: 0 2px 4px rgba(0,0,0,.55), inset 0 -3px 5px rgba(0,0,0,.32),
  inset 0 2px 3px rgba(255,255,255,.45), inset 0 0 0 2px rgba(255,255,255,.14), 0 0 0 2px rgba(255,241,190,.55); }
/* the capture flash: a cut pawn shakes and flares red as it's knocked home */
@keyframes cpCutFlash {
  0%   { transform: scale(1) rotate(0); box-shadow: 0 0 0 0 rgba(224,60,49,.9); }
  15%  { transform: scale(1.4) rotate(-9deg); }
  35%  { transform: scale(1.28) rotate(9deg); box-shadow: 0 0 16px 7px rgba(224,60,49,.85); }
  65%  { transform: scale(1.1) rotate(-4deg); }
  100% { transform: scale(1) rotate(0); box-shadow: 0 0 0 0 rgba(224,60,49,0); }
}
.cp-token.cp-cut-flash { animation: cpCutFlash .6s ease-out; z-index: 45; }
/* the winner's centre pulses gold */
@keyframes cpCentreWin { 0%,100% { box-shadow: 0 0 0 0 rgba(242,194,48,.7); } 50% { box-shadow: 0 0 22px 10px rgba(242,194,48,.85); } }
.cp-cell.cp-centre-win { animation: cpCentreWin 1s ease-in-out infinite; z-index: 5; }
/* the always-on cowrie score key + read-only banked chips during a grace chain */
.cp-scorekey { width: 100%; text-align: center; font: 700 12.5px 'Karla', system-ui, sans-serif; color: #E3BE6E; opacity: .95; letter-spacing: .2px; }
.cp-chip.locked { opacity: .85; cursor: default; background: rgba(255,255,255,.08); }
.cp-die {
  width: 38px; height: 38px; border-radius: 9px; background: #fdf6e3; color: #22223b;
  display: flex; align-items: center; justify-content: center; font-family: 'Karla', system-ui, sans-serif;
  font-weight: 800; font-size: 1.3rem; box-shadow: 0 3px 8px rgba(0,0,0,.4);
}
@media (max-width: 720px) { .cp-board { width: min(98vw, 440px); } }

/* ---------------- audit fixes: bluff endgame prompt + chaupar mobile taps ---- */
.bl-lastcall {
  width: 100%; text-align: center; font-weight: 800; font-size: 0.9rem;
  color: #ffd7a1; background: rgba(217,59,59,0.22); border: 1px solid rgba(255,143,143,.5);
  border-radius: 12px; padding: 0.5rem 0.8rem; animation: pulse-gold 1.3s infinite;
}
@media (max-width: 720px) {
  .cp-board { width: min(99vw, 460px); }
  /* a legal token grows for a comfortable tap target but stays ROUND (a full
     circle, not a rounded square) — percentage size so the grid never resizes */
  .cp-token.cp-legal { width: 92%; height: 92%; border-radius: 50%; }
}

/* ---------------- chaupar cowrie shells ---------------- */
.cp-tray { display: flex; align-items: center; gap: 5px; padding: 6px 10px; background: rgba(0,0,0,.28); border-radius: 12px; }
.cowrie {
  width: 21px; height: 27px; border-radius: 50% / 44%;
  box-shadow: inset 0 -3px 4px rgba(90,60,20,.42), inset 0 2px 3px rgba(255,255,255,.5),
              0 2px 3px rgba(0,0,0,.45);
}
/* closed = the smooth domed BACK of the cowrie shell */
.cowrie.closed { background: radial-gradient(ellipse at 50% 30%, #F3E7C8 0%, #CDAE72 58%, #A5824B 100%); }
/* open = mouth up: pale belly with the toothed slit down the middle */
.cowrie.open {
  background: radial-gradient(ellipse at 50% 42%, #FFFCF3, #E6D7B5); position: relative;
}
.cowrie.open::after {
  content: ''; position: absolute; left: 50%; top: 20%; transform: translateX(-50%);
  width: 4px; height: 60%; border-radius: 3px;
  background: repeating-linear-gradient(#6E4F24 0 1.5px, rgba(110,79,36,.15) 1.5px 3.5px);
  box-shadow: 0 0 0 1px rgba(110,79,36,.25);
}
.cp-die.grace { background: linear-gradient(180deg, #ffe9a3, #f2c230); box-shadow: 0 0 0 2px var(--gold), 0 3px 8px rgba(0,0,0,.4); }
/* each shell tumbles in and flips to reveal open/closed when freshly cast */
.cowrie.cast { animation: cowrie-drop 0.42s cubic-bezier(.2,1.3,.5,1) both; }
@keyframes cowrie-drop {
  0%   { transform: translateY(-14px) rotate(-140deg) scale(.6); opacity: 0; }
  60%  { transform: translateY(2px) rotate(12deg) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
}
.cp-die.cast { animation: cp-die-pop 0.3s ease-out 0.34s both; }
@keyframes cp-die-pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* banked-throw chips: pick which value to spend */
.cp-bar { flex-wrap: wrap; }
.cp-chips { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cp-chip {
  min-width: 30px; height: 30px; padding: 0 7px; border-radius: 8px;
  background: rgba(255,255,255,.1); color: #eef; font-weight: 800; font-size: 0.95rem;
  border: 1.5px solid rgba(255,255,255,.22); cursor: pointer;
}
.cp-chip.sel { background: linear-gradient(180deg, #ffe9a3, #f2c230); color: #3a2c00; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(242,194,48,.35); }
.cp-chip.dead { opacity: 0.4; }
.cp-chip.cp-launch { border-width: 2px; }
.cp-chip.po { background: rgba(126,224,168,.22); border-color: rgba(126,224,168,.55); }
.cp-chip.po.sel { background: linear-gradient(180deg, #ffe9a3, #f2c230); }
.cp-cut { font-size: 0.9rem; }
.cp-team-badge { font-size: 0.62rem; font-weight: 800; padding: 1px 6px; border-radius: 8px; letter-spacing: .3px; }
.cp-team-badge.team0 { background: rgba(217,59,59,.28); color: #ffd0c4; }
.cp-team-badge.team1 { background: rgba(76,110,245,.28); color: #cdd7ff; }
.lobby-toggle { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 8px 0; font-weight: 700; color: #dfe6ff; cursor: pointer; }
.lobby-toggle.locked { opacity: 0.7; cursor: default; }
.lobby-toggle input { width: 18px; height: 18px; accent-color: var(--gold); }
/* device-local play stats on the home screen */
.home-stats { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; }
.stats-line { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.stats-pill { font-size: 0.72rem; font-weight: 800; color: #dfe6ff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 2px 10px; }
.stats-pill.hot { background: rgba(242,120,48,.24); color: #ffd9b0; border-color: rgba(242,120,48,.5); }
.stats-badges { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.stats-badge { font-size: 1.1rem; cursor: default; }
.cp-token.cp-hopping { z-index: 30; box-shadow: 0 4px 10px rgba(0,0,0,.5); }
@media (max-width: 720px) { .cowrie { width: 16px; height: 21px; } }

/* ---------------- graphics polish (v: felt & depth) ---------------- */
.game-root {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, rgba(23,80,60,.35), rgba(18,50,40,.25));
  border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
  padding: 0.6rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.ta-hand {
  background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.24));
  border-radius: 14px; padding: 8px 6px 6px; margin-top: 2px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.3);
}
.ta-center, .cp-board, .sv-board, .cp-table {
  box-shadow: inset 0 2px 14px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
}
.btn-primary { text-shadow: 0 1px 0 rgba(255,255,255,.3); }
.turn-banner.mine { text-shadow: 0 1px 3px rgba(0,0,0,.4); }
@media (max-width: 720px) {
  .pcard { width: 50px; height: 71px; border-radius: 7px; }
  .pcard-sm { width: 40px; height: 57px; }
}
.ta-reveal { display: flex; gap: 2px; justify-content: center; flex-wrap: wrap; margin-top: 3px; }

/* ---------------- trick resolution (Court Piece / Judgement) ----------------
   the completed trick stays on the table until the next lead: the winning card
   lifts and stays lit, the beaten cards recede. */
.cp-slot, .jd-slot { transition: transform .22s ease, opacity .22s ease; }
.cp-slot.won, .jd-slot.won { transform: translateY(-7px); }
.cp-slot.won .pcard, .jd-slot.won .pcard {
  box-shadow: 0 0 0 2px var(--marigold), 0 8px 18px rgba(0,0,0,.5);
}
.cp-slot.lost, .jd-slot.lost { opacity: .5; }
.dk-slot { transition: transform .22s ease; }
.dk-slot.won { transform: translateY(-7px); }
.dk-slot.won .pcard { box-shadow: 0 0 0 2px var(--marigold), 0 8px 18px rgba(0,0,0,.5); }
.dk-slot.lead .pcard { box-shadow: 0 0 0 2px #E8A33D, 0 4px 10px rgba(0,0,0,.45); }
/* judgement: coloured bid status + round summary card */
.jd-onbid { color: #7EE0A8 !important; font-weight: 800; }
.jd-busted { color: #F6A8A2 !important; font-weight: 800; }
.jd-summary { margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(232,163,61,.4); min-width: 220px; }
.jd-summary-h { font-weight: 800; color: var(--marigold); text-align: center; margin-bottom: 5px; font-size: .92rem; }
.jd-summary-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 2px 0; font-size: .86rem; }
.jd-sum-mid { color: var(--muted); font-size: .78rem; }
.jd-sum-hit { color: #7EE0A8; font-weight: 800; }
.jd-sum-miss { color: #F6A8A2; font-weight: 800; }

/* ---------------- emotes, banter, undo, turn timer, match board ---------------- */
.emote-bar {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  padding: 6px 4px 2px;
}
.emote-btn {
  background: rgba(10,17,32,.55); border: 1px solid var(--rule); color: var(--paper);
  border-radius: var(--r-sm); padding: 4px 9px; font-size: 1rem; cursor: pointer;
  font-family: inherit; line-height: 1.4; transition: transform .1s, background .12s;
}
.emote-btn:hover { background: rgba(232,163,61,.16); border-color: var(--brass); }
.emote-btn:active { transform: translateY(1px); }
.emote-word { font-size: .74rem; font-weight: 700; letter-spacing: .03em; }

.emote-feed {
  position: fixed; top: 58px; right: 10px; z-index: 40;
  display: flex; flex-direction: column; gap: 5px; align-items: flex-end;
  pointer-events: none;
}
.emote-bubble {
  display: flex; align-items: center; gap: 7px;
  background: var(--grain), linear-gradient(180deg, rgba(27,42,74,.96), rgba(17,26,46,.96));
  border: 1px solid var(--rule-strong); border-radius: var(--r-md);
  padding: 5px 11px; font-size: .84rem; font-weight: 700; color: var(--paper);
  box-shadow: 0 6px 16px rgba(0,0,0,.45);
  animation: pop-in .26s cubic-bezier(.2,1.3,.5,1) both;
}
.eb-name { color: var(--brass); font-size: .74rem; }
.eb-txt { font-size: 1rem; }

.undo-chip {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60;
  background: var(--vermillion); color: #fff; border: 1px solid #7E211C;
  border-radius: var(--r-md); padding: .5rem 1.1rem; font-family: inherit;
  font-weight: 800; font-size: .86rem; cursor: pointer; letter-spacing: .04em;
  box-shadow: 0 6px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.24);
  animation: slide-up .2s ease-out both;
}

/* the turn timer drains along the bottom edge of the banner */
.turn-banner { position: relative; }
.turn-banner.mine::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px;
  width: var(--turn, 0%); background: var(--marigold);
  transition: width .25s linear;
}

.lobby-opt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 2px 0; }
.lo-label { font-size: .74rem; font-weight: 700; color: var(--brass); text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }

.series-board { margin: .5rem 0 .2rem; }
.series-head { font-size: .74rem; color: var(--brass); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; margin-bottom: 6px; }
.series-rows { display: flex; flex-direction: column; gap: 4px; }
.series-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 10px;
  background: rgba(10,17,32,.5); border: 1px solid var(--rule); border-radius: var(--r-sm);
  font-weight: 700; font-size: .86rem;
}
.series-row.champ { border-color: var(--marigold); background: rgba(232,163,61,.14); }
.sr-name { flex: 1; text-align: left; }
.sr-wins { font-family: 'Rozha One', Georgia, serif; font-size: 1.15rem; color: var(--marigold); }

/* ---------------- "no real money" notice ----------------
   stated on the home screen and in every game's help: this is a game, not a
   gambling app. Play chips only, nothing purchasable, nothing winnable. */
.no-money {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  font-weight: 800; font-size: .78rem; letter-spacing: .03em;
  color: #9FE0BC; background: rgba(47,122,85,.16);
  border: 1px solid rgba(47,122,85,.55); border-radius: var(--r-sm);
  padding: .5rem .7rem; text-align: center;
}
.no-money span { font-weight: 600; font-size: .7rem; color: #BFD8CB; letter-spacing: 0; }
.help-no-money { margin-top: .6rem; }

/* ============================================================================
   GAME CHROME — the print-flat pass above reads like a document. A game needs
   depth, weight and light: carved panels, chunky beveled controls, glow.
   These rules deliberately override the flat versions earlier in this file.
   ========================================================================== */

/* lamp-lit table with a vignette, so the panel sits IN a scene, not on a field */
body {
  background:
    var(--grain),
    radial-gradient(760px 420px at 50% 8%, rgba(232,163,61,.20), transparent 66%),
    radial-gradient(1200px 900px at 50% 45%, rgba(43,66,110,.55), transparent 70%),
    radial-gradient(1400px 1000px at 50% 120%, rgba(0,0,0,.65), transparent 60%),
    linear-gradient(178deg, #16223D 0%, #1B2A4A 46%, #0E1526 100%);
}

/* carved panel: brass outer frame, deep inner well, warm inner light */
.home-card {
  position: relative;
  background:
    var(--grain),
    linear-gradient(180deg, #2A3E68 0%, #1E2E51 42%, #16223D 100%);
  border: 2px solid #8A6C3E;
  border-radius: 16px;
  padding: 2.1rem 1.7rem 1.6rem;
  box-shadow:
    0 0 0 1px rgba(232,196,120,.35),
    inset 0 1px 0 rgba(255,225,170,.28),
    inset 0 -18px 40px rgba(0,0,0,.42),
    0 26px 60px rgba(0,0,0,.62);
}
/* inner brass rule with corner pips */
.home-card::before {
  content: ''; position: absolute; inset: 9px; border-radius: 10px;
  border: 1px solid rgba(232,196,120,.28); pointer-events: none;
  background:
    radial-gradient(circle at 0 0, rgba(232,196,120,.5) 0 3px, transparent 4px),
    radial-gradient(circle at 100% 0, rgba(232,196,120,.5) 0 3px, transparent 4px),
    radial-gradient(circle at 0 100%, rgba(232,196,120,.5) 0 3px, transparent 4px),
    radial-gradient(circle at 100% 100%, rgba(232,196,120,.5) 0 3px, transparent 4px);
}

/* chunky beveled buttons — the single biggest "is this a game" signal */
.btn {
  border-radius: 12px; font-weight: 800; font-size: 1rem;
  padding: .78rem 1.4rem; letter-spacing: .02em;
  border: none; position: relative;
  text-shadow: 0 1px 0 rgba(0,0,0,.28);
  transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
}
.btn:active { transform: translateY(3px); }
.btn-primary {
  background: linear-gradient(180deg, #FFD98A 0%, #F0AE45 38%, #D4872A 100%);
  color: #4A2B05; border: 1px solid #8A5A16;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.75), inset 0 -3px 0 rgba(120,70,10,.45),
    0 5px 0 #7E4E12, 0 12px 22px rgba(0,0,0,.5);
}
.btn-primary:active { box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 2px 0 #7E4E12, 0 6px 12px rgba(0,0,0,.45); }
.btn-secondary {
  background: linear-gradient(180deg, #5C7FC4 0%, #3B5A9B 40%, #2A4278 100%);
  color: #F2F6FF; border: 1px solid #1B2C52;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(10,20,45,.5),
    0 5px 0 #1B2C52, 0 12px 22px rgba(0,0,0,.5);
}
.btn-secondary:active { box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 2px 0 #1B2C52, 0 6px 12px rgba(0,0,0,.45); }
.btn-danger {
  background: linear-gradient(180deg, #E86A5E 0%, #C1362F 42%, #97231D 100%);
  color: #fff; border: 1px solid #6E1815;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(90,15,12,.5),
    0 5px 0 #6E1815, 0 12px 22px rgba(0,0,0,.5);
}
.btn-ghost {
  background: linear-gradient(180deg, rgba(88,112,160,.4), rgba(30,46,81,.6));
  color: var(--paper); border: 1px solid rgba(232,196,120,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 0 rgba(10,18,36,.6), 0 8px 16px rgba(0,0,0,.4);
}
.btn:disabled { filter: grayscale(.55) brightness(.75); box-shadow: none; transform: none; }

/* the room code as a carved plaque, not a text line */
.lobby-code {
  display: inline-block; margin: 2px auto 0; padding: .35rem 1.5rem .45rem;
  letter-spacing: 16px; padding-left: 30px; font-size: 3.3rem;
  color: #FFD98A; border-radius: 12px;
  background: linear-gradient(180deg, rgba(9,15,28,.85), rgba(5,9,18,.9));
  border: 2px solid #8A6C3E;
  text-shadow: 0 0 22px rgba(255,190,90,.55), 0 2px 0 rgba(0,0,0,.7);
  box-shadow: inset 0 3px 10px rgba(0,0,0,.75), 0 2px 0 rgba(255,225,170,.15);
}

/* player plate with a framed avatar */
.lobby-player {
  background: linear-gradient(180deg, rgba(44,64,104,.85), rgba(24,38,68,.9));
  border: 1px solid rgba(232,196,120,.3); border-radius: 11px;
  padding: .6rem .8rem; font-size: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 12px rgba(0,0,0,.4);
}
.lobby-player .avatar {
  width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.3rem;
  border-radius: 50%; border: 2px solid #B78A44;
  background: radial-gradient(circle at 50% 30%, #35507F, #16223D);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5), 0 0 12px rgba(232,163,61,.28);
}
.lobby-player .host-tag {
  background: linear-gradient(180deg,#F0AE45,#C6871F); color:#3B2405; border: none;
  font-weight: 800; box-shadow: 0 2px 0 #8A5A16;
}

/* segmented controls: an inset track with a raised, lit selection */
.lobby-opt {
  gap: 0; background: linear-gradient(180deg, rgba(9,15,28,.7), rgba(14,22,40,.6));
  border: 1px solid rgba(232,196,120,.22); border-radius: 12px;
  padding: 6px 8px; box-shadow: inset 0 3px 8px rgba(0,0,0,.5);
}
.lo-label { margin-right: 8px; color: #E8C478; font-size: .7rem; }
.lobby-opt .btn-small {
  border-radius: 9px; padding: .4rem .8rem; font-size: .76rem; margin: 0 2px;
  text-transform: uppercase; letter-spacing: .06em;
}
.lobby-opt .btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: #A8B6D4; }
.lobby-opt .btn-ghost:hover { background: rgba(255,255,255,.07); }
.lobby-opt .btn-primary { box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 3px 0 #7E4E12, 0 6px 12px rgba(0,0,0,.45); }

/* real toggle switch instead of a raw browser checkbox */
.lobby-toggle { display: flex; align-items: center; gap: .6rem; justify-content: center; font-weight: 700; font-size: .9rem; }
.lobby-toggle input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 52px; height: 28px; border-radius: 99px; cursor: pointer; position: relative;
  background: linear-gradient(180deg, #16223D, #0E1526);
  border: 1px solid rgba(232,196,120,.35);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.7);
  transition: background .16s ease;
}
.lobby-toggle input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: linear-gradient(180deg, #EDE3CD, #B9AC90);
  box-shadow: 0 2px 4px rgba(0,0,0,.6); transition: transform .16s cubic-bezier(.3,1.4,.5,1);
}
.lobby-toggle input[type="checkbox"]:checked { background: linear-gradient(180deg, #F0AE45, #C6871F); }
.lobby-toggle input[type="checkbox"]:checked::after { transform: translateX(24px); }

/* game tiles as pressable cards */
.game-card {
  background: linear-gradient(180deg, rgba(52,74,120,.7), rgba(23,36,64,.85));
  border: 1px solid rgba(232,196,120,.28); border-radius: 13px; padding: .85rem .5rem .75rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 5px 0 rgba(8,14,28,.75), 0 10px 20px rgba(0,0,0,.42);
}
.game-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 7px 0 rgba(8,14,28,.75), 0 14px 26px rgba(0,0,0,.5); }
.game-card.picked {
  border-color: #F0AE45;
  box-shadow: inset 0 0 0 2px rgba(240,174,69,.5), 0 0 26px rgba(240,174,69,.35), 0 5px 0 rgba(8,14,28,.75);
}
.gc-icon {
  width: 46px; height: 46px; font-size: 1.5rem; border: 2px solid #B78A44;
  background: radial-gradient(circle at 50% 28%, #3A5788, #141F38);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55), 0 0 14px rgba(232,163,61,.25);
}
.logo h1 {
  font-size: 3.3rem; color: #FFD98A;
  text-shadow: 0 2px 0 #8A5A16, 0 4px 0 rgba(90,55,10,.7), 0 0 30px rgba(255,190,90,.45);
}

/* ============================================================================
   THE SCENE — an illustrated lamp-lit adda behind everything. Fixed layer at
   z-index -1 so it never interferes with content or modals. A scrim keeps the
   UI legible over the art.
   ========================================================================== */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(9,14,26,.34) 0%, rgba(7,11,22,.60) 100%),
    url('../img/adda-bg.jpg') center center / cover no-repeat,
    linear-gradient(178deg, #16223D, #0E1526);
}
/* the flat wash is now just a fallback under the art */
body {
  background: var(--grain), linear-gradient(178deg, #16223D 0%, #1B2A4A 46%, #0E1526 100%);
}
/* panels sit ON the scene, so they need a touch more weight to separate */
.home-card { box-shadow:
  0 0 0 1px rgba(232,196,120,.35),
  inset 0 1px 0 rgba(255,225,170,.28),
  inset 0 -18px 40px rgba(0,0,0,.42),
  0 30px 70px rgba(0,0,0,.75); }

/* ---------------- painted game medallions (replace the emoji glyphs) ---------------- */
.gc-icon {
  width: 58px; height: 58px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  border: none; box-shadow: none; border-radius: 0;
  /* the emoji stays in the DOM for screen readers, but is not drawn */
  font-size: 0; color: transparent; text-indent: -9999px; overflow: hidden;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.55));
  transition: transform .14s cubic-bezier(.2,1.3,.5,1);
}
.game-card:hover .gc-icon { transform: scale(1.07) translateY(-1px); }
.game-card.picked .gc-icon { filter: drop-shadow(0 0 10px rgba(240,174,69,.6)) drop-shadow(0 4px 8px rgba(0,0,0,.55)); }
.gi-bluff      { background-image: url('../img/gi-bluff.png?v=2'); }
.gi-sevens     { background-image: url('../img/gi-sevens.png?v=2'); }
.gi-donkey     { background-image: url('../img/gi-donkey.png?v=2'); }
.gi-chaupar    { background-image: url('../img/gi-chaupar.png?v=2'); }
.gi-rummy      { background-image: url('../img/gi-rummy.png?v=2'); }
.gi-leastcount { background-image: url('../img/gi-leastcount.png?v=2'); }
.gi-courtpiece { background-image: url('../img/gi-courtpiece.png?v=2'); }
.gi-judgement  { background-image: url('../img/gi-judgement.png?v=2'); }
.gi-teenpatti  { background-image: url('../img/gi-teenpatti.png?v=2'); }
.gi-twentynine   { background-image: url('../img/gi-twentynine.png?v=1'); }
.gi-saapseedi    { background-image: url('../img/gi-saapseedi.png?v=1'); }
.gi-teendopaanch { background-image: url('../img/gi-teendopaanch.png?v=1'); }
.gi-kaliteeri    { background-image: url('../img/gi-kaliteeri.png?v=1'); }

/* ---------------- painted player portraits ---------------- */
.avatar.face {
  width: 34px; height: 34px; flex: none; display: inline-block;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  font-size: 0 !important; color: transparent; border: none !important;
  box-shadow: none !important; border-radius: 50%;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
  vertical-align: middle;
}
.lobby-player .avatar.face { width: 44px; height: 44px; }
.series-row .avatar.face { width: 30px; height: 30px; }
.avatar.face.face-1 { background-image: url('../img/av-1.png?v=1'); background-color: transparent; }
.avatar.face.face-2 { background-image: url('../img/av-2.png?v=1'); background-color: transparent; }
.avatar.face.face-3 { background-image: url('../img/av-3.png?v=1'); background-color: transparent; }
.avatar.face.face-4 { background-image: url('../img/av-4.png?v=1'); background-color: transparent; }
.avatar.face.face-5 { background-image: url('../img/av-5.png?v=1'); background-color: transparent; }
.avatar.face.face-6 { background-image: url('../img/av-6.png?v=1'); background-color: transparent; }
.avatar.face.face-7 { background-image: url('../img/av-7.png?v=1'); background-color: transparent; }
.avatar.face.face-8 { background-image: url('../img/av-8.png?v=1'); background-color: transparent; }
.avatar.face.face-9 { background-image: url('../img/av-9.png?v=1'); background-color: transparent; }
.avatar.face.face-10 { background-image: url('../img/av-10.png?v=1'); background-color: transparent; }
.avatar.face.face-11 { background-image: url('../img/av-11.png?v=1'); background-color: transparent; }
.avatar.face.face-12 { background-image: url('../img/av-12.png?v=1'); background-color: transparent; }
.avatar.face.face-13 { background-image: url('../img/av-13.png?v=1'); background-color: transparent; }
.avatar.face.face-14 { background-image: url('../img/av-14.png?v=1'); background-color: transparent; }
.avatar.face.face-15 { background-image: url('../img/av-15.png?v=1'); background-color: transparent; }
.avatar.face.face-16 { background-image: url('../img/av-16.png?v=1'); background-color: transparent; }

/* ---------------- ornate carved frame on the main panel ---------------- */
.home-card {
  border: 30px solid transparent;
  border-image: url('../img/frame.png?v=1') 102 / 30px / 0 round;
  border-radius: 0;
  padding: 1.1rem 1.2rem 1.2rem;
  /* the art carries the edge now, so drop the drawn rule and keep only depth */
  box-shadow: 0 26px 60px rgba(0,0,0,.7);
  background:
    var(--grain),
    linear-gradient(180deg, #2A3E68 0%, #1E2E51 42%, #16223D 100%);
  background-clip: padding-box;
}
.home-card::before { display: none; }   /* the drawn inner rule is redundant now */
@media (max-width: 560px) {
  .home-card { border-width: 20px; border-image-width: 20px; padding: .9rem .8rem 1rem; }
}

/* ---------------- painted card back ---------------- */
.pcard-back {
  background: url('../img/card-back.jpg?v=1') center / cover no-repeat, #8E2018;
  border: 1px solid rgba(22,34,61,.45);
  box-shadow: 0 3px 7px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,225,170,.25);
}
.pcard-back .pc-svg { display: none; }   /* the art replaces the drawn placeholder */

/* ---------------- coach marks (first-run guided tour) ---------------- */
.coach-overlay { position: fixed; inset: 0; z-index: 80; }
.coach-hole {
  position: absolute; border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(6,10,20,.76), 0 0 0 2px var(--marigold), 0 0 22px rgba(232,163,61,.5);
  transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease;
  pointer-events: none;
}
.coach-hole-none { left: 50%; top: 50%; width: 0; height: 0; box-shadow: 0 0 0 9999px rgba(6,10,20,.8); }
.coach-card {
  position: absolute; width: min(310px, 88vw);
  background: var(--grain), linear-gradient(180deg, #2A3E68, #16223D);
  border: 1px solid var(--rule-strong); border-radius: var(--r-lg);
  box-shadow: 0 0 0 3px rgba(176,141,87,.14), 0 20px 44px rgba(0,0,0,.6);
  padding: .9rem 1rem 1rem; color: var(--paper);
  animation: pop-in .22s cubic-bezier(.2,1.3,.5,1) both;
}
.coach-title { font-family: 'Rozha One', Georgia, serif; font-size: 1.15rem; color: #FFD98A; margin-bottom: 3px; }
.coach-body { font-size: .86rem; line-height: 1.45; color: #DCE4F5; }
.coach-dots { display: flex; gap: 5px; justify-content: center; margin: .7rem 0 .5rem; }
.coach-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(232,196,120,.3); }
.coach-dot.on { background: var(--marigold); }
.coach-btns { display: flex; justify-content: space-between; gap: 8px; }

/* ---------------- painted logo + chrome icons ---------------- */
.logo-coin {
  background: url('../img/logo.png?v=1') center / contain no-repeat;
  border: none; box-shadow: none; width: 96px; height: 96px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
}
.logo-mini {
  display: inline-block; width: 30px; height: 30px; font-size: 0;
  background: url('../img/logo.png?v=1') center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
/* topbar buttons carry a painted pictogram instead of an emoji glyph */
#btn-quit, #btn-help, #btn-mute, #btn-log {
  font-size: 0; color: transparent; position: relative;
}
#btn-quit::before, #btn-help::before, #btn-mute::before, #btn-log::before {
  content: ''; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px;
  background-position: center; background-size: contain; background-repeat: no-repeat;
}
#btn-quit::before { background-image: url('../img/ic-leave.png?v=1'); }
#btn-help::before { background-image: url('../img/ic-help.png?v=1'); }
#btn-mute::before { background-image: url('../img/ic-sound.png?v=1'); }
#btn-mute.is-muted::before { background-image: url('../img/ic-mute.png?v=1'); opacity: .7; }
#btn-log::before { background-image: url('../img/ic-log.png?v=1'); }
#btn-log .btn-txt { display: none; }   /* icon carries the meaning now */

/* ---------------- Chaupar: a physical carved Chaupad on the table ---------------- */
.cp-board {
  box-sizing: border-box; padding: 7px; border-radius: 9px;
  border: 9px solid #6E5228;
  background:
    var(--grain),
    radial-gradient(130% 120% at 50% 0%, #26406E 0%, #172443 72%);
  box-shadow:
    inset 0 0 0 2px rgba(232,196,120,.4),
    inset 0 3px 10px rgba(0,0,0,.55),
    0 18px 42px rgba(0,0,0,.62);
}
.cp-track {
  background: var(--grain), linear-gradient(180deg, #F4E9CF, #E7D6AF);
  color: #8A6A2F; box-shadow: inset 0 0 0 .5px rgba(90,60,20,.28);
}
.cp-centre { background: linear-gradient(135deg, #FFE29A, #E8A33D); box-shadow: inset 0 0 0 1px rgba(140,90,20,.45); }
.cp-safe { box-shadow: inset 0 0 0 1px rgba(31,96,145,.5), inset 0 0 6px rgba(31,96,145,.25); }

/* ---------------- play-chip token (Teen Patti / Least Count) ---------------- */
.chip-ic {
  display: inline-block; width: .95em; height: .95em; vertical-align: -.14em; border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #F6C368, #D4872A 55%, #A83A2C 100%);
  box-shadow: inset 0 0 0 2px rgba(255,231,180,.85), inset 0 0 0 3px rgba(120,25,18,.55),
              inset 0 -2px 3px rgba(80,15,10,.5), 0 1px 2px rgba(0,0,0,.55);
}

/* a Chaupar cell holding exactly one of your movable pawns is fully tappable,
   so a rival sharing the square can't block the move (or the cut) */
.cp-cell-legal { cursor: pointer; }

/* ---------------- accessibility: focus visibility + tap targets ---------------- */
/* keyboard users need a clear focus ring — buttons had outline:none */
.btn:focus-visible, .emote-btn:focus-visible, .game-card:focus-visible,
input:focus-visible, .pcard:focus-visible, .cp-chip:focus-visible,
.coach-btns .btn:focus-visible, a:focus-visible {
  outline: 3px solid var(--marigold); outline-offset: 2px; border-radius: 4px;
}
/* comfortable minimum tap targets (were ~27–32px tall) */
#btn-quit, #btn-help, #btn-mute, #btn-log { min-width: 42px; min-height: 40px; }
.emote-btn { min-height: 38px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; }
/* slightly brighten the small brass tagline so it clears contrast at 11px */
.tagline { color: #D6B67A; }

/* ---------------- avatar picker (home) ---------------- */
.name-avatar { flex-direction: row; align-items: flex-end; gap: .7rem; }
.na-fields { flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.avatar-choose {
  width: 56px; height: 56px; flex: none; cursor: pointer; padding: 0;
  border: 2px solid var(--rule-strong); border-radius: 50%;
  background: rgba(10,17,32,.5) center / contain no-repeat;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5), 0 0 10px rgba(232,163,61,.2);
  position: relative;
}
.avatar-choose::after {
  content: '✎'; position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px;
  display: grid; place-items: center; font-size: 11px; border-radius: 50%;
  background: var(--marigold); color: #3B2405; border: 1px solid #8A5A16;
}
.avatar-grid {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 90;
  background: var(--grain), linear-gradient(180deg, #2A3E68, #16223D);
  border: 1px solid var(--rule-strong); border-radius: var(--r-lg);
  box-shadow: 0 0 0 3px rgba(176,141,87,.14), 0 22px 50px rgba(0,0,0,.65);
  padding: .9rem 1rem 1rem; width: min(360px, 92vw);
}
.ag-title { font-family: 'Rozha One', Georgia, serif; color: #FFD98A; font-size: 1.1rem; margin-bottom: .6rem; text-align: center; }
.ag-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ag-row .avatar.face { width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.ag-row .avatar.face.on { border-color: var(--marigold); box-shadow: 0 0 0 2px rgba(232,163,61,.4); }

/* ---------------- emote "more" panel ---------------- */
.emote-more { font-size: 1rem; }
.emote-panel {
  position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 62;
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: min(440px, 94vw);
  background: var(--grain), linear-gradient(180deg, #2A3E68, #16223D);
  border: 1px solid var(--rule-strong); border-radius: var(--r-lg);
  box-shadow: 0 12px 30px rgba(0,0,0,.55); padding: 10px;
}

/* coach card never taller than the screen (buttons always reachable) */
.coach-card { max-height: calc(100dvh - 24px); }

/* ---------------- lobby share buttons ---------------- */
.lobby-share { display: flex; gap: 8px; justify-content: center; margin: 4px 0 2px; flex-wrap: wrap; }
.lobby-share .btn { flex: 1 1 auto; min-width: 130px; }

/* ---------------- home footer (legal links) ---------------- */
.home-foot { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.home-foot a { color: var(--brass); text-decoration: none; }
.home-foot a:hover { color: var(--marigold); text-decoration: underline; }

/* ===================== launch pass: phone layout (2026-10-03) ===================== */
/* tutorial card: pop in only on a NEW step (shell adds .coach-pop), not on every re-render */
.coach-card { animation: none; }
.coach-card.coach-pop { animation: pop-in .22s cubic-bezier(.2,1.3,.5,1) both; }

/* unplayable cards darken instead of going see-through, so overlapping cards
   never show the card underneath ("double exposure") */
.pcard:disabled { opacity: 1; filter: brightness(.56) saturate(.45); }

/* chaupar board sizes to its container, never to the whole screen width */
.cp-board { width: min(100%, 520px); }

@media (max-width: 720px) {
  /* home: compact three-across game tiles so Play is visible without scrolling */
  .logo h1 { font-size: 2.5rem; }
  .home-wide .game-grid { grid-template-columns: repeat(3, 1fr); gap: .45rem; }
  .home-wide .game-card { padding: .55rem .25rem .5rem; gap: 2px; }
  .home-wide .gc-icon { width: 44px; height: 44px; }
  .home-wide .gc-name { font-size: .84rem; line-height: 1.15; text-align: center; }
  .home-wide .gc-tag, .home-wide .gc-win { display: none; }
  .home-wide .gc-players { font-size: .55rem; letter-spacing: .03em; }

  /* topbar: the turn banner gets its own full-width row instead of ~65px */
  .topbar { flex-wrap: wrap; row-gap: .35rem; }
  .topbar .turn-banner { order: 9; flex: 1 0 100%; white-space: normal; font-size: .85rem; line-height: 1.25; }

  .cp-board { width: 100%; }

  /* opponent boxes: tighter, so two or three sit per row instead of stacking */
  .ta-opp { padding: .3rem .5rem; gap: .35rem; font-size: .8rem; }
  .ta-opp .avatar.face { width: 28px; height: 28px; }

  /* 12 to 14 card hands (Rummy, Court Piece): tighten overlap so they fit one row.
     Bigger hands keep the normal overlap and wrap, so tap strips stay usable. */
  .ta-hand:has(> .pcard:nth-child(12)):not(:has(> .pcard:nth-child(15))) > .pcard { margin: 0 -14px; }
}

/* ---------------- Court Piece (ct-) + Judgement (jd-) additions ----------------
   Append to the end of style.css (or load after it). Every selector here is new;
   none of these class names existed in style.css when this was written. */

/* Court Piece: the ★ trump marker moves from the top-right corner (hidden under
   the next overlapping card in the hand) to the always-visible bottom-left.
   Cards carry both cp-trumpcard and ct-trumpcard, so without this file the old
   star still shows; with it, this higher-specificity rule repositions it. */
.pcard.cp-trumpcard.ct-trumpcard::after {
  top: auto; right: auto; left: 4px; bottom: 3px; font-size: 11px; line-height: 1;
}

/* Court Piece: your first five, shown inside the rang modal (the backdrop blurs
   the table so the hand below can't be read) */
.ct-five { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.ct-five .pcard { pointer-events: none; cursor: default; }

/* Court Piece: suit buttons with a count ("♠ ×2"), always one row at 375px */
.cp-trumpgrid.ct-trumpgrid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem;
  width: 100%; max-width: 360px; margin: 0 auto;
}
.cp-suitbtn.ct-suitbtn {
  font-size: 1.45rem; padding: 0.45rem 0.2rem; min-width: 0;
  display: inline-flex; align-items: baseline; justify-content: center; gap: 2px; white-space: nowrap;
}
.ct-suitcount { font-size: 0.9rem; font-weight: 800; color: #3B2609; }

/* Judgement: bid buttons 0..7 on a single row, even on a 375px phone */
.jd-bids { display: flex; justify-content: center; flex-wrap: nowrap; gap: 4px; margin: 2px 0 4px; }
.btn.jd-bid { min-width: 36px; height: 44px; padding: 0 8px; font-size: 1.05rem; line-height: 1; flex: 0 1 auto; }
.btn.jd-bid:disabled { opacity: 0.35; }
@media (max-width: 350px) {
  .jd-bids { gap: 3px; }
  .btn.jd-bid { min-width: 32px; padding: 0 6px; }
}

/* Judgement: the table's bid total ("Bids 6 of 7 · under by 1") */
.jd-tally { font-size: 0.82rem; font-weight: 800; color: var(--marigold); margin-top: 2px; }

/* Judgement: dealer badge (replaces the 🃏 that clashed with the hand count) */
.jd-dealer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; vertical-align: 1px;
  background: var(--marigold); color: #3B2609; font-size: 0.62rem; font-weight: 800; line-height: 1;
}

/* ---------------- sevens + donkey (Satte pe Satta, Bhabhi) ----------------
   Append to public/css/style.css (or load after it). Selectors are written
   one class more specific than the style.css rules they override, so they
   win regardless of where they land in the cascade. */

/* sevens: small "pass" tag on an opponent who has passed since their last play */
.sv-passtag {
  font-size: 0.68rem; font-weight: 800; letter-spacing: .3px; text-transform: lowercase;
  color: #EDE3CD; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; padding: 0 7px; line-height: 1.5;
}

/* sevens: glowing board cells are tappable (plays that card from your hand) */
.sv-board .sv-cell.sv-tap { cursor: pointer; }
.sv-board .sv-cell.sv-tap:focus-visible { outline: 2px solid var(--marigold); outline-offset: 1px; }

/* sevens: the "No card to play, passing…" hint */
.ta-hint.sv-autopass { color: #ffe9a3; }

/* donkey: the thulla card in the settled-trick recall */
.dk-slot.dk-thulla .pcard {
  transform: rotate(-7deg);
  box-shadow: 0 0 0 2px #E03C31, 0 4px 10px rgba(0,0,0,.45);
}

@media (max-width: 720px) {
  /* sevens board at 375px: cells were ~18px wide with 8px text. Tighter
     padding, a narrower suit column and 2px gaps give ~22px cells. */
  .game-root .sv-board { padding: 0.4rem; gap: 5px; }
  .sv-board .sv-row { gap: 4px; }
  .sv-board .sv-suit { width: 18px; font-size: 1.05rem; }
  .sv-board .sv-line { gap: 2px; }
  .sv-board .sv-cell { font-size: 0.68rem; padding: 5px 0; }

  /* donkey hand on phones: when only some cards are legal, legal ones get a
     wider strip (38px vs 22px) so a quick tap lands on a playable card.
     dk-ok is only set while following with a mixed hand. */
  .ta-hand.dk-hand .pcard.dk-ok { margin: 0 -6px; }
  .ta-hand.dk-hand .pcard:disabled { margin: 0 -14px; }
}

/* ---------------- Rummy + Least Count (rm- / lc-) additions ----------------
   Append to public/css/style.css. None of these class names exist there yet. */

/* draw pile is now a real <button>; .pcard/.pcard-back already style it.
   Keep it looking like the card back, never like a greyed-out control. */
.rm-deckbtn, .lc-deckbtn { font: inherit; color: inherit; cursor: default; }
.rm-deckbtn[aria-disabled="true"], .lc-deckbtn[aria-disabled="true"] { opacity: 1; filter: none; }
.lc-deckbtn { position: relative; }   /* anchors the .rm-decknum count badge */

/* Rummy group header: tag + small break-up button */
.rm-ghead { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 3px; }
.rm-ghead .rm-gtag { margin-bottom: 0; }
.rm-gbreak {
  min-width: 26px; min-height: 26px; padding: 0 6px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.35);
  color: #cdd7f0; font-family: inherit; font-weight: 800; font-size: 0.72rem; line-height: 1; cursor: pointer;
}
.rm-gbreak:hover { background: rgba(217,59,59,.45); color: #fff; }
.rm-gbreak:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* Declare button with its reason written underneath (visible on phones) */
.rm-decbox, .lc-decbox { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rm-why, .lc-why {
  font-size: 0.8rem; font-weight: 700; line-height: 1.25;
  color: #F6A8A2; text-align: center; max-width: 280px;
}

/* ---------------- Bluff: compact rank keys + two-step claim ----------------
   Append to public/css/style.css (after the chunky .btn rules near line ~741,
   or anywhere: selectors below out-rank the generic .btn padding).
   Classes added by public/js/games/bluff.js:
     .bl-rkgrid      on the rank grid (alongside the existing .bl-rankgrid)
     .bl-rk          on each of the 13 rank buttons (replaces .btn-small)
     .bl-rk-armed    the rank tapped once, waiting for the confirming tap
     .bl-rk-confirm  the "Claim 2 × K?" confirm button
     .bl-caphint     "You can claim up to 4 cards" hint
   Layout: 7 + 6 keys on two rows on a 375px phone, every key >= 36px. */
.bl-rankgrid.bl-rkgrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(36px, 1fr));
  gap: 8px 5px;               /* row gap leaves room for the .bl-held badge */
  width: 100%;
  max-width: 340px;
  margin: 2px auto 0;
}
.bl-rkgrid .btn.bl-rk {
  min-width: 36px; min-height: 40px;
  padding: 0; margin: 0;
  font-size: 0.95rem; line-height: 1; letter-spacing: 0;
  text-transform: none;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.bl-rkgrid .btn.bl-rk-armed {
  background: linear-gradient(180deg, #FFD98A 0%, #F0AE45 38%, #D4872A 100%);
  color: #4A2B05; border: 1px solid #8A5A16;
  box-shadow: 0 0 0 2px #FFE9A3, 0 3px 0 #7E4E12;
  text-shadow: none;
}
.btn.bl-rk-confirm { animation: pop-in 0.18s ease both; }
.bl-caphint { width: 100%; text-align: center; color: #ffd7a1; }

/* ===================== new games: "New" ribbon + sticky play bar (2026-10-03) ===================== */
.game-card { position: relative; }
.gc-new {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  font: 800 .58rem/1 'Karla', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: #3B2609; background: linear-gradient(180deg, #FFD98A, #E8A33D);
  padding: 3px 6px; border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
@media (max-width: 720px) {
  /* with 13 games the grid runs long, so the Create / Play / Join bar sticks to
     the bottom of the screen and is always one tap away */
  .home-cta {
    position: sticky; bottom: 0; z-index: 6;
    margin: 0 -.6rem; padding: .7rem .6rem calc(.7rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(23,36,64,.0) 0%, rgba(23,36,64,.97) 16%, #16223D 100%);
    border-radius: 14px 14px 0 0;
  }
  .gc-new { top: 4px; right: 4px; font-size: .5rem; padding: 2px 5px; }
}

/* ---------------- 29 / Twenty-Nine (tn-) ----------------
   Append to the end of style.css (or load after it). Every selector here is
   new and prefixed tn-; nothing in style.css is redefined. Built for a 375px
   phone first. Uses the shared tokens (--marigold, --brass, --paper, --muted,
   --rule, --felt) and shared classes (ta-*, pcard, btn) as they are. */

/* match score: two team boxes side by side */
.tn-score {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
  width: 100%; max-width: 520px; margin: 0 auto;
}
.tn-team {
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0;
  padding: 6px 8px 5px; border-radius: var(--r-lg, 9px);
  background: rgba(255,255,255,.07); border: 1px solid var(--rule);
}
.tn-team.tn-mine { box-shadow: inset 0 0 0 1px var(--marigold); background: rgba(232,163,61,.10); }
.tn-team.tn-bidteam .tn-teamname::after { content: ' 🎯'; }
.tn-teamname {
  font-size: 0.78rem; font-weight: 800; color: #EDE3CD; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tn-gp { font-size: 1.45rem; font-weight: 800; line-height: 1.1; color: var(--paper); font-variant-numeric: tabular-nums; }
.tn-gp.tn-up { color: #8FE3B0; }
.tn-gp.tn-down { color: #F6A8A2; }
.tn-pts { font-size: 0.72rem; font-weight: 700; color: var(--muted); }

/* bid, target, trump, dealer chips */
.tn-status { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 2px 0; }
.tn-chip {
  font-size: 0.76rem; font-weight: 800; color: #EDE3CD; white-space: nowrap;
  padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid rgba(176,141,87,.35);
}
.tn-chip-bid { color: #ffe9a3; border-color: var(--marigold); }
.tn-chip-pair { color: #3B2609; background: var(--marigold); border-color: var(--marigold); }
.tn-chip-hidden { color: var(--muted); border-style: dashed; }
.tn-chip-trump { background: var(--paper); color: #20262f; border-color: var(--paper); font-size: 0.82rem; }
.tn-chip-trump.tn-red { color: #d0342c; }

/* dealer badge next to a name */
.tn-dealer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; vertical-align: 1px;
  background: var(--marigold); color: #3B2609; font-size: 0.62rem; font-weight: 800; line-height: 1;
}

/* the table */
.tn-table {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 0.7rem 0.5rem; min-height: 118px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(23,96,63,.55), rgba(23,96,63,.35));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 2px 14px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
}
.tn-trick { display: flex; justify-content: center; gap: 0.7rem; flex-wrap: nowrap; }
.tn-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; transition: transform .22s ease, opacity .22s ease; }
.tn-slot.tn-won { transform: translateY(-7px); }
.tn-slot.tn-won .pcard { box-shadow: 0 0 0 2px var(--marigold), 0 6px 14px rgba(0,0,0,.45); }
.tn-slot.tn-lost { opacity: .5; }
.tn-who { font-size: 0.68rem; font-weight: 800; color: #cdd7f0; max-width: 64px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-trickpts { font-size: 0.78rem; font-weight: 800; color: var(--marigold); }

/* bidding calls on the table */
.tn-calls { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.tn-call {
  font-size: 0.76rem; font-weight: 800; color: #EDE3CD; padding: 3px 8px; border-radius: 6px;
  background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.08);
}
.tn-call.tn-call-high { color: #3B2609; background: var(--marigold); border-color: var(--marigold); }
.tn-call.tn-call-pass { opacity: .55; text-decoration: line-through; }

/* hand result between hands */
.tn-summary {
  width: 100%; max-width: 340px; padding: 8px 10px; border-radius: var(--r-lg, 9px);
  background: rgba(0,0,0,.28); border: 1px solid var(--rule); text-align: center;
  display: flex; flex-direction: column; gap: 2px; animation: pop-in 0.3s ease both;
}
.tn-summary.tn-made { border-color: rgba(47,122,85,.9); }
.tn-summary.tn-short { border-color: rgba(193,54,47,.9); }
.tn-summary-h { font-weight: 800; color: #ffe9a3; font-size: 0.9rem; }
.tn-summary-row { font-size: 0.8rem; font-weight: 700; color: #cdd7f0; }
.tn-summary-res { font-weight: 800; font-size: 0.88rem; }
.tn-made .tn-summary-res { color: #8FE3B0; }
.tn-short .tn-summary-res { color: #F6A8A2; }

/* bid stepper: − 17 + [Bid 17] [Pass] on one row at 375px */
.tn-bidbar {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: nowrap;
  width: 100%; max-width: 360px; margin: 2px auto;
}
.btn.tn-step {
  width: 44px; min-width: 44px; height: 44px; padding: 0; font-size: 1.4rem; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.btn.tn-step:disabled { opacity: .35; }
.tn-bidval {
  min-width: 40px; text-align: center; font-size: 1.5rem; font-weight: 800; color: #ffe9a3;
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.btn.tn-bidgo { height: 44px; padding: 0 12px; min-width: 0; flex: 1 1 auto; max-width: 110px; white-space: nowrap; }
.btn.tn-pass { height: 44px; padding: 0 12px; min-width: 0; flex: 0 1 auto; white-space: nowrap; }
@media (max-width: 350px) {
  .tn-bidbar { gap: 4px; }
  .btn.tn-step { width: 38px; min-width: 38px; }
  .btn.tn-bidgo, .btn.tn-pass { padding: 0 8px; }
}

/* other action rows: confirm trump, ask for trump, deal */
.tn-actbar {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 44px; text-align: center; margin: 2px 0;
}
.btn.tn-settrump { white-space: nowrap; max-width: 100%; }
.btn.tn-settrump.tn-red { color: #8a1c16; }
.btn.tn-ask { animation: pulse-gold 1.1s infinite; }

/* the bidder's own face-down trump card */
.tn-down {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 0.78rem; font-weight: 800; color: var(--muted);
}
.tn-down-label::after { content: ' 🤫'; }
.tn-down .pcard.tn-downcard {
  pointer-events: none; cursor: default; opacity: .9;
  transform: rotate(-6deg); box-shadow: 0 0 0 2px rgba(232,163,61,.55), 0 4px 10px rgba(0,0,0,.45);
}

/* mark known trumps in your hand (everyone once revealed, the bidder before) */
.pcard.tn-trumpcard { position: relative; }
.pcard.tn-trumpcard::after {
  content: '★'; position: absolute; left: 4px; bottom: 3px; font-size: 11px; line-height: 1;
  color: var(--marigold); text-shadow: 0 1px 2px rgba(0,0,0,.8); pointer-events: none;
}

/* ---------------- Saap Seedi (Moksha Patam) ----------------
   Append to public/css/style.css (or load after it). Every class here is
   prefixed ss-. Shared Chaupar classes (cp-token, cp-glyph, cp-mine,
   cp-plr-av, cp-seatdot, cp-plr-name) are only reused, never redefined: the
   few tweaks to them below are scoped under .ss-board / .ss-start. */

/* the board: a carved wooden frame like the Chaupad, cream squares inside */
.ss-board {
  box-sizing: border-box; width: min(100%, 520px); margin: 0 auto;
  padding: 6px; border-radius: 9px;
  border: 9px solid #6E5228;
  background: var(--grain), radial-gradient(130% 120% at 50% 0%, #26406E 0%, #172443 72%);
  box-shadow:
    inset 0 0 0 2px rgba(232,196,120,.4),
    inset 0 3px 10px rgba(0,0,0,.55),
    0 18px 42px rgba(0,0,0,.62);
}
.ss-field { position: relative; width: 100%; aspect-ratio: 1; }
.ss-grid {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr);
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(90,60,20,.6);
}
.ss-sq {
  position: relative; min-width: 0; min-height: 0;
  box-shadow: inset 0 0 0 .5px rgba(90,60,20,.3);
  color: #7A5A26;
}
/* subtle alternating tints with gentle colour bands, like an old printed board */
.ss-sq.ss-t0.ss-band0 { background: var(--grain), linear-gradient(180deg, #F6EBD2, #EEDFBD); }
.ss-sq.ss-t1.ss-band0 { background: var(--grain), linear-gradient(180deg, #ECD9B1, #E2CC9E); }
.ss-sq.ss-t0.ss-band1 { background: var(--grain), linear-gradient(180deg, #F5EAD6, #EBDDC2); }
.ss-sq.ss-t1.ss-band1 { background: var(--grain), linear-gradient(180deg, #E6D7B9, #DCCBA6); }
.ss-sq.ss-t0.ss-band2 { background: var(--grain), linear-gradient(180deg, #F7E9D3, #EFD9BB); }
.ss-sq.ss-t1.ss-band2 { background: var(--grain), linear-gradient(180deg, #EFD3B2, #E5C39E); }

.ss-num {
  position: absolute; top: 2px; left: 3px; line-height: 1;
  font: 800 clamp(7px, 1.9vw, 10px) 'Karla', system-ui, sans-serif;
  color: rgba(90,62,23,.78); letter-spacing: -.02em;
}
/* the virtue / vice name, tiny, along the bottom of the square */
.ss-cap {
  position: absolute; left: 1px; right: 1px; bottom: 1px; text-align: center;
  font: 800 clamp(5.5px, 1.55vw, 8.5px) 'Karla', system-ui, sans-serif; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: clip;
  border-radius: 2px; padding: 0 1px; z-index: 3; pointer-events: none;
}
.ss-cap-up { color: #4A3208; background: rgba(232,163,61,.55); }
.ss-cap-down { color: #fff4e6; background: rgba(150,40,32,.78); }
.ss-sq.ss-up { box-shadow: inset 0 0 0 1px rgba(176,141,87,.85); }
.ss-sq.ss-down { box-shadow: inset 0 0 0 1px rgba(193,54,47,.45); }

/* 100: Moksha, a gilded square with a soft sunburst */
.ss-sq.ss-moksha {
  background:
    repeating-conic-gradient(from 0deg at 50% 62%, rgba(255,255,255,.28) 0 10deg, rgba(255,255,255,0) 10deg 20deg),
    radial-gradient(circle at 50% 62%, #FFF1BF 0%, #F6C75A 55%, #D99129 100%);
  box-shadow: inset 0 0 0 1.5px #8A5A16, inset 0 0 8px rgba(138,90,22,.55);
}
.ss-sq.ss-moksha .ss-num { color: #5A3608; }
.ss-moksha-word {
  position: absolute; left: 0; right: 0; bottom: 2px; text-align: center;
  font: 400 clamp(7px, 2vw, 11px) 'Rozha One', Georgia, serif; line-height: 1;
  color: #5A2A08; text-shadow: 0 1px 0 rgba(255,240,200,.8); pointer-events: none;
}
@keyframes ssMokshaWin { 0%,100% { box-shadow: inset 0 0 0 1.5px #8A5A16, 0 0 0 0 rgba(242,194,48,.8); } 50% { box-shadow: inset 0 0 0 1.5px #8A5A16, 0 0 18px 8px rgba(242,194,48,.9); } }
.ss-sq.ss-moksha.ss-moksha-win { animation: ssMokshaWin 1.1s ease-in-out infinite; z-index: 1; }

/* where the last move ended */
.ss-sq.ss-last::after {
  content: ''; position: absolute; inset: 1px; border-radius: 2px;
  box-shadow: inset 0 0 0 2px rgba(232,163,61,.95), inset 0 0 8px rgba(232,163,61,.6);
  pointer-events: none;
}

/* snakes and ladders art */
.ss-art { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ss-art .ss-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* pawns ride a layer above the art */
.ss-pawns { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.ss-pawn {
  position: absolute; width: 10%; height: 10%;
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
.ss-pawn.ss-moving { z-index: 20 !important; }
.ss-board .cp-token.ss-tok { width: 64%; height: 64%; }
.ss-board .cp-token.ss-tok-sm { width: 50%; height: 50%; }
.ss-board .cp-token.ss-tok-sm .cp-glyph { font-size: 6px; }
.ss-pawn.ss-moving .cp-token { box-shadow: 0 6px 10px rgba(0,0,0,.5), inset 0 -3px 5px rgba(0,0,0,.32), inset 0 2px 3px rgba(255,255,255,.45); }
/* whose turn it is: a soft breathing halo on that pawn */
@keyframes ssTurnHalo { 0%,100% { filter: drop-shadow(0 0 0 rgba(255,233,163,0)); } 50% { filter: drop-shadow(0 0 4px rgba(255,233,163,.95)); } }
.ss-pawn.ss-pawn-turn { animation: ssTurnHalo 1.4s ease-in-out infinite; }
/* a roll that could not move (needs an exact landing): a little shake */
@keyframes ssNudge { 0%,100% { translate: 0 0; } 20% { translate: -3px 0; } 40% { translate: 3px 0; } 60% { translate: -2px 0; } 80% { translate: 2px 0; } }
.ss-pawn.ss-nudge .cp-token { animation: ssNudge .45s ease-in-out 2; }

/* the start pad below the board */
.ss-start {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  width: min(100%, 520px); margin: -2px auto 0; padding: 4px 8px;
  background: rgba(0,0,0,.22); border: 1px solid var(--rule); border-radius: 9px;
}
.ss-start-lbl { font: 800 .72rem 'Karla', system-ui, sans-serif; color: #E3BE6E; letter-spacing: .06em; text-transform: uppercase; }
.ss-slot {
  position: relative; width: 30px; height: 30px; flex: none; border-radius: 50%;
  border: 2px dashed; opacity: .9; display: flex; align-items: center; justify-content: center;
}
.ss-pawn.ss-pawn-start { position: absolute; inset: 0; width: 100%; height: 100%; }
.ss-start .cp-token.ss-tok { width: 82%; height: 82%; }
.ss-start-key { margin-left: auto; font: 700 .7rem 'Karla', system-ui, sans-serif; color: var(--muted); }

/* players strip */
.ss-plr .ss-where { white-space: nowrap; }
.ss-plr.ss-won { border-color: var(--marigold); box-shadow: inset 0 0 0 1px rgba(232,163,61,.6), 0 0 14px rgba(232,163,61,.35); }

/* the die */
.ss-bar { gap: .55rem .8rem; }
.ss-diewrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ss-die {
  width: 42px; height: 42px; padding: 6px; border-radius: 9px; box-sizing: border-box;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); place-items: center;
  background: linear-gradient(160deg, #FFFDF5 0%, #F4EAD5 60%, #E2D2AE 100%);
  border: 1px solid #8A6A2F;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.9), inset 0 -3px 4px rgba(120,90,40,.35), 0 0 0 2px var(--ss-seat, transparent), 0 4px 10px rgba(0,0,0,.45);
}
.ss-pip { width: 7px; height: 7px; border-radius: 50%; }
.ss-pip.on { background: radial-gradient(circle at 35% 30%, #5a4a3a, #16223D 70%); box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }
.ss-die.ss-die-six .ss-pip.on { background: radial-gradient(circle at 35% 30%, #E8564D, #8E1F19 70%); }
.ss-die-who { font: 700 .66rem 'Karla', system-ui, sans-serif; color: var(--muted); max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes ssDieRoll {
  0%   { transform: translateY(-14px) rotate(-200deg) scale(.6); opacity: .2; }
  55%  { transform: translateY(2px) rotate(18deg) scale(1.12); opacity: 1; }
  75%  { transform: translateY(-2px) rotate(-6deg) scale(.98); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}
.ss-die.ss-die-roll { animation: ssDieRoll .5s cubic-bezier(.2,.8,.3,1.1) both; }
.ss-roll { min-width: 132px; font-size: 1.12rem; }
.ss-roll:disabled { filter: saturate(.5) brightness(.85); }
.ta-hint.ss-six-hint { color: #ffe9a3; }

@media (prefers-reduced-motion: reduce) {
  .ss-die.ss-die-roll, .ss-pawn.ss-pawn-turn, .ss-pawn.ss-nudge .cp-token, .ss-sq.ss-moksha.ss-moksha-win { animation: none !important; }
}

@media (max-width: 720px) {
  .ss-board { width: 100%; padding: 4px; border-width: 7px; }
  .ss-start { width: 100%; }
  .ss-slot { width: 26px; height: 26px; }
  .ss-die { width: 38px; height: 38px; padding: 5px; }
  .ss-pip { width: 6px; height: 6px; }
}

/* ---------------- 3-2-5 / Teen Do Paanch (tdp-) ----------------
   Append to the end of style.css (or load after it). Every tdp- selector is new.
   Shared classes (.ta-opps, .ta-opp, .pcard, .btn, .ct-*, .cp-suitbtn) are only
   ever combined with a tdp- class here, never redefined on their own. */

/* header: hand number · trump · dealer */
.tdp-head {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  font-weight: 800; font-size: 0.86rem; color: #EDE3CD;
}
.tdp-handno, .tdp-dealtag {
  background: rgba(10,17,32,.5); border: 1px solid var(--rule); border-radius: 99px;
  padding: 3px 11px; white-space: nowrap;
}
.tdp-dealtag { color: var(--muted); font-weight: 700; }
.tdp-trump {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 10px;
  border-radius: 99px; border: 1px dashed var(--rule-strong); color: var(--muted);
  background: rgba(10,17,32,.35);
}
.tdp-trump-l { font-size: 0.7rem; letter-spacing: .08em; text-transform: uppercase; }
.tdp-trump-s { font-size: 1.25rem; line-height: 1; }
.tdp-trump.set {
  border: 1px solid var(--marigold); color: #ffe9a3;
  background: linear-gradient(180deg, rgba(244,234,213,.96), rgba(232,220,192,.96));
  box-shadow: 0 0 12px rgba(232,163,61,.45);
}
.tdp-trump.set .tdp-trump-l { color: #6B4A16; }
.tdp-trump.set .tdp-trump-s { color: #20262f; font-size: 1.45rem; }
.tdp-trump.set.red .tdp-trump-s { color: #d0342c; }

/* player strip: all three seats on one row, even at 375px */
.ta-opps.tdp-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ta-opp.tdp-plr {
  flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 6px 4px; min-width: 0; text-align: center;
}
.ta-opp.tdp-plr.tdp-mebox { background: rgba(232,163,61,.10); }
.tdp-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; }
.tdp-dealer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; vertical-align: 1px;
  background: var(--marigold); color: #3B2609; font-size: 0.62rem; font-weight: 800; line-height: 1;
}
.tdp-tally {
  font: 800 1.15rem/1.1 'Karla', system-ui, sans-serif; color: #EDE3CD; letter-spacing: .02em;
}
.tdp-tally.made { color: #7EE0A8; }
.tdp-tally.over { color: #ffe9a3; text-shadow: 0 0 8px rgba(232,163,61,.55); }

/* the table */
.tdp-table {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 0.8rem 0.6rem; min-height: 120px; border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  background: var(--grain),
    radial-gradient(ellipse at 50% 0%, rgba(244,234,213,.07), transparent 68%),
    linear-gradient(180deg, rgba(30,77,58,.62), rgba(18,52,39,.55));
  box-shadow: inset 0 2px 14px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
}
.tdp-trickrow { display: flex; justify-content: center; gap: 14px; }
.tdp-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; transition: transform .22s ease, opacity .22s ease; }
.tdp-slot .pcard { pointer-events: none; }
.tdp-slot.won { transform: translateY(-7px); }
.tdp-slot.won .pcard { box-shadow: 0 0 0 2px var(--marigold), 0 8px 18px rgba(0,0,0,.5); }
.tdp-slot.lost { opacity: .5; }
.tdp-who { font-size: 0.72rem; font-weight: 800; color: #cdd7f0; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* pulls */
.tdp-pullsowed { font-size: 0.82rem; font-weight: 800; color: var(--marigold); text-align: center; }
.tdp-pullnote {
  font-size: 0.8rem; font-weight: 700; color: #EDE3CD; text-align: center; max-width: 340px;
  background: rgba(10,17,32,.45); border: 1px solid var(--rule); border-radius: 10px; padding: 4px 10px;
}
.ta-bar.tdp-pullbar .ta-hint { text-align: center; max-width: 340px; }

/* between-hands summary */
.tdp-summary {
  padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(232,163,61,.4); min-width: 230px; max-width: 100%;
}
.tdp-summary-h { font-weight: 800; color: var(--marigold); text-align: center; margin-bottom: 5px; font-size: .92rem; }
.tdp-summary-row {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center;
  padding: 2px 0; font-size: .88rem; font-weight: 700;
}
.tdp-sum-mid { color: #EDE3CD; font-variant-numeric: tabular-nums; }
.tdp-sum-diff { font-weight: 800; color: var(--muted); min-width: 2ch; text-align: right; }
.tdp-sum-diff.up { color: #7EE0A8; }
.tdp-sum-diff.down { color: #F6A8A2; }
.tdp-sum-total { color: var(--muted); font-size: .8rem; }
.tdp-summary-line { margin-top: 5px; font-size: .74rem; color: var(--muted); text-align: center; }

/* your status + scorebook */
.tdp-mine { text-align: center; }
.tdp-book { display: flex; flex-direction: column; gap: 2px; max-height: 150px; overflow-y: auto; padding: 0 4px; }
.tdp-book-h { font-weight: 800; color: #EDE3CD; font-size: .82rem; text-align: center; }
.tdp-book-row { font-size: .74rem; color: var(--muted); font-weight: 600; }

/* trump call modal */
.tdp-callhint { font-size: .78rem; color: var(--muted); text-align: center; }

@media (max-width: 400px) {
  .tdp-head { gap: 6px; font-size: 0.8rem; }
  .tdp-trickrow { gap: 10px; }
  .tdp-summary-row { gap: 7px; font-size: .84rem; }
}


/* ---------------- Kali Teeri (kt-) ----------------
   Append to the end of style.css (or load after it). Every selector here is new
   and kt- prefixed; shared classes (ta-opps, ta-opp, ta-center, ta-hand, btn,
   pcard) are only ever combined with a kt- class, never redefined. */

/* small pill used across the strip, scores, calls and pickers */
.kt-chip {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font: 700 0.78rem 'Karla', system-ui, sans-serif; color: var(--paper);
  background: rgba(10,17,32,.55); border: 1px solid var(--rule);
  border-radius: 99px; padding: 3px 9px; line-height: 1.2;
}
button.kt-chip { cursor: pointer; }
button.kt-chip:disabled { opacity: .3; cursor: not-allowed; }
.kt-chip.red, .kt-slotbtn.red { color: #ff9c94; }
.kt-chip.kt-on, .kt-slotbtn.kt-on {
  background: linear-gradient(180deg, #ffe9a3, #f2c230); color: #3a2c00; border-color: var(--marigold);
}
.kt-chip.kt-on.red, .kt-slotbtn.kt-on.red { color: #a3221a; }

/* info strip: hand, bid, trump, called cards */
.kt-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.kt-bidchip { color: #ffe9a3; }
.kt-trumpchip { color: var(--marigold); font-weight: 800; }
.kt-trumpchip.red { color: #ff9c94; }
.kt-calls { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.kt-call { border-style: dashed; }
.kt-call b { font-weight: 800; }
.kt-callwho { color: var(--muted); font-weight: 800; }
.kt-call.kt-known { border-style: solid; border-color: rgba(126,224,168,.7); background: rgba(47,122,85,.35); }
.kt-call.kt-known .kt-callwho { color: #c8f5da; }

/* running totals */
.kt-scores { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.kt-score { font-size: 0.74rem; padding: 2px 8px; }
.kt-score.kt-me { box-shadow: inset 0 0 0 1px var(--marigold); }
.kt-score.kt-lead { color: #ffe9a3; }

/* opponents: compact boxes, never more than two rows on a phone */
.ta-opps.kt-opps { display: grid; gap: 5px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ta-opps.kt-opps.kt-o4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ta-opp.kt-opp {
  flex-direction: column; align-items: stretch; gap: 2px; min-width: 0;
  padding: 4px 6px; font-size: 0.78rem;
  /* the shared .ta-opp wraps; a wrapping COLUMN sizes each line to its content
     and lets the name row spill past the box on a phone */
  flex-wrap: nowrap; overflow: hidden;
}
.ta-opp.kt-opp.kt-passed { opacity: .55; }
.kt-opprow { display: flex; align-items: center; gap: 4px; min-width: 0; }
.kt-opprow .avatar { font-size: 1rem; flex-shrink: 0; }
.kt-opprow .avatar.face { width: 20px; height: 20px; }
.kt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.kt-oppstats { justify-content: space-between; font-size: 0.7rem; gap: 3px; }
.kt-oppstats > * { white-space: nowrap; }
.kt-dealer {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--marigold); color: #3B2609; font-size: 0.58rem; font-weight: 800; line-height: 1;
}
.kt-tag { font-weight: 800; color: var(--muted); }
.kt-tag.kt-tagbid { color: #ffe9a3; }
.kt-tag.kt-tagpartner { color: #9ff0c0; }
.kt-pts { font-weight: 800; color: #f2d48a; }
@media (max-width: 400px) {
  .ta-opps.kt-opps.kt-o4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* side totals and the secret-partner note */
.kt-tally { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: 0.8rem; font-weight: 800; }
.kt-side { padding: 2px 10px; border-radius: 99px; background: rgba(255,255,255,.06); color: #cdd7f0; }
.kt-sidebid { color: #ffe9a3; box-shadow: inset 0 0 0 1px rgba(232,163,61,.5); }
.kt-sidebid.kt-made { color: #c8f5da; box-shadow: inset 0 0 0 1px rgba(126,224,168,.7); background: rgba(47,122,85,.3); }
.kt-sidedef { color: #cdd7ff; }
.kt-secret {
  text-align: center; font-size: 0.82rem; font-weight: 800; color: #ffe9a3;
  background: rgba(232,163,61,.12); border: 1px dashed rgba(232,163,61,.55);
  border-radius: var(--r-md); padding: 5px 10px;
}
.kt-secret.kt-out { color: #c8f5da; background: rgba(47,122,85,.18); border-style: solid; border-color: rgba(126,224,168,.45); }

/* the table: up to seven cards in the trick */
.ta-center.kt-table { flex-direction: column; gap: 8px; padding: 0.7rem 0.5rem; }
.kt-trick { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.kt-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .22s ease, opacity .22s ease; }
.kt-slot.kt-won { transform: translateY(-6px); }
.kt-slot.kt-won .pcard { box-shadow: 0 0 0 2px var(--marigold), 0 6px 14px rgba(0,0,0,.5); }
.kt-slot.kt-lost { opacity: .55; }
.kt-who { font-size: 0.66rem; font-weight: 800; color: #cdd7f0; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-trickpts { font-size: 0.78rem; font-weight: 800; color: #f2d48a; }
@media (max-width: 400px) {
  .kt-trick .pcard-sm { width: 40px; height: 57px; }
  .kt-trick { gap: 3px; }
}

/* called card and the 3♠ marked in your own hand / the trick */
.pcard.kt-calledcard { box-shadow: 0 0 0 2px rgba(126,224,168,.85), 0 4px 10px rgba(0,0,0,.45); }
.pcard.kt-kali::before {
  content: '30'; position: absolute; top: 2px; right: 3px; z-index: 1;
  font: 800 9px 'Karla', system-ui, sans-serif; color: #fff; background: #20262f;
  border-radius: 6px; padding: 0 3px; line-height: 12px; pointer-events: none;
}

/* hand summary between hands */
.kt-summary { width: 100%; max-width: 420px; padding: 8px 10px; border-radius: 12px; background: rgba(10,17,32,.45); border: 1px solid var(--rule); }
.kt-sumhead { font-weight: 800; color: var(--marigold); text-align: center; font-size: .92rem; }
.kt-sumsub { text-align: center; font-size: .76rem; color: var(--muted); margin-bottom: 4px; }
.kt-sumrow { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px 48px; gap: 6px; align-items: center; padding: 2px 0; font-size: .84rem; }
.kt-sumrow.kt-me { color: #ffe9a3; }
.kt-sumname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.kt-sumrole { font-size: .7rem; font-weight: 800; color: #9ff0c0; }
.kt-sumpts { text-align: right; color: #f2d48a; font-weight: 700; }
.kt-sumdelta { text-align: right; font-weight: 800; color: var(--muted); }
.kt-sumdelta.kt-plus { color: #9ff0c0; }
.kt-sumdelta.kt-minus { color: #ff9c94; }

/* bidding: − value + · Bid · Pass, one row at 375px */
.kt-bidbar { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kt-bidhint { font-size: 0.82rem; font-weight: 700; color: #cdd7f0; text-align: center; }
.kt-bidrow { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: nowrap; }
.btn.kt-step { width: 40px; height: 42px; padding: 0; font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.kt-bidval {
  min-width: 52px; text-align: center; font: 800 1.35rem 'Karla', system-ui, sans-serif; color: #ffe9a3;
  font-variant-numeric: tabular-nums;
}
.btn.kt-bidbtn, .btn.kt-passbtn { height: 42px; padding: 0 14px; font-size: 0.95rem; white-space: nowrap; }
@media (max-width: 360px) {
  .kt-bidrow { gap: 4px; }
  .btn.kt-step { width: 34px; }
  .btn.kt-bidbtn, .btn.kt-passbtn { padding: 0 10px; }
}

.kt-mine { text-align: center; }

/* call modal: trump + partner picker */
.modal.kt-callmodal { display: flex; flex-direction: column; gap: 8px; padding: 1rem; }
.kt-myhand { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 4px; }
.kt-myhand .pcard { margin: 0 -5px; pointer-events: none; cursor: default; }
.kt-myhand .pcard.kt-trumpcard { transform: translateY(-5px); box-shadow: 0 0 0 2px var(--marigold), 0 4px 8px rgba(0,0,0,.4); }
.kt-label { font-weight: 800; font-size: 0.8rem; color: var(--marigold); letter-spacing: .04em; text-transform: uppercase; }
.kt-suitgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.btn.kt-suitbtn {
  min-width: 0; padding: 0.4rem 0.2rem; font-size: 1.35rem;
  display: inline-flex; align-items: baseline; justify-content: center; gap: 2px; white-space: nowrap;
}
.btn.kt-suitbtn.red .kt-glyph { color: #ff7b70; }
.kt-cnt { font-size: 0.82rem; font-weight: 800; }
.btn.kt-suitbtn.kt-on { background: linear-gradient(180deg, #FFD98A, #D4872A); color: #3B2609; border-color: #8A5A16; }
.btn.kt-suitbtn.kt-on.red .kt-glyph { color: #a3221a; }
.kt-slots { display: flex; justify-content: center; gap: 8px; }
.kt-slotbtn {
  min-width: 72px; padding: 6px 12px; cursor: pointer;
  font: 800 1.05rem 'Karla', system-ui, sans-serif; color: var(--paper);
  background: rgba(10,17,32,.55); border: 1px dashed var(--rule-strong); border-radius: var(--r-md);
}
.kt-sugs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px; }
.kt-sughead { font-size: 0.74rem; font-weight: 800; color: var(--muted); }
.kt-ranks { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kt-chip.kt-rank { justify-content: center; padding: 6px 0; font-size: 0.86rem; border-radius: var(--r-sm); }
.kt-suitpick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.kt-chip.kt-suitchip { justify-content: center; padding: 7px 0; font-size: 0.95rem; border-radius: var(--r-sm); }
.kt-note { font-size: 0.76rem; color: var(--muted); text-align: center; }
.btn.kt-go { width: 100%; }

/* new-version notice (shell adds #update-bar when /version.txt changes) */
.update-bar {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 9999; border: 1px solid #8A5A16; border-radius: 999px; padding: .6rem 1.1rem;
  font: 800 .9rem/1 'Karla', system-ui, sans-serif; color: #3B2609; cursor: pointer;
  background: linear-gradient(180deg, #FFD98A, #E8A33D); box-shadow: 0 6px 18px rgba(0,0,0,.5);
  animation: pop-in .25s ease both;
}

/* Judgement shrinking hands: "Next: 4 cards, trump ♥" line at the foot of the
   between-rounds summary card (.jd-summary). Append to public/css/style.css. */
.jd-summary-next {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.12);
  text-align: center;
  font-size: .86rem;
  font-weight: 800;
  color: var(--marigold);
}

/* ---------------- Least Count: cut joker + throw-then-pick (lc-) ----------------
   Append to public/css/style.css. None of these class names exist there yet
   (existing lc- classes: lc-myscore, lc-good, lc-bad, lc-deckbtn, lc-decbox, lc-why;
   untouched here). Used by public/js/games/leastcount.js. */

/* the cut joker in the centre: small card with "7s count 0" under it */
.lc-joker { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lc-jokertext { font-size: 0.72rem; font-weight: 800; color: #C9B6FF; white-space: nowrap; }

/* a joker-rank card anywhere (hand, open throw, round-end reveal):
   mirrors rummy's dashed wild mark, plus a tiny "0" badge bottom-left
   (the one corner a fanned hand never covers, and free of the index) */
.pcard.lc-jokermark { outline: 2px dashed #8b5cf6; outline-offset: -1px; }
.pcard.lc-jokermark::after {
  content: '0'; position: absolute; bottom: 3px; left: 3px;
  min-width: 14px; height: 14px; border-radius: 7px; padding: 0 3px;
  background: #8b5cf6; color: #fff; font: 800 10px/14px 'Karla', system-ui, sans-serif; text-align: center;
  pointer-events: none;
}
.pcard-sm.lc-jokermark::after { min-width: 12px; height: 12px; font-size: 9px; line-height: 12px; }
/* a selected joker keeps the gold selection ring readable */
.pcard.selected.lc-jokermark { outline: 3px solid var(--gold); }

/* the previous player's throw: label + the pickable card(s) */
.lc-open { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.lc-openrow { display: flex; gap: 4px; justify-content: center; }

/* Throw / Pick buttons with their reason or tip written underneath */
.lc-actbox { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lc-actbox .btn { display: inline-flex; }
.lc-actbox:has(> .btn + .btn) { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }

/* gentle tip (not an error) under Declare or Throw */
.lc-note {
  font-size: 0.78rem; font-weight: 700; line-height: 1.25;
  color: #cdd7f0; text-align: center; max-width: 240px;
}

/* 375px phones: keep the centre to two tidy rows and the bar side by side */
@media (max-width: 420px) {
  .ta-center .lc-open .pcard { width: 46px; height: 66px; }
  .lc-actbox > .lc-note, .lc-actbox > .lc-why, .lc-decbox > .lc-note, .lc-decbox > .lc-why { max-width: 160px; }
}

/* deck count badge: .rm-decknum has no `left`, so inside the deck button it
   drops to the right edge and clips to one digit ("3" for 35). Pin it. */
.lc-deckbtn .rm-decknum { left: 0; }

/* deck count badge (Rummy + Least Count): pin it so it never clips to one digit */
.rm-decknum { left: 0; }