:root{
  --plato:#071430; --plato2:#0d2150; --linea:#24407e;
  --texto:#eef3ff; --texto2:#a9b9de;
  --oro:#ffc233; --oro2:#ff9d00;
  --ok:#2fd27a; --mal:#ff4d5e; --seguro:#3fb8ff;
  --boton:#10275c; --boton-borde:#3a62b8;
  --velo:rgba(3,8,22,.82);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--texto);
  background:radial-gradient(120% 60% at 50% -10%, var(--plato2) 0%, var(--plato) 60%) fixed, var(--plato);
  line-height:1.4;-webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  overscroll-behavior-y:none;
}
.num{font-family:Anton,Impact,"Arial Narrow",sans-serif;letter-spacing:.5px}
.app{max-width:560px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:14px 16px 20px}
.pantalla{display:none;flex:1;flex-direction:column}
.pantalla.on{display:flex}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--oro);outline-offset:2px}
a{color:inherit}
h2{font-size:15px;color:var(--texto2);font-weight:700;margin:14px 0 8px}
.sub{color:var(--texto2);font-size:14px;margin:4px 0 10px}
.enlace{color:var(--texto2);text-decoration:underline;font-size:14px;margin:12px auto 0;display:block}
.enlace.mini{font-size:13px;margin:0}
.tarjeta{border:1px solid var(--linea);border-radius:16px;padding:14px;background:rgba(255,255,255,.03)}
.barraP{height:9px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden;margin:6px 0 4px}
.barraP i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--oro2),var(--oro));border-radius:5px;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}

/* ============ LOGIN ============ */
.edicion{display:inline-block;margin-top:12px;padding:4px 14px;border:2px solid var(--seguro);border-radius:30px;color:var(--seguro);font-weight:700;font-size:14px;transform:rotate(-2deg)}
.formu{display:grid;gap:12px}
.formu label{display:grid;gap:4px;font-size:14px;color:var(--texto2)}
.formu input:not([type=checkbox]){padding:14px;border-radius:12px;border:2px solid var(--boton-borde);background:var(--boton);font-size:17px}
.check{display:flex!important;align-items:center;gap:8px}
.check input{width:20px;height:20px;accent-color:var(--oro)}
.error{color:var(--mal);font-weight:700}

/* ============ INICIO ============ */
.barra{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.barra .yo{font-weight:700;margin-right:auto}
.barra b{margin-right:auto;font-size:18px}
.ico{font-size:20px;width:42px;height:42px;border-radius:12px;border:1px solid var(--linea)}
.menu[hidden]{display:none}
.menu{display:grid;gap:4px;margin:-4px 0 12px;padding:8px;border:1px solid var(--linea);border-radius:14px;background:var(--plato2)}
.menu button,.menu a{text-align:left;padding:12px;border-radius:10px;text-decoration:none;font-size:16px}
.menu button:active,.menu a:active{background:rgba(255,255,255,.06)}

.rango{display:flex;gap:12px;align-items:center}
.rango .ic{font-size:44px;filter:drop-shadow(0 0 12px rgba(255,194,51,.4))}
.rango .info{flex:1;min-width:0}
.rango .info b{display:block;font-size:19px;line-height:1.1}
.rango small{font-size:12px;color:var(--texto2)}
.rango .pts{text-align:right}
.rango .pts .num{display:block;font-size:24px;color:var(--oro);line-height:1}

.fila3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.mini{text-align:center;padding:10px 4px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--linea)}
.mini .num{font-size:26px;display:block;color:var(--oro);line-height:1.1}
.mini small{font-size:12px;color:var(--texto2)}
.racha.fuego{border-color:var(--oro2);box-shadow:0 0 18px rgba(255,157,0,.35)}
.racha.peligro .num{color:var(--mal);animation:late 1.2s infinite}
.alerta{margin-top:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--mal);color:var(--mal);font-weight:700;font-size:14px;text-align:center}


.reto{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-top:12px;border-color:var(--seguro);background:linear-gradient(90deg,rgba(63,184,255,.12),transparent)}
.reto .ic{font-size:32px}
.reto b{display:block;font-size:17px}
.reto small{font-size:13px;color:var(--texto2)}
.reto .flecha{margin-left:auto;color:var(--seguro);font-size:20px}
.reto.hecho{border-color:var(--linea);background:none;opacity:.8}

.alcance{display:grid;gap:10px}
.alcance .grupo b{display:block;font-size:13px;color:var(--texto2);margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:8px 12px;border-radius:30px;border:2px solid var(--boton-borde);background:var(--boton);font-size:14px}
.chip small{color:var(--texto2);font-size:12px;margin-left:4px}
.chip.on{border-color:var(--oro);background:rgba(255,194,51,.15)}
.chip.todo{border-style:dashed}
.vacio{color:var(--texto2);font-size:14px;padding:12px;border:1px dashed var(--linea);border-radius:12px}

.largos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.largos button,.modos button{border:2px solid var(--boton-borde);background:var(--boton);border-radius:12px;padding:12px 4px}
.largos button .num{font-size:28px;display:block}
.largos button small{font-size:11px;color:var(--texto2)}
.largos button.on,.modos button.on{border-color:var(--oro);box-shadow:0 0 0 3px rgba(255,194,51,.25)}
.largos button:disabled{opacity:.35;cursor:not-allowed}
.modos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.modos button{text-align:left;padding:12px}
.modos b{display:block;font-size:16px}
.modos small{font-size:12px;color:var(--texto2)}
.inventario{display:flex;gap:14px;justify-content:center;color:var(--texto2);font-size:14px;margin:14px 0}
.gordo{
  margin-top:auto;width:100%;padding:18px;border-radius:16px;font-size:20px;font-weight:700;color:#1b1000;
  background:linear-gradient(180deg,var(--oro),var(--oro2));box-shadow:0 8px 30px rgba(255,157,0,.35);
}
.gordo:active{transform:translateY(1px)}
.gordo:disabled{opacity:.5}
.gordo.latido{animation:latido 1.6s infinite}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}

/* ============ JUEGO ============ */
.hud{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.hud .salir{font-size:22px;color:var(--texto2);padding:4px}
.premio{flex:1;text-align:center}
.premio .num{font-size:34px;color:var(--oro);line-height:1;display:inline-block}
.premio .num.sube{animation:salto .45s}
@keyframes salto{40%{transform:scale(1.25)}}
.premio small{display:block;font-size:12px;color:var(--texto2)}
.combo{min-width:58px;text-align:center;border-radius:10px;padding:4px 6px;border:1px solid var(--linea)}
.combo .num{font-size:22px;display:block;line-height:1.1}
.combo small{font-size:10px;color:var(--texto2)}
.combo.caliente{border-color:var(--oro2);color:var(--oro);box-shadow:0 0 18px rgba(255,157,0,.4)}
.combo.ardiendo{border-color:var(--mal);color:#fff;background:linear-gradient(180deg,var(--oro2),var(--mal));animation:latido .8s infinite}

.escalera{display:flex;gap:3px;margin:16px 0 6px}
.escalera i{flex:1;height:10px;border-radius:3px;background:rgba(255,255,255,.08);position:relative}
.escalera i.hecho{background:var(--oro)}
.escalera i.seguro{box-shadow:inset 0 0 0 2px var(--seguro)}
.escalera i.hecho.seguro{background:var(--seguro)}
.escalera i.ahora{background:#fff;animation:late 1s infinite}
.escalera i.fantasma::after{content:"👻";position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-size:12px}
@keyframes late{50%{opacity:.4}}
.subhud{display:flex;justify-content:space-between;font-size:13px;color:var(--texto2);margin-bottom:12px}

.pregunta{
  font-size:clamp(20px,5.6vw,24px);line-height:1.38;font-weight:700;
  padding:18px 16px;border-radius:16px;border:1px solid var(--linea);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  margin-bottom:auto;
}
.pregunta .art{display:block;font-size:13px;font-weight:400;color:var(--seguro);margin-bottom:8px}
.pregunta.tension{animation:tension 1s infinite}
@keyframes tension{50%{border-color:var(--oro2);box-shadow:0 0 24px rgba(255,157,0,.25)}}

.opciones{display:grid;gap:9px;margin-top:16px}
.opcion{
  display:flex;align-items:center;gap:12px;text-align:left;width:100%;min-height:58px;
  padding:12px 22px;font-size:19px;font-weight:700;
  background:var(--boton);border:2px solid var(--boton-borde);
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);
  transition:background .15s,border-color .15s;
}
.opcion .letra{color:var(--oro);font-family:Anton,Impact,sans-serif;font-size:20px;min-width:16px}
.opcion:disabled{cursor:default}
.opcion.elegida{background:#c98400;border-color:var(--oro);color:#1b1000;animation:parpadeo .3s 3}
@keyframes parpadeo{50%{filter:brightness(1.4)}}
.opcion.elegida .letra,.opcion.ok .letra,.opcion.mal .letra{color:inherit}
.opcion.ok{background:var(--ok);border-color:var(--ok);color:#03200f}
.opcion.mal{background:var(--mal);border-color:var(--mal);color:#2a0006;animation:temblor .4s}
@keyframes temblor{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.opcion.fuera{visibility:hidden}
.opcion.larga{font-size:15px;font-weight:400}

.comodines{display:flex;gap:8px;margin-top:12px}
.comodines button{flex:1;padding:10px;border-radius:12px;border:1px dashed var(--boton-borde);font-size:14px}
.comodines button:disabled{opacity:.3}
.comodines button.activo{border-style:solid;border-color:var(--seguro);color:var(--seguro)}

.hoja{
  position:fixed;left:0;right:0;bottom:0;z-index:20;max-width:560px;margin:0 auto;
  background:var(--plato2);border-top:3px solid var(--oro);border-radius:20px 20px 0 0;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));
  transform:translateY(105%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.9,.3,1.1),visibility 0s .28s;
  box-shadow:0 -12px 40px rgba(0,0,0,.45);
}
.hoja.on{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.9,.3,1.1)}
.hojaCab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.hoja h3{font-family:Anton,Impact,sans-serif;font-size:30px;line-height:1}
.hoja h3.ok{color:var(--ok)} .hoja h3.mal{color:var(--mal)}
.hoja p.ley{font-size:15px;line-height:1.5;color:var(--texto2);margin-bottom:14px;max-height:30vh;overflow:auto}
.hoja mark{background:var(--oro);color:#1b1000;padding:0 3px;border-radius:3px;font-weight:700}
.hoja .acciones{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
.hoja .acciones button{padding:15px;border-radius:14px;font-weight:700;font-size:16px}
.hoja .acciones button small{font-weight:400;font-size:13px}
.plantarse{border:2px solid var(--texto2)}
.arriesgar{background:linear-gradient(180deg,var(--oro),var(--oro2));color:#1b1000}
.hoja .acciones.una{grid-template-columns:1fr}

/* ============ FINAL ============ */
.final{text-align:center;padding-top:6px}
.final .titulo{font-family:Anton,Impact,sans-serif;font-size:clamp(40px,12vw,58px);line-height:1;color:var(--oro)}
.final .titulo.mal{color:var(--mal)}
.cobrado{font-size:16px;color:var(--texto2);margin-top:6px}
.cobrado b{font-size:40px;color:var(--texto);display:block;line-height:1.1}
.cobrado small{display:block;font-size:13px}
.casi{margin:12px 0;padding:12px;border-radius:12px;border:1px solid var(--oro2);color:var(--oro);font-weight:700}
.resumen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.resumen div{padding:10px 4px;border-radius:12px;border:1px solid var(--linea)}
.resumen .num{font-size:24px;display:block}
.resumen small{font-size:12px;color:var(--texto2)}
.progreso{text-align:left}
.progreso .lin{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.progreso small{color:var(--texto2);font-size:13px}
.logrosNuevos{display:grid;gap:8px;margin-top:12px}
.logroNuevo{display:flex;gap:12px;align-items:center;text-align:left;padding:12px;border-radius:14px;border:2px solid var(--oro);background:rgba(255,194,51,.1);animation:entra .5s backwards}
.logroNuevo .ic{font-size:34px}
.logroNuevo b{display:block}
.logroNuevo small{color:var(--texto2);font-size:13px}
@keyframes entra{from{opacity:0;transform:translateY(16px) scale(.9)}}
.cofre{margin:14px auto 6px;font-size:76px;display:block;filter:drop-shadow(0 0 18px rgba(255,194,51,.45))}
.cofre:disabled{filter:grayscale(1);opacity:.35}
.cofre.cerrado{animation:tiembla 1.2s infinite}
.cofre.abierto{animation:revienta .5s}
@keyframes revienta{50%{transform:scale(1.5) rotate(10deg)}}
@keyframes tiembla{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-8deg)}90%{transform:rotate(8deg)}95%{transform:rotate(-4deg)}}
.botin{min-height:24px;font-weight:700;color:var(--oro);margin-bottom:12px;font-size:18px}

/* ============ LOGROS ============ */
.listaLogros{display:grid;gap:8px;margin:12px 0 16px}
.logro{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;border:1px solid var(--linea)}
.logro .ic{font-size:30px;width:46px;text-align:center;flex-shrink:0}
.logro .txt{flex:1;min-width:0}
.logro b{display:block;font-size:15px}
.logro small{font-size:13px;color:var(--texto2)}
.logro .pct{font-size:12px;color:var(--texto2);text-align:right;white-space:nowrap}
.logro.on{border-color:var(--oro);background:rgba(255,194,51,.07)}
.logro:not(.on) .ic{filter:grayscale(1);opacity:.35}

/* ============ RANKING ============ */
.pestanas{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.pestanas button{padding:10px 4px;border-radius:12px;border:2px solid var(--boton-borde);font-size:14px;background:var(--boton)}
.pestanas button.on{border-color:var(--oro)}
.tabla{list-style:none;display:grid;gap:6px}
.tabla li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--linea)}
.tabla .pos{font-family:Anton,Impact,sans-serif;font-size:20px;width:30px;text-align:center;color:var(--texto2)}
.tabla .quien{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabla .quien small{display:block;color:var(--texto2);font-size:12px}
.tabla .cuanto{font-family:Anton,Impact,sans-serif;font-size:18px}
.tabla li.yo{border-color:var(--oro);background:rgba(255,194,51,.1)}
.tabla li.sube{box-shadow:inset 4px 0 0 var(--ok)}
.tabla li.baja{box-shadow:inset 4px 0 0 var(--mal)}
.tabla li.corte{border:0;padding:2px 12px;font-size:12px;color:var(--texto2);justify-content:center}
.tabla li:nth-child(1) .pos{color:#ffd54a}.tabla li:nth-child(2) .pos{color:#cfd8e8}.tabla li:nth-child(3) .pos{color:#e0a36b}

/* ============ CELEBRACIÓN ============ */
.celebra{position:fixed;inset:0;z-index:50;background:var(--velo);display:flex;align-items:center;justify-content:center;padding:24px}
.celebra[hidden]{display:none}
.celebra .caja{text-align:center;max-width:380px;width:100%;animation:entra .5s}
.celebra .ic{font-size:96px;filter:drop-shadow(0 0 30px rgba(255,194,51,.6));animation:gira 1.2s}
@keyframes gira{from{transform:scale(.2) rotate(-200deg)}}
.celebra small{display:block;letter-spacing:4px;color:var(--seguro);font-weight:700;margin-top:10px}
.celebra h2{font-family:Anton,Impact,sans-serif;font-size:42px;color:var(--oro);margin:4px 0 8px;line-height:1.05}
.celebra p{color:var(--texto2);margin-bottom:22px}
.celebra.mal h2{color:var(--mal)}

#toast{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%,-160%);z-index:60;
  background:var(--plato2);border:2px solid var(--oro);color:var(--oro);font-weight:700;padding:10px 18px;border-radius:30px;
  transition:transform .3s,visibility 0s .3s;visibility:hidden;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
#toast.on{transform:translate(-50%,0);visibility:visible;transition:transform .3s}
.destello{position:fixed;inset:0;pointer-events:none;z-index:30;opacity:0}
.destello.ok{background:radial-gradient(circle,rgba(47,210,122,.35),transparent 70%);animation:flash .5s}
.destello.mal{background:radial-gradient(circle,rgba(255,77,94,.4),transparent 70%);animation:flash .5s}
.destello.seguro{background:radial-gradient(circle,rgba(63,184,255,.5),transparent 70%);animation:flash .9s}
@keyframes flash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
#confeti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:55}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}


/* ============ EXAMEN ============ */
.mapa{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:10px 0 8px}
.mapa button{height:26px;border-radius:6px;font-size:11px;font-weight:700;border:1px solid var(--linea);background:rgba(255,255,255,.04);color:var(--texto2);padding:0}
.mapa button.hecha{background:var(--oro);border-color:var(--oro);color:#1b1000}
.mapa button.actual{outline:2px solid #fff;outline-offset:1px}
.opcion.marcada{background:#c98400;border-color:var(--oro);color:#1b1000}
.opcion.marcada .letra{color:#1b1000}
.exNav{display:grid;grid-template-columns:56px 1fr 56px;gap:8px;margin:12px 0}
.exNav button{padding:12px;border-radius:12px;border:2px solid var(--boton-borde);background:var(--boton);font-weight:700}
.exNav button:disabled{opacity:.3}
#exEntregar{margin-top:4px}
/* Revisión tras entregar */
.revision{text-align:left;margin-top:16px;display:grid;gap:10px}
.revision h3{font-size:16px;color:var(--texto2);margin-top:4px}
.revision .filtros{display:flex;gap:6px;flex-wrap:wrap}
.revision .filtros button{padding:6px 12px;border-radius:20px;border:2px solid var(--boton-borde);font-size:13px}
.revision .filtros button.on{border-color:var(--oro)}
.rev{border:1px solid var(--linea);border-radius:14px;padding:12px;border-left-width:5px}
.rev.bien{border-left-color:var(--ok)} .rev.mal{border-left-color:var(--mal)} .rev.blanco{border-left-color:var(--texto2)}
.rev .cab{font-size:12px;color:var(--texto2);margin-bottom:4px}
.rev .enun{font-weight:700;font-size:15px;margin-bottom:6px}
.rev .ops{display:grid;gap:4px;font-size:14px}
.rev .ops span{padding:4px 8px;border-radius:8px;color:var(--texto2)}
.rev .ops .es{background:rgba(47,210,122,.18);color:var(--ok);font-weight:700}
.rev .ops .tuya{background:rgba(255,77,94,.18);color:var(--mal);text-decoration:line-through}
.rev .expl{font-size:13px;color:var(--texto2);margin-top:6px}
.rev .expl mark{background:var(--oro);color:#1b1000;border-radius:3px;padding:0 3px}

/* ============ SELECTOR DE TRAMOS ============ */
.alcance{gap:12px}
.tuti{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px;border:1px dashed var(--boton-borde);border-radius:14px}
.tuti > span{font-weight:700;font-size:14px;color:var(--texto2)}
.norma{border:1px solid var(--linea);border-radius:14px;padding:10px;background:rgba(255,255,255,.02)}
.nnorma{display:block;font-size:15px;margin-bottom:8px;color:var(--oro)}
.temaFila{display:grid;grid-template-columns:96px 1fr;gap:8px;align-items:start;padding:6px 0;border-top:1px solid rgba(255,255,255,.05)}
.temaFila:first-of-type{border-top:0}
.temaBtn{text-align:left;padding:6px 8px;border-radius:10px;border:2px solid var(--boton-borde);background:var(--boton);font-weight:700;font-size:14px;line-height:1.15}
.temaBtn small{display:block;font-weight:400;font-size:11px;color:var(--texto2)}
.temaBtn.on{border-color:var(--oro);background:rgba(255,194,51,.15)}
.temaBtn.fijo{border-style:dashed;cursor:default}
.temaBtn:disabled,.chip:disabled{opacity:.35;cursor:not-allowed}
.chip{padding:6px 10px;font-size:13px}
.saltos{margin-top:8px;font-size:12px;color:var(--mal)}
.norma .nota{font-size:13px;color:var(--texto2)}

/* ============ TEMARIO ============ */
#tLista{display:grid;gap:10px}
.temaInfo{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(255,255,255,.06)}
.temaInfo > div{flex:1;min-width:0}
.temaInfo b{display:block}
.temaInfo small{color:var(--texto2);font-size:13px}
.carta .desc{font-size:13px;color:var(--texto2);margin-bottom:8px}
.carta .saltos{color:var(--mal);font-size:13px;margin-top:8px}
.fuenteT{margin-top:8px;color:var(--texto2);font-size:13px}
@media (min-width:760px){.temarioLanding{grid-template-columns:1.4fr 1fr}}
.nw{white-space:nowrap}

/* Escudo puesto: el botón no se apaga y la pregunta brilla en azul con su chapa */
.comodines button.activo:disabled{opacity:1;background:rgba(63,184,255,.14);box-shadow:0 0 14px rgba(63,184,255,.45)}
#juego.escudado .pregunta{position:relative;border-color:var(--seguro);box-shadow:0 0 0 1px var(--seguro),0 0 22px rgba(63,184,255,.35);animation:escudoLate 2s ease-in-out infinite}
#juego.escudado .pregunta::before{content:"🛡️ Escudo activado";position:absolute;top:-12px;right:14px;padding:2px 10px;border-radius:20px;background:var(--seguro);color:#04121f;font-size:12px;font-weight:800;letter-spacing:.02em}
#juego.escudado .pregunta.tension{animation:tension 1s infinite}
@keyframes escudoLate{50%{box-shadow:0 0 0 1px var(--seguro),0 0 34px rgba(63,184,255,.6)}}
@media (prefers-reduced-motion:reduce){#juego.escudado .pregunta{animation:none}}

/* Repaso del día: el aviso es un botón; en verde cuando estás al día */
.eligeRepaso{display:flex;gap:8px;margin-top:8px}
.eligeRepaso[hidden]{display:none}
.eligeRepaso button{flex:1;padding:10px 6px;border-radius:12px;border:1px solid var(--seguro);color:var(--seguro);font-weight:700}

/* Mapa de dominio en el selector: en curso = barrita naranja; dominado = verde con ✔ */
.chip.curso{background:linear-gradient(90deg,rgba(255,157,0,.38) var(--p,0%),var(--boton) var(--p,0%))}
.chip.dom{border-color:var(--ok);background:rgba(47,210,122,.14)}
.chip.dom small{color:var(--ok);font-weight:700}
.chip.on.dom,.chip.on.curso{border-color:var(--oro)}
.leyendaDominio{font-size:12px;color:var(--texto2);text-align:center}
.leyendaDominio .curso{color:var(--oro2);font-weight:400}
.leyendaDominio .dom{color:var(--ok);font-weight:400}

/* Inicio: Hoy toca (dorado), Repaso (azul) y Reto (azul): las tres tarjetas iguales */
.reto.hoy{border-color:var(--oro);background:linear-gradient(90deg,rgba(255,194,51,.13),transparent)}
.reto.hoy .flecha{color:var(--oro)}
.reto.hoy .txt{flex:1;min-width:0}
.reto.hoy .barraP{margin:6px 0 0}
.reto.repaso.aldia{border-color:var(--ok);background:linear-gradient(90deg,rgba(47,210,122,.12),transparent);cursor:default}
.reto.repaso.aldia .flecha{color:var(--ok)}
.reto:disabled{opacity:1}
.reto{min-height:100px}

/* 📅 Fila del examen (arriba del todo del inicio) y objetivo semanal */
.examen{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;margin-bottom:10px;padding:10px 14px;
  border:1px solid var(--linea);border-left:4px solid var(--seguro);border-radius:12px;background:rgba(63,184,255,.07);color:inherit;font:inherit;cursor:pointer}
.examen b{font-size:15px}
.examen small{opacity:.85;font-size:12.5px}
.examen.aviso{border-left-color:var(--oro2);background:rgba(255,157,0,.09)}
.objetivo{margin:-4px 0 12px;padding:10px 14px;border:1px solid var(--linea);border-radius:12px;background:rgba(255,255,255,.03)}
.objetivo[hidden]{display:none}
.objetivo .botones{display:flex;gap:8px;margin-top:8px}
.objetivo .botones button{flex:1;padding:10px 0;border-radius:10px;border:1px solid var(--linea);background:rgba(255,255,255,.04);color:inherit;font:inherit;font-weight:700;cursor:pointer}
.objetivo .botones button.on{border-color:var(--oro);box-shadow:0 0 0 3px rgba(255,194,51,.25);color:var(--oro)}