:root{color-scheme:dark;font-family:system-ui,-apple-system,'Noto Sans JP',Meiryo,sans-serif;color:#edf7ff;background:#07111f}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#233b55,#07111f 70%);min-height:100dvh}.app{width:min(100%,520px);margin:auto;padding:18px 16px 24px}.back{display:inline-block;font-size:12px;color:#9bddee;margin-bottom:17px;text-decoration:none}.brand{font-size:10px;letter-spacing:.18em;font-weight:800;color:#7ed8ee}.heading{display:flex;justify-content:space-between;align-items:center;gap:12px}h1{font-size:clamp(28px,7vw,39px);margin:5px 0;color:#fff3e2;letter-spacing:.04em}.tagline{font-size:13px;color:#b4c9dc;margin:1px 0 20px}button{font:inherit;cursor:pointer;border:1px solid #3b5976;border-radius:10px;background:#152a41;color:#e6f7ff;touch-action:manipulation;min-height:40px;padding:7px 13px}button:focus-visible,a:focus-visible{outline:3px solid #99f1ff;outline-offset:3px}button:disabled{cursor:default;opacity:.5}.hud{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;gap:7px}.hud>div{padding:10px 5px;border:1px solid #284460;border-radius:10px;background:#0b1c30;text-align:center}.hud small{display:block;font-size:9px;color:#9bb8cc;letter-spacing:.08em}.hud strong{font-size:19px;font-variant-numeric:tabular-nums;display:block;margin-top:3px}#score{color:#ffc780}.wind{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;min-height:38px;color:#a8c9dc}#wind{font-weight:800;color:#79dcef}.field{position:relative;border:1px solid #345575;border-radius:15px;overflow:hidden;background:#071426}canvas{display:block;width:100%;height:auto;aspect-ratio:420/540;touch-action:manipulation}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:#05101b99;backdrop-filter:blur(5px)}.overlay.hidden{display:none}.panel{width:100%;border:1px solid #4b657a;background:linear-gradient(145deg,#152c42,#091827);border-radius:18px;padding:26px 18px;text-align:center;box-shadow:0 15px 40px #0007}.panel h2{font-size:clamp(25px,7vw,36px);line-height:1.35;color:#ffce8b;margin:15px 0}.panel p{font-size:13px;line-height:1.95;color:#c4d6e2}.primary{background:#ffbd6d;color:#251605;font-weight:900;width:100%;min-height:49px;border:0;margin-top:10px}.panel .help{font-size:10px;color:#8faec5}.drop{display:flex;align-items:center;justify-content:center;gap:20px;width:100%;min-height:59px;background:linear-gradient(100deg,#f3aa4f,#ffcc81);border:0;color:#281a0c;font-size:20px;font-weight:900;margin-top:12px;box-shadow:0 6px 24px #c6791f25}.drop span{font-size:10px;letter-spacing:.15em}.bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:10px;color:#8eabc2}.bottom button{font-size:12px}.toast{position:absolute;left:12px;right:12px;top:41%;text-align:center;pointer-events:none;color:#ffcf8c;font-size:24px;font-weight:900;text-shadow:0 2px 7px #000;opacity:0;transition:opacity .15s}.toast.on{opacity:1}@media(max-width:370px){.app{padding:12px 10px}.hud strong{font-size:16px}#hint{font-size:9px}.panel{padding:16px 12px}.panel p{font-size:12px}}@media(prefers-reduced-motion:reduce){.toast{transition:none}}