.quizPage {
  --card-w: min(400px, calc(100vw - 48px));
  --card-h: min(260px, 56vw);
  min-height: 100vh;
  background: var(--quiz-bg);
}


#qzApp {
  position: relative;
  z-index: 10;
  min-height: calc(100vh - 70px);
}

.qzScreen {
  animation: qzFadeIn .3s ease;
}

@keyframes qzFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


#qzHome {
  padding: 48px 0 80px;
}

.qzHomeHero {
  text-align: center;
  padding-bottom: 48px;
}

.qzHomeHero .eyebrow {
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold2);
  font-weight: 700;
  margin-bottom: 10px;
}

.qzHomeHero h1 {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  margin: 0 0 12px;
  background: linear-gradient(135deg, #fff8e0 0%, #e8d080 50%, #c8a020 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.qzHomeHero p {
  color: var(--muted);
  font-size: 16px;
  max-width: 480px;
  margin: 0 auto 20px;
  line-height: 1.6;
}

.qzHomeMeta {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

.qzHomeMeta span {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.qzHomeMeta span svg {
  flex-shrink: 0;
  color: var(--gold2);
  opacity: .8;
}


.qzCatGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  perspective: 1200px;
}

.qzCatCard {
  position: relative;
  background: var(--quiz-card);
  border: 1px solid rgba(180,150,60,.14);
  border-radius: var(--radius);
  padding: 28px 20px 22px;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  transform-style: preserve-3d;
  will-change: transform;
  overflow: hidden;
}

.qzCatCard::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: var(--cat-grad, linear-gradient(135deg, rgba(255,107,53,.15) 0%, transparent 60%));
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}

.qzCatCard:hover {
  transform: translateY(-6px) rotateX(4deg) rotateY(-2deg) scale(1.02);
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 32px var(--cat-glow, rgba(255,107,53,.3));
  border-color: var(--cat-color, rgba(255,107,53,.5));
}

.qzCatCard:hover::before {
  opacity: 1;
}

.qzCatIcon {
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cat-color, var(--gold2));
  filter: drop-shadow(0 4px 14px var(--cat-glow, rgba(212,169,0,.3)));
  transition: transform .22s ease;
}

.qzCatIcon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.qzCatCard:hover .qzCatIcon {
  transform: scale(1.12) translateZ(12px);
}

.qzCatName {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: .01em;
}

.qzCatDesc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 14px;
}

.qzCatMeta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.qzCatQty {
  font-size: 11px;
  color: var(--gold2);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.qzCatArrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: background .2s ease, transform .2s ease;
}

.qzCatCard:hover .qzCatArrow {
  background: var(--cat-color, rgba(255,107,53,.5));
  transform: translateX(3px);
}


#qzIntro {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 70px);
  padding: 24px;
}

.qzIntroCard {
  background: var(--quiz-card2);
  border: 1px solid rgba(212,169,0,.22);
  border-radius: 28px;
  padding: 48px 40px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 60px rgba(212,169,0,.08);
  backdrop-filter: blur(20px);
  animation: qzCardIn .4s cubic-bezier(.34,1.56,.64,1);
}

.qzIntroEmoji {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold2);
  filter: drop-shadow(0 8px 20px rgba(212,169,0,.35));
  animation: qzPop .5s cubic-bezier(.34,1.56,.64,1);
}

.qzIntroEmoji svg {
  width: 100%;
  height: 100%;
  display: block;
}

.qzIntroCard h2 {
  font-size: 26px;
  font-weight: 900;
  color: var(--text);
  margin: 0 0 8px;
  background: linear-gradient(135deg, #fff8e0 0%, #e8d080 50%, #c8a020 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.qzIntroCard p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 28px;
}

.qzInstructions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-bottom: 32px;
  background: rgba(0,0,0,.2);
  border-radius: 14px;
  padding: 16px 20px;
  border: 1px solid rgba(255,255,255,.06);
}

.qzInstrItem {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qzInstrItem span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.qzInstrArrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
}

.qzInstrL {
  background: rgba(255,77,109,.2);
  color: #ff4d6d;
  border: 1px solid rgba(255,77,109,.35);
}

.qzInstrR {
  background: rgba(34,197,94,.2);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,.35);
}

.qzInstrDivider {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}


.qzCountdown {
  font-size: 80px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--gold2) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: qzCountPulse .8s ease-in-out;
  display: inline-block;
  min-width: 80px;
}

.qzCountdown.go {
  font-size: 56px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes qzCountPulse {
  0%   { transform: scale(1.8); opacity: 0; }
  40%  { transform: scale(1.1); opacity: 1; }
  80%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(.92); opacity: .6; }
}


#qzArena {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 70px);
  padding: 0;
}

.qzHUD {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(8,14,30,.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(212,169,0,.1);
  position: sticky;
  top: 0;
  z-index: 50;
}

.qzHUDLeft,
.qzHUDRight {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 100px;
}

.qzHUDRight {
  justify-content: flex-end;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 90px;
}

.qzExitBtn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,77,109,.3);
  background: rgba(255,77,109,.1);
  color: rgba(255,120,140,.8);
  font-size: 14px;
  font-weight: 700;
  display: grid;
  place-items: center;
  transition: background .2s, border-color .2s, transform .15s;
  padding: 0;
  line-height: 1;
}

.qzExitBtn:hover {
  background: rgba(255,77,109,.25);
  border-color: rgba(255,77,109,.6);
  color: #ff4d6d;
  transform: scale(1.08);
}

.qzProg {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
}


.qzTimerWrap {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(8,14,30,.6);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.06);
  transition: box-shadow .4s ease;
}

.qzTimerWrap[data-urgency="mid"] {
  box-shadow: 0 0 0 1px rgba(245,158,11,.2), 0 0 18px rgba(245,158,11,.12), inset 0 1px 0 rgba(255,255,255,.04);
}

.qzTimerWrap[data-urgency="high"] {
  box-shadow: 0 0 0 1px rgba(239,68,68,.3), 0 0 24px rgba(239,68,68,.2), inset 0 1px 0 rgba(255,255,255,.04);
  animation: qzTimerWrapPulse .6s ease-in-out infinite alternate;
}

@keyframes qzTimerWrapPulse {
  from { box-shadow: 0 0 0 1px rgba(239,68,68,.3), 0 0 20px rgba(239,68,68,.18); }
  to   { box-shadow: 0 0 0 2px rgba(239,68,68,.5), 0 0 36px rgba(239,68,68,.32); }
}

.qzTimerSvg {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  transform: rotate(-90deg);
}

.qzTimerTrack {
  stroke: rgba(255,255,255,.06);
  stroke-width: 3;
  fill: none;
}

.qzTimerGlow {
  stroke: #22c55e;
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 188.5;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  opacity: .18;
  filter: blur(4px);
}

.qzTimerArc {
  stroke: #22c55e;
  stroke-width: 3.5;
  fill: none;
  stroke-dasharray: 188.5;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  transition: stroke-dashoffset .25s linear, stroke .4s ease;
  filter: drop-shadow(0 0 5px currentColor);
}

.qzTimerArc.yellow,
.qzTimerArc.yellow ~ .qzTimerGlow { stroke: #f59e0b; }
.qzTimerArc.red,
.qzTimerArc.red ~ .qzTimerGlow    { stroke: #ef4444; }

.qzTimerGlow {
  stroke: inherit;
}

.qzTimerInner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  gap: 0;
}

.qzTimerNum {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
  transition: color .3s ease, transform .15s ease;
  font-variant-numeric: tabular-nums;
}

.qzTimerLabel {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .15em;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  margin-top: 1px;
  line-height: 1;
}

.qzTimerNum.pulse {
  animation: qzTimerPulse .45s ease-in-out infinite alternate;
  color: #ff6b6b;
}

@keyframes qzTimerPulse {
  from { transform: scale(1);    }
  to   { transform: scale(1.18); }
}


.qzScoreLbl {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.qzScoreVal {
  font-size: 22px;
  font-weight: 900;
  color: var(--gold2);
  line-height: 1;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}

.qzScoreVal.pop {
  animation: qzPop .3s cubic-bezier(.34,1.56,.64,1);
}

.qzComboWrap {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(212,169,0,.12);
  border: 1px solid rgba(212,169,0,.28);
  border-radius: 20px;
  padding: 2px 8px;
}

.qzComboFire {
  display: flex;
  align-items: center;
  color: var(--gold2);
}

.qzComboMult {
  font-size: 12px;
  font-weight: 800;
  color: var(--gold2);
  animation: qzComboPop .25s cubic-bezier(.34,1.56,.64,1);
}

@keyframes qzComboPop {
  0%   { transform: scale(1.6) rotate(-8deg); }
  60%  { transform: scale(.9)  rotate(4deg); }
  100% { transform: scale(1)   rotate(0deg); }
}


.qzCardArea {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20px 16px;
  min-height: 360px;
}

.qzStack {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  perspective: 1000px;
}

.qzCard {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  cursor: grab;
  user-select: none;
  transform-origin: bottom center;
  transition: transform .35s cubic-bezier(.34,1.1,.64,1), box-shadow .35s ease;
  will-change: transform;
  transform-style: preserve-3d;
}

.qzCard:active {
  cursor: grabbing;
}

.qzCard--front {
  z-index: 30;
  transform: translateY(0) scale(1);
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 40px rgba(212,169,0,.08);
}

.qzCard--mid {
  z-index: 20;
  transform: translateY(14px) scale(.95);
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}

.qzCard--back {
  z-index: 10;
  transform: translateY(28px) scale(.90);
  box-shadow: 0 8px 28px rgba(0,0,0,.3);
}

.qzCardInner {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: var(--quiz-card3);
  border: 1px solid rgba(180,150,60,.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.qzCardInner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, transparent 60%);
  pointer-events: none;
}

.qzCardNum {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold2);
  margin-bottom: 12px;
  opacity: .7;
}

.qzCardQ {
  font-size: clamp(15px, 2.4vw, 18px);
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
  max-width: 100%;
}


.qzCard.swipeRight .qzCardInner {
  border-color: rgba(34,197,94,.55);
  box-shadow: inset 0 0 40px rgba(34,197,94,.12);
}

.qzCard.swipeLeft .qzCardInner {
  border-color: rgba(255,77,109,.55);
  box-shadow: inset 0 0 40px rgba(255,77,109,.12);
}


.qzLabelL,
.qzLabelR {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 12px;
  border: 3px solid;
  opacity: 0;
  pointer-events: none;
  transition: none;
  z-index: 40;
  white-space: nowrap;
}

.qzLabelL {
  left: 10px;
  color: #ff4d6d;
  border-color: #ff4d6d;
  background: rgba(255,77,109,.12);
  box-shadow: 0 0 20px rgba(255,77,109,.3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.qzLabelR {
  right: 10px;
  color: #22c55e;
  border-color: #22c55e;
  background: rgba(34,197,94,.12);
  box-shadow: 0 0 20px rgba(34,197,94,.3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.qzLabelX,
.qzLabelCheck {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}


.qzHint {
  margin-top: 18px;
  max-width: var(--card-w);
  width: 100%;
  background: var(--quiz-card2);
  border: 1px solid rgba(180,150,60,.2);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  animation: qzHintSlide .35s cubic-bezier(.34,1.1,.64,1);
  backdrop-filter: blur(12px);
}

.qzHint.hidden {
  display: none !important;
}

.qzHintIcon {
  font-size: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
}

@keyframes qzHintSlide {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}


.qzActions {
  display: flex;
  gap: 16px;
  justify-content: center;
  padding: 16px 20px 28px;
  background: rgba(8,14,30,.6);
  backdrop-filter: blur(12px);
}

.qzActionBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 2px solid;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.qzActionBtn:active {
  transform: scale(.95) !important;
}

.qzBtnFalso {
  background: rgba(255,77,109,.12);
  border-color: rgba(255,77,109,.45);
  color: #ff4d6d;
  box-shadow: 0 4px 20px rgba(255,77,109,.15);
}

.qzBtnFalso:hover {
  background: rgba(255,77,109,.22);
  border-color: rgba(255,77,109,.7);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255,77,109,.3);
}

.qzBtnTrue {
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.45);
  color: #22c55e;
  box-shadow: 0 4px 20px rgba(34,197,94,.15);
}

.qzBtnTrue:hover {
  background: rgba(34,197,94,.22);
  border-color: rgba(34,197,94,.7);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(34,197,94,.3);
}


#qzResult {
  padding: 48px 0 80px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.qzResultCard {
  background: var(--quiz-card2);
  border: 1px solid rgba(212,169,0,.22);
  border-radius: 28px;
  padding: 48px 40px;
  max-width: 600px;
  width: 100%;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 60px rgba(212,169,0,.08);
  backdrop-filter: blur(20px);
  animation: qzResultIn .5s cubic-bezier(.34,1.1,.64,1);
}

@keyframes qzResultIn {
  from { transform: scale(.88) translateY(30px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

.qzResultEmoji {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold2);
  filter: drop-shadow(0 6px 18px rgba(212,169,0,.4));
  animation: qzPop .5s cubic-bezier(.34,1.56,.64,1) .15s both;
}

.qzResultEmoji svg {
  width: 100%;
  height: 100%;
  display: block;
}

.qzResultTitle {
  font-size: 28px;
  font-weight: 900;
  margin: 0 0 8px;
  background: linear-gradient(135deg, #fff8e0 0%, #e8d080 50%, #c8a020 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.qzResultSubtitle {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 28px;
  line-height: 1.5;
}

.qzResultScoreBox {
  background: rgba(212,169,0,.08);
  border: 1px solid rgba(212,169,0,.2);
  border-radius: 16px;
  padding: 20px 28px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
  min-width: 140px;
}

.qzResultScoreNum {
  font-size: 48px;
  font-weight: 900;
  color: var(--gold2);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.qzResultScoreLbl {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-top: 4px;
}

.qzPointsBadge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 14px;
  background: rgba(212,169,0,.15);
  border: 1px solid rgba(212,169,0,.4);
  border-radius: 20px;
  color: var(--gold2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  animation: qzBadgeIn .4s cubic-bezier(.34,1.3,.64,1) both;
}
@keyframes qzBadgeIn {
  from { opacity: 0; transform: translateY(8px) scale(.85); }
  to   { opacity: 1; transform: none; }
}

.qzResultStats {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.qzResultStat {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 80px;
}

.qzResultStatVal {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}

.qzResultStatLbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 700;
}


.qzResultList {
  text-align: left;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qzResultItem {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.06);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

.qzResultItem.correct {
  border-color: rgba(34,197,94,.2);
  background: rgba(34,197,94,.04);
}

.qzResultItem.wrong {
  border-color: rgba(255,77,109,.2);
  background: rgba(255,77,109,.04);
}

.qzResultMark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-top: 1px;
}

.qzResultItem.correct .qzResultMark svg { color: #22c55e; }
.qzResultItem.wrong   .qzResultMark svg { color: #ff4d6d; }

.qzResultBtns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.qzResultBtns .primaryBtn,
.qzResultBtns .ghostBtn {
  padding: 12px 24px;
  font-size: 14px;
  border-radius: 14px;
}


.qzFlash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0;
  transition: opacity .08s ease;
}

.qzFlash.correct {
  background: rgba(34,197,94,.18);
  animation: qzFlashAnim .45s ease forwards;
}

.qzFlash.wrong {
  background: rgba(255,77,109,.18);
  animation: qzFlashAnim .45s ease forwards;
}

@keyframes qzFlashAnim {
  0%   { opacity: .9; }
  100% { opacity: 0; }
}


.qzCanvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 900;
}


@keyframes qzCardIn {
  from { transform: scale(.7) rotateX(20deg); opacity: 0; }
  to   { transform: scale(1)  rotateX(0deg);  opacity: 1; }
}

@keyframes qzCardShake {
  0%,100% { transform: translateX(0) translateY(0) scale(1); }
  20%     { transform: translateX(-8px) rotate(-2deg) scale(1.02); }
  40%     { transform: translateX(8px)  rotate(2deg)  scale(1.02); }
  60%     { transform: translateX(-5px) rotate(-1deg) scale(1.01); }
  80%     { transform: translateX(5px)  rotate(1deg)  scale(1.01); }
}

@keyframes qzPop {
  0%   { transform: scale(0.5) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(2deg);  opacity: 1; }
  100% { transform: scale(1)   rotate(0deg);  opacity: 1; }
}


@media (max-width: 600px) {
  .qzCatGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .qzCatCard {
    padding: 20px 14px 16px;
  }

  .qzCatEmoji {
    font-size: 32px;
    margin-bottom: 10px;
  }

  .qzCatName {
    font-size: 13px;
  }

  .qzCatDesc {
    display: none;
  }

  .qzIntroCard {
    padding: 32px 20px;
  }

  .qzIntroEmoji {
    font-size: 56px;
  }

  .qzIntroCard h2 {
    font-size: 20px;
  }

  .qzHUD {
    padding: 10px 12px;
  }

  .qzTimerWrap {
    width: 58px;
    height: 58px;
  }

  .qzTimerNum {
    font-size: 17px;
  }

  .qzScoreVal {
    font-size: 18px;
  }

  .qzCardQ {
    font-size: 14px;
  }

  .qzLabelL,
  .qzLabelR {
    font-size: 16px;
    padding: 7px 12px;
  }

  .qzActionBtn {
    padding: 11px 18px;
    font-size: 12px;
  }

  .qzResultCard {
    padding: 32px 20px;
  }

  .qzResultTitle {
    font-size: 22px;
  }

  .qzResultScoreNum {
    font-size: 40px;
  }

  #qzHome {
    padding: 28px 0 60px;
  }

  .qzHomeHero {
    padding-bottom: 28px;
  }
}


.quizNavActive {
  color: var(--gold2) !important;
  border-color: rgba(212,169,0,.42) !important;
}


.menuDotsBtn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(180,150,60,.22);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  display: grid;
  place-items: center;
  transition: background .2s, border-color .2s, color .2s;
  padding: 0;
}

.menuDotsBtn:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(212,169,0,.4);
  color: var(--gold2);
}

.menuDrawer {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: rgba(12,20,40,.97);
  border: 1px solid rgba(212,169,0,.18);
  border-radius: 16px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  backdrop-filter: blur(20px);
  z-index: 200;
  transform-origin: top right;
  transition: opacity .18s ease, transform .18s ease;
}

.menuDrawer.closed {
  opacity: 0;
  transform: scale(.92) translateY(-8px);
  pointer-events: none;
}

.topActions {
  position: relative;
}