/* ============================================================
   CARD TALLY - base theme
   ------------------------------------------------------------
   One shared shell (topbar, buttons, panels, modal, auth screens)
   reused near-verbatim from Pokernight Tracker's own stylesheet - same
   token names (--gold/--emerald/--crimson/etc) so every structural rule
   below just works, but re-valued here for a neutral "any card game"
   identity rather than poker's green-felt one. Each game gets its own
   look by re-declaring these SAME tokens under a body.theme-<game>
   class (see the bottom of this file) rather than a second parallel set
   of rules - picking a game reskins the whole app instead of only the
   bits that happen to have been given game-specific classes.
   ============================================================ */
:root{
  --bg-0:#0a0e16;
  --bg-1:#0e1524;
  --panel:#141c30;
  --panel-2:#1a2439;
  --panel-3:#223050;
  --line:#2c3a5c;
  --line-soft:#1f2a44;
  --ink:#f2f4f9;
  --ink-dim:#a7b1c9;
  --ink-faint:#76819c;
  --gold:#7fb2ff;
  --gold-2:#4f8fef;
  --gold-soft:rgba(127,178,255,0.14);
  --emerald:#4fd68c;
  --emerald-soft:rgba(79,214,140,0.14);
  --crimson:#ef6a5d;
  --crimson-soft:rgba(239,106,93,0.14);
  --felt:#182a4a;
  --silver:#c7d0cc;
  --bronze:#c98a4b;
  --radius:18px;
  --radius-sm:11px;
  --font-d:'Fraunces',Georgia,serif;
  --font-b:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-m:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{min-height:100%;}
body{
  margin:0; color:var(--ink); font-family:var(--font-b); min-height:100vh;
  background:
    radial-gradient(1100px 620px at 15% -8%, rgba(127,178,255,0.08), transparent 55%),
    radial-gradient(900px 700px at 105% 10%, rgba(79,214,140,0.06), transparent 55%),
    radial-gradient(1300px 900px at 50% 115%, rgba(24,42,74,0.45), transparent 60%),
    var(--bg-0);
  overflow-x:hidden; overscroll-behavior-y:contain;
  padding-bottom:env(safe-area-inset-bottom);
  transition:background-color .3s ease;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.028;
  background-image:repeating-linear-gradient(45deg, #fff 0 1px, transparent 1px 30px), repeating-linear-gradient(-45deg, #fff 0 1px, transparent 1px 30px);
}
button,input,select,textarea{font-family:inherit;}
input,textarea,select{-webkit-user-select:text; user-select:text; touch-action:manipulation;}
#app{max-width:960px; margin:0 auto; position:relative; z-index:1; padding:0 18px 64px;}
h1,h2,h3,h4{font-family:var(--font-d); margin:0; letter-spacing:0.2px;}
.num{font-variant-numeric:tabular-nums; font-family:var(--font-m);}
.hidden{display:none !important;}
@keyframes screenIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.screen{animation:screenIn .28s ease-out;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:50; max-width:960px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:16px 18px 13px; backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(10,14,22,0.96), rgba(10,14,22,0.85) 75%, transparent);
}
.brand{display:flex; align-items:center; gap:10px; cursor:pointer; flex-shrink:0;}
@media (max-width:420px){ .brand-title{font-size:17px;} .brand-sub{font-size:9.5px; letter-spacing:1.2px;} }
.brand-mark{
  width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, #223050, var(--panel-2) 70%); border:2px solid var(--gold);
  color:var(--gold); font-size:18px; box-shadow:0 0 0 1px rgba(127,178,255,0.25), 0 4px 12px rgba(0,0,0,0.4);
}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-title{font-family:var(--font-d); font-weight:800; font-size:19px; letter-spacing:0.3px;}
.brand-sub{font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--gold); font-weight:600;}
.topbar-stat{font-family:var(--font-m); font-size:12px; color:var(--ink-dim); text-align:right;}
.topbar-stat b{color:var(--ink); font-weight:600;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-b); font-weight:700; font-size:14px; letter-spacing:0.2px;
  padding:12px 18px; border-radius:12px; border:1px solid var(--line); cursor:pointer;
  color:var(--ink); background:var(--panel-2); transition:transform .08s ease, filter .15s ease, border-color .15s ease;
}
.btn:hover{border-color:var(--line-soft); filter:brightness(1.1);}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--gold); color:#071427; border:1px solid var(--gold); font-weight:700;}
.btn-primary:hover{filter:brightness(1.06);}
.btn-emerald{background:var(--emerald); color:#04241a; border:none; font-weight:700;}
.btn-danger{background:transparent; border:1px solid rgba(239,106,93,0.4); color:var(--crimson);}
.btn-ghost{background:transparent; border:1px solid var(--line);}
.btn-sm{padding:8px 12px; font-size:12.5px; border-radius:9px;}
.btn-block{width:100%;}
.btn:disabled{opacity:0.4; cursor:not-allowed;}
.icon-btn{width:36px; height:36px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:var(--panel-2); border:1px solid var(--line); color:var(--ink-dim); cursor:pointer; flex-shrink:0; padding:0; font-size:15px;}
.icon-btn:hover{color:var(--ink); border-color:var(--line-soft);}

/* ---------- Cards / panels ---------- */
.panel{background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius); padding:20px;}
.panel + .panel{margin-top:14px;}
.eyebrow{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold); font-weight:700;}
.muted{color:var(--ink-dim);}
.faint{color:var(--ink-faint);}
.tiny{font-size:12.5px; color:var(--ink-dim); line-height:1.55;}

/* ---------- Hero ---------- */
.hero{padding:26px 4px 18px; text-align:left;}
.hero h1{font-size:clamp(28px,5.6vw,40px); font-weight:800; line-height:1.05;}
.hero .accent{color:var(--gold); font-style:italic;}
.hero p{margin:12px 0 0; color:var(--ink-dim); font-size:15px; max-width:520px; line-height:1.55;}
.hero-stats{display:flex; gap:22px; margin-top:22px; flex-wrap:wrap;}
.hero-stat b{display:block; font-size:24px; color:var(--gold); font-weight:700;}
.hero-stat span{font-size:11px; text-transform:uppercase; letter-spacing:1.2px; color:var(--ink-faint);}

/* ---------- Game picker ---------- */
.game-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px; margin-top:20px;}
.game-tile{
  position:relative; border-radius:14px; padding:14px 16px 14px 20px; cursor:pointer; overflow:hidden; width:100%;
  border:1px solid var(--line-soft); background:var(--panel); transition:border-color .14s ease, background .14s ease;
  display:flex; align-items:center; gap:14px; text-align:left; font-family:inherit; color:inherit;
}
.game-tile:hover{border-color:var(--line); background:var(--panel-2);}
.game-tile:active{transform:scale(0.995);}
.game-edge{position:absolute; left:0; top:0; bottom:0; width:4px;}
.game-tile-mark{display:flex; flex-shrink:0; line-height:0;}
.game-mark{display:block; flex-shrink:0;}
.hero-mark{display:inline-flex; vertical-align:-4px; margin-right:10px; color:var(--gold);}
.group-sub{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-dim); margin-top:7px;}
.group-sub .game-mark{color:var(--ink-faint);}
.brand-mark svg{display:block;}
.game-tile-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.game-tile-name{font-family:var(--font-d); font-weight:700; font-size:17px; color:var(--ink);}
.game-tile-sub{font-size:12.5px; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.game-tile-count{font-size:11px; color:var(--ink-dim); background:var(--panel-2); border:1px solid var(--line-soft); border-radius:99px; padding:3px 9px; flex-shrink:0; white-space:nowrap;}

/* ---------- Group grid ---------- */
.group-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-top:16px;}
.group-card{
  position:relative; background:var(--panel); border:1px solid var(--line-soft); border-radius:14px;
  padding:0; overflow:hidden; cursor:pointer; transition:border-color .12s ease, background .12s ease;
  display:block; width:100%; text-align:left; font-family:inherit; color:inherit;
}
.group-card:hover{border-color:var(--line); background:var(--panel-2);}
.group-card-strip{position:absolute; left:0; top:0; bottom:0; width:4px;}
.group-card-body{display:block; padding:16px 16px 16px 20px;}
.group-card-title{font-family:var(--font-d); font-size:18px; font-weight:700; display:block;}
.group-card-meta{display:flex; gap:20px; margin-top:12px;}
.group-card-meta > span{font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:1px;}
.group-card-meta b{display:block; font-size:17px; font-weight:700; color:var(--ink); text-transform:none; letter-spacing:0; margin-top:2px; font-variant-numeric:tabular-nums;}
.group-card-top{display:block; margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft); font-size:12.5px; color:var(--ink-faint);}
.group-card-top b{color:var(--ink-dim);}

.empty-state{text-align:center; padding:56px 20px; border:1px dashed var(--line); border-radius:var(--radius); color:var(--ink-dim);}
.empty-state .glyph{font-size:34px; margin-bottom:10px; color:var(--gold);}
.empty-state h3{font-size:18px; margin-bottom:6px; color:var(--ink);}
.empty-state p{max-width:360px; margin:0 auto; font-size:13.5px; line-height:1.6;}

/* ---------- Group header ---------- */
.group-header{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-top:8px; flex-wrap:wrap;}
.back-link{display:inline-flex; align-items:center; gap:6px; color:var(--ink-dim); font-size:13px; cursor:pointer; margin-bottom:14px; font-weight:600;}
.back-link:hover{color:var(--gold);}
.group-title-row{display:flex; align-items:center; gap:10px;}
.group-title-row h1{font-size:clamp(24px,4.5vw,32px);}
.stat-bar{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.stat-chip{background:var(--panel); border:1px solid var(--line-soft); border-radius:12px; padding:9px 14px; flex:1; min-width:0;}
.stat-chip span{font-size:10.5px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); display:block;}
.stat-chip b{font-size:18px; font-weight:700; display:block; margin-top:2px; font-variant-numeric:tabular-nums;}

/* ---------- Tabs ---------- */
.tabbar{display:flex; gap:6px; margin:22px 0 16px; border-bottom:1px solid var(--line-soft); overflow-x:auto;}
.tab{padding:10px 4px; margin-right:20px; font-weight:700; font-size:13.5px; color:var(--ink-faint); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap;}
.tab.active{color:var(--gold); border-color:var(--gold);}

/* ---------- Play tab (tap-to-score) ---------- */
.play-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin-top:6px;}
.win-btn{
  position:relative; border-radius:var(--radius); border:1px solid var(--line-soft); background:var(--panel);
  padding:22px 14px; cursor:pointer; text-align:center; transition:transform .07s ease, border-color .12s ease, background .12s ease;
  display:flex; flex-direction:column; align-items:center; gap:8px; user-select:none;
}
.win-btn:hover{border-color:var(--gold);}
.win-btn:active{transform:scale(0.95); background:var(--panel-2);}
.win-btn .avatar{width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-d); font-weight:800; font-size:20px; color:#071427; background:linear-gradient(160deg,#fff,var(--gold));}
.win-btn .win-name{font-weight:800; font-size:15px;}
.win-btn .win-score{font-family:var(--font-m); font-size:24px; font-weight:700; color:var(--gold);}
.win-btn .win-streak{font-size:11px; color:var(--crimson); font-weight:700;}
@keyframes popScore{ 0%{transform:scale(1);} 35%{transform:scale(1.18);} 100%{transform:scale(1);} }
.win-btn.just-scored .win-score{animation:popScore .32s ease-out;}
.play-empty{grid-column:1/-1;}
.play-toolbar{display:flex; gap:10px; margin:16px 0 4px; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.round-count{font-size:12.5px; color:var(--ink-faint);}

/* ---------- Filters ---------- */
.filter-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px; padding:14px 16px; background:var(--panel); border:1px solid var(--line-soft); border-radius:14px;}
.filter-group{display:flex; align-items:center; gap:6px;}
.filter-label{font-size:10.5px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); font-weight:700; margin-right:2px;}
.chip-toggle{padding:6px 12px; border-radius:999px; border:1px solid var(--line); font-size:12px; font-weight:600; color:var(--ink-dim); cursor:pointer; background:var(--panel-2);}
.chip-toggle.active{background:var(--gold-soft); border-color:var(--gold); color:var(--gold);}
.input,.select-input{background:var(--panel-2); border:1px solid var(--line); color:var(--ink); border-radius:9px; padding:8px 10px; font-size:13px;}
.input:focus,.select-input:focus,.chip-toggle:focus-visible,.btn:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--gold); outline-offset:1px;}

/* ============================================================
   STATS
   ------------------------------------------------------------
   Two fixed series colours carry player identity wherever both
   players appear at once. They're deliberately NOT part of the
   per-game theme tokens: the pair was validated for colour-vision
   separation and contrast against every one of this app's dark
   surfaces, and letting a theme re-tint them would quietly undo
   that. Identity always rides a coloured mark (swatch, bar, pip)
   next to the text - never the text itself.
   ============================================================ */
:root{ --seg-1:#3987e5; --seg-2:#d95926; }

.card{background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius); padding:18px; margin-bottom:12px;}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
.card-head h3{font-size:15px; font-weight:700; letter-spacing:0.2px;}
.card-foot{margin:14px 0 0; font-size:12px; color:var(--ink-faint); line-height:1.5;}
.tag{font-size:11px; font-weight:600; color:var(--ink-dim); background:var(--panel-2); border:1px solid var(--line-soft); border-radius:99px; padding:3px 10px; white-space:nowrap;}
.swatch{width:10px; height:10px; border-radius:3px; flex-shrink:0; display:inline-block;}
.swatch.seg-1{background:var(--seg-1);} .swatch.seg-2{background:var(--seg-2);}

/* Head-to-head hero */
.h2h-card{padding:22px 18px 18px;}
.h2h{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.h2h-side{display:flex; align-items:center; gap:8px; min-width:0; flex:1;}
.h2h-side.end{justify-content:flex-end;}
.h2h-name{font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.h2h-score{display:flex; align-items:baseline; gap:10px; flex-shrink:0;}
.h2h-num{font-family:var(--font-b); font-size:44px; font-weight:700; line-height:1; letter-spacing:-1px;}
.h2h-dash{color:var(--ink-faint); font-size:22px; font-weight:400;}
.h2h-label{text-align:center; font-size:11px; text-transform:uppercase; letter-spacing:1.2px; color:var(--ink-faint); font-weight:600; margin:10px 0 8px;}
.h2h-legend{display:flex; gap:14px; flex-wrap:wrap;}
.legend-item{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-dim);}

/* Split bar: one part-to-whole track, 2px surface gap between segments */
.splitbar{display:flex; gap:2px; height:10px; border-radius:99px; overflow:hidden; background:var(--panel-3);}
.splitbar.empty{background:var(--panel-3);}
.splitbar-seg{flex-basis:0; min-width:0;}
.splitbar-seg.seg-1{background:var(--seg-1);} .splitbar-seg.seg-2{background:var(--seg-2);}

/* Compare rows */
.cmp-row{padding:12px 0; border-bottom:1px solid var(--line-soft);}
.cmp-row:last-of-type{border-bottom:none;}
.cmp-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px;}
.cmp-row.plain .cmp-head{margin-bottom:0;}
.cmp-label{font-size:12px; color:var(--ink-faint); text-align:center; flex:1;}
.cmp-val{font-size:17px; font-weight:500; color:var(--ink-faint); min-width:44px; font-variant-numeric:tabular-nums;}
.cmp-head .cmp-val:last-child{text-align:right;}
.cmp-val.lead{color:var(--ink); font-weight:700;}

/* Live game meter */
.live-card{border-color:var(--gold);}
.live-score{display:flex; justify-content:space-between; gap:12px; margin-bottom:12px;}
.live-side{display:flex; align-items:center; gap:8px; min-width:0;}
.live-name{font-size:13px; color:var(--ink-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.live-num{font-size:22px; font-weight:700; font-variant-numeric:tabular-nums;}
.meter{height:8px; border-radius:99px; background:var(--panel-3); overflow:hidden;}
.meter-fill{height:100%; border-radius:99px; background:var(--gold);}
.live-rounds-won{display:flex; justify-content:space-between; gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft); font-size:12.5px; color:var(--ink-faint);}
.live-rounds-won b{color:var(--ink); font-size:15px; font-weight:700;}

/* Recent form */
.form-row{display:flex; gap:4px; flex-wrap:wrap;}
.form-pip{width:26px; height:26px; border-radius:6px; flex-shrink:0;}
.form-pip.seg-1{background:var(--seg-1);} .form-pip.seg-2{background:var(--seg-2);}
.form-pip.tie{background:var(--panel-3); border:1px solid var(--line);}

/* Stat tiles */
.tile-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:12px;}
.tile{background:var(--panel); border:1px solid var(--line-soft); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:4px;}
.tile-label{font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); font-weight:600;}
.tile-value{font-size:28px; font-weight:700; line-height:1.1;}
.tile-foot{font-size:11.5px; color:var(--ink-faint);}
.lead-card{padding:20px 18px;}
.lead-name{font-size:32px; font-weight:700; line-height:1.15; margin-top:6px;}

/* ---------- Leaderboard ---------- */
.lb-row{display:grid; grid-template-columns:26px 1fr auto; gap:14px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line-soft);}
.lb-row:last-of-type{border-bottom:none;}
.lb-rank{font-size:13px; font-weight:600; color:var(--ink-faint); text-align:center; font-variant-numeric:tabular-nums;}
.lb-rank.lead{color:var(--gold);}
.lb-main{min-width:0;}
.lb-name{font-weight:600; font-size:14.5px; display:flex; align-items:center; gap:6px;}
.lb-sub{font-size:11.5px; color:var(--ink-faint); margin-top:6px;}
.lb-bar-track{height:6px; border-radius:99px; background:var(--panel-3); margin-top:8px; overflow:hidden; max-width:340px;}
.lb-bar-fill{height:100%; border-radius:99px; background:var(--gold);}
.lb-value{text-align:right;}
.lb-value b{font-size:18px; font-weight:700; display:block; font-variant-numeric:tabular-nums;}
.lb-value span{font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.6px;}
.pos{color:var(--emerald);} .neg{color:var(--crimson);}

/* ---------- Finished games log ---------- */
.game-row-wrap{border-bottom:1px solid var(--line-soft);}
.game-row-wrap:last-child{border-bottom:none;}
.game-row{display:flex; align-items:center; gap:12px; padding:12px 0; width:100%; background:none; border:none; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer;}
.game-detail{padding:0 0 16px;}
.game-no{font-size:12px; color:var(--ink-faint); font-variant-numeric:tabular-nums; min-width:16px; text-align:center;}
.game-main{flex:1; min-width:0;}
.game-score{font-size:14px; color:var(--ink-dim); font-variant-numeric:tabular-nums;}
.game-score .win{color:var(--ink); font-weight:700;}
.game-dash{color:var(--ink-faint);}
.game-meta{font-size:11.5px; color:var(--ink-faint); margin-top:3px;}
.swatch.tie{background:var(--panel-3); border:1px solid var(--line);}

/* ---------- Rounds log ---------- */
.round-log{display:flex; flex-direction:column-reverse; gap:0;}
.round-row{display:flex; align-items:center; justify-content:space-between; padding:10px 6px; border-bottom:1px solid var(--line-soft); font-size:13px;}
.round-row:last-child{border-bottom:none;}
.round-row .rnum{color:var(--ink-faint); font-size:12px; width:28px; flex-shrink:0; font-variant-numeric:tabular-nums;}
.round-row .rwinner{font-weight:600; flex:1; min-width:0;}
.round-row .rtime{color:var(--ink-faint); font-size:11.5px; flex-shrink:0;}

/* ---------- Players tab ---------- */
.player-row{display:flex; align-items:center; justify-content:space-between; padding:12px 6px; border-bottom:1px solid var(--line-soft); gap:10px;}
.player-row:last-child{border-bottom:none;}
.player-row.archived{opacity:0.5;}
.player-row-name{font-weight:700; display:flex; align-items:center; gap:8px;}
.player-row-meta{font-size:11.5px; color:var(--ink-faint); font-family:var(--font-m); margin-top:2px;}
.badge{font-size:9.5px; text-transform:uppercase; letter-spacing:0.6px; padding:2px 7px; border-radius:99px; background:var(--panel-3); color:var(--ink-faint); font-weight:700;}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(4,7,14,0.72); backdrop-filter:blur(3px); z-index:100; display:flex; align-items:flex-end; justify-content:center; padding:0;}
@media (min-width:640px){ .modal-overlay{align-items:center; padding:20px;} }
@keyframes modalIn{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
.modal{background:var(--bg-1); border:1px solid var(--line-soft); width:100%; max-width:600px; max-height:92vh; overflow-y:auto; border-radius:20px 20px 0 0; padding:24px; animation:modalIn .22s ease-out;}
@media (min-width:640px){ .modal{border-radius:20px;} }
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.modal-head h2{font-size:21px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); font-weight:700; margin-bottom:6px;}
.field .input,.field .select-input{width:100%;}
.field-row{display:flex; gap:10px;}
.field-row .field{flex:1;}
.modal-actions{display:flex; gap:10px; margin-top:20px;}
.small-note{font-size:12px; color:var(--ink-faint); margin-top:4px; line-height:1.5;}
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--panel-2); border:1px solid var(--gold); color:var(--ink); padding:11px 18px; border-radius:99px; font-size:13px; font-weight:600; z-index:200; box-shadow:0 8px 22px rgba(0,0,0,0.4);}
.textarea{width:100%; min-height:220px; resize:vertical; line-height:1.6; white-space:pre;}

/* ---------- Bummie ---------- */
.score-card{padding:20px 18px 16px;}
.score-line{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.score-side{display:flex; align-items:center; gap:9px; min-width:0; flex:1;}
.score-side.end{justify-content:flex-end;}
.score-name{font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.score-figs{display:flex; align-items:baseline; gap:9px; flex-shrink:0;}
.score-num{font-family:var(--font-b); font-size:36px; font-weight:700; line-height:1; letter-spacing:-0.5px;}
.score-dash{color:var(--ink-faint); font-size:18px;}
.card-foot.center{text-align:center; margin-top:10px; text-transform:uppercase; letter-spacing:1.2px; font-size:10.5px; font-weight:600;}
.bmk-badge{width:34px; height:34px; border-radius:9px; background:var(--panel-2); border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;}

/* ---------- Poker ---------- */
.poker-board{display:flex; flex-direction:column; gap:6px;}
.poker-row{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px; background:var(--panel-2); border:1px solid transparent;}
.poker-row.lead{border-color:var(--gold); background:var(--gold-soft);}
.poker-row.out{opacity:0.5;}
.poker-rank{width:24px; text-align:center; font-family:var(--font-m); font-weight:800; font-size:13px; color:var(--ink-faint); flex-shrink:0;}
.poker-rank.rank-1{color:var(--gold);}
.poker-rank.rank-2{color:var(--silver);}
.poker-rank.rank-3{color:var(--bronze);}
.poker-name{flex:1; min-width:0; font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px;}
.poker-name span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.poker-chip-value{display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0;}
.poker-chips{font-family:var(--font-b); font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-0.3px;}
.poker-chips-gbp{font-family:var(--font-m); font-size:10.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; margin-top:1px;}
.poker-delta{font-family:var(--font-m); font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:99px; flex-shrink:0; white-space:nowrap;}
.poker-delta.up{color:var(--emerald); background:var(--emerald-soft);}
.poker-delta.down{color:var(--crimson); background:var(--crimson-soft);}

.poker-round-list{display:flex; flex-direction:column; gap:10px;}
.poker-round-row{display:flex; align-items:center; gap:10px;}
.poker-round-name{flex:1; min-width:0; font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.poker-delta-input{width:110px; text-align:right; flex-shrink:0;}

.stack-setup-list{display:flex; flex-direction:column; gap:16px;}
.stack-setup-row{padding-bottom:14px; border-bottom:1px solid var(--line-soft);}
.stack-setup-row:last-child{border-bottom:none; padding-bottom:0;}
.stack-setup-name{display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:700; font-size:14px; margin-bottom:10px;}
.chip-field-row{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
.chip-field{display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--line-soft); border-radius:10px; padding:7px 9px;}
.chip-dot{width:13px; height:13px; border-radius:50%; flex-shrink:0; border:2px solid rgba(255,255,255,0.28);}
.chip-dot.red{background:#e21b1b;}
.chip-dot.green{background:#2e9e4a;}
.chip-dot.blue{background:#2f6fe0;}
.chip-dot.black{background:#1a1a1a; border-color:rgba(255,255,255,0.55);}
.chip-denom-label{font-size:11.5px; color:var(--ink-dim); flex:1; min-width:0;}
.chip-denom-value{color:var(--ink-faint); font-family:var(--font-m); margin-left:4px;}
.chip-count-input{width:52px; text-align:right; padding:6px 8px; font-size:13px; flex-shrink:0;}
.poker-chips-note{font-size:11.5px; color:var(--ink-faint); flex-shrink:0;}

.poker-chart-svg{width:100%; height:180px; display:block; overflow:visible;}
.chart-legend{display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:10px;}
.chart-legend-item{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-dim);}
.chart-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}

/* Folding secondary panels */
.fold-group{margin-top:16px; border-top:1px solid var(--line-soft);}
.fold{border-bottom:1px solid var(--line-soft);}
.fold-group .fold:last-child{border-bottom:none;}
.card + .fold, .fold + .card{margin-top:0;}
.fold:not(.fold-group .fold){background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius); margin-bottom:12px;}
.fold > summary{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 0; cursor:pointer; font-weight:600; font-size:14px; list-style:none;}
.fold:not(.fold-group .fold) > summary{padding:16px 18px;}
.fold > summary::-webkit-details-marker{display:none;}
.fold > summary::after{content:''; width:7px; height:7px; border-right:2px solid var(--ink-faint); border-bottom:2px solid var(--ink-faint); transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s ease; flex-shrink:0; margin-left:auto;}
.fold > summary .tag{margin-left:auto;}
.fold > summary .tag + ::after{margin-left:10px;}
.fold[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px);}
.fold > summary:hover{color:var(--gold);}
.fold-body{padding-bottom:16px;}
.fold:not(.fold-group .fold) .fold-body{padding:0 18px 18px;}
.bmk-badge-sm{width:26px; height:26px; border-radius:8px; font-size:14px; margin-right:6px; display:inline-flex;}
.bmk-copybox{min-height:140px; font-size:12px;}
.bmk-field-label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); font-weight:700; margin-bottom:8px;}
.bmk-winner-row{display:flex; gap:8px;}
.bmk-winner-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 10px;
  border-radius:12px; border:1.5px solid var(--line); background:var(--panel-2); color:var(--ink-dim);
  font-weight:700; font-size:14px; cursor:pointer; transition:border-color .12s ease, background .12s ease, color .12s ease;
}
.bmk-winner-btn.selected{color:var(--ink); background:var(--panel-3);}
.bmk-winner-btn.seg-1.selected{border-color:var(--seg-1);}
.bmk-winner-btn.seg-2.selected{border-color:var(--seg-2);}

footer.site-footer{text-align:center; padding:36px 0 10px; color:var(--ink-faint); font-size:11.5px; letter-spacing:0.4px;}
footer.site-footer b{color:var(--gold);}

/* ---------- Auth ---------- */
.account-pill{display:flex; align-items:center; gap:6px; background:var(--panel-2); border:1px solid var(--line); padding:5px 6px 5px 12px; border-radius:999px; font-size:12.5px; min-width:0;}
.account-pill b{color:var(--gold); font-weight:700;}
.pill-text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
@media (max-width:520px){ .pill-prefix{display:none;} }
.auth-wrap{max-width:400px; margin:10vh auto 0; padding:0 4px;}
.auth-card{background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius); padding:30px 26px;}
.auth-brand{display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:18px;}
.auth-toggle{display:flex; gap:8px; margin-top:18px; justify-content:center; font-size:13px; color:var(--ink-dim);}
.auth-toggle a{color:var(--gold); font-weight:700; text-decoration:none; cursor:pointer;}
.auth-error{font-size:12.5px; color:var(--crimson); background:var(--crimson-soft); border:1px solid rgba(239,106,93,0.35); padding:9px 12px; border-radius:9px; margin-bottom:14px;}
.auth-note{font-size:12px; color:var(--ink-faint); margin-bottom:14px; line-height:1.5;}
.auth-checking{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:70vh; gap:14px; color:var(--ink-dim);}
.spinner{width:30px; height:30px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--gold); animation:spin 0.8s linear infinite;}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============================================================
   PER-GAME THEMES
   ------------------------------------------------------------
   Re-declaring the SAME tokens the whole shell above already uses -
   picking a game reskins every screen (topbar, buttons, leaderboard bars,
   award cards, auth screen) at once, rather than needing a parallel set
   of per-game component rules. Applied to <body> the moment a game is
   chosen (see App.chooseGame) and cleared back to the neutral picker
   theme on the way home.
   ============================================================ */
body.theme-poker{
  --bg-0:#0b1310; --bg-1:#0f1a15; --panel:#152119; --panel-2:#1b2c22; --panel-3:#23392c;
  --line:#2c4335; --line-soft:#203327; --gold:#e0b256; --gold-2:#c8933a; --gold-soft:rgba(224,178,86,0.14);
  --felt:#1e4534;
}
body.theme-blackjack{
  --bg-0:#0a1512; --bg-1:#0d1c17; --panel:#12241d; --panel-2:#183024; --panel-3:#1f3d2e;
  --line:#2a4a3a; --line-soft:#1c3527; --gold:#d64545; --gold-2:#b23333; --gold-soft:rgba(214,69,69,0.14);
  --emerald:#3ecf7a; --felt:#0f2e21;
}
body.theme-beanie{
  --bg-0:#160f0a; --bg-1:#1c140d; --panel:#241a10; --panel-2:#2c2013; --panel-3:#3a2a19;
  --line:#4a3521; --line-soft:#33240f; --gold:#8bc34a; --gold-2:#6a9c34; --gold-soft:rgba(139,195,74,0.16);
  --crimson:#d98e3a; --crimson-soft:rgba(217,142,58,0.16);
}
/* Rummikub-tile flavour: warm ivory ink on a dark walnut table, standing
   in for the cream ceramic tiles and their classic red/blue/black/orange
   number colours without needing any image asset. */
body.theme-bummikub{
  --bg-0:#171310; --bg-1:#1c1712; --panel:#221c15; --panel-2:#2b231a; --panel-3:#372c1f;
  --line:#4a3c28; --line-soft:#332a1c; --ink:#f6efdd; --ink-dim:#cabf9d; --ink-faint:#8f8264;
  --gold:#e0b23a; --gold-2:#c99a2e; --gold-soft:rgba(224,178,58,0.16);
  --emerald:#3a9e6b; --crimson:#d1453a; --crimson-soft:rgba(209,69,58,0.16);
}
body.theme-bummikub{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 34px),
    radial-gradient(1000px 600px at 15% -10%, rgba(224,178,58,0.10), transparent 55%),
    radial-gradient(900px 700px at 105% 10%, rgba(209,69,58,0.08), transparent 55%),
    var(--bg-0);
}

/* ---------- UNO theme: as branded as a CSS homage can get ---------- */
body.theme-uno{
  --bg-0:#0a0a0a; --bg-1:#111111; --panel:#161616; --panel-2:#1d1d1d; --panel-3:#262626;
  --line:#333333; --line-soft:#222222; --ink:#ffffff; --ink-dim:#d8d8d8; --ink-faint:#8f8f8f;
  --gold:#ffd400; --gold-2:#ffcc00; --gold-soft:rgba(255,212,0,0.16);
  --emerald:#2e9e4a; --crimson:#e21b1b; --crimson-soft:rgba(226,27,27,0.16);
}
body.theme-uno{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 46px),
    radial-gradient(1000px 600px at 15% -10%, rgba(226,27,27,0.18), transparent 55%),
    radial-gradient(900px 700px at 105% 10%, rgba(0,110,60,0.14), transparent 55%),
    radial-gradient(900px 700px at 50% 115%, rgba(0,60,180,0.12), transparent 60%),
    var(--bg-0);
}
/* The wordmark: a tilted red rounded-square with a white ellipse behind a
   bold italic "UNO" - the classic silhouette, built entirely from shapes
   and type rather than any image asset, so it can't be a trademark/asset
   ownership problem while still reading as an unmistakable homage the
   instant it's on screen. */
.uno-badge{
  width:44px; height:44px; border-radius:11px; background:#e21b1b; border:3px solid #fff;
  display:flex; align-items:center; justify-content:center; transform:rotate(-9deg);
  box-shadow:0 4px 14px rgba(226,27,27,0.5);
  position:relative; flex-shrink:0;
}
.uno-badge::before{
  content:''; position:absolute; width:76%; height:52%; background:#fff; border-radius:50%;
}
.uno-badge span{
  position:relative; font-family:var(--font-d); font-weight:900; font-style:italic; font-size:15px;
  color:#e21b1b; letter-spacing:-0.5px;
}
.uno-color-strip{
  background:linear-gradient(180deg,#e21b1b 0 25%, #ffd400 25% 50%, #2e9e4a 50% 75%, #1866c9 75% 100%);
}
.theme-uno .win-btn{border-width:2px;}
.theme-uno .win-btn:nth-of-type(4n+1){ --pc:#e21b1b; }
.theme-uno .win-btn:nth-of-type(4n+2){ --pc:#ffd400; }
.theme-uno .win-btn:nth-of-type(4n+3){ --pc:#2e9e4a; }
.theme-uno .win-btn:nth-of-type(4n+4){ --pc:#1866c9; }
.theme-uno .win-btn{border-color:color-mix(in srgb, var(--pc, var(--gold)) 55%, var(--line));}
.theme-uno .win-btn .avatar{background:var(--pc, var(--gold)); color:#fff; border:3px solid #fff;}
.theme-uno .win-btn .win-score{color:var(--pc, var(--gold));}
.theme-uno .btn-primary{background:#e21b1b; border-color:#e21b1b; color:#fff;}
.theme-uno .meter-fill, .theme-uno .lb-bar-fill{background:#e21b1b;}
.theme-uno .lb-rank.r1{color:#e21b1b; border-color:#e21b1b; background:rgba(226,27,27,0.14);}
.theme-uno h1,.theme-uno h2,.theme-uno h3{font-style:italic;}