*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#17283d;color:#f3f1e8;font-family:ui-rounded,'Arial Rounded MT Bold',system-ui,sans-serif}body{background:radial-gradient(ellipse at 50% 30%,#3c5570,#17283d 75%);display:flex;justify-content:center}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:4px}.shell{width:min(100%,480px);padding:15px 17px 12px}header{height:47px;display:flex;justify-content:space-between;align-items:center}.brand{font-size:20px;font-weight:950;letter-spacing:-1px;text-decoration:none;color:#fff}.brand span{color:#ffcf45}.brand i{font-style:normal;color:#ffcf45;margin-left:8px}.icon{border:1px solid #ffffff35;background:#ffffff0d;color:white;border-radius:50%;width:35px;height:35px;font-weight:bold;position:relative}.slash{position:absolute;left:15px;top:5px;color:#ffa26d}.arena{height:min(760px,calc(100svh - 111px));min-height:470px;position:relative;overflow:hidden;border-radius:25px;border:1px solid #ffffff30;box-shadow:0 18px 70px #0005;isolation:isolate;background:#6e839c}canvas{width:100%;height:100%;display:block;touch-action:none}.hud{position:absolute;left:18px;right:18px;top:19px;display:flex;gap:14px;align-items:center;pointer-events:none}.hud button{pointer-events:auto;background:#24395465}.score{background:linear-gradient(145deg,#ffdf73,#f8af32);padding:9px 18px 8px;min-width:86px;border-radius:15px;color:#684018;box-shadow:inset 0 2px 1px #fff9,0 4px 0 #b6762b,0 8px 16px #25375130}.score small{font-size:9px;font-weight:900;letter-spacing:1.6px}.score strong{display:block;font-size:25px;line-height:1.15;font-weight:950}.level{flex:1;text-shadow:0 2px 3px #0003}.level>div:first-child{display:flex;justify-content:space-between;margin-bottom:8px}.level small{font-size:9px;font-weight:900;letter-spacing:1px}.track{height:10px;border:2px solid #fff8;background:#32425e;border-radius:20px;overflow:hidden}.track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#65dbe0,#ffdf62);transition:width .2s}.lives{position:absolute;top:103px;left:23px;font-size:13px;color:#ffdf72;letter-spacing:5px;text-shadow:0 2px 4px #32415c}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(#24334d08,#23324d26);padding:20px}.overlay.hidden{display:none}.card{width:100%;margin-top:-80px}.eyebrow{font-size:10px;font-weight:850;letter-spacing:2px;margin-bottom:18px;color:#edf2f6}h1{font-size:clamp(43px,12vw,62px);font-weight:950;line-height:1.04;letter-spacing:-3px;margin:0;text-shadow:0 4px 0 #3c52685c,0 12px 30px #20324930}h1 em{font-style:normal;color:#ffda55}.card p{font-size:13px;line-height:1.7;color:#f5f5f1;margin:19px 0 24px;text-shadow:0 2px 6px #203249}.primary{border:0;background:linear-gradient(#ffe176,#ffc331);color:#533719;font-weight:900;font-size:15px;min-width:205px;padding:17px 24px;border-radius:15px;box-shadow:inset 0 2px 0 #fff9,0 5px 0 #bf8229,0 10px 25px #24374a40}.primary span{margin-left:32px;font-size:20px}.primary:active{transform:translateY(3px)}.hint{font-size:9px;letter-spacing:1.5px;color:#e2e8eea9;margin-top:21px}.bottom-tip{position:absolute;bottom:24px;width:100%;text-align:center;font-size:9px;font-weight:800;letter-spacing:2px;color:#fff9;pointer-events:none}#toast{position:absolute;top:32%;width:100%;text-align:center;font-size:26px;font-weight:950;color:#ffe06c;text-shadow:0 3px 0 #865824,0 6px 14px #203049;pointer-events:none;opacity:0;transition:opacity .15s}footer{display:flex;justify-content:space-between;padding:14px 3px 0;color:#adb9c8;font-size:10px}footer span:last-child{font-size:9px;font-weight:800;letter-spacing:1px}@media(min-width:700px){.shell{padding-top:22px}header{height:55px}.arena{height:min(760px,calc(100svh - 138px))}}

.brand{font-size:18px;letter-spacing:-.6px}.brand small{display:block;font-size:9px;letter-spacing:2px;color:#ddb2ef}.logo-title{margin:0 auto;width:min(100%,300px);letter-spacing:0}.logo-window{display:block;position:relative;aspect-ratio:1.2;overflow:hidden;border-radius:22px;box-shadow:0 10px 30px #20324930}.logo-window img{position:absolute;width:100%;height:auto;left:0;top:50%;transform:translateY(-52%)}.card:has(.logo-title){margin-top:-65px}.card:has(.logo-title) .eyebrow{margin-bottom:12px}.card:has(.logo-title) p{font-size:12px;line-height:1.6;margin:14px 0 18px}@media(max-height:700px){.logo-title{width:235px}.card:has(.logo-title){margin-top:-45px}.card:has(.logo-title) .hint{margin-top:14px}}

.logo-window{overflow:visible;border-radius:0;box-shadow:none;aspect-ratio:1.2}.logo-window img{filter:drop-shadow(0 8px 12px #20324955)}.combo-panel{position:absolute;top:99px;right:22px;display:flex;align-items:center;gap:8px;pointer-events:none}.combo-panel strong{font-size:25px;color:#ffe06c;text-shadow:0 2px 3px #293b56}.combo-panel small{font-size:8px;font-weight:900;letter-spacing:.6px}.combo-track{height:5px;background:#263b5770;border-radius:8px;margin-top:5px;overflow:hidden}.combo-track i{display:block;width:0;height:100%;background:#ffe06c;transition:width .2s}.bump{animation:bump .22s ease-out}@keyframes bump{50%{transform:scale(1.17)}}@media(prefers-reduced-motion:reduce){.bump{animation:none}}

/* A single poster, two lines of instructions and one start button. */
body.intro{align-items:center;min-height:100svh}.intro .shell{width:min(480px,calc((100svh - 32px)*.558),100%);padding:0}.intro header,.intro footer,.intro .hud,.intro .lives,.intro .combo-panel,.intro .bottom-tip,.intro #toast{display:none}.intro .arena{height:auto;min-height:0;aspect-ratio:768/1376;background:#66737c url('intro.jpeg') center/cover no-repeat}.intro canvas{visibility:hidden;position:absolute;inset:0}.intro .overlay{padding:0 14px 7%;align-items:flex-end;background:linear-gradient(transparent 72%,#17283d88 100%)}.intro .card:has(.logo-title){margin:0}.intro .logo-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.intro .eyebrow,.intro .hint{display:none}.intro .card:has(.logo-title) p{font-size:clamp(11px,3.4vw,14px);line-height:1.6;margin:0 0 14px;color:#fff;text-shadow:0 2px 5px #17283d}.intro .primary{min-width:180px;padding:14px 24px;font-size:15px}@media(max-height:600px){.intro .card:has(.logo-title) p{font-size:10px;margin-bottom:8px}.intro .primary{padding:10px 20px;min-width:150px;font-size:12px}}

.intro-story{display:none}.intro .shell{width:min(480px,calc((100svh - 32px)*.5),100%)}.intro .arena{aspect-ratio:1/2;background-size:100% auto;background-position:center top;background-color:#657480}.intro .overlay{padding-bottom:6%;background:linear-gradient(transparent 62%,#17283dcc 100%)}.intro .card:has(.logo-title) .intro-story{display:block;font-size:clamp(10px,3vw,13px);line-height:1.45;max-width:340px;margin:0 auto 12px}.intro .card:has(.logo-title) #message{font-size:clamp(10px,3vw,13px);margin-bottom:12px}.slow-status{position:absolute;top:143px;left:50%;transform:translateX(-50%);padding:7px 12px;border:1px solid #b9efff88;border-radius:20px;background:#23536dbb;color:#d9faff;font-size:10px;font-weight:900;letter-spacing:1px;pointer-events:none}.slow-status.hidden,.intro .slow-status{display:none}@media(max-height:600px){.intro .card:has(.logo-title) .intro-story{font-size:9px;line-height:1.35;margin-bottom:8px}.intro .card:has(.logo-title) #message{font-size:9px;margin-bottom:8px}.intro .overlay{padding-bottom:5%}}

.intro .shell{width:min(480px,calc((100svh - 32px)*.558),100%)}.intro .arena{aspect-ratio:768/1376;background-size:cover}.intro .card:has(.logo-title) .intro-story{position:absolute;top:11%;left:10%;right:10%;max-width:none;margin:0;font-size:clamp(11px,3.4vw,15px);line-height:1.55;text-shadow:0 2px 6px #17283d}.intro .overlay{background:linear-gradient(#17283d22,transparent 32%,transparent 72%,#17283dcc 100%)}@media(max-height:600px){.intro .card:has(.logo-title) .intro-story{font-size:10px;line-height:1.4;top:10%}}