/* ============================================================================
   game.css — "The Only Honest Instrument" canvas-game chrome (.gm-* namespace).
   Reuses theme.css tokens; adds only the HUD, dial, bark ticker, Max, gate,
   share-card shell, title + ending overlays. The valley itself is on <canvas>.
   ========================================================================== */

/* ---- page shell ---------------------------------------------------------- */
html, body.gm-body { margin: 0; min-height: 100%; }
html { overflow: hidden; }        /* the game owns the viewport; overlays scroll internally */
body.gm-body {
  background: var(--navy-black);
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--font-body);
}

#game {
  position: fixed; inset: 0; z-index: 1;
  display: block; width: 100%; height: 100%;
  background: var(--navy-black);
  touch-action: none; cursor: crosshair;
}

/* ---- brand chrome (mirrors the other toy pages) -------------------------- */
.site-header.gm-chrome {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: clamp(0.7rem, 1.6vw, 1.2rem) var(--space-5);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--navy-black) 78%, transparent), transparent);
  pointer-events: none;
}
.site-header.gm-chrome > * { pointer-events: auto; }
.brand { font-family: var(--font-display); font-weight: 300; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; font-size: var(--fs-500); color: var(--ink); text-decoration: none; white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7); }
.brand b { font-weight: 600; color: var(--gold); }
.site-nav { display: flex; gap: clamp(0.9rem, 2vw, 1.8rem); align-items: center; }
.site-nav a { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-mid);
  font-size: var(--fs-200); color: var(--ink-soft); text-decoration: none; transition: color var(--dur-1);
  text-shadow: 0 1px 8px rgba(0,0,0,0.7); }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--gold); }
@media (max-width: 680px) { .site-nav a.opt { display: none; } }

/* ---- utility ------------------------------------------------------------- */
.gm-hidden { display: none !important; }

/* ============================ TITLE SCREEN ================================= */
.gm-title {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center;
  padding: var(--space-5);
  background:
    radial-gradient(120% 90% at 50% 40%, transparent, rgba(5,8,14,0.72)),
    color-mix(in srgb, var(--navy-black) 60%, transparent);
  backdrop-filter: blur(2px);
  transition: opacity var(--dur-2) var(--ease-cold);
}
.gm-title.is-gone { opacity: 0; pointer-events: none; }
.gm-title__inner { max-width: 48rem; text-align: center; }
.gm-title__h1 { margin: 0.1em 0 0.4em; line-height: var(--lh-tight);
  font-size: clamp(2.2rem, 6vw, 4.4rem); letter-spacing: 0.1em;
  text-shadow: 0 4px 40px rgba(0,0,0,0.85); }
.gm-title__lede { font-size: var(--fs-400); color: var(--ink-soft); line-height: var(--lh-body);
  max-width: 46ch; margin: 0 auto var(--space-5);
  text-shadow: 0 2px 16px rgba(0,0,0,0.9); }
.gm-title__cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.gm-title__note { margin-top: var(--space-5); font-size: var(--fs-200); color: var(--ink-faint);
  letter-spacing: var(--tracking-mid); }

/* ============================ HUD ========================================= */
.gm-hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.gm-hud > * { pointer-events: auto; }
.gm-hud.is-ending .gm-dial,
.gm-hud.is-ending .gm-compass,
.gm-hud.is-ending .gm-hint { display: none; }

/* top bar */
.gm-hud__top {
  position: fixed; left: 0; right: 0; top: clamp(3.2rem, 7vh, 4.4rem);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
  padding: 0 var(--space-5); pointer-events: none;
}
.gm-hud__top > * { pointer-events: auto; }
.gm-sweep { display: flex; flex-direction: column; text-shadow: 0 1px 10px rgba(0,0,0,0.8); }
.gm-sweep__eyebrow { font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); font-size: var(--fs-100); color: var(--ink-faint); }
.gm-sweep__title { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-700);
  color: var(--cream); letter-spacing: var(--tracking-mid); }
.gm-hud__controls { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }
.gm-progress { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-mid);
  font-size: var(--fs-200); color: var(--ink-soft); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 10px rgba(0,0,0,0.8); }

/* generic HUD button */
.gm-btn {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-mid);
  font-size: var(--fs-200); color: var(--ink-soft);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.5em 0.95em; cursor: pointer;
  transition: border-color var(--dur-1), color var(--dur-1), background var(--dur-1);
  backdrop-filter: blur(4px);
}
.gm-btn:hover, .gm-btn:focus-visible { color: var(--gold); border-color: var(--gold); }
.gm-descend { color: var(--ink-faint); }
.gm-descend:disabled { opacity: 0.45; cursor: not-allowed; }
.gm-descend.is-ready { color: var(--navy-black); background: var(--gold); border-color: var(--gold); }
.gm-descend.is-ready:hover { background: color-mix(in srgb, var(--gold) 84%, var(--cream)); }

/* compass */
.gm-compass {
  position: fixed; top: clamp(6.5rem, 15vh, 8.5rem); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.25em;
  transition: opacity var(--dur-1); filter: drop-shadow(0 2px 8px rgba(0,0,0,0.7));
}
.gm-compass.is-off { opacity: 0; }
#gmCompassArrow { transition: transform 0.18s var(--ease-drift); }
.gm-compass__label { font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: var(--tracking-mid); font-size: var(--fs-100); color: var(--ink-faint); }

/* Max */
.gm-max {
  position: fixed; left: var(--space-4); bottom: var(--space-4);
  cursor: pointer; filter: drop-shadow(0 3px 10px rgba(0,0,0,0.7));
}
.gm-max__svg { display: block; }
.gm-max__bubble {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-30%, -6px) scale(0.96);
  min-width: 8rem; max-width: 15rem; margin-bottom: 6px;
  background: var(--cream); color: var(--navy-black);
  font-family: var(--font-body); font-size: var(--fs-200); line-height: var(--lh-snug);
  padding: 0.55em 0.8em; border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-1), transform var(--dur-1) var(--ease-cold);
}
.gm-max__bubble::after { content: ""; position: absolute; left: 24%; top: 100%;
  border: 7px solid transparent; border-top-color: var(--cream); }
.gm-max__bubble.is-on { opacity: 1; transform: translate(-30%, 0) scale(1); }

/* the bark ticker + observed detail */
.gm-say {
  position: fixed; left: 50%; bottom: clamp(7.5rem, 18vh, 9.5rem); transform: translateX(-50%);
  width: min(46rem, 90vw); text-align: center; pointer-events: none;
}
.gm-say__see { margin: 0 0 0.3em; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: var(--tracking-mid); font-size: var(--fs-100); color: var(--gold);
  opacity: 0; transition: opacity var(--dur-1); text-shadow: 0 1px 10px rgba(0,0,0,0.9); }
.gm-say__see.is-on { opacity: 0.9; }
.gm-say__bark { margin: 0; font-family: var(--font-body); font-style: italic;
  font-size: var(--fs-500); line-height: var(--lh-snug); color: var(--cream);
  text-shadow: 0 2px 14px rgba(0,0,0,0.92); }
.gm-say__bark.gm-pop { animation: gmPop 0.4s var(--ease-cold); }
@keyframes gmPop { from { opacity: 0.2; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* the brass grade dial */
.gm-dial {
  position: fixed; left: 50%; bottom: var(--space-4); transform: translateX(-50%) translateY(12px);
  display: flex; flex-direction: column; align-items: center; gap: 0.5em;
  padding: 0.7em 1em; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid var(--line-soft); box-shadow: var(--shadow-2);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-1), transform var(--dur-1) var(--ease-cold);
}
.gm-dial.is-on { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.gm-dial__label { font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: var(--tracking-mid); font-size: var(--fs-100); color: var(--ink-faint); }
.gm-dial__row { display: flex; gap: 0.5em; }
.gm-dial__btn {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  font-family: var(--font-display); font-weight: 300; font-size: var(--fs-600);
  color: var(--cream);
  border: 1.5px solid var(--gold);
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%), var(--navy-deep);
  transition: transform var(--dur-1), background var(--dur-1), color var(--dur-1), box-shadow var(--dur-1);
}
.gm-dial__btn:hover, .gm-dial__btn:focus-visible {
  transform: translateY(-2px); color: var(--navy-black);
  background: var(--gold); box-shadow: 0 0 16px var(--gold-glow);
}
.gm-dial__btn.is-picked { color: var(--navy-black); background: var(--gold); box-shadow: 0 0 12px var(--gold-glow); }

/* the how-to hint */
.gm-hint {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-mid);
  font-size: var(--fs-300); color: var(--cream); text-align: center;
  background: color-mix(in srgb, var(--navy-black) 60%, transparent); padding: 0.7em 1.2em;
  border-radius: var(--radius); border: 1px solid var(--line-soft);
  opacity: 0.9; transition: opacity var(--dur-2); pointer-events: none;
  text-shadow: 0 1px 10px rgba(0,0,0,0.9);
}
.gm-hint.is-gone { opacity: 0; }

/* ============================ ENDING BEATS ================================ */
.gm-ending {
  position: fixed; inset: 0; z-index: 28; display: none; place-items: end center;
  padding: 0 var(--space-5) clamp(3rem, 12vh, 7rem);
  pointer-events: none;
}
.gm-ending.is-on { display: grid; }
.gm-ending__panel {
  pointer-events: auto; max-width: 42rem; text-align: center;
  background: color-mix(in srgb, var(--navy-black) 72%, transparent);
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5) var(--space-4);
  box-shadow: var(--shadow-3); backdrop-filter: blur(6px);
}
.gm-ending__text { margin: 0 0 var(--space-4); font-family: var(--font-body); font-style: italic;
  font-size: var(--fs-500); line-height: var(--lh-body); color: var(--cream); }

/* ============================ CAPTURE + SHARE ============================= */
/* revealed at the end as a fixed overlay that scrolls internally */
.gm-end { position: fixed; inset: 0; z-index: 35; overflow-y: auto;
  background: var(--navy-black); -webkit-overflow-scrolling: touch; }
.gm-end__scroll { min-height: 100%; padding: var(--section-y) 0 var(--space-6); }
.gm-end__hed { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-800);
  color: var(--cream); letter-spacing: var(--tracking-mid); margin: 0 auto var(--space-3); max-width: 24ch; }
.gm-end__sub { font-size: var(--fs-500); color: var(--ink-soft); max-width: 46ch; margin: 0 auto var(--space-6);
  line-height: var(--lh-body); }
.gate { margin: 0 auto; }
.gate .field { justify-content: center; margin-top: var(--space-4); }
.gm-confirm { margin-top: var(--space-4); font-style: italic; color: var(--moss); min-height: 1.2em; opacity: 0;
  transition: opacity var(--dur-1); }
.gm-confirm.is-on { opacity: 1; }
.gm-confirm.is-error { color: var(--accent-warm); }

/* footer sits in flow, above the fixed canvas */
.site-footer { position: relative; z-index: 30; border-top: 1px solid var(--line-soft); background: var(--navy-black);
  padding: var(--space-8) var(--space-5) var(--space-6); overflow: hidden; margin-top: var(--space-8); }
.footer__row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; }
.footer__meta { font-size: var(--fs-200); color: var(--ink-faint); }
.footer__links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.footer__links a { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-mid);
  font-size: var(--fs-100); color: var(--ink-soft); text-decoration: none; }
.footer__links a:hover { color: var(--gold); }
.footer__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--line-soft), transparent); }

/* ============================ RESPONSIVE ================================== */
@media (max-width: 640px) {
  .gm-say { bottom: clamp(8.5rem, 20vh, 10rem); }
  .gm-say__bark { font-size: var(--fs-400); }
  .gm-dial__btn { width: 46px; height: 46px; }
  .gm-max__svg { width: 74px; height: 60px; }
  .gm-hud__top { top: 3rem; }
  .gm-sweep__title { font-size: var(--fs-600); }
}

/* ============================ REDUCED MOTION ============================== */
@media (prefers-reduced-motion: reduce) {
  .gm-title, #gmCompassArrow, .gm-max__bubble, .gm-dial, .gm-say__bark.gm-pop,
  .gm-btn, .gm-dial__btn, .gm-hint, .gm-say__see, .gm-confirm {
    transition: none !important; animation: none !important;
  }
  .gm-title { backdrop-filter: none; }
}