/* Phones and small tablets: the control panel (.dock) is a 360px column on the left of the page. On a narrow
   screen that column used to cover the whole stage. Here it becomes a bottom sheet: closed it is a bar with
   a "Panel" button and the main action (Girar, Cantar...), open it shows everything. Pairs with
   shared/mobile-dock.js, which adds the .dock-grab button and toggles body.dock-open. Live mode (panel
   hidden) is unaffected. */
.dock-grab{ display:none; }

@media (max-width: 900px){
  body:not(.live-mode){ padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  body:not(.live-mode) .dock{
    top:auto; bottom:0; left:0; right:0; width:auto; height:auto; max-height:82vh; max-height:82dvh;
    border-right:0; border-top:1px solid rgba(255,255,255,.14); border-radius:18px 18px 0 0;
    box-shadow:0 -12px 32px rgba(0,0,0,.55);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom)); gap:12px; z-index:90;
  }
  body:not(.live-mode) .dock-grab{
    display:block; appearance:none; border:none; cursor:pointer; border-radius:12px; padding:12px 14px;
    font:inherit; font-weight:800; font-size:13px; background:#232327; color:#fff; white-space:nowrap;
  }
  /* Stages that fill the screen (Energy Break, Pokémon Race, Ruleta) stop above the closed bar. The 100dvh
     line follows the phone's collapsing address bar where it is supported. */
  body:not(.live-mode) .stage.fills-screen{
    height:calc(100vh - 132px); height:calc(100dvh - 132px - env(safe-area-inset-bottom)); min-height:var(--stage-min, 340px);
  }
  /* Closed: one row, only the panel button and the main action. */
  body:not(.live-mode):not(.dock-open) .dock{ flex-direction:row; align-items:stretch; overflow:hidden; }
  body:not(.live-mode):not(.dock-open) .dock > :not(.dock-grab):not([data-primary]){ display:none !important; }
  body:not(.live-mode):not(.dock-open) .dock > [data-primary]{ flex:1; min-width:0; }
  /* Open: the whole panel, with the toggle on top. */
  body:not(.live-mode).dock-open .dock{ overflow-y:auto; overscroll-behavior:contain; }
}

/* No hover on a touchscreen: leave the corner button that brings the panel back from live mode visible. */
@media (hover: none){
  .corner-hover{ opacity:.6; }
  /* Outside live mode the panel is already one tap away (bottom bar / left column), and the gear sat on the logo. */
  body:not(.live-mode) .corner-hover{ display:none; }
}

/* Phone held sideways (or any short window): a slimmer bar, so the stage keeps more of the little height there is. */
@media (max-width: 900px) and (max-height: 520px){
  body:not(.live-mode){ padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  body:not(.live-mode) .dock{ padding:6px 12px calc(6px + env(safe-area-inset-bottom)); gap:8px; border-radius:14px 14px 0 0; }
  body:not(.live-mode) .dock-grab{ padding:8px 12px; }
  body:not(.live-mode) .dock > [data-primary]{ padding-top:8px; padding-bottom:8px; }
  body:not(.live-mode) .stage.fills-screen{
    height:calc(100vh - 108px); height:calc(100dvh - 108px - env(safe-area-inset-bottom)); min-height:var(--stage-min, 300px);
  }
}

/* Keyboard users reach the corner gear with Tab: show it when it has focus. */
.corner-hover:focus-within{ opacity:1; }

/* iOS Safari zooms into any field under 16 px when it is focused, and does not zoom back out. */
@media (max-width: 900px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), select, textarea{ font-size:16px !important; }
}