/* the gauntlet — hud, letterbox, end card, gate. no dependency on launch.css. */

:root {
  --field: #0b0f0c;
  --cream: #f4efe4;
  --lime: #c8fa2c;
  --magenta: #ff2bd6;
  --garbage: #7bd60f;
  --amber: #f5c542;
  --red: #ff3b3b;
  --mute: rgba(244, 239, 228, 0.55);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --grot: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: #000;
  color: var(--cream);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

body.gauntlet {
  cursor: default;
}

#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

a {
  color: var(--cream);
}

kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0.05em 0.35em;
  border: 1px solid rgba(244, 239, 228, 0.5);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.85em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}

.dot {
  color: var(--lime);
}

/* ---- fade for the cold open ---- */
#fade {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s ease;
  z-index: 4;
}

#fade.is-black {
  opacity: 1;
  transition: none;
}

/* ---- hud ---- */
#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  font-family: var(--mono);
}

.hud-bag {
  position: absolute;
  top: 22px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hud-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--mute);
}

.hud-bar {
  width: 180px;
  height: 6px;
  background: rgba(244, 239, 228, 0.14);
  overflow: hidden;
}

/* the bar reads the bag by threshold: lime above 60, amber to 30, red under. data-bag is set by paintBag(). */
.hud-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--lime);
  transition: width 0.25s ease, background 0.25s ease;
}

#hud[data-bag="warn"] .hud-bar i {
  background: var(--amber);
}

#hud[data-bag="low"] .hud-bar i {
  background: var(--red);
}

.hud-num {
  min-width: 2.2em;
  font-size: 13px;
  font-weight: 700;
  color: var(--cream);
}

#hud[data-bag="warn"] .hud-num {
  color: var(--amber);
}

#hud.bag-low .hud-num {
  color: var(--red);
}

/* the bag talks back: three words, once per threshold, then gone */
.hud-quip {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--cream);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}

.hud-quip.is-on {
  opacity: 1;
  transform: none;
  transition-duration: 0.08s;
}

#hud.bag-low .hud-quip {
  color: var(--red);
}

/* the room name crossfades: setRoomName() takes the old one out (160ms), swaps the text, lets the new one in */
.hud-room {
  position: absolute;
  top: 22px;
  right: 24px;
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--mute);
  opacity: 1;
  transform: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hud-room.is-out {
  opacity: 0;
  transform: translateY(-6px);
  transition-duration: 0.16s;
}

.hud-reads {
  position: absolute;
  top: 44px;
  left: 24px;
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--mute);
  text-transform: lowercase;
  transform-origin: left center;
}

/* 6 / 6: one lime pulse, once per run, then it stays lime */
.hud-reads.is-full {
  color: var(--lime);
}

.hud-reads.is-pulse {
  animation: reads-pulse 0.9s ease-out;
}

@keyframes reads-pulse {
  0% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(200, 250, 44, 0);
  }
  30% {
    transform: scale(1.18);
    text-shadow: 0 0 14px rgba(200, 250, 44, 0.8);
  }
  100% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(200, 250, 44, 0);
  }
}

.hud-hint {
  position: absolute;
  left: 50%;
  top: 18vh;
  transform: translateX(-50%);
  max-width: min(520px, 88vw);
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(244, 239, 228, 0.35);
  background: rgba(0, 0, 0, 0.62);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--cream);
  text-align: center;
  pointer-events: none;
}

/* sits above the caption band: a two-line caption (2 × 34px + padding) tops out under 26vh on any desktop height */
.hud-prompt {
  position: absolute;
  left: 50%;
  bottom: 26vh;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 8px;
  border: 1px solid rgba(244, 239, 228, 0.5);
  background: rgba(0, 0, 0, 0.55);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cream);
}

.hud-act {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--cream);
  background: var(--cream);
  color: #000;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* the tag reads the kind: read (the room's real tell is live) or trap (a prop that bites) */
.hud-tag {
  padding: 1px 6px;
  border: 1px solid currentColor;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.hud-tag[hidden] {
  display: none;
}

.hud-prompt[data-kind="tell"] {
  border-color: var(--lime);
}

.hud-prompt[data-kind="tell"] .hud-tag {
  color: var(--lime);
}

.hud-prompt[data-kind="trap"] .hud-tag {
  color: var(--magenta);
}

.hud-prompt.is-pulse {
  animation: prompt-pulse 0.32s ease-out;
}

@keyframes prompt-pulse {
  0% {
    transform: translateX(-50%) scale(1);
  }
  35% {
    transform: translateX(-50%) scale(1.07);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

/* a dot at the centre. it ticks bigger when the crosshair is on something you can click. */
.hud-reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: rgba(244, 239, 228, 0.4);
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.hud-reticle[data-kind="on"],
.hud-reticle[data-kind="tell"],
.hud-reticle[data-kind="trap"] {
  transform: scale(1.5);
  background: var(--cream);
  box-shadow: 0 0 0 3px rgba(244, 239, 228, 0.16);
}

.hud-reticle[data-kind="tell"] {
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(200, 250, 44, 0.22);
}

.hud-reticle[data-kind="trap"] {
  background: var(--magenta);
  box-shadow: 0 0 0 3px rgba(255, 43, 214, 0.2);
}

#hud.is-letterbox .hud-reticle {
  opacity: 0;
}

.hud-prompt kbd {
  border-color: var(--cream);
  background: var(--cream);
  color: #000;
  font-weight: 800;
}

/* captions live in the band between the prompt (bottom 26vh) and the letterbox. the hint is at top 18vh and
   the bag quip is in the bag row, so nothing shares this band. each new line slides up 12px. */
.hud-caption {
  position: absolute;
  left: 50%;
  bottom: 12vh;
  transform: translate(-50%, 12px);
  margin: 0;
  max-width: min(760px, 78vw);
  padding: 6px 14px;
  font-family: var(--grot);
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(0, 0, 0, 0.9);
  color: var(--cream);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.hud-caption.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hud-caption.is-bad {
  color: var(--magenta);
}

.hud-caption.is-good {
  color: #ffffff;
}

/* the bag flinches on a hit */
#hud.is-hit .hud-bag {
  animation: bag-flinch 0.42s ease-out;
}

@keyframes bag-flinch {
  0% {
    transform: translate(-3px, 0);
  }
  30% {
    transform: translate(4px, 1px);
  }
  60% {
    transform: translate(-2px, 0);
  }
  100% {
    transform: none;
  }
}

.letterbox {
  position: absolute;
  left: 0;
  right: 0;
  height: 8vh;
  background: #000;
  transform: scaleY(0);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.letterbox-top {
  top: 0;
  transform-origin: top;
}

.letterbox-bottom {
  bottom: 0;
  transform-origin: bottom;
}

#hud.is-letterbox .letterbox {
  transform: scaleY(1);
}

/* ---- boot / pause / gate card ---- */
#boot,
#mobileGate {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.78);
  z-index: 8;
  padding: 24px;
}

#boot[hidden],
#mobileGate[hidden],
#rug[hidden],
#endcard[hidden],
.hud-prompt[hidden] {
  display: none;
}

.card {
  max-width: 560px;
  width: 100%;
  padding: 36px 40px 30px;
  border: 1px solid rgba(244, 239, 228, 0.16);
  background: rgba(11, 15, 12, 0.94);
}

.kicker {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--mute);
}

.title {
  margin: 0;
  font-family: var(--grot);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.line {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cream);
}

.subline {
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--magenta);
}

.enter {
  display: block;
  width: 100%;
  margin: 22px 0 0;
  padding: 16px 20px;
  border: 0;
  background: var(--lime);
  color: #0b0f0c;
  font-family: var(--grot);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.enter:hover {
  background: #d8ff57;
}

.keys {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.06em;
  color: var(--mute);
}

.foot {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mute);
}

.gate-links a {
  display: inline-block;
  margin-right: 18px;
  padding: 8px 0;
  color: var(--lime);
}

/* ---- rug ---- */
#rug {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 9;
}

#rug p {
  margin: 0;
  font-family: var(--grot);
  font-size: clamp(36px, 7vw, 92px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--magenta);
}

/* ---- win card ---- */
#endcard {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11, 15, 12, 0.82);
  z-index: 9;
}

.end-inner {
  width: 100%;
  max-width: 640px;
  padding: 40px 44px 34px;
  border: 1px solid rgba(244, 239, 228, 0.16);
  background: var(--field);
}

.end-title {
  margin: 0;
  font-family: var(--grot);
  font-size: clamp(56px, 9vw, 112px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.end-goal {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cream);
}

.end-goal:empty {
  display: none;
}

.end-verdict {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--lime);
}

.end-verdict:empty {
  display: none;
}

.end-beat {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--mute);
}

.end-beat:empty,
.end-beat[hidden] {
  display: none;
}

/* the screenshot line. big enough to crop, short enough to post. */
.end-share {
  margin: 10px 0 0;
  font-family: var(--grot);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--cream);
}

.end-share:empty {
  display: none;
}

.end-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 0;
  padding: 16px 0;
  border-top: 1px solid rgba(244, 239, 228, 0.14);
  border-bottom: 1px solid rgba(244, 239, 228, 0.14);
}

.end-stats div {
  min-width: 0;
}

.end-stats dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--mute);
}

.end-stats dd {
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--cream);
}

.end-stats div:first-child dd {
  color: var(--lime);
}

.end-line {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--cream);
}

.end-line + .end-line {
  margin-top: 4px;
}

.end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
}

.end-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(244, 239, 228, 0.35);
  background: transparent;
  color: var(--cream);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
}

.end-btn:hover {
  border-color: var(--lime);
}

/* keyboard: the card opens with focus on run it clean; tab reaches copy run and the links */
.end-btn:focus-visible,
.enter:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.end-btn.is-primary:focus-visible {
  outline-color: var(--cream);
}

.end-btn.is-done {
  border-color: var(--lime);
  color: var(--lime);
}

.end-btn.is-primary {
  background: var(--lime);
  border-color: var(--lime);
  color: #0b0f0c;
}

.end-btn.is-quiet {
  border-color: transparent;
  color: var(--mute);
}

.end-foot {
  margin: 22px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--mute);
}

.end-foot a {
  color: var(--lime);
}

/* ---- desktop gate under 900px ---- */
@media (max-width: 899px) {
  #mobileGate {
    display: flex !important;
  }

  #boot,
  #hud,
  #endcard,
  #gl {
    display: none !important;
  }
}

/* ---- reduced motion: captions stay, nothing else moves ---- */
@media (prefers-reduced-motion: reduce) {
  #fade,
  .letterbox,
  .hud-caption,
  .hud-bar i {
    transition: none;
  }

  #hud.is-hit .hud-bag,
  .hud-prompt.is-pulse,
  .hud-reads.is-pulse {
    animation: none;
  }

  .hud-reticle,
  .hud-room {
    transition: none;
  }
}