/* Phone layout (portrait, ≤700px): one full-screen view at a time instead of stacked floating panels.
   The bottom tab bar picks the view (3D · 레이더 · 스트립 · 무전 · 더보기); the command menu is a sheet above it.
   app.js keeps the view in .game-stage[data-mobile-base] and the overlay in [data-mobile-panel]. */
.mobile-tabs { display:none; }
/* Touch drags and pinches on the radar belong to the radar (pan/zoom), not to page scrolling. */
#scope { touch-action:none; }

@media (max-width:700px) {
  :root {
    --m-safe-top:env(safe-area-inset-top,0px);
    --m-safe-bottom:env(safe-area-inset-bottom,0px);
    --m-head:88px;
    --m-top:calc(var(--m-safe-top) + var(--m-head));
    --m-tabbar:58px;
    --m-bottom:calc(var(--m-tabbar) + var(--m-safe-bottom));
    --dock-height:var(--m-bottom);
  }

  /* Header: brand · clock · score on top, seat selectors below, play button pinned right. */
  .app-header { position:fixed; top:0; left:0; right:0; z-index:30; height:var(--m-top); padding:calc(var(--m-safe-top) + 6px) 8px 6px; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:36px 36px; gap:6px; background:var(--panel-2); border-bottom:1px solid var(--line); box-shadow:0 6px 18px rgba(0,0,0,.28); }
  .app-header .brand { grid-column:1; grid-row:1; min-height:36px; padding:0 8px; }
  .app-header .brand h1 { display:none; }
  .app-header .status-bar { grid-column:2; grid-row:1; position:static; min-height:36px; margin:0 98px 0 0; padding:0 10px; gap:10px; justify-content:flex-start; }
  .app-header .seat-controls { grid-column:1/-1; grid-row:2; position:static; min-height:36px; padding:0; gap:6px; background:none; border:0; box-shadow:none; }
  .app-header .seat-controls .seat-caption { display:none; }
  .app-header .seat-controls select { min-height:36px; font-size:16px; }
  .app-header #connection,.app-header #sim-status { display:none; }
  .app-header #clock { font-size:18px; min-width:0; }
  .app-header .scoreboard { margin-left:auto; gap:8px; white-space:nowrap; }
  /* Live sessions: the remaining time sits under the clock instead of pushing it off the narrow header. */
  .app-header .status-bar:has(#live-remaining:not([hidden])) { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; align-content:center; column-gap:8px; row-gap:0; }
  .app-header .status-bar:has(#live-remaining:not([hidden])) #clock { grid-column:1; grid-row:1; font-size:16px; line-height:18px; }
  .app-header .status-bar:has(#live-remaining:not([hidden])) .live-remaining { grid-column:1; grid-row:2; padding:0; border:0; font-size:10px; line-height:12px; }
  .app-header .status-bar:has(#live-remaining:not([hidden])) .scoreboard { grid-column:2; grid-row:1/3; align-self:center; justify-self:end; }

  /* The dock dissolves: play joins the header, cameras float over the 3D view, utilities live under 더보기. */
  .game-dock { display:contents; }
  .game-dock .playback { position:fixed; z-index:31; top:calc(var(--m-safe-top) + 6px); right:8px; margin:0; padding:0; border:0; }
  .game-dock #play { min-width:88px; min-height:36px; padding:6px 12px; font-size:13px; }

  .game-dock .camera-controls { position:fixed; z-index:14; left:8px; right:8px; bottom:calc(var(--m-bottom) + 8px); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; padding:4px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-3); box-shadow:var(--shadow); }
  .game-dock .camera-controls button { min-height:44px; padding:4px 2px; font-size:11px; justify-content:center; flex-direction:column; gap:2px; }
  .game-stage:not([data-mobile-base="3d"]) .game-dock .camera-controls { display:none; }

  .game-dock .utility-controls { display:none; }
  .game-stage[data-mobile-more] .game-dock .utility-controls,
  .game-stage[data-mobile-panel="settings"] .game-dock .utility-controls,
  .game-stage[data-mobile-panel="multiplayer"] .game-dock .utility-controls {
    position:fixed; z-index:33; left:0; right:0; bottom:var(--m-bottom); display:grid; grid-template-columns:1fr 1fr; gap:8px; width:auto; margin:0; padding:12px; background:var(--panel-2); border-top:1px solid var(--line); border-radius:var(--r-3) var(--r-3) 0 0; box-shadow:0 -10px 24px rgba(0,0,0,.35);
  }
  .game-dock .utility-controls>* { min-height:48px; }
  .game-dock .utility-controls .chart-link,.game-dock .utility-controls .dock-drawer>summary,.game-dock .utility-controls .help-button { display:flex; align-items:center; justify-content:center; min-height:48px; padding:8px; font-size:14px; border:1px solid var(--line); border-radius:var(--r-2); background:var(--control); }
  .game-dock .utility-controls .drawer-content { position:fixed; top:var(--m-top); bottom:var(--m-bottom); left:0; right:0; width:auto; max-height:none; border-radius:0; z-index:34; }
  .help-panel { position:fixed; top:var(--m-top); bottom:var(--m-bottom); left:0; right:0; width:auto; max-height:none; overflow:auto; border-radius:0; z-index:34; }

  /* Scene captions: 3D view only, one line; attribution stays reachable as a short line above the cameras. */
  .scene-caption { top:calc(var(--m-top) + 6px); left:8px; right:8px; width:auto; max-width:none; }
  .scene-caption #model-load-status,.scene-caption #scene-hint { display:none; }
  .scene-caption #environment-attribution { position:fixed; left:8px; right:8px; bottom:calc(var(--m-bottom) + 64px); margin:0; font-size:10px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.75; }
  .game-stage:not([data-mobile-base="3d"]) .scene-caption { display:none; }

  /* Full-screen base views. */
  .game-stage[data-mobile-base] :is(#radar-panel,#traffic-panel,#radio-panel):not([open]) { display:none; }
  .game-stage[data-mobile-base="radar-panel"] #radar-panel,
  .game-stage[data-mobile-base="traffic-panel"] #traffic-panel,
  .game-stage[data-mobile-base="radio-panel"] #radio-panel {
    position:fixed!important; top:var(--m-top)!important; bottom:var(--m-bottom)!important; left:0!important; right:0!important;
    width:auto!important; max-width:none!important; height:auto!important; max-height:none!important; margin:0;
    border-radius:0; border-left:0; border-right:0; overflow:auto; overscroll-behavior:contain; z-index:12; background:var(--panel-2);
  }
  .game-stage[data-mobile-base] :is(#radar-panel,#traffic-panel,#radio-panel)>.panel-title { min-height:40px; padding:6px 12px; cursor:default; }
  .game-stage[data-mobile-base] :is(#radar-panel,#traffic-panel,#radio-panel)>.panel-title .panel-toggle { display:none; }

  /* Radar: one scrolling tool row each, the scope fills the rest of the screen. */
  .game-stage[data-mobile-base="radar-panel"] #radar-panel { display:flex; flex-direction:column; overflow:hidden; }
  .game-stage[data-mobile-base="radar-panel"] #radar-panel .scope-content { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
  #radar-panel :is(.scope-toolbar,.radar-tools,.radar-flight-tools) { flex:none; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:6px; padding:6px 10px; }
  #radar-panel :is(.scope-toolbar,.radar-tools,.radar-flight-tools)::-webkit-scrollbar { display:none; }
  #radar-panel :is(.scope-toolbar,.radar-tools,.radar-flight-tools) :is(button,select) { flex:none; min-height:38px; min-width:38px; font-size:13px; }
  #radar-panel #radar-full,#radar-panel #radar-3d,#radar-panel .radar-selection,#radar-panel .map-hint,#radar-panel .radar-area-note { display:none; }
  .game-stage[data-mobile-base="radar-panel"] #radar-panel .scope-wrap { flex:1 1 auto!important; height:auto!important; min-height:220px!important; }
  .game-stage[data-mobile-base="radar-panel"] #radar-panel .radar-runway-details { flex:none; max-height:22dvh; overflow:auto; }
  #radar-panel .weather-panel { max-height:none; }

  /* Strips: single column, roomy rows, filters scroll sideways. */
  #traffic-panel .strip-filters { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:6px; padding:8px 10px 2px; }
  #traffic-panel .strip-filters button { flex:none; min-height:38px; min-width:52px; font-size:13px; }
  #traffic-panel #next-request { min-height:36px; }
  .game-stage[data-mobile-base="traffic-panel"] #traffic-panel .strips { max-height:none!important; overflow:visible; grid-template-columns:1fr; gap:8px; padding:8px 10px 12px; }
  #traffic-panel .strip { min-height:66px; padding:9px 12px 9px 14px; }
  #traffic-panel .strip .callsign { font-size:15px; }
  #traffic-panel .strip .type,#traffic-panel .strip .phase { font-size:12.5px; }

  /* Radio: whole list visible. */
  .game-stage[data-mobile-base="radio-panel"] #radio-panel ol { max-height:none; }
  #radio-panel .queue-note { display:inline; }

  /* Command menu: a sheet above the tab bar, big rows. Leaves the top of the current view visible. */
  .game-stage { --command-height:min(46dvh,400px); }
  .game-stage[data-command-menu="open"] .radar-menu { left:6px!important; right:6px!important; top:auto!important; bottom:calc(var(--m-bottom) + 6px)!important; width:auto!important; height:var(--command-height)!important; max-height:var(--command-height)!important; z-index:36; border-radius:var(--r-3); }
  /* The current view stays visible above the sheet (unified-control.css hides it for the desktop-style layout). */
  .game-stage[data-mobile-base="radar-panel"][data-command-menu="open"] #radar-panel,
  .game-stage[data-mobile-base="traffic-panel"][data-command-menu="open"] #traffic-panel,
  .game-stage[data-mobile-base="radio-panel"][data-command-menu="open"] #radio-panel { display:flex!important; bottom:calc(var(--m-bottom) + var(--command-height) + 12px)!important; }
  .game-stage[data-mobile-base="traffic-panel"][data-command-menu="open"] #traffic-panel,.game-stage[data-mobile-base="radio-panel"][data-command-menu="open"] #radio-panel { display:block!important; }
  .game-stage[data-mobile-base][data-command-menu="open"] #radar-panel .scope-wrap { min-height:120px!important; }
  /* With the sheet open the radar keeps only the scope: tools come back when the sheet closes. */
  .game-stage[data-mobile-base="radar-panel"][data-command-menu="open"] #radar-panel :is(.scope-toolbar,.radar-tools,.radar-flight-tools,.radar-runway-details,.weather-panel) { display:none!important; }
  .radar-menu-head { padding:10px 10px; }
  .radar-menu-back,.radar-menu-head button { min-height:40px; min-width:40px; }
  .radar-menu-item { min-height:52px!important; padding:8px 12px; font-size:14px; }

  /* Other overlays sit above the tab bar. */
  .feedback { bottom:calc(var(--m-bottom) + 14px)!important; }
  .airport-context { bottom:calc(var(--m-bottom) + 8px)!important; }
  .game-stage .event-panel[open]:not([data-mobile-base] *) { bottom:var(--m-bottom); }

  /* Tab bar. */
  .mobile-tabs { position:fixed; z-index:35; left:0; right:0; bottom:0; height:var(--m-bottom); padding:0 4px var(--m-safe-bottom); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); background:var(--panel-2); border-top:1px solid var(--line); box-shadow:0 -6px 18px rgba(0,0,0,.3); }
}

/* Tab buttons shared by the portrait bar and the landscape rail. */
@media (max-width:700px), (max-width:950px) and (max-height:520px) {
  .mobile-tabs button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:var(--m-tabbar); padding:4px 2px; border:0; border-radius:0; background:none; color:var(--ink-3); font-size:11px; font-weight:600; }
  .mobile-tabs button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .mobile-tabs button[aria-pressed="true"] { color:var(--accent-strong); }
  .mobile-tabs button[aria-pressed="true"]::before { content:""; position:absolute; top:0; left:22%; right:22%; height:2px; border-radius:0 0 2px 2px; background:var(--accent-strong); }
  .mobile-tabs .m-badge { position:absolute; top:6px; left:calc(50% + 6px); min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--warning,#f0a33a); color:#111; font-size:10.5px; line-height:17px; text-align:center; }
  .mobile-tabs .m-badge:empty,.mobile-tabs .m-badge[data-zero] { display:none; }
  /* Mobile link (radar-only, radar kept open): the strips/radio tabs must replace the radar, not sit under it. */
  .game-stage[data-client="mobile"][data-mobile-base]:not([data-mobile-base="radar-panel"]) #radar-panel { display:none!important; }
}

/* Landscape phones (≤950×520): one header row, a tab rail on the left, the command menu as a right-hand panel.
   This block comes after the portrait block and overrides it where both match (e.g. 667×375). */
@media (max-width:950px) and (max-height:520px) {
  :root {
    --m-safe-left:env(safe-area-inset-left,0px);
    --m-safe-right:env(safe-area-inset-right,0px);
    --m-head:44px;
    --m-top:calc(env(safe-area-inset-top,0px) + var(--m-head));
    --m-rail:calc(var(--m-safe-left) + 64px);
    --m-bottom:env(safe-area-inset-bottom,0px);
    --m-side:min(360px,44vw);
    --dock-height:0px;
  }
  .app-header { position:fixed; top:0; left:0; right:0; z-index:30; height:var(--m-top); padding:calc(env(safe-area-inset-top,0px) + 4px) calc(var(--m-safe-right) + 104px) 4px calc(var(--m-safe-left) + 6px); display:grid; grid-template-columns:auto auto minmax(0,1fr); grid-template-rows:36px; gap:6px; background:var(--panel-2); border-bottom:1px solid var(--line); box-shadow:0 6px 18px rgba(0,0,0,.28); }
  .app-header .brand { grid-column:1; grid-row:1; min-height:36px; padding:0 8px; }
  .app-header .brand h1 { display:none; }
  .app-header .status-bar { grid-column:2; grid-row:1; position:static; min-height:36px; margin:0; padding:0 10px; gap:10px; }
  .app-header .seat-controls { grid-column:3; grid-row:1; position:static; display:flex; min-height:36px; padding:0; gap:6px; background:none; border:0; box-shadow:none; }
  .app-header .seat-controls label { flex:1; min-width:0; }
  .app-header .seat-controls .seat-caption,.app-header #connection,.app-header #sim-status { display:none; }
  .app-header .seat-controls select { width:100%; min-height:36px; font-size:16px; }
  .app-header #clock { font-size:17px; min-width:0; }

  .game-dock { display:contents; }
  .game-dock .playback { position:fixed; z-index:31; top:calc(env(safe-area-inset-top,0px) + 4px); right:calc(var(--m-safe-right) + 6px); margin:0; padding:0; border:0; }
  .game-dock #play { min-width:92px; min-height:36px; padding:6px 12px; font-size:13px; }
  .game-dock .camera-controls { position:fixed; z-index:14; left:calc(var(--m-rail) + 8px); right:auto; bottom:calc(var(--m-bottom) + 8px); display:flex; gap:4px; padding:4px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-3); box-shadow:var(--shadow); }
  .game-dock .camera-controls button { min-height:44px; min-width:58px; padding:4px 6px; font-size:11px; flex-direction:column; justify-content:center; gap:2px; }
  .game-stage:not([data-mobile-base="3d"]) .game-dock .camera-controls { display:none; }
  .game-dock .utility-controls { display:none; }
  .game-stage[data-mobile-more] .game-dock .utility-controls,
  .game-stage[data-mobile-panel="settings"] .game-dock .utility-controls,
  .game-stage[data-mobile-panel="multiplayer"] .game-dock .utility-controls {
    position:fixed; z-index:33; left:var(--m-rail); right:auto; top:auto; bottom:calc(var(--m-bottom) + 6px); width:min(340px,50vw); display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 0 6px; padding:10px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-3); box-shadow:var(--shadow);
  }
  .game-dock .utility-controls>*,.game-dock .utility-controls .chart-link,.game-dock .utility-controls .dock-drawer>summary,.game-dock .utility-controls .help-button { min-height:44px; display:flex; align-items:center; justify-content:center; font-size:14px; border:1px solid var(--line); border-radius:var(--r-2); background:var(--control); }
  .game-dock .utility-controls .drawer-content,.help-panel { position:fixed; top:var(--m-top); bottom:var(--m-bottom); left:var(--m-rail); right:0; width:auto; max-height:none; overflow:auto; border-radius:0; z-index:34; }

  .scene-caption { top:calc(var(--m-top) + 6px); left:calc(var(--m-rail) + 8px); right:8px; width:auto; max-width:none; }
  .scene-caption #model-load-status,.scene-caption #scene-hint { display:none; }
  .scene-caption #environment-attribution { position:fixed; left:calc(var(--m-rail) + 8px); right:8px; bottom:calc(var(--m-bottom) + 62px); margin:0; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.75; }
  .game-stage:not([data-mobile-base="3d"]) .scene-caption { display:none; }

  .game-stage[data-mobile-base] :is(#radar-panel,#traffic-panel,#radio-panel):not([open]) { display:none; }
  .game-stage[data-mobile-base="radar-panel"] #radar-panel,
  .game-stage[data-mobile-base="traffic-panel"] #traffic-panel,
  .game-stage[data-mobile-base="radio-panel"] #radio-panel {
    position:fixed!important; top:var(--m-top)!important; bottom:var(--m-bottom)!important; left:var(--m-rail)!important; right:var(--m-safe-right)!important;
    width:auto!important; max-width:none!important; height:auto!important; max-height:none!important; margin:0;
    border-radius:0; border:0; border-left:1px solid var(--line); overflow:auto; overscroll-behavior:contain; z-index:12; background:var(--panel-2);
  }
  .game-stage[data-mobile-base] :is(#radar-panel,#traffic-panel,#radio-panel)>.panel-title { min-height:36px; padding:4px 12px; cursor:default; }
  .game-stage[data-mobile-base] :is(#radar-panel,#traffic-panel,#radio-panel)>.panel-title .panel-toggle { display:none; }
  .game-stage[data-mobile-base="radar-panel"] #radar-panel { display:flex; flex-direction:column; overflow:hidden; }
  .game-stage[data-mobile-base="radar-panel"] #radar-panel>.panel-title { display:none; }
  .game-stage[data-mobile-base="radar-panel"] #radar-panel .scope-content { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
  .game-stage[data-mobile-base="radar-panel"] #radar-panel .scope-wrap { flex:1 1 auto!important; height:auto!important; min-height:160px!important; }
  .game-stage[data-mobile-base="radar-panel"] #radar-panel .radar-flight-tools,
  .game-stage[data-mobile-base="radar-panel"] #radar-panel .radar-runway-details:not([open]) { display:none; }
  .game-stage[data-mobile-base="radar-panel"] #radar-panel .radar-runway-details { max-height:30dvh; overflow:auto; }
  #radar-panel :is(.scope-toolbar,.radar-tools) { flex:none; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:6px; padding:4px 8px; }
  #radar-panel :is(.scope-toolbar,.radar-tools) :is(button,select) { flex:none; min-height:36px; min-width:36px; font-size:13px; }
  #radar-panel #radar-full,#radar-panel #radar-3d,#radar-panel .radar-selection,#radar-panel .map-hint,#radar-panel .radar-area-note { display:none; }
  /* Toolbars in one row: the weather chip and view toggles share the line with the airport chips and zoom. */
  .game-stage[data-mobile-base="radar-panel"] #radar-panel .scope-content>.scope-toolbar,.game-stage[data-mobile-base="radar-panel"] #radar-panel .scope-content>.radar-tools { display:inline-flex; }
  #traffic-panel .strip-filters { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:6px; padding:6px 10px 2px; }
  #traffic-panel .strip-filters button { flex:none; min-height:36px; min-width:52px; }
  .game-stage[data-mobile-base="traffic-panel"] #traffic-panel .strips { max-height:none!important; overflow:visible; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; padding:8px 10px 12px; }
  #traffic-panel .strip { min-height:62px; }
  .game-stage[data-mobile-base="radio-panel"] #radio-panel ol { max-height:none; }

  /* Command menu: right-hand panel; the current view narrows to its left instead of hiding. */
  .game-stage[data-command-menu="open"] .radar-menu { left:auto!important; right:calc(var(--m-safe-right) + 6px)!important; top:calc(var(--m-top) + 6px)!important; bottom:calc(var(--m-bottom) + 6px)!important; width:var(--m-side)!important; height:auto!important; max-height:none!important; z-index:36; border-radius:var(--r-3); }
  .radar-menu-item { min-height:48px!important; }
  .game-stage[data-mobile-base="radar-panel"][data-command-menu="open"] #radar-panel,
  .game-stage[data-mobile-base="traffic-panel"][data-command-menu="open"] #traffic-panel,
  .game-stage[data-mobile-base="radio-panel"][data-command-menu="open"] #radio-panel { right:calc(var(--m-side) + var(--m-safe-right) + 12px)!important; bottom:var(--m-bottom)!important; }
  .game-stage[data-mobile-base="traffic-panel"][data-command-menu="open"] #traffic-panel,.game-stage[data-mobile-base="radio-panel"][data-command-menu="open"] #radio-panel { display:block!important; }
  .game-stage[data-mobile-base="radar-panel"][data-command-menu="open"] #radar-panel { display:flex!important; }
  .game-stage[data-mobile-base="radar-panel"][data-command-menu="open"] #radar-panel :is(.scope-toolbar,.radar-tools,.radar-runway-details,.weather-panel) { display:none!important; }
  .game-stage:not([data-radar])[data-command-menu="open"] #airport-scene { bottom:0!important; height:100%!important; }
  .feedback { bottom:calc(var(--m-bottom) + 12px)!important; left:calc(50% + var(--m-rail) / 2)!important; }
  .airport-context { left:calc(var(--m-rail) + 8px)!important; bottom:calc(var(--m-bottom) + 8px)!important; }

  /* Tab rail. */
  .mobile-tabs { position:fixed; z-index:35; top:var(--m-top); bottom:0; left:0; right:auto; width:var(--m-rail); height:auto; padding:0 0 var(--m-bottom) var(--m-safe-left); display:flex; flex-direction:column; background:var(--panel-2); border-top:0; border-right:1px solid var(--line); box-shadow:6px 0 18px rgba(0,0,0,.25); }
  .mobile-tabs button { flex:1 1 0; min-height:44px; padding:2px; font-size:10.5px; }
  .mobile-tabs button svg { width:20px; height:20px; }
  .mobile-tabs button[aria-pressed="true"]::before { top:22%; bottom:22%; left:0; right:auto; width:2px; height:auto; border-radius:0 2px 2px 0; }
  .mobile-tabs .m-badge { top:4px; left:calc(50% + 4px); }
}