/* Phone operation surface. Desktop and the original ecosystem stay available. */
html:not(.phone-operation) #mobileAimDock,
html:not(.phone-operation) #mobileMenu {display:none}
html.phone-operation {--phone-tray-height:70px;--phone-aim-height:74px;--phone-header-height:44px;background:#080e12}
html.phone-operation,html.phone-operation body {height:100dvh;min-height:100dvh;overflow:hidden;overscroll-behavior:none}
html.phone-operation body {padding:0}
html.phone-operation .app {width:100%;max-width:none;height:100dvh;min-height:0;padding:0;margin:0;display:grid;grid-template-rows:var(--phone-header-height) minmax(0,1fr);overflow:hidden}
html.phone-operation .masthead {grid-row:1;display:flex;height:var(--phone-header-height);min-height:0;padding:0 10px;gap:8px}
html.phone-operation .identity {gap:7px;min-width:0}
html.phone-operation .sigil {font-size:27px}
html.phone-operation .identity strong {font-size:16px;letter-spacing:2px}
html.phone-operation .identity small,html.phone-operation .edition,html.phone-operation .header-status,
html.phone-operation #btnSettings {display:none}
html.phone-operation .header-actions {margin-left:auto;gap:4px}
html.phone-operation .header-actions .quiet {display:inline-flex;min-height:44px;min-width:44px;padding:8px;font-size:11px}
html.phone-operation .telemetry,html.phone-operation .feed-top,html.phone-operation .world-controls,
html.phone-operation .timeline,html.phone-operation .event-panel,html.phone-operation .site-footer,
html.phone-operation .command-panel {display:none}
html.phone-operation .command-grid {grid-row:2;display:block;min-height:0;height:100%;overflow:hidden}
html.phone-operation .feed-panel {height:100%;min-height:0;border:0;display:grid;grid-template-rows:auto minmax(0,1fr);padding-bottom:calc(var(--phone-tray-height) + var(--phone-aim-height) + env(safe-area-inset-bottom))}
html.phone-operation .stage {grid-row:1 / 3;height:auto!important;min-height:0!important;max-height:none!important;width:100%;overflow:hidden;touch-action:none}
html.phone-operation.uprising-stage-active .stage {grid-row:2}
html.phone-operation .stage canvas {width:100%;height:100%;touch-action:none}
html.phone-operation .world-caption,html.phone-operation .weather-chip,html.phone-operation .badges,
html.phone-operation .sector-stamp,html.phone-operation #runActionPrompt,html.phone-operation #targetPreview,
html.phone-operation .world-bottom,html.phone-operation #toast {display:none!important}
html.phone-operation .intro.off {display:none}

/* HUD lives above the map, so every visible signal is also touchable. */
html.phone-operation .uprising-hud {display:none;grid-row:1;position:relative;inset:auto;z-index:4;padding:8px 10px 5px;grid-template-columns:1fr 1.25fr 1.05fr;gap:5px 8px;background:#09151a;border-bottom:1px solid #30474c;pointer-events:none}
html.phone-operation.uprising-stage-active .uprising-hud {display:grid}
html.phone-operation .uprising-brand {display:none}
html.phone-operation .run-clock,html.phone-operation .run-pop {border-left:1px solid #30474c;padding-left:7px;min-width:0}
html.phone-operation .uprising-hud .eyebrow {font-size:8px;letter-spacing:.5px}
html.phone-operation .run-clock strong,html.phone-operation .run-pop strong {font-size:20px;margin-top:2px}
html.phone-operation .run-pop strong small {font-size:8px}
html.phone-operation .run-clock i,html.phone-operation .run-pop i {margin-top:4px}
html.phone-operation .run-meta {position:static;inset:auto;display:flex;width:auto;min-width:0;align-items:stretch;justify-content:center;gap:4px}
html.phone-operation .run-level {font-size:10px;letter-spacing:0;white-space:nowrap;padding:4px 2px;text-align:center}
html.phone-operation .run-xp {max-width:none;width:100%}
html.phone-operation .run-xp b {font-size:8px;margin-top:3px}
html.phone-operation .run-upgrades {position:static;inset:auto;grid-column:1/-1;max-width:100%;height:25px;overflow:hidden}
html.phone-operation .run-upgrades>span {display:none}
html.phone-operation .run-upgrades>div {display:flex;flex-wrap:nowrap;gap:4px;margin-top:0;max-width:100%;overflow:hidden}
html.phone-operation .upgrade-chip,html.phone-operation .upgrade-empty {font-size:8px;min-height:24px;padding:3px 5px;white-space:nowrap}
html.phone-operation .run-warning {grid-column:1/-1;position:static;inset:auto;display:flex;align-items:center;justify-content:center;max-width:100%;height:20px;padding:2px 4px;text-align:center;font-size:9px;line-height:1.2;overflow:hidden;animation:none}
html.phone-operation .run-warning[hidden] {display:flex;visibility:hidden}

/* A stable command shelf avoids resizing the world when targeting starts. */
html.phone-operation #mobileAimDock {position:fixed;z-index:20;left:6px;right:6px;bottom:calc(var(--phone-tray-height) + env(safe-area-inset-bottom));height:var(--phone-aim-height);display:flex;align-items:center;gap:7px;padding:6px 7px;background:#0a191f;border:1px solid #52615c}
html.phone-operation #mobileAimStatus {flex:1;min-width:0;color:#d9e2d6;white-space:pre-line;font:11px/1.35 var(--mono)}
html.phone-operation #mobileConfirm,html.phone-operation #mobileCancel {display:none;flex:0 0 auto;min-width:66px;min-height:48px;padding:8px;font:12px var(--mono)}
html.phone-operation.phone-aiming #mobileConfirm,html.phone-operation.phone-aiming #mobileCancel {display:block}
html.phone-operation.phone-aiming #mobileAimDock {border-color:#d5ac75}
html.phone-operation #mobileConfirm {color:#142025;background:#ffd09a;border-color:#ffd09a}
html.phone-operation #mobileConfirm:disabled {opacity:.4}
html.phone-operation #mobileCancel {color:#d7b7a6;border-color:#80665a}
html.phone-operation .mobile-command-tray {position:fixed;z-index:19;left:0;right:0;bottom:0;height:calc(var(--phone-tray-height) + env(safe-area-inset-bottom));display:flex;gap:5px;padding:7px 6px calc(7px + env(safe-area-inset-bottom));background:#081217;border-top:1px solid #30474c;backdrop-filter:none}
html.phone-operation .mobile-command-tray button {flex:1 1 0;min-width:0;min-height:52px;padding:5px 2px;color:#afc9c0;background:#102027;border-color:#426066;font-size:11px}
html.phone-operation .mobile-command-tray button b {display:block;white-space:nowrap}
html.phone-operation .mobile-command-tray button small {display:block;margin-top:5px;font-size:9px}
html.phone-operation .mobile-command-tray button.selected {color:#ffe2b5;background:#3a3324;border-color:#ffd09a}
html.phone-operation .mobile-command-tray button.unavailable small {color:#dc9e86}
html.phone-operation #mobilePause {flex:0 0 48px;color:#f6d6a0}

html.phone-operation .intro {padding:20px;overflow:auto;background:linear-gradient(90deg,#071116e8,#07111666)}
html.phone-operation .intro-content {max-width:100%}
html.phone-operation .intro .big {font-size:43px;margin:12px 0 6px}
html.phone-operation .intro p {font-size:16px;line-height:1.35}
html.phone-operation .intro p.intro-context {font-size:12px;line-height:1.45;margin-top:12px}
html.phone-operation .intro .go {margin-top:18px;gap:8px;flex-wrap:wrap}
html.phone-operation .intro .gobtn {min-height:48px;padding:10px 12px}
html.phone-operation .intro-foot {display:none}
html.phone-operation dialog {width:calc(100vw - 20px);max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:16px;overflow:auto}
html.phone-operation dialog.run-choice,html.phone-operation dialog.run-recap {padding:0}
html.phone-operation .choice-panel,html.phone-operation .recap-panel {width:100%;max-height:none;padding:16px 12px}
html.phone-operation .choice-panel h2,html.phone-operation .recap-panel h2,html.phone-operation .dialog-top h2 {font-size:23px;margin:8px 0 5px}
html.phone-operation .choice-panel>p,html.phone-operation .recap-panel>p {font-size:12px;line-height:1.4}
html.phone-operation .choice-cards {grid-template-columns:1fr;gap:8px;margin-top:12px}
html.phone-operation .choice-card {min-height:88px;padding:12px 26px 12px 42px}
html.phone-operation .choice-card .choice-icon {top:12px;left:12px;font-size:21px}
html.phone-operation .choice-card b {font-size:15px;margin-bottom:4px}
html.phone-operation .choice-card small {font-size:12px;line-height:1.35}
html.phone-operation .choice-card em {display:block;font-size:10px;margin-top:5px}
html.phone-operation .choice-foot {margin-top:10px!important}
html.phone-operation .choice-foot kbd {display:none}
html.phone-operation .guide-grid,html.phone-operation .settings-grid {grid-template-columns:1fr;gap:15px}
html.phone-operation .guide-grid p {font-size:12px;line-height:1.5}
html.phone-operation dialog button {min-height:44px}
html.phone-operation .mobile-menu-actions {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}
html.phone-operation .mobile-menu-actions button {padding:9px;color:#d1ded8;background:#102027;border:1px solid #466268;font:12px var(--mono)}
html.phone-operation #mobileMenuReturn {grid-column:1/-1;color:#ffe2b5}
html.phone-operation #mobileMenuDialog p {font:13px/1.5 var(--sans);color:#b6c8c2}

@media (orientation:landscape) and (max-height:560px) {
  html.phone-operation {--phone-side:234px}
  html.phone-operation .app {padding-right:calc(var(--phone-side) + env(safe-area-inset-right));padding-left:env(safe-area-inset-left)}
  html.phone-operation .feed-panel {padding-bottom:env(safe-area-inset-bottom)}
  html.phone-operation .masthead {display:flex}
  html.phone-operation .uprising-hud {padding:4px 9px;gap:3px 8px}
  html.phone-operation .run-clock strong,html.phone-operation .run-pop strong {font-size:16px}
  html.phone-operation .run-upgrades {height:23px}
  html.phone-operation .run-warning {font-size:9px;height:18px}
  html.phone-operation #mobileAimDock {left:auto;right:calc(6px + env(safe-area-inset-right));width:222px;bottom:calc(162px + env(safe-area-inset-bottom));height:155px;flex-wrap:wrap;align-content:center}
  html.phone-operation #mobileAimStatus {flex:1 0 100%;font-size:12px;line-height:1.45;min-height:40px}
  html.phone-operation #mobileConfirm,html.phone-operation #mobileCancel {flex:1}
  html.phone-operation .mobile-command-tray {left:auto;right:env(safe-area-inset-right);width:234px;height:calc(158px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px 6px calc(5px + env(safe-area-inset-bottom));border-left:1px solid #30474c}
  html.phone-operation .mobile-command-tray button {min-height:44px;padding:3px}
  html.phone-operation .mobile-command-tray button small {margin-top:2px}
  html.phone-operation #mobilePause {grid-column:1/-1}
  html.phone-operation .intro {padding:10px 20px}
  html.phone-operation .intro .big {font-size:30px;margin:4px 0}
  html.phone-operation .intro-subtitle {margin-bottom:10px}
  html.phone-operation .intro p:not(.intro-context) {display:none}
  html.phone-operation .intro p.intro-context {font-size:11px;margin-top:5px}
  html.phone-operation .intro .go {margin-top:10px}
  html.phone-operation .choice-cards {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  html.phone-operation .choice-card {min-height:122px;padding:12px}
  html.phone-operation .choice-card .choice-icon {display:none}
  html.phone-operation .choice-panel,html.phone-operation .recap-panel {padding:12px}
  html.phone-operation .choice-panel h2 {margin:6px 0}
  html.phone-operation .choice-card small {font-size:12px}
}
@media(prefers-reduced-motion:reduce) {
  html.phone-operation *,html.phone-operation *::before,html.phone-operation *::after {animation:none!important;transition:none!important}
}