/* Desafíos: pregunta, temporizador, alternativas, cartas V/F, cofres, ruleta,
   palabra oculta y completa la frase. */

.q-text{font-size:1.2rem;font-weight:700;line-height:1.3;margin-bottom:18px;font-family:var(--font);color:var(--ink)}
.timerbar{height:7px;background:#EEECF6;border-radius:99px;overflow:hidden;margin-bottom:18px}
.timerbar i{display:block;height:100%;background:linear-gradient(90deg,var(--vo,var(--indigo)),var(--v,var(--cian)));border-radius:99px;transition:width .25s linear}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{text-align:left;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;background:#F7F6FB;font-family:var(--font);font-size:.98rem;font-weight:500;cursor:pointer;color:var(--ink);transition:border-color .12s,background .12s,opacity .3s,transform .3s}
.opt:not([disabled]):active{border-color:var(--navy);background:#fff}
.opt.sel{border-color:var(--navy);background:#ECEAF6;font-weight:700}
.opt:focus-visible,.chip:focus-visible,.chest:focus-visible,.kb button:focus-visible{outline:3px solid var(--cian);outline-offset:2px}
.evaluando{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px;font-family:var(--font);font-weight:600;font-size:.92rem;color:var(--navy);animation:fadein .2s}
.ev-spinner{width:16px;height:16px;border:2.5px solid #D8D4EC;border-top-color:var(--navy);border-radius:50%;animation:evspin .7s linear infinite;display:inline-block}
@keyframes evspin{to{transform:rotate(360deg)}}
.opt.boom{opacity:0;transform:scale(.85) rotate(-2deg);pointer-events:none}
.mult-badge{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-family:var(--font);font-size:1rem;background:var(--navy);color:#fff;border-radius:99px;padding:6px 16px;margin-bottom:14px}

.swipe-zone{position:relative;aspect-ratio:612/792;margin:6px auto 12px;width:100%;max-width:280px;touch-action:none;perspective:1200px}
.swipe-card{position:absolute;inset:0;border-radius:20px;cursor:grab;user-select:none;will-change:transform;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.swipe-card .face{position:absolute;inset:0;border-radius:20px;display:flex;align-items:center;justify-content:center;text-align:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 12px 22px rgba(20,10,60,.22))}
/* El nuevo naipe tiene la curva de marca abajo: el texto se ubica en la zona blanca superior. */
.swipe-card .front .qtext{padding:0 34px;font-size:1.1rem;font-weight:800;line-height:1.3;font-family:var(--font);color:#2B1B71;margin-bottom:24%}
.swipe-card .back{transform:rotateY(180deg)}
/* Cara trasera neutral: muestra lo elegido, no si es correcto */
.swipe-card .back .qtext{padding:0 34px;font-family:var(--font);color:#2B1B71;margin-bottom:24%}
.swipe-card .back .eleccion{font-size:1.7rem;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:6px}
.swipe-card .back .eleccion small{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.swipe-card.flipped{transform:rotateY(180deg)}
.swipe-card.behind{transform:scale(.94) translateY(12px);opacity:.5;pointer-events:none}
.swipe-card.behind2{transform:scale(.88) translateY(24px);opacity:.28;pointer-events:none}
.swipe-card.flying{transition:transform .35s ease, opacity .35s}
.deck-count{text-align:center;font-size:.75rem;font-weight:700;color:var(--ink-soft);margin-bottom:8px;letter-spacing:.08em;text-transform:uppercase}
.swipe-hints{display:flex;justify-content:space-between;font-size:.85rem;font-weight:700;margin-bottom:10px}
.swipe-hints .f{color:var(--bad)} .swipe-hints .v{color:var(--ok)}
.swipe-btns{display:flex;gap:10px}
.swipe-btns .btn{flex:1}
.swipe-btns .no{background:#fff;color:var(--bad);border:2px solid var(--bad)} .swipe-btns .si{background:#fff;color:var(--ok);border:2px solid var(--ok)}
.stamp.v{left:16px;color:var(--aqua);border-color:var(--aqua)}
.stamp.f{right:16px;color:var(--bad);border-color:var(--bad);transform:rotate(12deg)}

@keyframes tick{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.bomb-count.hot{color:var(--bad)}

.chests{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 4px}
.chest{aspect-ratio:1;border:1.5px solid var(--line);border-radius:16px;background:#F7F6FB;font-size:2.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s,border-color .12s}
.chest:active{transform:scale(.94)}
.chest.open{border-color:var(--navy);background:var(--v,#ECEAF6)}
.chest .m{font-family:var(--font);font-weight:700;font-size:1.3rem;color:var(--navy)}

.wheel-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:6px 0 2px}
.wheel-pointer{font-size:1.5rem;line-height:1;margin-bottom:-6px;color:var(--navy)}
.wheel{width:190px;height:190px;border-radius:50%;border:6px solid var(--navy);
  background:conic-gradient(
    var(--agilidad) 0 72deg,
    var(--valentia) 72deg 144deg,
    var(--excelencia) 144deg 216deg,
    var(--transparencia) 216deg 288deg,
    var(--empatia) 288deg 360deg);
  position:relative;transition:transform 3.2s cubic-bezier(.15,.85,.25,1)}
.wheel span{position:absolute;top:50%;left:50%;font-weight:700;font-family:var(--font);color:var(--navy);font-size:1.05rem;font-weight:800}

.word-tiles{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.tile{width:34px;height:42px;border:2px solid var(--line);border-radius:9px;background:#F7F6FB;display:flex;align-items:center;justify-content:center;font-weight:800;font-family:var(--font);font-size:1.2rem;color:var(--navy)}
.tile.on{border-color:var(--vo,var(--cian));background:var(--v,#E4F5F8)}
.lives{text-align:center;font-size:1rem;letter-spacing:2px;margin-bottom:14px}
.kb{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.kb button{width:32px;height:40px;border:1.5px solid var(--line);border-radius:9px;background:#fff;font-family:var(--font);font-weight:700;font-size:.95rem;cursor:pointer;color:var(--ink)}
.kb button:disabled{opacity:.25}
.kb button.hit{background:#E7F4D6;border-color:var(--ok);color:var(--ok)}
.kb button.miss{background:#FBE7EB;border-color:var(--bad);color:var(--bad)}

.blank-sentence{font-size:1.2rem;font-weight:700;line-height:1.5;margin-bottom:18px;font-family:var(--font);color:var(--ink)}
.blank-slot{display:inline-block;min-width:110px;border-bottom:3px solid var(--vo,var(--cian));text-align:center;color:var(--vo,var(--navy))}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:10px 18px;border:1.5px solid var(--line);border-radius:99px;background:#F7F6FB;font-family:var(--font);font-size:.98rem;font-weight:600;cursor:pointer;color:var(--ink)}
.chip:active{border-color:var(--azul)}