/* how-to-play.css (Builder P). Every selector is scoped to a section id or an hp- class; shared chrome is untouched.
   Moved from v0.2 SRC 341–365 (choose · steps · stakes · rehearsal) and the matching responsive lines, plus the new
   page head, the desktop dial slot, the FAQ list and the #fx tags of the 12:01 dial. */

/* ---------- layout: text column left, the 12:01 dial right (desktop); viewer windows when stacked ---------- */
.hp-sec{padding:5vh 0 3vh}
#choose{padding-top:calc(var(--hud-h) + 6vh)}
.hp-col{max-width:640px}
.hp-grid{margin-left:clamp(0px,4.2vw,72px)}
.hp-slot{display:none}
@media (min-width:1024px){
  .hp-grid{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:40px}
  .hp-slot{display:block;position:relative}
  #choose .hp-slot > .gl-fallback{position:sticky;inset:auto;top:calc(var(--hud-h) + 14vh);height:min(520px,62vh);display:flex;align-items:center;justify-content:center}
  #choose .hp-slot svg{width:100%;height:100%;max-width:520px}
}
.hp-vw .gl-fallback svg{height:92%}

/* ---------- page head ---------- */
.hp-head{margin-bottom:26px}
.hp-head h1{font-size:clamp(34px,3.7vw,54px);max-width:640px}
.hp-head .dek{margin-bottom:12px}
.hp-nyline{font:500 12px/1.6 var(--f-mono);font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;color:var(--dust);max-width:560px;margin:0 0 16px;
  text-shadow:0 1px 12px rgba(5,7,11,.95)}
.hp-nyline b{color:var(--phosphor);font-weight:500}
.hp-toc{margin:16px 0 4px}   /* in-page contents: the shared .toc (site.css) */

/* ---------- the four steps [SRC 343–350] ---------- */
.hp-steps{margin-bottom:16px}
.hp-h2{font-size:clamp(20px,1.7vw,24px);font-stretch:118%;line-height:1.15;margin:0 0 2px}
#choose .steps{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
#choose .steps li{display:grid;grid-template-columns:34px 1fr;gap:4px 10px;padding:12px 0;border-top:1px solid rgba(154,169,181,.12)}
#choose .steps .n{font:600 13px/1 var(--f-mono);color:var(--phosphor);padding-top:5px}
#choose .steps h3{font-size:17px;margin-bottom:4px;font-stretch:118%;text-transform:uppercase;letter-spacing:.04em}
#choose .steps p{font-size:15.5px;line-height:1.5;margin:0}
#choose .side{border-left:2px solid var(--phosphor);padding:2px 0 2px 14px;margin:10px 0 2px;font-size:15.5px;color:var(--starlight)}
#choose .side a{white-space:nowrap}

/* ---------- FAQ #6 / #3 pair + stakes [SRC 351] ---------- */
.hp-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
.hp-q{margin:0;padding:18px 18px 16px}
.hp-q .slug{margin-bottom:8px}
.hp-q .quote{font-size:15px;line-height:1.45}
.hp-stakes .quote{font-size:16px}
.hp-proof{margin:4px 0 6px;font-size:15.5px}

/* ---------- rehearsal [SRC 352–365] ---------- */
.hp-rehearse h2,.hp-faq h2{font-size:clamp(30px,3.2vw,44px)}
#rehearse .dek{margin-bottom:16px}
#rehearse fieldset.reh{border:0;margin:0;padding:0;min-width:0}
#rehearse fieldset.reh legend{padding:0;margin-bottom:10px;font:500 12px/1.4 var(--f-mono);font-stretch:87.5%;letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
#rehearse fieldset.reh legend a{display:inline-flex;align-items:center;min-height:32px}
#rehearse .reh-q{font:400 17px/1.5 var(--f-script);margin:0 0 12px}
#rehearse .opt{position:relative;display:grid;grid-template-columns:40px 1fr;gap:4px 12px;align-items:start;padding:11px 12px;margin-bottom:8px;border:1px solid var(--line-2);cursor:pointer;transition:transform .15s,border-color .15s,background-color .15s}
#rehearse .opt:hover{border-color:var(--line);transform:translateX(4px)}
#rehearse .opt input{position:absolute;opacity:0;width:1px;height:1px}
#rehearse .opt .badge{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);font:700 15px/1 var(--f-mono);color:var(--phosphor)}
#rehearse .opt .who{font:600 12px/1.3 var(--f-mono);font-stretch:87.5%;letter-spacing:.1em;text-transform:uppercase;color:var(--dust);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#rehearse .opt .txt{display:block;font-size:15.5px;line-height:1.45}
#rehearse .opt .txt q{font-family:var(--f-script)}
#rehearse .opt:has(input:checked){border-color:var(--lunch);background:rgba(255,184,107,.07)}
#rehearse .opt:has(input:checked) .badge{border-color:var(--lunch);color:var(--lunch);box-shadow:0 0 12px rgba(255,184,107,.35)}
#rehearse .opt:has(input:focus-visible){outline:2px solid var(--phosphor);outline-offset:3px}
#rehearse .opt.crew .badge{background:var(--tally);border-color:var(--tally);color:var(--void)}
#rehearse .opt.crew:has(input:checked) .badge{background:var(--tally);color:var(--void)}
#rehearse .result{min-height:24px;margin:6px 0 12px;font-size:16px;color:var(--starlight)}
#rehearse .result:not(:empty){border-left:2px solid var(--lunch);padding:2px 0 2px 12px}
.hp-rehp{padding-bottom:12px}
.hp-rehp .result{margin-bottom:0}
.hp-rehp2{margin-top:10px}
.hp-debrief{font-size:15.5px}
.hp-note{margin:10px 0 14px}

/* ---------- next mission (countdown panel styles are shared in site.css) ---------- */
.hp-cdp h2{font-size:clamp(30px,3vw,42px)}
.hp-cdp .lastorder .slug{margin-bottom:6px}
.hp-cdp .lastorder .quote{margin:0}
.hp-sub{margin:0}
.hp-ctas{margin-bottom:14px}
.hp-notif{font-size:15.5px}
.hp-cdp .season{margin:14px 0 0}

/* ---------- FAQ ---------- */
.hp-faq .dek{margin-bottom:18px}
.hp-faq .dek a{white-space:nowrap}
.hp-faqlist{display:grid;gap:8px}
.hp-qa{position:relative;background:var(--hull);padding:13px 20px 13px 22px;border-left:2px solid var(--line)}
.hp-qa .n{margin:0 0 4px;font:500 11.5px/1.3 var(--f-mono);font-stretch:87.5%;letter-spacing:.12em;text-transform:uppercase;color:var(--phosphor)}
.hp-qa h3{font-size:18px;font-stretch:110%;margin:0 0 6px}
.hp-qa .quote{font-size:15px;line-height:1.45}
.hp-qa:target{border-left-color:var(--lunch)}
.hp-damp{margin:12px 0 10px;font-size:15px;color:var(--dust)}

/* ---------- #fx tags of the 12:01 dial ---------- */
.hp-ftag{display:flex;align-items:center;gap:8px}
.hp-drop{color:#FF8C70}
.hp-drop i{width:8px;height:8px;background:var(--tally);box-shadow:0 0 10px var(--tally);flex:none}
.hp-drop .k{color:#e3c0b6}
.hp-now{color:var(--phosphor)}
.hp-opt{display:grid;justify-items:center;gap:5px;text-align:center}
.hp-opt > span{display:grid;gap:2px}
.hp-opt .k{font-size:10.5px;color:#FF8C70}
.hp-opt.hp-compact > span{display:none}
.mtag.hp-mt{margin:0}   /* the dial places these tags itself (site.css .mtag offsets fit the mission-01 season row) */
.hp-opt b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--line);color:var(--phosphor);font-weight:700}
.hp-opt.hp-crew b{background:var(--tally);border-color:var(--tally);color:var(--void)}
.hp-opt.picked b{border-color:var(--lunch);color:var(--lunch);box-shadow:0 0 10px rgba(255,184,107,.5)}
.hp-opt.hp-crew.picked b{color:var(--void)}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .hp-grid{margin-left:0}
  .hp-col{max-width:680px}
  .hp-vw{margin:4px 0 16px}
  .hp-vw-reh{height:34vh;height:34svh}
  .hp-vw-next{height:32vh;height:32svh;margin:12px 0 0}
}
@media (max-width:760px){
  .hp-sec{padding:7vh 0 5vh}
  #choose{padding-top:calc(var(--hud-h) + 4vh)}
  .hp-head{margin-bottom:6px}
  .hp-head h1{font-size:clamp(29px,8.2vw,36px)}
  #choose .steps{grid-template-columns:1fr}
  .hp-pair{grid-template-columns:1fr}
  .hp-qa{padding:14px 14px 14px 16px}
  #rehearse .opt{grid-template-columns:40px 1fr;padding:10px}
}

/* v0.3 review: the rehearsal legend link gets a 44 px target on touch; FAQ numbers at 12 px on phones */
@media (pointer:coarse){#rehearse fieldset.reh legend a{min-height:44px}}
@media (max-width:760px){.hp-qa .n{font-size:12px}}