/* Prueba 1 · ¿Cuánto conoces a tu novio? (v3, sobre lima): fichas de leche que sobresalen, opciones gorditas con su letra en un
   círculo, comodines blanditos y una estrella chicle asomando abajo a la izquierda. */
.quiz{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--sp-4);-webkit-user-select:none;user-select:none}
.quiz > :not(.stk){position:relative;z-index:1}
.quiz [hidden]{display:none !important}
.st-quiz{width:clamp(180px,58vw,236px);left:-104px;bottom:-110px;rotate:14deg}

/* ---------- verdadero o falso: la ficha de leche, con su canto; se desliza con el dedo ---------- */
.quiz-card{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  min-height:300px;margin-bottom:var(--canto);padding:64px 24px 36px;border-radius:var(--r-hoja);text-align:center;
  background:var(--leche);color:var(--tinta);box-shadow:0 var(--canto) 0 var(--lima-d);
  touch-action:none;cursor:grab;-webkit-touch-callout:none;
  transform:translateX(var(--dx,0px)) rotate(var(--rot,0deg));will-change:transform;
}
.quiz-card:focus-visible{outline:3px solid var(--tinta);outline-offset:4px}
.quiz-card.is-dragging{cursor:grabbing}
.quiz-card.is-back{transition:transform .3s cubic-bezier(.2,.9,.3,1.25)}
.quiz-card.is-flying{transition:transform .26s ease-in,opacity .26s ease-in;pointer-events:none}
.quiz-card-text{margin:0;text-wrap:balance;font:400 clamp(32px,10vw,40px)/.98 var(--display)}
/* lo que va a contestar al arrastrar: un sello de color */
.quiz-hint{
  position:absolute;top:18px;padding:0 14px;height:36px;display:flex;align-items:center;border-radius:var(--r-pill);opacity:0;pointer-events:none;
  font:800 16px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;
}
.quiz-hint.is-false{left:16px;background:var(--tomate);color:var(--tinta);transform:rotate(-8deg)}
.quiz-hint.is-true{right:16px;background:var(--cobalto);color:#fff;transform:rotate(8deg)}

/* ficha ya respondida: si acierta se vuelve tinta (ya está pulsada); si no, tiembla */
.quiz-card.is-answered{min-height:0;margin-bottom:0;padding:34px 22px 26px;cursor:default;touch-action:auto;box-shadow:none}
.quiz-card.is-ok{background:var(--tinta);color:#fff;animation:pop .4s cubic-bezier(.2,1.4,.4,1) both}
.quiz-card.is-bad{background:var(--leche);box-shadow:inset 0 0 0 3px var(--tomate)}
.quiz-mark{
  position:absolute;top:-18px;left:50%;display:grid;place-items:center;width:42px;height:42px;margin-left:-21px;border-radius:50%;
  font:800 22px/1 var(--ui);box-shadow:0 0 0 4px var(--bg);
}
.quiz-card.is-ok .quiz-mark{background:var(--lima);color:var(--tinta)}
.quiz-card.is-bad .quiz-mark{background:var(--tomate);color:var(--tinta)}
.quiz-stamp{
  display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:var(--r-pill);transform:rotate(-4deg);
  font:800 17px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;
}
.quiz-stamp.is-true{background:var(--cobalto);color:#fff}
.quiz-stamp.is-false{background:var(--tomate);color:var(--tinta)}

/* los dos pulsadores: tomate «Falso», cobalto «Verdadero», con su canto */
.quiz-pick{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.quiz-pick .btn{min-height:64px}
.quiz-pick .btn:disabled{opacity:1}
.btn.quiz-false{--face:var(--tomate);--lab:var(--tinta);--edge:var(--tomate-d)}
.btn.quiz-true{--face:var(--cobalto);--lab:#fff;--edge:var(--cobalto-d)}

/* lo que sale tras responder (rótulos de components.css) */
.quiz-feedback,.quiz-foot{display:flex;flex-direction:column;gap:var(--sp-3)}
.quiz-chat{-webkit-user-select:text;user-select:text}
.quiz-next{margin-top:var(--sp-1)}

/* ---------- test de 4 opciones: teclas de leche con la letra en un círculo; la buena se vuelve tinta y se queda hundida ---------- */
.quiz-question{margin:0;text-wrap:balance;font:400 var(--t-l)/.92 var(--display);color:var(--fg)}
.quiz-options{display:grid;gap:5px}
.quiz-option{
  display:flex;align-items:center;gap:14px;width:100%;min-height:56px;margin-bottom:5px;padding:7px 14px 7px 9px;border-radius:var(--r-tesela);
  background:var(--leche);color:var(--tinta);text-align:left;font:700 19px/1.15 var(--ui);
  box-shadow:0 5px 0 var(--lima-d);transition:transform .08s,box-shadow .08s,opacity .2s,background-color .15s;
}
.quiz-option:active:not(:disabled){transform:translateY(5px);box-shadow:0 0 0 var(--lima-d)}
.quiz-option:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.quiz-option:disabled{cursor:default}
.quiz-letter{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor;font:800 15px/1 var(--ui)}
.quiz-opt-text{flex:1;min-width:0;overflow-wrap:anywhere}
.quiz-opt-mark{flex:none;font:800 16px/1 var(--ui)}
.quiz-opt-mark:empty{display:none}
.quiz-option.is-struck{opacity:.3;text-decoration:line-through;text-decoration-thickness:2px}
.quiz-option.is-correct{background:var(--tinta);color:#fff;transform:translateY(5px);box-shadow:0 0 0 var(--tinta-d)}
.quiz-option.is-correct .quiz-letter{background:var(--lima);color:var(--tinta);box-shadow:none}
.quiz-option.is-correct .quiz-opt-mark{color:var(--lima)}
.quiz-option.is-wrong{background:var(--tomate);color:var(--tinta);transform:translateY(5px);box-shadow:0 0 0 var(--tomate-d)}
.quiz-option.is-wrong .quiz-letter{background:var(--tinta);color:#fff;box-shadow:none}
.quiz-option.is-dim{opacity:.45}

/* ---------- comodines: botones blanditos con su icono ---------- */
.quiz-jokers{display:flex;gap:10px}
.quiz-joker{
  display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-height:52px;margin-bottom:var(--canto);padding:0 14px;border-radius:var(--r-pill);
  background:var(--leche);color:var(--tinta);box-shadow:0 var(--canto) 0 var(--d);white-space:nowrap;font:800 17px/1 var(--ui);
  transition:transform .08s,box-shadow .08s,opacity .2s;
}
.quiz-joker:first-child{flex:.7}
.quiz-joker::before{
  content:"";flex:none;width:22px;height:22px;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
}
.quiz-joker:first-child{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.6' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cpath d='M12 3.4a8.6 8.6 0 0 1 0 17.2z'/%3E%3C/svg%3E")}
.quiz-joker:last-child{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E")}
.quiz-joker:last-child > span:first-child[aria-hidden]{display:none} /* el 📞: ya lo pone el icono */
.quiz-joker:active:not(:disabled){transform:translateY(var(--canto));box-shadow:0 0 0 var(--d)}
.quiz-joker:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
.quiz-joker:disabled{cursor:default}
.quiz-joker.is-used{opacity:.4;text-decoration:line-through;transform:translateY(var(--canto));box-shadow:0 0 0 var(--d)}
.quiz-joker.is-off{opacity:.45}

/* ---------- llamada entrante: la del iPhone de verdad, encima de todo ---------- */
.quiz-call{
  position:fixed;inset:0;z-index:800;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:calc(84px + var(--sat)) 24px calc(56px + var(--sab));text-align:center;color:#fff;
  background:rgba(10,8,20,.78);font-family:system-ui,-apple-system,sans-serif;
  -webkit-backdrop-filter:blur(28px) saturate(1.3);backdrop-filter:blur(28px) saturate(1.3);
  animation:quiz-call-in .3s ease-out both;
}
@keyframes quiz-call-in{from{opacity:0}}
.quiz-call-title{margin:0;font:500 32px/1.15 system-ui,-apple-system,sans-serif}
.quiz-call-avatar{
  position:relative;display:grid;place-items:center;width:140px;height:140px;border-radius:50%;
  background:linear-gradient(#9AA7B3,#5C6B78);font:600 70px/1 system-ui,-apple-system,sans-serif;color:#fff;
}
.quiz-call-avatar::before,.quiz-call-avatar::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.55);
  animation:quiz-ring 2.2s ease-out infinite;
}
.quiz-call-avatar::after{animation-delay:1.1s}
@keyframes quiz-ring{from{transform:scale(1);opacity:.8}to{transform:scale(2);opacity:0}}
.quiz-call-hang{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:96px;font:500 17px/1 system-ui,-apple-system,sans-serif;color:#fff}
.quiz-call-hang:focus-visible{outline:3px solid #fff;outline-offset:6px;border-radius:16px}
.quiz-call-hang-ico{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:#FF3B30}
.quiz-call-hang:active .quiz-call-hang-ico{transform:scale(.94)}

/* ---------- termómetro: un tubo hundido de tinta, el mercurio tomate, el mando girasol que sobresale y la cifra al lado ---------- */
.quiz-thermo{display:flex;align-items:center;justify-content:center;gap:24px}
.quiz-gauge{
  position:relative;flex:none;width:116px;height:344px;cursor:pointer;touch-action:none;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
}
.quiz-gauge:focus-visible{outline:3px solid var(--tinta);outline-offset:4px;border-radius:20px}
.quiz-gauge.is-locked{cursor:default}
.quiz-tube{position:absolute;left:24px;top:6px;width:40px;height:306px;border-radius:20px 20px 0 0;background:var(--tinta);box-shadow:inset 0 6px 0 var(--tinta-d)}
.quiz-track{position:absolute;left:34px;top:24px;width:20px;height:264px;--p:0%}
.quiz-mercury{position:absolute;left:0;right:0;bottom:-20px;height:calc(var(--p) + 20px);border-radius:10px 10px 0 0;background:var(--tomate)}
.quiz-knob{
  position:absolute;z-index:2;left:50%;bottom:var(--p);width:46px;height:42px;margin:0 0 -21px -23px;border-radius:21px;
  background:var(--girasol);box-shadow:0 0 0 3px #fff,0 5px 0 3px var(--girasol-d);
}
.quiz-gauge.is-locked .quiz-knob{background:var(--leche-d);box-shadow:0 0 0 3px #fff}
.quiz-bulb{position:absolute;left:5px;bottom:0;width:78px;height:78px;border-radius:50%;background:var(--tomate);box-shadow:0 0 0 5px var(--tinta),0 9px 0 5px var(--tinta-d)}
.quiz-real{
  position:absolute;z-index:1;left:-26px;width:72px;bottom:var(--p);height:6px;margin-bottom:-3px;border-radius:3px;
  background:var(--cobalto);box-shadow:0 0 0 2px #fff;
}
.quiz-ticks{position:absolute;left:72px;top:24px;width:44px;height:264px}
.quiz-tick{position:absolute;left:0;bottom:var(--t);display:flex;align-items:center;gap:5px;transform:translateY(50%);font:400 17px/1 var(--display);color:var(--tinta)}
.quiz-tick i{width:10px;height:3px;border-radius:2px;background:var(--tinta)}
.quiz-thermo-side{display:flex;flex-direction:column;align-items:center;gap:18px;min-width:0}
.quiz-value{display:block;font:400 clamp(76px,24vw,104px)/.86 var(--display);color:var(--tinta);font-variant-numeric:tabular-nums}
.quiz-value.is-real{color:var(--cobalto);animation:pop .4s cubic-bezier(.2,1.4,.4,1) both}
.quiz-steps{display:flex;gap:14px}
.quiz-step{
  width:62px;height:58px;margin-bottom:5px;border-radius:var(--r-tesela);background:var(--leche);color:var(--tinta);box-shadow:0 5px 0 var(--lima-d);
  font:400 40px/1 var(--display);touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:transform .08s,box-shadow .08s;
}
.quiz-step:active:not(:disabled){transform:translateY(5px);box-shadow:0 0 0 var(--lima-d)}
.quiz-step:disabled{opacity:.35;cursor:default}
.quiz-step:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}

@media (max-width:359px){
  .quiz-thermo{gap:12px}
  .quiz-card{min-height:260px}
  .quiz-option{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .quiz-card.is-back,.quiz-card.is-flying,.quiz-option{transition-duration:.01ms !important}
}