:root{
  --bg:#14213d; --bg2:#1d2d50; --card:#22345c; --line:#2f4573;
  --txt:#f4f1ea; --mut:#9fb0d0; --acc:#fca311; --ok:#3ddc97; --bad:#ff6b6b;
  --r:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Rounded","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
body{background:radial-gradient(120% 60% at 50% 0%,#28406e 0%,var(--bg) 60%) fixed}
#app{max-width:520px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 110px)}
h1{font-size:30px;margin:6px 0 2px;letter-spacing:-.5px}
h1 .logo{display:inline-block;transform:rotate(-8deg);margin-right:6px}
h2{font-size:15px;text-transform:uppercase;letter-spacing:1.5px;color:var(--mut);margin:26px 4px 10px;font-weight:600}
.sub{color:var(--mut);margin:0 0 8px;font-size:15px}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card{background:var(--card);border-radius:var(--r);padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.btn{display:block;width:100%;padding:17px;border-radius:16px;background:var(--acc);color:#14213d;
  font-weight:700;font-size:18px;box-shadow:0 6px 18px rgba(252,163,17,.35);transition:transform .08s,opacity .2s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.35;box-shadow:none}
.btn.ghost{background:var(--bg2);color:var(--txt);box-shadow:none;font-weight:600}
.btn.small{padding:10px 14px;width:auto;font-size:15px;border-radius:12px}
.icon-btn{width:42px;height:42px;border-radius:12px;background:var(--bg2);font-size:20px;display:grid;place-items:center}
.dock{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(env(safe-area-inset-bottom) + 12px);
  background:linear-gradient(to top,var(--bg) 60%,rgba(20,33,61,0))}
.dock .in{max-width:520px;margin:0 auto;display:flex;gap:10px}
.dot{width:14px;height:14px;border-radius:50%;flex:none}

/* setup */
.prow{display:flex;align-items:center;gap:10px;padding:8px 10px}
.prow+.prow{border-top:1px solid var(--line)}
.prow input{flex:1;min-width:0;background:transparent;border:0;color:var(--txt);font:inherit;font-size:18px;padding:8px 0;outline:none}
.prow input::placeholder{color:#6f81a8}
.del{color:var(--mut);font-size:22px;width:34px;height:34px}
.add{display:block;width:100%;padding:14px;color:var(--acc);font-weight:600;text-align:left;padding-left:34px}
.hint{color:var(--mut);font-size:13px;margin:10px 6px 0;line-height:1.4}

/* scoreboard */
.board .row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:13px 12px 11px}
.board .row+.row{border-top:1px solid var(--line)}
.rank{width:26px;text-align:center;font-size:19px;color:var(--mut);font-weight:700}
.name{flex:1;font-size:19px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.total{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;min-width:60px;text-align:right}
.last{font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.row.lead{background:linear-gradient(90deg,rgba(61,220,151,.18),transparent);border-radius:14px}
.row.lead .total{color:var(--ok)}
.row.worst .total{color:var(--bad)}
.badge{display:inline-block;background:var(--bg2);border-radius:999px;padding:4px 10px;font-size:13px;color:var(--mut)}

/* round entry sheet */
.sheet-bg{position:fixed;inset:0;background:rgba(5,10,25,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:10;animation:fade .2s}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:11;background:var(--bg2);border-radius:26px 26px 0 0;
  padding:10px 16px calc(env(safe-area-inset-bottom) + 16px);max-height:92vh;overflow:auto;animation:up .25s cubic-bezier(.2,.9,.3,1)}
.sheet .in{max-width:520px;margin:0 auto}
.grab{width:42px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 12px}
@keyframes up{from{transform:translateY(100%)}}
@keyframes fade{from{opacity:0}}
.entry{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:14px;margin-bottom:6px;background:var(--card)}
.entry .name{font-size:18px}
.entry input{width:96px;text-align:right;font:inherit;font-size:26px;font-weight:800;color:var(--txt);
  background:var(--bg);border:2px solid transparent;border-radius:12px;padding:8px 12px;outline:none;font-variant-numeric:tabular-nums}
.entry input:focus{border-color:var(--acc)}
.entry.auto input{color:var(--acc);border-color:rgba(252,163,17,.35);border-style:dashed}
.entry.auto input::placeholder{color:var(--acc);opacity:1}
.entry .tag{font-size:12px;color:var(--acc);font-weight:700;letter-spacing:.5px}
.sumbar{display:flex;justify-content:space-between;align-items:center;margin:12px 4px;font-size:15px;color:var(--mut)}
.sumbar b{font-size:20px;color:var(--txt);font-variant-numeric:tabular-nums}
.sumbar.ok b{color:var(--ok)} .sumbar.err b{color:var(--bad)}
.dice{display:flex;align-items:center;justify-content:space-between;background:var(--card);border-radius:14px;padding:10px 12px;margin-bottom:12px}
.dice .suit{font-size:30px;line-height:1}
.dice span{color:var(--mut);font-size:14px}

/* history */
.hist{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hist table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:15px}
.hist th,.hist td{padding:9px 8px;text-align:right;white-space:nowrap}
.hist th{color:var(--mut);font-weight:600;font-size:13px}
.hist th:first-child,.hist td:first-child{text-align:left;color:var(--mut)}
.hist tr+tr td{border-top:1px solid var(--line)}
.hist td.zero{color:var(--ok)}
.hist td.big{color:var(--bad);font-weight:700}
.hist tr.tot td{font-weight:800;color:var(--txt);border-top:2px solid var(--line)}

/* podium */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:26px 0 10px;height:220px}
.pod{flex:1;max-width:120px;text-align:center}
.pod .bar{border-radius:14px 14px 4px 4px;display:flex;align-items:flex-start;justify-content:center;padding-top:10px;font-size:32px}
.pod .n{font-weight:700;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .s{color:var(--mut);font-size:14px;margin-top:6px}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 100px);transform:translateX(-50%);
  background:#0b1428;color:var(--txt);padding:12px 18px;border-radius:14px;z-index:20;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.4);display:flex;gap:14px;align-items:center;white-space:nowrap}
.toast button{color:var(--acc);font-weight:700}
.empty{text-align:center;color:var(--mut);padding:26px 10px;font-size:15px}
.menu{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.toast[hidden]{display:none}

.prog{flex-basis:100%;height:5px;border-radius:3px;background:var(--bg);overflow:hidden;margin:0 0 0 38px}
.prog i{display:block;height:100%;border-radius:3px;transition:width .4s}
.loser{text-align:center;color:var(--bad);font-weight:700;font-size:17px;margin:4px 0 0}