@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:#061219;color:#f6fbff;font-family:'Barlow Condensed',Impact,sans-serif}body{background:radial-gradient(circle at 18% 50%,#006bad33,transparent 36%),radial-gradient(circle at 82% 50%,#c81f2933,transparent 36%),#061219}.shell{height:100dvh;padding:10px;display:grid;grid-template-rows:auto 1fr;gap:8px}header{display:flex;align-items:center;justify-content:space-between;padding:3px 15px;border-left:5px solid #f7c74b}header small{font:700 8px 'Space Mono';letter-spacing:.22em;color:#89aebb}h1{margin:3px 0;font:900 clamp(30px,5vw,60px)/.85 'Barlow Condensed';letter-spacing:.02em}h1 em{font-style:normal;color:#43dfff;text-shadow:0 0 25px #00b7ff}button{padding:11px 17px;border:1px solid #57dfff;background:#071f2cdd;color:white;font:900 15px 'Barlow Condensed';letter-spacing:.11em;cursor:pointer}button:hover,button:focus-visible{outline:2px solid white;background:#0b5068}.battlefield{position:relative;min-height:0;overflow:hidden;border:4px solid #d3aa52;border-radius:24px;background:#112b35;box-shadow:0 0 0 5px #142c38,0 18px 70px #000a}.battlefield:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(90deg,#008cff12,transparent 38% 62%,#ff273412),linear-gradient(120deg,#fff2,transparent 12%);box-shadow:inset 0 0 45px #00131b}canvas{display:block;width:100%;height:100%;touch-action:none}.score{position:absolute;z-index:4;left:50%;top:13px;translate:-50% 0;display:flex;align-items:center;gap:12px;padding:6px 13px;background:#04141de8;border:1px solid #d8c17a;clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px)}.score div{min-width:76px;text-align:center}.score small{display:block;font:700 7px 'Space Mono';letter-spacing:.12em;color:#adc3c9}.score b{font-size:29px}.score div:first-child b{color:#54e6ff}.score div:last-child b{color:#ff5964}.score span{color:#efd36d;font-weight:900}.legend{position:absolute;z-index:4;left:14px;bottom:12px;padding:8px 11px;background:#04141de8;border:1px solid #8da4a9;font:700 8px 'Space Mono';letter-spacing:.06em}.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 3px 0 8px}.legend i:first-child{margin-left:0}.legend .blue{background:#22cfff}.legend .red{background:#ff3546}.legend .gray{background:#d4d6c9}.legend strong{color:#ffe172;margin-left:10px}.notice{position:absolute;z-index:5;left:50%;top:17%;translate:-50% -120px;opacity:0;transition:.25s;padding:10px 20px;background:#04141dee;border:1px solid #f4d767;font-size:22px;font-weight:900;letter-spacing:.06em;text-align:center;pointer-events:none}.notice.show{translate:-50% 0;opacity:1}.intro{position:absolute;z-index:6;left:50%;top:50%;translate:-50% -50%;width:min(610px,91%);padding:32px;text-align:center;background:linear-gradient(145deg,#071a24f5,#102d38f2);border:2px solid #ebc960;box-shadow:0 28px 80px #000d,0 0 40px #31d8ff3b;clip-path:polygon(24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%,0 24px)}.intro.hidden{display:none}.intro small{font:700 9px 'Space Mono';letter-spacing:.24em;color:#4de8ff}.intro h2{margin:11px 0;font-size:clamp(36px,6vw,66px);line-height:.88;color:#fff1c2}.intro p{margin:15px auto;max-width:510px;font-size:19px;color:#c0d5d9}.intro button{display:block;margin:21px auto 14px;background:linear-gradient(135deg,#ffe16f,#e88b29);border-color:white;color:#1b231f;font-size:22px}.intro span{font:700 8px 'Space Mono';color:#75cddd}@media(max-width:720px),(pointer:coarse){.shell{padding:4px}.battlefield{border-width:3px;border-radius:15px}.score{top:7px;gap:4px;padding:5px}.score div{min-width:60px}.score b{font-size:24px}.legend{left:7px;bottom:7px;max-width:75%;line-height:1.7}.intro{padding:22px}.intro p{font-size:16px}header small{font-size:6px}header button{padding:8px;font-size:12px}}