*{box-sizing:border-box}body{margin:0;background:#f4f1ec;color:#343d40;font-family:system-ui,-apple-system,'Apple SD Gothic Neo',sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0}header{height:92px;padding:0 5vw;display:flex;align-items:center;gap:12px;border-bottom:1px solid #dedbd4}.brand{text-decoration:none;color:#253c44;letter-spacing:-2px;font-size:34px;font-weight:800}.brand span{font-weight:400;color:#719299}.brand i{display:inline-block;background:#00bfd5;width:9px;height:9px;border-radius:50%;margin:0 0 3px 5px}.top-label{margin-left:auto;margin-right:24px;font-size:12px;color:#858b88}header button{background:#fff9;border:1px solid #dddcd5;width:38px;height:38px;border-radius:50%}main{max-width:1340px;margin:auto;display:grid;grid-template-columns:1fr minmax(380px,650px);gap:60px;padding:38px 5vw}aside{padding-top:100px}.eyebrow{font-size:10px;letter-spacing:2px;color:#849391}h1{font-size:clamp(32px,3.5vw,58px);font-weight:800;line-height:1.45;letter-spacing:-2.8px;margin:22px 0}h1 em{color:#009faf;font-style:normal}aside p{font-size:13px;line-height:2;color:#818581}.guide{margin:40px 0;display:grid;grid-template-columns:28px 1fr;gap:17px 10px;font-size:11px;color:#737e7c}.guide b{color:#00a6b8;font-size:10px}aside small{font-size:9px;letter-spacing:1.8px;color:#9ca5a0}.arena-wrap{width:100%;border-radius:26px;background:#fffc;box-shadow:0 16px 65px #55533b0d;padding:18px}.hud{height:70px;display:flex;gap:20px;align-items:center;padding:0 13px 12px}.hud span{display:block;font-size:10px;color:#8b9390;margin-bottom:4px}.hud strong{font-size:28px;font-weight:600;color:#009cac}.hud strong small{font-size:14px}.goal{flex:1;text-align:center;padding:0 16px}.progress{height:4px;border-radius:5px;background:#e5e9e5;margin-top:10px;overflow:hidden}.progress i{display:block;background:#00c0ce;width:2.2%;height:100%;transition:width .4s}.goal small{font-size:8px;color:#a3aaa3}.best{text-align:right}.best b{font-size:15px;color:#71837e}.board{position:relative;overflow:hidden;border-radius:18px;aspect-ratio:44/50;background:#eae7e2;border:1px solid #e3dfd7;touch-action:none}canvas{width:100%;height:100%;display:block}#notice{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:11px;background:#fffD;padding:8px 16px;border-radius:30px;white-space:nowrap;pointer-events:none;transition:opacity .3s}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#f5f0e666;backdrop-filter:blur(3px)}#overlay[hidden]{display:none}.card{width:84%;max-width:335px;background:#fffE;border:1px solid #fff;border-radius:24px;padding:32px;text-align:center;box-shadow:0 18px 50px #45505615}.pill{font-size:9px;letter-spacing:2px;color:#009fb2}h2{font-size:27px;letter-spacing:-1px;line-height:1.5;margin:16px 0;color:#36484a}.card p{font-size:11px;color:#8a938d;line-height:1.9;margin:0 0 25px}#play{width:100%;padding:15px 18px;background:#00aebf;color:white;border-radius:13px;text-align:left;font-weight:700;box-shadow:0 6px 20px #00aebf29}#play span{float:right}.settings{display:flex;flex-direction:column;gap:7px;margin-top:18px;text-align:left;font-size:10px;color:#8e9591}input{accent-color:#00acbb}footer{display:flex;justify-content:space-between;gap:10px;padding:16px 8px 2px;font-size:8px;letter-spacing:1px;color:#93a09a}footer i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px}.blue-dot{background:#00b7cb}.red-dot{background:#f8585a;margin-left:10px}#joystick{display:none;position:absolute;width:100px;height:100px;border:2px solid #ffffff90;background:#ffffff30;border-radius:50%;pointer-events:none}#joystick i{position:absolute;left:30px;top:30px;width:36px;height:36px;background:#00b7c980;border:2px solid white;border-radius:50%}#debug{position:fixed;left:5px;bottom:5px;background:black;color:#0f0;font:12px monospace;padding:8px}.high-contrast{color:#12292e}.high-contrast .card p,.high-contrast .hud span{color:#334849}.high-contrast .board{border:3px solid #334849}@media(max-width:900px){main{grid-template-columns:1fr;max-width:650px;padding:18px 16px;gap:0}aside{display:none}header{height:64px;padding:0 22px}.brand{font-size:27px}.top-label{font-size:10px}.arena-wrap{padding:12px;border-radius:22px}.board{max-height:calc(100dvh - 220px);aspect-ratio:44/50;width:auto;margin:auto}.hud{height:66px;padding:0 5px 12px}.card{padding:25px}h2{font-size:24px}footer{font-size:7px;letter-spacing:0}.top-label{display:none}header #help{margin-left:auto}}

#overlay.intro{align-items:flex-end;background:none;backdrop-filter:none;padding:20px}.intro .card{padding:0;background:none;border:0;box-shadow:none;max-width:260px}.intro .pill,.intro h2,.intro p,.intro .settings{display:none}#overlay.intro #play{box-shadow:0 10px 30px #00383d30;background:#ffffffdf;color:#087987;text-align:center;backdrop-filter:blur(8px)}

#quality{font:inherit;font-size:11px;color:#427d7d;background:#ffffffbb;border:1px solid #d7e4dc;border-radius:18px;padding:10px 12px;cursor:pointer}body{background:#f4f5ef}.board{background:#ebece4}.top-label{color:#819991}#play{background:#06bfc1}@media(max-width:900px){header #help{margin-left:0}#quality{margin-left:auto;font-size:10px;padding:9px}}
/* Prism Puddles: original mint, lilac, and amber art direction. */
body{background:#f7f3fb}.board{background:#f0ebf7}.brand span{color:#9477dc}.brand i{background:#72dfbb}.top-label{color:#887fa5}#play{background:#75dcb9;box-shadow:0 12px 30px #4cbf9d45}.blue-dot{background:#72dfbb}.red-dot{background:#ffad69}#joystick i{background:#8c75df80}.hud strong{color:#6952bd}.progress i{background:linear-gradient(90deg,#77dfbc,#aa8be9)}