*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:#fff;background:#087c94}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffe79a;outline-offset:5px}[hidden]{display:none!important}#game{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden}#sea{width:100%;height:100%;display:block;touch-action:none}.vignette{pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,46,72,.62),transparent 74%),linear-gradient(0deg,rgba(0,40,57,.4),transparent 22%)}header,footer{position:absolute;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;z-index:2}header{top:max(24px,env(safe-area-inset-top))}.brand{font-size:20px;font-weight:900;letter-spacing:3px;text-decoration:none;color:white}.brand span{display:block;font-size:9px;letter-spacing:5px;opacity:.7;margin-top:5px}.prototype{font-size:11px;border:1px solid #ffffff50;padding:8px 14px;border-radius:30px;letter-spacing:1px}footer{bottom:max(20px,env(safe-area-inset-bottom));font-size:11px;letter-spacing:1px;opacity:.8}.panel{position:absolute;top:50%;left:8%;transform:translateY(-45%);max-width:610px;z-index:2}.eyebrow{font-size:12px;letter-spacing:3px;color:#9eece8;font-weight:bold;margin-bottom:22px}h1{font-size:clamp(34px,4.5vw,70px);line-height:1.4;letter-spacing:2px;margin:0 0 20px;font-weight:900}h1 em{font-style:normal;color:#fff3be}.lead{font-size:16px;line-height:2.1;color:#e1f7f8}.rewards{display:flex;gap:16px;font-size:12px;margin:26px 0}.rewards span{border-bottom:1px solid #ffffff40;padding-bottom:8px}.rewards b{color:#ffe18a;margin-left:4px}.primary{border:0;color:#064954;background:#ffe298;border-radius:60px;padding:18px 30px;min-width:250px;font-size:17px;font-weight:900;box-shadow:0 8px 28px #00334b33;transition:transform .2s,background .2s}.primary:hover{background:#ffedbd;transform:translateY(-2px)}.primary span{margin-left:54px}.instructions{font-size:11px;line-height:1.9;color:#c3e8ec;margin-top:20px}.touch-hint{display:none}.modal{position:absolute;inset:0;z-index:5;background:#00394b85;backdrop-filter:blur(10px);display:grid;place-items:center;padding:20px}.card{text-align:center;background:#f1fbf8;color:#124f5c;border-radius:28px;padding:40px;max-width:460px;width:100%;box-shadow:0 25px 100px #002d4340}.card .eyebrow{color:#268c91;margin-bottom:12px}.card h2{font-size:28px;margin:12px 0}.card p{font-size:14px;line-height:1.8}.card .primary{width:100%;margin-top:18px}.secondary{border:0;background:none;color:#356975;padding:15px;font-size:13px}.result-score{font-size:78px;line-height:1.2;font-weight:900;color:#087f86}.result-score small{font-size:19px;margin-left:5px}.best{font-size:13px;margin:20px 0 0}#hud{position:absolute;right:5%;top:100px;display:flex;gap:12px;align-items:center;z-index:3}.metric{border:1px solid #ffffff35;background:#00445e70;backdrop-filter:blur(8px);padding:12px 20px;border-radius:18px;min-width:105px}.metric>span{font-size:9px;letter-spacing:2px;display:block;color:#a9e9e9}.metric strong{font-size:28px;font-variant-numeric:tabular-nums}.metric small{font-size:11px;margin-left:3px}.clock.urgent{color:#ffcf98}.icon{width:44px;height:44px;border:1px solid #ffffff60;border-radius:50%;background:#005270;color:#fff;font-size:20px}#toast{position:absolute;left:50%;top:24%;transform:translateX(-50%);font-weight:bold;font-size:22px;text-shadow:0 2px 8px #003640;opacity:0;transition:opacity .15s;pointer-events:none;z-index:3}#toast.show{opacity:1}#controls{position:absolute;bottom:70px;left:5%;z-index:3;align-items:center;gap:16px;display:flex}#pad{display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,42px);gap:4px}#pad button{background:#dcffff22;color:#fff;border:1px solid #eaffff60;border-radius:12px;font-size:24px;touch-action:none;user-select:none}#pad button:active{background:#b1ecef80}#pad [data-dir=up]{grid-column:2}#pad [data-dir=left]{grid-row:2;grid-column:1}#pad i{grid-row:2;grid-column:2;border-radius:50%;background:#e2ffff25;margin:12px}#pad [data-dir=right]{grid-row:2;grid-column:3}#pad [data-dir=down]{grid-row:3;grid-column:2}.control-note{font-size:11px;line-height:1.8;color:#d0f1f3}body.playing .vignette{background:linear-gradient(0deg,#003b5144,transparent 20%)}
@media(max-width:700px){header{top:18px}.brand{font-size:15px}.brand span{font-size:8px}.prototype{font-size:9px;padding:6px 8px}.panel{left:7%;right:7%;top:auto;bottom:80px;transform:none}.eyebrow{font-size:10px;margin-bottom:10px}h1{font-size:34px;margin-bottom:12px}.lead{font-size:13px;line-height:1.9}.rewards{margin:16px 0;font-size:10px;gap:10px}.primary{padding:15px 24px;font-size:16px}.instructions{font-size:10px;margin:12px 0 0}.desktop-hint{display:none}.touch-hint{display:inline}.vignette{background:linear-gradient(0deg,#003d59e8,rgba(0,46,72,.22) 85%)}footer{font-size:9px;bottom:18px}#footerNote{display:none}#hud{top:77px;gap:7px}.metric{min-width:85px;padding:8px 13px}.metric strong{font-size:25px}#controls{bottom:60px}.control-note{display:none}.card{padding:28px 24px}#toast{top:30%;font-size:18px}}
@media(max-height:620px) and (min-width:701px){h1{font-size:38px}.panel{top:53%}.lead{font-size:13px}.eyebrow{margin-bottom:9px}.rewards{margin:12px 0}.instructions{margin-top:10px}.primary{padding:12px 25px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}