/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --bg:        #06060c;
  --bg2:       #0d0d1a;
  --surface:   #13132a;
  --border:    #252540;
  --text:      #d4c5a9;
  --text-dim:  #5a5a7a;
  --text-hi:   #ede0c4;
  --gold:      #c9a227;
  --gold-dim:  #5a440d;
  --purple:    #7c3aed;
  --purple-lo: rgba(124,58,237,.08);
  --teal:      #0d9488;
  --red:       #dc2626;
  --amber:     #f59e0b;

  --font-title: 'Cinzel', 'Times New Roman', serif;
  --font-prose: 'EB Garamond', 'Georgia', serif;
  --font-mono:  'Courier New', monospace;
}

/* ─── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); }

/* ─── AMBIENT ─────────────────────────────────────────────── */
#ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.orb {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .12;
  animation: drift 22s ease-in-out infinite;
}
.orb-1 { width: 700px; height: 700px; background: var(--purple); top: -250px; left: -250px; animation-delay: 0s; }
.orb-2 { width: 450px; height: 450px; background: var(--teal);   bottom: -150px; right: -150px; animation-delay: -8s; }
.orb-3 { width: 350px; height: 350px; background: var(--gold);   top: 40%; left: 50%; transform: translate(-50%,-50%); animation-delay: -16s; }
@keyframes drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(40px,-25px) scale(1.06); }
  66%      { transform: translate(-25px,40px) scale(.94); }
}

/* ─── SCREENS ─────────────────────────────────────────────── */
.screen {
  position: fixed; inset: 0; z-index: 1;
  display: none; flex-direction: column;
  opacity: 0; transition: opacity .7s ease;
}
.screen.active { display: flex; }
.screen.visible { opacity: 1; }

/* ─── INTRO ───────────────────────────────────────────────── */
#intro-screen {
  align-items: center; justify-content: center; text-align: center;
}
.intro-content {
  z-index: 2; padding: 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
.logo-eyebrow {
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .5em; color: var(--text-dim); text-transform: uppercase;
}
.logo {
  font-family: var(--font-title); font-weight: 900;
  font-size: clamp(3.5rem, 11vw, 8rem); letter-spacing: .2em; line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 60px rgba(201,162,39,.45), 0 0 120px rgba(201,162,39,.2);
  animation: logo-pulse 4s ease-in-out infinite;
}
@keyframes logo-pulse {
  0%,100% { text-shadow: 0 0 60px rgba(201,162,39,.45), 0 0 120px rgba(201,162,39,.2); }
  50%     { text-shadow: 0 0 80px rgba(201,162,39,.7),  0 0 160px rgba(201,162,39,.3); }
}
.logo-sub {
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .35em; color: var(--text-dim);
}
.intro-tagline {
  font-family: var(--font-prose); font-style: italic;
  font-size: 1.32rem; color: var(--text-dim); line-height: 1.9;
}
.intro-credits {
  font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .2em; color: var(--text-dim); opacity: .5;
}

/* ─── BUTTON ──────────────────────────────────────────────── */
.btn-glyph {
  background: none; border: 1px solid var(--gold); padding: 0;
  cursor: pointer; transition: box-shadow .3s, border-color .3s;
}
.btn-glyph:hover {
  box-shadow: 0 0 35px rgba(201,162,39,.3);
}
.btn-glyph-inner {
  display: block; padding: 1rem 4rem;
  font-family: var(--font-title); font-size: 1rem; letter-spacing: .3em;
  color: var(--gold); transition: background .3s;
}
.btn-glyph:hover .btn-glyph-inner { background: rgba(201,162,39,.08); }

/* ─── HEADER ──────────────────────────────────────────────── */
#header {
  z-index: 10; flex-shrink: 0;
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem 1.8rem;
  background: rgba(6,6,12,.92); border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.header-left  { display: flex; align-items: center; gap: .75rem; flex: 1; }
.header-center { flex: 1; display: flex; justify-content: center; }
.header-right  { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }

.header-logo {
  font-family: var(--font-title); font-size: .96rem; font-weight: 600;
  letter-spacing: .2em; color: var(--gold);
}
.header-tag {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .2em;
  color: var(--text-dim); padding: .18rem .6rem;
  border: 1px solid var(--border); border-radius: 2px;
  text-transform: uppercase;
}

.archetype-display {
  font-family: var(--font-mono); font-size: .84rem;
  color: var(--purple); letter-spacing: .15em;
  display: flex; align-items: center; gap: .35rem;
  padding: .3rem .9rem; border: 1px solid rgba(124,58,237,.35); border-radius: 2px;
}
.stats-display { display: flex; gap: .75rem; align-items: center; }
.stat-item { display: flex; align-items: center; gap: .4rem; }
.stat-label {
  font-family: var(--font-mono); font-size: .66rem;
  color: var(--text-dim); letter-spacing: .08em; min-width: 22px;
}
.stat-bar {
  width: 68px; height: 4px;
  background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden;
}
.stat-fill {
  height: 100%; width: 100%; background: var(--red);
  border-radius: 2px; transition: width .6s ease, background .6s ease;
}
.stat-fill.gold { background: var(--gold); }

.timer-display {
  font-family: var(--font-mono); font-size: .84rem;
  color: var(--text-dim); display: flex; align-items: center; gap: .35rem;
}
.timer-display.urgent { color: var(--red); animation: blink-anim 1s ease infinite; }

.hidden { display: none !important; }

/* ─── NARRATIVE ───────────────────────────────────────────── */
#app-screen { position: relative; }

#narrative-area {
  flex: 1; overflow-y: auto; z-index: 2;
  padding: 3rem clamp(1.2rem, 10vw, 7rem) 3.5rem; /* bottom padding = peek zone */
  scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
#narrative-area::-webkit-scrollbar { width: 3px; }
#narrative-area::-webkit-scrollbar-thumb { background: var(--border); }

#narrative-content { max-width: 780px; margin: 0 auto; }

/* Scene blocks */
.scene-block { margin-bottom: 1.5rem; transition: opacity .6s ease; }
.scene-block.dimmed { opacity: .3; pointer-events: none; }

/* Prose — size controlled by --prose-scale via [data-font] */
.prose {
  font-family: var(--font-prose);
  font-size: calc(clamp(1rem, 1.8vw, 1.15rem) * var(--prose-scale, 1.2));
  line-height: 1.95; color: var(--text);
}
.prose p { margin-bottom: .9em; }
.prose h3 {
  font-family: var(--font-title); color: var(--gold);
  font-size: 1.15em; letter-spacing: .1em;
  margin: 1.5em 0 .5em;
}
.prose strong { color: var(--text-hi); font-weight: 600; }
.prose em { font-style: italic; color: var(--text-hi); }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }

/* System messages (engine voice) */
.sys-msg {
  font-family: var(--font-mono); font-size: .94rem;
  color: var(--teal); letter-spacing: .05em; line-height: 1.6;
  padding: .5rem 0 .5rem 1rem; border-left: 2px solid var(--teal);
  margin-bottom: 1.2rem;
}

/* User echo */
.user-echo {
  font-family: var(--font-mono); font-size: .98rem;
  color: var(--purple); padding: .45rem 1rem;
  background: var(--purple-lo); border-left: 2px solid var(--purple);
  margin: .75rem 0; line-height: 1.5;
}

/* Scene separator */
.scene-sep {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .4em; color: var(--text-dim);
  margin: 2rem 0;
}
.scene-sep::before, .scene-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* Streaming cursor */
.cursor {
  display: inline-block; width: 2px; height: 1.1em;
  background: var(--gold); vertical-align: middle;
  animation: blink-anim .9s step-end infinite;
  margin-left: 2px;
}
@keyframes blink-anim { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ─── CHOICES ─────────────────────────────────────────────── */
#choices-area {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(6,6,12,.96); border-top: 1px solid var(--border);
  backdrop-filter: blur(14px);
  transform: translateY(calc(100% - 18px));
  transition: transform .38s cubic-bezier(.25,0,.15,1);
  padding: 0 clamp(1.2rem, 10vw, 7rem) 1.1rem;
}

/* Peek handle — always visible */
.choices-handle {
  display: flex; justify-content: center; align-items: center;
  height: 18px; cursor: pointer;
  position: relative;
}
.choices-handle::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--purple), var(--gold), transparent);
  opacity: .35;
}
.handle-pip {
  display: block; width: 36px; height: 3px;
  background: var(--border); border-radius: 2px;
  transition: background .2s, width .2s;
}
#choices-area:hover .handle-pip,
#choices-area.open .handle-pip {
  background: var(--gold); width: 48px;
}

/* States */
#choices-area.empty   { transform: translateY(100%); } /* fully hidden while streaming */
#choices-area:hover   { transform: translateY(0); }
#choices-area.open    { transform: translateY(0); }

#choices-container {
  max-width: 780px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-top: .4rem;
}

.choice-btn {
  flex: 1 1 calc(50% - .25rem);
  background: rgba(13,13,26,.7); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font-prose);
  font-size: 1.14rem; font-style: italic; line-height: 1.45;
  padding: .8rem 1.2rem; text-align: left;
  cursor: pointer; border-radius: 2px;
  display: flex; align-items: flex-start; gap: .65rem;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
  min-height: 56px;
}
.choice-btn:hover {
  background: var(--purple-lo); border-color: var(--purple);
  color: var(--text-hi); box-shadow: 0 0 18px rgba(124,58,237,.12);
}
.choice-btn:active { transform: scale(.99); }
.choice-btn.full { flex: 1 1 100%; }

.choice-key {
  font-family: var(--font-mono); font-style: normal;
  font-size: .86rem; color: var(--gold);
  flex-shrink: 0; min-width: 1.4em; padding-top: .1em;
}

/* Typing indicator */
.typing-indicator {
  display: flex; align-items: center; gap: 5px;
  padding: .6rem 0 .2rem;
  max-width: 780px; margin: 0 auto;
}
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-dim);
  animation: dot-pop 1.2s ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay: .2s; }
.dot:nth-child(3) { animation-delay: .4s; }
@keyframes dot-pop { 0%,80%,100% { transform: scale(.7); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
.typing-label {
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .15em; color: var(--text-dim);
  margin-left: .25rem;
}

/* ─── END SCREEN ──────────────────────────────────────────── */
#end-screen { align-items: center; justify-content: center; overflow-y: auto; padding: 3rem 2rem; }
.end-wrap { max-width: 700px; z-index: 2; text-align: center; }
.end-content { font-family: var(--font-prose); font-size: 1rem; line-height: 1.9; text-align: left; }

/* ─── SETTINGS BUTTON ─────────────────────────────────────── */
.icon-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); padding: .35rem;
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  transition: color .2s, background .2s;
  flex-shrink: 0;
}
.icon-btn:hover { color: var(--gold); background: rgba(201,162,39,.08); }
.icon-btn:active { color: var(--gold); }

/* ─── SETTINGS PANEL ──────────────────────────────────────── */
.settings-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
  transition: opacity .3s;
}
.settings-overlay.hidden { display: none; }

.settings-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
  width: min(320px, 90vw);
  background: var(--bg2); border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 40px rgba(0,0,0,.5);
}
.settings-panel.hidden { display: none; }
.settings-panel.open   { transform: translateX(0); }

.sp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--border);
}
.sp-title {
  font-family: var(--font-title); font-size: .8rem;
  letter-spacing: .3em; color: var(--gold);
}
.sp-body {
  flex: 1; overflow-y: auto; padding: 1.4rem;
  display: flex; flex-direction: column; gap: 1.4rem;
}
.sp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.sp-row-col { flex-direction: column; align-items: flex-start; gap: .75rem; }
.sp-label {
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .25em; color: var(--text-dim);
}
.sp-divider { height: 1px; background: var(--border); }

/* Fullscreen toggle */
.sp-toggle {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-dim); padding: .5rem .9rem;
  border-radius: 3px; cursor: pointer;
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
  transition: all .2s;
}
.sp-toggle:hover, .sp-toggle[data-active="true"] {
  border-color: var(--gold); color: var(--gold); background: rgba(201,162,39,.07);
}

/* Font steps */
.font-steps {
  display: flex; gap: .4rem; align-items: flex-end;
}
.fs-step {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer; border-radius: 3px;
  font-family: var(--font-prose); transition: all .18s;
  line-height: 1; display: flex; align-items: center; justify-content: center;
}
.fs-step[data-step="1"] { font-size: .75rem; width: 30px; height: 30px; }
.fs-step[data-step="2"] { font-size: .9rem;  width: 34px; height: 34px; }
.fs-step[data-step="3"] { font-size: 1.05rem; width: 38px; height: 38px; }
.fs-step[data-step="4"] { font-size: 1.2rem; width: 42px; height: 42px; }
.fs-step[data-step="5"] { font-size: 1.4rem; width: 46px; height: 46px; }
.fs-step:hover  { border-color: var(--text-dim); color: var(--text); }
.fs-step.active { border-color: var(--gold); color: var(--gold); background: rgba(201,162,39,.07); }

/* Theme swatches */
.theme-swatches {
  display: flex; gap: .6rem;
}
.th-swatch {
  background: none; border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer; padding: .5rem .6rem;
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  transition: border-color .18s, box-shadow .18s; flex: 1;
}
.th-swatch:hover  { border-color: var(--text-dim); }
.th-swatch.active { border-color: var(--gold); box-shadow: 0 0 12px rgba(201,162,39,.2); }
.th-preview {
  width: 44px; height: 28px; border-radius: 3px; border: 1px solid rgba(255,255,255,.08);
}
.th-dark  { background: linear-gradient(135deg, #06060c 50%, #1a0a3a 100%); }
.th-light { background: linear-gradient(135deg, #f8f5f0 50%, #e8e2d8 100%); }
.th-sepia { background: linear-gradient(135deg, #2c1f0e 50%, #3d2b0f 100%); }
.th-name {
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .15em; color: var(--text-dim);
}

/* ─── FONT SCALE ──────────────────────────────────────────── */
html[data-font="1"] { --prose-scale: .82; }
html[data-font="2"] { --prose-scale: .91; }
html[data-font="3"] { --prose-scale: 1;   }
html[data-font="4"] { --prose-scale: 1.14; }
html[data-font="5"] { --prose-scale: 1.3;  }

.prose {
  font-family: var(--font-prose);
  font-size: calc(clamp(1rem, 1.8vw, 1.15rem) * var(--prose-scale, 1));
  line-height: 1.95; color: var(--text);
}

/* ─── LIGHT THEME ─────────────────────────────────────────── */
html[data-theme="light"] {
  --bg:        #f5f1ea;
  --bg2:       #ede8df;
  --surface:   #e4ddd3;
  --border:    #ccc4b5;
  --text:      #2c1f0e;
  --text-dim:  #7a6a55;
  --text-hi:   #1a1008;
  --gold:      #8b6209;
  --gold-dim:  #c9a84c;
  --purple:    #5b21b6;
  --purple-lo: rgba(91,33,182,.07);
  --teal:      #0f766e;
  --red:       #b91c1c;
  --amber:     #d97706;
}
html[data-theme="light"] body       { background: var(--bg); }
html[data-theme="light"] #header    { background: rgba(245,241,234,.94); }
html[data-theme="light"] #choices-area { background: rgba(237,232,223,.97); }
html[data-theme="light"] .settings-panel { background: var(--bg2); }
html[data-theme="light"] .orb       { opacity: .07; }
html[data-theme="light"] .th-swatch.active .th-name { color: var(--gold); }
html[data-theme="light"] #narrative-area { color: var(--text); }
html[data-theme="light"] .logo      { color: var(--gold); text-shadow: 0 0 60px rgba(139,98,9,.3); }

/* ─── SEPIA THEME ─────────────────────────────────────────── */
html[data-theme="sepia"] {
  --bg:        #1c1408;
  --bg2:       #241a0a;
  --surface:   #2e2010;
  --border:    #3f2e18;
  --text:      #e8d5a0;
  --text-dim:  #7a6040;
  --text-hi:   #f5e8c0;
  --gold:      #d4a020;
  --gold-dim:  #6b4f0a;
  --purple:    #9d5f2e;
  --purple-lo: rgba(157,95,46,.08);
  --teal:      #7a9e6e;
  --red:       #c0392b;
  --amber:     #e67e22;
}
html[data-theme="sepia"] body       { background: var(--bg); }
html[data-theme="sepia"] #header    { background: rgba(28,20,8,.93); }
html[data-theme="sepia"] #choices-area { background: rgba(24,17,6,.97); }
html[data-theme="sepia"] .settings-panel { background: var(--bg2); }
html[data-theme="sepia"] .orb-1     { background: #8b4513; }
html[data-theme="sepia"] .orb-2     { background: #4a3000; }
html[data-theme="sepia"] .orb-3     { background: var(--gold); }
html[data-theme="sepia"] .logo      { text-shadow: 0 0 60px rgba(212,160,32,.5); }

/* ── Tablet: iPad mini (768px), iPad (810px+) ─────────────── */
@media (max-width: 900px) {
  #narrative-area {
    padding: 2rem clamp(1rem, 5vw, 3rem);
  }
  #choices-area {
    padding: .85rem clamp(1rem, 5vw, 3rem);
  }
  .choice-btn {
    flex: 1 1 calc(50% - .25rem);
    font-size: 1.08rem;
    padding: .8rem 1rem;
  }
  .header-logo { font-size: .88rem; }
  .stat-bar { width: 52px; }
}

/* ── Phone landscape / small tablet ──────────────────────── */
@media (max-width: 600px) {
  #narrative-area {
    padding: 1.4rem 1rem 3rem;
    -webkit-overflow-scrolling: touch;
  }
  #choices-area {
    padding: 0 .85rem .9rem;
  }
  #choices-container { gap: .4rem; padding-top: .3rem; }

  .choice-btn {
    flex: 1 1 100%;
    font-size: 1.1rem;
    padding: 1rem 1rem;
    min-height: 58px;
  }

  #header { padding: .6rem .9rem; gap: .5rem; }
  .header-logo   { font-size: .82rem; letter-spacing: .12em; }
  .header-tag    { display: none; }
  .stat-bar      { width: 40px; }
  .stat-label    { font-size: .6rem; }
  .timer-display { font-size: .75rem; }
  .archetype-display { font-size: .72rem; padding: .22rem .55rem; }

  .prose      { font-size: calc(clamp(1rem, 4vw, 1.1rem) * var(--prose-scale, 1.2)); line-height: 1.85; }
  .sys-msg    { font-size: .8rem; }
  .user-echo  { font-size: .85rem; }
  .scene-sep  { font-size: .6rem; margin: 1.25rem 0; }

  .logo           { font-size: clamp(2.8rem, 14vw, 4.5rem); }
  .logo-eyebrow   { font-size: .58rem; letter-spacing: .3em; }
  .logo-sub       { font-size: .58rem; letter-spacing: .2em; }
  .intro-tagline  { font-size: 1.08rem; }
  .btn-glyph-inner { padding: .9rem 2.2rem; font-size: .86rem; letter-spacing: .22em; }
  .intro-content  { gap: 1.3rem; padding: 1.5rem 1.25rem; }

  /* Mobile: disable CSS hover, use .open class only (JS-controlled) */
  #choices-area:hover { transform: translateY(calc(100% - 18px)); }
  #choices-area.open  { transform: translateY(0); }
  #choices-area.empty { transform: translateY(100%); }
}

/* ── Very small phones (360px and below) ─────────────────── */
@media (max-width: 380px) {
  .prose { font-size: calc(1rem * var(--prose-scale, 1.2)); line-height: 1.8; }
  #header { flex-wrap: wrap; }
  .header-center { display: none; }
}

/* ── iPad mini landscape (1024×768) ──────────────────────── */
@media (min-width: 768px) and (max-width: 1100px) {
  #narrative-area { padding: 2rem 3.5rem; }
  #choices-area   { padding: .9rem 3.5rem; }
  .choice-btn     { flex: 1 1 calc(50% - .25rem); font-size: 1.1rem; padding: .85rem 1.1rem; }
  .prose          { font-size: 1.15rem; line-height: 1.92; }
}

/* ── Safe areas (iPhone notch, Android cutout) ────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  #choices-area {
    padding-bottom: calc(.7rem + env(safe-area-inset-bottom));
  }
  #header {
    padding-top: calc(.8rem + env(safe-area-inset-top));
  }
}

/* ── Touch: remove hover effects, add active feedback ─────── */
@media (hover: none) {
  .choice-btn:hover {
    background: rgba(13,13,26,.7);
    border-color: var(--border);
    color: var(--text);
    box-shadow: none;
  }
  .choice-btn:active {
    background: var(--purple-lo);
    border-color: var(--purple);
    color: var(--text-hi);
    transform: scale(.98);
  }
  .btn-glyph:hover { box-shadow: none; }
  .btn-glyph:active { box-shadow: 0 0 35px rgba(201,162,39,.3); }
}