*{box-sizing:border-box}body{margin:0;background:#132c40;color:#f4f7fa;font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif}main{width:min(1200px,100%);margin:auto;padding:18px 20px 10px}header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}h1{font-size:22px;letter-spacing:.06em;margin:0 0 7px}header p{display:flex;gap:16px;margin:0;font-size:14px}.blue{color:#8ccaff}.red{color:#ffafa8}button{font:inherit;font-size:14px;border:1px solid #597080;border-radius:9px;padding:10px 14px;background:#243e51;color:white;cursor:pointer}button:hover{background:#35566c}button:focus-visible,canvas:focus-visible{outline:3px solid #f9d77a;outline-offset:3px}.actions{display:flex;gap:8px}.arena{position:relative;width:100%;border-radius:12px;overflow:hidden;box-shadow:0 14px 35px #0005;background:#ca944d}canvas{width:100%;display:block;touch-action:none}#loading,#paused{position:absolute;inset:0;display:grid;place-items:center;background:#132c40aa;font-size:20px;font-weight:700;pointer-events:none}#paused[hidden],#loading[hidden]{display:none}footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:12px 0 0}.help strong{font-size:15px}.help p{font-size:14px;line-height:1.8;color:#bccbd5;margin:5px 0}#pad{display:grid;grid-template-columns:44px 44px 44px;grid-template-rows:35px 35px 35px;gap:3px;touch-action:none;flex-shrink:0}#pad button{padding:0;font-size:17px;touch-action:none;user-select:none;-webkit-user-select:none}#pad button[data-d=up]{grid-column:2}#pad button[data-d=left]{grid-row:2;grid-column:1}#pad span{grid-row:2;grid-column:2;border-radius:50%;background:#35556b;margin:12px}#pad button[data-d=right]{grid-row:2;grid-column:3}#pad button[data-d=down]{grid-row:3;grid-column:2}#pad button.held{background:#1476c8;border-color:#8ccaff}@media(max-width:620px){main{padding:12px 8px}h1{font-size:18px}.actions{gap:5px}button{padding:9px 8px;font-size:13px}header{gap:6px}header p{font-size:13px;gap:10px}footer{align-items:flex-start}.help strong{font-size:14px}.help p{font-size:13px;max-width:225px}#pad{grid-template-columns:42px 42px 42px;grid-template-rows:40px 40px 40px}}@media(orientation:landscape) and (max-height:600px){main{width:min(100%,980px);padding:6px 12px;display:grid;grid-template-columns:1fr 155px;gap:8px}header{grid-column:1/-1;margin:0}header h1{font-size:16px}header p{display:none}.arena{width:min(100%,calc((100dvh - 62px)*1.5));justify-self:center}footer{flex-direction:column;justify-content:center;padding:0}.help strong{font-size:13px}.help p{font-size:12px}#pad{align-self:center}}
footer{align-items:center;min-height:154px;gap:16px}.controller{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:14px}#jog{position:relative;width:118px;height:118px;border:2px solid #7291a9;border-radius:50%;background:#1b3d55;touch-action:none;user-select:none;flex-shrink:0;box-shadow:inset 0 0 20px #0003}#jog .cross{position:absolute;inset:0;display:grid;place-items:center;font-size:75px;color:#486d87;pointer-events:none}#stick{position:absolute;width:46px;height:46px;left:34px;top:34px;border-radius:50%;background:#73bded;border:3px solid #c7eaff;pointer-events:none;box-shadow:0 3px 8px #0005}#action{width:118px;height:94px;flex-shrink:0;border:2px solid #a6d3f1;border-radius:24px;background:#096db2;font-weight:700;font-size:16px;touch-action:manipulation}#action:active{background:#369ede;transform:scale(.96)}.help{text-align:center;flex:1}.help strong{font-size:17px}#mode.running{color:#ffd36a}#notice{min-height:22px;color:#ffe3a4;font-size:13px;margin:3px 0}.mobile-help{display:none}@media(pointer:coarse){.desktop-help{display:none}.mobile-help{display:block}}@media(max-width:620px){footer{gap:8px;min-height:150px}.help p{max-width:none;font-size:12px}.help strong{font-size:14px}#jog{width:102px;height:102px}#stick{left:26px;top:26px}#action{width:96px;height:85px;font-size:14px}#notice{font-size:12px}}@media(orientation:landscape) and (max-height:600px){main{display:block;width:100%;padding:5px 120px}header{margin-bottom:5px}.arena{width:min(100%,calc((100dvh - 65px)*1.5));margin:auto}footer{min-height:0;padding:0}.controller{position:fixed;left:8px;bottom:12px}#action{position:fixed;right:8px;bottom:22px;width:100px;height:90px}.help{font-size:12px}.help p{display:none}.help strong{font-size:13px}#notice{display:block;position:fixed;bottom:0;left:125px;right:125px;pointer-events:none;margin:0}}
#result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#10273ddd;z-index:5;text-align:center;padding:20px}#result[hidden]{display:none}#result h2{font-size:clamp(25px,5vw,46px);margin:0 0 10px;color:#ffe092}#result p{font-size:clamp(14px,2vw,20px);margin:0 0 22px}#again{background:#087fc9;font-size:18px;padding:14px 24px}.rules{font-size:13px;color:#ffe092;margin-bottom:4px}#action:disabled{opacity:.5}@media(max-width:620px){.rules{font-size:12px}}@media(orientation:landscape) and (max-height:600px){.rules{display:none}}
.difficulty-label{display:flex;align-items:center;gap:6px;font-size:14px;color:#d8e6ef}#difficulty{font:inherit;font-size:14px;color:white;background:#243e51;border:1px solid #7291a9;border-radius:9px;padding:9px 7px}#difficulty:focus-visible{outline:3px solid #f9d77a;outline-offset:2px}.actions{flex-wrap:wrap;justify-content:flex-end}@media(max-width:620px){header{flex-wrap:wrap}.actions{width:100%;justify-content:space-between}.difficulty-label{font-size:13px}#difficulty{font-size:13px;padding:8px 5px}}@media(orientation:landscape) and (max-height:600px){header{flex-wrap:nowrap}.actions{width:auto}.difficulty-label{font-size:12px}#difficulty{font-size:12px}}

.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}#from-start{font-size:18px;padding:14px 24px} .result-actions [hidden]{display:none}

#sparkles{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}

#stage-select{font:inherit;font-size:14px;color:white;background:#243e51;border:1px solid #7291a9;border-radius:9px;padding:9px 7px;max-width:160px}#stage-select:focus-visible{outline:3px solid #f9d77a;outline-offset:2px}@media(max-width:620px){#stage-select{font-size:13px;padding:8px 5px}}

#jog,#jog *,#action,.controller{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#jog .cross{display:block;font-size:0}#jog .cross::before,#jog .cross::after{content:"";position:absolute;left:50%;top:50%;background:#486d87;border-radius:3px;transform:translate(-50%,-50%)}#jog .cross::before{width:68%;height:5px}#jog .cross::after{width:5px;height:68%}
#welcome{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;background:#10273deb;text-align:center;padding:16px}#welcome[hidden]{display:none}#welcome h2{font-size:clamp(24px,5vw,44px);margin:0;color:#ffe092}#welcome p{margin:0;font-size:14px;line-height:1.6}#welcome button{min-width:210px}#welcome [hidden]{display:none}#welcome #progress-help{font-size:12px;max-width:440px;color:#c3d6e4}#new-player{background:#087fc9}#loading{z-index:10}
@media(pointer:coarse),(display-mode:fullscreen){
 html,body{height:100%;overflow:hidden;overscroll-behavior:none}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
 main{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;margin:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:flex;flex-direction:column;align-items:center;justify-content:center}
 header{position:absolute;top:env(safe-area-inset-top);left:env(safe-area-inset-left);right:env(safe-area-inset-right);min-height:44px;padding:4px 8px;margin:0;gap:5px;z-index:7;background:#132c40e8;flex-wrap:nowrap}header h1{font-size:15px;white-space:nowrap;margin:0}header p{display:none}.actions{width:auto;gap:4px;flex-wrap:wrap;justify-content:flex-end}header button,#difficulty,#stage-select{font-size:11px;padding:6px}.difficulty-label{font-size:0;gap:0}
 .arena{width:min(100%,calc((100dvh - 52px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*1.5));margin:44px 0 0;flex-shrink:0;aspect-ratio:3/2;border-radius:0;box-shadow:none}
 footer{position:static;min-height:0;padding:0;display:block}.controller{position:fixed;z-index:8;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));gap:0}.controller>span{display:none}#jog{width:104px;height:104px;background:#173d58bd;border-color:#aecfe6b0}#stick{width:46px;height:46px;left:27px;top:27px}#action{position:fixed;z-index:8;right:max(12px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:104px;height:84px;font-size:14px;background:#096db2df}.help .rules,.help strong,.help p{display:none}.help #notice{display:block;position:fixed;left:125px;right:125px;bottom:max(4px,env(safe-area-inset-bottom));margin:0;font-size:12px;color:#fff;text-shadow:0 1px 3px #000;z-index:8;pointer-events:none}
}
@media(pointer:coarse) and (orientation:portrait){header{flex-wrap:wrap}header .actions{width:100%;justify-content:center}.arena{width:100%;margin:0}#welcome{gap:8px}#welcome p{font-size:12px}#welcome button{padding:8px}}
:fullscreen main{width:100%;max-width:none;height:100dvh} :fullscreen .arena{max-height:calc(100dvh - 52px)}

#action{touch-action:none}

/* Browser-independent immersive mode; native fullscreen is an optional enhancement. */
body.immersive{overflow:hidden;overscroll-behavior:none}
body.immersive main{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;margin:0;padding:0;display:flex;align-items:center;justify-content:center;flex-direction:column}
body.immersive header{display:none}
body.immersive .arena{width:min(100vw,150dvh);height:auto;max-height:none;aspect-ratio:3/2;margin:0;flex-shrink:0;border-radius:0;box-shadow:none}
body.immersive footer{position:static;padding:0;min-height:0;display:block}
body.immersive .controller{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));z-index:8}
body.immersive .controller>span,body.immersive .help .rules,body.immersive .help strong,body.immersive .help p{display:none}
body.immersive #action{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:8}
body.immersive .help #notice{display:block;position:fixed;left:125px;right:125px;bottom:max(4px,env(safe-area-inset-bottom));z-index:8;margin:0;font-size:12px;color:white;text-shadow:0 1px 3px #000;pointer-events:none}
#exit-fullscreen{position:fixed;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));z-index:20;background:#132c40c9;padding:8px 12px;font-size:12px;-webkit-user-select:none;user-select:none;touch-action:manipulation}#exit-fullscreen[hidden]{display:none}

#paused{z-index:9;pointer-events:auto}.pause-card{text-align:center}.pause-card p{margin:0 0 16px}#resume{min-width:160px;background:#087fc9;font-size:18px;padding:14px 24px;touch-action:manipulation}