/* ═══════════════════════════════════════════════════════════════════════
   The phone layer.

   The audience arrives from TikTok, which means the first session is almost
   certainly on a phone held in one hand. This file is loaded last and does
   three things: moves navigation to the thumb, collapses the two-column
   desktop layouts into single columns that read top-to-bottom, and makes
   every tap target a real key.

   Everything here lives behind media queries — the desktop layout above it
   is untouched.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Bottom navigation (all sizes: defined here, shown only on phones) ── */
.qq-mnav { display: none; }

@media (max-width: 760px) {
  :root {
    --qq-mnav-h: calc(60px + env(safe-area-inset-bottom, 0px));
    /* The risk strip is position:fixed above the nav, so its height has to be
       reserved too — it was not, and it sat on top of whatever button was at
       the bottom of the scroll. Two lines at 390px wide. */
    --qq-risk-h: 40px;
  }

  html, body { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

  /* The app scrolls; the nav does not. */
  #qq-main-app { padding-bottom: calc(var(--qq-mnav-h) + var(--qq-risk-h, 0px) + 10px); }

  .qq-mnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(5, 8, 15, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(148, 163, 184, .14);
  }
  .qq-mnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 4px 5px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: #7d8ea8; /* FAZ 11: 10.5px'te #61728c ~4:1 — en yorucu elemandı */
    font-family: Outfit, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: color .15s ease, background .15s ease;
  }
  .qq-mnav-item svg { width: 22px; height: 22px; }
  .qq-mnav-item.is-active { color: #6cc7f5; background: rgba(108, 199, 245, .08); }
  .qq-mnav-item:active { transform: scale(.94); }

  /* The nav vanishes inside a lesson: full immersion, no accidental exits.
     Same during the first-run dock, which points at an element the bar would
     otherwise cover. */
  body:has(#academy-level-content.aca-lesson-open) .qq-mnav,
  body:has(.qq-fm) .qq-mnav { display: none; }
  body:has(#academy-level-content.aca-lesson-open) #qq-main-app { padding-bottom: 0; }

  /* The desktop pill tabs duplicate the bottom nav — one navigation, not two. */
  .qq-nav-main { display: none; }

  /* ── HUD: compact rows ──────────────────────────────────────────────── */
  /* styles.css already wraps the bar under 900px; this layer tightens it.
     Row 1: brand. Row 2: vitals tray + language + gear. Row 3: progress. */
  #qq-main-app { padding-left: 10px; padding-right: 10px; padding-top: 8px; }
  .qq-hud {
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
  }
  .qq-hud-logo { width: 32px; height: 32px; }
  .qq-hud-stats { justify-content: space-between; width: 100%; gap: 8px; }
  .qq-hud-stat { padding: 2px 9px; }
  /* The gear duplicates the bottom-nav "Hesap" tab and, on a narrow HUD row,
     spilled past the rounded frame edge. One way into settings, in the thumb
     zone. */
  .qq-hud .qq-hud-gear { display: none; }

  /* ── Academy home ───────────────────────────────────────────────────── */
  /* The left "Nerede kaldın" terminal rail is desktop chrome: on a phone the
     journey map already shows exactly where you stopped, so the rail was a
     redundant slab the user had to scroll past. Hidden — map is the home. */
  #mode-boss .aca-terminal-wrap { display: none; }
  #mode-boss { min-height: 0; }
  #campaign-scroll-area { min-height: 60vh; }
  .aca-journey { padding-top: 40px; padding-bottom: 40px; }

  .aca-home-hello h1 { font-size: 24px; }
  .aca-home-hello { margin-bottom: 10px; }

  /* Today band on a phone: forcing three stats + ring onto ONE nowrap row
     overlapped the chips — the long "Görev" title (nowrap strong) spilled over
     its neighbour. Use a 2-row grid instead: Seri + Bugünkü XP + ring on top,
     the mission title spanning full width below where it has room to wrap. */
  .aca-today-band {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    grid-template-areas:
      "streak xp   ring"
      "task   task ring";
    align-items: center;
    gap: 6px 10px;
    padding: 12px 14px;
  }
  .aca-today-chip { flex: none; min-width: 0; }
  .aca-today-chip:nth-of-type(1) { grid-area: streak; }
  .aca-today-chip:nth-of-type(2) { grid-area: xp; }
  .aca-today-chip:nth-of-type(3) { grid-area: task; }
  .aca-today-chip span { font-size: 10.5px; letter-spacing: .03em; margin-bottom: 2px; }
  .aca-today-chip strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .aca-today-chip:nth-of-type(3) strong { white-space: normal; line-height: 1.2; font-size: 14px; }
  .aca-today-ring { grid-area: ring; align-self: center; flex: 0 0 auto; width: 46px; height: 46px; font-size: 10.5px; border-width: 3px; }

  /* Mission card: single column, art below copy. */
  .aca-journey-now { display: flex; flex-direction: column; padding: 16px; gap: 14px; }
  .aca-campaign-art { width: 100%; }
  .aca-campaign-art canvas { width: 100% !important; height: auto !important; }

  /* Tab intro panels: face on top, button full width (already wraps). */
  .qq-tab-intro { padding: 14px; gap: 12px; }

  /* ── Lesson stage ───────────────────────────────────────────────────── */
  /* On desktop the lesson overlays its (tall) Academy container with
     position:absolute. On a phone that container is allowed to shrink, so
     the lesson pins to the viewport itself — a real full-screen take-over,
     which is also what a phone lesson should be. */
  #academy-level-content.aca-lesson-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 90;
  }
  /* The action dock hugs the home-indicator area instead of hiding under it. */
  #academy-level-content.aca-lesson-open #academy-lesson-area {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .aca-live-nav-primary, .aca-check-btn, .aca-hook-btn { min-height: 50px; }

  /* Interactive question scene: the rigid two-row grid (chart / dock) trapped
     the "DEVAM" button below the fold once a correct-answer banner grew the
     dock — the dock's internal scroll was not discoverable, so the lesson
     felt stuck. On phones the whole scene flows in one page scroll instead:
     chart capped at 40vh, options and the continue button below it, and the
     lesson area itself scrolls to reach them. */
  #academy-level-content.aca-lesson-open #academy-lesson-area {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #academy-level-content.aca-lesson-open .aca-lesson-viewport-interactive {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
  }
  .aca-interactive-scene {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    gap: 12px;
  }
  .aca-interactive-chart {
    flex: 0 0 auto !important;
    height: 40vh !important;
    max-height: 40vh !important;
  }
  .aca-interactive-dock {
    flex: 0 0 auto !important;
    overflow: visible !important;
    min-height: 0 !important;
  }
  /* Sticky bottom made sense only inside the old scrolling dock; in the page
     flow it would pin the button over later content. */
  .aca-interactive-dock #check-panel-container,
  .aca-interactive-dock > button:last-child {
    position: static !important;
  }

  /* ── Arena ──────────────────────────────────────────────────────────── */
  /* Belt-and-braces single column: the 1100px desktop split must never win
     on a phone, whatever loads last. */
  .rp-stage-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  /* The four-step strip keeps its numbers; the words come back per-step in
     the panel itself. Four labels plus connectors cannot fit in 390px. */
  .rp-stepper { gap: 6px; }
  .rp-stepper .rp-step-label { display: none; }
  .rp-step-line { min-width: 10px; }
  #mode-replay .glass { padding: 12px; }
  /* Metrics: a scrollable chip rail, not four chips crushed into one row. */
  #rp-metrics-strip {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #rp-metrics-strip::-webkit-scrollbar { display: none; }
  .rp-metric-chip { flex: 0 0 auto; min-width: 82px; text-align: center; }
  .rp-decision-col { padding: 0; gap: 10px; }
  /* Session bar: one calm row, no wrapping walls. */
  .ar-sess-bar { padding: 8px 10px; gap: 8px; }
  .ar-sess-label { max-width: none; flex: 1 1 100%; order: 10; font-size: 12.5px; }
  /* The chart is the arena. Edge-to-edge stage, tall portrait canvas; svh so
     the browser toolbar hiding/appearing doesn't re-layout (and re-render)
     the canvas on every scroll. */
  .rp-chart-stage { min-height: 0; margin-left: -4px; margin-right: -4px; border-radius: 16px; box-shadow: 0 10px 28px rgba(2, 6, 14, .45); }
  #rp-cv { min-height: 62vh !important; min-height: 60svh !important; }
  .rp-chart-stage.ar-fs #rp-cv { min-height: 0 !important; }
  /* Decision keys are the thumb's main target — real keys, not chips. */
  .ar-key { min-height: 56px; }
  .rp-gorev-seridi { padding: 12px; }
  /* Orion's coach card: full-width sheet above the nav, not a floating
     desktop toast covering the decision keys. */
  .rp-builder-coach { left: 10px; right: 10px; max-width: none; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  /* Utility strips scroll instead of wrapping into a wall. */
  .rp-openlab-only { margin-left: 0; }

  .arena-gate { padding: 18px 12px; align-items: flex-start; overflow-y: auto; }
  .arena-gate-title { font-size: 22px; }

  /* ── Phone paint budget ─────────────────────────────────────────────── */
  /* backdrop-filter on always-visible fixed elements forces the GPU to
     re-blur everything behind them on every scroll frame. The backgrounds
     are near-opaque already — solid paint, indistinguishable, free. */
  .qq-mnav { background: rgba(6, 9, 16, .97); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .orion-reaction { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .arena-gate, .rp-orion-brief { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* ── Compositor safety: the torn/garbled pixels on Android ──────────────
     Three hazards stacked on the Arena chart, and together they produced
     smeared chart pixels over the decision blocks plus the stutter:

     1. `overflow:hidden` + `border-radius` on a box wrapping a LARGE canvas
        forces Chrome to allocate a rounded mask layer over the canvas
        texture. On mid-range Android GPUs that mask intermittently fails
        and composites stale tiles — exactly the garbage in the screenshot.
        Fix: no clip on the stage; the canvas rounds its own corners.
     2. A 50px-blur box-shadow under that same layer keeps a second large
        surface alive next to it.
     3. Every reflow (opening a decision block) re-composited the lot.

     Painting is contained so a decision block opening can no longer force a
     repaint of the chart region above it. */
  .rp-chart-stage {
    overflow: visible;
    box-shadow: none;
    isolation: isolate;
  }
  #rp-cv,
  .rp-draw-layer {
    border-radius: 16px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .rp-decision-col,
  .rp-gorev-seridi,
  #rp-tree,
  .builder-cat { contain: layout paint; }

  /* Animating box-shadow/filter cannot be GPU-composited — it repaints the
     element every single frame, forever. Eight of these were running at once
     (node pulses, orb glows, coach pulse). The highlight they carry is
     meaning, so it stays as a STATIC ring; only the endless repaint goes. */
  .aca-orion-glow,
  .rp-coach-pulse,
  .qq-acc-orb,
  .aca-node.current .aca-node-orb { animation: none !important; }
  .rp-coach-pulse { box-shadow: 0 0 0 3px rgba(34, 211, 238, .26); }
  .aca-orion-glow { filter: none; opacity: .75; }

  /* ── Auth / cold open ───────────────────────────────────────────────── */
  /* iOS zooms any focused input below 16px; keep focus where it belongs. */
  #qq-login input[type="email"],
  #qq-login input[type="password"],
  #qq-login input[type="text"] { font-size: 16px; }
  #login-main-container { padding-left: 18px; padding-right: 18px; }

  /* ── Account ────────────────────────────────────────────────────────── */
  .qq-account-hero { flex-wrap: wrap; }
  .qq-account-actions .qq-acc-btn { min-height: 46px; }

  /* ── Modals as sheets ───────────────────────────────────────────────── */
  #chart-zoom-modal { padding: 0 !important; align-items: stretch !important; }
  #chart-zoom-modal .qq-panel {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    display: flex; flex-direction: column;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #chart-zoom-modal canvas { width: 100% !important; height: auto !important; }

  /* Result modal breathing room above the nav. */
  #result { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

  /* ── First-run dock ─────────────────────────────────────────────────── */
  .qq-fm-dock { width: calc(100vw - 20px); }

  /* Orion's reaction toast is fixed bottom-right on desktop; on a phone that
     sits it right on top of the decision buttons and the bottom nav. Move it
     to the top, clear of everything the thumb is reaching for. */
  .orion-reaction {
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    bottom: auto !important;
    left: 10px; right: 10px;
    width: auto !important;
    transform: translateY(-16px) scale(.97);
  }
  .orion-reaction.show { transform: translateY(0) scale(1); }

  /* ── General touch hygiene ──────────────────────────────────────────── */
  button, [role="button"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
}

/* Very small phones: the HUD loses the brand words, keeps the logo. */
@media (max-width: 390px) {
  .qq-hud .qq-hud-gear { display: none; }
  .qq-lang { transform: scale(.9); }
}