@font-face{font-family:Bangers;src:url(fonts/Bangers-Regular.ttf) format('truetype');font-display:swap}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#07080d;color:#e7ebf5;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overscroll-behavior:none;touch-action:none}
#game{position:fixed;inset:0}
#game canvas{display:block}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
#hud{position:fixed;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:linear-gradient(#07080df2,#07080d00);pointer-events:none;z-index:5}
#hud>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:6px;text-decoration:none;color:#5ef2c2;font:400 22px Bangers;letter-spacing:.05em;-webkit-text-stroke:1px #000}
.brand img{width:26px;height:26px}.brand em{font:600 10px Inter;color:#9aa3b8;-webkit-text-stroke:0;font-style:normal;border:1px solid #333a50;border-radius:6px;padding:1px 5px;text-transform:uppercase;letter-spacing:.08em}
#res{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.chip{display:inline-flex;align-items:center;gap:5px;background:#0d0f17;border:2px solid #000;border-radius:999px;padding:3px 10px 3px 6px;font:800 13px Inter;box-shadow:2px 2px 0 #000;white-space:nowrap}
.chip i{font-style:normal;width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:#07080d;border:2px solid #000}
#hud .hr{display:flex;align-items:center;gap:6px}
#streak{font:800 12px Inter;background:#0d0f17;border:2px solid #ff9a3c;border-radius:10px;padding:4px 7px;color:#ffb070}
#snd{font-size:16px;background:#0d0f17;border:2px solid #333a50;border-radius:10px;width:34px;height:30px;display:inline-flex;align-items:center;justify-content:center}
#kp{font:800 12px Inter;background:#0d0f17;border:2px solid #5ef2c2;border-radius:10px;padding:4px 8px;color:#5ef2c2;text-decoration:none}
#bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 10px);display:flex;gap:6px;background:#0d0f17ee;border:3px solid #000;border-radius:18px;padding:6px;box-shadow:4px 4px 0 #000;z-index:5}
#bar button{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:60px;padding:6px 8px;border-radius:12px;font:700 11px Inter;color:#c7cde0}
#bar button b{font-size:20px;line-height:1}
#bar button:active,#bar button.on{background:#1a1e2c;color:#5ef2c2}
#bar button[disabled]{opacity:.35}
#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 64px);transform:translateX(-50%);background:#fff;color:#07080d;border:3px solid #000;border-radius:999px;padding:8px 18px;font:700 14px Inter;box-shadow:3px 3px 0 #000;opacity:0;transition:opacity .2s;pointer-events:none;z-index:9;max-width:92vw;text-align:center}
#toast.on{opacity:1}
#placebar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 86px);display:flex;align-items:center;gap:8px;background:#0d0f17;border:3px solid #000;border-radius:14px;padding:8px 10px;box-shadow:4px 4px 0 #000;z-index:6;max-width:94vw}
#placebar[hidden]{display:none}
#placemsg{font:600 13px Inter;color:#c7cde0;flex:1;min-width:120px}
.btn{background:#1a1e2c;border:2px solid #000;border-radius:10px;padding:8px 12px;font:800 13px Inter;box-shadow:2px 2px 0 #000;white-space:nowrap}
.btn.ok{background:#5ef2c2;color:#07080d}.btn.gold{background:#ffd64a;color:#07080d}.btn.warn{background:#3a1420;color:#ff8aa0}
.btn[disabled]{opacity:.4;cursor:not-allowed}
#sheet{position:fixed;inset:0;background:#0009;z-index:8;display:flex;align-items:flex-end;justify-content:center}
#sheet[hidden]{display:none}
.sheet-in{position:relative;width:min(720px,100%);max-height:78vh;overflow:auto;background:#0d0f17;border:3px solid #000;border-bottom:0;border-radius:20px 20px 0 0;padding:18px 16px calc(env(safe-area-inset-bottom) + 18px);box-shadow:0 -6px 0 #000;touch-action:pan-y}
.x{position:absolute;right:10px;top:8px;font-size:28px;color:#9aa3b8;width:40px;height:40px}
h2{font:400 32px Bangers;letter-spacing:.04em;-webkit-text-stroke:1px #000;margin-bottom:6px}
h3{font:800 12px Inter;letter-spacing:.14em;text-transform:uppercase;margin:14px 0 8px}
p.s{color:#9aa3b8;font-size:13px;line-height:1.45}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.card{background:#12151f;border:2px solid #000;border-radius:12px;padding:8px;text-align:left;box-shadow:2px 2px 0 #000;display:flex;flex-direction:column;gap:4px}
.card img{width:100%;height:84px;object-fit:contain}
.card b{font-size:14px}.card small{color:#9aa3b8;font-size:11px;line-height:1.3}
.card.lock{opacity:.5}.card .why{color:#ff9a3c;font-size:11px;font-weight:700}
.cost{display:flex;flex-wrap:wrap;gap:4px;font:700 11px Inter}.cost span{background:#07080d;border-radius:6px;padding:1px 6px}
.cost span.no{color:#ff6b81}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.info{display:flex;gap:12px;align-items:center}.info img{width:110px;height:110px;object-fit:contain}
.bub{display:flex;gap:10px;align-items:center;background:#fff;color:#07080d;border:3px solid #000;border-radius:18px;padding:10px 14px;box-shadow:3px 3px 0 #000;font-weight:700}
.bub img{width:56px;height:56px;border-radius:50%;border:3px solid #000;flex:none}
.mk{display:grid;grid-template-columns:1fr auto auto auto auto;gap:6px;align-items:center;font-size:13px}
.note{margin-top:14px;font-size:11px;color:#7c849a;line-height:1.45;border-top:1px solid #222738;padding-top:10px}
.bar{height:8px;background:#07080d;border-radius:6px;overflow:hidden;border:1px solid #000}.bar>div{height:100%;background:linear-gradient(90deg,#4fc9ff,#e04fff,#ff9a3c)}
#intro .bub{margin:8px 0}
@media (max-width:520px){#hud{gap:6px}#res{order:3;flex-basis:100%;justify-content:center}.brand{flex:1}#bar button{min-width:52px;padding:6px 4px}.chip{font-size:12px;padding:2px 7px 2px 3px;gap:3px}#res{gap:4px}.chip img.ic{width:18px;height:18px}.brand em{display:none}}
img.ic{width:16px;height:16px;vertical-align:-3px;margin-right:3px;object-fit:contain}
.chip img.ic{width:20px;height:20px;margin:0;vertical-align:middle}
.cost img.ic{width:14px;height:14px;vertical-align:-2px}
.pr{white-space:nowrap}
#rushchip{position:fixed;right:10px;top:calc(env(safe-area-inset-top) + 92px);z-index:6;background:#ffd64a;color:#07080d;border:3px solid #000;border-radius:999px;padding:6px 12px;font:800 12px Inter;box-shadow:3px 3px 0 #000;animation:glowp 1.6s ease-in-out infinite}
#rushchip{white-space:nowrap}
#rushchip.live{background:#e04fff;color:#fff;font-size:14px;left:50%;right:auto;transform:translateX(-50%);animation:none}
#rushchip[hidden]{display:none}
@keyframes glowp{50%{box-shadow:3px 3px 0 #000,0 0 18px #ffd64a}}
#coach{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 150px);width:min(440px,94vw);z-index:9;display:grid;grid-template-columns:52px 1fr auto;gap:4px 10px;align-items:center;background:#fff;color:#07080d;border:3px solid #000;border-radius:18px;padding:10px 12px;box-shadow:4px 4px 0 #000;font:600 14px/1.35 Inter}
#coach.low{bottom:auto;top:calc(env(safe-area-inset-top) + 96px)}
#coach[hidden]{display:none}
#coach img{width:52px;height:52px;border-radius:50%;grid-row:span 2}
#coach .btn{padding:6px 10px;font-size:12px;background:#eef1f8}
#coach small{grid-column:2/4;color:#667;font-size:11px}
.pulse{position:relative;z-index:10;animation:pulse 1.1s ease-in-out infinite;outline:3px solid #ffd64a;outline-offset:2px;border-radius:12px}
@keyframes pulse{50%{box-shadow:0 0 0 8px #ffd64a55,0 0 24px #ffd64a}}
@media (max-width:520px){#rushchip{top:calc(env(safe-area-inset-top) + 134px)}#toast{top:calc(env(safe-area-inset-top) + 84px)}}