/* =========================================================================
   Excavator Wind Run — page-specific styles
   Extends assets/css/styles.css (the shared NBDF design system).
   Loaded AFTER styles.css so the :root overrides below re-theme the page.
   ========================================================================= */

:root {
  /* The home page ships an ember accent; the mockup for this page calls for a
     blue accent on the same warm-paper monochrome palette. Overriding --accent
     re-themes the shared components (buttons, links, status dots) to blue for
     this page only. */
  --accent:     #2563EB; /* blue accent           */
  --accent-ink: #FCFBF7; /* text on the accent    */
  --accent-tint:#E4EBFB; /* faint blue wash       */

  /* Game-stage palette aliases (kept in-system) */
  --grade:      #1A1A18; /* the ground / grade line */
  --hazard:     #1A1A18; /* obstacle outline        */

  /* Construction-yellow machine body — a single-purpose signal colour, used
     only by the canvas excavator so it reads instantly as site equipment.
     Warm and slightly muted so it sits well on the paper palette. */
  --machine-yellow: #F0C232;
}

/* -------------------------------------------------------------------------
   Rail extras: a "back to foundry" link above the section index
   ------------------------------------------------------------------------- */

.rail__home {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent);
  padding: 2px 0;
}
.rail__home:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   Hero tagline + control hint
   ------------------------------------------------------------------------- */

.hero__tagline {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 14px 0 0;
}

.keyhint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 18px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.kbd {
  display: inline-block;
  border: 1.5px solid var(--ink);
  border-bottom-width: 3px;
  border-radius: 6px;
  background: var(--surface);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* -------------------------------------------------------------------------
   The game stage (canvas + overlays)
   ------------------------------------------------------------------------- */

.stage {
  position: relative;
  border: 2px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-tint);
  aspect-ratio: 16 / 9;
  width: 100%;
  /* keep it playable but not overwhelming on tall/desktop viewports */
  max-height: 70vh;
  touch-action: none;          /* we handle touch ourselves */
  user-select: none;
  -webkit-user-select: none;
}

.stage__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- On-canvas HUD (DOM overlay, crisp text) --- */
.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;        /* clicks fall through to the stage */
  padding: clamp(10px, 1.6vw, 16px);
  display: flex;
  flex-direction: column;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

.hud__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tag .num { font-weight: 800; letter-spacing: -0.01em; }

.hud__dist {
  text-align: right;
}
.hud__dist .k {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.hud__dist .v {
  font-size: clamp(20px, 3.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.hud__dist .v small { font-size: 0.5em; font-weight: 600; color: var(--muted); }

/* --- Crosswind gauge --- */
.wind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wind__chevrons {
  display: inline-flex;
  flex-direction: column;
  line-height: 0.62;
  color: var(--accent);
}
.wind__chevrons span {
  font-size: 11px;
  animation: windPush 1.1s ease-in-out infinite;
}
.wind__chevrons span:nth-child(2) { animation-delay: 0.16s; }
.wind__chevrons span:nth-child(3) { animation-delay: 0.32s; }

@keyframes windPush {
  0%, 100% { opacity: 0.25; transform: translateY(-1px); }
  50%      { opacity: 1;    transform: translateY(1px); }
}

/* --- Centred status message (start / crash) --- */
.hud__center {
  margin: auto;
  pointer-events: none;
  text-align: center;
  max-width: 80%;
}
.msg {
  display: inline-block;
  background: var(--surface);
  border: 2.5px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 5px 5px 0 rgba(26, 26, 24, 0.13);
  padding: clamp(16px, 2.5vw, 24px) clamp(20px, 3vw, 30px);
}
.msg__title {
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0;
}
.msg__sub {
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0 0;
  line-height: 1.45;
}
.msg__sub .score { color: var(--ink); font-weight: 700; }
.msg.is-hidden { display: none; }

/* -------------------------------------------------------------------------
   Controls row beneath the stage
   ------------------------------------------------------------------------- */

.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.controls__hint {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.controls__buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.btn--sm { font-size: 14px; padding: 8px 18px; }

.keyhint__sep { color: var(--dash); }

/* -------------------------------------------------------------------------
   Site Conditions (telemetry) — a bordered stat matrix
   ------------------------------------------------------------------------- */

.conditions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 2px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 22px;
}
.stat {
  padding: 16px 18px;
  border-right: 2px solid var(--line-strong);
}
.stat:last-child { border-right: 0; }
.stat__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 8px;
}
.stat__value {
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  line-height: 1;
}
.stat__value small { font-size: 0.5em; font-weight: 600; color: var(--muted); letter-spacing: 0; }

/* -------------------------------------------------------------------------
   Project Status section
   ------------------------------------------------------------------------- */

.status-cols {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 22px;
  margin-top: 6px;
}

.panel {
  border: 2px solid var(--line-strong);
  border-radius: 10px;
  padding: 20px 22px;
  background: var(--surface);
}
.panel--alt { background: var(--surface-alt); }

.panel__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 14px;
}

.statusline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--line);
}
.statusline:last-child { border-bottom: 0; padding-bottom: 0; }
.statusline + .statusline { padding-top: 12px; }
.statusline__k { font-size: 13px; color: var(--muted); }
.statusline__v {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* Learning-objective checklist */
.objectives {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.objectives li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: -0.006em;
}
.box {
  width: 18px;
  height: 18px;
  flex: none;
  border: 2px solid var(--ink);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.objectives li.done { color: var(--ink); }
.objectives li.done .box {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.objectives li.todo { color: var(--muted); }
.objectives li.todo .box { background: var(--surface); }

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .conditions { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 2px solid var(--line-strong); }

  .status-cols { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .stage { aspect-ratio: 4 / 3; max-height: 60vh; }
  .objectives { grid-template-columns: 1fr; }
  .controls { align-items: stretch; }
  .controls__buttons { width: 100%; }
  .controls .btn { flex: 1; text-align: center; }
}