/* Via Combusta — noche cerrada, dorado apagado, tipografia con serifa. */

:root {
  --negro: #08070b;
  --negro-2: #0e0d14;
  --negro-3: #14131c;
  --borde: #2a2634;
  --texto: #d8d2c8;
  --texto-tenue: #8d8698;
  --oro: #c9a227;
  --oro-claro: #e6c766;
  --sangre: #7d2230;
  --sangre-claro: #b8404f;
  --verde: #4f7a52;
  --fuego: #b8404f;
  --tierra: #6b7a4f;
  --aire: #5a7a8c;
  --agua: #5b5a8c;
  --serif: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--negro);
  color: var(--texto);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Fondo: un halo apagado y una trama de estrellas muy tenue. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(125, 34, 48, .18), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 110%, rgba(201, 162, 39, .07), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

#app {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 80px;
  min-height: 100vh;
}

.screen { animation: fade .5s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

h1, h2, h3 {
  font-weight: 400;
  letter-spacing: .01em;
  margin: 0 0 .4em;
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 2px;
}
h1 { font-size: 3.4rem; line-height: 1.05; }
h2 { font-size: 2rem; color: var(--oro-claro); }
h3 { font-size: 1.4rem; }

p { margin: 0 0 1.05em; }
em { font-style: italic; color: var(--oro-claro); }
strong { font-weight: 600; color: #efe9df; }

/* --- Portada --- */

.screen-title { text-align: center; padding-top: 6vh; }
.title-glyphs {
  font-size: 2rem;
  color: var(--sangre-claro);
  letter-spacing: .5em;
  margin-bottom: .6em;
  opacity: .8;
}
.screen-title h1 {
  background: linear-gradient(180deg, #f0e2b6, var(--oro) 60%, #8a6c14);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.subtitle {
  color: var(--texto-tenue);
  font-style: italic;
  font-size: 1.05rem;
  margin-bottom: 2.4em;
}
.title-body { max-width: 46ch; margin: 0 auto; }
.fine { font-size: .82rem; color: var(--texto-tenue); font-family: var(--mono); line-height: 1.6; }

/* --- Texto narrativo --- */

.prose { max-width: 60ch; }
.prose p { text-wrap: pretty; }
.prose p.threat {
  color: var(--sangre-claro);
  font-style: italic;
  border-left: 2px solid var(--sangre);
  padding-left: 1em;
  margin-top: 2em;
}
.prose p.sep { text-align: center; color: var(--texto-tenue); letter-spacing: .5em; margin: 2em 0; }

.screen-narrative.refuge h2, .screen-narrative.refuge { }
.refuge .prose p:first-child { color: var(--oro-claro); }

.lead { color: var(--texto-tenue); max-width: 55ch; }

/* --- Botones --- */

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2.2em; }
.btn {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .04em;
  padding: 11px 22px;
  border-radius: 2px;
  border: 1px solid var(--borde);
  background: var(--negro-2);
  color: var(--texto);
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}
.btn:hover { border-color: var(--oro); color: var(--oro-claro); }
.btn-primary {
  border-color: var(--oro);
  color: var(--oro-claro);
  background: linear-gradient(180deg, rgba(201,162,39,.13), rgba(201,162,39,.04));
}
.btn-primary:hover { background: rgba(201,162,39,.2); }
.btn-ghost { border-color: transparent; color: var(--texto-tenue); }
.btn-small { padding: 6px 14px; font-size: .8rem; }

/* --- Formulario --- */

.form { display: grid; gap: 14px; max-width: 460px; margin-top: 1.6em; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 14px; }
.field { display: grid; gap: 5px; }
.field span {
  font-family: var(--mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--texto-tenue);
}
.field input, .field select {
  font-family: var(--mono);
  font-size: .88rem;
  padding: 10px 12px;
  background: var(--negro-2);
  border: 1px solid var(--borde);
  border-radius: 2px;
  color: var(--texto);
  width: 100%;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--oro); }
.tz-note {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--texto-tenue);
  background: var(--negro-2);
  border-left: 2px solid var(--oro);
  padding: 10px 12px;
  line-height: 1.55;
  margin: 0;
}

/* --- Barra de estado --- */

.statusbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--borde);
  font-family: var(--mono);
  font-size: .8rem;
}
.light { display: flex; align-items: center; gap: 5px; }
.light .label {
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--texto-tenue);
  font-size: .7rem;
  margin-right: 4px;
}
.pip { color: #33303c; font-size: .9rem; transition: color .3s; }
.pip.on { color: var(--oro); text-shadow: 0 0 8px rgba(201,162,39,.55); }
.house-indicator { color: var(--texto-tenue); margin-left: auto; }
.light.flicker .pip { animation: flicker .5s ease both; }
@keyframes flicker {
  0% { opacity: 1; }
  25% { opacity: .15; }
  50% { opacity: 1; }
  75% { opacity: .3; }
  100% { opacity: 1; }
}
.statusbar .btn { margin-left: 0; }

/* --- Capitulo --- */

.chapter-head { margin-bottom: 1.6em; }
.chapter-sub {
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--texto-tenue);
  margin-bottom: .5em;
}
.chapter-head h2 { margin: 0; }

/* --- Pruebas --- */

.step-count {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--texto-tenue);
  text-transform: uppercase;
}
.prompt {
  font-size: 1.28rem;
  line-height: 1.5;
  color: #efe9df;
  margin-bottom: .7em;
  max-width: 58ch;
}
.hint {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--texto-tenue);
  background: var(--negro-2);
  border-left: 2px solid var(--borde);
  padding: 9px 13px;
  line-height: 1.6;
  max-width: 58ch;
}
.options { display: grid; gap: 9px; margin: 1.6em 0; max-width: 58ch; }
.opt {
  font-family: var(--mono);
  font-size: .86rem;
  line-height: 1.5;
  text-align: left;
  padding: 13px 17px;
  background: var(--negro-2);
  border: 1px solid var(--borde);
  border-radius: 2px;
  color: var(--texto);
  cursor: pointer;
  transition: border-color .16s, background .16s, transform .16s;
}
.opt:hover:not(:disabled) { border-color: var(--oro); transform: translateX(3px); }
.opt:disabled { cursor: default; opacity: .55; }
.opt.correct {
  border-color: var(--verde);
  background: rgba(79,122,82,.16);
  color: #cfe3cf;
  opacity: 1;
}
.opt.wrong {
  border-color: var(--sangre-claro);
  background: rgba(184,64,79,.14);
  color: #e8c3c8;
  opacity: 1;
}

.feedback {
  border-left: 2px solid var(--borde);
  padding: 4px 0 4px 16px;
  margin-top: 1.4em;
  max-width: 58ch;
  animation: fade .35s ease both;
}
.feedback.good { border-color: var(--verde); }
.feedback.bad { border-color: var(--sangre-claro); }
.verdict {
  font-family: var(--mono);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: .5em;
}
.feedback.good .verdict { color: #7fae83; }
.feedback.bad .verdict { color: var(--sangre-claro); }
.explain { font-size: .98rem; }
.story-fail { font-style: italic; color: var(--sangre-claro); }
.help {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--texto-tenue);
}

/* --- Final --- */

.screen-ending { padding-top: 4vh; }
.screen-ending h2 { font-size: 2.6rem; margin-bottom: .8em; }
.screen-ending.won h2 { color: var(--oro-claro); }
.screen-ending.lost h2 { color: var(--sangre-claro); }

/* --- Panel de carta --- */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(4,3,7,.9);
  z-index: 50;
  overflow-y: auto;
  padding: 28px 16px;
  animation: fade .25s ease both;
}
.chart-box {
  max-width: 620px;
  margin: 0 auto;
  background: var(--negro-2);
  border: 1px solid var(--borde);
  padding: 26px;
}
.chart-head { text-align: center; margin-bottom: 1.2em; }
.chart-head h3 { color: var(--oro-claro); margin-bottom: .2em; }
.chart-head p { margin: 0; font-size: .9rem; color: var(--texto-tenue); }
.wheel-wrap { margin: 0 auto 1.6em; max-width: 520px; }
.wheel { width: 100%; height: auto; display: block; }

.chart-tables { display: grid; gap: 22px; }
.chart-tables > * { overflow-x: auto; }
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.tbl th {
  text-align: left;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .68rem;
  color: var(--texto-tenue);
  padding: 6px 8px;
  border-bottom: 1px solid var(--borde);
}
.tbl td { padding: 5px 8px; border-bottom: 1px solid rgba(42,38,52,.5); }
.tbl td.g { color: var(--texto); white-space: nowrap; }
.tbl .rx { color: var(--sangre-claro); }
.tbl .vc { color: var(--sangre-claro); font-size: .72rem; letter-spacing: .06em; }
.tbl .fine { font-size: .76rem; }

/* --- SVG de la rueda --- */

.wheel .ring { fill: none; stroke: var(--borde); stroke-width: 1; }
.wheel .sec { stroke: none; }
.wheel .sec-fuego { fill: rgba(184,64,79,.13); }
.wheel .sec-tierra { fill: rgba(107,122,79,.13); }
.wheel .sec-aire { fill: rgba(90,122,140,.13); }
.wheel .sec-agua { fill: rgba(91,90,140,.13); }
.wheel .tick { stroke: var(--borde); stroke-width: .7; }
.wheel .tick-major { stroke: #4a4458; stroke-width: 1.1; }
.wheel .cusp { stroke: #3a3548; stroke-width: 1; }
.wheel .cusp-angular { stroke: var(--oro); stroke-width: 1.6; }
.wheel .planet-tick { stroke: var(--texto-tenue); stroke-width: 1; }
.wheel .glyph-sign {
  fill: var(--texto-tenue);
  font-size: 19px;
  text-anchor: middle;
  dominant-baseline: central;
}
.wheel .glyph-planet {
  fill: var(--oro-claro);
  font-size: 18px;
  text-anchor: middle;
  dominant-baseline: central;
}
.wheel .planet.retro .glyph-planet { fill: #d8b8bd; }
.wheel .planet.combusta .glyph-planet { fill: var(--sangre-claro); }
.wheel .planet-deg {
  fill: var(--texto-tenue);
  font-size: 9px;
  font-family: var(--mono);
  text-anchor: middle;
  dominant-baseline: central;
}
.wheel .house-num {
  fill: #5c5570;
  font-size: 11px;
  font-family: var(--mono);
  text-anchor: middle;
  dominant-baseline: central;
}
.wheel .axis-label {
  fill: var(--oro);
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: .06em;
  text-anchor: middle;
  dominant-baseline: central;
}
.wheel .asp { stroke-width: 1; }
.wheel .asp-duro { stroke: var(--sangre-claro); }
.wheel .asp-blando { stroke: var(--aire); }
.wheel .asp-neutro { stroke: var(--oro); }
.wheel .via-combusta {
  fill: none;
  stroke: var(--sangre-claro);
  stroke-width: 4;
  opacity: .75;
}

/* --- Pantallas chicas --- */

@media (max-width: 620px) {
  html, body { font-size: 17px; }
  #app { padding: 22px 16px 60px; }
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.65rem; }
  .row3 { grid-template-columns: 1fr 1fr; }
  .row3 .field:last-child { grid-column: span 2; }
  .statusbar { flex-wrap: wrap; gap: 10px; }
  .house-indicator { margin-left: 0; }
  .chart-box { padding: 18px 14px; }
  .actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}