/* ═══════════════════════════════════════════════════════════
   The Long Watch — responsive.

   The hard case is a phone in portrait inside Safari, where the
   browser's own chrome leaves roughly 375 × 500 CSS px. Every
   number below is chosen so the dock stays under ~150px and the
   board gets everything else. The dock also collapses entirely.
   ═══════════════════════════════════════════════════════════ */

/* ── Wide / landscape: dock as right sidebar ───────────── */

@media (min-aspect-ratio: 1/1) {
  #app {
    grid-template-columns: minmax(0, 1fr) var(--dock-w);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "top  dock"
      "stage dock";
  }
  #dock { padding-top: var(--sat); }
  #dock-toggle { display: none; }
  #ability-panel { padding: 0 12px 12px; }
  #inspector { right: 14px; top: 20px; }
}

/* Narrow landscape (phone on its side): tighten everything */
@media (min-aspect-ratio: 1/1) and (max-height: 500px) {
  :root { --dock-w: 244px; --topbar-h: 42px; }
  .brand-text, .stat-lbl { display: none; }
  .stat { padding: 4px 8px; }
  #shop { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .tcard {
    flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 5px 2px; text-align: center;
  }
  .tcard-icon { width: 24px; height: 24px; }
  .tcard-name {
    font-size: .55rem; line-height: 1.1; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .tcard-cost { font-size: .56rem; }
  #dock-scroll { padding: 8px; gap: 8px; }
  #ability-panel { padding: 0 8px 8px; }
  .tcard-key { display: none; }
  #abilities { grid-template-columns: 1fr 1fr; }
  .ability-desc { display: none; }
  #ability-panel .panel-title { display: none; }
  #wave-comp { display: none; }
  #stage { padding: 4px; }
  #inspector { width: 234px; padding: 10px; }
  .insp-perf { display: none; }
}

/* ═══ Portrait ═══════════════════════════════════════════ */

@media (max-aspect-ratio: 1/1) {
  :root { --topbar-h: 46px; }

  #app {
    grid-template-columns: 100%;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "top"
      "stage"
      "dock";
  }

  /* ── Top bar: must not overflow 360px ── */
  #topbar {
    gap: 6px;
    padding: 0 8px;
    overflow: hidden;
  }
  .brand-text { display: none; }
  .stats { gap: 5px; min-width: 0; }
  .stat { padding: 4px 8px; gap: 4px; }
  .stat-lbl { display: none; }
  .stat-val { font-size: .92rem; }
  .topbar-actions { gap: 4px; }
  .icon-btn { width: 30px; height: 30px; font-size: .85rem; }

  #stage { padding: 4px; }

  /* ── Dock: compact, and collapsible ── */
  #dock {
    position: relative;
    border-left: none;
    border-top: 1px solid var(--panel-edge);
    max-height: none;
  }

  #dock-toggle {
    display: block;
    position: absolute;
    top: -19px; left: 50%;
    transform: translateX(-50%);
    width: 66px; height: 20px;
    border-radius: 10px 10px 0 0;
    background: rgba(12,16,27,.95);
    border: 1px solid var(--panel-edge);
    border-bottom: none;
    z-index: 2;
  }
  #dock-toggle span {
    display: block;
    width: 26px; height: 3px;
    margin: 0 auto;
    border-radius: 2px;
    background: var(--ink-mute);
    transition: background .18s;
  }
  #dock-toggle:hover span { background: var(--ink); }

  #dock-scroll {
    padding: 8px 8px 0;
    gap: 8px;
    overflow: visible;
  }
  #shop-panel .panel-title { display: none; }

  /* Tower palette: a thumb-scrollable filmstrip of compact chips. */
  #shop {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  #shop::-webkit-scrollbar { height: 3px; }
  #shop::-webkit-scrollbar-thumb { background: rgba(140,165,220,.28); border-radius: 2px; }

  .tcard {
    flex: 0 0 auto;
    width: 74px;
    height: 74px;
    scroll-snap-align: start;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 5px 3px;
    text-align: center;
  }
  .tcard-icon { width: 30px; height: 30px; }
  .tcard-body { width: 100%; }
  .tcard-name {
    font-size: .58rem;
    line-height: 1.1;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .tcard-cost { font-size: .6rem; margin-top: 1px; }
  .tcard-key { display: none; }

  /* Abilities sit BESIDE the wave button rather than on their own row. */
  #dock {
    display: grid;
    min-height: 0;
    max-height: calc(var(--app-h) * 0.5);   /* NOT 50% — that resolves
                                               against the grid area, not the viewport */
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-areas:
      "shop shop"
      "abil wave";
  }
  #dock-scroll { grid-area: shop; overflow: visible; }
  #ability-panel {
    grid-area: abil;
    align-self: end;                       /* line the chips up with the button */
    border-top: 1px solid var(--panel-edge);
    padding: 8px 0 calc(8px + var(--sab)) 8px;
  }
  #abilities { height: 48px; }
  #ability-panel .panel-title { display: none; }
  #abilities { grid-template-columns: 1fr 1fr; gap: 5px; }
  .ability {
    padding: 4px 2px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; gap: 1px;
  }
  .ability-label, .ability-desc, .ability-name .tcard-key { display: none; }
  .ability-name { gap: 0; }
  .ability-ico svg { width: 17px; height: 17px; }
  .ability-cd { font-size: .55rem; margin-top: 0; line-height: 1.1; }

  /* Wave row */
  #wave-panel {
    grid-area: wave;
    padding: 8px 8px calc(8px + var(--sab));
  }
  .wave-line { font-size: .66rem; margin-bottom: 4px; }
  #wave-comp { margin-bottom: 6px; gap: 3px; max-height: 22px; overflow: hidden; }
  .comp-chip { font-size: .58rem; padding: 1px 6px 1px 4px; }
  .primary-btn { padding: 11px 14px; font-size: .84rem; min-height: 48px; }
  .ability { min-height: 44px; }
  .icon-btn, .fc-btn { min-height: 34px; }

  /* Collapsed: everything but the wave button folds away and the board
     takes the reclaimed height. This is the difference between a 245px
     board and a full-width one on a phone. */
  #app.dock-collapsed #dock-scroll,
  #app.dock-collapsed #ability-panel { display: none; }
  #app.dock-collapsed #dock {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "wave";
  }
  #dock-toggle span { transition: transform .2s; }
  #app.dock-collapsed #dock-toggle span { transform: scaleX(.55); }

  /*
   * Inspector becomes a bottom sheet that sits ABOVE the dock, never over it.
   *
   * It used to be pinned to bottom:6px, which buried the palette and the
   * wave button under it — so selecting a tower to upgrade hid the very
   * controls you needed to carry on. It is a child of #stage now, so the board
   * bounds it and no measurement is involved.
   */
  #inspector {
    left: 6px; right: 6px; bottom: 6px;
    width: auto;
    max-height: 72%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 11px;
    animation: sheetIn .26s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes sheetIn { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: none } }

  .insp-stats { grid-template-columns: 1fr 1fr; gap: 3px 8px; }
  .insp-perf { padding: 5px 8px; margin-bottom: 8px; }
  .act-btn { padding: 10px 11px; }

  #toasts { bottom: auto; top: calc(var(--topbar-h) + var(--sat) + 10px); }
  #shop-hint { display: none; }
}

/* Very short portrait (phone with browser chrome): squeeze harder still */
@media (max-aspect-ratio: 1/1) and (max-height: 720px) {
  :root { --topbar-h: 42px; }
  .tcard { width: 66px; height: 66px; }
  .tcard-icon { width: 26px; height: 26px; }
  .stat-val { font-size: .85rem; }
  #wave-comp { display: none; }
  .wave-line { margin-bottom: 3px; }
  .primary-btn { padding: 10px 12px; min-height: 46px; }
}

/* Big desktop: give the dock more room to breathe */
@media (min-width: 1500px) and (min-aspect-ratio: 1/1) {
  :root { --dock-w: 380px; }
  .tcard-icon { width: 46px; height: 46px; }
  .tcard-name { font-size: .84rem; }
}

/* Hover-less devices: no lift effects (they stick on touch) */
@media (hover: none) {
  .tcard:hover:not(.locked),
  .ability:hover:not(.cooling),
  .diff-card:hover,
  .primary-btn:hover,
  .secondary-btn:hover { transform: none; }
  .act-btn:hover:not(:disabled) { transform: none; }
  #game { cursor: default; }
}