:root{
  --teal-d:#0A3D52; --teal:#00979D; --orange:#E86A1C; --teal-l:#D5ECED;
  --grey:#404A4F; --red:#C0392B; --white:#FFFFFF;
  --radius:12px; --gap:16px;
}
*{box-sizing:border-box}
html,body{margin:0;font-family:system-ui,Arial,sans-serif;color:var(--grey);background:var(--teal-l)}
#app{max-width:820px;margin:0 auto;padding:20px;min-height:100vh}
h1,h2{color:var(--teal-d)}
button{font:inherit;cursor:pointer;border:none;border-radius:var(--radius);padding:12px 16px}
.btn-primary{background:var(--orange);color:#fff;font-weight:700}
.btn-ghost{background:#fff;color:var(--teal-d);border:2px solid var(--teal)}
.card{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:0 2px 8px rgba(10,61,82,.08)}
.center{display:flex;flex-direction:column;align-items:center;gap:var(--gap);text-align:center}

.name{font-size:18px;padding:12px;border:2px solid var(--teal);border-radius:10px;width:min(320px,90%)}
.muted{color:#7a8890}.link{color:var(--orange);cursor:pointer;text-decoration:underline}
.hud{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-weight:700;color:var(--teal-d)}
.chip{background:var(--teal-l);color:var(--teal-d);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700}
.flip{cursor:pointer;min-height:180px;justify-content:center}
.dots{display:flex;gap:8px;justify-content:center;margin:14px 0}
.dot{width:10px;height:10px;border-radius:50%;background:#c7d3d6}.dot.on{background:var(--orange)}

.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.choice{background:#fff;border:2px solid var(--teal);color:var(--teal-d);text-align:left;user-select:none;-webkit-user-select:none}
.choice.good{background:#e7f6ec;border-color:#2e7d32}.choice.bad{background:#fbe9e7;border-color:var(--red)}
.feedback{margin-top:14px;padding:14px;border-radius:12px;display:flex;flex-direction:column;gap:8px}
.feedback.ok{background:#e7f6ec}.feedback.no{background:#fbe9e7}
@media(max-width:520px){.choices{grid-template-columns:1fr}}

.tier{font-size:20px;font-weight:800;padding:6px 16px;border-radius:999px;background:var(--teal-l);color:var(--teal-d)}
.tier.gold{background:#fff4cf;color:#8a6d00}.tier.silver{background:#eceff1;color:#5b6b73}.tier.bronze{background:#f4e0d0;color:#8a4b1e}
.bars{width:100%;max-width:520px;margin:10px 0;display:flex;flex-direction:column;gap:6px}
.trow{display:grid;grid-template-columns:130px 1fr 44px;align-items:center;gap:8px;font-size:14px}
.track{background:#e3e9ea;border-radius:999px;height:12px;overflow:hidden}
.fill{display:block;height:100%;background:var(--teal)}
details{width:100%;max-width:520px;text-align:left}

.matrix{border-collapse:collapse;margin:12px 0;width:100%}
.matrix th,.matrix td{border:1px solid #cfd8dc;padding:6px 10px;text-align:center;font-size:14px}
.matrix td.na{color:var(--red);font-weight:700}

.method-fig{max-width:360px;margin:8px auto}
.spectrum{margin:8px 0}
.choices.two{grid-template-columns:1fr 1fr}
.cand{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:20px;letter-spacing:2px;text-align:center;font-weight:700}
.strikes{display:inline-flex;gap:5px;vertical-align:middle;margin-left:4px}
.sdot{width:11px;height:11px;border-radius:50%;background:#cdd7da;display:inline-block}
.sdot.miss{background:var(--red)}
.live-banner{margin:14px 0 6px;padding:8px 14px;border-radius:999px;background:var(--teal-l);color:var(--teal-d);font-size:14px;display:inline-block}
.live-banner b{color:var(--orange)}
.board-h{margin:14px 0 8px;font-size:18px}
.board{border-collapse:collapse;width:100%;max-width:520px}
.board th,.board td{border-bottom:1px solid #dce4e6;padding:6px 10px;text-align:left;font-size:14px}
.board th{color:var(--teal-d)}
.board td:nth-child(2),.board td:nth-child(4){font-variant-numeric:tabular-nums;color:var(--teal-d);font-weight:700}
.board td.rk{font-size:19px;text-align:center;padding:4px 6px;width:34px}
.board tr.you{background:var(--teal-l)}
.board tr.you td{font-weight:700}
.pager{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:12px;color:var(--teal-d);font-size:14px;font-weight:700}
.mbr{display:flex;gap:16px;margin:14px 0;align-items:flex-start}
.lane{flex:1;display:flex;flex-direction:column;gap:10px;align-items:center}
.lane-h{font-weight:700;color:var(--teal-d);font-size:13px}
.mbr-slot,.mbr-dot{width:118px;padding:8px 12px;border-radius:10px;border:2px dashed var(--teal);background:#fff}
.mbr-slot b,.mbr-dot b{display:block;text-align:center;margin-bottom:4px;color:var(--teal-d)}
.mbr-dot{cursor:grab;background:var(--teal-l);border-style:solid}
.kv{display:flex;justify-content:space-between;font-size:13px;line-height:1.5}
.kv em{font-style:normal;font-weight:700;color:var(--teal-d);font-variant-numeric:tabular-nums}
.mbr-slot.filled{background:#e7f6ec;border-style:solid}
.mbr-dot.used{opacity:.4;cursor:default}
.feature-map{max-width:560px;margin:8px auto}
.ladder{max-width:520px;margin:4px auto 2px}
.spectrum{max-width:600px;margin:8px auto}
.small{padding:6px 12px;font-size:13px}
.board-wrap{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:10px}
#foot{max-width:820px;margin:8px auto 24px;padding:0 20px;text-align:center;font-size:12px;color:#8a98a0;line-height:1.5}
#foot b{color:#5b6b73}
.ladder-h{font-size:13px;color:#5b6b73;margin:8px 0 2px;text-align:center}