/* ==========================================================================
   JUNGLE SAFARI — DENSITY
   Loaded LAST. Nothing here changes what anything IS; it only changes how much
   room it takes. Delete this file and the game is exactly as tall as it was.

   The problem: at 100% browser zoom on an ordinary 1080p laptop, the board and
   the reward screen both ran off the bottom of the window. Children scroll past
   things they cannot see, and teachers projecting the game cannot scroll at all.
   A classroom screen should be a SCREEN — one glance, everything on it.

   The approach: because the stylesheet is built on rem and clamp(), the whole
   interface scales from one number. So we shrink the root, then claw back the
   handful of places that were spending vertical space they had not earned.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE ROOT
   16px -> 15px on a normal desktop, 14px when the window is genuinely short
   (a 768px-tall laptop with a browser chrome and a taskbar). Everything
   measured in rem follows automatically.
   -------------------------------------------------------------------------- */
@media (min-width: 1051px) {
  html { font-size: 15px; }
}
@media (min-width: 1051px) and (max-height: 860px) {
  html { font-size: 14px; }
}
@media (min-width: 1051px) and (max-height: 760px) {
  html { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   2. VERTICAL RHYTHM
   The gaps between the big slabs were tuned for a page you scroll. Tighten.
   -------------------------------------------------------------------------- */
@media (min-width: 1051px) {
  :root { --gap: 1rem; }

  .app-shell { padding-block: 0.7rem; gap: 0.7rem; }
  .topbar { padding: 0.5rem 0.9rem; }

  .section-heading { margin-bottom: 0.7rem; }
  .section-heading h2 { margin: 0.1rem 0 0.25rem; }
  .section-heading p { margin: 0; }

  /* The start screen's hero was reserving 58vh of height for a picture. */
  .start-screen .hero-card { min-height: clamp(280px, 40vh, 400px); }
}

/* --------------------------------------------------------------------------
   3. THE BOARD — the screen that overflowed worst
   Eight landmark cards, each with a badge, a name, a bar, three chips and a
   button, plus a ±16px zig-zag. It does not need to be 620px tall.
   -------------------------------------------------------------------------- */
@media (min-width: 1051px) {
  .map-collection { margin-bottom: 0.6rem; padding: 0.4rem 0.9rem; }
  .grade-filter { margin-bottom: 0.6rem; }

  .trail-cell.up   { transform: translateY(-10px); }
  .trail-cell.down { transform: translateY(10px); }

  .trail-node { max-width: 200px; padding: 0.75rem 0.6rem 0.85rem; gap: 0.3rem; }
  .node-badge { width: clamp(66px, 6.4vw, 84px); }
  .node-name  { font-size: clamp(0.95rem, 1.15vw, 1.12rem); }
  .node-chip  { font-size: 0.64rem; padding: 0.08rem 0.42rem; }
  .node-cta   { padding: 0.38rem 0.9rem; font-size: 0.84rem; }
  .node-progress { height: 6px; }

  /* The mode rail: four cards, each now a two-row grid. Trim the padding. */
  .expedition-modes { gap: 0.6rem; margin-top: 0.9rem; }
  .mode-piece { padding: 0.75rem 0.8rem; gap: 0.4rem 0.7rem; }
  .mode-piece-emblem { width: 62px; height: 62px; }
  .mode-piece-title { font-size: 1rem; }
  .mode-piece-desc { font-size: 0.78rem; }
}

/* --------------------------------------------------------------------------
   4. THE REWARD SCREEN
   -------------------------------------------------------------------------- */
@media (min-width: 1051px) {
  .reward-card { padding: clamp(1.1rem, 2.4vw, 2.2rem); }
  .reward-icon { width: clamp(6.5rem, 9vw, 9rem); height: clamp(6.5rem, 9vw, 9rem); }
  .reward-chest { margin-bottom: 0.8rem; }
  .summary-grid { gap: 0.6rem; margin: 0.9rem 0 1rem; }
  .summary-item { padding: 0.65rem 0.7rem; }
  .summary-item strong { font-size: 1.25rem; }
  .reward-card .hero-actions { margin-top: 1rem; }
}

/* --------------------------------------------------------------------------
   5. BUTTONS THAT WERE SHOUTING
   .large-btn was sized for a phone thumb and then used on a desktop footer.
   The report actions in particular (Print / Copy / Reset Local Progress) were
   as big as the primary call to action on the start screen.
   -------------------------------------------------------------------------- */
@media (min-width: 1051px) {
  .report-actions button,
  .report-actions .secondary-btn,
  .report-actions .danger-btn {
    --btn-drop: 4px;
    min-height: 36px;
    padding: 0.42rem 0.95rem;
    font-size: 0.84rem;
    border-radius: 0.6rem;
  }

  /* Destructive actions do not deserve equal weight with safe ones. Reset sits
     apart, quieter, and only turns properly red when you reach for it. */
  .report-actions .danger-btn {
    margin-inline-start: auto;
    filter: saturate(0.72) brightness(0.95);
  }
  .report-actions .danger-btn:hover,
  .report-actions .danger-btn:focus-visible { filter: none; }

  .large-btn { padding: 0.6rem 1.2rem; font-size: 0.95rem; }
}

/* --------------------------------------------------------------------------
   6. GAMEPLAY
   The one screen that must never scroll: a child mid-word should not have to
   hunt for the Check button.
   -------------------------------------------------------------------------- */
@media (min-width: 1051px) {
  .activity-panel { padding: 0.9rem 1rem; }
  .clue-card { min-height: clamp(78px, 9vh, 108px); padding-block: 0.7rem; }
  .answer-zone, .tiles-zone { padding: 0.6rem; }
}