/* One reserved utility row; panels never occupy the row's touch targets. */
#sp-hint svg { width:22px; height:22px; display:block; }
#sp-hint::before { display:none; }
#spotify-player #sp-notice { position:static; flex-basis:100%; max-width:none; padding:0; margin:0; pointer-events:none; white-space:normal; font-size:11px; line-height:1.6; }
#spotify-player #sp-notice:not(.show) { display:none; }
#sp-controls .sp-btn { font-size:0; }
#sp-controls .sp-btn::before { content:''; width:18px; height:18px; background:currentColor; mask:var(--utility-icon) center/contain no-repeat; -webkit-mask:var(--utility-icon) center/contain no-repeat; }
#sp-play { --utility-icon:var(--utility-play); }
#sp-play[aria-label="Pausa Spotify"] { --utility-icon:var(--utility-pause); }
#sp-prev { --utility-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5v14m14-14L8 12l11 7Z'/%3E%3C/svg%3E"); }
#sp-next { --utility-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5v14M5 5l11 7-11 7Z'/%3E%3C/svg%3E"); }
@media (max-width:768px), (max-width:1024px) and (max-height:500px) {
  :root {
    --mobile-floor: max(14px, env(safe-area-inset-bottom, 0px));
    --mobile-lift: 0px;
    --mobile-height: 100dvh;
    --mobile-panel-height: 0px;
    --mobile-panel-top: calc(136px + env(safe-area-inset-top, 0px));
    --mobile-row: calc(var(--mobile-floor) + var(--mobile-lift));
    --mobile-panel-bottom: calc(var(--mobile-row) + 60px);
  }
  #google-search { top:calc(12px + env(safe-area-inset-top, 0px)); left:16px; right:16px; width:auto; transform:none; height:46px; }
  #portal-tools { top:calc(72px + env(safe-area-inset-top, 0px)); right:16px; gap:10px; }
  #briefing-toggle { top:calc(72px + env(safe-area-inset-top, 0px)); left:16px; }
  body #sky-toggle, body #landing-motion-toggle, body #sp-hint {
    bottom:var(--mobile-row); top:auto; right:auto; margin:0;
    width:44px; height:44px; min-width:44px; padding:0;
    background:rgba(7,8,10,.22); z-index:22;
  }
  body #sky-toggle { left:16px; }
  body #landing-motion-toggle { left:70px; }
  body #sp-hint { left:124px; }
  body #immersion-btn {
    top:auto; right:16px; bottom:var(--mobile-row); left:auto;
    width:min(160px,calc(100vw - 200px)); min-height:44px; padding:0 10px; margin:0;
    font-size:9px; letter-spacing:.11em; color:var(--ink-soft); background:rgba(7,8,10,.14); z-index:22;
  }
  body .landing-utility::after { display:none; }
  #bottom-bar {
    left:16px; right:16px; bottom:var(--mobile-panel-bottom); transform:none;
    max-width:none; align-items:stretch; gap:0; z-index:21;
  }
  #spotify-player {
    width:100%; margin:0; padding:22px 18px; padding-top:58px;
    max-height:max(100px,calc(var(--mobile-height) - var(--mobile-panel-top) - var(--mobile-floor) - 60px)); overflow-y:auto;
    overscroll-behavior:contain; scrollbar-width:thin; border-radius:24px;
    background:rgba(7,8,10,.38); gap:16px;
  }
  #sp-info { min-width:0; flex-basis:calc(100% - 60px); }
  #sp-track { white-space:normal; overflow-wrap:anywhere; font-size:1.3rem; }
  #sp-artist { overflow-wrap:anywhere; }
  #sp-controls { gap:6px; }
  #sp-link { margin-left:auto; }
  #sp-connect, #sp-disconnect { flex-basis:100%; text-align:center; }
  #sky-panel {
    left:16px; right:16px; bottom:var(--mobile-panel-bottom); width:auto;
    max-height:max(100px,calc(var(--mobile-height) - var(--mobile-panel-top) - var(--mobile-floor) - 60px)); padding:20px;
  }
  #gallery-menu { right:16px; bottom:var(--mobile-panel-bottom); max-width:calc(100vw - 32px); }
  #gallery-menu .gallery-choice { min-height:44px; }
  .stage {
    position:fixed; top:calc(136px + env(safe-area-inset-top, 0px)); left:20px; right:20px;
    bottom:calc(var(--mobile-panel-bottom) + var(--mobile-panel-height) + 12px);
    width:auto; max-height:none; padding:12px 0; gap:28px;
    justify-content:safe center; overflow-y:auto; overscroll-behavior:contain;
  }
  .landing-launcher { width:100%; flex-shrink:0; }
  .landing-launcher[open] .medals { margin-top:20px; gap:12px; }
  .agent-composer { min-height:72px; }
  .agent-settings summary { min-height:44px; flex-wrap:wrap; }
  .agent-settings-row { flex-wrap:wrap; gap:8px; }
  .agent-settings select { max-width:100%; flex:1 1 180px; }
  body:has(#sky-panel:not([hidden])) .stage { visibility:hidden; pointer-events:none; }
  #briefing-panel { inset:calc(12px + env(safe-area-inset-top, 0px)) 12px auto; width:auto; height:calc(var(--mobile-height) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .briefing-header { display:grid; grid-template-columns:1fr 44px; gap:8px; padding:12px; }
  .briefing-header h2 { grid-column:1; grid-row:1; }
  #briefing-close { grid-column:2; grid-row:1; }
  #world-briefing-link { grid-column:1 / -1; grid-row:2; max-width:none; justify-content:center; }
  html[data-mobile-keyboard] .stage { top:calc(76px + env(safe-area-inset-top, 0px)); bottom:calc(var(--mobile-lift) + 12px); justify-content:flex-start; }
  html[data-mobile-keyboard] :is(#portal-tools,#briefing-toggle,#sky-toggle,#landing-motion-toggle,#sp-hint,#immersion-btn) { visibility:hidden; pointer-events:none; }
}
@media (max-width:1024px) and (max-height:500px) {
  :root { --mobile-panel-top:calc(72px + env(safe-area-inset-top, 0px)); }
  #google-search { left:76px; right:180px; }
  #briefing-toggle, #portal-tools { top:calc(12px + env(safe-area-inset-top, 0px)); }
  .stage { top:calc(72px + env(safe-area-inset-top, 0px)); gap:16px; }
  body:has(#spotify-player.sp-shown) .stage { visibility:hidden; pointer-events:none; }
}
@media (max-width:400px) and (max-height:500px) {
  :root { --mobile-panel-top:calc(128px + env(safe-area-inset-top, 0px)); }
  #google-search { left:16px; right:16px; }
  #briefing-toggle, #portal-tools { top:calc(72px + env(safe-area-inset-top, 0px)); }
  .stage { top:calc(128px + env(safe-area-inset-top, 0px)); }
}