/* ==========================================================================
   creeds.css — estilos del visor.

   Direccion de arte (docs/03-art-direction.md §2): "tinta sobre pergamino".
   Mucho contraste, tipografia gruesa, colores planos. Esta pensado para que se
   lea bien en un movil y no depende de ninguna fuente externa ni de internet.
   ========================================================================== */

/* --- Variables de color: cambiando estas cuatro lineas cambia todo el tono --- */
:root {
  --ink: #1d1a16;          /* el "negro" de la tinta, calido, no puro */
  --ink-soft: #4a423a;
  --parchment: #e8dfc8;    /* el fondo, color pergamino */
  --parchment-dark: #d6cbaf;
  --accent: #a8372a;       /* rojo sello de cera, para lo importante */
  --accent-dark: #7d2419;
  --gold: #b08d2e;
  --hp: #a8372a;
  --momentum: #c9992e;
  --good: #3f6d3a;
  --line: 2px solid var(--ink);
}

* { box-sizing: border-box; }

/*
   El atributo hidden tiene que ganar SIEMPRE.

   El navegador trae de fabrica [hidden] { display: none }, pero cualquier regla
   nuestra con display la pisa: ".setup { display: grid }" hacia que el banco de
   pruebas se viera al cargar la pagina aunque el HTML dijera hidden. No daba
   ningun error — simplemente aparecia una seccion que deberia estar plegada.
   Con !important aqui, el problema no puede repetirse con ninguna clase futura.
*/
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.45;
}

/* ---------------------------------------------------------------- cabecera */
.topbar {
  text-align: center;
  padding: 18px 16px 10px;
  border-bottom: 3px double var(--ink);
}
.topbar h1 {
  margin: 0;
  font-size: 2.4rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}
.subtitle {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
}

main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 18px 16px 40px;
}

/* ------------------------------------------------- panel de preparacion */
.setup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: start;
}

.side-setup {
  border: var(--line);
  padding: 14px 16px 18px;
  background: var(--parchment-dark);
}
.side-setup h2 {
  margin: 0 0 12px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--ink-soft);
  padding-bottom: 6px;
}
.side-setup label {
  display: block;
  margin: 10px 0 4px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.side-setup input[type="text"],
.side-setup select {
  width: 100%;
  padding: 8px 10px;
  border: var(--line);
  background: var(--parchment);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
}
.side-setup input[type="range"] { width: 100%; accent-color: var(--accent); }
.level-value { font-weight: bold; color: var(--accent); }

.versus {
  text-align: center;
  padding-top: 40px;
  min-width: 190px;
}

.fight-button {
  display: block;
  width: 100%;
  padding: 16px 22px;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--parchment);
  background: var(--accent);
  border: var(--line);
  cursor: pointer;
}
.fight-button:hover { background: var(--accent-dark); }
.fight-button:disabled { opacity: 0.5; cursor: wait; }

.minor-button {
  margin-top: 10px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 0.8rem;
  background: transparent;
  border: 1px solid var(--ink-soft);
  color: var(--ink-soft);
  cursor: pointer;
}
.minor-button:hover { background: var(--parchment-dark); }

.hint {
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 12px;
}

/* ------------------------------------------------------------------ arena */
.arena-wrap { margin-top: 10px; }

.hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 8px;
}
.hud-side { min-width: 0; }
.hud-side.right { text-align: right; }
.hud-name {
  font-weight: bold;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fighter-creed {
  font-weight: normal;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-left: 6px;
}
.hud-clock {
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  padding: 0 6px;
}
.hud-weapon {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 3px;
  min-height: 1.2em;
}

/* ---------------------------------------------------- la placa de un arma

   La losa de piedra va de FONDO y el arma encima, dentro. Se hace asi, y no con
   dos imagenes apiladas, porque la losa tiene el borde roto: con background-size
   contain el hueco central se estira con ella y el arma sigue quedando dentro
   cualquiera que sea el tamaño de la placa.

   El relleno del 18% es lo que mantiene el arma dentro de la parte lisa: la
   piedra ocupa el borde y un arma a sangre se saldria por las grietas. */
.weapon-slot {
  display: inline-block;
  width: 132px;
  height: 87px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
}
.weapon-slot.small { width: 94px; height: 62px; }
/* Los margenes son los de la losa MEDIDOS sobre el dibujo (el hueco liso va del
   20% al 80% a lo ancho y del 19% al 68% a lo alto: abajo la piedra es mas
   gruesa). Puestos a ojo, las armas largas se salian por las grietas. */
.weapon-slot img {
  width: 100%;
  height: 100%;
  padding: 19% 20% 32%;
  object-fit: contain;
  display: block;
}
/* Nombre al lado de la placa: solo donde hace falta leerlo (el marcador). */
.weapon-labelled {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.weapon-slot-name { font-size: 0.78rem; }
/* Sin dibujo todavia para esa arma: el nombre escrito, como siempre. */
.weapon-plain { font-size: 0.78rem; }

.bar {
  position: relative;
  height: 20px;
  border: var(--line);
  background: var(--parchment-dark);
  overflow: hidden;
}
.bar.momentum { height: 8px; margin-top: 3px; }
.bar-fill {
  height: 100%;
  width: 100%;
  background: var(--hp);
  transition: width 120ms linear;
}
.bar.momentum .bar-fill { background: var(--momentum); width: 0; }
.bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: bold;
  /* Blanco con un contorno oscuro: se lee tanto sobre la parte roja (llena)
     como sobre la parte clara (vacia) de la barra. */
  color: #fff;
  text-shadow: 0 0 3px rgba(0,0,0,0.95), 0 1px 2px rgba(0,0,0,0.9);
  font-variant-numeric: tabular-nums;
}
.hud-side.right .bar-fill { float: right; }

canvas#arena {
  display: block;
  width: 100%;
  height: auto;
  border: var(--line);
  background: #cbbf9f;
  image-rendering: auto;
}

/* --------------------------------------------------------------- controles */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding: 10px;
  border: var(--line);
  background: var(--parchment-dark);
}
.ctrl {
  padding: 7px 12px;
  font-family: inherit;
  font-size: 0.85rem;
  background: var(--parchment);
  border: var(--line);
  color: var(--ink);
  cursor: pointer;
}
.ctrl:hover { background: #f2ead6; }
.ctrl.active { background: var(--ink); color: var(--parchment); }
.ctrl.primary { background: var(--accent); color: var(--parchment); font-weight: bold; }
.ctrl.primary:hover { background: var(--accent-dark); }
.speeds { display: flex; gap: 4px; }
.scrubber { flex: 1 1 180px; min-width: 120px; accent-color: var(--accent); }
.step-counter {
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  min-width: 64px;
  text-align: center;
}

/* -------------------------------------------------------- registro de texto */
.log-wrap {
  margin-top: 14px;
  border: var(--line);
  background: var(--parchment-dark);
  padding: 10px 14px 14px;
}
.log-wrap h3 {
  margin: 0 0 8px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}
.log {
  margin: 0;
  padding-left: 22px;
  max-height: 230px;
  overflow-y: auto;
  font-size: 0.88rem;
}
.log li { padding: 2px 0; }
.log li.now { background: rgba(168, 55, 42, 0.16); font-weight: bold; }
.log li.crit { color: var(--accent); font-weight: bold; }
.log li.signature { color: var(--accent-dark); font-weight: bold; letter-spacing: 0.04em; }
.log li.defensive { color: var(--good); }
.log li.faint { color: var(--ink-soft); font-size: 0.82rem; }
.log li.death { font-weight: bold; text-transform: uppercase; }

/* ------------------------------------------------------------- resultado */
.breakdown {
  margin-top: 14px;
  border: 3px double var(--ink);
  padding: 12px 16px 16px;
}
.breakdown h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.breakdown-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 6px 14px;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}
.breakdown-grid .label {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.breakdown-grid .left { text-align: right; }
.breakdown-grid .right { text-align: left; }
.breakdown-grid .better { font-weight: bold; color: var(--accent); }
.winner-line {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 1.15rem;
  font-weight: bold;
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--ink-soft);
  margin-bottom: 6px;
}
.checksum, .replay-link {
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin: 10px 0 0;
  word-break: break-all;
}
.checksum code { font-size: 0.72rem; }

/* ---------------------------------------------------------------- errores */
.error-box {
  margin-top: 16px;
  padding: 12px 16px;
  border: 2px solid var(--accent);
  background: #f3dcd7;
  color: var(--accent-dark);
  font-weight: bold;
}

footer {
  text-align: center;
  padding: 16px;
  border-top: 1px solid var(--ink-soft);
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* ------------------------------------------------------- moviles y tablets */
@media (max-width: 760px) {
  .setup { grid-template-columns: 1fr; }
  .versus { padding-top: 6px; }
  .hud { grid-template-columns: 1fr; gap: 6px; }
  .hud-side.right { text-align: left; }
  .hud-side.right .bar-fill { float: none; }
  .hud-clock { text-align: center; }
  .topbar h1 { font-size: 1.6rem; letter-spacing: 0.2em; }
  .breakdown-grid { grid-template-columns: 1fr auto 1fr; font-size: 0.8rem; }
}

/* ==========================================================================
   EL JUEGO — cuenta, Discipulo, Pruebas y clasificacion.
   (La parte de arriba de este fichero es el visor de combates.)
   ========================================================================== */

/* ------------------------------------------------------- barra de cuenta */
.account-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.account-bar .minor-button { margin-top: 0; }

/* -------------------------------------------------------------- paneles */
.panel {
  max-width: 980px;
  margin: 22px auto;
  padding: 22px 26px;
  border: var(--line);
  background: rgba(255, 255, 255, 0.28);
}
.panel h2 {
  margin: 0 0 6px;
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.panel h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ formularios */
.auth-form {
  max-width: 420px;
  margin-top: 14px;
}
.auth-form label {
  display: block;
  margin-top: 12px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.auth-form input,
.auth-form select {
  width: 100%;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--parchment);
  border: var(--line);
  color: var(--ink);
}
.auth-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.auth-buttons .fight-button { width: auto; }
.auth-buttons .minor-button { margin-top: 0; }
.hint.small { font-size: 0.7rem; margin-top: 6px; }

/* El error va pegado al formulario que lo causa, no en un aviso global arriba:
   asi se lee donde se estaba mirando. */
.error-inline {
  margin-top: 12px;
  padding: 8px 10px;
  border-left: 4px solid var(--accent);
  background: rgba(168, 55, 42, 0.1);
  font-size: 0.85rem;
}

/* ------------------------------------------------------ ficha del Discipulo */
.home-top {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: flex-start;
}
.home-top > div { flex: 1 1 260px; }

.disciple-card {
  padding: 16px 18px;
  border: var(--line);
  background: var(--parchment);
}
.disciple-card.mine { border-left: 6px solid var(--accent); }
.disciple-card h3 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: none;
}
.card-sub {
  margin: 2px 0 10px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
.card-stats li {
  padding: 3px 8px;
  border: 1px solid var(--ink-soft);
  font-size: 0.78rem;
}
.card-record { margin: 8px 0; font-size: 0.82rem; }
.card-gear {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.gear-label { font-weight: bold; color: var(--ink); }

.weapon-rack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.weapon-rack .gear-label { flex: 0 0 100%; }

/* ------------------------------------------------ crear Discipulo, a dos columnas

   La figura a un lado y el formulario al otro. En movil se apila sola: la figura
   arriba, que es lo que se mira mientras se prueban nombres. */
.create-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}
.create-layout .auth-form { flex: 1 1 260px; }
.create-stage {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 14px;
  border: var(--line);
  background: var(--parchment-dark);
}
.create-stage canvas {
  display: block;
  /* El suelo bajo los pies: la figura no flota sobre el pergamino. */
  border-bottom: var(--line);
}
.create-stage .hint { margin: 0; }

.xp-bar {
  position: relative;
  height: 18px;
  margin: 10px 0;
  border: var(--line);
  background: var(--parchment-dark);
}
.xp-fill {
  height: 100%;
  background: var(--gold);
}
.xp-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: bold;
}

/* ---------------------------------------------------------------- Pruebas */
.trials-box {
  padding: 16px 18px;
  border: var(--line);
  background: var(--parchment);
}
.trial-pips {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
/* Seis marcas, una por Prueba. Se ven de un vistazo, que es justo lo que se
   quiere saber al entrar: cuantos combates me quedan hoy. */
.pip {
  width: 22px;
  height: 22px;
  border: var(--line);
  background: var(--parchment-dark);
}
.pip.full { background: var(--accent); }
.trials-text { margin: 4px 0; font-weight: bold; }
.trials-countdown {
  margin: 0 0 12px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- rivales */
.opponent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}
.opponent-list .disciple-card { flex: 1 1 260px; }
.fight-button.small {
  margin-top: 12px;
  padding: 10px 14px;
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------- Ofertas

   Las tres tarjetas entre las que se elige al subir de nivel. Son <button>, no
   <div>: se llega a ellas con el tabulador y se pulsan con Intro sin escribir
   una linea de JavaScript para ello.

   El color del borde dice la rareza. Es el unico sitio de la interfaz donde el
   color significa algo por si solo, asi que cada tarjeta lleva ademas la palabra
   escrita ("Comun", "Rara", "Fabulosa"): quien no distinga los tonos lo lee.
   -------------------------------------------------------------------------- */
.offer-box {
  margin-top: 20px;
  padding: 18px 20px;
  border: var(--line);
  border-left: 6px solid var(--gold);
  background: var(--parchment);
}
.offer-box h3 {
  margin: 0 0 4px;
  font-size: 1.3rem;
}
.offer-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
}
.offer-card {
  flex: 1 1 200px;
  text-align: left;
  padding: 14px 16px;
  border: var(--line);
  border-top: 5px solid var(--ink-soft);
  background: var(--parchment-dark);
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.offer-card:hover:not(:disabled),
.offer-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 4px 6px 0 var(--ink);
}
.offer-card:disabled { opacity: 0.55; cursor: default; }
.offer-card.chosen { box-shadow: inset 0 0 0 3px var(--gold); }
.offer-card h4 {
  margin: 4px 0 6px;
  font-size: 1.02rem;
}
.offer-rarity {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.offer-detail { margin: 0; font-size: 0.84rem; color: var(--ink-soft); }

.offer-card.rarity-common { border-top-color: var(--ink-soft); }
.offer-card.rarity-rare   { border-top-color: var(--good); }
.offer-card.rarity-fabled { border-top-color: var(--gold); }
.offer-card.rarity-fabled .offer-rarity { color: var(--accent-dark); }

.offer-call {
  margin: 12px 0 0;
  font-weight: bold;
  color: var(--accent-dark);
}

/* ------------------------------------------------------ resultado de Prueba */
.trial-result {
  margin-top: 20px;
  padding: 18px 20px;
  border: var(--line);
  background: var(--parchment);
  border-left: 6px solid var(--ink-soft);
}
.trial-result.won { border-left-color: var(--good); }
.trial-result.lost { border-left-color: var(--accent); }
.trial-result h3 { margin-top: 0; font-size: 1.3rem; }
.xp-line {
  margin: 4px 0 12px;
  font-size: 1.05rem;
  font-weight: bold;
  color: var(--gold);
}
.levelup {
  margin: 12px 0;
  padding: 12px 14px;
  border: 2px dashed var(--gold);
}
.levelup h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.levelup p { margin: 3px 0; font-size: 0.88rem; }
.reward { font-weight: bold; }

/* ---------------------------------------------------------- clasificacion */
.leaderboard {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.leaderboard th,
.leaderboard td {
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid var(--parchment-dark);
}
.leaderboard th {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: var(--line);
}

/* ------------------------------------------------------- banco de pruebas */
.sandbox-bar {
  max-width: 980px;
  margin: 26px auto 0;
  text-align: center;
}

/* ------------------------------------------------------------------ movil */
@media (max-width: 720px) {
  .home-top { flex-direction: column; }
  .panel { margin: 14px 10px; padding: 16px; }
  .create-stage { flex: 1 1 100%; }
  .opponent-list .disciple-card { flex: 1 1 100%; }
  .offer-card { flex: 1 1 100%; }
}