/* ════════════════════════════════════════════════════════════════
   MobiusQuest — FX layer (celebration, feedback, gamification chrome)
   Visual only. Scoped to dark theme; hidden under .theme-brutal.
   ════════════════════════════════════════════════════════════════ */

/* ── Confetti / burst canvas : tops everything ──────────────── */
.mq-confetti {
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none; width: 100%; height: 100%;
}

/* ── Answer edge-flash : green = correct, red = wrong ───────── */
.mq-flash {
  position: fixed; inset: 0; z-index: 9990;
  pointer-events: none; opacity: 0;
}
.mq-flash.ok  { animation: mqFlashOk  .55s ease-out; }
.mq-flash.bad { animation: mqFlashBad .5s  ease-out; }
@keyframes mqFlashOk {
  0%   { opacity: 0; box-shadow: inset 0 0 0 0 hsla(152,82%,52%,0); }
  18%  { opacity: 1; box-shadow: inset 0 0 120px 6px hsla(152,84%,52%,.5); }
  100% { opacity: 0; box-shadow: inset 0 0 200px 10px hsla(152,84%,52%,0); }
}
@keyframes mqFlashBad {
  0%   { opacity: 0; box-shadow: inset 0 0 0 0 hsla(0,84%,55%,0); transform: translateX(0); }
  12%  { opacity: 1; box-shadow: inset 0 0 110px 6px hsla(0,86%,55%,.45); transform: translateX(-5px); }
  30%  { transform: translateX(5px); }
  50%  { transform: translateX(-3px); }
  70%  { transform: translateX(2px); }
  100% { opacity: 0; box-shadow: inset 0 0 180px 10px hsla(0,86%,55%,0); transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .mq-flash.bad { animation: mqFlashOk .4s ease-out; }
}

/* ── Combo pop : little floating "x3 КОМБО!" near top ───────── */
.mq-combo {
  position: fixed; left: 50%; top: 84px; z-index: 9991;
  transform: translateX(-50%);
  font-family: var(--font-display, sans-serif);
  font-weight: 800; font-size: 1.15rem; letter-spacing: .02em;
  color: #fff; pointer-events: none; white-space: nowrap;
  text-shadow: 0 2px 12px hsla(var(--mq-hue-a,265),90%,55%,.9);
  opacity: 0;
}
.mq-combo.show { animation: mqComboPop 1.1s cubic-bezier(.22,1,.36,1); }
@keyframes mqComboPop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.7); }
  22%  { opacity: 1; transform: translateX(-50%) translateY(0)   scale(1.12); }
  38%  { transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-26px) scale(1); }
}

/* ════════════════════════════════════════════════════════════
   XP / Level chrome in the nav
   ════════════════════════════════════════════════════════════ */
body.theme-dark nav { position: sticky; }   /* keep app behaviour */

/* level chip injected into .nav-stats */
.mq-level-chip {
  display: flex; align-items: center; gap: 6px;
  font-size: .85rem; font-weight: 700;
  color: #fff;
  padding: 4px 11px; border-radius: 999px;
  background: linear-gradient(135deg,
    hsla(var(--mq-hue-a,265),85%,58%,.9),
    hsla(var(--mq-hue-b,190),85%,52%,.9));
  box-shadow: 0 4px 14px -4px hsla(var(--mq-hue-a,265),90%,55%,.7);
  position: relative; overflow: hidden;
  cursor: default; user-select: none;
}
.mq-level-chip .mq-lc-label { opacity: .85; font-weight: 600; font-size: .72rem; }
body.theme-brutal .mq-level-chip {
  background: var(--yellow); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* thin XP progress bar pinned to the bottom edge of the nav */
.mq-xpbar {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: transparent; overflow: hidden; pointer-events: none;
}
.mq-xpbar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg,
    hsla(var(--mq-hue-a,265),90%,62%,1),
    hsla(var(--mq-hue-b,190),90%,60%,1));
  box-shadow: 0 0 10px hsla(var(--mq-hue-a,265),90%,60%,.9);
  border-radius: 0 2px 2px 0;
  transition: width .9s cubic-bezier(.22,1,.36,1);
}
body.theme-brutal .mq-xpbar-fill { background: var(--ink); box-shadow: none; }

/* nav pulse on level-up */
@keyframes mqNavLevelPulse {
  0%,100% { box-shadow: none; }
  40%     { box-shadow: 0 6px 30px -6px hsla(var(--mq-hue-a,265),95%,60%,.9); }
}
nav.mq-levelup-pulse { animation: mqNavLevelPulse 1s ease-out; }

/* full level-up banner */
.mq-levelup {
  position: fixed; left: 50%; top: 38%; z-index: 9999;
  transform: translate(-50%,-50%) scale(.8);
  pointer-events: none; text-align: center; opacity: 0;
  font-family: var(--font-display, sans-serif);
}
.mq-levelup.show { animation: mqLevelUp 2s cubic-bezier(.22,1,.36,1); }
.mq-levelup .mq-lu-kick {
  font-size: .8rem; font-weight: 700; letter-spacing: .28em;
  text-transform: uppercase; color: hsla(var(--mq-hue-b,190),90%,70%,1);
  margin-bottom: 6px;
}
.mq-levelup .mq-lu-big {
  font-size: 3.4rem; font-weight: 800; line-height: 1; color: #fff;
  text-shadow: 0 4px 30px hsla(var(--mq-hue-a,265),92%,58%,.9);
}
@keyframes mqLevelUp {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.7); }
  16%  { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
  28%  { transform: translate(-50%,-50%) scale(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-58%) scale(1); }
}

/* ════════════════════════════════════════════════════════════
   Results screen celebration polish
   ════════════════════════════════════════════════════════════ */
body.theme-dark #screen-results.active .results-icon {
  animation: mqResIcon 1.1s cubic-bezier(.22,1,.36,1);
  position: relative;
}
@keyframes mqResIcon {
  0%   { transform: scale(.2) rotate(-18deg); opacity: 0; }
  55%  { transform: scale(1.18) rotate(6deg); opacity: 1; }
  72%  { transform: scale(.96) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}
/* glow ring behind the icon */
body.theme-dark #screen-results.active .results-wrap { position: relative; }
body.theme-dark #screen-results.active .results-wrap::before {
  content: ''; position: absolute; left: 50%; top: 60px;
  width: 220px; height: 220px;
  transform: translateX(-50%) translateY(-30px);
  background: radial-gradient(circle,
    hsla(var(--mq-hue-a,265),88%,58%,.35), transparent 62%);
  filter: blur(8px); pointer-events: none; z-index: -1;
  animation: mqResRing 2.4s ease-in-out infinite;
}
@keyframes mqResRing {
  0%,100% { opacity: .55; transform: translateX(-50%) translateY(-30px) scale(1); }
  50%     { opacity: .9;  transform: translateX(-50%) translateY(-30px) scale(1.12); }
}
/* count-up numbers get a subtle settle pop (added/removed by JS) */
.results-stat-num.mq-pop { animation: mqNumPop .4s ease-out; }
@keyframes mqNumPop {
  0% { transform: scale(1.25); } 100% { transform: scale(1); }
}

/* ════════════════════════════════════════════════════════════
   Film grain (premium texture) — toggled by body.mq-grain
   ════════════════════════════════════════════════════════════ */
.mq-grain {
  position: fixed; inset: 0; z-index: 9995;
  pointer-events: none; opacity: 0;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  transition: opacity .4s ease;
}
body.mq-grain .mq-grain { opacity: .07; }
body.theme-brutal .mq-grain { display: none; }
@media (prefers-reduced-motion: reduce) { .mq-grain { animation: none !important; } }

/* ── Enhanced glass nav (dark theme only) ───────────────────── */
body.theme-dark nav {
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  background:
    linear-gradient(180deg, rgba(28,24,46,.78), rgba(16,14,26,.62));
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset,
              0 10px 30px -18px rgba(0,0,0,.8);
}