:root{--bg:#14161f;--card:#1e2130;--card2:#272b3f;--text:#f2f3f8;--mute:#9aa0b8;--accent:#ffb627;--good:#3ddc97;--bad:#ff5d73;--r:14px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,button,input,summary{touch-action:manipulation}
#haptic{position:fixed;left:-100px;opacity:0;pointer-events:none}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 system-ui,-apple-system,sans-serif;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
#app{max-width:720px;margin:0 auto;padding:16px}
h1,h2,h3{margin:0}
.logo{font-size:2.4rem;font-weight:900;color:var(--accent);letter-spacing:-1px}
.card{background:var(--card);border-radius:var(--r);padding:16px;margin-bottom:12px}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:8px;align-items:center}
.grow{flex:1}
.between{justify-content:space-between}
input{width:100%;background:var(--card2);border:2px solid transparent;color:var(--text);border-radius:10px;padding:12px;font-size:1rem}
input:focus{outline:none;border-color:var(--accent)}
button{background:var(--card2);color:var(--text);border:0;border-radius:10px;padding:10px 14px;font-size:.95rem;font-weight:600;cursor:pointer}
button:active{transform:scale(.97)}
button.primary{background:var(--accent);color:#1a1300}
button.danger{color:var(--bad)}
button.ghost{background:transparent;color:var(--mute)}
button:disabled{opacity:.4}
.mute{color:var(--mute);font-size:.85rem}
.code{font-family:ui-monospace,monospace;font-size:1.5rem;letter-spacing:4px;color:var(--accent);font-weight:800}
.player{border:2px solid transparent}
.player.me{border-color:#3a4170}
.player.locked{opacity:.9;border-color:var(--good)}
.player.leader .total{color:var(--accent)}
.total{font-size:2.2rem;font-weight:900;min-width:70px;text-align:right}
.score-in{font-size:1.6rem;text-align:center;font-weight:800;width:90px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{padding:8px 10px;min-width:44px}
.chips button{flex:1 0 calc(14.28% - 6px);min-width:0}
.chips .bonus{background:#3b2f10;color:var(--accent)}
.chips .bust{background:#3d1b24;color:var(--bad)}
.tag{font-size:.7rem;padding:2px 8px;border-radius:99px;background:var(--card2);color:var(--mute);margin-left:6px;vertical-align:middle}
.tag.lock{background:#12382a;color:var(--good)}
.hist{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hist label{font-size:.7rem;color:var(--mute);display:block;text-align:center}
.hist input{width:58px;padding:6px;text-align:center}
.banner{background:linear-gradient(90deg,#ffb627,#ff7a3d);color:#1a1300;text-align:center;font-weight:800;padding:14px;border-radius:var(--r);margin-bottom:12px;font-size:1.1rem}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#fff;color:#000;padding:10px 18px;border-radius:99px;opacity:0;transition:.25s;pointer-events:none;font-weight:600}
#toast.show{opacity:1}

.expand{padding:6px 10px;font-size:1.1rem;margin-left:4px}
.tag.bust{background:#3d1b24;color:var(--bad)}
.hist input.busted{color:var(--bad);border-color:#5a2533}
.player.focus .total{font-size:3.4rem}
.player.focus .score-in{font-size:2.2rem;width:120px}
.player.focus .chips button{padding:14px 0;min-width:0;flex:1 0 calc(16.66% - 6px);font-size:1.05rem}
#app.focused{padding-bottom:120px}
.rail{position:fixed;left:0;right:0;bottom:0;display:flex;gap:8px;overflow-x:auto;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(20,22,31,.94);backdrop-filter:blur(10px);border-top:1px solid var(--card2);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:104px;padding:8px 12px;background:var(--card)}
.rail-item.locked{box-shadow:inset 0 0 0 2px #1f5a42}
.rail-name{font-size:.8rem;color:var(--mute);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-total{font-size:1.4rem;font-weight:900}
.rail-now{font-size:.75rem;color:var(--mute)}
.rail-bust{color:var(--bad);font-weight:800}

.rail.two{display:grid;grid-auto-flow:column;grid-template-rows:auto auto;grid-auto-columns:minmax(92px,max-content)}
.rail.two .rail-item{min-width:0;padding:6px 10px}
.rail.two .rail-total{font-size:1.15rem}
#app.focused:has(.rail.two){padding-bottom:170px}
@media (max-width:420px){
  #app{padding:12px}
  .card{padding:12px}
  .player .row{flex-wrap:wrap}
  .total{font-size:1.9rem}
  .player.focus .total{font-size:2.8rem}
  .chips button{flex:1 0 calc(16.66% - 6px);min-width:0;padding:10px 0}
}
.rail-item{max-width:140px;overflow:hidden}
.rail-name{max-width:100%}

select{background:var(--card2);color:var(--text);border:0;border-radius:10px;padding:10px 12px;font-size:1rem;flex:1}
.chips .minus{background:#3d1b24;color:var(--bad)}
.chips .on{background:var(--accent);color:#1a1300}
.hand{margin-top:6px}
.hand b{color:var(--text)}

.signin{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.stat{background:var(--card2);border-radius:10px;padding:10px;text-align:center}
.stat-v{font-size:1.5rem;font-weight:900;color:var(--accent)}
.log{padding:12px}
.banner button{background:#1a1300;color:var(--accent)}

.chart{position:relative;height:240px;margin-top:8px}
.chart.sm{height:200px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid2 .card{margin:0}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.seg{display:flex;gap:4px;background:var(--card2);padding:4px;border-radius:12px}
.seg.wrap{flex-wrap:wrap}
.seg button{flex:1;white-space:nowrap;background:transparent;padding:8px 10px;color:var(--mute)}
.seg button.on{background:var(--accent);color:#1a1300}
.fcode{font-family:ui-monospace,monospace;color:var(--accent);letter-spacing:2px;font-weight:700}
.frow{display:flex;justify-content:space-between;align-items:center;width:100%;background:transparent;padding:12px 4px;border-bottom:1px solid var(--card2);border-radius:0;text-align:left}
.frow.me{background:#2a2410}
.rank{display:inline-block;width:28px;color:var(--accent)}
.log{cursor:pointer}
.log.picked{box-shadow:inset 0 0 0 2px var(--accent)}
.log a{color:var(--text);text-decoration:underline;cursor:pointer}