/* Input capabilities choose ergonomics automatically; width/height own layout. */
.screen-controls{display:none!important}
:root[data-display-mode="touch"],:root[data-display-mode="tv"]{font-size:18px}
:root:is([data-display-mode="touch"],[data-display-mode="tv"]) :is(.platform-nav a,.discover-shortcuts a,.dashboard-space,.profile-action,.stage-tool,.feedback-btn,.theme-btn,.hub-theme-btn,.spotlight-play,.spotlight-tune){min-height:52px}
:root:is([data-display-mode="touch"],[data-display-mode="tv"]) :is(.bar .ctrls button,.stage-ctrls button,.stage-close,.stage-dl){min-width:52px;min-height:52px}
:root[data-display-mode="tv"] :focus{outline:3px solid var(--a2,#61e8ff)!important;outline-offset:4px}
:root[data-display-mode="tv"] :is(.thumb .play,.card-play,.shelf-play){opacity:1}
:root[data-display-mode="tv"] :is(.card,.world-card,.stage-pet,.stage-disc)::before{animation:none!important}
:root[data-display-mode="tv"] :is(.stage-pet,.world-orb,.world-rays){animation:none!important}
:root[data-display-mode="tv"] :is(header,.bar,.theme-menu,.hub-theme-menu){backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
:root[data-display-mode="tv"] body::after{opacity:.035}
:root[data-display-mode="tv"] body::before{animation:none!important}
@media(hover:none){.thumb .play{opacity:1}.card:active .thumb .play{background:rgba(0,0,0,.42)}}
/* Low landscape displays: prioritize metadata and transport above decoration. */
@media(min-width:640px) and (max-height:579px){
  #stage.stage{display:grid;grid-template-columns:minmax(100px,.65fr) minmax(0,1.5fr);grid-template-areas:"art deck";grid-template-rows:auto;align-content:start;align-items:center;gap:12px 24px;padding:80px 20px 24px;overflow:auto;height:100vh;height:100dvh;min-height:0}
  #stage .stage-art{grid-area:art;width:min(22vw,170px);justify-self:center}
  #stage .stage-meta{grid-area:meta;min-width:0}
  #stage .stage-meta .st{font-size:clamp(1.2rem,3vw,1.8rem);line-height:1.2}
  #stage .stage-seek{grid-area:seek;width:100%;margin:0}
  #stage .stage-ctrls{grid-area:controls;justify-content:center;gap:16px}
  #stage .stage-feedback{grid-area:feedback;flex-wrap:wrap;justify-content:center}
  #stage .stage-intelligence{grid-area:intelligence;flex-wrap:wrap}
  #stage .why-panel{grid-area:why;justify-self:center}
  #stage .playback-recovery{grid-area:recovery}
  #stage .stage-run-hud,#stage .stage-pet{display:none}
  #stage .queue-drawer{position:fixed}
  #stage .stage-close,#stage .stage-dl{top:8px}
}
@media(min-width:1600px){:root[data-display-mode="tv"]{font-size:22px}:root[data-display-mode="tv"] :is(.shell,#appMain){max-width:1600px;margin-inline:auto}}
@media(prefers-reduced-motion:reduce){:root[data-display-mode] *{scroll-behavior:auto!important}}
:root:is([data-display-mode="touch"],[data-display-mode="tv"]) :is(.evp-btn,.evp-menu>button){min-width:48px;min-height:48px}
:root[data-display-mode="tv"] .evp-chrome{opacity:1!important;pointer-events:auto!important}
:root:is([data-display-mode="touch"],[data-display-mode="tv"]) .shelf-row .card button{min-width:44px;min-height:44px}
.watch-top-tools,.share-top-tools{flex-wrap:wrap}
/* Older embedded engines may understand variables but not modern color mixing. */
@supports not (background:color-mix(in srgb,black,white)){
  :root{--surface-1:var(--bg2,#101127);--surface-2:var(--bg2,#101127);--surface-3:var(--bg2,#101127);--surface-sunken:var(--bg,#050713);--glass:var(--bg2,#101127);--glass-hi:rgba(255,255,255,.1);--line-soft:rgba(255,255,255,.15);--line-strong:var(--a2,#61e8ff);--ring:rgba(97,232,255,.5);--world-material:var(--bg2,#101127);--shadow-sm:0 6px 16px #0004;--shadow-md:0 12px 32px #0005;--shadow-lg:0 20px 48px #0006;--glow-shadow:0 0 0 transparent}
  .theme-menu,.hub-theme-menu,.dashboard-space,.dashboard-owner,.dashboard-recent{background:var(--bg2,#101127);color:var(--fg,#fff)}
  .theme-menu button.on,.hub-theme-menu button.on{border-color:var(--a2,#61e8ff);background:var(--bg,#050713);color:var(--fg,#fff)}
}