/* Mararía · El Quizzón — colores de Lanzarote: picón negro, arena, lava, mar, cal blanca */
@font-face { font-family: "Atkinson"; src: url(fonts/atkinson-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url(fonts/atkinson-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lucky"; src: url(fonts/luckiest.woff2) format("woff2"); font-display: swap; }

:root {
  --arena: #f6eddd;
  --arena-2: #efe2cb;
  --borde: #e2d2b6;
  --picon: #1f1a17;
  --picon-2: #3a302a;
  --texto: #221c18;
  --suave: #6b5d52;
  --cal: #ffffff;
  --lava: #e8590c;
  --lava-osc: #b8430a;
  --mar: #0c8599;
  --mar-osc: #0b6e7e;
  --ok: #2b8a3e;
  --ok-bg: #d3f9d8;
  --ko: #c92a2a;
  --ko-bg: #ffe3e3;
  --oro: #f59f00;
  --radio: 16px;
  --sombra: 0 3px 0 rgba(31, 26, 23, .18);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--arena);
  color: var(--texto);
  font: 400 19px/1.45 "Atkinson", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- cabecera ---------- */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 14px; padding-top: max(8px, env(safe-area-inset-top));
  background: var(--picon);
  color: #fff;
  border-bottom: 4px solid var(--lava);
}
.top-logo { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 0; }
.logo-volcan { font-size: 28px; }
.logo-txt { font-family: "Lucky", "Atkinson", sans-serif; font-size: 24px; letter-spacing: .5px; line-height: 1; color: #ffd8a8; }
.logo-txt small { display: block; font-size: 13px; color: #fff; opacity: .8; letter-spacing: 1px; }
.top-tools { display: flex; gap: 6px; }
.tool {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  min-width: 58px; padding: 4px 8px;
  background: var(--picon-2); color: #fff;
  border: 2px solid transparent; border-radius: 12px;
  font-size: 22px; line-height: 1.1;
}
.tool-lbl { font-size: 11px; opacity: .8; }
.tool.on { border-color: var(--oro); }

main { max-width: 720px; margin: 0 auto; padding: 16px 16px 48px; }

/* ---------- botones ---------- */
.btn {
  display: block; width: 100%;
  border: 0; border-radius: var(--radio);
  padding: 16px 18px; margin: 10px 0;
  font-weight: 700; font-size: 20px; text-align: center;
  box-shadow: var(--sombra);
  transition: transform .08s;
}
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn-main { background: var(--lava); color: #fff; font-family: "Lucky", "Atkinson", sans-serif; font-weight: 400; font-size: 26px; letter-spacing: .5px; padding: 18px; }
.btn-main small { display: block; font-family: "Atkinson", sans-serif; font-size: 15px; font-weight: 700; opacity: .9; letter-spacing: 0; }
.btn-main:hover { background: var(--lava-osc); }
.btn-fallos { background: var(--mar); color: #fff; }
.btn-fallos:hover { background: var(--mar-osc); }
.btn-fallos b { display: inline-block; min-width: 1.8em; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: #fff; color: var(--mar-osc); }
.btn-sec { background: var(--cal); color: var(--texto); border: 2px solid var(--borde); }
.btn-ko { background: var(--ko); color: #fff; }

/* ---------- inicio ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--picon); color: #fff;
  border-radius: 22px; padding: 22px 20px 24px;
  margin-bottom: 16px;
}
.hero::after { /* silueta de volcán */
  content: ""; position: absolute; right: -20px; bottom: -10px; width: 190px; height: 90px;
  background: var(--picon-2);
  clip-path: polygon(0 100%, 38% 22%, 46% 30%, 54% 18%, 62% 28%, 100% 100%);
}
.hero::before { /* lava */
  content: ""; position: absolute; right: 64px; bottom: 58px; width: 40px; height: 18px;
  background: var(--lava); border-radius: 50% 50% 0 0; filter: blur(4px); opacity: .8;
}
.hero h1 {
  position: relative; z-index: 1;
  margin: 0; font-family: "Lucky", "Atkinson", sans-serif; font-weight: 400;
  font-size: clamp(46px, 13vw, 72px); line-height: 1; letter-spacing: 1px;
  color: #ffd8a8; text-shadow: 3px 3px 0 var(--lava);
}
.hero-sub { position: relative; z-index: 1; margin: 6px 0 10px; font-weight: 700; color: #ffc078; font-size: 16px; }
.hero-txt { position: relative; z-index: 1; margin: 0; max-width: 30em; font-size: 17px; }

.nombre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; font-weight: 700; }
.nombre input {
  flex: 1; min-width: 180px;
  font: inherit; font-weight: 400; padding: 10px 14px;
  border: 2px solid var(--borde); border-radius: 12px; background: var(--cal); color: var(--texto);
}
.nombre input:focus { outline: 3px solid var(--oro); border-color: var(--oro); }

.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 6px; }
.tema {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  padding: 10px 12px; text-align: left;
  background: var(--cal); border: 2px solid var(--borde); border-radius: 14px;
  font-size: 16px; font-weight: 700;
}
.tema .t-ic { font-size: 22px; }
.tema .t-c { font-size: 13px; color: var(--suave); font-weight: 400; }
.tema.sel { border-color: var(--lava); background: #fff4e6; box-shadow: inset 0 0 0 1px var(--lava); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0 8px; }
.st { background: var(--cal); border: 2px solid var(--borde); border-radius: 14px; padding: 10px 6px; text-align: center; }
.st b { display: block; font-size: 24px; line-height: 1.1; }
.st b small { font-size: 14px; color: var(--suave); }
.st span { font-size: 13px; color: var(--suave); line-height: 1.2; display: block; }
@media (max-width: 520px) { .stats { grid-template-columns: repeat(2, 1fr); } }

h2 { font-size: 18px; margin: 18px 0 8px; }
.historial .hi {
  display: grid; grid-template-columns: 1fr auto auto 56px; gap: 10px; align-items: center;
  padding: 8px 12px; background: var(--cal); border-bottom: 1px solid var(--arena-2); font-size: 15px;
}
.historial .hi:first-of-type { border-radius: 12px 12px 0 0; }
.historial .hi:last-child { border-radius: 0 0 12px 12px; border-bottom: 0; }
.hi-f { color: var(--suave); }
.hi-t { white-space: nowrap; }
.hi-a { color: var(--suave); }
.hi-n { text-align: center; font-weight: 700; border-radius: 8px; padding: 2px 0; }

.fichas { margin-top: 22px; }
.fichas a {
  display: block; padding: 12px 14px; margin-bottom: 6px;
  background: var(--cal); border: 2px solid var(--borde); border-radius: 12px;
  color: var(--mar-osc); font-weight: 700; text-decoration: none;
}
.fichas a::after { content: " ↗"; }

/* ---------- juego ---------- */
.juego-top { display: flex; align-items: center; gap: 10px; }
.contador { font-family: "Lucky", "Atkinson", sans-serif; font-size: 30px; line-height: 1; }
.contador .de { font-family: "Atkinson", sans-serif; font-size: 17px; color: var(--suave); font-weight: 700; }
.marcador { margin-left: auto; display: flex; gap: 12px; font-size: 18px; }
.m-ok b { color: var(--ok); } .m-ko b { color: var(--ko); }
.btn-salir {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--borde); background: var(--cal); font-size: 20px; line-height: 1;
}
.barra { display: flex; gap: 4px; margin: 10px 0 14px; }
.barra span { flex: 1; height: 10px; border-radius: 5px; background: var(--arena-2); }
.barra span.ok { background: var(--ok); }
.barra span.ko { background: var(--ko); }
.barra span.ahora { background: var(--oro); }

.pregunta {
  background: var(--cal); border-radius: 20px; padding: 16px 18px 14px;
  border: 2px solid var(--borde); box-shadow: var(--sombra);
}
.p-tema { font-size: 14px; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .5px; }
.p-texto { margin: 6px 0 10px; font-size: clamp(22px, 5.4vw, 28px); line-height: 1.3; }
.btn-leer {
  border: 2px solid var(--borde); background: var(--arena); border-radius: 999px;
  padding: 6px 14px; font-size: 15px; font-weight: 700;
}

.opciones { display: grid; gap: 10px; margin-top: 14px; }
.op {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 64px; padding: 12px 14px; text-align: left;
  background: var(--cal); border: 3px solid var(--borde); border-radius: var(--radio);
  font-size: 19px; line-height: 1.3; box-shadow: var(--sombra);
  transition: transform .08s, background .15s, border-color .15s, opacity .2s;
}
.op:not(:disabled):hover { border-color: var(--lava); }
.op:not(:disabled):active { transform: translateY(2px); box-shadow: none; }
.op-letra {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--picon); color: #fff; font-family: "Lucky", "Atkinson", sans-serif; font-size: 20px; padding-top: 3px;
}
.op:disabled { cursor: default; }
.op.es-ok { background: var(--ok-bg); border-color: var(--ok); }
.op.es-ok .op-letra { background: var(--ok); }
.op.es-ok .op-letra::after { content: ""; }
.op.es-ko { background: var(--ko-bg); border-color: var(--ko); }
.op.es-ko .op-letra { background: var(--ko); }
.op.apagada { opacity: .45; }
.tiembla { animation: tiembla .45s; }
@keyframes tiembla {
  20% { transform: translateX(-8px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(5px); }
}

.feedback {
  margin-top: 14px; padding: 16px 18px; border-radius: 20px; border: 3px solid;
  animation: entra .25s ease-out;
}
@keyframes entra { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.fb-bien { background: var(--ok-bg); border-color: var(--ok); }
.fb-mal { background: var(--ko-bg); border-color: var(--ko); }
.fb-titulo { margin: 0 0 6px; font-size: 22px; font-weight: 700; line-height: 1.3; }
.fb-mal .fb-titulo { color: var(--ko); }
.fb-bien .fb-titulo { color: var(--ok); }
.fb-expl p { margin: 6px 0; }
.fb-correcta { font-size: 19px; }
.fb-mini { font-size: 14px; color: var(--suave); }
.btn-sig { margin-top: 14px; margin-bottom: 0; }

/* ---------- final ---------- */
.nota-card {
  text-align: center; border-radius: 24px; padding: 20px 18px 22px; color: #fff;
  background: var(--picon); border-bottom: 8px solid var(--oro);
}
.nota-lbl { margin: 0; font-weight: 700; opacity: .8; text-transform: uppercase; letter-spacing: 1px; font-size: 15px; }
.nota-num { margin: 0; font-family: "Lucky", "Atkinson", sans-serif; font-size: clamp(90px, 28vw, 140px); line-height: 1; padding-top: 8px; }
.nota-cal { margin: 0; font-family: "Lucky", "Atkinson", sans-serif; font-size: 30px; letter-spacing: .5px; }
.nota-det { margin: 6px 0 0; opacity: .85; font-weight: 700; }
.nota-com { margin: 12px auto 0; max-width: 28em; font-size: 19px; }
.nc-sobre { border-color: var(--oro); } .nc-sobre .nota-num, .nc-sobre .nota-cal { color: #ffd43b; }
.nc-nota { border-color: #40c057; } .nc-nota .nota-num, .nc-nota .nota-cal { color: #8ce99a; }
.nc-bien { border-color: #40c057; } .nc-bien .nota-num, .nc-bien .nota-cal { color: #b2f2bb; }
.nc-sufi { border-color: #fab005; } .nc-sufi .nota-num, .nc-sufi .nota-cal { color: #ffe066; }
.nc-insu { border-color: #fa5252; } .nc-insu .nota-num, .nc-insu .nota-cal { color: #ffa8a8; }
/* colores de la nota en el historial (fondo claro) */
.hi-n.nc-sobre { background: #fff3bf; color: #8a5a00; }
.hi-n.nc-nota, .hi-n.nc-bien { background: var(--ok-bg); color: var(--ok); }
.hi-n.nc-sufi { background: #fff3bf; color: #8a5a00; }
.hi-n.nc-insu { background: var(--ko-bg); color: var(--ko); }

.final-btns { margin: 14px 0; }
.repaso h2 { font-size: 20px; }
.rp { background: var(--cal); border: 2px solid var(--borde); border-left: 6px solid var(--ko); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.rp p { margin: 4px 0; }
.rp-q { font-weight: 700; font-size: 19px; }
.rp-tuya { color: var(--ko); }
.rp-ok { color: var(--ok); }
.rp-e { color: var(--texto); }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(31, 26, 23, .6); display: grid; place-items: center; padding: 16px; }
.modal-box { background: var(--cal); border-radius: 20px; padding: 20px; max-width: 420px; width: 100%; }
.modal-box p { margin: 0 0 12px; font-size: 20px; font-weight: 700; }
.modal-btns { display: flex; gap: 10px; }
.modal-btns .btn { margin: 0; }

/* ---------- confeti ---------- */
#confeti { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
#confeti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: cae linear forwards; }
@keyframes cae { to { top: 105vh; transform: rotate(720deg) translateX(40px); } }

@media (prefers-reduced-motion: reduce) {
  .tiembla, .feedback { animation: none; }
}