/* ═══════════════════════════════════════════════════════════════════════════
   ABP 3.0 — Universal Mobile Stylesheet v3
   LOADS LAST — overrides board2.css, board_mobile.css, rts_cinematic.css,
   defense_planner.css, tactical_battle.css, and all inline JS styles.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── iOS zoom prevention ─── */
@media (max-width: 820px) {
  input, textarea, select { font-size: 16px !important; }
  html, body { overflow-x: hidden !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. HEADER / NAV
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .neo-header { flex-wrap: wrap !important; padding: 6px 8px !important; gap: 4px !important; }
  .neo-header .brand a { font-size: 14px !important; }
  .neo-header nav {
    flex: 1 1 100% !important; order: 3 !important;
    display: flex !important; flex-wrap: wrap !important; gap: 2px !important; justify-content: center !important;
  }
  .neo-header nav a { padding: 5px 7px !important; font-size: 11px !important; border-radius: 6px !important; }
  .neo-header .logout-btn .logout-text { display: none !important; }
}
@media (max-width: 480px) {
  .neo-header nav a { padding: 4px 5px !important; font-size: 10px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. BOARD — CONTROL PANEL (the #1 problem: too tall on mobile)
      Override board_mobile.css's --chrome-h:170px and --legend-h:140px
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* Kill board_mobile.css's insane chrome values */
  :root {
    --chrome-h: 115px !important;
    --legend-h: 30px !important;
    --foot-gap: 4px !important;
  }

  .board-header { padding: 4px 6px !important; }
  .board-header .title { font-size: 11px !important; margin: 0 0 2px !important; line-height: 1.2 !important; }
  .board-header .chips { gap: 3px !important; }
  .board-header .chip {
    font-size: 9px !important; padding: 2px 5px !important;
    min-height: auto !important; min-width: auto !important;
  }

  /* Toolbar: horizontal wrap, tiny buttons */
  .board-header .toolbar {
    display: flex !important; flex-direction: row !important;
    flex-wrap: wrap !important; align-items: center !important;
    gap: 3px !important; margin-top: 2px !important;
  }
  .board-header .toolbar .group {
    display: flex !important; flex-wrap: wrap !important;
    gap: 3px !important; width: auto !important;
  }
  .board-header .toolbar .group:first-child { display: none !important; }
  .board-header .toolbar .btn,
  .board-header .toolbar button,
  .board-header .toolbar select {
    min-height: 30px !important; min-width: auto !important;
    font-size: 10px !important; padding: 3px 7px !important;
    border-radius: 6px !important;
  }
  .board-header .toolbar .btn.primary {
    padding: 4px 10px !important; font-size: 11px !important;
    font-weight: 700 !important;
  }
  .board-header .dice { font-size: 14px !important; }

  /* Stats bar: single tight line */
  .stats {
    gap: 2px 6px !important; margin-top: 1px !important;
    font-size: 10px !important;
  }
  .stats .stat {
    font-size: 10px !important;
    flex: none !important; min-width: auto !important;
  }
  #abp-combo, #abp-sfx { display: none !important; }

  /* Notice */
  .notice { font-size: 10px !important; padding: 2px 4px !important; margin-top: 1px !important; }
}

@media (max-width: 480px) {
  :root { --chrome-h: 100px !important; --legend-h: 24px !important; }
  .board-header .title { font-size: 10px !important; }
  .board-header .toolbar .btn,
  .board-header .toolbar button { font-size: 9px !important; padding: 2px 5px !important; min-height: 26px !important; }
  .stats .stat { font-size: 9px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. BOARD — VIEWPORT & TILES
      Override board_mobile.css's height:auto and transform:scale(.92)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  #abp-board-viewport {
    height: min(calc(100vh - var(--chrome-h) - var(--legend-h) - var(--foot-gap)), 97vw) !important;
    min-height: auto !important;
    width: 100% !important;
    border-radius: 10px !important;
    margin: 1px auto !important;
    aspect-ratio: 1/1 !important;
  }
  #abp-board {
    padding: 3px !important;
  }
  /* Kill board_mobile.css's transform scale */
  .tile {
    transform: none !important;
    border-radius: 4px !important;
  }
  .tile .icon {
    font-size: clamp(6px, 1.8vmin, 12px) !important;
    margin-bottom: 0 !important;
  }
  .tile .label {
    font-size: clamp(5px, 1.2vmin, 9px) !important;
    padding: 0 1px !important; line-height: 1 !important;
  }
  .tile .buildings { font-size: 6px !important; top: 1px !important; right: 1px !important; }
  .tile .tokens { bottom: 0 !important; gap: 1px !important; }
  .tile .tokens span, .tile .tokens .token { font-size: 8px !important; }
  .center-brand h1 { font-size: clamp(8px, 2.5vw, 16px) !important; }
  .center-brand h2 { font-size: clamp(6px, 1.8vw, 10px) !important; margin: 1px 0 2px !important; }

  /* Army overlays */
  #abp-army-panel { font-size: 8px !important; padding: 1px 3px !important; }
  #abp-army-manage { font-size: 9px !important; padding: 3px 5px !important; }

  /* Feed: ultra-compact */
  #abp-center-feed { max-height: 60px !important; padding: 2px 4px !important; }
  #abp-center-feed h4 { font-size: 10px !important; margin: 0 0 1px !important; }
  #abp-center-feed .feed-item { font-size: 9px !important; padding: 1px 3px !important; }

  /* Legend: tiny */
  .legend {
    gap: 3px 6px !important; padding: 2px 4px !important;
    min-height: auto !important; border-radius: 6px !important;
  }
  .legend li, .legend .item {
    font-size: 9px !important; padding: 1px 4px !important; gap: 3px !important;
  }
  .legend .dot { width: 6px !important; height: 6px !important; }
}

/* svh safe units */
@supports (height: 100svh) {
  @media (max-width: 820px) {
    #abp-board-viewport {
      height: min(calc(100svh - var(--chrome-h) - var(--legend-h) - var(--foot-gap)), 97svw) !important;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. BOARD MODALS — property, army, war, loot
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .modal .modal-dialog,
  #abp-modal .modal-dialog,
  #abp-modal2 .modal-dialog,
  .abp-modal-secondary .modal-dialog {
    width: calc(100vw - 10px) !important; max-width: 100% !important;
    max-height: 90vh !important; margin: 5px auto !important;
    border-radius: 10px !important; padding: 8px !important;
  }
  #abp-modal-body, #abp-modal2-body, .help-body {
    max-height: 62vh !important; overflow-y: auto !important;
    -webkit-overflow-scrolling: touch; padding: 6px !important; font-size: 12px !important;
  }
  .war-actions { flex-wrap: wrap !important; gap: 4px !important; }
  .war-actions button, .war-actions .btn {
    flex: 1 1 45% !important; min-height: 38px !important;
    padding: 6px !important; font-size: 11px !important;
  }
  .loot-stage .stage-prop { padding: 4px 6px !important; font-size: 11px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. MAP MODE — full viewport
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .map-mode .modal-dialog {
    width: 100vw !important; height: 100vh !important;
    max-height: 100vh !important; border-radius: 0 !important;
    padding: 2px !important; margin: 0 !important;
  }
  .map-mode #abp-modal-body { max-height: none !important; padding: 0 !important; }
  .map-mode.fullscreen .modal-dialog {
    width: 100vw !important; height: 100vh !important;
    max-height: none !important; border-radius: 0 !important;
  }
  .abp-map-shell { height: calc(100vh - 70px) !important; width: 100% !important; }
  .abp-map-toolbar {
    gap: 3px !important; padding: 3px !important; flex-wrap: wrap !important;
  }
  .abp-map-toolbar .abp-map-ctl {
    padding: 3px 7px !important; font-size: 10px !important;
  }
  .abp-map-btn { right: 6px !important; bottom: 6px !important; padding: 6px 8px !important; font-size: 11px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. RTS RAID COMMANDER — override rts_cinematic.css grid columns
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* Top bar: compact single line wrapping */
  .rts-topbar {
    height: auto !important; min-height: 36px !important;
    padding: 3px 6px !important; flex-wrap: wrap !important; gap: 3px !important;
  }
  .rts-topbar__brand { font-size: 11px !important; letter-spacing: .02em !important; }
  .rts-topbar__meters { gap: 2px !important; flex-wrap: wrap !important; }
  .rts-pill { padding: 2px 5px !important; font-size: 9px !important; gap: 3px !important; }
  .rts-phase-badge { padding: 2px 6px !important; font-size: 9px !important; }
  .rts-topbar__close { padding: 3px 7px !important; font-size: 10px !important; }

  /* Content frame */
  .rts-content { border-radius: 8px !important; }
  .rts-stage { padding: 2px 4px !important; }

  /* ALL multi-column phase layouts → single column */
  .rts-briefing,
  .rts-entry-layout,
  .rts-interior-layout,
  .rts-vault-layout,
  .rts-extract-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr auto !important;
    height: 100% !important;
  }
  /* Hide the decorative exterior panel */
  .rts-briefing__exterior, .rts-entry__right { display: none !important; }

  /* House panel (SVG): takes top portion */
  .rts-house-panel,
  .rts-vault-stage,
  .rts-extract-house {
    min-height: 35vh !important; max-height: 48vh !important;
    border-right: none !important; border-bottom: 1px solid var(--rts-border) !important;
    overflow: auto !important;
  }

  /* HUD panel (controls): takes bottom portion, scrollable */
  .rts-hud-panel,
  .rts-briefing__panel,
  .rts-vault-panel,
  .rts-extract-panel {
    max-height: 48vh !important; overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 6px 8px !important; font-size: 11px !important;
    gap: 5px !important;
  }
  .rts-kicker { font-size: 8px !important; letter-spacing: .1em !important; }
  .rts-briefing__title { font-size: 18px !important; }
  .rts-vault-title { font-size: 16px !important; }
  .rts-extract-title { font-size: 16px !important; }

  /* Intel rows */
  .rts-intel__row { padding: 6px 8px !important; font-size: 11px !important; gap: 6px !important; }
  .rts-intel__icon { font-size: 13px !important; }
  .rts-intel__val { font-size: 10px !important; }

  /* CTA buttons: full width, touch-friendly */
  .rts-cta { padding: 8px 10px !important; border-radius: 10px !important; }
  .rts-cta__label { font-size: 13px !important; }
  .rts-cta__sub { font-size: 9px !important; }
  .rts-cta-row { gap: 6px !important; }

  /* Mini squad cards in HUD */
  .rts-mini-squad { padding: 4px 6px !important; }
  .rts-squad-card { padding: 8px 10px !important; }
  .rts-squad-name { font-size: 12px !important; }

  /* Progress bar */
  .rts-bigprog { padding: 10px !important; }
  .rts-bigprog__label { font-size: 12px !important; }
  .rts-bigprog__bar { height: 12px !important; }

  /* Greed options: stack */
  .rts-greed-options { grid-template-columns: 1fr !important; gap: 6px !important; }
  .rts-greed-card { padding: 10px 12px !important; }
  .rts-greed-title { font-size: 20px !important; }
  .rts-greed-name { font-size: 15px !important; }
  .rts-greed-payout { font-size: 16px !important; }
  .rts-greed-icon { font-size: 22px !important; }
  .rts-greed-layout { padding: 10px !important; gap: 10px !important; }

  /* Resolution stats */
  .rts-res-stats { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .rts-res-stat { padding: 8px !important; }
  .rts-res-stat__val { font-size: 16px !important; }
  .rts-resolution { padding: 16px !important; gap: 12px !important; }
  .rts-resolution__title { font-size: 26px !important; }
  .rts-resolution__icon { font-size: 44px !important; }
  .rts-resolution__payout { font-size: 20px !important; }

  /* Event log */
  .rts-event-log { max-height: 100px !important; }
  .rts-event-item { font-size: 10px !important; padding: 3px 4px !important; }

  /* Signal meter */
  .rts-signal { padding: 6px 8px !important; }
  .rts-signal__seg { height: 10px !important; }

  /* HUD sections */
  .rts-hud-section__hdr { padding: 4px 8px !important; font-size: 8px !important; }

  /* Floor tabs */
  .rts-floor-tabs { gap: 4px !important; padding: 4px 6px !important; }
  .rts-floor-tab { padding: 4px !important; font-size: 10px !important; }

  /* Meters */
  .rts-meters { gap: 4px !important; padding: 6px 8px !important; }
  .rts-meter__label { font-size: 8px !important; }

  /* Toast */
  .rts-toast { font-size: 11px !important; padding: 6px 12px !important; bottom: 10px !important; }
}

@media (max-width: 480px) {
  .rts-topbar__brand { font-size: 10px !important; }
  .rts-pill { font-size: 8px !important; padding: 1px 4px !important; }
  .rts-house-panel, .rts-vault-stage, .rts-extract-house { max-height: 40vh !important; }
  .rts-hud-panel, .rts-briefing__panel, .rts-vault-panel, .rts-extract-panel { font-size: 10px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. DEFENSE PLANNER — override 3-col grid, fullscreen
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .dp-modal {
    width: 100vw !important; height: 100vh !important;
    max-width: 100vw !important; max-height: 100vh !important;
    border-radius: 0 !important;
  }
  /* Header: compact wrap */
  .dp-header {
    flex-wrap: wrap !important; gap: 3px !important; padding: 4px 6px !important;
  }
  .dp-header-left, .dp-header-right {
    flex-wrap: wrap !important; gap: 2px !important;
  }
  .dp-logo { font-size: 11px !important; margin-right: 2px !important; }
  .dp-prop-sel, .dp-tpl-sel {
    min-width: 80px !important; max-width: 130px !important;
    font-size: 10px !important; padding: 3px 5px !important;
  }
  .dp-floor-tab {
    padding: 3px 8px !important; font-size: 10px !important;
    min-height: auto !important; min-width: auto !important;
  }
  .dp-save-btn { padding: 3px 8px !important; font-size: 10px !important; }
  .dp-clear-btn { padding: 3px 6px !important; font-size: 9px !important; }
  .dp-x-btn { padding: 2px 6px !important; font-size: 12px !important; }
  .dp-coverage-btn { padding: 3px 6px !important; font-size: 9px !important; }

  /* Caps bar */
  .dp-caps-bar { flex-wrap: wrap !important; gap: 2px !important; padding: 2px 6px !important; }
  .dp-cap-item { font-size: 8px !important; padding: 1px 4px !important; }
  .dp-cap-msg { font-size: 9px !important; height: auto !important; padding: 0 6px !important; }

  /* Body: SINGLE COLUMN — palette on top, canvas below, no info */
  .dp-body {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    overflow: hidden !important;
  }
  .dp-info-col { display: none !important; }

  /* Palette: horizontal scrolling strip */
  .dp-palette-col {
    flex-direction: row !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    padding: 3px 4px !important; gap: 2px !important;
    border-right: none !important; border-bottom: 1px solid rgba(58,130,200,.12) !important;
    max-height: 48px !important; min-height: 44px !important;
    align-items: center !important;
    -webkit-overflow-scrolling: touch;
  }
  .dp-pal-section { display: none !important; }
  .dp-pal-btn {
    display: flex !important; flex-direction: row !important; align-items: center !important;
    grid-template-columns: unset !important; grid-template-rows: unset !important;
    padding: 3px 5px !important; flex-shrink: 0 !important;
    gap: 3px !important; border-radius: 6px !important;
    min-width: auto !important; white-space: nowrap !important;
  }
  .dp-pal-icon { font-size: 14px !important; }
  .dp-pal-label { font-size: 9px !important; }
  .dp-pal-stat { display: none !important; }
  .dp-pal-hint { display: none !important; }

  /* Canvas: fill rest of viewport */
  .dp-canvas-col { padding: 1px !important; flex: 1 !important; min-height: 0 !important; }
  #dp-canvas-wrap {
    overflow: auto !important; -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom !important;
  }
  #dp-canvas-wrap svg {
    min-width: 280px !important; min-height: 220px !important;
  }

  /* Tooltip */
  .dp-tooltip { font-size: 11px !important; max-width: 160px !important; padding: 6px 8px !important; }
}

@media (max-width: 480px) {
  .dp-palette-col { max-height: 42px !important; }
  .dp-pal-label { font-size: 8px !important; }
  .dp-pal-icon { font-size: 12px !important; }
  .dp-header { padding: 3px 4px !important; }
  .dp-logo { font-size: 9px !important; }
  .dp-prop-sel, .dp-tpl-sel { max-width: 100px !important; font-size: 9px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. TACTICAL BATTLE — fullscreen
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  #tac-battle-overlay { padding: 0 !important; }
  #tac-battle-overlay > div, .tac-container {
    width: 100vw !important; height: 100vh !important;
    max-width: 100% !important; border-radius: 0 !important;
  }
  .tac-topbar { flex-wrap: wrap !important; gap: 3px !important; padding: 4px 6px !important; }
  .tac-phase-info { font-size: 10px !important; }
  .tac-timer { font-size: 12px !important; }
  .tac-btn {
    padding: 5px 8px !important; font-size: 10px !important;
    min-height: 32px !important; min-width: auto !important;
  }
  .tac-main { flex-direction: column !important; }
  .tac-grid-area { min-height: 160px !important; max-height: 45vh !important; }
  .tac-side-panel, .tac-panel {
    max-height: 38vh !important; overflow-y: auto !important;
    font-size: 10px !important; -webkit-overflow-scrolling: touch;
  }
  .tac-unit-card { padding: 3px 5px !important; font-size: 9px !important; }
  .perk-branches { grid-template-columns: 1fr !important; }
  .perk-card { padding: 5px !important; font-size: 10px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. DASHBOARD / EARN / AUTH
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .grid { display: flex !important; flex-direction: column !important; gap: 8px !important; }
  .grid > .card { width: 100% !important; }
  .kpis { flex-direction: column !important; gap: 6px !important; }
  .hero-card { padding: 12px !important; margin-bottom: 8px !important; }
  .hero-card h2 { font-size: 18px !important; }
  .hero-sub { font-size: 12px !important; }
  .hero-ctas { flex-direction: column !important; gap: 6px !important; }
  .btn-lg { width: 100% !important; text-align: center !important; padding: 10px !important; font-size: 13px !important; box-sizing: border-box !important; }
  .hero-pills { gap: 3px !important; }
  .pill { font-size: 10px !important; padding: 3px 6px !important; }
  .abpChartTabs { gap: 3px !important; }
  .abpTabBtn {
    padding: 6px 8px !important; font-size: 11px !important;
    flex: 1 1 auto !important; text-align: center !important;
    min-height: 34px !important; min-width: auto !important;
  }
  .abpChartWrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  body > .card, .container > .card, form.card {
    max-width: 100% !important; margin: 8px !important; padding: 12px !important;
  }
  .form-group .input, .form-group input, .form-group select {
    width: 100% !important; padding: 10px !important;
  }
  .container { padding: 0 6px !important; max-width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. REDEEM / COUPONS / TICKETS / SOCIAL
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .cash-grid, .cp-grid { grid-template-columns: 1fr !important; gap: 6px !important; }
  .cash-card, .cp-card { padding: 8px !important; }
  .cash-h1, .cp-h1 { font-size: 16px !important; }
  .cash-kpi, .cp-kpi { flex-wrap: wrap !important; gap: 4px !important; }
  .cash-tab {
    padding: 6px 8px !important; font-size: 11px !important;
    flex: 1 1 auto !important; text-align: center !important;
    min-height: 34px !important; min-width: auto !important;
  }
  .cash-row { flex-direction: column !important; gap: 4px !important; }
  .cash-in, .cash-btn, .cp-in, .cp-btn { width: 100% !important; }
  .cash-btn, .cp-btn { padding: 8px !important; font-size: 12px !important; }
  .table { display: block !important; overflow-x: auto !important; font-size: 10px !important; }
  .table td, .table th { padding: 4px 3px !important; white-space: nowrap; }
  .drop { width: 100% !important; }
  .hero-cover { height: 80px !important; }
  .hero-main { flex-direction: column !important; text-align: center !important; gap: 4px !important; }
  .hero-avatar { width: 44px !important; height: 44px !important; }
  .hero-name { font-size: 15px !important; }
  .hero-actions { flex-wrap: wrap !important; justify-content: center !important; gap: 3px !important; }
  .feed { gap: 6px !important; }
  .feed .card { padding: 6px !important; }
  .composer { flex-direction: column !important; }
  .composer-left, .composer-right { width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. POPUPS / ANNOUNCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .abp-announce-modal { width: calc(100vw - 14px) !important; max-height: 85vh !important; }
  .abp-announce-title { font-size: 13px !important; }
  .abp-announce-body { font-size: 11px !important; padding: 8px !important; }
  .abp-announce-actions { flex-direction: column !important; padding: 6px 8px !important; }
  .abp-btn { width: 100% !important; text-align: center !important; padding: 8px !important; }
  .abp-guard-card { padding: 12px !important; }
  .abp-guard-title { font-size: 15px !important; }
  .abp-guard-actions { flex-direction: column !important; }
  .abp-guard-btn { width: 100% !important; text-align: center !important; padding: 8px !important; }
  .abp-modal { width: calc(100vw - 14px) !important; padding: 10px !important; }
  .abp-modal-actions { flex-direction: column !important; gap: 4px !important; }
  .abp-modal-actions .btn { width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. THIN SCROLLBARS + SAFE AREAS
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .rts-hud-panel::-webkit-scrollbar, .tac-side-panel::-webkit-scrollbar,
  .dp-palette-col::-webkit-scrollbar, .help-body::-webkit-scrollbar,
  #abp-modal-body::-webkit-scrollbar, .abp-map-host::-webkit-scrollbar,
  .rts-briefing__panel::-webkit-scrollbar, .rts-vault-panel::-webkit-scrollbar,
  .rts-extract-panel::-webkit-scrollbar { width: 2px !important; height: 2px !important; }
  .rts-hud-panel::-webkit-scrollbar-thumb, .tac-side-panel::-webkit-scrollbar-thumb,
  .dp-palette-col::-webkit-scrollbar-thumb, .help-body::-webkit-scrollbar-thumb,
  #abp-modal-body::-webkit-scrollbar-thumb, .abp-map-host::-webkit-scrollbar-thumb,
  .rts-briefing__panel::-webkit-scrollbar-thumb, .rts-vault-panel::-webkit-scrollbar-thumb,
  .rts-extract-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1) !important; border-radius: 2px !important; }

  /* Notch phones */
  body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  #abp-rts-cine-host, .dp-backdrop, #tac-battle-overlay { padding-top: env(safe-area-inset-top) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. LANDING PAGE — Kill scanlines on logo
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* Kill the scanline/grid overlay that makes the logo look terrible */
  .landing-hero__bg::after,
  .landing-hero__bg::before,
  .bg-sim .hero::after,
  .bg-sim .hero::before,
  .tron .landing-hero__bg::after {
    display: none !important;
    background: none !important;
  }
  .landing-hero__bg {
    background-image: none !important;
    background: linear-gradient(135deg, #0a1628, #0d1f3c) !important;
  }
  /* Also kill scanlines on any element using repeating-linear-gradient as overlay */
  .landing-brand::after,
  .landing-brand::before,
  .landing-brand__name::after,
  .landing-brand__name::before,
  .holo-card::after,
  .holo-card::before {
    background: none !important;
    display: none !important;
  }
  /* Clean up landing text */
  .landing-brand__name {
    text-shadow: 0 0 20px rgba(58,180,255,.4) !important;
    -webkit-text-stroke: 0 !important;
  }
  .landing-title { font-size: 26px !important; line-height: 1.2 !important; }
  .landing-subtitle { font-size: 14px !important; }
  .landing-hero__grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .landing-hero__right { display: none !important; } /* hide card mockup on mobile */
  .landing-cta { flex-wrap: wrap !important; gap: 6px !important; }
  .btn-hero { padding: 12px 18px !important; font-size: 14px !important; flex: 1 1 auto !important; text-align: center !important; }
  .landing-micro { gap: 4px !important; }
  .landing-micro__chip { font-size: 11px !important; padding: 6px 8px !important; }
  .landing-trustrow { flex-direction: column !important; gap: 6px !important; }
  .landing-trustrow__item { flex-direction: row !important; gap: 8px !important; padding: 8px !important; }
  .landing-badge { font-size: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. BOARD TILES — readable on mobile (text overflow, owner names)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* Property owner line: truncate with ellipsis */
  .tile .abp-own {
    font-size: 7px !important; line-height: 1.1 !important;
    white-space: nowrap !important; overflow: hidden !important;
    text-overflow: ellipsis !important; max-width: 100% !important;
    display: block !important;
  }
  .tile .abp-own-sale {
    font-size: 8px !important; font-weight: 700 !important;
  }
  /* Tier/level badges on property tiles */
  .tile .abp-prop-top {
    top: 1px !important; left: 1px !important; right: 1px !important;
  }
  .tile .abp-tier-badge, .tile .propBadges .tier {
    font-size: 7px !important; padding: 1px 3px !important;
  }
  .tile .abp-lvl-pill, .tile .propBadges .lvl {
    font-size: 7px !important; padding: 1px 3px !important;
  }
  .tile .abp-house-ico, .tile .propBadges .house {
    font-size: 9px !important;
  }
  /* Point value labels on non-property tiles */
  .tile .label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  /* For Sale tag */
  .tile .sub .forsale { font-size: 7px !important; gap: 2px !important; }
  .tile .sub .forsale .tag { padding: 1px 3px !important; font-size: 6px !important; }
  .tile .sub { margin-top: 1px !important; font-size: 7px !important; }
  /* Player tokens on tiles */
  .tile .tokens .token, .tile .tokens span {
    font-size: 6px !important;
    width: auto !important; height: auto !important;
  }
  /* Point tiles: shrink text */
  .tile.point .label, .tile.ad .label, .tile.event .label,
  .tile.jackpot .label, .tile.penalty .label {
    font-size: clamp(5px, 1.2vmin, 8px) !important;
    letter-spacing: -0.3px !important;
  }
}
@media (max-width: 480px) {
  .tile .abp-own { font-size: 5px !important; }
  .tile .abp-tier-badge, .tile .propBadges .tier { font-size: 5px !important; padding: 0 2px !important; }
  .tile .abp-house-ico, .tile .propBadges .house { font-size: 7px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. DEFENSE PLANNER — kill tooltip on mobile, action sheet animation
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* Hide the floating tooltip entirely on touch devices */
  .dp-tooltip {
    display: none !important;
  }
  /* Mobile action sheet slide-up animation */
  @keyframes dpSheetUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  /* Defense planner: hide the info column panel on mobile 
     (the JS now uses the mobile action sheet instead) */
  .dp-info-col .dp-item-panel {
    display: none !important;
  }
  /* Ensure canvas touch events work properly */
  #dp-canvas-wrap {
    touch-action: pan-x pan-y !important;
  }
  #dp-canvas-wrap svg {
    touch-action: manipulation !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. MAP MODE TILES — readable on mobile
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* Map entity labels (rendered by JS as absolute positioned divs) */
  .ecap, [class*="ecap"] {
    font-size: 8px !important; line-height: 1.1 !important;
    padding: 1px 2px !important; white-space: nowrap !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
    max-width: 80px !important;
  }
}