/* ============================================================================
   dhruvrathee.com — quiz
   Category tiles, question rounds, results. Leans on the site design system
   in styles.css / personal.css (variables, .btn, .pill, .note, .rv).
   ========================================================================== */

/* ---------- hero extras ---------- */
.qz-brain{font-style:normal;display:inline-block;transform:rotate(-6deg);animation:qzBrain 3.2s ease-in-out infinite}
@keyframes qzBrain{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(5deg) scale(1.08)}}
.qz-quick{padding:17px 30px;font-size:16px;box-shadow:0 14px 40px -10px rgba(228,52,47,.95),0 0 0 1px rgba(255,129,117,.35) inset;animation:qzPulse 2.6s var(--ease) infinite}
@keyframes qzPulse{0%,100%{box-shadow:0 14px 40px -10px rgba(228,52,47,.95),0 0 0 0 rgba(228,52,47,.45)}55%{box-shadow:0 14px 44px -8px rgba(228,52,47,1),0 0 0 12px rgba(228,52,47,0)}}
.qz-quick-hint{color:var(--ink-3);font-size:13.5px;max-width:260px;line-height:1.5}

/* ---------- category tiles ---------- */
.qz-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:38px}
.qz-tile{
  --cc:#e4342f;
  position:relative;display:flex;flex-direction:column;gap:10px;text-align:left;
  padding:22px 22px 18px;border:1px solid var(--line);border-radius:var(--r,18px);
  background:var(--panel);color:var(--ink);cursor:pointer;overflow:hidden;
  transition:transform .38s var(--ease),border-color .3s,background .3s,box-shadow .38s,filter .3s;
  font:inherit;
}
.qz-tile::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:color-mix(in srgb,var(--cc) 80%,#fff);opacity:.9}
/* the whole box wears its category colour; ink stays white for readability */
.qz-tile{
  border-color:color-mix(in srgb,var(--cc) 55%,transparent);
  background:
    radial-gradient(140% 120% at 12% 0%,color-mix(in srgb,var(--cc) 38%,#0d0f13) 0%,color-mix(in srgb,var(--cc) 20%,#0c0d11) 48%,color-mix(in srgb,var(--cc) 11%,var(--bg)) 100%);
  box-shadow:0 16px 40px -26px color-mix(in srgb,var(--cc) 55%,transparent) inset,0 10px 30px -24px color-mix(in srgb,var(--cc) 60%,transparent);
}
.qz-tile:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--cc) 85%,transparent);
  filter:saturate(1.12) brightness(1.07);
  box-shadow:0 24px 54px -20px color-mix(in srgb,var(--cc) 70%,transparent);
}
.qz-tile:focus-visible{outline:2px solid var(--cc);outline-offset:3px}
.qz-tile .qe{
  font-size:26px;line-height:1;width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  border-radius:14px;background:color-mix(in srgb,var(--cc) 30%,rgba(0,0,0,.25));
  border:1px solid color-mix(in srgb,var(--cc) 55%,transparent);
}
.qz-tile h3{margin:0;font-size:18.5px;font-weight:800;letter-spacing:-.02em;color:#fff}
.qz-tile p{margin:0;color:rgba(255,252,250,.82);font-size:13.5px;line-height:1.55;min-height:2.9em}
.qz-tile .qmeta{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;font-size:12.5px;color:rgba(255,252,250,.62);font-weight:600}
.qz-tile .qbest{margin-left:auto;color:#fff;font-weight:800}
.qz-tile.qz-mix{--cc:#e4342f}

/* ---------- round ---------- */
.qz-stage{max-width:760px;margin:0 auto}
.qz-top{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.qz-cat{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel);font-size:13px;font-weight:700;color:var(--ink-2)}
.qz-count{margin-left:auto;font-size:13px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}
.qz-bar{height:5px;border-radius:999px;background:var(--panel-2);overflow:hidden;margin-bottom:30px}
.qz-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--tq),var(--ember));transition:width .45s var(--ease)}
.qz-diff{display:inline-flex;gap:3px;margin-left:10px;vertical-align:2px}
.qz-diff i{width:6px;height:6px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line-2)}
.qz-diff i.on{background:var(--tq-2);border-color:var(--tq-2)}
.qz-question{font-size:clamp(20px,3.2vw,27px);font-weight:800;letter-spacing:-.02em;line-height:1.32;margin:0 0 26px}
.qz-opts{display:grid;gap:11px}
.qz-opt{
  position:relative;display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:15px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);
  color:var(--ink);font:inherit;font-size:15.5px;font-weight:600;line-height:1.45;cursor:pointer;
  transition:transform .25s var(--ease),border-color .25s,background .25s;
}
.qz-opt .ql{
  flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:9px;border:1px solid var(--line-2);background:var(--panel-2);
  font-size:12.5px;font-weight:800;color:var(--ink-2);
}
.qz-opt:hover:not([disabled]){transform:translateX(4px);border-color:rgba(228,52,47,.55);background:var(--panel-2)}
.qz-opt:focus-visible{outline:2px solid var(--tq);outline-offset:3px}
.qz-opt[disabled]{cursor:default;opacity:.55}
.qz-opt.is-correct{opacity:1;border-color:rgba(64,199,129,.75);background:rgba(64,199,129,.13)}
.qz-opt.is-correct .ql{background:#40c781;border-color:#40c781;color:#062b18}
.qz-opt.is-wrong{opacity:1;border-color:rgba(228,52,47,.8);background:rgba(228,52,47,.13)}
.qz-opt.is-wrong .ql{background:var(--tq);border-color:var(--tq);color:#fff}
@keyframes qzShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.qz-opt.is-wrong{animation:qzShake .3s var(--ease)}

/* explanation */
.qz-explain{
  margin-top:22px;padding:18px 20px;border:1px solid var(--line);border-left:3px solid var(--tq);
  border-radius:14px;background:var(--panel);display:none;
}
.qz-explain.show{display:block;animation:qzIn .4s var(--ease)}
@keyframes qzIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qz-verdict{font-family:var(--disp);font-style:italic;font-size:21px;margin:0 0 8px}
.qz-verdict.ok{color:#5fdb9d}.qz-verdict.no{color:var(--tq-2)}
.qz-explain p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.62}
.qz-src{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--ink-3)}
.qz-next{display:flex;justify-content:flex-end;margin-top:24px}

/* ---------- result ---------- */
.qz-result{text-align:center;padding:14px 0 6px}
.qz-score{
  width:150px;height:150px;border-radius:50%;margin:0 auto 22px;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(closest-side,var(--bg) 82%,transparent 83% 100%),
    conic-gradient(var(--tq) calc(var(--p,0)*1%),var(--panel-2) 0);
}
.qz-score b{font-size:38px;font-weight:800;letter-spacing:-.04em}
.qz-score span{font-size:15px;color:var(--ink-3);font-weight:700}
.qz-title{font-family:var(--disp);font-style:italic;font-size:clamp(26px,4vw,36px);margin:0 0 8px}
.qz-sub{color:var(--ink-2);font-size:15px;margin:0 auto 26px;max-width:430px;line-height:1.6}
.qz-acts{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.qz-stats{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:28px 0 6px}
.qz-review{margin-top:38px;text-align:left}
.qz-review h4{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
.qz-rw{
  display:flex;align-items:center;gap:16px;margin-bottom:12px;padding:12px;
  border:1px solid var(--line);border-radius:16px;background:var(--panel);
  color:var(--ink);text-decoration:none;overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s,background .3s;
}
.qz-rw:hover{transform:translateY(-2px);border-color:rgba(228,52,47,.55);background:var(--panel-2)}
.qz-rw .rthumb{
  position:relative;flex:none;width:150px;aspect-ratio:16/9;border-radius:11px;overflow:hidden;background:var(--panel-2);
}
.qz-rw .rthumb img{width:100%;height:100%;object-fit:cover;display:block}
.qz-rw .rthumb::after{
  content:'▶';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:15px;color:#fff;background:rgba(10,11,14,.28);opacity:0;transition:opacity .25s;
}
.qz-rw:hover .rthumb::after{opacity:1}
.qz-rw .rbody{min-width:0}
.qz-rw .rnum{font-size:12px;font-weight:800;color:var(--tq-2);letter-spacing:.04em}
.qz-rw b{display:block;font-size:15px;line-height:1.4;margin:3px 0 5px;font-weight:700}
.qz-rw p{margin:0;color:var(--ink-3);font-size:13px;line-height:1.5}
@media(max-width:560px){
  .qz-rw{gap:12px}
  .qz-rw .rthumb{width:112px}
  .qz-rw b{font-size:13.5px}
}

/* ---------- floating welcome-back note ---------- */
@font-face{font-family:'Mrs Saint Delafield';font-style:normal;font-weight:400;font-display:swap;src:url(mrs-saint-delafield-latin-400-normal.woff2) format('woff2')}
.phero .wrap{position:relative}
.qz-note{
  position:absolute;top:16%;right:1%;z-index:5;width:230px;padding:16px 18px 15px;
  background:linear-gradient(168deg,#ffe9b3 0%,#f9d489 58%,#f2c470 100%);
  color:#3b2a10;border-radius:4px 14px 12px 6px;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.65),0 4px 12px -6px rgba(0,0,0,.4);
  transform:rotate(-4deg);
  animation:qzNoteFloat 11s ease-in-out infinite;
  cursor:default;
}
.qz-note::before{content:'📌';position:absolute;top:-13px;left:16px;font-size:21px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.4))}
.qz-note b{display:block;font-family:'Mrs Saint Delafield',cursive;font-weight:400;font-size:29px;line-height:1.05;margin:0 0 6px;color:#2e1f08}
.qz-note p{margin:0;font-size:12.5px;line-height:1.5;font-weight:600;color:#4a3512}
.qz-note p span{color:#a3221d;font-weight:800}
.qz-note .qz-note-x{
  position:absolute;top:5px;right:7px;border:0;background:none;color:#7a5c28;font-size:15px;
  line-height:1;cursor:pointer;padding:4px;border-radius:6px;font-family:inherit;
}
.qz-note .qz-note-x:hover{color:#2e1f08;background:rgba(0,0,0,.08)}
@keyframes qzNoteFloat{
  0%,100%{transform:rotate(-4deg) translate(0,0)}
  22%{transform:rotate(-1.5deg) translate(9px,-13px)}
  46%{transform:rotate(-5.5deg) translate(-7px,-4px)}
  62%{transform:rotate(-2deg) translate(5px,9px)}
  84%{transform:rotate(-5deg) translate(-10px,-7px)}
}
.qz-note:hover{animation-play-state:paused}
@media(max-width:1100px){
  .qz-note{position:static;width:auto;max-width:340px;margin:22px 0 0;transform:rotate(-1.5deg);animation:qzNoteBob 6s ease-in-out infinite}
}
@keyframes qzNoteBob{0%,100%{transform:rotate(-1.5deg) translateY(0)}50%{transform:rotate(-.5deg) translateY(-6px)}}

/* ---------- analytics: the scoreboard ---------- */
.qz-ana{margin-top:56px}
.qz-ana h2{font-family:var(--disp);font-style:italic;font-weight:400;font-size:clamp(24px,3.4vw,32px);margin:0 0 6px}
.qz-ana .qz-ana-sub{color:var(--ink-3);font-size:13.5px;margin:0 0 22px}
.qz-ana-badge{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:4px 10px;border-radius:999px;border:1px dashed var(--line-2);color:var(--ink-3);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;vertical-align:4px}
.qz-stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px}
.qz-stat{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:15px 17px}
.qz-stat b{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--tq-2);line-height:1.2}
.qz-stat span{font-size:12.5px;color:var(--ink-3);font-weight:600}
.qz-chart-card{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:20px 22px 14px;position:relative}
.qz-chart-card h4{margin:0 0 2px;font-size:14.5px;font-weight:700}
.qz-chart-card .qz-chart-sub{margin:0 0 16px;font-size:12.5px;color:var(--ink-3)}
.qz-chart{position:relative;height:150px;display:flex;align-items:flex-end;gap:2px;padding-top:6px}
.qz-chart .grid{position:absolute;left:0;right:0;height:1px;background:rgba(255,240,238,.07);pointer-events:none}
.qz-bar-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative;cursor:default}
.qz-bar-col i{
  display:block;width:100%;min-height:2px;background:var(--tq);border-radius:4px 4px 0 0;
  transition:height .7s var(--ease),filter .2s;
}
.qz-bar-col:hover i{filter:brightness(1.25)}
.qz-bar-col.you i{box-shadow:0 0 0 1.5px var(--bg),0 0 0 3px rgba(255,129,117,.85)}
.qz-bar-col .you-tag{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:16px;font-size:9.5px;font-weight:800;letter-spacing:.06em;color:var(--tq-2);white-space:nowrap}
.qz-xaxis{display:flex;gap:2px;margin-top:7px}
.qz-xaxis span{flex:1;text-align:center;font-size:11px;color:var(--ink-3);font-weight:600}
.qz-avg-line{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed rgba(246,243,242,.34);pointer-events:none}
.qz-avg-line em{position:absolute;top:-4px;left:6px;font-style:normal;font-size:10.5px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.qz-tip{
  position:absolute;z-index:20;pointer-events:none;background:#17181d;border:1px solid var(--line-2);
  border-radius:10px;padding:8px 11px;font-size:12px;color:var(--ink);white-space:nowrap;display:none;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.7);
}
.qz-tip b{color:var(--tq-2)}
.qz-fun{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:14px}
.qz-fun .qz-stat b{font-size:17px;line-height:1.35;color:var(--ink)}
.qz-fun .qz-stat b .fem{font-size:19px;margin-right:6px}
.qz-pct{
  margin:2px auto 20px;max-width:430px;padding:11px 16px;border-radius:12px;
  border:1px solid rgba(228,52,47,.4);background:rgba(228,52,47,.1);
  font-size:14px;font-weight:700;color:var(--ink);
}
.qz-pct b{color:var(--tq-2)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden}

/* view switching */
.qz-view{display:none}
.qz-view.on{display:block;animation:qzIn .45s var(--ease)}

/* small screens */
@media(max-width:560px){
  .qz-question{font-size:19px}
  .qz-opt{font-size:14.5px;padding:13px 14px}
  .qz-score{width:126px;height:126px}
}
@media (prefers-reduced-motion:reduce){
  .qz-opt.is-wrong{animation:none}
  .qz-view.on,.qz-explain.show{animation:none}
  .qz-note{animation:none}
  .qz-brain{animation:none}
  .qz-quick{animation:none}
  .qz-bar-col i{transition:none}
}