@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Space+Mono:wght@700&display=swap');
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;overflow:hidden;background:#100a2d;color:white;font-family:'Barlow Condensed',Impact,sans-serif}body{background:radial-gradient(circle at 50% 120%,#ff9f3977,transparent 40%),#100a2d}.shell{height:100dvh;padding:14px;display:grid;grid-template-rows:auto 1fr;gap:10px}header{display:flex;align-items:center;justify-content:space-between;padding:4px 14px;border-left:5px solid #50eaff}header small{font:700 9px 'Space Mono';letter-spacing:.2em;color:#b8aaf0}h1{font:900 clamp(30px,5vw,60px)/.85 'Barlow Condensed';margin:5px 0}h1 em{font-style:normal;color:#58f5ff;text-shadow:0 0 22px #5df5ff}button{font:900 16px 'Barlow Condensed';letter-spacing:.1em;color:white;border:1px solid #69dfff;background:#140e36cc;padding:12px 18px;cursor:pointer}button:hover,button:focus-visible{outline:2px solid #fff;background:#492b90}.arena{position:relative;min-height:0;border:2px solid #7559da;overflow:hidden;background:#25145e;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);box-shadow:0 0 45px #7b52ff55}canvas{display:block;width:100%;height:100%;touch-action:none}.hud{position:absolute;inset:15px 18px auto;display:flex;justify-content:space-between;pointer-events:none;text-shadow:0 2px 10px #000}.hud>div{background:#0c0926c9;border:1px solid #8f72e2;padding:8px 13px;min-width:130px}.hud small{display:block;font:700 8px 'Space Mono';letter-spacing:.16em;color:#9ff8ff}.hud b{font-size:34px;color:#ffe16a}.hud span{color:#b9aede}.life{text-align:right}.life div{color:#5df4ff;font-size:24px;letter-spacing:.15em}.banner{position:absolute;inset:50% auto auto 50%;translate:-50% -50%;width:min(580px,90%);padding:30px;text-align:center;background:linear-gradient(145deg,#110b32ed,#431c78e8);border:2px solid #84efff;box-shadow:0 20px 70px #000b,0 0 30px #62ecff55;clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);z-index:4}.banner.hidden{display:none}.banner small{font:700 9px 'Space Mono';letter-spacing:.22em;color:#7af1ff}.banner h2{font-size:clamp(35px,6vw,65px);line-height:.88;margin:12px 0;color:#fff4d2}.banner p{font-size:19px;color:#c9c1e8}.banner button{display:block;margin:20px auto 12px;background:linear-gradient(135deg,#ffbd3f,#ff5e54);color:#2d1028;border-color:#fff;font-size:22px}.banner span{font:700 8px 'Space Mono';color:#968dbb}.message{position:absolute;left:50%;top:17%;translate:-50% -120px;transition:.3s;background:#07051de8;border:1px solid #65efff;padding:10px 22px;font:900 22px 'Barlow Condensed';letter-spacing:.08em}.message.show{translate:-50% 0}.mobile{position:absolute;inset:auto 14px 14px;display:none;justify-content:space-between;pointer-events:none}.mobile button{pointer-events:auto;min-width:70px;min-height:54px}.mobile #fire{margin-left:auto;background:#7c245f}.mobile button+button{margin-left:6px}@media(max-width:760px),(pointer:coarse){.shell{padding:6px}.mobile{display:flex}header button{padding:8px 10px}header small{font-size:6px}.hud{inset:8px 8px auto}.hud>div{min-width:105px;padding:6px}.hud b{font-size:27px}.banner{padding:22px}.banner p{font-size:16px}}
.message{z-index:5;width:max-content;max-width:82%;text-align:center;font-size:clamp(16px,2.3vw,22px)}.mobile{z-index:5}
.hero-sprite{position:absolute;z-index:2;left:0;top:0;width:185px;height:135px;object-fit:contain;pointer-events:none;transform-origin:center;filter:drop-shadow(0 10px 15px #16052b88);will-change:transform}