/* MathGuru — quiz.css */
/* Tessera Question Time sulla tavola e pannello della domanda */

/* ── la tessera sulla tavola ──────────────────────────────────
   Punto interrogativo grande e, sotto, le due poste in gioco:
   a sinistra quanto costa ignorarla, a destra quanto rende
   aprirla e rispondere bene.                                  */
.cell.quiz{
  cursor:pointer;
  flex-direction:column;
  color:#04121a;
  background:linear-gradient(160deg,#8ef4ff,#22e6ff 42%,#4d8bff);
  border:3px solid #fff;
  text-shadow:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.5), 0 0 26px rgba(34,230,255,.8),
             0 0 60px rgba(77,139,255,.45);
  animation:quizBeat .95s ease-in-out infinite alternate,
            quizLife var(--ql,12s) linear forwards;
  z-index:7;
  padding:4% 0;
}
.cell.quiz .qm{
  display:block;
  font-family:var(--fd);
  font-weight:900;
  font-size:clamp(20px,5.4vw,42px);
  line-height:1;
}
.cell.quiz .qs{
  display:flex;gap:4px;align-items:center;justify-content:center;
  margin-top:6%;flex-wrap:wrap;
}
.cell.quiz .qs i{
  font-style:normal;
  font-family:var(--fd);
  font-weight:900;
  font-size:clamp(8px,2.05vw,14px);
  line-height:1;
  padding:2px 4px;
  border-radius:5px;
  white-space:nowrap;
}
.cell.quiz .qs .lose{background:rgba(180,10,40,.92);color:#fff}
.cell.quiz .qs .win{background:rgba(12,90,20,.92);color:#c9ff9a}
@keyframes quizBeat{
  from{transform:scale(1) rotate(-3deg)}
  to{transform:scale(1.09) rotate(3deg)}
}
@keyframes quizLife{0%,60%{opacity:1}100%{opacity:0}}

/* ── il pannello della domanda ────────────────────────────── */
.qpanel{
  position:fixed;inset:0;z-index:62;display:grid;place-items:center;padding:16px;
  background:radial-gradient(70% 60% at 50% 45%, rgba(10,40,70,.82), rgba(3,1,10,.94));
  backdrop-filter:blur(6px);
  animation:qIn .22s ease;
}
.qpanel[hidden]{display:none}
@keyframes qIn{from{opacity:0}to{opacity:1}}

.qcard{
  width:min(520px,100%);
  background:linear-gradient(170deg,rgba(18,52,92,.85),rgba(8,6,28,.94));
  border:1px solid rgba(34,230,255,.55);
  border-radius:20px;
  padding:clamp(16px,4.4vw,26px);
  box-shadow:0 26px 80px rgba(0,0,0,.7), 0 0 60px rgba(34,230,255,.18),
             inset 0 1px 0 rgba(255,255,255,.16);
  animation:qCard .3s cubic-bezier(.2,1.3,.4,1);
}
@keyframes qCard{from{transform:scale(.9) translateY(14px);opacity:0}to{transform:none;opacity:1}}

.qhead{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.qtag{
  font-family:var(--fd);font-weight:900;letter-spacing:.22em;
  font-size:clamp(12px,3.4vw,15px);
  background:linear-gradient(92deg,var(--ion),#fff 45%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.qstake{font-size:clamp(11px,3vw,13.5px);color:var(--dim);letter-spacing:.02em}
.qstake b{font-family:var(--fd);font-weight:900;letter-spacing:0}
.qstake .win{color:var(--lime)}
.qstake .lose{color:#ff5c7a}

.qtext{
  font-size:clamp(16px,4.6vw,22px);font-weight:700;line-height:1.35;
  color:var(--ink);margin-bottom:16px;
}

.qopts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.qopt{
  padding:16px 10px;border-radius:13px;
  font-family:var(--fd);font-weight:900;font-size:clamp(15px,4.4vw,20px);
  color:var(--ink);
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  transition:transform .14s, background .18s, border-color .18s;
}
.qopt:hover{transform:translateY(-2px);border-color:var(--ion);background:rgba(34,230,255,.12)}
.qopt:active{transform:translateY(0) scale(.97)}
.qopts.locked .qopt{pointer-events:none;opacity:.55}
.qopts.locked .qopt.right{
  opacity:1;background:linear-gradient(180deg,#8bff3f,#2ee6a8);color:#06210b;
  border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.8),0 0 30px rgba(139,255,63,.7);
}
.qopts.locked .qopt.wrong{
  opacity:1;background:linear-gradient(180deg,#ff5c7a,#ff3b5c);color:#fff;
  border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.7),0 0 30px rgba(255,59,92,.7);
  animation:deny .3s ease;
}

.qbar{height:7px;border-radius:99px;background:rgba(255,255,255,.12);
  overflow:hidden;margin-top:16px}
.qbar i{display:block;height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--ion),var(--lime))}
.qbar i.urgent{background:#ff3b5c;animation:panic .55s steps(2,end) infinite}

@media (max-width:400px){
  .qopts{grid-template-columns:1fr}
  .qopt{padding:13px 10px}
}