/* The two boot cards. Deliberately quiet: the mountain is the product.
   PROMOTED to bench source by specs/0003 (was tools/export-red-dog/templates/).
   It is ordinary player CSS now: edit it HERE, commit, bump the exporter pin. */

/* While the intro owns the screen, NOTHING else is on it: not the legacy pause
   panel (the desktop game boots paused, so that panel is up by default and it
   z-fights straight through the card), and not the instrument HUD either. The
   first impression is the mountain and four keys. `intro-up` is set in the
   static markup so there is no frame where any of it can flash, and intro.js
   clears it when you drop in.

   This is deliberately STRUCTURAL rather than a list of class names. The first
   attempt hid `.ppause` and `.phud` and still left `T · fast travel` (the
   marker prompt, a hidden feature, advertising itself) on the boot screen. The
   rule below says what is actually meant — during the intro the screen is the
   mountain and the card, full stop — so anything a later re-bake adds to the
   page is covered without anyone remembering to come back here. */
body.intro-up > *:not(canvas):not(.intro):not(.pboot) { display: none !important; }

/* ------------------------------------------------- clean-frame mode (js/play/clean.js)
   The secret H key: every overlay off, so the mountain can be recorded.

   STRUCTURAL, and for the same reason the rule above it is. The first instinct
   is a list — `.phud, .pspeedo, .pmk, .gd` — and a list is exactly what left
   `T · fast travel` on the boot screen when this file's other rule was a list.
   What is meant is "during a clean frame the screen is the mountain, full
   stop", so that is what is written, and anything a later re-bake adds to the
   page is covered without anyone remembering to come back here.

   `.pfail` and `.pboot` are the two carve-outs and they are not negotiable: an
   INVISIBLE toggle must never be able to hide the card that says why the game
   did not start. A player who cannot see the error and cannot see the key that
   caused it has a broken game, not a clean frame.

   The second rule is the belt to that brace. Every overlay this build ships is
   a direct child of <body> today, but `.pmk-aim` is already built-and-detached
   and a future re-bake could just as easily nest one of these inside another
   element — at which point the child combinator would quietly stop covering it
   and H would leave a card on Greg's video. Naming them again, unscoped, costs
   one rule and removes that whole class of silent miss. */
body.clean-frame > *:not(canvas):not(.pfail):not(.pboot) { display: none !important; }
body.clean-frame .phud,
body.clean-frame .pspeedo,
body.clean-frame .pidle,
body.clean-frame .gd,
body.clean-frame .pmk,
body.clean-frame .pmk-aim,
body.clean-frame .pmk-flash { display: none !important; }

.intro {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  /* The card is light text over a SNOW FIELD — the brightest possible ground.
     A gentle vignette is not enough: measured against the spawn frame, the
     controls rows and the attribution line both washed out. Two layers, so the
     text sits on a soft plate without the card ever growing a visible edge. */
  background:
    radial-gradient(38% 30% at 50% 46%, rgba(10, 12, 16, 0.52) 0%, rgba(10, 12, 16, 0) 100%),
    radial-gradient(120% 90% at 50% 42%, rgba(12, 14, 18, 0.26) 0%, rgba(12, 14, 18, 0.6) 100%);
  opacity: 0;
  transition: opacity 620ms ease;
  /* 0072 - no cursor:pointer: clicking the sky chooses nothing. */
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.intro.is-in { opacity: 1; }
.intro.is-out { opacity: 0; transition-duration: 300ms; }

/* W1 TOOK THE HAND-OFF (specs/0055 §1.1). Every colour W4 typed in this sheet
   is a token hud.js owns, and hud.js's injected `:root` block publishes each as
   a custom property — so the intro cards read `--p-cream`, `--p-ink`,
   `--p-seam` and `--p-hazard` by name and this sheet types none of the three
   hexes §10.3 reserves. */
/* 0072 - THE FIRST SCREEN: one board, the controls card then six tiles. The
   card is 0055 5.4's boot controls A with six ski rows; the tiles are the
   locker row's plates (0055 5.3). D19 holds - no third slab, no new colour. */
.intro__board {
  width: min(1120px, 94vw);
  display: grid;
  gap: 14px;
  animation: intro-rise 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.intro__card {
  text-align: center;
  color: var(--p-cream);
}
@keyframes intro-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* the header: label, rule, hero, subtitle. Not the gradient (1.5). */
.intro__head {
  padding: 16px 14px 13px;
  border-bottom: 2px solid #171614;
  text-align: center;
}
.intro__h1 {
  margin: 0;
  font: 500 clamp(1.5rem, 3.2vw, 32px) / 1.04 "Avenir Next", Avenir, "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
  text-transform: uppercase;
  transform: skewX(-12deg);
  color: #171614;
}
.intro__head .intro__h1::before {
  content: "";
  display: block;
  width: min(100%, 22rem);
  height: 2px;
  margin: 0 auto 12px;
  background: #171614;
  transform: skewX(12deg);
}
.intro__head .intro__sub { margin: 0.55rem 0 0; color: #46433c; font-size: 0.78rem; }
.intro__h2 {
  margin: 0 0 1.1rem;
  font: 500 11px / 1 "Avenir Next", Avenir, "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: #cdc7ba;
}
.intro__sub {
  margin: 0.85rem 0 0;
  font: 400 clamp(0.9rem, 2.6vw, 1.06rem) / 1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.02em;
  color: #cdc7ba;
}

/* ---- card 2, the pause board with a different header.
   The board itself, in the two surfaces 1.6 allows: cream and ink. */
.intro__card--keys {
  background: var(--p-cream);
  color: #171614;
  border-radius: 2px;
  text-align: left;
  text-shadow: none;
  padding: 0;
  width: 100%;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}
.intro__card--keys .intro__h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 9px 14px;
  border-bottom: 2px solid #171614;
  text-indent: 0;
  letter-spacing: 0.2em;
  font-size: 10px;
  color: var(--p-hazard);
}
.intro__card--keys .intro__h2::before {
  content: "";
  width: 6px; height: 6px; border-radius: 1px; background: var(--p-hazard); flex: none;
}
/* 0072 1.1 - six rows stacked, in a centred 440 px column: the card is the
   whole board now and a key list across 1120 px is plates in a desert. */
.intro__keys {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0;
  align-items: center;
  width: min(440px, 100%);
  margin: 0 auto;
  padding: 14px 14px 6px;
}
.intro__cap,
.intro__what { border-bottom: 1px solid #c8c2b3; padding-bottom: 5px; margin-bottom: 5px; }
/* the same key plate the pause board uses: 66 px, 2 px radius, ink hairline */
.intro__cap {
  justify-self: stretch;
  min-width: 66px;
  font: 700 10px / 1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.1em;
  text-align: center;
  color: #171614;
  background: #e6e2d8;
  box-shadow: inset 0 0 0 1px #171614;
  border-radius: 2px;
  padding: 3px 7px;
}
.intro__what {
  justify-self: start;
  font: 400 10px / 1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #46433c;
  padding-left: 12px;
  opacity: 1;
}
/* 0072 - the action plate and the skip line went with their nodes. */
.intro__card--keys .intro__credit {
  margin: 11px 14px 14px;
  color: #8b8578;
  opacity: 1;
  text-align: center;
}

/* 0072 1.2 - six tiles on the locker row's plates; the whole tile is the
   target, no GO plate (0061). */
.intro__tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.intro__tile {
  position: relative;
  display: grid;
  align-content: start;
  gap: 5px;
  justify-items: start;
  min-height: 116px;
  padding: 12px 12px 13px;
  background: var(--p-cream);
  color: #171614;
  border: 0;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--p-seam), 0 14px 34px rgba(0, 0, 0, 0.3);
  text-align: left;
  cursor: pointer;
  font: inherit;
  text-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
/* the locker's "this one": the wash plus the 3 px ink spine (0055 5.3) */
.intro__tile.is-sel {
  background: #e5e2db;
  box-shadow: inset 0 0 0 1px var(--p-seam), inset 3px 0 0 #171614, 0 14px 34px rgba(0, 0, 0, 0.3);
}
.intro__tile:focus-visible { outline: 2px solid var(--p-hazard); outline-offset: 2px; }
/* the number is the key that picks it */
.intro__tnum {
  position: absolute;
  right: 9px;
  top: 9px;
  font: 400 9px / 1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.1em;
  color: #8b8578;
}
/* 1.8's alphabet on cream: the chevron would vanish, so it takes ink here. */
.intro__tile .pmark { margin: 1px 0 1px; }
.intro__tile .pmark--free { --m: #171614; }
.intro__tband {
  font: 400 8.5px / 1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8b8578;
}
/* the trail blade's type: family, 500, oblique 12 deg, tracked, caps */
.intro__tname {
  font-family: "Avenir Next", Avenir, "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: skewX(-12deg);
  color: #171614;
}
.intro__tteach {
  font: 400 9px / 1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #46433c;
}

/* the phone tier (1.2): two rows of three, one key pair a line. */
@media (max-width: 900px) {
  .intro__board { width: min(560px, 94vw); gap: 10px; }
  .intro__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .intro__tile { min-height: 104px; padding: 10px 10px 11px; }
  .intro__tname { font-size: 13px; }
  .intro__head { padding: 13px 12px 11px; }
}

/* the touch card keeps its cream zone plates (0055 5.4) */
.intro__card--touch { text-shadow: 0 1px 22px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.95); }
.intro__card--touch .intro__h2 { color: #cdc7ba; }


/* the credit sets in mono the way a map carries its attribution (5.1, 5.4) */
.intro__credit {
  margin: 1.6rem 0 0;
  font: 400 9px / 1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.78;
}

/* the pause panel carries the same line (ODbL travels with the artifact) */
/* specs/0055 5.1 - the pause board's footer, verbatim copy, in 9 px mono:
   "a map carries its attribution" and this is that line. */
.ppause__credit {
  margin-top: 0.2rem;
  font: 400 9px / 1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8b8578;
  text-align: center;
}

/* ---------------------------------------------------------------- the idle
   nudge (idle.js). Stop moving for seven seconds and the game offers R.

   Deliberately the SAME OBJECT as the rest of the key language on this screen:
   a `.pkey` chip's plate, a `.pkey b` cap for the letter, `.phud__prompt`'s
   accent border and centre column. It is one notch quieter than the boarding
   prompt — smaller, lower, no accent fill on the cap — because the boarding
   prompt announces something you can do RIGHT HERE and this only says the key
   you already have is still there.

   It sits low-centre: above the legend strip's row, below the crosshair and
   well clear of `.phud__prompt` (which lives 26 px BELOW screen centre), so the
   two can never overlap even if a player manages to be idle on a boarding
   circle — which idle.js suppresses anyway. */
.pidle {
  position: fixed;
  left: 50%;
  bottom: 66px;
  transform: translateX(-50%);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  pointer-events: none;
  background: rgba(23, 22, 20, 0.82);
  border: 1px solid rgba(255, 77, 0, 0.55);
  border-radius: 4px;
  padding: 6px 11px;
  color: var(--p-cream);
  font: 700 10px / 1.5 ui-monospace, "Cascadia Mono", Consolas, "Segoe UI Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 420ms ease;
}
/* `display: inline-flex` above outranks the UA's [hidden] rule — the same trap
   `.phud__ref` and `.phud__prompt` already carry a note about in play.css — and
   here it would be worse than a cosmetic bug: `hidden` is what keeps this line
   out of document.body.innerText, so a banner that ignored it would read as
   "on the screen" forever. */
.pidle[hidden] { display: none; }
.pidle.is-on { opacity: 1; }
.pidle b {
  color: var(--p-cream);
  background: rgba(244, 241, 234, 0.13);
  border-radius: 2px;
  padding: 1px 5px;
  letter-spacing: 0.06em;
}

/* D16.2 — the respawn fence fades the screen out and back.
   specs/0055 §3.10 (D6) — VOID: A, THE CLOSURE ROPE. Greg picked A off
   lookbook.html #k-fence-void-fade; the plain cooled fade this replaces is that
   cell's B. Two events that mean opposite things — a teleport you asked for and
   a boundary that caught you — were sharing one white rectangle, and the resort
   already owns the alphabet for the difference: the red X and the closure rope.

   The panel is drawn EXACTLY as the picked cell draws it: a white wash at .72,
   an 8 px rope on the top edge and another on the bottom, and a centred stack
   of X / AREA CLOSED / RETURNING YOU TO THE HILL.

   NO NEW SLAB (§1.6, D19). There is no surface here — the wash is not a board,
   the ropes are edges and the type sits on the wash. Every colour but one is a
   W1 token by name (§1.1): --p-cream, --p-ink, --p-sub, --p-fam.

   THE ONE COLOUR THAT IS NOT A TOKEN, and it is a judgement call for Greg
   (§11): --fence-red is the picked cell's closure red, #c92a2a, declared once
   here and read by name after that. §1.8's fifth mark resolves to --p-diff-red,
   which is #ff5c8a — the HUD's `bailed` pink (§1.5). That is the right red for
   a redlined instrument and the wrong one for closure tape: painted in it, the
   rope and the X read as a HUD warning rather than as the two marks a resort
   paints on a rope, which is the whole content of the pick. It is an ACCENT,
   not a slab, so D19's sign-off does not gate it, and it is none of §10.3's
   three census hexes. Say the word and it becomes var(--p-diff-red). */
.fence-fade {
  position: fixed;
  inset: 0;
  z-index: 35;
  opacity: 0;
  pointer-events: none;
  /* FALL, 160 ms linear (§1.11) — the exit lives on the base state */
  transition: opacity 160ms linear;
  --fence-red: #c92a2a;
}
/* RISE, 220 ms — "slower in than the teleport, because it was not your idea" */
.fence-fade.is-on { opacity: 1; transition: opacity 220ms linear; }
/* the wash. Warm white, not the teleport's: the difference the eye reads first
   is the ropes, but the flash goes to .90 and this stops at .72. */
.fence-fade__wash { position: absolute; inset: 0; background: #fff; opacity: .72; }
/* the closure rope, both edges. WIPE (§1.11): each rope is DRAWN INWARD FROM
   BOTH EDGES over 260 ms, which is two half-ropes scaling off their own outer
   edge — done on ::before/::after so the panel costs no extra nodes. */
.fence-fade__rope { position: absolute; left: 0; right: 0; height: 8px; }
.fence-fade__rope--t { top: 0; }
.fence-fade__rope--b { bottom: 0; }
.fence-fade__rope::before, .fence-fade__rope::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 50%;
  background: repeating-linear-gradient(135deg,
    var(--fence-red) 0 10px, var(--p-cream) 10px 20px);
  transform: scaleX(0);
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1);
}
.fence-fade__rope::before { left: 0; transform-origin: left center; }
.fence-fade__rope::after { right: 0; transform-origin: right center; }
.fence-fade.is-on .fence-fade__rope::before,
.fence-fade.is-on .fence-fade__rope::after { transform: scaleX(1); }
.fence-fade__mid {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); text-align: center;
}
/* §1.8's fifth mark, at the size the cell draws it */
.fence-fade__x { position: relative; width: 30px; height: 30px; margin: 0 auto 12px; }
.fence-fade__x::before, .fence-fade__x::after {
  content: ""; position: absolute; left: 0; top: 13px; width: 30px; height: 4px;
  background: var(--fence-red);
}
.fence-fade__x::before { transform: rotate(45deg); }
.fence-fade__x::after { transform: rotate(-45deg); }
/* caps oblique by transform, never a font-string token (§1.2) */
.fence-fade__hd {
  font-family: var(--p-fam, "Avenir Next", Avenir, "Nunito Sans", "Segoe UI", system-ui, sans-serif);
  font-size: 20px; font-weight: 500; letter-spacing: .06em; line-height: 1;
  text-transform: uppercase; transform: skewX(-12deg); color: var(--p-ink);
}
.fence-fade__sub {
  font-family: var(--p-mono, ui-monospace, Consolas, monospace);
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--p-sub); margin-top: 5px;
}

@media (prefers-reduced-motion: reduce) {
  /* specs/0055 §3.10 — the ropes WIPE on a transition of their own, so they
     have to be named here too or reduced motion would still animate them */
  .intro, .intro__card, .intro__board, .fence-fade, .pidle,
  .fence-fade__rope::before, .fence-fade__rope::after { animation: none !important; transition-duration: 1ms !important; }
}