/* THE UNMADE — main.css
   Dark, premium, cinematic. Black/gray/off-white with subtle gold.
   Mobile-first, no framework. */

:root {
  --bg: #0a0a0c;
  --bg-2: #111114;
  --ink: #ece8df;        /* off-white */
  --ink-dim: #8a857b;
  --line: #1f1f24;
  --line-2: #2a2a30;
  --gold: #c8a14a;       /* subtle gold */
  --gold-dim: #6f5a26;
  --err: #c44b4b;
  --ok: #6fae6f;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink);
  font-family: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  -webkit-font-smoothing: antialiased; min-height: 100vh; }
body { overflow-x: hidden; }

/* Background layers */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.7) 100%);
}
.glitch-layer {
  position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(transparent 0%, transparent 50%, rgba(200,161,74,0.02) 50%, transparent 51%, transparent 100%);
  background-size: 100% 4px; opacity: 0.6;
  animation: scan 8s linear infinite;
}
@keyframes scan { from { background-position: 0 0; } to { background-position: 0 100vh; } }

/* Screens */
main { position: relative; z-index: 3; min-height: 100vh; }
.screen { display: none; padding: 24px 20px 80px; max-width: 920px; margin: 0 auto; min-height: 100vh; }
.screen.active { display: block; }

/* Intro */
.title {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 300;
  font-size: clamp(48px, 12vw, 96px);
  letter-spacing: 0.18em;
  margin: 8vh 0 0;
  text-align: center;
  text-shadow: 0 0 24px rgba(200,161,74,0.12);
}
.subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(14px, 3vw, 18px);
  letter-spacing: 0.6em;
  color: var(--ink-dim);
  text-align: center;
  margin: 0 0 32px;
}
.lore {
  text-align: center;
  color: var(--ink-dim);
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 1.8;
  margin: 24px auto 32px;
  max-width: 32ch;
}
.lore-mini {
  text-align: center;
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 1.8;
  margin: 12px auto 16px;
  font-style: italic;
}
.footnote { text-align: center; color: var(--ink-dim); font-size: 12px; margin-top: 40px; letter-spacing: 0.1em; }
.wallet-row { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 16px 0 32px; }
.wallet-row + .wallet-row { margin-top: -16px; margin-bottom: 8px; }
.wallet-row .x-mark { font-size: 16px; color: var(--ink); opacity: 0.85; }
.wallet-row input[type="text"] {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-2); padding: 10px 12px; min-width: 160px;
  font: inherit; letter-spacing: 0.08em; font-size: 12px;
  text-transform: lowercase;
}
.wallet-row input[type="text"]:focus { outline: none; border-color: var(--line-2); }
.wallet-row input[type="text"]:disabled { opacity: 0.5; cursor: not-allowed; }
.wallet-note { text-align: center; max-width: 28rem; margin: 0 auto 8px; }
.end-identity {
  display: flex; gap: 18px; justify-content: center; align-items: center;
  margin: 8px 0 0; flex-wrap: wrap;
}
.id-pair { display: inline-flex; gap: 6px; align-items: baseline; }
.id-k { color: var(--ink-dim); letter-spacing: 0.12em; font-size: 10px; }
.id-v { color: var(--ink); font-size: 12px; }
.x-handle { color: var(--ink-dim); font-size: 12px; letter-spacing: 0.04em; }
.muted { color: var(--ink-dim); font-size: 12px; letter-spacing: 0.08em; }
.small { font-size: 11px; }

/* Buttons */
.btn {
  background: transparent; color: var(--ink); border: 1px solid var(--line-2);
  padding: 14px 22px; font: inherit; letter-spacing: 0.2em; font-size: 12px;
  cursor: pointer; transition: all 160ms ease; text-transform: uppercase;
}
.btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.btn:disabled { opacity: 0.3; cursor: not-allowed; }
.btn-primary { border-color: var(--gold); color: var(--gold); }
.btn-primary:hover:not(:disabled) { background: rgba(200,161,74,0.06); }
.btn-ghost { font-size: 11px; padding: 10px 16px; }

/* HUD */
.hud {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 16px 0 24px; padding: 14px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hud-cell { text-align: center; }
.hud-cell .k { display: block; font-size: 9px; letter-spacing: 0.25em; color: var(--ink-dim); margin-bottom: 4px; }
.hud-cell .v { display: block; font-size: 18px; color: var(--ink); }
.hud-cell .v.warn { color: var(--err); animation: pulse 0.8s ease; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Stability bar — visual companion to the stability number.
   Tracks the number; gold → red as it drops. */
.stab-bar {
  display: block;
  width: 60%;
  height: 2px;
  margin: 6px auto 0;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.stab-bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--gold), #e2c478);
  transition: width 420ms cubic-bezier(0.2,0.8,0.2,1), background 420ms ease;
  box-shadow: 0 0 6px rgba(200,161,74,0.4);
}
.stab-bar-fill.low { background: linear-gradient(90deg, var(--err), #e07b7b); box-shadow: 0 0 6px rgba(196,75,75,0.4); }
.stab-bar-fill.crit { background: var(--err); animation: pulse 0.8s ease infinite; }

/* Prompt */
.prompt {
  border: 1px solid var(--line); padding: 18px; margin: 0 0 24px;
  background: var(--bg-2);
  min-height: 100px;
  position: relative;
  overflow: hidden;
}
/* Gold sweep on each new room — subtle, sells the "freshness" of the clue. */
.prompt-sweep::after {
  content: '';
  position: absolute; left: -40%; top: 0; bottom: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(200,161,74,0.10), transparent);
  transform: skewX(-12deg);
  animation: prompt-sweep 1.4s ease forwards;
}
@keyframes prompt-sweep { to { left: 140%; } }
.prompt p { margin: 0 0 12px; letter-spacing: 0.05em; line-height: 1.6; }
.prompt p::before { content: '> '; color: var(--gold); }
#prompt-extra { font-size: 22px; letter-spacing: 0.4em; text-align: center; margin-top: 12px; }
#prompt-extra .seq { display: inline-block; }
#prompt-extra .keypad { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 12px; font-size: 14px; }
#prompt-extra .keypad span { padding: 6px 0; border: 1px solid var(--line-2); }
#prompt-extra .seq-row { font-size: 18px; }

/* Doors */
.doors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 600px) { .doors { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .doors { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .doors { grid-template-columns: repeat(6, 1fr); } }

/* Staggered door entrance — each door fades + rises in with a small delay
   so the new room feels discovered rather than snapped in. */
.doors .door {
  opacity: 0;
  transform: translateY(8px);
  animation: door-in 420ms cubic-bezier(0.2,0.8,0.2,1) forwards;
}
.doors .door:nth-child(1)  { animation-delay: 40ms; }
.doors .door:nth-child(2)  { animation-delay: 90ms; }
.doors .door:nth-child(3)  { animation-delay: 140ms; }
.doors .door:nth-child(4)  { animation-delay: 190ms; }
.doors .door:nth-child(5)  { animation-delay: 240ms; }
.doors .door:nth-child(6)  { animation-delay: 290ms; }
.doors .door:nth-child(7)  { animation-delay: 340ms; }
.doors .door:nth-child(8)  { animation-delay: 390ms; }
.doors .door:nth-child(9)  { animation-delay: 440ms; }
.doors .door:nth-child(10) { animation-delay: 490ms; }
.doors .door:nth-child(11) { animation-delay: 540ms; }
.doors .door:nth-child(12) { animation-delay: 590ms; }
@keyframes door-in {
  to { opacity: 1; transform: translateY(0); }
}

.door {
  position: relative;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #14141a 0%, #0a0a0c 100%);
  aspect-ratio: 1 / 1.4;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 140ms ease, border-color 160ms ease, background 160ms ease;
  overflow: hidden;
}
.door:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold); }
.door:disabled { cursor: default; }
.door .door-num { font-size: 9px; letter-spacing: 0.3em; color: var(--ink-dim); }
.door .door-glyph { font-size: 24px; line-height: 1; }
.door .door-extra { font-size: 10px; color: var(--ink-dim); letter-spacing: 0.05em; }
.door.correct { border-color: var(--ok); background: rgba(111,174,111,0.08); }
.door.wrong { border-color: var(--err); background: rgba(196,75,75,0.08); animation: shake 0.4s ease; }
.door.fade { opacity: 0.15; }
.door::before {
  content: ''; position: absolute; left: 8px; right: 8px; top: 30%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.door::after {
  content: ''; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-2) 30%, var(--line-2) 70%, transparent);
  transform: translateX(-50%);
}
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  background: var(--bg-2); border: 1px solid var(--line-2);
  padding: 10px 18px; font-size: 12px; letter-spacing: 0.15em;
  opacity: 0; pointer-events: none; transition: opacity 200ms;
  z-index: 10; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; }
.toast.ok { border-color: var(--ok); }
.toast.err { border-color: var(--err); }

/* End screen */
.end-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(28px, 6vw, 44px);
  letter-spacing: 0.3em; text-align: center; margin: 12vh 0 32px;
  text-shadow: 0 0 24px rgba(200,161,74,0.1);
}
.end-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 28px 0; margin: 24px 0;
}
.end-grid > div { text-align: center; }
.end-grid .k { display: block; font-size: 9px; letter-spacing: 0.25em; color: var(--ink-dim); margin-bottom: 8px; }
.end-grid .v { display: block; font-size: 28px; letter-spacing: 0.1em; }
.end-status {
  text-align: center; font-size: 13px; letter-spacing: 0.3em;
  margin: 16px 0 32px; color: var(--gold);
}
.end-status.gtd { color: var(--gold); text-shadow: 0 0 8px rgba(200,161,74,0.3); }
.end-status.low { color: var(--ink-dim); }
.end-rank-line {
  text-align: center; font-size: 12px; letter-spacing: 0.2em;
  color: var(--ink-dim); margin: -16px 0 28px;
  font-style: italic;
}
.end-rank-line.survivor { color: var(--gold); font-style: normal; text-shadow: 0 0 8px rgba(200,161,74,0.25); }

/* Intro taglines (50 / GTD) */
.tagline {
  text-align: center; color: var(--gold);
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(15px, 2.4vw, 20px);
  letter-spacing: 0.5em; text-transform: uppercase;
  margin: 6px 0 0;
  text-shadow: 0 0 16px rgba(200,161,74,0.18);
}
.tagline.sub {
  font-size: 12px; letter-spacing: 0.35em; color: var(--ink-dim);
  text-transform: none; font-style: italic; margin-bottom: 20px;
  font-family: 'IBM Plex Mono', monospace; text-shadow: none;
}

.breakdown { margin: 0 0 32px; border: 1px solid var(--line); padding: 16px; }
.breakdown summary { cursor: pointer; color: var(--ink-dim); font-size: 11px; letter-spacing: 0.25em; }
.breakdown ul { list-style: none; padding: 12px 0 0; margin: 0; font-size: 12px; }
.breakdown li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--line); }
.breakdown li:last-child { border: none; }

.thirteen { text-align: center; margin: 32px 0; padding: 24px; border: 1px solid var(--gold-dim); background: rgba(200,161,74,0.02); }
.thirteen-title {
  text-align: center; color: var(--gold);
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(20px, 4vw, 28px);
  letter-spacing: 0.4em; text-transform: uppercase;
  margin: 0 0 12px;
  text-shadow: 0 0 12px rgba(200,161,74,0.25);
  animation: pulse-gold 2.4s ease-in-out infinite;
}
@keyframes pulse-gold { 0%,100% { opacity: 1; } 50% { opacity: 0.65; } }
.thirteen label { display: block; margin: 16px 0 8px; }
.thirteen input {
  background: var(--bg); border: 1px solid var(--line-2); color: var(--ink);
  padding: 10px 12px; font: inherit; font-size: 13px; letter-spacing: 0.2em;
  width: 100%; max-width: 320px; text-align: center;
}
.wm { display: inline-block; padding: 4px 10px; background: var(--bg); border: 1px solid var(--line); letter-spacing: 0.5em; color: var(--gold); }

/* In-room watermark strip (the hidden 13th-door hook) */
.watermark-strip {
  margin-top: 12px;
  height: 1.2em;
  text-align: right;
  color: var(--gold-dim);
  font-size: 11px;
  letter-spacing: 0.4em;
  opacity: 0.25;
  font-style: italic;
  user-select: none;
}

.end-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Leaderboard */
.lb { list-style: none; padding: 0; margin: 24px 0; }
.lb li {
  display: grid; grid-template-columns: 48px 1fr auto auto auto; gap: 12px; align-items: center;
  padding: 12px 8px; border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.lb li.survivor { border-left: 1px solid var(--line-2); }
.lb li.unmade { opacity: 0.78; }
.lb li.boundary {
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  margin-top: 4px;
  background: linear-gradient(90deg, transparent, rgba(200,161,74,0.06), transparent);
  position: relative;
}
.lb li.boundary::before {
  content: '—— THE LINE ——';
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  font-size: 9px; letter-spacing: 0.4em; color: var(--gold);
  background: var(--bg); padding: 0 8px;
}
.lb li.you { background: rgba(200,161,74,0.08); outline: 1px solid var(--gold-dim); }
.lb .rank { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.lb .rank.top { color: var(--gold); font-size: 15px; }
.lb .who { color: var(--ink); letter-spacing: 0.05em; }
.lb .who.muted { color: var(--ink-dim); }
.lb .score { color: var(--gold); font-variant-numeric: tabular-nums; }
.lb .pill {
  display: inline-block; padding: 2px 8px; font-size: 9px; letter-spacing: 0.25em;
  border: 1px solid var(--line-2); color: var(--ink-dim);
}
.lb .pill.survivor { color: var(--gold); border-color: var(--gold-dim); }
.lb .pill.unmade { color: var(--ink-dim); }
.lb .rooms { color: var(--ink-dim); font-size: 11px; font-variant-numeric: tabular-nums; }