/* GamerScore Keep — design system: tokens, layout, components.
   Dark is the polished default; light keeps full parity. Scores and money
   always render in tabular numerals so boards never jitter. */
:root{
  --bg:#0A0C10; --bg2:#0E1116; --card:#151922; --card2:#1D2330; --line:rgba(255,255,255,.08);
  --text:#F4F6FB; --muted:#9AA3B2; --indigo:#6366F1; --indigo2:#A5B4FC; --emerald:#10B981; --emerald2:#34D399;
  --gold:#F59E0B; --red:#EF4444; --amber:#FBBF24;
  --shadow:0 10px 34px rgba(0,0,0,.5); --shadow-sm:0 4px 16px rgba(0,0,0,.35);
  --glass:rgba(21,25,34,.78);
  --radius:18px; --radius-sm:12px; --radius-xs:9px;
  --tile:#EDEBE4; --tile-ink:#1B1E26;
  --topbar-h:60px; --bottomnav-h:66px;
  --ring:0 0 0 3px rgba(99,102,241,.35);
}
[data-theme="light"]{
  --bg:#F2F3F8; --bg2:#E9ECF3; --card:#FFFFFF; --card2:#F2F4F9; --line:rgba(13,15,18,.09);
  --text:#14171D; --muted:#5B6472; --glass:rgba(255,255,255,.82);
  --shadow:0 10px 30px rgba(20,24,40,.10); --shadow-sm:0 4px 14px rgba(20,24,40,.08);
  --tile:#FFFFFF; --tile-ink:#1B1E26;
  --ring:0 0 0 3px rgba(99,102,241,.28);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0; background:
    radial-gradient(1100px 560px at 85% -10%, rgba(99,102,241,.17), transparent 60%),
    radial-gradient(900px 520px at 8% 108%, rgba(16,185,129,.11), transparent 60%),
    radial-gradient(600px 400px at 50% 45%, rgba(245,158,11,.04), transparent 65%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text); font-family:"Avenir Next",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.45;
}
::selection{background:rgba(99,102,241,.45);}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:8px;}
#app{min-height:100%; display:flex; flex-direction:column;}
#topbar{
  position:sticky; top:0; z-index:40; height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between; padding:0 16px;
  background:var(--glass); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.brand{font-weight:800; font-size:1.15rem; letter-spacing:.2px; display:flex; gap:9px; align-items:center; cursor:pointer;}
.brand-die{display:inline-flex; width:34px; height:34px; border-radius:10px; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--indigo),#4338CA); color:#fff; box-shadow:0 4px 12px rgba(99,102,241,.45), inset 0 1px 0 rgba(255,255,255,.35);}
.brand-die svg{width:21px; height:21px;}
.brand-name{background:linear-gradient(90deg,var(--text),var(--indigo2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.topbar-right{display:flex; align-items:center; gap:10px;}
.live-dot{font-size:.72rem; font-weight:700; color:#052e1f; background:var(--emerald); border-radius:999px; padding:3px 10px 3px 20px; position:relative;}
.live-dot::before{content:""; position:absolute; left:8px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:#052e1f; animation:pulse 1.4s infinite;}
@keyframes pulse{0%{opacity:1; transform:scale(1);}50%{opacity:.4; transform:scale(.7);}100%{opacity:1; transform:scale(1);}}
.hidden{display:none !important;}
.icon-btn{
  background:var(--card2); border:1px solid var(--line); color:var(--text); border-radius:12px;
  width:40px; height:40px; font-size:1.1rem; cursor:pointer; transition:transform .12s, background .2s, box-shadow .2s;
  display:inline-flex; align-items:center; justify-content:center;
}
.icon-btn svg{width:21px; height:21px;}
.icon-btn:hover{box-shadow:var(--shadow-sm);}
.icon-btn:active{transform:scale(.92);}
#view{flex:1; width:100%; max-width:1180px; margin:0 auto; padding:18px 16px calc(var(--bottomnav-h) + 28px); overflow-x:clip;}

#sidebar{display:none;}
#bottomnav{
  position:fixed; bottom:0; left:0; right:0; z-index:40; height:calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex; background:var(--glass); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-top:1px solid var(--line);
}
.nav-item{
  flex:1; background:none; border:none; color:var(--muted); cursor:pointer; min-height:52px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:.68rem; font-weight:600;
  transition:color .2s;
}
.nav-item .nav-ico{display:inline-flex; font-size:1.3rem; line-height:1;}
.nav-item .nav-ico svg{width:23px; height:23px;}
.nav-item.active{color:var(--indigo2);}
.nav-item:active{transform:scale(.95);}

@media (min-width:1100px){
  #app{display:grid; grid-template-columns:216px 1fr; grid-template-rows:var(--topbar-h) 1fr;}
  #topbar{grid-column:1 / -1;}
  #sidebar{display:block; background:var(--glass); border-right:1px solid var(--line); padding:18px 12px; position:sticky; top:var(--topbar-h); height:calc(100vh - var(--topbar-h));}
  .side-nav{display:flex; flex-direction:column; gap:4px;}
  .side-nav .nav-item{flex-direction:row; justify-content:flex-start; gap:12px; padding:12px 14px; border-radius:12px; font-size:.95rem; min-height:48px;}
  .side-nav .nav-item.active{background:rgba(99,102,241,.16); color:var(--text);}
  #view{grid-column:2; padding-bottom:32px; max-width:1000px;}
  #bottomnav{display:none;}
}

/* ---------- generic components ---------- */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.025), transparent 45%), var(--glass);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-sm);
}
.card + .card{margin-top:14px;}
.card h2,.card h3{margin:0 0 10px;}
h1{font-size:1.55rem; margin:0 0 12px; letter-spacing:-.01em;} h2{font-size:1.2rem;} h3{font-size:1.05rem;}
.muted{color:var(--muted);} .small{font-size:.82rem;}
.row{display:flex; align-items:center; gap:10px;}
.grow{flex:1;}
.btn{
  appearance:none; border:1px solid transparent; border-radius:12px; padding:11px 18px; font-size:.95rem; font-weight:700; min-height:44px;
  cursor:pointer; color:#fff; background:linear-gradient(135deg,var(--indigo),#4F46E5);
  transition:transform .1s, box-shadow .2s, filter .2s; box-shadow:0 5px 16px rgba(99,102,241,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn:hover{filter:brightness(1.08);} .btn:active{transform:scale(.96);}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}
.btn-emerald{background:linear-gradient(135deg,var(--emerald),#059669); box-shadow:0 5px 16px rgba(16,185,129,.35), inset 0 1px 0 rgba(255,255,255,.25);}
.btn-ghost{background:var(--card2); color:var(--text); border:1px solid var(--line); box-shadow:none;}
.btn-danger{background:linear-gradient(135deg,#EF4444,#B91C1C); box-shadow:0 5px 16px rgba(239,68,68,.3), inset 0 1px 0 rgba(255,255,255,.25);}
.btn-sm{padding:7px 12px; font-size:.82rem; border-radius:9px; min-height:38px;}
.btn.on{border-color:var(--indigo); background:rgba(99,102,241,.18); box-shadow:var(--ring);}
.input,select.input,textarea.input{
  width:100%; background:var(--card2); border:1px solid var(--line); color:var(--text);
  border-radius:var(--radius-sm); padding:11px 12px; font-size:.95rem; outline:none; min-height:44px;
  transition:border-color .15s, box-shadow .15s;
}
.input:focus{border-color:var(--indigo); box-shadow:var(--ring);}
label.field{display:block; margin:10px 0;}
label.field > span{display:block; font-size:.8rem; font-weight:600; color:var(--muted); margin-bottom:6px;}
div.field{margin:10px 0;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.empty{text-align:center; padding:34px 16px; color:var(--muted);}
.empty .big{font-size:2.6rem; display:block; margin-bottom:8px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.3));}
.badge{display:inline-block; font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:999px; background:rgba(99,102,241,.18); color:var(--indigo2); border:1px solid rgba(99,102,241,.35); white-space:nowrap;}
.badge.green{background:rgba(16,185,129,.15); color:var(--emerald2); border-color:rgba(16,185,129,.35);}
.badge.gold{background:rgba(245,158,11,.15); color:var(--gold); border-color:rgba(245,158,11,.4);}
.avatar{
  width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:1.25rem; font-weight:800; color:#fff; flex:none;
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.25); border:2px solid rgba(255,255,255,.14);
}
.avatar.lg{width:56px; height:56px; font-size:1.7rem;}
.avatar.xl{width:76px; height:76px; font-size:2.2rem;}
.skeleton{border-radius:10px; background:linear-gradient(100deg,var(--card2) 40%,rgba(255,255,255,.09) 50%,var(--card2) 60%); background-size:200% 100%; animation:shimmer 1.3s infinite;}
@keyframes shimmer{to{background-position:-200% 0;}}

/* ---------- animations for score changes & celebrations ---------- */
@keyframes bumpK{0%{transform:scale(1);}35%{transform:scale(1.16);}100%{transform:scale(1);}}
.bump{animation:bumpK .5s ease;}
.delta-float{position:absolute; right:10px; top:6px; font-weight:800; font-size:1.05rem; pointer-events:none; animation:floatUp 1.5s ease forwards; text-shadow:0 2px 8px rgba(0,0,0,.5);}
.delta-float.pos{color:var(--emerald2);} .delta-float.neg{color:#FCA5A5;}
@keyframes floatUp{0%{opacity:0; transform:translateY(8px);}18%{opacity:1;}100%{opacity:0; transform:translateY(-30px);}}
.celebrate-canvas{position:fixed; inset:0; z-index:300; pointer-events:none;}

/* ---------- auth ---------- */
.auth-wrap{max-width:420px; margin:5vh auto 0;}
.auth-card{text-align:center; padding:26px 22px; position:relative; overflow:hidden;}
.auth-card::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--indigo),var(--emerald),var(--gold));}
.auth-tabs{display:flex; gap:8px; margin:16px 0;}
.auth-tabs .btn{flex:1;}
.auth-tabs .btn:not(.on){background:var(--card2); color:var(--text); border:1px solid var(--line); box-shadow:none;}
.auth-brand{font-size:2.7rem; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));}
.auth-title{font-size:1.6rem; font-weight:800; margin:8px 0 2px; letter-spacing:-.01em;}
.linklike{color:var(--indigo2); background:none; border:none; padding:0; font:inherit; text-decoration:none; font-weight:600; cursor:pointer;}
.linklike:hover{text-decoration:underline;}
.reset-link-box{margin-top:12px; padding:12px; border:1px dashed var(--indigo); border-radius:12px; background:rgba(99,102,241,.08); text-align:left;}
.acct-avatar{width:72px; height:72px; font-size:2.4rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; box-shadow:inset 0 -4px 8px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.3); border:2px solid rgba(255,255,255,.15);}
.acct-btn{display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--card2); font-size:1.15rem; cursor:pointer; padding:2px;}
.emoji-pick{display:grid; grid-template-columns:repeat(8,1fr); gap:6px; margin-top:6px;}
.emoji-pick button{font-size:1.35rem; background:var(--card2); border:1px solid var(--line); border-radius:9px; padding:7px 0; cursor:pointer; min-height:42px; transition:transform .1s;}
.emoji-pick button:active{transform:scale(.9);}
.emoji-pick button.sel{border-color:var(--indigo); box-shadow:var(--ring);}
.color-pick{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
.color-pick button{width:36px; height:36px; border-radius:50%; border:2px solid transparent; cursor:pointer;}
.color-pick button.sel{border-color:#fff; box-shadow:0 0 0 2px var(--indigo);}

/* ---------- dashboard ---------- */
.dash-head{display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
.fam-switch{display:flex; align-items:center; gap:8px;}
.games-carousel{display:flex; gap:12px; overflow-x:auto; padding:6px 2px 14px; scroll-snap-type:x mandatory; scrollbar-width:thin;}
.game-card{min-width:252px; max-width:300px; scroll-snap-align:start; cursor:pointer; transition:transform .16s, box-shadow .2s; animation:fadeSlide .35s ease both;}
.game-card:hover{transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.4), 0 0 0 1px var(--theme-c,#6366F1) inset;}
.game-card .status{font-size:.72rem; font-weight:700;}
.game-card.paused{opacity:.78; border-style:dashed;}
.game-card .avatar{margin-right:-9px; border:2px solid var(--card);}
.game-card .avatar:last-of-type{margin-right:0;}
.score-pill{font-size:1.6rem; font-weight:800; font-variant-numeric:tabular-nums; display:inline-block;}
.cta-banner{
  background:linear-gradient(120deg, #4F46E5, rgba(99,102,241,.92) 45%, rgba(16,185,129,.9)); border:none; color:#fff;
  display:flex; align-items:center; gap:14px; padding:18px; margin-bottom:16px; cursor:pointer; width:100%; text-align:left;
  box-shadow:0 12px 30px rgba(79,70,229,.35); transition:transform .15s, filter .2s;
}
.cta-banner:hover{filter:brightness(1.07);} .cta-banner:active{transform:scale(.985);}
.cta-banner .cta-ico{font-size:2.1rem; filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));}
.cta-banner .cta-t{font-size:1.12rem; font-weight:800;}
.list-row{display:flex; align-items:center; gap:12px; padding:10px 4px; border-bottom:1px solid var(--line);}
.list-row:last-child{border-bottom:none;}
.list-row > .grow{min-width:0;}

/* ---------- scorekeeper ---------- */
.sk-head{position:sticky; top:var(--topbar-h); z-index:30; background:var(--glass); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin-bottom:14px; box-shadow:var(--shadow-sm);}
.sk-title-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.turn-pill{font-size:.8rem; font-weight:700; background:rgba(16,185,129,.15); color:var(--emerald2); border:1px solid rgba(16,185,129,.4); border-radius:999px; padding:5px 12px;}
.score-grid{overflow-x:auto; -webkit-overflow-scrolling:touch;}
table.scores{border-collapse:collapse; width:100%; min-width:520px; font-variant-numeric:tabular-nums;}
table.scores th,table.scores td{padding:9px 10px; text-align:center; border-bottom:1px solid var(--line); white-space:nowrap;}
table.scores th{background:var(--card2); position:sticky; top:0;}
table.scores td.round-cell{font-weight:700;}
table.scores tr.leader-row td{background:rgba(16,185,129,.07);}
.rank-badge{font-size:.7rem; font-weight:800; border-radius:8px; padding:2px 7px; background:var(--card2); border:1px solid var(--line);}
.rank-1{background:linear-gradient(135deg,#F59E0B,#D97706); color:#1a1005; border:none;}
.rank-2{background:#9AA3B2; color:#14171d; border:none;}
.rank-3{background:#B45309; color:#fff; border:none;}
.player-head{display:flex; flex-direction:column; align-items:center; gap:4px;}
.train-btn{background:none; border:none; font-size:1.15rem; cursor:pointer; opacity:.35; transition:transform .12s, opacity .2s; line-height:1; min-width:36px; min-height:36px;}
.train-btn.open{opacity:1; filter:drop-shadow(0 0 6px rgba(245,158,11,.8)); transform:scale(1.15);}
.train-btn:active{transform:scale(.9);}
.quicktap-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;}
.quicktap-card{text-align:center; padding:12px; position:relative;}
.qt-btns{display:flex; gap:6px; justify-content:center; margin-top:8px; flex-wrap:wrap;}
.qt-btn{background:var(--card2); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:10px 12px; font-weight:700; cursor:pointer; min-height:44px; min-width:44px; transition:transform .1s, background .15s;}
.qt-btn:active{transform:scale(.9); background:rgba(99,102,241,.25);}
.round-entry-grid{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));}
.re-field{display:flex; flex-direction:column; gap:6px;}
.re-field .input{text-align:center; font-size:1.15rem; font-weight:700; padding:12px 8px;}
.re-field.focused .input{border-color:var(--emerald); box-shadow:0 0 0 3px rgba(16,185,129,.25);}
.sk-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}
@media (min-width:768px){
  .sk-split{display:grid; grid-template-columns:1.2fr .8fr; gap:14px; align-items:start;}
}
.chart-wrap{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px;}
.chart-wrap canvas{width:100%; height:220px; display:block;}
.legend{display:flex; gap:12px; flex-wrap:wrap; font-size:.78rem; margin-top:8px;}
.legend i{display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:5px; vertical-align:-1px;}

/* ---------- mexican train / dominoes ---------- */
.engine-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px;}
.domino{
  background:linear-gradient(180deg,#F7F4EC,var(--tile)); color:var(--tile-ink); border-radius:13px; padding:8px 6px 6px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px; border:2px solid rgba(0,0,0,.08);
  box-shadow:0 4px 12px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.8); transition:transform .12s, opacity .25s, border-color .2s; user-select:none;
}
.domino:active{transform:scale(.93);}
.domino.played{opacity:.38; filter:grayscale(.6); border-color:var(--emerald);}
.domino .dom-label{font-size:.68rem; font-weight:800;}
.domino .round-link{font-size:.62rem; font-weight:700; background:var(--emerald); color:#052e1f; border-radius:6px; padding:1px 6px;}
.dom-half{width:100%; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(4,1fr); aspect-ratio:1/1.15; gap:0; padding:4px;}
.dom-half .pip{width:62%; aspect-ratio:1; border-radius:50%; background:var(--tile-ink); place-self:center;}
.dom-half .pip.off{background:transparent;}
.dom-divider{width:80%; height:2px; background:var(--tile-ink); opacity:.7; border-radius:2px;}
.pipcalc{display:flex; flex-direction:column; gap:10px;}
.pip-display{font-size:2rem; font-weight:800; text-align:center; background:var(--card2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px; font-variant-numeric:tabular-nums;}
.pip-keys{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.pip-key{background:var(--card2); border:1px solid var(--line); color:var(--text); border-radius:11px; padding:13px 0; font-size:1.05rem; font-weight:800; cursor:pointer; min-height:48px;}
.pip-key:active{transform:scale(.9); background:rgba(99,102,241,.3);}

/* ---------- modals / sheets / toasts ---------- */
.modal-backdrop{position:fixed; inset:0; z-index:100; background:rgba(5,7,10,.62); backdrop-filter:blur(4px); display:flex; align-items:flex-end; justify-content:center; padding:0;}
.modal{background:var(--card); border:1px solid var(--line); border-radius:22px 22px 0 0; width:100%; max-width:560px; max-height:92vh; overflow-y:auto; padding:20px 18px calc(20px + env(safe-area-inset-bottom)); animation:slideUp .25s ease; box-shadow:var(--shadow);}
@media (min-width:700px){ .modal-backdrop{align-items:center; padding:20px;} .modal{border-radius:22px; animation:pop .22s ease;} }
@keyframes slideUp{from{transform:translateY(40px); opacity:.4;} to{transform:none; opacity:1;}}
@keyframes pop{from{transform:scale(.96); opacity:.4;} to{transform:none; opacity:1;}}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.sheet-backdrop{position:fixed; inset:0; z-index:100; background:rgba(5,7,10,.6); display:flex; align-items:flex-end; justify-content:center;}
.sheet{background:var(--card); border:1px solid var(--line); border-radius:22px 22px 0 0; width:100%; max-height:88vh; overflow-y:auto; padding:18px 16px calc(20px + env(safe-area-inset-bottom)); animation:slideUp .25s ease;}
#toast-root{position:fixed; bottom:calc(var(--bottomnav-h) + 16px); left:0; right:0; z-index:200; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none;}
.toast{background:#1F2430; color:#fff; border:1px solid var(--line); border-radius:12px; padding:11px 18px; font-weight:600; box-shadow:var(--shadow); animation:slideUp .2s ease; max-width:90vw;}
[data-theme="light"] .toast{background:#14171D;}
.toast.err{background:#3A1114; border-color:rgba(239,68,68,.5);}
.toast.ok{background:#0B2B22; border-color:rgba(16,185,129,.5);}

/* ---------- victory / podium ---------- */
.podium{display:flex; align-items:flex-end; justify-content:center; gap:14px; margin:18px 0;}
.podium-spot{display:flex; flex-direction:column; align-items:center; gap:6px; animation:fadeSlide .45s ease both;}
.podium-spot.p2{animation-delay:.08s;} .podium-spot.p3{animation-delay:.16s;}
.podium-bar{width:84px; border-radius:12px 12px 0 0; display:flex; align-items:flex-start; justify-content:center; padding:8px 4px 0; font-weight:800; color:#0d0f12; font-variant-numeric:tabular-nums; text-align:center; word-break:break-word;}
.podium-spot.p1 .podium-bar{height:110px; background:linear-gradient(180deg,#FCD34D,#F59E0B); box-shadow:0 8px 22px rgba(245,158,11,.35);}
.podium-spot.p2 .podium-bar{height:82px; background:linear-gradient(180deg,#CBD5E1,#94A3B8);}
.podium-spot.p3 .podium-bar{height:60px; background:linear-gradient(180deg,#D6A05C,#B45309);}
.crown{font-size:1.8rem; margin-bottom:-8px;}
.confetti-canvas{position:absolute; inset:0; pointer-events:none; border-radius:20px;}
.victory-modal{position:relative; overflow:hidden; text-align:center;}

/* ---------- history / leaders ---------- */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.filters .input{width:auto; flex:1 1 140px;}
.hist-item{cursor:pointer;}
.hist-detail{margin-top:10px; border-top:1px dashed var(--line); padding-top:10px;}
table.table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums;}
table.table th,table.table td{padding:9px 10px; text-align:left; border-bottom:1px solid var(--line);}
table.table th{color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.4px;}
.h2h{overflow-x:auto;} .h2h table{min-width:420px;}
.h2h td,.h2h th{text-align:center;}
tr.p-elim-row{opacity:.55;}
tr.p-elim-row td{text-decoration:line-through; text-decoration-thickness:1px;}
tr.p-elim-row td:last-child{text-decoration:none;}

/* ---------- family ---------- */
.room-code{display:flex; align-items:center; gap:10px; background:var(--card2); border:2px dashed var(--indigo); border-radius:13px; padding:12px 16px; font-size:1.5rem; font-weight:800; letter-spacing:3px; flex-wrap:wrap;}
.member-card{display:flex; align-items:center; gap:12px; padding:10px 4px; border-bottom:1px solid var(--line);}
.member-card:last-child{border-bottom:none;}
.trophy-sec{margin-top:14px;}
.trophy{display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px dashed var(--line);}

/* ---------- toolkit ---------- */
.tool-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;}
.tool-card{cursor:pointer; text-align:center; transition:transform .15s, box-shadow .2s;}
.tool-card:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.tool-card .tool-ico{font-size:2.2rem; display:block; margin-bottom:6px;}
#wheel-canvas,#dice-canvas,#coin-canvas{width:100%; max-width:340px; display:block; margin:0 auto;}
.spin-result{font-size:1.4rem; font-weight:800; text-align:center; margin:12px 0;}
.timer-display{font-size:3rem; font-weight:800; text-align:center; font-variant-numeric:tabular-nums;}

/* ---------- emoji / color pickers & roster ---------- */
.picker-row{display:flex; gap:8px; flex-wrap:wrap;}
.picker-col{display:flex; flex-direction:column; gap:8px; margin:10px 0;}
.picker-col .btn{justify-content:flex-start; min-height:48px;}
.emoji-opt,.color-opt{width:42px; height:42px; border-radius:11px; border:2px solid transparent; cursor:pointer; font-size:1.3rem; display:inline-flex; align-items:center; justify-content:center; background:var(--card2);}
.emoji-opt.sel,.color-opt.sel{border-color:var(--indigo); box-shadow:var(--ring);}
.roster-row{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.roster-row .input{flex:1; min-width:0;}

.spin{animation:spin 1s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}}
.fade-in{animation:fadeIn .25s ease;} @keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
@keyframes fadeSlide{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.fade-slide{animation:fadeSlide .3s ease both;}

/* ---------- game themes ---------- */
.game-card{position:relative; overflow:hidden;}
.game-card .theme-strip{position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg,var(--theme-c,#6366F1),transparent 130%);}
.game-card.no-mercy{border:1px solid rgba(239,68,68,.55); box-shadow:0 0 22px rgba(239,68,68,.22), var(--shadow-sm);}
.no-mercy-badge{display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:1px; padding:3px 10px; border-radius:6px;
  background:linear-gradient(135deg,#991B1B,#DC2626); color:#fff; border:1px solid rgba(255,255,255,.25);}
.card-del{position:absolute; top:8px; right:8px; width:32px; height:32px; font-size:.85rem; opacity:.55; z-index:2;}
.card-del:hover{opacity:1;}
.sk-banner{
  display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:12px; flex-wrap:wrap;
  background:linear-gradient(120deg, color-mix(in srgb, var(--theme-c,#6366F1) 16%, transparent), transparent 65%), var(--card);
  border:1px solid var(--line); border-left:5px solid var(--theme-c,#6366F1); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.sk-banner-ico{font-size:2.5rem; line-height:1; filter:drop-shadow(0 3px 8px rgba(0,0,0,.4));}

/* ---------- score editing & elimination ---------- */
.score-edit{cursor:pointer; border-radius:8px;}
.score-edit:hover{background:rgba(99,102,241,.16); outline:1px dashed var(--indigo2);}
th.p-elim, td.p-elim{opacity:.45; filter:grayscale(.85);}

/* ---------- monopoly banker board ---------- */
.mono-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:12px; margin-top:14px;}
.mono-card{position:relative; overflow:hidden; border-top:4px solid var(--pc,#10B981);}
.mono-token{width:46px; height:46px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem; flex:none;
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.28), 0 3px 8px rgba(0,0,0,.3); border:2px solid rgba(255,255,255,.2);}
.mono-cash{position:relative; font-size:2rem; font-weight:800; font-variant-numeric:tabular-nums; margin:10px 0 2px; letter-spacing:-.01em; display:inline-block;}
.mono-cash-label{font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1.2px; margin-left:8px; vertical-align:middle;}
.mono-assets{font-size:.85rem; color:var(--muted); margin-bottom:4px;}
.mono-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px;}
.mono-actions .btn{min-height:48px; font-size:.88rem; padding:10px 8px;}
.mono-actions .mono-bust{grid-column:1 / -1; color:#FCA5A5;}
.mono-card.bankrupt{filter:grayscale(.75); opacity:.82; border-top-color:#52525B;}
.mono-stamp{position:absolute; top:14px; right:-30px; transform:rotate(24deg); background:var(--red); color:#fff; font-weight:800; font-size:.68rem; letter-spacing:2px; padding:3px 34px; box-shadow:0 3px 10px rgba(0,0,0,.4); z-index:2;}
.mono-winner{display:flex; align-items:center; gap:14px; margin-bottom:14px; border:1px solid rgba(245,158,11,.5); background:linear-gradient(120deg, rgba(245,158,11,.16), transparent 70%), var(--glass);}
.nw-list{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
.nw-row{display:flex; align-items:center; gap:10px;}
.nw-row.out{opacity:.5; filter:grayscale(.8);}
.nw-rank{width:30px; text-align:center; font-weight:800; font-size:.85rem; flex:none;}
.nw-track{height:9px; border-radius:99px; background:var(--card2); border:1px solid var(--line); overflow:hidden; margin-top:4px;}
.nw-fill{height:100%; border-radius:99px; transition:width .6s cubic-bezier(.22,1,.36,1); box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
.ledger{display:flex; flex-direction:column;}
.ledger-row{display:flex; align-items:center; gap:9px; padding:8px 2px; border-bottom:1px solid var(--line); font-size:.88rem;}
.ledger-row:last-child{border-bottom:none;}
.ledger-ico{font-size:1.05rem; flex:none;}
.amt-pos{color:var(--emerald2); font-weight:800; font-variant-numeric:tabular-nums;}
.amt-neg{color:#FCA5A5; font-weight:800; font-variant-numeric:tabular-nums;}

/* ---------- live sessions (share card + spectator view) ---------- */
.live-share{margin-top:14px;}
.live-code-big{font-size:2.1rem; font-weight:800; letter-spacing:.32em; font-variant-numeric:tabular-nums; margin:8px 0 4px;}
.live-leader{background:linear-gradient(120deg, rgba(245,158,11,.14), transparent 75%); border-radius:12px;}
.picker-col{display:flex; flex-direction:column; gap:8px; align-items:stretch;}
.picker-col .btn.on{border-color:var(--indigo); background:rgba(99,102,241,.16);}

/* ---------- danger confirmation ---------- */
.danger-modal{text-align:center; padding:6px 4px;}
.danger-ico{font-size:2.6rem;}

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}

/* ---------- small screens: no horizontal overflow, big tap targets ---------- */
@media (max-width:480px){
  .grid2{grid-template-columns:1fr 1fr;}
  .mono-grid{grid-template-columns:1fr;}
  .sk-actions .btn{flex:1 1 auto;}
  .room-code{font-size:1.25rem;}
  .podium-bar{width:70px;}
  .emoji-pick{grid-template-columns:repeat(6,1fr);}
  h1{font-size:1.35rem;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}