/* Gameplay UI — unified debrief, snow-pit modal, hut logbook.
   Palette: THE AVALANCHE CHRONICLES illustrated look, mapped from
   CONFIG.PALETTE (comic covers): paper whites, ice teal, slate-navy ink,
   star gold, pine green. No pure black; hut-roof red-orange ONLY as the
   thin alarm accent (BURIED / DNF / deductions). Name tags wear the JACKET
   (#70): MIKE orange puffer, TOBY navy, Maya olive, Annie yellow, Isabelle
   CORAL (her red beanie — #97 moved her off teal, which read as Toby's blue),
   condor gold-buff — the same rule the radio chips have used since #46. */

:root {
  --gp-paper: #fbfdfa;        /* paper white (PALETTE.snow family) */
  --gp-paper2: #edf4f0;       /* chip / box tint (hemiSky family) */
  --gp-ink: #243244;          /* PALETTE.ink — slate, never black */
  --gp-ink-soft: rgba(36, 50, 68, 0.6);
  --gp-line: rgba(36, 50, 68, 0.16);
  --gp-teal: #7fb8ac;         /* ice-teal mid */
  --gp-ice: #bfe4de;          /* sky teal */
  --gp-gold: #f0b43c;         /* PALETTE.starGold */
  --gp-gold-deep: #cf8f1e;    /* PALETTE.starGlow — gold that reads on paper */
  --gp-accent: #e05a48;       /* PALETTE.hutRoof — the rare alarm accent */
  --gp-pine: #3f7264;         /* PALETTE.pine — the "good" green */
  --gp-win: #2f9e57;
  /* name tags wear the JACKET (#70, admin: "Mike's color tag for his name should
     be orange like his jacket") — the radio chips in styles.css have followed
     this rule since #46; the paper chips predated it and now agree. */
  --gp-mike: #f5821e;         /* MIKE orange chip — his vivid puffer, the radio's --mike hex exactly */
  --gp-toby: #7db8e8;         /* TOBY blue chip — his navy jacket, lifted for paper (the blue the Mike chip used to wear) */
  --gp-coolink: #7db8e8;      /* the paper's cool ink accent — factoid rule, tip border, report marker. Was --gp-mike until the tags took the jacket colors; it is a PAPER accent, not a voice. */
  --gp-maya: #b5cc8e;         /* MAYA green chip (#46) — her olive shell on paper */
  --gp-annie: #f3d98c;        /* ANNIE yellow chip (#50) — her shell on paper */
  --gp-isa: #e98c7f;          /* ISABELLE coral chip (#97) — her RED BEANIE (0xe05a48) lifted for paper.
                                 Was #8fc6d4, her teal shell — but that sat one hue-step from Toby's
                                 #7db8e8 and admin could not tell who was speaking in the condor scenes
                                 (playtest 2026-08-10). Her hat is the distinctive garment, so the tag
                                 takes it, per the jacket rule. LIFTED ON PURPOSE: raw #e05a48 IS
                                 --gp-accent, the BURIED / DNF alarm — a name tag must never wear the
                                 death colour, so this is the same paper-lift every other chip gets. */
  --gp-condor: #e8c98a;       /* CONDOR gold-buff chip (#68) — ruff over dark wings */
}

.gp-hidden { display: none !important; }

/* ── unified end-of-day debrief ─────────────────────────────────────────── */
.gp-debrief {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 80; width: min(560px, 92vw); max-height: 88vh; overflow-y: auto;
  padding: 22px 26px 14px; border-radius: 18px;
  background: var(--gp-paper); color: var(--gp-ink);
  border: 2px solid var(--gp-ink);
  font-family: 'Outfit', system-ui, sans-serif; font-size: 14px;
  box-shadow: 0 14px 44px rgba(36, 50, 68, 0.35);
}
.gp-banner { font-size: 34px; font-weight: 900; letter-spacing: 0.04em; line-height: 1.05; }
.gp-red { color: var(--gp-accent); } .gp-green { color: var(--gp-win); } .gp-slate { color: var(--gp-ink); }
.gp-subline { margin: 4px 0 10px; font-size: 13px; color: var(--gp-ink-soft); }
.gp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.gp-statchip {
  font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 20px;
  background: var(--gp-paper2); border: 1px solid var(--gp-line); white-space: nowrap;
}
.gp-factoid {
  border: 1.5px dashed var(--gp-coolink); border-radius: 10px; background: #eef6fc;
  padding: 9px 12px; font-size: 12.5px; line-height: 1.45; margin-bottom: 10px;
}
.gp-quote { display: flex; gap: 8px; align-items: baseline; margin: 8px 0; font-size: 13px; font-style: italic; line-height: 1.4; }
.gp-tobyline { color: #9c5f28; } /* PALETTE.bronzeGlow — Toby's warm voice on paper */
.gp-chip {
  flex: none; font-style: normal; font-weight: 800; font-size: 10px; letter-spacing: 0.09em;
  padding: 2px 8px; border-radius: 6px; color: var(--gp-ink);
}
.gp-mike-chip, .gp-mike { background: var(--gp-mike); }
.gp-toby-chip, .gp-toby { background: var(--gp-toby); }
/* #87 — Andy: black, and the only chip that needs light type on it */
.gp-andy { background: #14181f; color: #f2f5f8; }
.gp-willow { background: #6f8fa8; color: #f4f8fb; } /* #87 — the buried one: cold slate, and the only voice that arrives from under the snow */
.gp-unknown { background: #c0453f; color: #fff5f4; }
.gp-maya { background: var(--gp-maya); }
.gp-annie { background: var(--gp-annie); }
.gp-isa { background: var(--gp-isa); }       /* #68 */
.gp-condor { background: var(--gp-condor); } /* #68 */

/* the card table inside the debrief */
.gp-cardbox { margin: 10px 0 2px; padding: 11px 12px 9px; border-radius: 12px; background: var(--gp-paper2); border: 1px solid var(--gp-line); }
.gp-row { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.gp-dim { opacity: 0.45; }
.gp-cat { position: relative; width: 96px; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; }
.gp-q {
  display: inline-block; margin-left: 4px; width: 13px; height: 13px; line-height: 13px;
  text-align: center; border-radius: 50%; background: var(--gp-ink); color: var(--gp-paper);
  font-size: 9px; cursor: help; opacity: 0.65;
}
.gp-tip {
  display: none; position: absolute; left: 0; bottom: 130%; z-index: 90; width: 300px;
  padding: 9px 11px; border-radius: 8px; background: var(--gp-ink); border: 1px solid var(--gp-coolink);
  font-size: 11.5px; font-weight: 400; font-style: normal; line-height: 1.45; letter-spacing: 0; color: #e2f5ef;
  box-shadow: 0 6px 20px rgba(36, 50, 68, 0.45);
}
/* hover opens tips only where hover truly exists — Android's STICKY tap-hover
   kept tips visible after the close tap removed the class (admin: "the ✕
   does not work"); touch runs purely on .gp-tip-open */
@media (hover: hover) { .gp-cat:hover .gp-tip { display: block; } }
.gp-tip-open .gp-tip { display: block; }
.gp-w { width: 34px; font-size: 10px; color: var(--gp-ink-soft); text-align: right; }
.gp-bar { flex: 1; height: 7px; background: rgba(36, 50, 68, 0.14); border-radius: 4px; overflow: hidden; }
.gp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gp-teal), var(--gp-gold)); border-radius: 4px; }
.gp-pts { width: 28px; text-align: right; font-weight: 800; font-size: 13px; }
.gp-adj { font-size: 11.5px; margin-top: 4px; font-weight: 600; }
.gp-minus { color: var(--gp-accent); } .gp-plus { color: var(--gp-pine); }
.gp-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 9px; padding-top: 8px; border-top: 1.5px solid var(--gp-line);
  font-weight: 900; letter-spacing: 0.08em; font-size: 12px;
}
.gp-total b { font-size: 32px; color: var(--gp-gold-deep); line-height: 1; }
.gp-coins { /* #65 — the day's payout row under the total */
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 4px; font-weight: 800; letter-spacing: 0.08em; font-size: 11px;
  color: var(--gp-ink-soft);
}
.gp-coins b { font-size: 16px; color: var(--gp-gold-deep); letter-spacing: 0.02em; }
.gp-coin { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; } /* #67 r3 — the drawn gold coin rides the local font size everywhere */

.wc-float { /* #69 — the "+N" pickup/grant floater over Toby's head: the wallet's only in-moment voice (the total lives in the HUB, #73) */
  position: fixed;
  transform: translate(-50%, -100%);
  z-index: 60;
  pointer-events: none;
  white-space: nowrap;
  font: 800 22px Outfit, sans-serif;
  color: var(--gp-gold-deep);
  text-shadow: 0 1px 0 rgba(242, 249, 254, 0.9), 0 -1px 0 rgba(242, 249, 254, 0.9),
    1px 0 0 rgba(242, 249, 254, 0.9), -1px 0 0 rgba(242, 249, 254, 0.9); /* paper halo — reads on snow and sky alike */
}
.gp-dnf-row { display: flex; align-items: baseline; gap: 12px; }
.gp-dnf { font-size: 38px; font-weight: 900; color: var(--gp-accent); letter-spacing: 0.05em; }
.gp-dnf-note { font-size: 11.5px; color: var(--gp-ink-soft); line-height: 1.35; }

.gp-btns { display: flex; gap: 10px; margin: 14px 0 6px; }
.gp-btn {
  padding: 10px 20px; border-radius: 10px; cursor: pointer; font-family: inherit;
  font-weight: 800; font-size: 13px; letter-spacing: 0.05em; border: none;
}
.gp-primary { background: var(--gp-gold); color: var(--gp-ink); box-shadow: 0 2px 0 var(--gp-gold-deep); }
.gp-primary:hover { background: #ffcf6b; }
.gp-secondary { background: none; border: 2px solid var(--gp-ink); color: var(--gp-ink); }
.gp-secondary:hover { border-color: var(--gp-gold-deep); color: var(--gp-gold-deep); }
.gp-foot { margin-top: 6px; font-size: 10px; color: var(--gp-ink-soft); letter-spacing: 0.04em; }

/* ── shared panel headline — the pit-modal family's survivors: pack, shop,
      quest and chat panels all wear the head + title pair. The pit modal
      itself retired in #76 (the read is a cinematic on the scene stage). ── */
.gp-pit-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.gp-pit-title { font-weight: 900; letter-spacing: 0.07em; font-size: 13px; color: var(--gp-ink); }

/* ── #66 backpack: the 12-slot kit list (pit-modal family) ──────────────── */
.gp-pack {
  position: fixed; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center;
  background: rgba(36, 50, 68, 0.4); font-family: 'Outfit', system-ui, sans-serif;
}
.gp-pack-panel {
  width: min(430px, 92vw); max-height: 86vh; max-height: 90svh; overflow-y: auto;
  background: var(--gp-paper); color: var(--gp-ink); border-radius: 14px;
  border: 2px solid var(--gp-ink); padding: 16px 20px 12px;
  box-shadow: 0 14px 44px rgba(36, 50, 68, 0.4);
}
.gp-pack-count { margin-left: auto; font-weight: 900; font-size: 12px; color: var(--gp-gold-deep); letter-spacing: 0.06em; }
/* FOUR columns, not three (#66 r2, the 9→12 bump). Twelve slots at three columns is a FOURTH ROW,
   and the row does not fit: it scrolls on a 13" laptop, on a short phone in portrait, and it clips
   the bottom row in the landscape tier below — which is the one place the panel promises no scroll.
   4×3 is the same three rows the pack has always had, 91px tiles instead of 125px, every label still
   on one line, and it needs no override in the compact tier. Measured on all four before landing. */
.gp-pack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gp-pack-slot {
  aspect-ratio: 1; border: 1.5px dashed var(--gp-line); border-radius: 10px;
  background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 6px 2px 4px; font-family: inherit;
}
.gp-pack-slot.gp-owned {
  border: 1.5px solid var(--gp-line); background: var(--gp-paper2); cursor: pointer;
}
.gp-pack-slot.gp-owned:hover, .gp-pack-slot.gp-sel { border-color: var(--gp-gold-deep); }
.gp-pack-slot svg { width: 56%; height: auto; }
.gp-pack-slot span { font-size: 8.5px; font-weight: 800; letter-spacing: 0.05em; color: var(--gp-ink-soft); }
.gp-pack-slot.gp-sel span { color: var(--gp-gold-deep); }
.gp-pack-cap { margin-top: 10px; font-size: 12px; line-height: 1.4; color: var(--gp-ink-soft); min-height: 32px; }
.gp-pack-cap b { color: var(--gp-ink); letter-spacing: 0.04em; }

/* ── #67 the ski shop (pit-modal family) ────────────────────────────────── */
.gp-shop {
  position: fixed; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center;
  background: rgba(36, 50, 68, 0.4); font-family: 'Outfit', system-ui, sans-serif;
}
.gp-shop-panel {
  width: min(470px, 94vw); max-height: 88vh; max-height: 92svh; overflow-y: auto;
  background: var(--gp-paper); color: var(--gp-ink); border-radius: 14px;
  border: 2px solid var(--gp-ink); padding: 16px 20px 12px;
  box-shadow: 0 14px 44px rgba(36, 50, 68, 0.4);
}
.gp-shop-note { margin: 2px 0 6px; font-size: 11.5px; font-weight: 700; color: var(--gp-accent); }
.gp-shop-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 4px 0;
  background: var(--gp-paper2); border: 1.5px solid var(--gp-line); border-radius: 10px;
}
.gp-shop-have { opacity: 0.6; }
.gp-shop-ic svg { width: 30px; height: 30px; display: block; }
.gp-shop-name { flex: 1; font-weight: 800; font-size: 11.5px; letter-spacing: 0.05em; }
.gp-shop-name i { display: block; font-style: normal; font-weight: 600; font-size: 10px; color: var(--gp-ink-soft); }
.gp-shop-owned { font-weight: 900; font-size: 10.5px; color: var(--gp-pine); letter-spacing: 0.07em; }
.gp-shop-price { font-weight: 800; font-size: 11.5px; color: var(--gp-ink-soft); white-space: nowrap; }
.gp-shop-buy {
  font-family: inherit; font-weight: 900; font-size: 11px; letter-spacing: 0.04em; white-space: nowrap;
  background: var(--gp-gold); color: var(--gp-ink); border: 2px solid var(--gp-ink);
  border-radius: 999px; padding: 6px 12px; cursor: pointer;
}
.gp-shop-buy:active { transform: translate(1px, 1px); }

/* ── #72 Mike's morning quiz (the hut card) ──────────────────────────────── */
.gp-chat {
  position: fixed; inset: 0; z-index: 76; display: flex; align-items: center; justify-content: center;
  background: rgba(36, 50, 68, 0.4); font-family: 'Outfit', system-ui, sans-serif;
}
.gp-chat-panel {
  width: min(520px, 92vw); max-height: 84vh; max-height: 88svh; overflow-y: auto;
  background: var(--gp-paper); color: var(--gp-ink); border-radius: 14px;
  border: 2px solid var(--gp-ink); padding: 18px 22px 12px;
  box-shadow: 0 14px 44px rgba(36, 50, 68, 0.4);
}
.gp-chat-x p { font-size: 13.5px; line-height: 1.5; margin: 8px 0; }
.gp-chat-x .gp-quote { margin: 6px 0 10px; }

/* the progress header — snowflakes, not a bar (admin): ❄ done, ✻ still ahead.
   Sits in the pit-head row beside the MIKE chip, count on the far right. */
.gp-quiz-flakes { display: inline-flex; gap: 4px; margin-left: 9px; font-size: 14px; line-height: 1; }
.gp-flake-on { color: var(--gp-gold-deep); opacity: 1; }
.gp-flake-off { color: var(--gp-ink); opacity: 0.22; } /* same glyph, hollowed by opacity — filled-vs-faded reads as progress where two different symbols read as two different things */
.gp-quiz-count { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--gp-ink-soft); }

.gp-quiz-q { font-size: 14.5px !important; font-weight: 600; line-height: 1.45; }
.gp-quiz-asked { color: var(--gp-ink-soft); font-size: 12.5px !important; font-weight: 600; font-style: italic; margin-bottom: 2px !important; }

/* options stack in ONE column — the panel must read the same with 3 or 4
   (#72 v9), and a wrapped two-column grid re-orders itself when it reflows */
.gp-quiz-opts {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px; padding-top: 10px; border-top: 1.5px solid var(--gp-line);
}
.gp-quiz-opt {
  padding: 9px 13px; border-radius: 10px; border: 1.5px solid var(--gp-line);
  background: var(--gp-paper2); color: var(--gp-ink); cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600; text-align: left; line-height: 1.35;
}
.gp-quiz-opt:hover { border-color: var(--gp-gold-deep); color: var(--gp-gold-deep); }

.gp-quiz-ok { color: #2f7d4f; font-weight: 700; }
.gp-quiz-no { color: #a8452f; font-weight: 700; }
/* the named misconception — set apart so the correction reads as Mike calling
   out a belief, never as another fact on the page (#72 v11) */
.gp-quiz-myth {
  border-left: 3px solid #a8452f; padding-left: 10px; margin: 8px 0 !important;
  font-style: italic; color: var(--gp-ink-soft);
}

.gp-quiz-score { font-size: 30px !important; font-weight: 800; line-height: 1; margin: 4px 0 6px !important; }
.gp-quiz-score span { font-size: 17px; font-weight: 600; color: var(--gp-ink-soft); }
.gp-quiz-paid {
  margin-top: 10px !important; padding-top: 9px; border-top: 1.5px solid var(--gp-line);
  font-size: 13px !important; color: var(--gp-gold-deep);
}
.gp-quiz-nopay { color: var(--gp-ink-soft); }

/* ── #68 quest log (pit-modal family; folds into the #73 dropdown later) ── */
.gp-questlog {
  position: fixed; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center;
  background: rgba(36, 50, 68, 0.4); font-family: 'Outfit', system-ui, sans-serif;
}
.gp-quest-panel {
  width: min(460px, 92vw); max-height: 86vh; max-height: 90svh; overflow-y: auto;
  background: var(--gp-paper); color: var(--gp-ink); border-radius: 14px;
  border: 2px solid var(--gp-ink); padding: 16px 20px 12px;
  box-shadow: 0 14px 44px rgba(36, 50, 68, 0.4);
}
.gp-quest-card { /* r4 — one card per quest: title row, then the story as a checklist */
  margin: 9px 0; padding: 10px 12px 8px; border-radius: 10px;
  background: var(--gp-paper2); border: 1.5px solid var(--gp-line);
}
.gp-quest-card.gp-q-complete { opacity: 0.8; }
.gp-quest-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 900; letter-spacing: 0.07em; margin-bottom: 7px; }
.gp-q-step { display: flex; gap: 8px; margin: 5px 0; }
.gp-q-step i { flex: none; width: 15px; text-align: center; font-style: normal; font-weight: 900; font-size: 12px; line-height: 1.4; }
.gp-q-step p { font-size: 12.5px; line-height: 1.4; margin: 0; }
.gp-q-step small { display: block; font-size: 11.5px; line-height: 1.42; margin-top: 3px; color: var(--gp-ink-soft); font-weight: 400; }
.gp-q-past i { color: var(--gp-pine); }
.gp-q-past p { color: var(--gp-ink-soft); }
.gp-q-now i { color: var(--gp-gold-deep); }
.gp-q-now p { font-weight: 700; }
.gp-quest-chip { /* r3 — the status at a glance: parallel quests stay followable */
  margin-left: auto; flex: none; font-size: 9px; font-weight: 900; letter-spacing: 0.08em;
  padding: 2px 8px; border-radius: 999px; border: 1.5px solid currentColor;
}
.gp-q-ongoing { color: var(--gp-gold-deep); background: #fdf6e3; }
.gp-q-done { color: var(--gp-pine); background: #edf4ef; }

/* ── #68 the scene player — a movie beat, never a modal: letterboxed frame,
      one speaker box low in the shot, NEXT to advance. The world stays live
      behind it (the two-shot camera owns the lens). ───────────────────────── */
.gp-scene {
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  font-family: 'Outfit', system-ui, sans-serif;
}
.gp-scene::before, .gp-scene::after { /* the letterbox — the cinematic signal, cheap */
  content: ''; position: absolute; left: 0; right: 0; height: min(9vh, 60px);
  background: rgba(22, 30, 44, 0.88);
}
.gp-scene::before { top: 0; }
.gp-scene::after { bottom: 0; }
.gp-scene-box {
  pointer-events: auto; cursor: pointer; position: relative; z-index: 1;
  width: min(620px, 94vw); margin-bottom: max(18px, env(safe-area-inset-bottom));
  background: rgba(251, 253, 250, 0.96); color: var(--gp-ink);
  border: 2px solid var(--gp-ink); border-radius: 14px; padding: 12px 16px 10px;
  box-shadow: 0 10px 34px rgba(36, 50, 68, 0.45);
}
.gp-scene-line { display: flex; gap: 10px; align-items: baseline; }
.gp-scene-line p { font-size: 14.5px; line-height: 1.45; margin: 2px 0 4px; }
.gp-scene-narr { font-style: italic; color: var(--gp-ink-soft); }
.gp-scene-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.gp-scene-btns .gp-btn { padding: 7px 14px; font-size: 12px; }
.gp-scene-reward {
  display: flex; gap: 6px; align-items: center; margin: 6px 0 2px; padding: 7px 10px;
  border-radius: 10px; border: 1.5px dashed var(--gp-gold-deep); background: #fdf6e3;
  font-weight: 800; font-size: 12px; color: var(--gp-gold-deep);
}
.gp-scene-dig { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.gp-scene-dig b { font-size: 20px; font-weight: 900; color: var(--gp-accent); letter-spacing: 0.05em; }
.gp-scene-digbar { flex: 1; height: 14px; border-radius: 999px; border: 2px solid var(--gp-ink); background: var(--gp-paper2); overflow: hidden; }
.gp-scene-digbar i { display: block; height: 100%; background: var(--gp-gold); transition: width 0.1s linear; }
.gp-scene-dig em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--gp-ink-soft); letter-spacing: 0.05em; white-space: nowrap; }

/* ── #68 the carried quest item — r3: it TAKES A SLOT like any item (admin);
      dashed gold border = borrowed, not Toby's kit ── */
.gp-pack-slot.gp-slot-quest { border: 1.5px dashed var(--gp-gold-deep); background: #fdf6e3; }
.gp-pack-slot.gp-slot-quest span { color: var(--gp-gold-deep); font-size: 7.5px; }
.gp-pack-slot.gp-slot-quest:hover, .gp-pack-slot.gp-slot-quest.gp-sel { border-color: var(--gp-ink); }

/* ── hut logbook ────────────────────────────────────────────────────────── */
.gp-logbtn {
  position: fixed; left: 18px; bottom: 18px; z-index: 55;
  padding: 9px 16px; border-radius: 10px; border: 2px solid var(--gp-ink);
  background: var(--gp-paper); color: var(--gp-ink); cursor: pointer;
  font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.04em;
}
.gp-logbtn:hover { border-color: var(--gp-gold-deep); color: var(--gp-gold-deep); }
.gp-log {
  position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw; background: rgba(36, 50, 68, 0.45); backdrop-filter: blur(3px);
  font-family: 'Outfit', system-ui, sans-serif;
}
.gp-log-panel {
  background: var(--gp-paper); color: var(--gp-ink); border: 2px solid var(--gp-ink);
  border-radius: 16px; padding: 18px 22px 12px; max-width: 94vw;
  box-shadow: 0 14px 44px rgba(36, 50, 68, 0.4);
}
.gp-title { font-weight: 900; letter-spacing: 0.08em; font-size: 15px; color: var(--gp-ink); }
.gp-log-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.gp-log-head .gp-title { margin-right: auto; } /* share + ✕ pack right */
/* ── season wrap (#40): the logbook's share button + the debrief nudge ──── */
.gp-share {
  border: none; cursor: pointer; background: var(--gp-gold); color: var(--gp-ink);
  padding: 6px 14px; border-radius: 8px; font-family: inherit; font-weight: 800;
  font-size: 12px; letter-spacing: 0.04em; box-shadow: 0 2px 0 var(--gp-gold-deep); white-space: nowrap;
}
.gp-share:hover { background: #ffcf6b; }
.gp-share:disabled { opacity: 0.65; cursor: default; }
.gp-wrapnudge {
  display: inline-block; margin-top: 8px; padding: 5px 12px; border-radius: 16px;
  background: var(--gp-paper2); border: 1px solid var(--gp-line); cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 11.5px; color: var(--gp-ink-soft);
}
.gp-wrapnudge:hover { border-color: var(--gp-gold-deep); color: var(--gp-gold-deep); }
.gp-wrapempty { /* the go-ski popup — an empty logbook has nothing to wrap */
  position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center;
  background: rgba(36, 50, 68, 0.4); font-family: 'Outfit', system-ui, sans-serif;
}
.gp-wrapempty-panel {
  background: var(--gp-paper); color: var(--gp-ink); border: 2px solid var(--gp-ink);
  border-radius: 14px; padding: 20px 28px 10px; text-align: center;
  box-shadow: 0 14px 44px rgba(36, 50, 68, 0.4);
}
.gp-wrapempty-emoji { font-size: 34px; }
.gp-wrapempty-panel p { font-size: 15px; font-weight: 600; margin: 8px 0 2px; }
.gp-wrapempty .gp-btns { justify-content: center; }
.gp-close {
  border: none; background: var(--gp-paper2); color: var(--gp-ink);
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.gp-log table { border-collapse: collapse; font-size: 13px; }
.gp-log th { font-size: 10.5px; letter-spacing: 0.08em; color: var(--gp-ink-soft); text-align: left; padding: 4px 12px; }
.gp-log td { padding: 6px 12px; border-top: 1px solid var(--gp-line); }
.gp-log .gp-score b { color: var(--gp-gold-deep); font-size: 15px; }
.gp-log .gp-notes { font-size: 11.5px; color: var(--gp-ink-soft); }
.gp-log tbody { display: block; max-height: 58vh; overflow-y: auto; }
.gp-log thead, .gp-log tbody tr { display: table; width: 100%; table-layout: fixed; }
.gp-empty { color: var(--gp-ink-soft); font-size: 14px; padding: 20px 0; }
.gp-log .gp-foot { margin-top: 10px; }

/* ── logbook v2 (admin 2026-07-06): visual REPORT + WX emoji + SCORE minibars,
      tighter cells, HOME dropped ── */
.gp-log th, .gp-log td { padding: 5px 8px; }
.gp-log th, .gp-log td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* th too — fixed layout lets an unclipped header spill onto its neighbor (iPhone portrait, admin 2026-07-10) */
/* thead and tbody rows are separate fixed-layout tables: both need the widths */
.gp-log th:nth-child(1), .gp-log td:nth-child(1) { width: 6%; }   /* DAY */
.gp-log th:nth-child(2), .gp-log td:nth-child(2) { width: 27%; }  /* OBJECTIVE */
.gp-log th:nth-child(3), .gp-log td:nth-child(3) { width: 24%; }  /* REPORT */
.gp-log th:nth-child(4), .gp-log td:nth-child(4) { width: 9%; }   /* WEATHER — extra air before SCORE (admin 2026-07-08) */
.gp-log th:nth-child(5), .gp-log td:nth-child(5) { width: 15%; }  /* SCORE */
.gp-log th:nth-child(6), .gp-log td:nth-child(6) { width: 19%; }  /* NOTES */
.gp-dboxes { font-size: 12px; letter-spacing: 1.5px; }
.gp-dname { font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; color: var(--gp-ink-soft); margin-left: 7px; }
.gp-wx { font-size: 15px; }
.gp-minibars { display: inline-flex; align-items: flex-end; gap: 2px; height: 15px; margin-left: 8px; }
.gp-minibars i { width: 3px; min-height: 1px; background: var(--gp-gold-deep); border-radius: 1px; }

/* ── logbook portrait-phone tier (admin 2026-07-10, iPhone): the desktop
      widths gave DAY 6% and WEATHER 9% — neither fits its own header on a
      ~330px table, so DAY bled into OBJECTIVE and WEATHER into SCORE.
      Rebalance so every header fits, shrink header type, tighten padding. ── */
@media (max-width: 520px) {
  .gp-log { padding: 3vh 2vw; }
  .gp-log-panel { padding: 14px 12px 10px; }
  .gp-log table { width: 100%; font-size: 12px; }
  .gp-log th { font-size: 9px; letter-spacing: 0.02em; }
  .gp-log th, .gp-log td { padding: 5px 5px; }
  .gp-log th:nth-child(1), .gp-log td:nth-child(1) { width: 9%; }   /* DAY */
  .gp-log th:nth-child(2), .gp-log td:nth-child(2) { width: 22%; }  /* OBJECTIVE */
  .gp-log th:nth-child(3), .gp-log td:nth-child(3) { width: 19%; }  /* REPORT */
  .gp-log th:nth-child(4), .gp-log td:nth-child(4) { width: 17%; }  /* WEATHER — the header, not the emoji, sets the floor */
  .gp-log th:nth-child(5), .gp-log td:nth-child(5) { width: 15%; }  /* SCORE */
  .gp-log th:nth-child(6), .gp-log td:nth-child(6) { width: 18%; }  /* NOTES */
  .gp-log .gp-notes { font-size: 10.5px; }
  .gp-dname { display: none; } /* boxes carry the report; the 9.5px name was pure ellipsis at 19% */
}

/* (#70: the Head-out how-to card is decommissioned — its .gp-howto*
   rules went with ui.howToPlay(); the welcome cinematic reuses the
   shared .gp-scene stage, so it needed no CSS of its own.) */

/* ── #70 r2 THE RULEBOOK — the curriculum, stacked beside the cinematic ────
   The dialogue box carries the voice; this carries the mechanics, and it does
   NOT vanish when the player speed-clicks. Left edge, under the clock chips,
   clear of the letterbox and of the touch stick's corner. */
.gp-rules {
  /* the left edge is a CUTOUT edge on a landscape phone in fullscreen: the
     selfie camera punches a hole straight through the rulebook (admin
     playtest 2026-08-10 — "it overlaps the words Your and Mountain between
     the second and third bullet"). Same max(px, env()) guard #devbar and
     #touch-rail already use; on a phone with no cutout the inset is 0 and
     nothing moves. */
  position: fixed; left: max(14px, env(safe-area-inset-left)); top: 96px; z-index: 62; width: min(266px, 40vw);
  padding: 9px 11px 7px; border-radius: 12px;
  background: rgba(251, 253, 250, 0.94); color: var(--gp-ink);
  border: 2px solid var(--gp-ink); box-shadow: 0 6px 20px rgba(36, 50, 68, 0.28);
  font-family: 'Outfit', system-ui, sans-serif; pointer-events: none;
}
.gp-rules > b { display: block; font-size: 9.5px; font-weight: 900; letter-spacing: 0.16em; color: var(--gp-ink-soft); margin-bottom: 5px; }
.gp-rules ul { list-style: none; margin: 0; padding: 0; max-height: 42vh; overflow: hidden; }
.gp-rules li {
  position: relative; margin: 0 0 5px; padding-left: 13px;
  font-size: 11.5px; font-weight: 600; line-height: 1.35;
}
.gp-rules li::before { content: '·'; position: absolute; left: 3px; top: -1px; font-weight: 900; color: var(--gp-gold-deep); }
.gp-rules li:last-child { color: var(--gp-ink); } /* the newest rule reads full-strength */
.gp-rules li:not(:last-child) { opacity: 0.62; }  /* the ones already taught step back */
@keyframes gp-rule-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 0.62; transform: none; } }
.gp-rule-in { animation: gp-rule-in 0.28s ease-out; }

/* ── #70 r2 NEW ITEM — the handover is a moment, not a strip (OoT reference).
   A beat you dismiss: it owns the screen until the player says so. */
.gp-newitem {
  position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 28, 40, 0.52); backdrop-filter: blur(2px);
}
.gp-ni-card {
  width: min(340px, 84vw); padding: 16px 20px 10px; border-radius: 20px; text-align: center;
  background: var(--gp-paper); color: var(--gp-ink); border: 3px solid var(--gp-ink);
  box-shadow: 0 16px 46px rgba(36, 50, 68, 0.45);
  font-family: 'Outfit', system-ui, sans-serif;
}
@keyframes gp-ni-pop { 0% { opacity: 0; transform: scale(0.82) translateY(14px); } 60% { transform: scale(1.04); } 100% { opacity: 1; transform: none; } }
.gp-ni-in { animation: gp-ni-pop 0.34s cubic-bezier(0.2, 1.1, 0.4, 1); }
.gp-ni-flash { font-size: 10.5px; font-weight: 900; letter-spacing: 0.22em; color: var(--gp-gold-deep); }
.gp-ni-art { margin: 6px auto 4px; width: 116px; height: 116px; }
.gp-ni-art svg { width: 100%; height: 100%; display: block; }
@keyframes gp-ni-rise { from { transform: translateY(10px) rotate(-6deg); } to { transform: none; } }
.gp-ni-in .gp-ni-art { animation: gp-ni-rise 0.5s ease-out; }
.gp-ni-name { font-size: 21px; font-weight: 900; letter-spacing: 0.06em; line-height: 1.1; }
.gp-ni-line { margin: 5px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--gp-ink-soft); }
.gp-ni-sub { margin-top: 7px; font-size: 15px; font-weight: 800; color: var(--gp-gold-deep); }
.gp-ni-sub .gp-coin { vertical-align: -0.14em; }
.gp-ni-card .gp-btns { justify-content: center; margin: 12px 0 4px; }

/* ── disclaimer — story ≠ training (title card foot + debrief foot) ─────── */
.gp-disclaimer { margin-top: 10px; font-size: 11px; line-height: 1.5; letter-spacing: 0.03em; opacity: 0.66; }
.gp-debrief .gp-disclaimer { margin-top: 3px; font-size: 10px; opacity: 0.55; }

/* ── MOBILE PASS (2026-07-09): landscape-phone tier — panels fit ~390px of
      height, text keeps a ~12px readability floor, buttons stay thumb-sized ── */
@media (max-height: 520px) {
  /* debrief: ONE-PAGER (admin 2026-07-10, iPhone round: "no scroll") — a
     two-column grid: the story (banner→quotes→buttons) flows down the left,
     Mike's Card sits whole on the right. Landscape phones are wide; use it. */
  .gp-debrief {
    width: min(700px, 96vw); max-height: 94vh; max-height: 95svh; padding: 10px 16px 8px; font-size: 12.5px;
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px;
  }
  /* svh = height WITH the URL bar showing — plain vh is the fullscreen height on
     Android, which let the centered card overflow both screen edges (admin r4) */
  .gp-debrief > * { grid-column: 1; min-width: 0; }
  .gp-debrief .gp-cardbox { grid-column: 2; grid-row: 1 / span 12; align-self: center; margin: 0; }
  .gp-banner { font-size: 19px; }
  .gp-subline { margin: 2px 0 5px; font-size: 11.5px; }
  .gp-chips { gap: 4px; margin-bottom: 6px; }
  .gp-statchip { font-size: 10px; padding: 2px 7px; }
  .gp-factoid { padding: 6px 9px; font-size: 11.5px; margin-bottom: 6px; }
  .gp-quote { margin: 4px 0; font-size: 11.5px; }
  .gp-cardbox { margin: 5px 0 2px; padding: 7px 9px 6px; }
  .gp-row { margin: 3px 0; }
  .gp-adj { font-size: 10.5px; margin-top: 3px; }
  .gp-total { margin-top: 6px; padding-top: 5px; }
  .gp-total b { font-size: 22px; }
  .gp-coins { margin-top: 2px; font-size: 10px; }
  .gp-coins b { font-size: 13px; }
  /* #66 — landscape phones go TWO-COLUMN like the debrief one-pager: the
     4×3 grid left, caption + GOT IT right — no scroll on a 360-tall screen
     (r2: still true at twelve slots — 4×3 keeps the same three rows, 68px
     tiles in the 290px column, 308px of panel inside a 366px budget) */
  .gp-pack-panel {
    width: min(560px, 94vw); max-height: 92vh; max-height: 94svh; padding: 10px 14px 8px;
    display: grid; grid-template-columns: 290px 1fr; grid-template-rows: auto 1fr auto; column-gap: 14px;
  }
  .gp-pack-panel .gp-pit-head { grid-column: 1 / -1; margin-bottom: 5px; }
  .gp-pack-grid { grid-row: 2 / span 2; gap: 6px; align-self: start; }
  .gp-pack-slot span { font-size: 7.5px; }
  .gp-pack-cap { grid-column: 2; margin-top: 2px; font-size: 11px; min-height: 0; }
  .gp-pack-panel .gp-btns { grid-column: 2; align-self: end; margin: 8px 0 3px; }
  .gp-shop-panel { padding: 10px 14px 8px; } /* #67 — rows compress; the panel scrolls, seven rows never fit 360 and that's fine for a shop */
  .gp-shop-row { padding: 4px 7px; margin: 3px 0; gap: 8px; }
  .gp-shop-ic svg { width: 24px; height: 24px; }
  .gp-shop-note { margin: 2px 0 4px; font-size: 10.5px; }
  .gp-dnf { font-size: 26px; }
  .gp-dnf-note { font-size: 10.5px; }
  .gp-btns { margin: 8px 0 3px; }
  .gp-btn { padding: 9px 13px; font-size: 12px; } /* height stays thumbable; TRY AGAIN + CHANGE REPORT share a ~320px column */
  .gp-foot { margin-top: 4px; font-size: 9px; }
  .gp-debrief .gp-disclaimer { font-size: 9px; margin-top: 2px; }
  .gp-chat-panel { width: min(560px, 94vw); max-height: 92vh; max-height: 92svh; padding: 12px 16px 8px; }
  .gp-chat-x p { font-size: 12px; margin: 5px 0; }
  .gp-chat-x .gp-quote { margin: 4px 0 6px; font-size: 12px; }
  /* #72 landscape phone (844×390): 4 options at ~34px + head + question +
     button must clear 92svh — the tight gaps are what buys the fourth row */
  .gp-quiz-opts { gap: 5px; margin-top: 7px; padding-top: 7px; }
  .gp-quiz-opt { padding: 7px 10px; font-size: 11.5px; } /* still ~32px tall — thumbable */
  .gp-quiz-q { font-size: 12.5px !important; }
  .gp-quiz-asked { font-size: 11px !important; }
  .gp-quiz-flakes { font-size: 12px; margin-left: 6px; gap: 3px; }
  .gp-quiz-score { font-size: 24px !important; }
  .gp-quiz-paid { font-size: 11.5px !important; margin-top: 7px !important; padding-top: 7px; }
  .gp-log { padding: 2vh 2vw; }
  .gp-log-panel { padding: 12px 14px 8px; }
  .gp-log table { font-size: 12px; }
  .gp-log tbody { max-height: 56vh; max-height: 52svh; }
  .gp-share { padding: 5px 10px; font-size: 11px; }
  .gp-wrapnudge { margin-top: 4px; padding: 4px 10px; font-size: 10px; }
  /* #70 r2 — landscape phones: the rulebook keeps its newest lines and gets out
     of the way (admin's standing rule — little text, small screens) */
  .gp-rules { left: max(8px, env(safe-area-inset-left)); top: 62px; width: min(210px, 34vw); padding: 6px 8px 4px; border-radius: 9px; }
  .gp-rules > b { font-size: 8px; margin-bottom: 3px; }
  .gp-rules ul { max-height: 33vh; }
  .gp-rules li { font-size: 9.5px; margin-bottom: 3px; padding-left: 10px; }
  .gp-ni-card { width: min(300px, 78vw); padding: 10px 14px 6px; border-radius: 15px; border-width: 2px; }
  .gp-ni-art { width: 78px; height: 78px; margin: 3px auto 2px; }
  .gp-ni-name { font-size: 16px; }
  .gp-ni-line { font-size: 11px; }
  .gp-ni-flash { font-size: 9px; }
}

/* ── scorecard ? tips on touch: the 24px circle read as a boulder next to the
      11px labels (admin 2026-07-10) — visual shrinks to 16px, an invisible
      ::after halo keeps a ~30px tap target (r5 lesson: 13px was untappable) ── */
body.touch .gp-q {
  width: 16px; height: 16px; line-height: 16px; font-size: 10px;
  margin-left: 5px; opacity: 0.75; position: relative;
}
body.touch .gp-q::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
/* the open tip overlays Mike's Card itself instead of floating off a 96px
   label — inside the panel, so the one-pager grid can never clip it */
body.touch .gp-cardbox { position: relative; }
body.touch .gp-cat { position: static; }
body.touch .gp-tip { left: 6px; right: 6px; top: 6px; bottom: auto; width: auto; padding-right: 30px; }
body.touch .gp-tip::after { /* the ✕ affordance — any tap on the tip closes it */
  content: '✕'; position: absolute; top: 6px; right: 9px;
  font-size: 12px; font-weight: 900; opacity: 0.8;
}

/* ── phone-with-URL-bar tier: HOW TO PLAY must fit with ZERO scroll (admin r1) ── */
@media (max-height: 430px) {
  /* #68 — the cinematic squeezes with the phone: thinner bars, tighter box */
  .gp-scene::before, .gp-scene::after { height: min(6vh, 30px); }
  .gp-scene-box { width: min(560px, 96vw); padding: 8px 12px 7px; margin-bottom: max(10px, env(safe-area-inset-bottom)); }
  .gp-scene-line p { font-size: 12.5px; line-height: 1.35; }
  .gp-scene-btns .gp-btn { padding: 6px 11px; font-size: 11px; }
  .gp-scene-dig b { font-size: 16px; }
  .gp-quest-panel { padding: 10px 14px 8px; }
  .gp-quest-entry p { font-size: 11.5px; }
}

/* ── #55 the morning report (ChAC) — ONE fixed window, paginated, never
      scrolls. Layout canon = the admin-validated wireframe (r1+r2,
      research/avalanche-reports/wireframe.html). Danger hues ride the
      --dN vars (ONE source: config.js DANGER_COLORS → main.js at boot). ── */
/* the window class is gp-rwin, NOT gp-report — td.gp-report is the logbook's
   REPORT column (r2: the collision turned every cell into a fixed overlay) */
.gp-rwin {
  position: fixed; inset: 0; z-index: 77; display: flex; align-items: center; justify-content: center;
  background: rgba(36, 50, 68, 0.4); font-family: 'Outfit', system-ui, sans-serif; padding: 12px;
  padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
}
.gp-rcard {
  position: relative; width: min(740px, 96vw); height: min(520px, 90vh); height: min(520px, 92svh);
  background: var(--gp-paper); color: var(--gp-ink);
  border: 2px solid var(--gp-ink); border-radius: 18px;
  box-shadow: 0 14px 44px rgba(36, 50, 68, 0.55);
  display: grid; grid-template-rows: auto 1fr auto; overflow: hidden;
}

/* persistent masthead */
.gp-rhd { display: flex; align-items: center; gap: 10px; padding: 10px 44px 8px 16px; border-bottom: 1.5px solid var(--gp-line); }
.gp-rhd img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--gp-ink); flex: none; object-fit: cover; }
.gp-rmast { line-height: 1.15; min-width: 0; }
.gp-rorg { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; color: var(--gp-ink-soft); }
.gp-rregion { font-size: 16px; font-weight: 900; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-rissued { font-size: 10.5px; color: var(--gp-ink-soft); font-weight: 600; }
.gp-rclose {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--gp-line); background: var(--gp-paper2); color: var(--gp-ink);
  font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; z-index: 5;
}

/* slide viewport + right-edge rail (admin: the narrow side button) */
.gp-rview { position: relative; overflow: hidden; }
.gp-rtrack { display: flex; height: 100%; transition: transform 0.26s ease; }
@media (prefers-reduced-motion: reduce) { .gp-rtrack { transition: none; } }
.gp-rslide { flex: 0 0 100%; height: 100%; padding: 12px 40px 8px; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.gp-reyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; color: var(--gp-ink-soft); }
.gp-reyebrow b { color: var(--gp-ink); }
.gp-rrail {
  position: absolute; top: 0; bottom: 0; width: 34px; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; font-weight: 900; color: var(--gp-ink);
  background: linear-gradient(270deg, rgba(36, 50, 68, 0.14), rgba(36, 50, 68, 0));
}
.gp-rrail:hover { background: linear-gradient(270deg, rgba(36, 50, 68, 0.22), rgba(36, 50, 68, 0.02)); }
.gp-rrail span { /* r1: the chevron rides a visible chip — the bare glyph was easy to miss */
  display: flex; align-items: center; justify-content: center; width: 25px; height: 25px;
  border-radius: 50%; border: 1.5px solid var(--gp-ink); background: var(--gp-paper2);
  font-size: 16px; line-height: 1; padding-bottom: 2px; box-shadow: 1px 1px 0 rgba(36, 50, 68, 0.3);
}
.gp-rnext { right: 0; }
.gp-rprev { left: 0; transform: scaleX(-1); }
.gp-rrail[disabled] { opacity: 0.15; cursor: default; }

/* persistent footer: dots centered, GOT IT always in reach (r1) */
.gp-rft { display: flex; align-items: center; gap: 8px; padding: 5px 10px 6px; border-top: 1.5px solid var(--gp-line); min-height: 26px; }
.gp-rftside { flex: 1 1 0; display: flex; }
.gp-rftend { justify-content: flex-end; }
.gp-rftdots { display: flex; align-items: center; gap: 8px; }
.gp-rgotit {
  font-family: inherit; font-weight: 800; font-size: 11px; letter-spacing: 0.06em;
  padding: 6px 14px; border: none; border-radius: 9px; cursor: pointer;
  background: var(--gp-gold); color: var(--gp-ink); box-shadow: 0 2px 0 var(--gp-gold-deep);
}
.gp-rgotit:hover { background: #ffcf6b; }
.gp-rdot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--gp-ink-soft); background: transparent; cursor: pointer; padding: 0; }
.gp-rdot.on { background: var(--gp-ink); border-color: var(--gp-ink); }
.gp-rpglabel { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--gp-ink-soft); margin-left: 6px; }

/* page 1 — overview */
.gp-rdword { font-size: 30px; font-weight: 900; letter-spacing: 0.03em; line-height: 1; }
.gp-rovgrid { display: grid; grid-template-columns: 190px 1fr; gap: 4px 16px; align-items: center; min-height: 0; flex: 1; }
.gp-rrosebox { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 0; }
.gp-rrosebox svg { width: 100%; max-width: 185px; height: auto; }
.gp-rbands { font-size: 9.5px; color: var(--gp-ink-soft); line-height: 1.4; display: flex; flex-direction: column; gap: 3px; align-self: flex-start; }
.gp-rbands > span { display: flex; align-items: center; gap: 6px; }
.gp-rbands svg { width: 14px; height: 14px; flex: none; }
.gp-rbands b { color: var(--gp-ink); }
.gp-rbottomline { font-size: 13.5px; line-height: 1.5; }
.gp-rbottomline b { font-weight: 800; }
.gp-rscale { display: flex; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--gp-line); flex: none; }
.gp-rscale i {
  flex: 1; height: 22px; font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center; color: #fff;
}

/* problem pages */
.gp-rpgrid { display: grid; grid-template-columns: 168px 1fr; gap: 2px 18px; flex: 1; min-height: 0; align-items: start; }
.gp-rpleft { display: flex; flex-direction: column; gap: 7px; align-items: center; }
.gp-rpleft svg { width: 128px; height: auto; }
.gp-rptitle { font-size: 19px; font-weight: 900; letter-spacing: 0.02em; }
.gp-rmeter { width: 100%; }
.gp-rmlabel { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; color: var(--gp-ink-soft); margin-bottom: 3px; }
.gp-rmtrack { position: relative; height: 6px; border-radius: 4px; background: rgba(36, 50, 68, 0.14); }
.gp-rmtick { position: absolute; top: -2px; width: 1.5px; height: 10px; background: var(--gp-line); }
.gp-rmark {
  position: absolute; top: -5px; width: 15px; height: 15px; transform: translateX(-50%);
  background: var(--gp-coolink); border: 2px solid var(--gp-ink); border-radius: 50%;
}
.gp-rmaxis { display: flex; justify-content: space-between; align-items: baseline; font-size: 8px; font-weight: 700; letter-spacing: 0.03em; color: var(--gp-ink-soft); margin-top: 4px; }
.gp-rmaxis .on { font-weight: 800; font-size: 10.5px; color: var(--gp-ink); }
.gp-rpdesc { font-size: 12.5px; line-height: 1.52; display: flex; flex-direction: column; gap: 7px; min-height: 0; }
.gp-radvice { border-left: 3px solid var(--gp-accent); padding: 2px 0 2px 9px; font-weight: 600; }

/* weather page */
.gp-rwxgrid { display: grid; gap: 8px; flex: 1; min-height: 0; align-content: start; }
.gp-rwxbox { background: var(--gp-paper2); border: 1px solid var(--gp-line); border-radius: 12px; padding: 9px 12px; font-size: 12.5px; line-height: 1.5; }
.gp-rwxbox b { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; display: block; color: var(--gp-ink-soft); margin-bottom: 2px; }

/* recent avalanches page — the row track is capped (minmax(0,1fr)) so the
   panel column gets a DEFINITE height: the image flex-shrinks inside it and
   the caption always keeps its seat (r3: the loaded image used to push the
   caption off the fixed window on phones) */
.gp-rrvgrid { display: grid; grid-template-columns: 1fr 210px; grid-template-rows: minmax(0, 1fr); gap: 6px 16px; flex: 1; min-height: 0; }
.gp-rincidents { min-height: 0; overflow: hidden; }
.gp-rincident { font-size: 12px; line-height: 1.5; padding: 7px 0; border-bottom: 1px dashed var(--gp-line); }
.gp-rincident b { font-size: 10px; letter-spacing: 0.08em; color: var(--gp-ink-soft); display: block; }
.gp-rclosing { font-style: italic; border-bottom: none; }
.gp-rpanelbox { display: flex; flex-direction: column; min-height: 0; }
.gp-rpanelimg { display: block; width: 100%; min-height: 0; flex: 0 1 auto; object-fit: cover; border: 2px solid var(--gp-ink); border-radius: 12px; }
.gp-rcaption { flex: none; font-size: 10.5px; font-style: italic; color: var(--gp-ink-soft); line-height: 1.45; margin-top: 6px; }

/* the blind 🎲 card — same frame, no pages */
.gp-rblind {
  position: absolute; inset: 0; background: var(--gp-paper); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px 48px;
}
.gp-rblind svg { width: 130px; }
.gp-rblindq { font-size: 26px; font-weight: 900; letter-spacing: 0.02em; }
.gp-rblind p { font-size: 13px; color: var(--gp-ink-soft); max-width: 420px; line-height: 1.5; }

/* ── r8: the report is a LANDSCAPE document, everywhere. On a vertical phone
   (and under fakeland with rotation lock) report-ui.js toggles:
   .gp-rside — the card rotates 90° (the game's own fakeland trick): the
     sideways card IS the "rotate your phone" hint, and the geometry becomes
     the verified landscape layout instead of the broken portrait squeeze;
   .gp-rflip — card sizing swaps to the EFFECTIVE axes (svh = long, vw =
     short), because CSS viewport units can't see a rotation;
   .gp-rc / .gp-rnarrow — the size tiers, keyed to EFFECTIVE height/width by
     JS (media queries read the window, not the rotated card — the old
     @media tiers silently missed the fakeland reopen). ── */
.gp-rwin.gp-rflip .gp-rcard { width: min(740px, 94svh); height: min(520px, 92vw); }
.gp-rwin.gp-rside .gp-rcard { transform: rotate(90deg); }

/* compact tier (.gp-rc) — effective height < 480: Safari landscape leaves
   ~310px (landing lesson); a rotated portrait phone leaves ~360 */
.gp-rwin.gp-rc .gp-rcard { border-radius: 14px; }
.gp-rwin.gp-rc:not(.gp-rflip) .gp-rcard { height: min(520px, 94vh); height: min(520px, 96svh); }
.gp-rwin.gp-rc .gp-rhd { padding: 6px 40px 5px 12px; }
.gp-rwin.gp-rc .gp-rhd img { width: 30px; height: 30px; }
.gp-rwin.gp-rc .gp-rregion { font-size: 13px; }
.gp-rwin.gp-rc .gp-rorg { font-size: 8.5px; }
.gp-rwin.gp-rc .gp-rslide { padding: 7px 34px 4px; gap: 5px; }
.gp-rwin.gp-rc .gp-rdword { font-size: 21px; }
.gp-rwin.gp-rc .gp-rbottomline { font-size: 11px; line-height: 1.4; }
.gp-rwin.gp-rc .gp-rovgrid { grid-template-columns: 148px 1fr; gap: 2px 12px; }
.gp-rwin.gp-rc .gp-rscale i { height: 16px; font-size: 7px; }
.gp-rwin.gp-rc .gp-rptitle { font-size: 15px; }
.gp-rwin.gp-rc .gp-rpdesc { font-size: 10.5px; line-height: 1.42; gap: 5px; }
.gp-rwin.gp-rc .gp-rpgrid { grid-template-columns: 128px 1fr; gap: 2px 12px; }
.gp-rwin.gp-rc .gp-rpleft { gap: 3px; }
.gp-rwin.gp-rc .gp-rpleft svg { width: 64px; } /* r1: at 86px the SIZE meter fell off the window on iPhone Safari landscape */
.gp-rwin.gp-rc .gp-rmlabel { font-size: 8px; margin-bottom: 1px; }
.gp-rwin.gp-rc .gp-rmaxis { font-size: 7px; margin-top: 2px; }
.gp-rwin.gp-rc .gp-rmaxis .on { font-size: 9px; }
.gp-rwin.gp-rc .gp-rmark { width: 12px; height: 12px; top: -4px; }
.gp-rwin.gp-rc .gp-rft { padding: 3px 8px 4px; min-height: 20px; }
.gp-rwin.gp-rc .gp-rgotit { font-size: 10px; padding: 4px 11px; }
.gp-rwin.gp-rc .gp-rwxbox { padding: 6px 10px; font-size: 10.5px; }
.gp-rwin.gp-rc .gp-rincident { font-size: 10.5px; padding: 5px 0; }
.gp-rwin.gp-rc .gp-rrvgrid { grid-template-columns: 1fr 150px; }
.gp-rwin.gp-rc .gp-rbands { display: none; }
.gp-rwin.gp-rc .gp-rblindq { font-size: 17px; }
.gp-rwin.gp-rc .gp-rblind p { font-size: 11px; }
.gp-rwin.gp-rc .gp-rblind svg { width: 84px; }

/* narrow tier (.gp-rnarrow) — effective width < 560 (a narrow desktop window;
   a phone held vertical rotates instead and never lands here) */
.gp-rwin.gp-rnarrow .gp-rovgrid { grid-template-columns: 132px 1fr; }
.gp-rwin.gp-rnarrow .gp-rrvgrid { grid-template-columns: 1fr 130px; }
.gp-rwin.gp-rnarrow .gp-rbottomline { font-size: 12px; line-height: 1.42; } /* r6: the fuller bluebird bottom lines overflowed narrow portrait by a hair */
.gp-rwin.gp-rnarrow .gp-rbands { font-size: 9px; }

/* ── the one-time star ask (#64): the first debrief exit of a player's life
   pops it, never again (src/rating.js). z 120 — it may mount over the #55
   morning report (95) and must win. Safe-area/fakeland padding membership
   lives in styles.css with the other overlays. ── */
.gp-rate {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(12, 20, 34, 0.55);
  display: flex; align-items: center; justify-content: center;
}
.gp-rate-card {
  width: min(340px, 88vw); box-sizing: border-box;
  background: var(--gp-paper); border: 2px solid var(--gp-ink); border-radius: 16px;
  box-shadow: 0 14px 44px rgba(36, 50, 68, 0.4); padding: 16px 18px 6px;
  display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center;
}
.gp-rate-icn { font-size: 34px; line-height: 1; }
.gp-rate-title { font-size: 19px; font-weight: 900; letter-spacing: 0.04em; color: var(--gp-ink); }
.gp-rate-sub { font-size: 13px; font-weight: 600; color: var(--gp-ink-soft); }
.gp-rate-stars { display: flex; gap: 2px; }
.gp-rate-star {
  font-family: inherit; font-size: 31px; line-height: 1; width: 46px; height: 46px; /* 44px+ touch targets */
  background: none; border: none; padding: 0; cursor: pointer; color: var(--gp-ink-soft);
  transition: transform 0.08s ease;
}
.gp-rate-star:hover { transform: scale(1.15); }
.gp-rate-star.gp-rate-on { color: var(--gp-gold); }
.gp-rate-later {
  font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: 0.06em;
  background: none; border: none; padding: 10px 16px; cursor: pointer; color: var(--gp-ink-soft);
}
.gp-rate-later:hover { color: var(--gp-ink); }