/* QuizRips loop: Next up + Rip, daily goal ring, week dots, mastery bars, bonus questions, welcome, reading tips */

/* ---------- Next up ---------- */
.nextup{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 18px;border-radius:26px;position:relative;overflow:hidden;
  background:radial-gradient(circle at 8% 30%,rgba(255,210,63,.22),transparent 40%),linear-gradient(120deg,#1E3AA8,#3B2AB0 60%,#5B2FD0);border:1px solid #4C5FD6;box-shadow:0 18px 40px -22px rgba(45,91,255,.9);color:#fff}
.nu-mascot{width:92px;height:92px;flex:none;animation:snapbob 3s ease-in-out infinite}
.nu-mascot img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
@keyframes snapbob{50%{transform:translateY(-6px) rotate(-3deg)}}
.nu-main{display:flex;flex-direction:column;gap:10px;min-width:0;align-items:flex-start}
.nu-bubble{position:relative;background:#fff;color:#14204A;font-weight:800;font-size:17px;line-height:1.3;border-radius:18px;padding:11px 15px;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.nu-bubble::before{content:"";position:absolute;left:-9px;top:18px;border:9px solid transparent;border-right-color:#fff;border-left:0}
.nu-target{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:14px;opacity:.95;min-width:min(260px,100%)}
.nu-go{min-width:200px}
.nu-side{display:flex;flex-direction:column;align-items:center;gap:8px}
.nu-goal{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;color:#fff;padding:0}
.nu-goal small{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;opacity:.85}
.nu-week{display:flex;gap:4px}
.nu-week i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);font-style:normal}
.nu-week i b{font:800 10px/1 var(--f-body);opacity:.8}
.nu-week i.on{background:#FF9F1A;box-shadow:0 0 10px rgba(255,159,26,.7)}
.nu-week i.on b{opacity:1;color:#3A1A00}
.nu-week i.today{outline:2px solid #FFD23F;outline-offset:1px}
.nu-week.big i{width:32px;height:32px}.nu-week.big i b{font-size:12px}
.goalpanel .nu-week i{background:var(--surface-2)}.goalpanel .nu-week i b{color:var(--muted)}.goalpanel .nu-week i.on{background:#FF9F1A}.goalpanel .nu-week i.on b{color:#3A1A00}
.nu-streak{font-size:13px;font-weight:700;white-space:nowrap}
@media (max-width:760px){
  .nextup{grid-template-columns:auto minmax(0,1fr);padding:14px}
  .nu-mascot{width:68px;height:68px;align-self:start}
  .nu-side{grid-column:1/-1;flex-direction:row;justify-content:space-between;flex-wrap:wrap;gap:10px}
  .nu-goal{flex-direction:row;gap:8px}
  .nu-go{width:100%;min-width:0}
  .nu-bubble{font-size:16px}
}
/* goal ring */
.gring{--p:0;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#FF9F1A calc(var(--p) * 1%),rgba(255,255,255,.18) 0);animation:ringin 1s cubic-bezier(.2,.8,.2,1) both}
.gring b{width:76%;height:76%;border-radius:50%;background:#1A2350;display:grid;place-items:center;font:800 20px/1 var(--f-display);color:#fff}
.gring b small{font-size:11px;opacity:.75}
.gring.met{background:conic-gradient(#2DD4A0 100%,transparent 0);box-shadow:0 0 18px rgba(45,212,160,.6)}
.gring.met b{color:#2DD4A0;font-size:26px}
:root[data-theme="light"] .card .gring b,:root[data-theme="light"] .goalcard .gring b{background:#fff;color:#141A33}
:root[data-theme="light"] .card .gring{background:conic-gradient(#FF9F1A calc(var(--p) * 1%),#E3E8F5 0)}
@keyframes ringin{from{transform:scale(.6) rotate(-90deg);opacity:0}}
.goalpanel{display:flex;gap:18px;align-items:center;padding:16px 18px;margin-bottom:16px}
.goalpanel h2{font-family:var(--f-display);font-size:24px}
.goalpanel p{margin:4px 0 10px;color:var(--muted)}
.gp-r{display:flex;flex-direction:column;gap:6px;min-width:0}
.goalcard{display:flex;gap:14px;align-items:center;padding:14px 16px}
.goalcard.met{border-color:#2DD4A0;background:linear-gradient(110deg,color-mix(in srgb,#2DD4A0 16%,var(--surface)),var(--surface))}
.gc-tx{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.gc-tx b{font-family:var(--f-display);font-size:17px}
.gc-m{font-weight:800;color:#2DD4A0}
/* ---------- mastery ---------- */
.mbar{display:flex;flex-direction:column;gap:4px;width:100%;margin-top:6px}
.mb-track{display:flex;height:9px;border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--line) 70%,transparent)}
.mb-track i{display:block;height:100%}
.ms-m{background:#2DD4A0}.ms-f{background:#4FA3FF}.ms-l{background:#FFB020}.ms-n{background:transparent}
.mb-lbl{font-size:12.5px;font-weight:700;color:var(--muted)}
.nextup .mb-lbl{color:#E3E9FF}.nextup .mb-track{background:rgba(255,255,255,.18)}
.mbar.sm .mb-track{height:7px}
.mpanel{display:flex;flex-direction:column;gap:8px;padding:16px 18px}
.mpanel h3{font-family:var(--f-display)}
.mp-pct{font-family:var(--f-display);font-size:24px;color:#2DD4A0}
.mp-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.mp-legend span{display:inline-flex;align-items:center;gap:5px}
.mp-legend i{width:10px;height:10px;border-radius:3px}
.mp-legend .lg-m i{background:#2DD4A0}.mp-legend .lg-f i{background:#4FA3FF}.mp-legend .lg-l i{background:#FFB020}.mp-legend .lg-n i{background:var(--line)}
.mp-legend b{color:var(--ink)}
/* ---------- bonus questions ---------- */
.play .card.qcard.bonusq{border:2px solid #FFD23F;box-shadow:0 0 0 4px rgba(255,210,63,.18),0 22px 44px -26px rgba(0,0,0,.85);position:relative;overflow:visible}
.bonus-rib{position:absolute;top:-14px;right:16px;font:800 13px/1 var(--f-display);letter-spacing:.04em;color:#2A1A00;background:linear-gradient(90deg,#FFE27A,#FFB020);border-radius:999px;padding:7px 12px;box-shadow:0 3px 0 #B57A00;animation:ribpop .5s cubic-bezier(.3,1.6,.5,1),gopulse 1.6s 1s ease-in-out infinite}
@keyframes ribpop{from{transform:scale(0) rotate(-20deg)}}
/* ---------- welcome ---------- */
.welcome{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:radial-gradient(700px 520px at 50% 35%,#2B47C9,#16226A 55%,#070B24);color:#fff;animation:fadein .3s}
.wl-card{width:min(440px,100%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.wl-card h1{font-family:var(--f-display);font-size:clamp(28px,7vw,40px);margin:0}
.wl-card p{margin:0;font-size:17px;line-height:1.45;color:#D9E2FF}
.wl-card .btn{width:100%;min-height:56px;font-size:19px}
.wl-mascot{width:150px;animation:snapbob 3s ease-in-out infinite,wlin .6s cubic-bezier(.3,1.5,.5,1)}
.wl-mascot.sm{width:96px}
@keyframes wlin{from{transform:scale(.3) rotate(-20deg);opacity:0}}
.wl-name{text-align:center;font-size:22px;font-weight:800;min-height:56px}
.wl-avs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.wl-av{display:flex;flex-direction:column;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.2);border-radius:18px;padding:10px;color:#fff;font-weight:800}
.wl-av img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
.wl-av.on{border-color:#FFD23F;background:rgba(255,210,63,.18);transform:translateY(-3px);box-shadow:0 8px 20px -8px rgba(255,210,63,.7)}
.wl-pack .rpack{width:150px;animation:packbob 2.4s ease-in-out infinite}
.wl-dots{display:flex;gap:6px;margin-top:4px}.wl-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3)}.wl-dots i.on{background:#FFD23F;width:22px;border-radius:999px}
.wl-skip{color:#C9D6FF;font-size:15px}
/* ---------- reading screen ---------- */
.rd-mascot{width:84px;animation:snapbob 1.6s ease-in-out infinite;margin:0 auto -4px}
.rd-tip{margin:4px 0 0;font-weight:700;color:var(--ink);background:var(--surface-2);border-radius:14px;padding:10px 14px}
.rd-tip.in{animation:fadein .5s}
@media (prefers-reduced-motion:reduce){.nu-mascot,.wl-mascot,.rd-mascot,.bonus-rib,.gring{animation:none}}

/* ---------- Rip poses (full-body cut-outs) ---------- */
.rip-pose{display:block;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.35));user-select:none;-webkit-user-drag:none}
.nu-mascot{width:104px;height:116px;display:flex;align-items:flex-end;justify-content:center}
.nu-mascot .rip-pose{width:100%;height:100%;object-position:bottom}
.nu-mascot img.rp-sleep{height:72%}
@media (max-width:760px){.nu-mascot{width:78px;height:92px}}
.wl-mascot{width:auto!important;height:210px;max-width:72vw}
.wl-mascot.sm{height:130px}
.wl-pack{position:relative;display:flex;align-items:flex-end;justify-content:center}
.wl-pack .wl-buddy{position:absolute;right:-64px;bottom:-6px;height:150px;animation:snapbob 3s ease-in-out infinite}
.rd-mascot{width:auto!important;height:110px;margin:0 auto -4px}
.res-rip{height:120px;width:auto;flex:none;margin:-14px -4px -14px 0;animation:wlin .6s cubic-bezier(.3,1.5,.5,1)}
@media (max-width:620px){.res-rip{height:92px}}
.empty-rip{height:96px;width:auto;margin:0 auto 10px}
.card.empty{display:flex;flex-direction:column;align-items:center;text-align:center}
.rip-note{display:flex;align-items:center;gap:10px;text-align:left}
.rip-note .rip-pose{height:56px;width:auto;flex:none}
.hp-sleep{height:58px;width:auto;flex:none}
.ring.hide{display:none}
.head-rip{height:96px;width:auto;flex:none;margin:-10px 0 -12px auto}
.bhead{align-items:center}
.bhead .head-rip{order:3}
@media (max-width:620px){.head-rip{height:76px}}
.rv-teach{position:relative;padding-right:78px}
.teach-rip{position:absolute;right:6px;bottom:4px;height:70px;width:auto}
.rv-duo{display:flex;align-items:flex-end;justify-content:center;gap:0}
.rv-duo .rpack{width:min(190px,46vw)}
.rv-rip{height:190px;width:auto;margin-left:-28px;animation:wlin .6s cubic-bezier(.3,1.5,.5,1)}
@media (prefers-reduced-motion:reduce){.wl-buddy,.res-rip,.rv-rip{animation:none}}
.reshead:has(.res-rip){grid-template-columns:auto auto 1fr}
@media (max-width:520px){.reshead:has(.res-rip){grid-template-columns:auto auto;justify-content:center}.reshead:has(.res-rip)>div:last-child{grid-column:1/-1}}
.rv-teach{display:flex;gap:10px;align-items:flex-start;padding-right:14px}
.teach-rip{position:static;height:64px;width:auto;flex:none;order:2;align-self:flex-end}
.rv-tt{flex:1;min-width:0}