/* Omaxac · la partida. Se carga sólo donde se juega o se cierra el arco. */

.nodo__titulo {
  font: 400 2.1rem/1.15 "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 96;
  margin: 0 0 2rem;
  letter-spacing: -0.015em;
}

.opciones { margin: 2.6rem 0 0; border-top: 1px solid var(--musgo); }

.opcion {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--musgo);
  color: var(--lino);
  font: 400 1.0625rem/1.5 "Spectral", Georgia, serif;
  padding: 1.05rem 1.4rem 1.05rem 0;
  cursor: pointer;
  position: relative;
  transition: color .18s ease, padding-left .18s ease;
}

.opcion::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--brasa);
  transform: translateY(-50%);
  transition: width .18s ease;
}

.opcion::after {
  content: "→";
  position: absolute;
  right: 0.1rem; top: 50%;
  transform: translateY(-50%);
  color: var(--musgo);
  transition: color .18s ease, transform .18s ease;
}

.opcion:hover,
.opcion:focus-visible { padding-left: 1.9rem; }

.opcion:hover::before,
.opcion:focus-visible::before { width: 1.2rem; }

.opcion:hover::after,
.opcion:focus-visible::after { color: var(--brasa); transform: translate(3px, -50%); }

.tirada {
  margin: 0 0 2.6rem;
  padding: 1.6rem 0 1.7rem;
  border-top: 1px solid var(--musgo);
  border-bottom: 1px solid var(--musgo);
}

.tirada__cuenta {
  font: 500 0.82rem/1.9 "IBM Plex Mono", monospace;
  color: var(--plata);
  letter-spacing: 0.04em;
}

.tirada__cuenta b { color: var(--lino); font-weight: 500; }

.tirada__total {
  font: 400 2.9rem/1 "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 120;
  color: var(--lino);
  display: inline-block;
  margin-right: 0.9rem;
  vertical-align: -0.12em;
}

.sello {
  display: inline-block;
  font: 500 0.72rem/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.sello--falla  { color: var(--falla); }

.sello--costo  { color: var(--costo); }

.sello--limpio { color: var(--limpio); }

.sello.cayendo { animation: sellar .34s cubic-bezier(.2,1.5,.4,1) both; }

@media (max-width: 480px) {
  .nodo__titulo { font-size: 1.7rem; }
  .tirada__total { font-size: 2.3rem; }
  .dado { width: 2.9rem; height: 2.9rem; }
}

.ficha {
  border-top: 1px solid var(--musgo);
  border-bottom: 1px solid var(--musgo);
  padding: 1rem 0 1.1rem;
  margin-bottom: 2.6rem;
  font: 400 0.8rem/1.5 "IBM Plex Mono", monospace;
}

.ficha__rotulo,
.ficha__seccion {
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--plata);
  font-weight: 400;
  margin: 0 0 0.6rem;
}

.ficha__seccion { margin-top: 1.1rem; }

.ficha ul { list-style: none; margin: 0; padding: 0; }

.ficha__atributos { display: flex; gap: 1.6rem; flex-wrap: wrap; }

.ficha__atributos li { display: flex; gap: 0.45rem; align-items: baseline; }

.ficha__nombre { color: var(--plata); text-transform: capitalize; }

.ficha__valor  { color: var(--lino); }

.ficha__objetos li,
.ficha__estados li {
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr) auto;
  gap: 0 .55rem;
  align-items: start;
  padding: .18rem 0;
}

.ficha__objetos svg { width: 13px; height: 13px; fill: var(--brasa); margin-top: .3rem; }

.ficha__x { color: var(--plata); }

.ficha__punto {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--falla);
  margin: .55rem 0 0 4px;
}

.ficha__etiqueta { min-width: 0; }

.ficha__vacio { color: var(--plata); margin: 0; }

@media (min-width: 1100px) {
  .ficha__atributos { display: block; }
  .ficha__atributos li { justify-content: space-between; }
}

.ficha__peso {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--falla);
  font-size: .72rem;
  line-height: 1.45;
  padding-top: .12rem;
  white-space: nowrap;
}

.ficha__encargo {
  font: 400 .82rem/1.55 "Spectral", Georgia, serif;
  color: var(--lino);
  margin: 0 0 .8rem;
}

.ficha__rotulo--sep { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--musgo); }

.metas { list-style: none; margin: 0; padding: 0; }

.meta {
  display: flex;
  gap: .55rem;
  align-items: baseline;
  padding: .2rem 0;
  font: 400 .78rem/1.5 "IBM Plex Mono", monospace;
  color: var(--plata);
}

.meta__marca { flex: none; width: .8rem; }

.meta--hecha   { color: var(--limpio); }

.meta--perdida { color: var(--falla); text-decoration: line-through; text-decoration-color: var(--musgo); }

.meta--principal .meta__marca { color: var(--brasa); }

.meta--principal.meta--hecha .meta__marca { color: var(--limpio); }

.metas--cierre { margin-top: 1rem; }

.metas--cierre .meta { font-size: .9rem; padding: .35rem 0; }

.vigor { margin-bottom: .8rem; }

.vigor__puntos { display: flex; gap: 3px; margin-top: .35rem; }

.vigor__puntos i {
  width: 12px;
  height: 5px;
  min-height: 5px;
  padding: 0;
  border: 0;
  border-radius: 1px;
  display: block;
  flex: none;
}

.vigor__puntos .vigor__lleno   { background: var(--limpio); }

.vigor__puntos .vigor__gastado { background: var(--falla); opacity: .55; }

.metas__ocultas {
  margin: .7rem 0 0;
  font: 400 .72rem/1.55 "IBM Plex Mono", monospace;
  color: var(--plata);
}

.encargo__balance {
  margin: 1rem 0 .4rem;
  font: 400 .8rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--plata);
}

.encargo__balance span {
  font: 400 2.6rem/1 "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 96;
  color: var(--brasa);
  letter-spacing: 0;
  margin-right: .5rem;
  vertical-align: -.1em;
}

.meta--hecha { color: var(--limpio); }

.meta--no    { color: var(--plata); }

.meta--no .meta__marca { color: var(--falla); }

.pastilla {
  flex: none;
  width: 6.5rem;
  font: 500 .72rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .42rem 0;
  text-align: center;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.pastilla--falla  { color: var(--falla); }

.pastilla--costo  { color: var(--costo); }

.pastilla--limpio { color: var(--limpio); }

@media (min-width: 900px) {
  .cierre {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 0 3.4rem;
    align-items: start;
  }
}

@media (max-width: 1099px) {
  .ficha {
    border-top: 1px solid var(--musgo);
    border-bottom: 1px solid var(--musgo);
    padding: 1.3rem 0 1.4rem;
    margin: 0;
  }

  .ficha__atributos { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }

  .ficha__objetos,
  .ficha__estados,
  .metas { max-width: 34rem; }
}

.cierre__resumen, .cierre__ruta { min-width: 0; }

.cierre__resumen .rotulo:first-child { margin-top: 1.4rem; }

.codice { display: block; }

.codice__lugares {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.8rem;
  margin-top: 2.4rem;
}

@media (min-width: 760px) {
  .codice__lugares { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 2rem; }
}

.ficha-arte {
  border-top: 1px solid var(--musgo);
  padding-top: 1rem;
}

.ficha-arte h3,
.gente__texto h3 {
  margin: 0 0 .2rem;
  font: 400 1.15rem/1.3 "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 60;
  color: var(--lino);
}

.ficha-arte p,
.gente__texto p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--plata);
}

.ficha-arte__img {
  width: 100%;
    height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  margin-bottom: .85rem;
}

.aviso-vacio {
  border: 1px dashed var(--musgo);
  border-radius: 3px;
  padding: 2.4rem 1.4rem;
  text-align: center;
}

.aviso-vacio p { margin: 0 0 1.1rem; color: var(--plata); }

.cronica { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--musgo); border: 1px solid var(--musgo); border-radius: 3px; overflow: hidden; }

@media (min-width: 660px) {
  .cronica { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cronica li {
  background: var(--piedra);
  padding: .8rem 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font: 400 .78rem/1.4 "IBM Plex Mono", monospace;
}

.cronica__clave { color: var(--plata); }

.cronica__valor { color: var(--lino); text-align: right; }

.modal {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  border: 1px solid var(--musgo);
  border-radius: 4px;
  background: var(--piedra);
  color: var(--lino);
  padding: 1.6rem 1.7rem 1.7rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  overflow: auto;
}

.modal::backdrop { background: rgba(10, 8, 7, .78); }

.modal[open] { animation: modal-entra .18s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .modal[open] { animation: none; }
}

.modal__cerrar-fila { display: flex; justify-content: flex-end; margin: -.6rem -.6rem 0 0; }

.modal__cerrar {
  background: none;
  border: 0;
  color: var(--plata);
  font-size: 1.5rem;
  line-height: 1;
  padding: .2rem .5rem;
  cursor: pointer;
}

.modal__cerrar:hover { color: var(--brasa); }

.modal__titulo {
  margin: 0 0 .9rem;
  font: 400 1.5rem/1.2 "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 72;
}

.modal__texto {
  margin: 0 0 1.1rem;
  font: 400 .95rem/1.65 "Spectral", Georgia, serif;
  color: var(--plata);
}

.modal__bandas { margin: 0 0 1.2rem; }

.modal__bandas li { font-size: .88rem; padding: .6rem 0; }

@media (max-width: 480px) {
  .modal__bandas li { flex-direction: column; gap: .4rem; }
  .modal__bandas .pastilla { width: auto; align-self: flex-start; padding: .4rem .7rem; }
}

.modal__pie { margin-bottom: 1rem; }

.modal__pie .boton { width: 100%; }

.modal__nota { margin: 0; font-size: .82rem; text-align: center; }

.modal__nota a { color: var(--plata); }

.ficha__seccion { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }

.ficha__fase { color: var(--brasa); letter-spacing: 0; }

.fase .metas--cierre { margin-top: 0; }

.fase .metas--cierre .meta { font-size: .85rem; padding: .25rem 0; }

/* Dos columnas: a la izquierda los dados, la cuenta y el sello; a la
   derecha el total, centrado contra la altura de todo lo de al lado.
   Antes el número colgaba de la última fila y quedaba abajo del todo. */

.tirada__marco {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.tirada__izq { flex: 0 0 auto; }

.tirada__der {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.tirada__marco .tirada__total {
  font-size: 5rem;
  margin: 0;
  line-height: .9;
  color: var(--lino);
}

@media (max-width: 520px) {
  .tirada__marco { gap: .8rem; }
  .tirada__marco .tirada__total { font-size: 3.4rem; }
}