:root{--bg:#080e1c;--bg2:#0a1325;--card:#101b2e;--cy:#7ee7ff;--gold:#ffd166;--red:#ff4d6d;--grn:#2ec4b6;--tx:#e8f1ff;--mut:#8aa0bd}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(ellipse at top,#0e1d3a,var(--bg) 60%) fixed;color:var(--tx);font:16px/1.45 system-ui,-apple-system,"Segoe UI","Noto Sans Thai",Tahoma,sans-serif;min-height:100vh}
h1,h2,h3{margin:.3em 0}h1{font-size:1.2rem;letter-spacing:.08em;color:var(--cy)}h2{font-size:1.05rem;color:var(--cy)}
.wrap{max-width:500px;margin:0 auto;padding:12px 12px 90px}
.card{background:rgba(16,27,46,.78);backdrop-filter:blur(6px);border:1px solid rgba(126,231,255,.22);border-radius:14px;padding:12px;margin:10px 0}
.hud{position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(8,14,28,.95);border-bottom:1px solid rgba(126,231,255,.3);display:flex;justify-content:space-between;padding:8px 14px;font-weight:700}
.hud .t{color:var(--gold);font-variant-numeric:tabular-nums}.hud.low .t{color:var(--red);animation:bl .6s infinite alternate}
@keyframes bl{to{opacity:.35}}
.hdr{padding-top:46px}
button,.btn{font:inherit;font-weight:700;color:#04121f;background:var(--cy);border:0;border-radius:10px;padding:12px 16px;min-height:46px;cursor:pointer;box-shadow:0 0 14px rgba(126,231,255,.35)}
button.sec{background:transparent;color:var(--cy);border:1px solid var(--cy);box-shadow:none}button.red{background:var(--red);color:#fff;box-shadow:0 0 18px rgba(255,77,109,.6)}button.gold{background:var(--gold)}
button:disabled{opacity:.4;box-shadow:none}
input,select{font:inherit;width:100%;padding:12px;margin:4px 0;border-radius:10px;border:1px solid rgba(126,231,255,.35);background:#0a1325;color:var(--tx)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.row>*{flex:1}
.grid{display:grid;gap:6px}.g5{grid-template-columns:repeat(5,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.chip{padding:10px 0;text-align:center;border-radius:8px;background:#16264a;border:1px solid #2a4170;font-weight:700;cursor:pointer;user-select:none}
.chip.on{background:var(--cy);color:#04121f}.chip.done{opacity:.3}.chip.bad{background:var(--red)}
.mut{color:var(--mut);font-size:.9rem}.ok{color:var(--grn)}.bad{color:var(--red)}.gold{color:var(--gold)}
.bar{height:16px;border-radius:9px;background:#16264a;overflow:hidden}.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--grn),var(--cy));transition:width .5s}
.shield.low .bar>i{background:linear-gradient(90deg,var(--red),#ff9f6d)}
.code{font-size:2.4rem;letter-spacing:.3em;text-align:center;color:var(--gold);font-weight:800;text-shadow:0 0 16px rgba(255,209,102,.6)}
.bugscreen{background:rgba(120,10,30,.5);border-color:var(--red);animation:pulse 1s infinite alternate}@keyframes pulse{to{box-shadow:0 0 28px var(--red)}}
.fire{width:100%;font-size:1.6rem;padding:26px;animation:pulse 0.8s infinite alternate}
.toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);background:var(--card);border:1px solid var(--cy);padding:10px 16px;border-radius:10px;z-index:50;max-width:90%}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);z-index:40;padding:20px;text-align:center}.modal>div{background:var(--card);border:2px solid var(--red);border-radius:16px;padding:24px;max-width:420px}
table{width:100%;border-collapse:collapse}td,th{padding:4px 6px;text-align:left;font-size:.9rem;border-bottom:1px solid #1d2e50}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}