/* Responsive and platform adaptations. */

/* ---- Tablet ------------------------------------------------------------- */
@media(max-width:1080px){
  .deploy-grid{grid-template-columns:1fr}
  .deploy-brief{max-height:none}
  .results-columns{grid-template-columns:1fr}
  .pause-grid{grid-template-columns:1fr}
  .history-row{grid-template-columns:70px 1fr 1fr 76px 56px 52px 36px 46px;font-size:9.5px}
}

/* ---- Phone -------------------------------------------------------------- */
@media(max-width:760px){
  html,body,#app{font-size:calc(13px * var(--ui-scale))}

  .menu-shell{
    grid-template-columns:1fr;
    width:100%;height:100%;border:0;
    overflow-y:auto;
  }
  .brand{padding:26px 20px 20px;border-right:0;border-bottom:1px solid var(--line)}
  /* No fixed size here: .brand is a size container, so the clamp in main.css
     already tracks the column at every width. The fixed overrides that used to
     sit here were tuned to a longer wordmark and left the new one stranded. */
  .tagline{font-size:11px;max-width:none}
  .nav{margin:20px 0 14px}
  .intel-panel{padding:22px 20px 28px}
  .status-grid{grid-template-columns:repeat(2,1fr)}
  .completion-row{grid-template-columns:1fr;gap:8px}

  .panel{width:100%;height:100%;max-height:none;border:0}
  .panel-head{
    flex-direction:column;align-items:stretch;gap:12px;
    padding:18px 16px 14px;
  }
  .panel-head h2{font-size:21px}
  .panel-actions{justify-content:flex-end}
  .panel-body{padding:16px}

  .card-grid,.card-grid.tight{grid-template-columns:1fr}
  .chip-row{grid-template-columns:1fr}
  .chip-row.compact{grid-template-columns:repeat(2,1fr)}
  .dev-row{grid-template-columns:1fr}
  .settings-grid{grid-template-columns:1fr;gap:16px}
  .stat-grid,.stat-grid.compact{grid-template-columns:repeat(2,1fr)}

  .directive{grid-template-columns:32px 1fr;gap:10px}
  .directive-reward{grid-column:1/-1;text-align:left;display:flex;gap:12px;align-items:baseline}

  .history-row{
    grid-template-columns:1fr 1fr;
    gap:4px 10px;padding:10px;
  }
  .history-row.head{display:none}

  .results-inner{padding:22px 18px}
  .payout-row{grid-template-columns:repeat(2,1fr)}

  /* ---- In-run HUD ---- */
  .hud{
    padding-top:max(8px,env(safe-area-inset-top));
    padding-left:max(8px,env(safe-area-inset-left));
    padding-right:max(8px,env(safe-area-inset-right));
    padding-bottom:max(10px,env(safe-area-inset-bottom));
  }
  /* Every gap and every pad in this region is paid for out of the sector the
     game is played in. Measured on a 430x932 iPhone before this: the top block
     was 309px of 932, a third of the screen, against 555px of play area. What
     is trimmed here is space, not type — the type went up, not down. */
  .hud-top{grid-template-columns:minmax(0,1fr) auto;gap:4px}
  .hud-panel{padding:5px 8px;font-size:10px}
  .hud-column{gap:4px}

  /* Four stacked rows: vitals beside the tally, then the timer, the radio
     traffic and the objective stack each across the full width. Three tracks
     do not fit on a phone, and letting them try put the timer on top of the
     health bar. */
  .vitals{grid-area:1/1;max-width:none}
  .tally{grid-area:1/2}
  .mission{grid-area:2/1/auto/-1;min-width:0;margin:0}
  /* The signature's health, as a row of the stack rather than a panel floating
     at a fixed 104px — which on a phone landed directly on the mission panel,
     so the contract name, the clock, the extraction countdown and the boss
     name were all printed over each other. It is the one element in this
     region that was not a real grid item, and it was the one that collided. */
  .boss-bar{grid-area:3/1/auto/-1;width:auto;margin:0}
  .codec{grid-area:4/1/auto/-1}
  .replay-badge{grid-area:5/1/auto/-1;justify-self:center}
  .hud-top-left{grid-area:6/1/auto/-1;gap:6px}
  .mission-head{font-size:9px}
  .mission-head #timerValue{font-size:14px}
  .phase{font-size:7.5px}
  .hp-text b{font-size:12px}
  .xp-row{font-size:8.5px;margin-top:4px}
  .mission-bar{margin-top:4px}
  .mission-objective{padding:4px 9px}

  .objectives{max-width:none;padding:5px 8px}
  .objectives-head{font-size:8px}
  .objectives.open .objective-list{margin-top:5px}
  .objective{font-size:9px;gap:5px;padding:2px 4px}
  .objective-count{font-size:8.5px}

  .tally{min-width:auto;justify-self:end}
  .tally-row{gap:8px;font-size:9px}
  .combo{font-size:11px}



  /* Collapse the loadout to fixed-size icon chips: four named weapon cards
     consumed the whole left half of a phone screen and buried the play area. */
  .loadout{max-width:none;gap:4px;flex-wrap:wrap;align-content:flex-end;max-height:84px}
  .slot{flex:0 0 auto;padding:3px}
  .slot.weapon{min-width:0;width:38px;height:38px;position:relative;justify-content:center}
  .slot .slot-meta{display:none}
  .slot-icon{width:100%;height:100%;font-size:8.5px;border:none;background:none}
  .slot.weapon .slot-level{
    display:block;position:absolute;right:2px;bottom:1px;
    font-size:8px;color:var(--accent);line-height:1;font-weight:600;
  }
  .slot.passive{width:30px;height:30px;justify-content:center}
  .slot.passive .slot-icon{font-size:13px}
  .slot-rank{position:absolute;right:2px;bottom:1px;font-size:7.5px}
  .slot.passive{position:relative}
  .slot-divider{height:20px}

  .ability-btn{min-width:88px;height:50px}
  .dash-btn{min-width:58px;height:50px}
  .icon-btn{width:44px;height:44px}

  .status-strip{bottom:74px;max-width:94vw}

  .adapt-panel{padding:18px 14px}
  .adapt-head h2{font-size:26px}
  .adapt-cards{grid-template-columns:1fr}
  .adapt-card{min-height:0;padding:14px}
  .adapt-tools{flex-direction:column;align-items:stretch}
  .adapt-hint{text-align:center;order:3}

  .pause-panel{padding:18px 14px}
  .pause-head{flex-direction:column;gap:10px}
  .pause-timer{text-align:left}
}

/* ---- Small phone -------------------------------------------------------- */
@media(max-width:400px){
  .mission{margin:0}
  .loadout{max-width:46vw}
  .slot-meta b{max-width:48px}
  .ability-btn{min-width:76px}
  .payout-row,.stat-grid,.stat-grid.compact{grid-template-columns:1fr}
}

/* ---- Landscape phone: HUD must stay out of the play area ---------------- */
@media(max-height:520px) and (orientation:landscape){
  /* A phone on its side has 430px of height and the top block was taking 193
     of them — 45% of the screen, against 38% of sector. The middle column
     stacks the contract panel, the signature's health and the radio traffic on
     top of each other, so every one of them has to be short here. */
  .hud-panel{padding:4px 7px;font-size:9px}
  .mission{margin:0}
  .hud-top{gap:4px}
  .hud-column{gap:4px}
  .vitals .xp-row{margin-top:3px}
  .mission-bar{margin-top:3px}
  /* The type stays legible — that was the complaint before this one — but the
     panel is held to two lines and the portrait shrinks to pay for it. */
  .codec-portrait{width:40px;height:40px}
  .codec-body{padding:4px 9px;gap:1px}
  .codec-head b{font-size:11px}
  .codec-head span{font-size:8px}
  .codec-text{
    font-size:13px;line-height:1.3;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    line-clamp:2;overflow:hidden;
  }
  /* Only the objective currently closest to done is worth the vertical space. */
  .objective-list{gap:3px}
  .objectives.open .objective-list{max-height:64px;margin-top:4px}
  .objective:nth-child(n+3){display:none}
  .boss-bar{top:64px}
  .status-strip{bottom:64px}
  .ability-btn,.dash-btn{height:44px}
  .icon-btn{width:40px;height:40px}
  .adapt-panel{padding:14px}
  .adapt-card{min-height:0;padding:12px}
  .adapt-icon{width:30px;height:30px;font-size:11px}
}

/* ---- Wide desktop ------------------------------------------------------- */
@media(min-width:1600px){
  .menu-shell{width:min(1400px,92vw);height:min(880px,92vh)}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}

/* ---- Pointer-coarse: bigger tap targets --------------------------------- */
@media(pointer:coarse){
  .btn,.tab,.chip,.nav-item{min-height:44px}
  .switch{width:52px;height:26px}
  .switch i{width:20px;height:20px}
  .switch.on i{left:28px}
  .adapt-card{min-height:0}
}

/* ---- Reduced motion ----------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .scanlines::after{display:none}
}

.reduced-flashing .scanlines::after{opacity:.2}
.reduced-flashing .bar.hp>i.critical{animation:none}
.reduced-flashing #timerValue.urgent{animation:none}