/* Reto Diario MTG — estilos propios, móvil primero. Sin frameworks. */

:root {
  --bg: #131313;
  --surface: #1c1b1b;
  --surface-2: #232221;
  --line: #35332f;
  --gold: #f2ca50;
  --gold-dim: #d4af37;
  --text: #e9e6e3;
  --text-dim: #a9a29a;
  --ok: #4ade80;
  --ok-bg: #14321f;
  --ko: #f87171;
  --ko-bg: #3a1717;
  --radius: 16px;
  --tap: 56px;
}

* { box-sizing: border-box; }

/* Los display de .chip/.btn ganarían al display:none que el navegador aplica
   por el atributo hidden, así que se fuerza aquí. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: dark; /* que los controles nativos y el scroll acompañen */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(120% 60% at 50% 0%, #1e1c17 0%, var(--bg) 60%),
    var(--bg);
  color: var(--text);
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  min-height: 100dvh;
  padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
  -webkit-tap-highlight-color: transparent;
}

/* ---------- cabecera ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: calc(env(safe-area-inset-top) + 0.7rem) 1rem 0.7rem;
  background: rgba(19, 19, 19, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--text);
}

.brand-mark { color: var(--gold); font-size: 1.1rem; }

.brand-text {
  display: flex;
  flex-direction: column;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.brand-text small {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 2px;
}

.topbar-right { display: flex; align-items: center; gap: 0.5rem; }

.streak {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  background: var(--surface);
}

.streak-flame { filter: grayscale(1); opacity: 0.5; }
.streak.on .streak-flame { filter: none; opacity: 1; }
.streak.on { border-color: var(--gold-dim); color: var(--gold); }

/* Botón de navegación con área táctil cómoda (44px mínimo). */
.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
}
.nav-btn:active { color: var(--gold); border-color: var(--gold-dim); }

/* Enlace de salto y textos solo para lectores de pantalla. */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 30;
  background: var(--gold);
  color: #2a2200;
  padding: 0.6rem 1rem;
  border-radius: 0 0 10px 0;
  font-weight: 600;
}
.saltar:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- la carta ----------
   Anatomía de una carta de Magic: marco negro con filo dorado, barra de nombre,
   ventana de arte, línea de tipo con gema de rareza, caja de texto en pergamino
   y línea de coleccionista. El color del pastel de maná lo pone data-color. */

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem;
}

.carta {
  --tinte: 214, 168, 74;      /* oro por defecto */
  --tinte-osc: 62, 48, 22;
  perspective: 1200px;
}

.carta[data-color="w"] { --tinte: 232, 226, 205; --tinte-osc: 58, 54, 44; }
.carta[data-color="u"] { --tinte: 106, 160, 209; --tinte-osc: 24, 42, 62; }
.carta[data-color="b"] { --tinte: 150, 141, 133; --tinte-osc: 38, 34, 32; }
.carta[data-color="r"] { --tinte: 214, 106, 78;  --tinte-osc: 62, 30, 22; }
.carta[data-color="g"] { --tinte: 122, 178, 130; --tinte-osc: 28, 50, 34; }
.carta[data-color="oro"] { --tinte: 214, 168, 74; --tinte-osc: 62, 48, 22; }

/* El marco: negro con filo interior de color, como el borde de la carta. */
.carta-marco {
  border-radius: 18px;
  padding: 9px;
  background:
    linear-gradient(160deg, rgba(var(--tinte), 0.5) 0%, rgba(0, 0, 0, 0) 42%),
    linear-gradient(200deg, #26241f 0%, #14130f 55%, #0b0a08 100%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--tinte), 0.35),
    inset 0 0 22px rgba(0, 0, 0, 0.85),
    0 14px 34px rgba(0, 0, 0, 0.55);
}

/* --- barra de nombre --- */

.barra-nombre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.42rem 0.7rem;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(var(--tinte), 0.26) 0%, rgba(var(--tinte-osc), 0.9) 100%),
    #17150f;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(var(--tinte), 0.22);
}

.nombre {
  margin: 0;
  font-family: "Cinzel", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #f3ecdd;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

/* --- coste de maná --- */

.coste { display: flex; gap: 4px; }

.pip {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #241f16;
  box-shadow:
    inset 0 -2px 3px rgba(0, 0, 0, 0.4),
    inset 0 2px 3px rgba(255, 255, 255, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.6);
}

.pip.generico { background: radial-gradient(circle at 35% 30%, #d8d2c6, #a8a196); }
.pip-w { background: radial-gradient(circle at 35% 30%, #fffcf2, #e3ddc6); }
.pip-u { background: radial-gradient(circle at 35% 30%, #b6dcf5, #7fb4dc); }
.pip-b { background: radial-gradient(circle at 35% 30%, #cec6bf, #9a8f88); }
.pip-r { background: radial-gradient(circle at 35% 30%, #f6b39c, #e07a5c); }
.pip-g { background: radial-gradient(circle at 35% 30%, #b6dcbb, #7cb287); }
.pip-oro { background: radial-gradient(circle at 35% 30%, #f6dc9a, #d2a94a); }

/* --- ventana de arte: aquí va la situación de partida --- */

.ventana-arte {
  margin: 7px 0;
  padding: 0.95rem 0.9rem;
  border-radius: 6px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(var(--tinte), 0.16) 0%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, #1d1b16 0%, #121109 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 0 0 2px rgba(var(--tinte), 0.16);
}

.escenario {
  margin: 0;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.12rem;
  line-height: 1.42;
  color: #ded5c2;
}

/* --- línea de tipo --- */

.linea-tipo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(var(--tinte), 0.24) 0%, rgba(var(--tinte-osc), 0.9) 100%),
    #17150f;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}

.tipo {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #efe7d6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.pip-tipo {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.repaso { font-weight: 400; opacity: 0.75; }

/* Símbolo de edición real (fuente Keyrune). Va sobre una placa clara porque
   los colores de rareza (común casi negro) no se leerían sobre el marco oscuro,
   igual que en una carta de verdad va sobre el marco y no sobre el arte. */
.simbolo-set {
  flex: 0 0 auto;
  width: 30px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1;
  background: linear-gradient(180deg, #efe7d5 0%, #d9cfb7 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.45);
}

/* --- caja de texto: pergamino, como el cuadro de reglas --- */

.caja-texto {
  position: relative;
  overflow: hidden;
  margin-top: 7px;
  padding: 0.95rem 0.9rem 1rem;
  border-radius: 6px;
  background: linear-gradient(180deg, #f0e8d6 0%, #e3d9c3 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 2px 10px rgba(120, 95, 50, 0.18);
  color: #1c1811;
}

/* Marca de agua del color, como el símbolo de gremio en la caja de texto. */
.caja-texto::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 230px;
  height: 230px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(var(--tinte), 0.5) 0 34%,
    transparent 36% 48%,
    rgba(var(--tinte), 0.5) 50% 58%,
    transparent 60%
  );
  opacity: 0.2;
  pointer-events: none;
}
.caja-texto > * { position: relative; }

.pregunta {
  margin: 0 0 0.85rem;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.26;
  color: #17130c;
}

.ayuda {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  color: #6d6350;
}

/* --- opciones, con aire de líneas de reglas --- */

.opciones { display: flex; flex-direction: column; gap: 0.5rem; }

.opcion {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: var(--tap);
  padding: 0.7rem 0.85rem;
  text-align: left;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.08rem;
  color: #1c1811;
  background: linear-gradient(180deg, #fbf6ea 0%, #f2ead7 100%);
  border: 1px solid #b9ac8d;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation; /* sin retardo de doble toque */
  user-select: none;          /* que mantener pulsado no seleccione texto */
  transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease;
}

.opcion:active:not(:disabled) { transform: scale(0.985); border-color: #8a7443; }
.opcion:disabled { cursor: default; }

.opcion:focus-visible,
.btn:focus-visible,
.nav-btn:focus-visible,
.fila:focus-visible,
.regla:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* La letra, como el símbolo de maná de una habilidad activada. */
.opcion .letra {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ded7c8, #b3aa97);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.28), inset 0 2px 3px rgba(255, 255, 255, 0.5);
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #2b2519;
}

.opcion .texto { flex: 1; }
.opcion .marca { font-size: 1.05rem; opacity: 0; }

/* Elegida pero aún sin confirmar. */
.opcion.elegida {
  border-color: #9c7a24;
  background: linear-gradient(180deg, #fdf3d5 0%, #f6e6b8 100%);
  box-shadow: 0 0 0 2px rgba(200, 160, 60, 0.45);
}
.opcion.elegida .letra { background: radial-gradient(circle at 35% 30%, #f7dd9c, #c69a34); }

.opcion.correcta {
  background: linear-gradient(180deg, #dff0d8 0%, #cbe6c0 100%);
  border-color: #5f8f52;
}
.opcion.correcta .letra { background: radial-gradient(circle at 35% 30%, #cdeac0, #7fb26c); }
.opcion.correcta .marca { opacity: 1; color: #2f6b28; }

.opcion.fallada {
  background: linear-gradient(180deg, #f6dcd8 0%, #eec6c0 100%);
  border-color: #a8574c;
}
.opcion.fallada .letra { background: radial-gradient(circle at 35% 30%, #f0c3ba, #c07c70); }
.opcion.fallada .marca { opacity: 1; color: #8d3227; }

.opcion.apagada { opacity: 0.5; }

/* --- resultado, dentro de la caja de texto --- */

.resultado {
  margin-top: 0.95rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(90, 74, 40, 0.35);
  animation: subir 0.25s ease both;
  scroll-margin-top: 5rem; /* que no lo tape la cabecera fija al hacer scroll */
}

@keyframes subir {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.veredicto {
  margin: 0 0 0.4rem;
  font-family: "Cinzel", Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
}
.veredicto:focus { outline: none; }
.veredicto.ok { color: #2f6b28; }
.veredicto.ko { color: #8d3227; }

.explicacion {
  margin: 0 0 0.7rem;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.45;
  color: #241f15;
}

/* Texto de ambientación: en cursiva y tras una línea, como en la carta. */
.flavor {
  margin: 0 0 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(90, 74, 40, 0.3);
  font-family: "EB Garamond", Georgia, serif;
  font-style: italic;
  color: #5d5340;
}

.reglas { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* Chip de regla: enlaza al texto oficial, con área táctil decente. */
.regla {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  border: 1px solid #b3a586;
  color: #4f4534;
  background: rgba(255, 255, 255, 0.35);
  text-decoration: none;
}
.regla::before { content: "CR"; margin-right: 0.3rem; color: #8a7433; font-weight: 600; }
.regla::after { content: "↗"; margin-left: 0.3rem; opacity: 0.5; font-size: 0.8em; }
.regla:active { border-color: #8a7433; color: #2f2818; }

/* --- línea de coleccionista --- */

.linea-colector {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.25rem 0.1rem;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(230, 222, 205, 0.5);
  font-variant-numeric: tabular-nums;
}

/* --- acciones, ya fuera de la carta --- */

.acciones {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 1rem;
}

.btn {
  min-height: 50px;
  padding: 0 1.35rem; /* hace falta cuando el botón va suelto y no a ancho completo */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(180deg, #f2ca50 0%, #d9ab35 100%);
  color: #2a2200;
}
.btn-primary:active { background: var(--gold-dim); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text-dim); }

.proximo {
  margin: 0.9rem 0 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* ---------- estados vacíos ---------- */

.vacio {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-dim);
}
.vacio p { margin: 0 0 1.2rem; }
.vacio p:last-child { margin-bottom: 0; }
.vacio h1 { font-family: "Cinzel", Georgia, serif; color: var(--text); }

/* ---------- archivo ---------- */

.resumen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem 0.5rem;
  text-align: center;
}
.stat b { display: block; font-family: "Cinzel", Georgia, serif; font-size: 1.3rem; color: var(--gold); line-height: 1.1; }
.stat span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }

.lista { display: flex; flex-direction: column; gap: 0.5rem; }

.fila {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: var(--tap);
  padding: 0.6rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
}
.fila:active { border-color: var(--gold-dim); }
.fila::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 12px 0 0 12px;
  background: rgba(214, 168, 74, 0.5);
}
.fila { position: relative; overflow: hidden; }

.fila .estado { font-size: 1.1rem; width: 1.4rem; text-align: center; }
.fila .info { flex: 1; min-width: 0; }
.fila .info b { display: block; font-family: "Cinzel", Georgia, serif; font-size: 0.9rem; font-weight: 600; }
.fila .info span {
  display: block;
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fila .flecha { color: var(--text-dim); }

.seccion-titulo {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 1.4rem 0 0.6rem;
}

.aviso-archivo {
  background: rgba(242, 202, 80, 0.08);
  border: 1px solid rgba(242, 202, 80, 0.25);
  color: var(--gold);
  border-radius: 12px;
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  margin-bottom: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
}
.aviso-archivo a { color: var(--gold); font-weight: 600; }

/* ---------- pie y toast ---------- */

.foot {
  max-width: 640px;
  margin: 1.5rem auto 0;
  padding: 0 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-dim);
}
.foot p { margin: 0.25rem 0; }
.foot-dim { opacity: 0.6; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 1.2rem);
  transform: translate(-50%, 1.5rem);
  background: #2c2a27;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 20;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- barra de confirmación ---------- */

.barra-confirmar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  padding: 0.7rem 1rem calc(env(safe-area-inset-bottom) + 0.7rem);
  background: linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, #131313 45%);
  display: flex;
  justify-content: center;
  animation: subir 0.18s ease both;
}
.barra-confirmar[hidden] { display: none; }
.barra-confirmar .btn { width: 100%; max-width: 608px; }

/* Hueco para que la barra no tape el final del contenido. */
body:has(.barra-confirmar:not([hidden])) { padding-bottom: 6rem; }

/* ---------- esqueleto de carga ---------- */

.skeleton { pointer-events: none; }
.skeleton .carta-marco { padding: 9px; }

.sk {
  border-radius: 8px;
  background: linear-gradient(90deg, #232221 25%, #2c2a28 37%, #232221 63%);
  background-size: 400% 100%;
  animation: brillo 1.4s ease infinite;
  margin-bottom: 0.7rem;
}
.sk-titulo { width: 100%; height: 34px; border-radius: 8px; }
.sk-arte { width: 100%; height: 120px; border-radius: 6px; }
.sk-tipo { width: 100%; height: 26px; border-radius: 8px; }
.sk-opcion { width: 100%; height: var(--tap); border-radius: 12px; }

@keyframes brillo {
  from { background-position: 100% 50%; }
  to { background-position: 0 50%; }
}

/* ---------- pendientes en el archivo ---------- */

.fila.pendiente { border-color: rgba(242, 202, 80, 0.35); }
.fila.pendiente .info b { color: var(--gold); }

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

@media (min-width: 560px) {
  body { font-size: 18px; }
  .acciones { flex-direction: row; }
  .acciones .btn { flex: 1; }
}