/* Rhythm lane deck: canvas track and touch keys share measured geometry. */
body[data-mode=rhythm].playing{height:100dvh;min-height:0;margin:0;padding:0;overflow:hidden;background:#0b1524}
body[data-mode=rhythm].playing>header,body[data-mode=rhythm].playing>.site-footer{display:none}
body[data-mode=rhythm] .stage canvas{aspect-ratio:auto!important}
body[data-mode=rhythm] .menu-panel{max-width:760px}
body[data-mode=rhythm] #play,body[data-mode=rhythm] .play-top button{color:#f5e9ce}
body[data-mode=rhythm] .play-top button{border:1px solid #bdcec13b;background:#ffffff07}
body[data-mode=rhythm] .hud strong,body[data-mode=rhythm] .play-top h1{color:#f5e9ce}
body[data-mode=rhythm] .hud small,body[data-mode=rhythm] .play-top small{color:#a9c0c3}
body[data-mode=rhythm] #play{position:relative;width:100%;max-width:1440px;height:100dvh;max-height:100dvh;margin:0 auto;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);display:flex;flex-direction:column;gap:0;overflow:hidden}
body[data-mode=rhythm] .play-top{height:50px;min-height:50px;flex:none;padding:5px 16px;border-bottom:1px solid #c7d2c51f;background:#101f2c}
body[data-mode=rhythm] .play-top h1{font-size:16px;margin:0;line-height:1.3}body[data-mode=rhythm] .play-top small{font-size:9px}
body[data-mode=rhythm] .play-top button{height:36px;padding:5px 12px;border-radius:10px;font-size:12px}
body[data-mode=rhythm] #mission,body[data-mode=rhythm] .record,body[data-mode=rhythm] .flight-dashboard{display:none!important}
body[data-mode=rhythm] .hud{position:static;flex:none;height:44px;min-height:44px;padding:4px 20px;background:#112333;border:0;display:flex;justify-content:space-between}
body[data-mode=rhythm] .hud strong{font-size:20px;line-height:1.1}body[data-mode=rhythm] .hud small{font-size:9px}
body[data-mode=rhythm] #play-coach{position:relative;inset:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;flex:none;height:32px;min-height:32px;padding:5px 20px;background:#0e202e;border:0;border-radius:0;transform:none}
body[data-mode=rhythm] .solo-gauges{width:110px;flex:none}body[data-mode=rhythm] #energy-label{display:none}body[data-mode=rhythm] #coach-cue{font-size:11px;color:#e3cc95}body[data-mode=rhythm] #coach-detail{font-size:10px;margin:0;color:#a6b8bc}body[data-mode=rhythm] .solo-journey{height:2px;margin-top:4px}
body[data-mode=rhythm] .stage{position:relative;flex:1;min-height:0;height:auto;aspect-ratio:auto;width:100%;border:0;border-radius:0;margin:0;overflow:hidden}
body[data-mode=rhythm] #canvas{width:100%;height:100%;max-height:none;aspect-ratio:auto;display:block}
body[data-mode=rhythm] #controls{position:relative;inset:auto;flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 0 0 var(--lane-left,34%);width:var(--lane-width,63%);height:86px;min-height:86px;padding:6px 0 8px;background:#0b1524;border:0;transform:none}
body[data-mode=rhythm] #controls button{position:relative;inset:auto;min-width:0;width:auto;height:100%;margin:0 5px;padding:5px;border-radius:12px;border:1px solid color-mix(in srgb,var(--drum) 55%,transparent);border-bottom:4px solid color-mix(in srgb,var(--drum) 45%,#122330);background:linear-gradient(165deg,color-mix(in srgb,var(--drum) 22%,#142335),#102232);box-shadow:inset 0 1px #ffffff1a;color:var(--drum);font-size:12px;display:grid;place-content:center;gap:3px;touch-action:none}
body[data-mode=rhythm] #controls button:nth-child(1){--drum:#f9b654}body[data-mode=rhythm] #controls button:nth-child(2){--drum:#6de1cf}body[data-mode=rhythm] #controls button:nth-child(3){--drum:#bc9aff}body[data-mode=rhythm] #controls button:nth-child(4){--drum:#ff8da6}
body[data-mode=rhythm] #controls .drum-glyph{display:none}body[data-mode=rhythm] #controls b{font-size:18px;line-height:1}body[data-mode=rhythm] #controls span{font-size:10px;opacity:.75}
body[data-mode=rhythm] #controls button.held,body[data-mode=rhythm] #controls button.tap-glow{background:linear-gradient(color-mix(in srgb,var(--drum) 65%,#fff),var(--drum));color:#15242f;box-shadow:0 0 24px color-mix(in srgb,var(--drum) 40%,transparent);transform:translateY(2px)}
body[data-mode=rhythm] #tip{flex:none;height:24px;min-height:24px;line-height:24px;padding:0;margin:0;text-align:center;font-size:10px;color:#91a8b3}
body[data-mode=rhythm] #overlay{padding:20px;display:grid;place-items:center;background:#07131cc9;overflow:auto}
body[data-mode=rhythm] .menu-panel{width:min(760px,100%);max-height:100%;padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:18px 30px;align-items:center;background:linear-gradient(145deg,#203541f5,#10232ff5);border:1px solid #c5c7a43b;border-radius:24px;box-shadow:0 18px 80px #030d1780;overflow:auto}
body[data-mode=rhythm] .menu-heading{grid-column:1;grid-row:1/3}body[data-mode=rhythm] #modal-title{font-size:clamp(24px,3vw,38px);line-height:1.2;margin:12px 0;letter-spacing:-1px}body[data-mode=rhythm] #modal-desc{font-size:12px;line-height:1.8;white-space:pre-line;margin:0;color:#b5caca}body[data-mode=rhythm] #modal-tag{font-size:10px;color:#d4bc84}
body[data-mode=rhythm] #settings{grid-column:2;margin:0}body[data-mode=rhythm] .choice-group{margin:0 0 14px}body[data-mode=rhythm] .choice>span{padding:10px}body[data-mode=rhythm] .choice small{font-size:9px}body[data-mode=rhythm] .section-label{font-size:11px}body[data-mode=rhythm] .section-label span{display:none}body[data-mode=rhythm] .journey{margin-top:10px}body[data-mode=rhythm] #route-map{gap:5px;padding:0;margin:8px 0}body[data-mode=rhythm] #route-map button{min-width:0;height:36px;padding:6px;border-radius:8px}body[data-mode=rhythm] #route-preview{margin:0;padding:8px 0;background:none;border:0}body[data-mode=rhythm] #route-preview b{font-size:13px}body[data-mode=rhythm] #route-preview small{font-size:10px}
body[data-mode=rhythm] #start{grid-column:2;margin:0;min-height:48px;padding:10px 15px;font-size:15px;border-radius:12px}body[data-mode=rhythm] #again{grid-column:2;margin:0}body[data-mode=rhythm] #game-sound{grid-column:1;grid-row:3;margin:0;justify-self:start;font-size:11px;padding:5px;background:none;border:0}
body[data-mode=rhythm][data-phase=ready] #controls,body[data-mode=rhythm][data-phase=loading] #controls,body[data-mode=rhythm][data-phase=result] #controls,body[data-mode=rhythm][data-phase=paused] #controls{display:none}
body[data-mode=rhythm]:not([data-phase=playing]) #tip{display:none}
@media(max-width:650px){body[data-mode=rhythm] .play-top{padding-inline:10px;height:46px;min-height:46px}body[data-mode=rhythm] .play-top h1{font-size:13px}body[data-mode=rhythm] .play-top button{font-size:10px;padding-inline:8px}body[data-mode=rhythm] .hud{height:40px;min-height:40px;padding-inline:13px}body[data-mode=rhythm] .hud strong{font-size:17px}body[data-mode=rhythm] #play-coach{padding-inline:13px;gap:8px;height:28px;min-height:28px}body[data-mode=rhythm] .solo-gauges{width:72px}body[data-mode=rhythm] #coach-detail{font-size:8px}body[data-mode=rhythm] #coach-cue{font-size:9px}body[data-mode=rhythm] #controls{height:84px;min-height:84px}body[data-mode=rhythm] #controls button{margin-inline:3px;border-radius:10px}body[data-mode=rhythm] #tip{height:22px;min-height:22px;font-size:0}body[data-mode=rhythm] #tip:after{content:'같은 색 선에 닿으면 터치 · 긴 음은 끝까지';font-size:10px}body[data-mode=rhythm] #overlay{padding:14px}body[data-mode=rhythm] .menu-panel{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:22px;max-width:400px}body[data-mode=rhythm] #modal-title{font-size:28px;margin:9px 0}body[data-mode=rhythm] #modal-desc{font-size:11px}body[data-mode=rhythm] .choice-group{margin-bottom:8px}body[data-mode=rhythm] #game-sound{align-self:center}}
@media(orientation:landscape) and (max-height:540px){body[data-mode=rhythm] .play-top{height:40px;min-height:40px}body[data-mode=rhythm] .hud{height:34px;min-height:34px}body[data-mode=rhythm] #play-coach{display:none}body[data-mode=rhythm] #controls{height:62px;min-height:62px}body[data-mode=rhythm] #tip{display:none}body[data-mode=rhythm] .menu-panel{padding:16px 24px;gap:8px 24px}body[data-mode=rhythm] #overlay{padding:10px}body[data-mode=rhythm] #modal-title{font-size:26px}body[data-mode=rhythm] .menu-heading{grid-row:1/3}body[data-mode=rhythm] #game-sound{grid-row:3}body[data-mode=rhythm] #start{min-height:42px}body[data-mode=rhythm] #route-preview{padding:4px 0}}
/* Action game: keyboard gets the full arena; touch keeps an inset thumb dock. */
.goblin-game main{max-width:1600px}.goblin-game .hud{background:#132831}.goblin-game .power{background:#10252e}.goblin-game .menu-panel{box-shadow:0 20px 70px #030d1870}
.goblin-game .combat-cue{position:absolute;top:16px;left:50%;transform:translateX(-50%);padding:7px 14px;border-radius:20px;background:#12232bd9;color:#f5d28b;font-size:12px;pointer-events:none;white-space:nowrap}.goblin-game .combat-cue:empty{display:none}
.goblin-game .power.charged #energy{background:linear-gradient(90deg,#83dcd4,#ffdf9c);box-shadow:0 0 12px #b8ffe3}.goblin-game #blast-button.ready{border-color:#ffe4a1;box-shadow:0 0 18px #f1da8433,inset 0 0 0 3px #f1da8415}
@media(min-width:900px) and (hover:hover) and (pointer:fine){.goblin-game main{grid-template-rows:minmax(0,1fr) 30px}.goblin-game .controls{display:none}.goblin-game .foot{display:block;font-size:11px;margin:0;line-height:30px;text-align:center;background:#10232e;color:#a7bfbb;padding:0 8px}.goblin-game .foot span{display:none}}
@media(max-height:580px) and (min-width:651px){.goblin-game #overlay .menu-panel{padding:16px 22px}.goblin-game #guide{display:none}.goblin-game #overlay .note{display:none}}

/* Own the shared IDs as well as classes: legacy sheets use ID selectors. */
body[data-mode=rhythm] #home,body[data-mode=rhythm] #pause{position:static;height:36px;min-height:36px;padding:5px 12px;border:1px solid #bdcec13b;border-radius:10px;background:#142b38;color:#f5e9ce;opacity:1}
body[data-mode=rhythm] #pause:disabled{opacity:.45}
body[data-mode=rhythm] #play-coach{margin:0}
body[data-mode=rhythm] #overlay .menu-panel #start{margin:0}
body[data-mode=rhythm] #overlay .menu-panel .menu-heading{margin:0;padding:0;border:0}
body[data-mode=rhythm] #settings{gap:8px}
body[data-mode=rhythm] #route-map{grid-template-columns:repeat(5,minmax(0,1fr))!important}
body[data-mode=rhythm] #controls button{min-height:0}
@media(max-width:650px) and (max-height:720px){body[data-mode=rhythm] #overlay{padding:10px}body[data-mode=rhythm] #overlay .menu-panel{padding:16px;gap:10px}body[data-mode=rhythm] #overlay .menu-panel h2{font-size:24px;margin:6px 0}body[data-mode=rhythm] #overlay .menu-panel p{font-size:10px;line-height:1.5}body[data-mode=rhythm] #settings{gap:6px}body[data-mode=rhythm] .choice-group legend{margin-bottom:5px}body[data-mode=rhythm] .journey{margin-top:5px}body[data-mode=rhythm] #route-preview{padding:4px 0;min-height:0}body[data-mode=rhythm] #game-sound{font-size:10px;padding:2px}}