.touch-controls{display:grid;grid-template-columns:minmax(132px,.85fr) minmax(140px,1.15fr);gap:16px;padding:14px 12px;background:#0a131c;border:1px solid #d6a45e30;border-top:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
.touch-controls button{touch-action:none;min-width:44px;min-height:44px;padding:5px;border-radius:9px;background:linear-gradient(#243543,#14212b);border:1px solid #64809466;color:#d7e0e5;font-size:10px;font-weight:750;letter-spacing:.02em;box-shadow:0 3px 0 #03090f;transition:background .08s}
.touch-controls button.is-held{background:#d6a45e;color:#101820;border-color:#f2d19d;box-shadow:0 1px 0 #03090f;transform:translateY(2px)}
.touch-controls button:disabled{opacity:.3}
.touch-caption{display:block;font-size:9px;font-weight:750;letter-spacing:.1em;color:#8298a8;margin:1px 0 10px}
.direction-row{display:grid;grid-template-columns:repeat(3,minmax(44px,1fr));gap:4px;max-width:240px}
.direction-row button{font-size:28px;height:60px}
.direction-row button small{display:block;font-size:8px;margin-top:-10px}
.touch-actions{display:grid;grid-template-columns:repeat(3,minmax(44px,1fr));gap:5px;max-width:440px;justify-self:end;width:100%}
.touch-actions .touch-primary{grid-column:span 2;color:#edc58c;border-color:#d6a45e99;background:linear-gradient(#57402a,#34271d);font-size:13px}
.rotate-note{font-size:10px;color:#8298a8;line-height:1.5;max-width:190px;margin:10px 0 0}
.touch-help{font-size:12px;color:#a1adb7;max-width:760px;margin:18px 0}
#touch-toggle[aria-pressed=true]{border-color:#d6a45e;color:#edc58c}
.toolbar>div{flex-wrap:wrap}
.player canvas{touch-action:none}
@media(max-width:700px){
 .touch-mode .play-shell{margin-inline:-16px}
 .touch-mode .toolbar{padding-inline:16px}
 .touch-controls{gap:12px;padding:12px 8px}
 .touch-mode .launch-copy>p:not(.eyebrow){max-width:260px}
}
/* Keep the HTML controls inside fullscreen. Canvas-only fullscreen hides them. */
.play-shell:fullscreen,.expanded .play-shell{position:fixed;inset:0;z-index:100;background:#03090f;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:auto;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);margin:0}
.play-shell:fullscreen .player,.expanded .play-shell .player{width:min(100%,calc((100dvh - 56px)*16/9));flex:none}
.play-shell:fullscreen:has(.touch-controls:not([hidden])) .player,.expanded .play-shell:has(.touch-controls:not([hidden])) .player{width:min(100%,calc((100dvh - 212px)*16/9))}
.play-shell:fullscreen .touch-controls,.expanded .play-shell .touch-controls{width:100%;max-width:900px}
.play-shell:fullscreen .toolbar,.expanded .play-shell .toolbar{width:100%;padding:8px 16px;justify-content:center;border:0;flex-direction:row}
.play-shell:fullscreen .toolbar p,.expanded .play-shell .toolbar p{display:none}
@media(orientation:landscape) and (max-height:600px){
 .touch-mode.touch-playing{overflow:hidden}
 .touch-mode.touch-playing .play-shell{position:fixed;inset:0;z-index:100;background:#03090f;display:flex;flex-direction:column;align-items:center;justify-content:space-between;margin:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
 .touch-mode.touch-playing .player{width:min(100%,calc((100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*16/9));flex:none;margin:auto;margin-top:36px}
 .touch-mode.touch-playing .toolbar{position:absolute;inset:0 0 auto;height:36px;min-height:36px;padding:3px 10px;width:100%;justify-content:center;flex-direction:row;border:0}
 .touch-mode.touch-playing .toolbar p{display:none}
 .touch-mode.touch-playing .toolbar button{font-size:10px;padding:4px 10px}
 .touch-mode.touch-playing .touch-controls{position:absolute;inset:auto 0 0;width:100%;grid-template-columns:140px 155px;justify-content:space-between;align-items:end;padding:8px max(10px,env(safe-area-inset-right)) 10px max(10px,env(safe-area-inset-left));gap:14px;border:0;background:transparent;pointer-events:none}
 .touch-mode.touch-playing .touch-actions,.touch-mode.touch-playing .touch-move{pointer-events:auto;padding:5px;background:#07101bd9;border-radius:10px}
 .touch-mode.touch-playing .touch-actions{grid-template-columns:repeat(3,minmax(44px,1fr))}
 .touch-mode.touch-playing .touch-actions .touch-primary{grid-column:span 2}
 .touch-mode.touch-playing .touch-caption{margin:0 0 5px}
 .touch-mode.touch-playing .rotate-note{display:none}
 .touch-mode.touch-playing .direction-row button{height:58px}
}