:root{color-scheme:light;--green: #009944;--green-deep: #00702f;--green-soft: #5cc98a;--sea: #2a9fe6;--ink: #0f3d2a;--paper: #ffffff}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#eaf6ff;color:var(--ink);font-family:Yu Gothic,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;overflow:hidden;-webkit-text-size-adjust:100%}.stage-root{position:relative;display:grid;place-items:center;width:100vw;height:100dvh}.stage{position:relative;isolation:isolate;width:min(100vw,calc(100dvh * 16 / 9));height:min(100dvh,56.25vw)}#bgVideo,#stage{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%}#bgVideo{z-index:0;object-fit:cover;background:#000}#stage{z-index:1;background:transparent}.veil{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#ffffffeb;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.veil.hidden,.hidden{display:none}.panel{text-align:center;padding:32px 40px;max-width:720px}.eyebrow{margin:0;color:var(--green-soft);font-size:clamp(14px,1.6vw,22px);font-weight:700;letter-spacing:.22em}.title{margin:4px 0 10px;color:var(--green);font-size:clamp(40px,7vw,96px);font-weight:900;line-height:1.05}.lead{margin:0 0 26px;color:var(--ink);font-size:clamp(14px,1.8vw,22px);font-weight:700}.picker{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}.pick{display:flex;flex-direction:column;gap:4px;min-width:168px;padding:14px 18px;border:3px solid var(--green-soft);border-radius:16px;background:#fff;color:var(--green-deep);cursor:pointer;transition:transform .12s ease}.pick:hover{transform:translateY(-2px)}.pick.on{background:var(--green);border-color:var(--green);color:#fff}.pick-name{font-size:clamp(18px,2.2vw,26px);font-weight:900}.pick-sub{font-size:clamp(11px,1.2vw,14px);font-weight:700;opacity:.75}.start{padding:16px 56px;border:none;border-radius:999px;background:var(--green);color:#fff;font-size:clamp(18px,2.4vw,30px);font-weight:900;cursor:pointer;box-shadow:0 8px 0 var(--green-deep);transition:transform .1s ease,box-shadow .1s ease}.start:active{transform:translateY(5px);box-shadow:0 3px 0 var(--green-deep)}.start:disabled{background:#b9d8c6;box-shadow:0 8px #9bc0ad;cursor:default}.note{margin:18px 0 0;color:var(--green-soft);font-size:clamp(11px,1.3vw,15px);font-weight:700}.warn{margin:14px auto 0;max-width:34em;padding:10px 16px;border:2px solid #ffd27a;border-radius:12px;background:#fff7e6;color:#a6650a;font-size:clamp(11px,1.3vw,15px);font-weight:700;line-height:1.5}.warn b{color:#c0392b}.ring{position:relative;display:grid;place-items:center;width:clamp(120px,22vw,180px);aspect-ratio:1;margin:8px auto 0}.ring svg{width:100%;height:100%;transform:rotate(-90deg)}.ring-track{fill:none;stroke:#cfeadd;stroke-width:10}.ring-bar{fill:none;stroke:var(--green);stroke-width:10;stroke-linecap:round;stroke-dasharray:326.726;stroke-dashoffset:326.726;transition:stroke-dashoffset .2s ease}.ring-pct{position:absolute;color:var(--green-deep);font-size:clamp(22px,3.4vw,40px);font-weight:900;font-variant-numeric:tabular-nums}.rotate-gate{display:none}@media(orientation:portrait)and (pointer:coarse){.rotate-gate{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:grid;place-items:center;background:#eaf6ff;color:var(--green-deep)}}.rotate-inner{text-align:center}.rotate-icon{font-size:72px;animation:rotate-hint 1.8s ease-in-out infinite}.rotate-text{margin:14px 0 0;font-size:clamp(18px,5vw,26px);font-weight:900}@keyframes rotate-hint{0%,to{transform:rotate(0)}40%,70%{transform:rotate(-90deg)}}#pads{--pad: clamp(84px, 20vh, 148px);--padB: clamp(10px, 2.5vh, 24px);--padS: clamp(10px, 2.5vw, 36px)}#pads.hidden{display:none}.pad{position:absolute;z-index:4;width:var(--pad);height:var(--pad);padding:0;border-radius:50%;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .06s ease,filter .06s ease}.pad:before{content:"";position:absolute;left:16%;top:10%;width:54%;height:38%;border-radius:50%;background:radial-gradient(closest-side,#ffffffd9,#fff0);pointer-events:none}.pad.don{border:4px solid #c62353;background:radial-gradient(120% 95% at 50% 20%,#ffd3e0,#ff86a9 40%,#ff5c8a 62%,#e42c69);box-shadow:inset 0 -12px 20px #960c3e80,inset 0 10px 16px #ffffff80,0 10px 20px #00000059}.pad.ka{border:4px solid #d99000;background:radial-gradient(120% 95% at 50% 20%,#fff3bf,#ffe06b 40%,#ffd633 62%,#edad0c);box-shadow:inset 0 -12px 20px #aa6e0073,inset 0 10px 16px #fff9,0 10px 20px #00000059}.pad.pressed,.pad:active{transform:translateY(5px) scale(.95);filter:brightness(1.12)}.pad.don.left{left:var(--padS);bottom:var(--padB)}.pad.don.right{right:var(--padS);bottom:var(--padB)}.pad.ka.left{left:calc(var(--padS) + var(--pad) * .22);bottom:calc(var(--padB) + var(--pad) * 1.06)}.pad.ka.right{right:calc(var(--padS) + var(--pad) * .22);bottom:calc(var(--padB) + var(--pad) * 1.06)}.stop{position:absolute;z-index:5;top:14px;right:70px;width:52px;height:44px;border:2px solid #fff;border-radius:12px;background:#d63c3ceb;color:#fff;font-size:16px;font-weight:900;cursor:pointer;box-shadow:0 4px 10px #0000004d}.stop.hidden{display:none}.stop:active{transform:translateY(2px)}.fs{position:absolute;right:14px;top:14px;width:44px;height:44px;border:2px solid var(--green-soft);border-radius:12px;background:#fffc;color:var(--green);font-size:20px;cursor:pointer;opacity:.5;transition:opacity .15s ease}.fs:hover{opacity:1}:fullscreen .fs{opacity:0}:fullscreen .fs:hover{opacity:.6}