/* The desktop HUD retains its layout; compact views get a touch control sheet. */
.control-panel{display:contents}
.touch-controls{display:none}
.restart-controls,.sheet-heading{display:contents}
.scene-nav-arrow{display:none}
html{overscroll-behavior:none;-webkit-text-size-adjust:100%}
button,summary{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

@media (max-width:1024px), (pointer:coarse) and (max-width:1366px){
  body{overflow:hidden;overscroll-behavior:none}
  .shell{--page-gutter:12px;height:100dvh;min-height:0;padding:calc(10px + env(safe-area-inset-top)) var(--page-gutter) calc(10px + env(safe-area-inset-bottom));gap:0}
  main{padding-top:48px;padding-bottom:12px}
  .scene-selector{top:0;max-width:calc(100% - 24px)}
  .scene-nav{top:calc((var(--scene-frame-top,60px) + 100dvh - var(--scene-frame-bottom,180px))/2);width:40px;height:40px;aspect-ratio:auto;display:grid;place-items:center;border-radius:999px;background:var(--selected);color:var(--ink);transform:translateY(-50%);z-index:3}
  .scene-prev{left:calc(var(--scene-frame-left,0px) + max(10px,env(safe-area-inset-left)));right:auto}
  .scene-next{right:calc(var(--scene-frame-right,0px) + max(10px,env(safe-area-inset-right)));left:auto}
  .scene-nav img,.scene-nav span{display:none}
  .scene-nav-arrow{display:block;width:20px;height:20px}
  .scene-nav::before{content:"";position:absolute;inset:-3px}
  .scene-nav:active{background:var(--hover)}
  .control-panel{position:relative;z-index:20;flex-shrink:0;align-self:center;display:grid;grid-template-columns:minmax(0,1fr) auto 40px;gap:12px 8px;width:min(100%,720px);padding:16px;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);border-radius:26px;background:color-mix(in srgb,var(--well) 92%,transparent);box-shadow:0 -6px 30px color-mix(in srgb,var(--shadow) 40%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);isolation:isolate}
  .control-panel footer,.control-panel .controls,.control-panel .hud-row,.control-panel .utility-controls{display:contents}
  .current-game-name{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .sheet-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;grid-row:1;grid-column:1 / -1;min-width:0}
  .control-panel .scene-selector.t-tabs{position:relative;left:auto;top:auto;transform:none;flex:0 1 auto;min-width:0;max-width:100%;height:38px;padding:3px}
  .control-panel .scene-tabs{display:none}
  .control-panel .scene-overflow-wrap{min-width:0;max-width:100%}
  .control-panel .scene-overflow.t-tab{height:30px;min-width:0;max-width:100%;padding:0 10px;gap:8px;font-size:12px}
  .control-panel .scene-overflow span{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .control-panel .scene-overflow svg{flex-shrink:0}
  .control-panel .scene-selector>.t-tabs-pill{height:30px}
  .mode-tabs{--segment-height:38px;flex-shrink:0;height:38px}
  .mode-tabs button{height:30px;padding-inline:8px;font-size:11px;gap:5px}
  .mode-tabs svg{display:block;width:13px;height:13px}
  .mode-tabs>.t-tabs-pill{height:30px}
  .scene-menu[data-compact=true]{position:fixed;z-index:60;right:auto;translate:none;transform-origin:bottom left;max-width:calc(100vw - 24px);overscroll-behavior:contain}
  .game-hud,.demo-controls{grid-row:2;grid-column:1 / -1;min-height:24px}
  .game-hud{gap:24px}
  .vital>svg{height:14px;width:14px}
  .meter{height:5px}
  .demo-controls{gap:8px}
  .timeline{max-width:none;gap:10px}
  .time{display:block;font-size:10px;min-width:64px}
  input[type=range]{height:28px}
  input[type=range]::-webkit-slider-thumb{height:12px;width:12px;margin-top:-5px}
  input[type=range]::-moz-range-thumb{height:12px;width:12px}
  .speed{min-width:40px;min-height:40px}
  .restart-controls{display:flex;align-items:center;gap:6px;grid-row:4;grid-column:1;min-width:0;height:40px}
  #restart{order:-1;flex-shrink:0}
  #play{flex-shrink:0}
  .zoom-controls{--segment-height:40px;grid-row:4;grid-column:2;justify-self:end;height:40px}
  .zoom-controls button{height:32px;width:32px}
  .zoom-controls .zoom-reset{width:46px}
  .key-help{grid-row:4;grid-column:3;align-self:center}
  .icon-button{width:40px;height:40px}
  .icon-button::before,.zoom-controls button::before{content:"";position:absolute;inset:-2px}
  .icon-button,.zoom-controls button{position:relative}
  .key-map{bottom:52px;right:0;max-height:min(520px,calc(100dvh - 100px));max-width:calc(100vw - 48px);white-space:normal}
  .key-map kbd{white-space:nowrap}
  .key-hint{display:none!important}
  .game-status{margin:0;min-height:0;min-width:0;font-size:10px;line-height:14px;text-align:left;white-space:nowrap}
  .game-status:empty{display:none}
  .touch-controls{grid-row:3;grid-column:1 / -1;display:grid;grid-template-columns:132px minmax(0,1fr);align-items:center;gap:18px;padding:2px 0 4px;touch-action:none}
  .touch-dpad{display:grid;grid-template:repeat(3,44px) / repeat(3,44px);touch-action:none}
  .direction-key[data-direction=up]{grid-area:1 / 2}
  .direction-key[data-direction=left]{grid-area:2 / 1}
  .direction-key[data-direction=right]{grid-area:2 / 3}
  .direction-key[data-direction=down]{grid-area:3 / 2}
  .dpad-center{grid-area:2 / 2;display:grid;place-items:center;color:var(--muted);opacity:.35;font-size:18px}
  .touch-actions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 6px}
  .touch-key{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;padding:8px 3px;border:1px solid var(--line);border-bottom-color:var(--key-edge);border-radius:9px;background:var(--key);box-shadow:0 2px 0 var(--key-edge),inset 0 -1px 0 var(--panel);color:var(--ink);touch-action:none;-webkit-tap-highlight-color:transparent;transition:transform 100ms var(--ui-ease),background-color 100ms ease,box-shadow 100ms ease}
  .touch-key::before{content:"";position:absolute;inset:-2px}
  .touch-key.is-pressed,.touch-key:active{transform:translateY(2px);background:var(--hover);box-shadow:0 0 0 var(--key-edge),inset 0 1px 2px var(--shadow)}
  .touch-key:focus-visible{outline-offset:3px}
  .direction-key{margin:2px;font:19px ui-monospace,SFMono-Regular,Menlo,monospace}
  .action-key{grid-column:span 2;min-height:80px}
  .wide-key{grid-column:span 3;min-height:50px}
  .touch-key-code{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;line-height:14px}
  .touch-key-label{font:10px/1.2 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;opacity:.8;overflow-wrap:anywhere;text-align:center}
  .touch-key[aria-disabled=true]{background:color-mix(in srgb,var(--key) 55%,var(--well));color:var(--muted)}
  #touch-special-cooldown{display:block;min-height:20px;font:8px/10px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);max-width:100%;font-variant-numeric:tabular-nums}
  @media (hover:hover) and (pointer:fine){.scene-nav:hover img{opacity:.55}.touch-key:hover{background:var(--hover)}}
}
@media (min-width:600px) and (max-width:1024px), (min-width:600px) and (pointer:coarse) and (max-width:1366px){
  .control-panel{padding:18px 22px;column-gap:12px}
  .touch-controls{grid-template-columns:144px minmax(0,330px);justify-content:space-between;gap:32px}
  .touch-dpad{grid-template:repeat(3,48px) / repeat(3,48px)}
  .action-key{min-height:80px}.wide-key{min-height:54px}
  .touch-key-label{font-size:11px}
}
@media (max-width:390px){
  .game-status{font-size:9px;letter-spacing:-.15px}
  .zoom-controls button{width:28px}
  .zoom-controls .zoom-reset{width:42px}
}
@media (max-width:360px){
  .shell{--page-gutter:8px}
  .control-panel{padding:12px;gap:10px 4px;border-radius:22px;grid-template-columns:minmax(0,1fr) auto 38px}
  .restart-controls{gap:4px}
  .zoom-controls button{width:24px}
  .zoom-controls .zoom-reset{width:36px}
  .current-game-name{font-size:13px}
  .mode-tabs button{padding-inline:8px}
  .touch-controls{grid-template-columns:120px minmax(0,1fr);gap:4px}
  .touch-dpad{grid-template:repeat(3,40px) / repeat(3,40px)}
  .direction-key{margin:0}
  .touch-actions{gap:6px 4px}
  .touch-key-label{font-size:9px}
  .time{display:none}
}
@media (max-height:560px) and (min-width:600px) and (max-width:1024px), (max-height:560px) and (min-width:600px) and (pointer:coarse) and (max-width:1366px){
  .control-panel{position:absolute;right:calc(10px + env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom));width:min(47vw,440px);padding:12px;gap:8px;max-height:calc(100dvh - 20px);overflow-y:auto;overscroll-behavior:contain}
  main{margin-right:min(48vw,460px);padding-top:42px;padding-bottom:12px}
  .scene-selector{max-width:calc(100% - 16px)}
  .touch-controls{grid-template-columns:120px minmax(0,1fr);gap:12px}
  .touch-dpad{grid-template:repeat(3,40px) / repeat(3,40px)}
  .direction-key{margin:0}
  .action-key{min-height:76px}.wide-key{min-height:46px}
  .touch-key-label{font-size:9px}
  .scene-nav span{font-size:9px}
}
@media (prefers-reduced-transparency:reduce){.control-panel{background:var(--well);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.touch-key{transition:none}.touch-key.is-pressed,.touch-key:active{transform:none}}

/* Shared branding and repository link stay above the full-page scene camera. */
.site-header{--header-control-height:32px;position:absolute;z-index:40;top:5px;left:var(--page-gutter);right:var(--page-gutter);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;pointer-events:auto}
.site-brand{min-width:0}
.site-name{color:var(--on-scene);text-decoration:none;font-size:15px;line-height:20px;font-weight:650;letter-spacing:-.3px}
.site-brand p{margin:3px 0 0;color:var(--on-scene);font-size:10px;line-height:14px;white-space:nowrap}
.site-header .scene-selector.t-tabs{position:relative;top:auto;left:auto;transform:none;justify-self:center;max-width:100%;height:var(--header-control-height);margin:0}
.github-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--header-control-height);padding:0 13px;border-radius:999px;background:var(--selected);color:var(--ink);text-decoration:none;font-size:12px;font-weight:550;white-space:nowrap;transition:background-color 120ms ease,color 120ms ease}
.github-link svg{width:15px;height:15px;flex:none}
.github-link .external-link-icon{width:13px;height:13px;margin-left:1px}
.site-links{display:flex;align-items:center;justify-self:end;gap:8px}
.youtube-trigger{display:grid;place-items:center;flex:none;width:var(--header-control-height);height:var(--header-control-height);padding:0;border:0;border-radius:999px;background:var(--selected);color:var(--ink);transition:background-color 120ms ease,color 120ms ease}
.youtube-trigger svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.youtube-trigger:hover{color:var(--scene-accent)}}
@media (hover:hover) and (pointer:fine){.github-link:hover{background:var(--selected);color:var(--scene-accent)}}
@media (min-width:641px){main{padding-top:62px}}
@media (max-width:900px){.site-header{gap:12px}.site-name{font-size:14px}.github-link{padding-inline:10px}}
@media (max-width:640px){
  main{padding-top:100px}
  .site-header{--header-control-height:40px;top:0;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px}
  .site-brand{grid-column:1 / -1}
  .site-header .scene-selector.t-tabs{justify-self:start;width:max-content;max-width:100%}
  .site-header .scene-overflow{min-width:0;max-width:calc(100vw - 146px);height:32px;gap:12px;padding-inline:12px}
  .site-header .scene-selector>.t-tabs-pill{height:32px}
  .site-header .scene-tabs{display:none}
  .github-link{font-size:11px;padding-inline:12px}
}

@media (max-height:560px) and (min-width:641px) and (max-width:1024px), (max-height:560px) and (min-width:641px) and (pointer:coarse) and (max-width:1366px){
  .site-header{position:fixed;top:calc(10px + env(safe-area-inset-top));left:12px;right:12px}
  .control-panel{max-height:calc(100dvh - 82px)}
}

/* Compact navigation belongs to the controller; keep only branding above the scene. */
@media (max-width:1024px), (pointer:coarse) and (max-width:1366px){
  main{padding-top:52px;padding-bottom:8px}
  .site-header{grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start}
  .site-brand{grid-column:auto}
  .site-brand p{white-space:normal;max-width:40ch}
  .site-header .site-links{--header-control-height:32px;margin-top:2px}
  .control-panel{z-index:45}
}