@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');
:root{--bg:#09090d;--panel:#111117;--line:#272730;--red:#ff304b;--gold:#ffd166;--muted:#92929f;--white:#f7f7fb}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(ellipse at 50% -10%,#261018 0,#0c0c12 42%,#07070a 100%);color:var(--white);font-family:Inter,Arial,sans-serif}
body{min-height:100svh;display:flex;justify-content:center;padding:20px 14px 28px}
button{font:inherit}
.shell{width:min(100%,650px)}
.topbar{display:flex;align-items:center;justify-content:space-between;margin:0 2px 16px}
.brand{display:flex;align-items:center;gap:10px;color:white;text-decoration:none;font-weight:900;letter-spacing:2px;font-size:19px}
.brand-mark,.mini-mark{display:grid;place-items:center;width:35px;height:35px;border:1px solid #7d2635;border-radius:9px;color:#fff;background:linear-gradient(145deg,#351019,#111);font-family:'Barlow Condensed',sans-serif;font-size:21px;font-style:italic;box-shadow:0 0 22px #ff304b22}
.red{color:var(--red)}
.top-actions{display:flex;gap:8px}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#14141b;color:#eee;cursor:pointer;font-size:18px}
.game-card{background:linear-gradient(180deg,#14141b,#0e0e14);border:1px solid #292932;border-radius:22px;padding:24px;box-shadow:0 22px 70px #0008}
.intro{text-align:center;padding:5px 0 17px}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:3px;color:var(--red);margin:0 0 8px}
h1,h2{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;letter-spacing:1px;margin:0}
h1{font-size:clamp(38px,8vw,60px);line-height:.95}
h1 span{color:var(--red);text-shadow:0 0 22px #ff304b44}
.sub{color:var(--muted);font-size:13px;margin:10px 0 0}
.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:0 0 12px}
.hud>div{background:#0a0a0f;border:1px solid #24242c;border-radius:12px;padding:10px 12px;text-align:center}
.hud small{display:block;color:#858591;font-size:9px;font-weight:800;letter-spacing:2px}
.hud strong{display:block;font-family:'Barlow Condensed',sans-serif;font-size:28px;line-height:1.15}
.stage-wrap{position:relative;width:100%;overflow:hidden;border:1px solid #30303a;border-radius:15px;background:#08080d;aspect-ratio:4/5;max-height: min(70svh,680px);margin:auto}
canvas{display:block;width:100%;height:100%;touch-action:none}
.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:18px;background:linear-gradient(#08080dc9,#08080de8);backdrop-filter:blur(5px);transition:opacity .2s}
.overlay.hidden{opacity:0;pointer-events:none}
.overlay-panel{text-align:center;max-width:340px}
.mini-mark{margin:0 auto 18px;width:52px;height:52px;font-size:29px;border-radius:14px}
.overlay h2{font-size:clamp(42px,10vw,62px);margin-bottom:8px}
.overlay-panel>p:not(.eyebrow){color:#b1b1bc;font-size:13px;line-height:1.65;margin:0 auto 20px}
.primary-btn{border:0;border-radius:12px;padding:14px 25px;background:linear-gradient(135deg,#ff4058,#d91535);color:white;font-weight:900;letter-spacing:1px;cursor:pointer;box-shadow:0 8px 28px #ff304b3c}
.primary-btn span{margin-left:14px;font-size:18px}
.hint{font-size:10px!important;color:#777783!important;margin:16px 0 0!important}
.controls{display:flex;align-items:center;justify-content:center;gap:22px;padding:15px 0 7px}
.move-btn{width:58px;height:43px;border-radius:12px;border:1px solid #34343e;background:#191920;color:white;font-size:24px;cursor:pointer;touch-action:none}
.move-btn:active{background:#3a1720;border-color:var(--red)}
.control-note{font-size:9px;font-weight:800;letter-spacing:2px;color:#777783}
footer{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #282831;padding-top:15px;margin-top:8px;font-size:9px;letter-spacing:1.2px;color:#777783}
footer b{color:#c7c7d0}
.legal{text-align:center;color:#555560;font-size:10px;margin:13px 0 0}
@media(max-width:480px){body{padding:10px 8px 18px}.game-card{padding:15px;border-radius:17px}.topbar{margin-bottom:10px}.stage-wrap{max-height:65svh}footer{font-size:8px}.hud strong{font-size:24px}}

.install-btn{margin-top:12px;border:1px solid #ff304b;border-radius:12px;padding:12px 22px;background:#08080d;color:#ff304b;font-weight:900;letter-spacing:1px;cursor:pointer;box-shadow:0 0 18px #ff304b33;transition:all .2s}
.install-btn:hover{background:#ff304b;color:#08080d;box-shadow:0 0 28px #ff304b66}
.install-btn[hidden]{display:none}
.install-guide{margin-top:10px;font-size:11px;color:#b1b1bc;line-height:1.5}
.install-guide[hidden]{display:none}