*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050d1b;color:#ffebbc;font-family:'MS Gothic','Yu Gothic',monospace}body{overscroll-behavior:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #ffe19b;outline-offset:3px}.cabinet{height:100dvh;width:100%;max-width:620px;margin:0 auto;display:grid;grid-template-rows:38px auto minmax(0,1fr) 36px;background:#08172b;box-shadow:0 0 60px #0008;padding-bottom:env(safe-area-inset-bottom)}header{display:flex;align-items:center;justify-content:space-between;padding:6px 13px;border-bottom:2px solid #2d5175;background:#071125;gap:7px}header a{font-size:10px;text-decoration:none;color:#b7d1e5}header>span{font-size:8px;color:#7294af;letter-spacing:1px}.small{border:1px solid #4d7193;background:#152b49;color:#c4e9fc;border-radius:0;padding:6px 10px;font-size:10px}.hud{padding:10px 16px 11px;background:linear-gradient(#142945,#0b1a30)}.title-row{display:flex;justify-content:space-between;align-items:center;gap:8px}h1{font-size:clamp(22px,5.3vw,32px);letter-spacing:2px;margin:0 0 10px;color:#ffe3a7;text-shadow:2px 2px #244f7c}h1 span{color:#ff8179;text-shadow:2px 2px #7f344a}.scores{display:flex;align-items:center;justify-content:space-between;gap:12px;border:2px solid #3b749b;background:#061226;padding:7px 12px;box-shadow:3px 3px #020817;font-size:11px}.scores strong{font-size:28px;color:#86eaff;font-family:monospace}.right{display:flex;flex-direction:column;text-align:right;gap:5px}.right b{color:#f8a0ba;font-size:14px;letter-spacing:2px}.right span{font-size:8px;color:#b3c9dd}#field{position:relative;min-height:0;overflow:hidden;background:#050d1c;border-block:2px solid #294b6f;touch-action:none}#arena{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;outline-offset:-4px;image-rendering:pixelated}#attack-message{position:absolute;left:7%;right:7%;bottom:9px;text-align:center;color:#ffe5a3;background:#061229e3;border:1px solid #57778e;padding:7px 8px;font-size:10px;line-height:1.6;pointer-events:none;min-height:29px}#intro-control{position:absolute;left:0;right:0;top:62%;text-align:center;font-size:10px;color:#c5f5ff;pointer-events:none;text-shadow:1px 1px #102747}footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 13px;color:#92b0c8;font-size:8px;border-top:1px solid #2b4765}footer>span:first-child{color:#e9d19a}.overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:18px;background:#030a1dc9;backdrop-filter:blur(3px);overflow:auto}.panel{max-width:440px;width:100%;padding:24px 20px;border:3px solid #c3a46b;box-shadow:6px 6px #020611;background:#0c1b35f7;text-align:center}.stamp{font-size:8px;color:#ccaf7b;letter-spacing:2px}h2{font-size:23px;color:#ffe1a4;line-height:1.5;margin:15px 0}.panel>p{font-size:12px;color:#c5dbea;line-height:1.9}.how{font-size:11px;line-height:2;text-align:left;color:#b6d3e6;border-block:1px solid #435b78;padding:13px 3px;margin:18px 0}.how span{display:inline-block;width:22px;color:#ffe09a}.how b{color:#93e5ec}.how small{font-size:9px;color:#8daec9;display:block;margin-top:5px}.primary{width:100%;display:block;padding:14px 10px;background:#78d3eb;color:#0c2b40;border:2px solid #bdf0fc;border-radius:0;font-size:15px;font-weight:bold;box-shadow:4px 4px #255578}.primary:hover{filter:brightness(1.1)}#share{margin:15px auto 0}#result-number{font:bold 43px monospace;color:#9aeeff;margin:15px 0}#result-number small{font-size:15px}#overlay-best{color:#d7c18c;font-size:10px}.hidden{display:none!important}@media(max-width:380px){header>span{display:none}.hud{padding:8px 12px 10px}h1{font-size:22px}.scores{padding:6px 10px}.scores strong{font-size:25px}.title-row .small{font-size:9px;padding:5px 7px}.panel{padding:18px 14px}h2{font-size:21px}.how{font-size:10px}footer{font-size:7px}}@media(max-height:650px){.cabinet{grid-template-rows:32px auto minmax(0,1fr) 29px}.hud{padding:6px 12px 8px}h1{font-size:23px;margin-bottom:7px}.scores{padding:4px 9px}.scores strong{font-size:22px}.right b{font-size:12px}.right span{font-size:7px}#attack-message{font-size:9px;padding:5px 7px;bottom:5px}.panel{padding:17px 14px}.how{font-size:10px;margin:12px 0}.panel>p{font-size:11px}h2{font-size:20px;margin:10px 0}}