/* desktop.css — additive desktop layout for Druygon.
   Loaded AFTER app.css. Every rule is gated behind min-width, so the
   mobile experience (≤520px) and the existing phone-frame at 521–879px
   are completely untouched. No JS / bundle changes required. */

@media (min-width: 880px) {

  /* ── full-viewport app shell (kill the studio phone frame) ── */
  body {
    padding: 0;
    overflow: hidden;
    align-items: stretch;
    justify-content: stretch;
  }
  .device {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;        /* let the body gradient show through */
    padding-left: 248px;            /* room for the fixed sidebar */
  }
  .device::after { display: none; } /* remove the phone notch */

  /* drop the sidebar gutter on the immersive battle screen (no nav there) */
  .device:has(.catch) { padding-left: 0; }

  /* ── bottom nav → fixed left sidebar ───────────────────────── */
  .nav {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 248px; height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 6px;
    padding: 88px 18px 24px;        /* top padding leaves room for brand */
    border-top: 0;
    border-right: 1px solid var(--border-subtle);
    background: rgba(10, 8, 24, .72);
    backdrop-filter: blur(22px) saturate(180%);
  }
  /* CSS brand mark at the top of the sidebar */
  .nav::before {
    content: "DRUYGON";
    position: absolute;
    top: 30px; left: 24px;
    font-family: var(--font-game, var(--font-display));
    font-size: 16px; letter-spacing: .08em;
    color: var(--accent);
    text-shadow: 0 0 14px var(--accent-glow);
  }
  .nav-slot {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 14px;
    cursor: pointer;
    transition: background var(--dur-normal, .2s) var(--ease-out, ease);
  }
  .nav-slot:hover { background: rgba(255, 255, 255, .05); }
  .nav-slot.on { background: var(--accent-soft); }
  .nav-slot.on::before { display: none; }   /* kill the top indicator pip */
  .nav-ico { width: 30px; height: 26px; }
  .nav-slot span { font-size: 14px; font-weight: 600; }

  /* ── centered content column ───────────────────────────────── */
  .appbar {
    max-width: 760px;
    margin: 0 auto;
    width: 100%;
    background: transparent;
    backdrop-filter: none;
    justify-content: flex-end;      /* user chips sit right when no title */
    padding: 22px 28px 8px;
    height: auto;
  }
  .appbar-logo { display: none; }   /* brand lives in the sidebar now */

  .body { width: 100%; }
  .body .pad { max-width: 760px; margin: 0 auto; padding: 8px 28px 48px; }

  /* screens that aren't wrapped in .pad (map/catch use their own roots) */
  .map-banner, .map-meta, .zone,
  .catch .cmd, .col-stats, .col-filters, .col-grid,
  .wallet, .store-row, .prof-card, .slots, .prog-row, .link-row {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
  .zone, .store-row, .link-row, .prog-row { margin-bottom: 12px; }

  /* battle stage: center it and give it breathing room */
  .catch { max-width: 760px; margin: 0 auto; width: 100%; }
  /* on a tall desktop viewport, group the quiz vertically instead of
     letting the answers float to the very bottom (margin-top:auto). */
  .catch .cmd { justify-content: center; }
  .catch .answers { margin-top: 28px; }

  /* let chip rows (achievements, filters) wrap so nothing is clipped */
  .chips-row, .col-filters { flex-wrap: wrap; overflow-x: visible; }

  /* ── denser collection grid on the wider canvas ────────────── */
  .col-grid { grid-template-columns: repeat(6, 1fr); }

  /* ── desktop hover affordances on tappable cards ───────────── */
  .region-card, .zone:not(.locked), .store-row, .dex, .ach, .filter,
  .mission, .lb-row, .slot, .ball-opt { cursor: pointer; }
  .region-card { transition: transform var(--dur-fast, .12s) var(--ease-out, ease),
                              box-shadow var(--dur-normal, .2s) var(--ease-out, ease); }
  .region-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.5); }
  .zone:not(.locked):hover { transform: translateX(3px); }
  .store-row:hover, .link-row:hover { border-color: var(--border-medium); }

  /* ── overlays should cover the whole viewport, not just content ── */
  .celeb { position: fixed; }
  .player-picker-overlay { z-index: 400; }
}