/* Pasla — Quiz ekranı stilleri. SAHİBİ: Grafik birimi (G3).
 * Sadece css/base.css token'larını kullanır (--c-*, --r-*, --sp-*, --font-*,
 * --shadow-*, --ease). Sabit renk YOK. Ortak sınıflar (.btn/.card/.chip/...)
 * base.css'ten gelir; burada sadece quiz'e özgü sınıflar var.
 */

.quiz-screen{
  display:flex; flex-direction:column; height:100%; min-height:0;
  position:relative;
}

/* ── Üst şerit: soru sayacı + geri sayım + jokerler ── */
.quiz-hud{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4) var(--sp-2);
  flex-shrink:0;
}
.quiz-hud-count{
  font-family:var(--font-display);
  font-weight:800; font-size:1rem; color:var(--c-muted);
  white-space:nowrap;
}
.quiz-hud-count b{ color:var(--c-text); }

.quiz-timer{
  position:relative; flex-shrink:0;
  width:44px; height:44px;
}
.quiz-timer svg{ width:100%; height:100%; transform:rotate(-90deg); }
.quiz-timer circle{
  fill:none; stroke-width:4; stroke-linecap:round;
}
.quiz-timer .trk{ stroke:var(--c-line); }
.quiz-timer .val{
  stroke:var(--c-accent);
  transition:stroke-dashoffset 220ms linear, stroke .2s var(--ease);
}
.quiz-timer.low .val{ stroke:var(--c-bad); }
.quiz-timer.low{ animation:quiz-pulse .55s ease-in-out infinite; }
.quiz-timer-num{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:.95rem;
}
.quiz-timer.low .quiz-timer-num{ color:var(--c-bad); }
@keyframes quiz-pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.08);} }

.quiz-jokers{
  margin-left:auto; display:flex; gap:var(--sp-2); flex-shrink:0;
}
.quiz-joker-btn{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--r-m);
  background:var(--c-surface-2); border:1px solid var(--c-line);
  color:var(--c-text); position:relative;
  transition:transform .12s var(--ease), background .15s var(--ease), opacity .15s;
}
.quiz-joker-btn:active{ transform:scale(.9); }
.quiz-joker-btn[disabled]{ opacity:.35; pointer-events:none; }
.quiz-joker-btn .badge-n{
  position:absolute; top:-4px; right:-4px;
  background:var(--c-accent); color:var(--c-accent-ink);
  font-size:.6rem; font-weight:800; line-height:1;
  min-width:15px; height:15px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}

/* ── Soru kartı ── */
.quiz-body{
  flex:1; min-height:0; overflow-y:auto;
  padding:0 var(--sp-4) var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-4);
}
.quiz-card{
  background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--r-l); padding:var(--sp-4);
  box-shadow:var(--shadow-1);
  display:flex; flex-direction:column; gap:var(--sp-3);
  animation:quiz-card-in .28s var(--ease);
}
@keyframes quiz-card-in{
  from{ opacity:0; transform:translateY(10px) scale(.985); }
  to{ opacity:1; transform:none; }
}
.quiz-card-meta{
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
}
.quiz-diff{ display:flex; gap:3px; align-items:center; margin-left:auto; }
.quiz-diff i{
  width:7px; height:7px; border-radius:50%; background:var(--c-line); display:block;
}
.quiz-diff i.on{ background:var(--c-gold); }

.quiz-image{
  width:100%; max-height:140px; object-fit:contain;
  border-radius:var(--r-m); background:var(--c-surface-2);
  padding:var(--sp-3);
}
.quiz-question{
  font-family:var(--font-display); font-weight:800;
  font-size:1.18rem; line-height:1.32; color:var(--c-text);
}

.quiz-choices{
  display:flex; flex-direction:column; gap:var(--sp-2);
}
.quiz-choice{
  display:flex; align-items:center; gap:var(--sp-3);
  width:100%; text-align:left;
  padding:var(--sp-3) var(--sp-3);
  background:var(--c-surface-2); border:1.5px solid var(--c-line);
  border-radius:var(--r-m); color:var(--c-text);
  font-size:1rem; font-weight:600;
  transition:background .15s var(--ease), border-color .15s var(--ease),
             transform .1s var(--ease), opacity .25s var(--ease);
}
.quiz-choice:active{ transform:scale(.985); }
.quiz-choice .let{
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  background:var(--c-bg); border:1px solid var(--c-line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:.85rem;
  color:var(--c-muted);
}
.quiz-choice .txt{ flex:1; }
.quiz-choice .mark{ flex-shrink:0; width:22px; height:22px; opacity:0; transition:opacity .15s; }

.quiz-choice.eliminated{
  opacity:.28; pointer-events:none; filter:grayscale(1);
}
.quiz-choice[disabled]{ pointer-events:none; }

.quiz-choice.pick{
  border-color:var(--c-accent); background:color-mix(in srgb, var(--c-accent) 14%, var(--c-surface-2));
}
/* is-correct / is-wrong / is-muted: ortak .choice sözlüğü (base.css), burada
   quiz'e özgü alt öğeler (harf dairesi/işaret) için genişletiliyor. */
.quiz-choice.is-correct{
  background:color-mix(in srgb, var(--c-good) 20%, var(--c-surface-2));
}
.quiz-choice.is-correct .let{ background:var(--c-good); color:var(--c-accent-ink); border-color:transparent; }
.quiz-choice.is-correct .mark{ opacity:1; color:var(--c-good); }
.quiz-choice.is-wrong{
  background:color-mix(in srgb, var(--c-bad) 20%, var(--c-surface-2));
}
.quiz-choice.is-wrong .let{ background:var(--c-bad); color:var(--c-accent-ink); border-color:transparent; }
.quiz-choice.is-wrong .mark{ opacity:1; color:var(--c-bad); }
.quiz-choice.is-muted{ opacity:.45; }

.quiz-card.shake{ animation:quiz-shake .4s var(--ease); }
@keyframes quiz-shake{
  10%,90%{ transform:translateX(-1px); }
  20%,80%{ transform:translateX(3px); }
  30%,50%,70%{ transform:translateX(-7px); }
  40%,60%{ transform:translateX(7px); }
}

/* ── Açıklama şeridi ── */
.quiz-explain{
  display:flex; gap:var(--sp-2); align-items:flex-start;
  padding:var(--sp-3); border-radius:var(--r-m);
  background:var(--c-surface-2); border:1px solid var(--c-line);
  font-size:.88rem; color:var(--c-muted); line-height:1.4;
  animation:quiz-explain-in .25s var(--ease);
}
.quiz-explain b{ color:var(--c-text); }
.quiz-explain.good{ border-color:color-mix(in srgb, var(--c-good) 40%, var(--c-line)); }
.quiz-explain.bad{ border-color:color-mix(in srgb, var(--c-bad) 40%, var(--c-line)); }
@keyframes quiz-explain-in{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }

.quiz-next{ align-self:stretch; }

/* ── Puan uçuşu ── */
.quiz-flyer{
  position:fixed; z-index:60; pointer-events:none;
  font-family:var(--font-display); font-weight:800; font-size:1.3rem;
  color:var(--c-gold);
  animation:quiz-fly 900ms var(--ease) forwards;
}
@keyframes quiz-fly{
  0%{ opacity:0; transform:translateY(0) scale(.7); }
  15%{ opacity:1; transform:translateY(-6px) scale(1.08); }
  75%{ opacity:1; transform:translateY(-46px) scale(1); }
  100%{ opacity:0; transform:translateY(-64px) scale(.94); }
}

/* ── Seri (streak) rozet ── */
.quiz-streak{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--c-warn); font-weight:800; font-size:.85rem;
  font-family:var(--font-display);
}
.quiz-streak svg{ width:16px; height:16px; }
.quiz-streak.pop{ animation:quiz-streak-pop .4s var(--ease); }
@keyframes quiz-streak-pop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.35); }
  100%{ transform:scale(1); }
}

/* ── Giriş: Hazır mısın / 3-2-1 ── */
.quiz-intro{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-4); text-align:center; padding:var(--sp-4);
}
.quiz-intro-title{
  font-family:var(--font-display); font-weight:900; font-size:1.6rem;
}
.quiz-intro-sub{ color:var(--c-muted); font-size:.95rem; }
.quiz-intro-count{
  font-family:var(--font-display); font-weight:900; font-size:4.2rem;
  color:var(--c-accent); line-height:1;
  animation:quiz-count-pop .5s var(--ease);
}
@keyframes quiz-count-pop{
  0%{ opacity:0; transform:scale(1.6); }
  60%{ opacity:1; transform:scale(1); }
  100%{ opacity:1; transform:scale(1); }
}

/* ── Bitiş ekranı ── */
.quiz-summary{
  flex:1; display:flex; flex-direction:column; gap:var(--sp-4);
  padding:var(--sp-4); overflow-y:auto;
}
.quiz-summary-hero{
  text-align:center; padding:var(--sp-5) var(--sp-4);
  background:linear-gradient(160deg, var(--c-surface), var(--c-surface-2));
  border:1px solid var(--c-line); border-radius:var(--r-l);
  box-shadow:var(--shadow-1);
}
.quiz-summary-score{
  font-family:var(--font-display); font-weight:900; font-size:2.6rem;
  color:var(--c-gold);
}
.quiz-summary-label{ color:var(--c-muted); font-size:.85rem; margin-top:2px; }
.quiz-summary-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3);
}
.quiz-stat{
  background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--r-m); padding:var(--sp-3); text-align:center;
}
.quiz-stat b{
  display:block; font-family:var(--font-display); font-weight:800; font-size:1.3rem;
}
.quiz-stat span{ color:var(--c-muted); font-size:.78rem; }

.quiz-award{
  border:1px solid color-mix(in srgb, var(--c-gold) 45%, var(--c-line));
  background:color-mix(in srgb, var(--c-gold) 10%, var(--c-surface));
  border-radius:var(--r-m); padding:var(--sp-3);
  display:flex; align-items:center; gap:var(--sp-3);
}
.quiz-award-icon{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:var(--c-gold); color:var(--c-accent-ink);
  display:flex; align-items:center; justify-content:center;
}
.quiz-award b{ font-family:var(--font-display); }
.quiz-award-sub{ color:var(--c-muted); font-size:.85rem; }

.quiz-badges{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.quiz-badge-card{
  width:78px; display:flex; flex-direction:column; align-items:center; gap:4px;
  text-align:center;
}
.quiz-badge-card .ic{
  width:52px; height:52px; border-radius:50%;
  background:var(--c-surface-2); border:1px solid var(--c-line);
  display:flex; align-items:center; justify-content:center; color:var(--c-gold);
}
.quiz-badge-card span{ font-size:.68rem; color:var(--c-muted); line-height:1.15; }

.quiz-summary-actions{ display:flex; flex-direction:column; gap:var(--sp-2); }

/* ── Hak bitti ekranı ── */
.quiz-locked{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-3); text-align:center; padding:var(--sp-5);
}
.quiz-locked .ic{
  width:64px; height:64px; border-radius:50%;
  background:var(--c-surface-2); color:var(--c-muted);
  display:flex; align-items:center; justify-content:center;
}
.quiz-locked h3{ font-family:var(--font-display); font-size:1.15rem; }
.quiz-locked p{ color:var(--c-muted); font-size:.9rem; max-width:260px; }