*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{height:100%;overflow:hidden;background:#07080b;color:#e8eaed;font-family:system-ui,"Segoe UI",sans-serif;touch-action:none}
body{display:flex;align-items:center;justify-content:center}
.wrap{position:relative;height:min(100dvh,calc(100vw*600/360));aspect-ratio:360/600;max-width:100vw;border:2px solid #e74c3c;border-radius:10px;overflow:hidden;box-shadow:0 0 40px #e74c3c55;background:#000}
canvas{width:100%;height:100%;display:block}
.hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;gap:6px;padding:8px 10px;font-size:clamp(10px,3.2vw,14px);text-shadow:0 1px 3px #000;pointer-events:none}
.hud b{color:#ffd166}#fx{color:#7be39b}
.scr{position:absolute;inset:0;background:#07080bf2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;overflow:auto}
.scr h1,.scr h2{letter-spacing:3px;color:#fff;font-size:clamp(18px,6vw,26px)}.scr p{font-size:clamp(12px,3.6vw,15px);line-height:1.6;max-width:320px}
.sm{opacity:.8;font-size:12px!important}small{opacity:.85}
.lg{width:110px;filter:invert(1) drop-shadow(0 0 14px #e74c3c)}
.hid{display:none!important}
button{font:inherit;font-weight:700;background:#e74c3c;color:#fff;border:0;border-radius:10px;padding:12px 24px;min-width:200px;cursor:pointer;font-size:16px}
button.gh{background:transparent;border:2px solid #e74c3c;color:#e74c3c}button:active{transform:scale(.97)}
input{font:inherit;text-align:center;padding:10px;border-radius:10px;border:2px solid #e74c3c;background:#0c0e12;color:#fff;width:230px;user-select:text;-webkit-user-select:text}
.opts{display:grid;gap:10px;width:100%;max-width:300px}.opts button{min-width:0;padding:12px 8px;font-size:14px}