:root{color-scheme:dark;--ink:#effbfa;--accent:#68f5d0;--panel:#10252ee8}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#173746;color:var(--ink);font-family:Arial,'Noto Sans JP',sans-serif}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #ffe38d;outline-offset:4px}button:disabled{opacity:.4;cursor:wait}#view{display:block;width:100%;height:100%;position:fixed;inset:0;touch-action:none}.topbar{position:fixed;z-index:3;left:24px;right:24px;top:22px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.topbar>*{pointer-events:auto}.brand{font-weight:900;font-size:19px;letter-spacing:.1em;text-shadow:0 2px 8px #0009}.brand small{display:block;font-size:10px;font-weight:400;letter-spacing:.16em;margin-top:5px}.tools{display:flex;gap:8px}.tools a,.tools button{border:1px solid #ffffff40;background:#10252ed9;border-radius:40px;color:#fff;text-decoration:none;padding:10px 15px;font-size:12px}.hud{position:fixed;top:22px;left:50%;transform:translateX(-50%);width:min(430px,42vw);text-align:center;pointer-events:none}.clock{font-weight:900;font-variant-numeric:tabular-nums;font-size:34px;text-shadow:0 2px 10px #0008}.scoreline{display:flex;justify-content:space-between;font-size:12px;font-weight:bold;letter-spacing:.04em;margin:5px 0}.scoreline span{background:#143441df;padding:7px 12px;border-radius:6px}.meter{height:8px;background:#ffffff25;border-radius:8px;overflow:hidden;display:flex}.meter i{display:block;height:100%;background:var(--accent);transition:width .1s}.meter .opponent{background:#ff658e;margin-left:auto}.bottom{position:fixed;left:24px;bottom:24px;display:flex;gap:16px;align-items:flex-end;pointer-events:none}.stat{padding:16px 18px;background:var(--panel);border:1px solid #ffffff25;border-radius:14px;min-width:180px}.stat strong{font-size:13px}.stat .meter{margin:10px 0 5px}.stat small{font-size:11px;color:#aec4cd}.hint{position:fixed;bottom:27px;right:25px;color:#e4f5f5;font-size:12px;text-align:right;line-height:1.9;text-shadow:0 2px 5px #000}.notice{position:fixed;top:28%;left:50%;transform:translateX(-50%);font-size:22px;font-weight:bold;text-align:center;text-shadow:0 2px 10px #000;pointer-events:none}.overlay{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(90deg,#061e32b8,#09263855);backdrop-filter:blur(3px)}.overlay[hidden]{display:none}.panel{width:min(670px,100%);background:linear-gradient(140deg,#132e3bf2,#0c202cf5);padding:38px 44px;border:1px solid #dcfff633;border-radius:24px;box-shadow:0 30px 100px #00162566}.eyebrow{color:var(--accent);font-size:11px;letter-spacing:.25em;font-weight:800;margin-bottom:18px}.panel h1,.panel h2{font-size:clamp(36px,6vw,68px);line-height:.95;letter-spacing:-.055em;margin:0 0 20px;font-weight:900}.panel h1 em{font-style:normal;color:var(--accent)}.panel p{font-size:14px;line-height:1.8;color:#c0d6df}.instructions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:25px 0;font-size:12px;color:#d8e7e9}.instructions b{color:#fff;margin-right:8px}.primary{background:var(--accent);color:#092932;border:0;border-radius:9px;font-size:15px;font-weight:800;padding:16px 28px;box-shadow:0 7px 25px #40ddbc20}.secondary{background:transparent;border:1px solid #ffffff40;border-radius:9px;padding:15px 22px;color:#fff;margin-left:8px}.credit{font-size:10px!important;color:#829da7!important;margin:18px 0 0}.panel a{color:#b1cdd7}.touch{display:none;position:fixed;bottom:22px;left:22px;right:22px;justify-content:space-between;align-items:flex-end;pointer-events:none}.touch>*{pointer-events:auto}#stick{width:116px;height:116px;border:1px solid #fff5;background:#18394580;border-radius:50%;touch-action:none;position:relative}#stick::after{content:'';position:absolute;width:46px;height:46px;left:34px;top:34px;border-radius:50%;background:#e9fff5b0;transform:translate(var(--dx,0px),var(--dy,0px))}.touch-actions{display:flex;gap:9px;align-items:flex-end}.touch-actions button{border-radius:50%;width:63px;height:63px;background:#183945c0;border:1px solid #fff6;font-size:11px;touch-action:none}.touch-actions button:last-child{width:82px;height:82px;background:#68f5d0bb;color:#0b2b35}.support{display:none;font-size:11px;color:#b6d0d7}#load-error{background:#882c3d;padding:12px;border-radius:6px}#load-error[hidden]{display:none}@media(pointer:coarse){.touch{display:flex}.hint{display:none}.bottom{bottom:155px}.support{display:block}.instructions{display:none}}@media(max-width:700px){.topbar{left:12px;right:12px;top:12px}.brand{font-size:12px}.brand small{font-size:8px}.tools{gap:4px}.tools a,.tools button{padding:9px;font-size:10px}.hud{top:62px;width:70vw}.clock{font-size:24px}.panel{padding:28px 24px;max-height:88dvh;overflow:auto}.panel p{font-size:12px}.instructions{font-size:10px;gap:12px}.bottom{left:12px;bottom:14px}.stat{padding:10px;min-width:150px}.hint{display:none}.notice{top:32%;font-size:17px}.support{display:block}}@media(max-width:700px) and (pointer:coarse){.bottom{bottom:154px}.touch{bottom:16px;left:12px;right:12px}}@media(max-height:550px){.panel{padding:22px;max-height:94dvh;overflow:auto}.panel h1{font-size:34px}.panel p{margin:7px 0}.instructions{margin:12px 0}.credit{margin-top:10px!important}.hud{top:12px}.bottom{bottom:12px}.touch{bottom:12px}.stat{min-width:140px}.bottom{left:145px}.panel h2{font-size:32px}}
@media(max-width:700px){.touch{display:flex}.bottom{bottom:154px}.touch{bottom:16px;left:12px;right:12px}}