/* ===== QuizRips new UX batch: quiz creator, profile, daily goals, notes-to-quiz, choose your game ===== */

/* ---------- quiz creator (scanning) ---------- */
@media (min-width:1100px){main.wrap:has(.qcx){max-width:1480px}}
.qcx{display:flex;justify-content:center;padding:6px 0 20px}
.qc-card{position:relative;width:100%;max-width:1420px;padding:clamp(20px,3vw,44px);border-radius:30px;color:#fff;
  background:radial-gradient(90% 70% at 85% 0%,rgba(61,110,255,.28),transparent 60%),linear-gradient(180deg,#14205A,#0C1440);border:2px solid rgba(110,150,255,.45);box-shadow:0 30px 60px -30px rgba(0,0,0,.8),inset 0 0 40px rgba(61,110,255,.12);display:flex;flex-direction:column;gap:22px}
.qc-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-height:150px}
.qc-ht{max-width:860px}
.qc-eye{font:900 15px/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:#FFC21A}
.qc-head h1{margin:10px 0 8px;font:900 clamp(30px,4.2vw,58px)/1.05 var(--f-display);letter-spacing:-.01em}
.qc-head h1 span{color:#FFD23F}
.qc-head p{margin:0;font-size:clamp(16px,1.6vw,21px);color:#B9C6F2}
.qc-rip{position:absolute;right:0;top:-70px;width:clamp(200px,24vw,380px);height:auto;filter:drop-shadow(0 16px 24px rgba(0,0,0,.5));animation:qcrip 2.6s ease-in-out infinite;z-index:2}
@keyframes qcrip{50%{transform:translateY(-4px) rotate(-1deg)}}
.qc-body{display:grid;grid-template-columns:minmax(220px,.42fr) minmax(0,1fr);gap:22px;align-items:stretch}
.qc-pages{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:26px;border-radius:24px;background:rgba(14,24,66,.75);border:1.5px solid rgba(110,150,255,.35)}
.qc-thumb{position:relative;width:min(290px,100%);aspect-ratio:3/4;border-radius:18px;overflow:hidden;border:3px solid rgba(160,190,255,.6);box-shadow:0 0 30px rgba(61,110,255,.35);background:#0A1030}
.qc-thumb img{width:100%;height:100%;object-fit:cover}
.qc-scan{position:absolute;left:0;right:0;height:22%;background:linear-gradient(180deg,transparent,rgba(127,176,255,.45),rgba(255,255,255,.7) 50%,transparent 52%);animation:qcscan 2.2s ease-in-out infinite;mix-blend-mode:screen}
@keyframes qcscan{0%{top:-22%}100%{top:100%}}
.qc-n{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:8px 18px;border-radius:999px;background:rgba(10,18,52,.88);border:1.5px solid rgba(160,190,255,.6);font:800 17px/1 var(--f-body);white-space:nowrap}
.qc-view{min-height:50px;padding:0 26px;border-radius:999px;background:transparent;border:2px solid rgba(255,255,255,.8);color:#fff;font-size:18px}
.qc-view:hover{background:rgba(255,255,255,.1)}
.qc-right{display:flex;flex-direction:column;gap:18px;min-width:0}
.qc-steps{list-style:none;margin:0;padding:8px 28px;border-radius:24px;background:rgba(14,24,66,.75);border:1.5px solid rgba(110,150,255,.4)}
.qc-st{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:18px;align-items:center;padding:22px 0}
.qc-st+.qc-st{border-top:1px solid rgba(110,150,255,.2)}
.qc-st:not(:last-child)::after{content:"";position:absolute;left:25px;top:74px;bottom:-22px;width:4px;border-radius:2px;background:rgba(110,150,255,.3)}
.qc-st.done:not(:last-child)::after{background:#2DD4A0}
.qc-dot{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:4px solid rgba(140,160,220,.6);position:relative;z-index:1;background:#0E1844}
.qc-st.done .qc-dot{background:#2DD4A0;border-color:#2DD4A0}
.qc-st.done .qc-dot i{width:20px;height:11px;border-left:5px solid #04261B;border-bottom:5px solid #04261B;transform:translateY(-3px) rotate(-45deg)}
.qc-st.on .qc-dot{border-color:#FFD23F;box-shadow:0 0 20px rgba(255,210,63,.6)}
.qc-st.on .qc-dot i{width:22px;height:22px;border-radius:50%;border:4px solid #FFD23F;border-right-color:transparent;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.qc-sx b{display:block;font:900 clamp(20px,2vw,28px)/1.15 var(--f-display)}
.qc-sx small{display:block;margin-top:4px;font-size:clamp(15px,1.4vw,19px);color:#B9C6F2}
.qc-st.wait .qc-sx b{color:#C9D4FF}
.qc-bar{display:none;height:16px;margin-top:14px;border-radius:999px;background:rgba(110,150,255,.25);overflow:hidden;max-width:580px}
.qc-st.on .qc-bar{display:block}
.qc-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#FFC21A,#FFE27A);transition:width .4s}
.qc-pill{font-style:normal;padding:9px 18px;border-radius:999px;font:800 16px/1 var(--f-body);border:2px solid rgba(140,160,220,.5);color:#AAB8E6;white-space:nowrap}
.qc-st.done .qc-pill{border-color:#2DD4A0;color:#7FF0C9;background:rgba(45,212,160,.12)}
.qc-st.on .qc-pill{border-color:#FFD23F;color:#FFE27A;background:rgba(255,210,63,.12)}
.qc-tip{display:flex;align-items:center;gap:14px;padding:18px 26px;border-radius:20px;background:rgba(14,24,66,.75);border:1.5px solid rgba(110,150,255,.4);font-size:clamp(15px,1.5vw,19px);color:#E6ECFF}
.qc-tip b{color:#FFC21A;margin-right:6px}.qc-bulb{font-size:30px}
#rdTip.in{animation:fadein .5s}
.qc-cancel{align-self:center;min-height:56px;padding:0 44px;border-radius:16px;background:transparent;border:2px solid rgba(255,255,255,.8);color:#fff;font-size:19px}
.qc-cancel:hover{background:rgba(255,255,255,.08)}
.qc-pv{width:min(900px,94vw)!important;max-height:90vh;overflow:auto;display:flex;flex-direction:column;gap:16px;align-items:center}
.qc-pvg{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.qc-pvg figure{margin:0;width:min(400px,80vw);text-align:center;color:#C9D4FF}.qc-pvg img{width:100%;border-radius:12px}
@media (max-width:900px){.qc-body{grid-template-columns:1fr}.qc-head{padding-right:0;flex-direction:column}.qc-rip{position:relative;top:auto;align-self:center;width:200px;order:-1}.qc-thumb{width:200px}.qc-pages{padding:18px}}
@media (max-width:560px){.qc-steps{padding:4px 16px}.qc-st{grid-template-columns:40px minmax(0,1fr);gap:12px}.qc-dot{width:40px;height:40px;border-width:3px}.qc-st:not(:last-child)::after{left:18px;top:62px}.qc-pill{grid-column:2;justify-self:start;padding:6px 12px;font-size:13px}}
@media (max-width:560px){.qc-card{padding:18px 14px;gap:14px}.qc-head{min-height:0}.qc-rip{width:150px}.qc-head h1{font-size:28px}.qc-head p{font-size:15px}
  .qc-pages{flex-direction:row;padding:12px;gap:12px}.qc-thumb{width:96px;border-width:2px}.qc-n{font-size:12px;padding:4px 8px;bottom:6px}.qc-view{min-height:42px;font-size:15px;padding:0 16px}
  .qc-st{padding:14px 0}.qc-sx b{font-size:18px}.qc-tip{padding:12px 14px}.qc-cancel{min-height:48px;padding:0 24px;font-size:16px}}

/* ---------- Choose Your Game ---------- */
.gm-panel{display:flex;flex-direction:column;gap:18px;padding:22px!important}
.gm-head{display:flex;align-items:center;gap:18px}
.gm-badge{flex:none;width:62px;height:62px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#FF5A6E,#E0263F);box-shadow:0 5px 0 #9C1328,0 0 18px rgba(255,80,100,.35)}
.gm-badge svg{width:34px;height:34px}
.gm-head>div{padding-left:18px;border-left:2px solid rgba(140,170,255,.3)}
.gm-head h2{margin:0;font:900 clamp(22px,2.2vw,30px)/1.1 var(--f-display);color:#fff}
.gm-head p{margin:4px 0 0;color:#AFC0F0;font-size:15px}
.gm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.gm-tile{--c1:#3D8BFF;--c2:#1F5CE8;--sh:#123A9E;--gl:rgba(61,139,255,.5);position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 12px 16px;border-radius:22px;border:2px solid rgba(255,255,255,.25);cursor:pointer;color:#fff;text-align:center;
  background:radial-gradient(120% 70% at 50% 0%,rgba(255,255,255,.22),transparent 60%),linear-gradient(180deg,var(--c1),var(--c2));box-shadow:0 6px 0 var(--sh),0 0 22px var(--gl),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .15s,box-shadow .15s}
.gm-tile:hover{transform:translateY(-4px);box-shadow:0 10px 0 var(--sh),0 0 34px var(--gl),inset 0 1px 0 rgba(255,255,255,.4)}
.gm-tile:active{transform:translateY(3px);box-shadow:0 2px 0 var(--sh)}
.gm-speed{--c1:#FF9A2E;--c2:#E85D0C;--sh:#9A3A05;--gl:rgba(255,140,40,.45)}
.gm-battle{--c1:#A95BFF;--c2:#7B30E6;--sh:#4D1A99;--gl:rgba(170,90,255,.45)}
.gm-warm{--c1:#2FD99A;--c2:#139A68;--sh:#0A5E3F;--gl:rgba(45,212,160,.45)}
.gm-ic{width:clamp(56px,5vw,78px);height:clamp(56px,5vw,78px);display:grid;place-items:center}.gm-ic svg{width:100%;height:100%;stroke-width:2}
.gm-tile b{font:900 clamp(19px,1.9vw,27px)/1.1 var(--f-display);text-shadow:0 2px 0 rgba(0,0,0,.2)}
.gm-tile small{font-size:clamp(13px,1.15vw,16px);line-height:1.3;opacity:.95;flex:1}
.gm-pill{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:7px 14px;border-radius:999px;background:rgba(0,0,0,.25);border:1.5px solid rgba(255,255,255,.45);font:900 12px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.gm-pill svg{width:16px;height:16px;flex:none}
.gm-speed .gm-pill svg{color:#FFD23F}.gm-warm .gm-pill svg{color:#FFE27A}
@media (max-width:1200px){.gm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.gm-pill{font-size:10px;padding:6px 9px}.gm-tile{padding:16px 8px 12px}}

/* ---------- Turn Your Notes Into a Quiz ---------- */
.nq-panel{display:flex!important;flex-direction:column;gap:16px!important;padding:22px!important}
.nq-head{display:flex;align-items:center;gap:16px}
.nq-rip{flex:none;height:96px;width:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.nq-bar{align-self:stretch;width:2px;border-radius:2px;background:rgba(140,170,255,.35)}
.nq-head h2{margin:0;font:900 clamp(22px,2.3vw,32px)/1.1 var(--f-display);color:#fff}
.nq-head h2 span{color:#FFD23F;font-style:italic;text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:6px;text-decoration-color:#FFC21A}
.nq-head p{margin:6px 0 0;color:#C9D4FF;font-size:clamp(14px,1.3vw,17px)}
.h3-create .nq-btns{display:grid!important;grid-template-columns:1fr 1fr;gap:12px}
.h3-create .nq-btns>.btn{min-height:60px;font-size:clamp(16px,1.5vw,20px);border-radius:18px;gap:12px}
.h3-create .nq-btns>.nq-paste{grid-column:1/-1;background:linear-gradient(180deg,#4B5FD6,#3445B8);color:#fff;border:1.5px solid rgba(160,180,255,.5);box-shadow:0 4px 0 #1E2A7A}
.nq-drop{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;color:#C9D4FF;font-size:15px;position:relative}
@media (max-width:560px){.nq-rip{height:70px}.h3-create .nq-btns>.btn{min-height:52px}}

/* ---------- Daily Goals ---------- */
.h3-row.r2{grid-template-columns:minmax(0,1.07fr) minmax(0,1fr)}
@media (max-width:900px){.h3-row.r2{grid-template-columns:1fr}}
.dg-panel{display:flex;flex-direction:column;gap:16px;padding:22px 24px!important}
.dg-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dg-head h2{display:flex;align-items:center;gap:12px;margin:0;font:900 clamp(24px,2.6vw,36px)/1 var(--f-display);color:#fff;text-transform:uppercase;letter-spacing:.02em}
.dg-head h2 svg{width:40px;height:40px;color:#FFC21A;fill:#FFC21A}
.dg-sep{width:2px;align-self:stretch;min-height:26px;border-radius:2px;background:rgba(140,170,255,.35)}
.dg-head p{margin:0;color:#C9D4FF;font-size:clamp(14px,1.4vw,19px);flex:1;min-width:180px}
.dg-xp{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;border-radius:999px;background:rgba(40,26,0,.6);border:2px solid #FFC21A;color:#FFD23F;font:900 clamp(18px,1.8vw,24px)/1 var(--f-display);box-shadow:0 0 18px rgba(255,194,26,.35)}
.dg-xp .coin{width:26px;height:26px}.dg-xp.got{background:rgba(45,212,160,.15);border-color:#2DD4A0;color:#7FF0C9;box-shadow:0 0 18px rgba(45,212,160,.35)}
.dg-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.dg-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 12px 14px;border-radius:22px;text-align:center;color:#fff;background:linear-gradient(180deg,rgba(40,62,160,.55),rgba(20,32,92,.7));border:2px solid rgba(110,150,255,.45);box-shadow:inset 0 0 20px rgba(61,110,255,.15)}
.dg-card.on{border-color:#FFD23F;box-shadow:0 0 22px rgba(255,210,63,.35),inset 0 0 18px rgba(255,210,63,.1)}
.dg-card.done{background:linear-gradient(180deg,rgba(20,110,90,.55),rgba(10,60,56,.7));border-color:#2DD4A0;box-shadow:0 0 22px rgba(45,212,160,.35),inset 0 0 18px rgba(45,212,160,.12)}
.dg-ok{position:absolute;top:-12px;right:-10px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#2DD4A0;border:3px solid #062B22;color:#04261B}
.dg-ok svg{width:22px;height:22px;stroke-width:3.4}
.dg-ic{width:60px;height:60px;display:grid;place-items:center;color:#C9D9FF}.dg-ic svg{width:100%;height:100%}
.dg-ic.g-play{color:#fff}.dg-ic.g-pack{color:#FFC21A}.dg-ic.g-right{color:#FF5A6E}.dg-ic.g-modes{color:#8FB0FF}.dg-ic.g-open{color:#fff}
.dg-card b{font:900 clamp(16px,1.6vw,22px)/1.1 var(--f-display)}
.dg-card small{color:#C9D4FF;font-size:clamp(12px,1.1vw,15px);line-height:1.3;flex:1}
.dg-prog{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:38px;margin-top:6px;border-radius:999px;overflow:hidden;background:rgba(8,14,44,.8);border:2px solid rgba(110,150,255,.45);font:900 16px/1 var(--f-display)}
.dg-prog i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(180deg,#FFE27A,#FFC21A);border-radius:999px}
.dg-prog em{position:relative;font-style:normal}
.dg-card.done .dg-prog{background:linear-gradient(180deg,#25C08C,#14996C);border-color:#5FF0C4;color:#fff}
.dg-card.done .dg-prog svg{width:18px;height:18px;stroke-width:3.4}
.dg-total{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.dg-tbar{flex:1;min-width:200px;display:grid;grid-template-columns:repeat(5,1fr);gap:3px;height:22px;padding:3px;border-radius:999px;background:rgba(8,14,44,.8);border:1.5px solid rgba(110,150,255,.4)}
.dg-tbar i{border-radius:999px;background:transparent}.dg-tbar i.on{background:linear-gradient(180deg,#FFE27A,#FFC21A)}
.dg-total b{font:800 clamp(16px,1.6vw,22px)/1 var(--f-body);color:#fff}.dg-total em{font-style:normal;color:#FFD23F}
.dg-foot{display:flex;align-items:center;gap:16px;padding:14px 0 0;border:0;border-top:1px solid rgba(140,170,255,.2);background:none;color:#C9D4FF;font-size:clamp(14px,1.3vw,18px);text-align:left;cursor:pointer;flex-wrap:wrap}
.dg-fire svg{width:34px;height:34px;color:#FF8A1E}
.dg-foot b{font:900 clamp(18px,1.9vw,26px)/1 var(--f-display);color:#FFD23F}
@media (max-width:1000px){.dg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.dg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dg-card:last-child{grid-column:1/-1}.dg-head .dg-sep{display:none}}
.gm-panel{container-type:inline-size}
@container (max-width:760px){.gm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.h3-create .nq-btns>.btn.sho{text-decoration:none}
.h3-feat{margin-top:0}

/* ---------- Profile ---------- */
@media (min-width:1100px){main.wrap:has(.pfx){max-width:1480px}}
.pfx{display:flex;flex-direction:column;gap:18px;color:#fff}
.pf-head{display:flex;align-items:center;gap:16px}
.pf-crown{font-size:48px;filter:drop-shadow(0 4px 8px rgba(255,194,26,.4))}
.pf-head h1{margin:0;font:900 clamp(34px,4vw,48px)/1 var(--f-display)}
.pf-head p{margin:4px 0 0;color:#C9D4FF;font-size:17px}
.pf-cols{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:22px;align-items:start}
.pf-left{display:flex;flex-direction:column;gap:14px;min-width:0}
.pf-hero{position:relative;border-radius:26px;padding:18px;overflow:hidden;background:#101A4E;border:3px solid #33D2FF;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 30px rgba(51,210,255,.45);display:flex;flex-direction:column;gap:12px}
.pf-ban{position:absolute;left:0;right:0;top:0;height:250px;background:linear-gradient(135deg,#2B4BC8,#152A7A);-webkit-mask:linear-gradient(#000 55%,transparent);mask:linear-gradient(#000 55%,transparent);opacity:.95}
.pf-ban.bn-default{background:url(../img/home/hero-bg-sm.webp) 30% 40%/cover}
.pf-id{position:relative;display:flex;align-items:center;gap:18px;min-height:190px}
.pf-ava{position:relative;flex:none}.pf-ava .ava{box-shadow:0 0 0 5px rgba(255,255,255,.9),0 0 24px rgba(0,0,0,.5)}
.pf-avcrown{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);font-size:34px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.pf-nm{min-width:0}
.pf-title{display:inline-block;padding:6px 22px;margin-bottom:6px;font:900 15px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,#3D8BFF,#1F5CE8);border:2px solid #9FD0FF;clip-path:polygon(6% 0,94% 0,100% 50%,94% 100%,6% 100%,0 50%);box-shadow:0 0 14px rgba(61,139,255,.6)}
.pf-namerow{display:flex;align-items:center;gap:12px}
.pf-namerow h2{margin:0;font:900 clamp(32px,3.6vw,52px)/1 var(--f-display);text-transform:uppercase;text-shadow:0 3px 0 rgba(0,0,0,.4);overflow-wrap:anywhere}
.pf-edit{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:rgba(14,24,66,.7);font-size:18px;cursor:pointer}
.pf-rows{position:relative;display:flex;flex-direction:column;border-radius:20px;background:rgba(10,18,52,.85);border:1.5px solid rgba(110,150,255,.4)}
.pf-row{display:flex;align-items:center;gap:14px;padding:14px 16px;background:none;border:0;color:#fff;text-align:left;cursor:pointer;width:100%}
.pf-row+.pf-row{border-top:1px solid rgba(110,150,255,.25)}
.pf-lvl{flex:none;width:58px;height:58px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#FFE27A,#FFC21A);color:#2A1A00;font:900 26px/1 var(--f-display);box-shadow:0 4px 0 #B57A00}
.pf-lvl small{font-size:11px;letter-spacing:.06em}
.pf-rx{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.pf-rt{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}.pf-rt b{font:900 18px/1.1 var(--f-display)}.pf-rt em{font-style:normal;font-weight:700;font-size:14px;color:#E6ECFF}
.pf-bar{display:block;height:12px;border-radius:999px;background:rgba(110,150,255,.25);overflow:hidden}.pf-bar i{display:block;height:100%;border-radius:999px}
.pf-bar.gold i{background:linear-gradient(90deg,#FFC21A,#FFE27A)}.pf-bar.cyan i{background:linear-gradient(90deg,#33D2FF,#7FE6FF)}
.pf-next{flex:none;width:76px;height:76px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:2px solid #FFC21A;background:rgba(40,26,0,.5);font-size:30px;overflow:hidden}
.pf-next .itimg{width:44px;height:44px;object-fit:cover;border-radius:8px}.pf-next small{font:800 10px/1 var(--f-body);color:#fff}
.pf-next.rk{border-color:rgba(140,160,220,.5);background:rgba(14,24,66,.7)}
.pf-stats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pf-stats>div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 6px;border-radius:18px;background:rgba(10,18,52,.85);border:1.5px solid rgba(110,150,255,.4)}
.pf-stats span{font-size:30px}.pf-stats b{font:900 22px/1.1 var(--f-display)}.pf-stats small{color:#C9D4FF}
.pf-coll,.pf-link{display:flex;align-items:center;gap:16px;width:100%;padding:16px 18px;border-radius:22px;background:rgba(14,24,66,.85);border:1.5px solid rgba(110,150,255,.4);color:#fff;text-align:left;cursor:pointer}
.pf-coll:hover,.pf-link:hover{border-color:#7FA6FF}
.pf-fan{position:relative;flex:none;width:130px;height:110px}
.pf-fc{position:absolute;top:6px;left:calc(var(--k) * 26px);width:70px;transform:rotate(calc((var(--k) - 1) * 9deg));transform-origin:bottom center}
.pf-fc .ccard{max-width:none;width:70px}
.pf-cx{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.pf-cx b{font:900 22px/1.1 var(--f-display)}.pf-cx small{color:#C9D4FF;font-size:15px}
.pf-crow{display:flex;align-items:center;gap:10px}.pf-crow .pf-bar{flex:1}.pf-crow em{font-style:normal;font-weight:800}
.pf-gift{color:#FFD23F;font-weight:700;font-size:14px}
.pf-go{flex:none;width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.6);display:grid;place-items:center;font:900 22px/1 var(--f-display)}
.pf-li{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:rgba(61,110,255,.25);border:1.5px solid rgba(127,166,255,.5)}
.pf-link>span:nth-child(2){flex:1;min-width:0}.pf-link b{display:block;font:900 19px/1.1 var(--f-display)}.pf-link small{color:#C9D4FF;font-size:14px}
.pf-drop{display:flex;flex-direction:column;gap:8px;margin-top:-6px;padding:14px;border-radius:0 0 20px 20px;background:rgba(10,18,52,.7);border:1.5px solid rgba(110,150,255,.3);border-top:0}
.pf-locker{border-radius:26px;padding:20px;background:rgba(14,24,66,.85);border:1.5px solid rgba(110,150,255,.4);display:flex;flex-direction:column;gap:14px;min-width:0}
.pf-lh{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pf-lh h2{margin:0;display:flex;align-items:center;gap:12px;font:900 clamp(26px,2.6vw,36px)/1 var(--f-display)}.pf-lc{color:#E6ECFF;font-weight:700;font-size:17px}
.pf-tabs{display:flex;gap:8px;flex-wrap:wrap}
.pf-tab{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(140,170,255,.45);background:rgba(10,18,52,.7);color:#E6ECFF;font:800 15px/1 var(--f-body);cursor:pointer}
.pf-tab[aria-pressed="true"]{background:linear-gradient(180deg,#5AA0FF,#2F6CF0);border-color:#BFD8FF;color:#fff;box-shadow:0 0 16px rgba(61,139,255,.5)}
.pf-prev{display:flex;align-items:center;gap:20px;padding:16px 20px;border-radius:20px;background:linear-gradient(90deg,rgba(80,70,200,.5),rgba(40,50,140,.5));border:1.5px solid rgba(160,150,255,.45)}
.pf-pv{flex:none;width:110px;height:110px;border-radius:50%;display:grid;place-items:center;font-size:52px;overflow:hidden}
.pf-pv.banner,.pf-pv.title{border-radius:14px;width:150px;height:90px}
.pf-pvb{width:100%;height:100%}.pf-pvt{font:900 15px/1.1 var(--f-display);text-align:center;padding:8px;background:linear-gradient(180deg,#3D8BFF,#1F5CE8);border-radius:10px}
.pf-pv .itimg{width:100%;height:100%;object-fit:cover}
.pf-prev b{display:block;font:900 24px/1.1 var(--f-display)}.pf-prev small{display:block;margin-top:4px;color:#E6ECFF;font-size:16px;line-height:1.35}.pf-prev em{display:block;margin-top:6px;font-style:normal;color:#AFC0F0;font-size:13px}
.pf-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.pf-it{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px 12px;border-radius:18px;border:2px solid rgba(110,150,255,.4);background:linear-gradient(180deg,rgba(40,62,160,.35),rgba(14,24,66,.7));color:#fff;cursor:pointer;text-align:center;min-width:0}
.pf-it:hover{border-color:var(--rc)}
.pf-it.eqd{border-color:#2DD4A0;box-shadow:0 0 20px rgba(45,212,160,.45)}
.pf-it.locked{opacity:.75}.pf-it.locked .pf-ib{filter:grayscale(1) brightness(.7)}
.pf-ib{width:84px;height:84px;display:grid;place-items:center;font-size:52px;overflow:hidden;border-radius:16px}
.pf-ib .itimg{width:100%;height:100%;object-fit:cover}.pf-ib .mini-banner{width:84px;height:56px}.pf-ib .ava{transform:scale(1.6)}
.pf-it b{font:900 17px/1.15 var(--f-display);overflow-wrap:anywhere}.pf-ir{font-weight:700;color:var(--rc);font-size:14px}
.pf-it.locked .pf-ir{color:#C9D4FF}
.pf-eq{font-style:normal;font-weight:800;font-size:13px;color:#2DD4A0}.pf-how{font-style:normal;font-size:12.5px;color:#C9D4FF;line-height:1.25}
.pf-ok{position:absolute;top:-8px;right:-8px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#2DD4A0;color:#04261B;font:900 18px/1 var(--f-display);font-style:normal;border:3px solid #062B22}
.pf-lock{position:absolute;top:10px;right:12px;font-style:normal;font-size:18px}
.pf-foot{font-size:13px;margin:0}
@media (max-width:1000px){.pf-cols{grid-template-columns:1fr}}
@media (max-width:560px){.pf-id{flex-direction:column;text-align:center;min-height:0}.pf-namerow{justify-content:center}.pf-ava .ava{width:120px!important;height:120px!important}.pf-items{grid-template-columns:repeat(2,minmax(0,1fr))}.pf-prev{flex-direction:column;text-align:center}.pf-fan{width:100px;height:90px}.pf-fc,.pf-fc .ccard{width:56px}}
.pf-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.pf-tabs::-webkit-scrollbar{display:none}
.pf-tab{flex:none;padding:0 13px;font-size:14px}

/* ---------- Arcade ---------- */
@media (min-width:1100px){main.wrap:has(.arx){max-width:1480px}}
body:has(.arx){background:#0B1440 url(../img/arcade/bg.webp) center top/cover fixed!important}
@media (max-width:900px){body:has(.arx){background-image:url(../img/arcade/bg-sm.webp)!important;background-attachment:scroll!important}}
.arx{display:flex;flex-direction:column;gap:18px;color:#fff}
.ar-head{position:relative;display:flex;align-items:flex-end;gap:18px;min-height:170px;padding-left:250px}
.ar-rip{position:absolute;left:-30px;top:-6px;height:290px;width:auto;z-index:3;filter:drop-shadow(0 12px 20px rgba(0,0,0,.55));animation:sprip 3s ease-in-out infinite}
.ar-logo{display:flex;flex-direction:column;align-items:flex-start}
.ar-pad{font-size:42px;filter:drop-shadow(0 0 12px #B66BFF)}
.ar-logo h1{margin:-4px 0 0;font:900 clamp(46px,6vw,84px)/.9 var(--f-display);font-style:italic;text-transform:uppercase;color:#fff;text-shadow:0 0 0 #fff,4px 4px 0 #3A1D8C,0 0 24px rgba(182,107,255,.8);-webkit-text-stroke:2px #2B124F}
.ar-sub{margin-top:4px;padding:6px 22px;transform:skewX(-10deg);background:linear-gradient(180deg,#5B3FE0,#3B22A8);border:2px solid #B9A6FF;font:900 clamp(16px,1.8vw,24px)/1 var(--f-display);text-transform:uppercase;box-shadow:0 0 18px rgba(124,90,255,.6)}
.ar-plays{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding:12px 18px;border-radius:16px;background:rgba(10,18,52,.8);border:1.5px solid rgba(160,190,255,.4);text-align:right}
.ar-plays b{font:900 18px/1.1 var(--f-display)}.ar-plays small{color:#C9D4FF}
.ar-plays.off{flex-direction:row;align-items:center;gap:12px}
.ar-feat{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) auto;align-items:center;gap:22px;margin-left:210px;padding:12px 26px 12px 12px;border-radius:24px;border:4px solid #4CFF7A;cursor:pointer;color:#fff;text-align:left;
  background:linear-gradient(90deg,#0E5A2A,#0B3D1E 60%,#0A2E19);box-shadow:0 0 30px rgba(76,255,122,.55),inset 0 0 30px rgba(76,255,122,.15);transition:transform .15s}
.ar-feat:hover{transform:translateY(-3px)}
.ar-fart{position:relative;height:190px;border-radius:16px;overflow:hidden}
.ar-lawn{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.ar-mlogo{position:absolute;left:4%;top:6%;width:55%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.ar-mower{position:absolute;left:28%;bottom:4%;width:42%;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.ar-cat{position:absolute;right:3%;bottom:6%;width:24%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));animation:sprip 1.8s ease-in-out infinite}
.ar-new{align-self:flex-start;font-style:normal;padding:4px 12px;border-radius:8px;background:#FFD23F;color:#2A1A00;font:900 14px/1 var(--f-display)}
.ar-ftx{display:flex;flex-direction:column;gap:6px}.ar-ftx b{font:900 clamp(30px,3.4vw,46px)/1 var(--f-display)}.ar-ftx small{font-size:clamp(15px,1.5vw,20px);color:#E6FFE9}
.ar-fmeta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-weight:800;font-size:17px}.ar-fmeta i{width:2px;height:22px;background:rgba(255,255,255,.4)}.ar-fmeta .g{color:#FFD23F}
.ar-play{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;color:#fff;font:900 20px/1 var(--f-display);
  background:linear-gradient(180deg,#3D8BFF,#1F5CE8);box-shadow:0 5px 0 #0E3AA8,0 0 16px rgba(61,139,255,.5)}
.ar-play.big{min-height:76px;padding:0 34px;font-size:clamp(24px,2.4vw,34px);background:linear-gradient(180deg,#5BEA6E,#22A93C);box-shadow:0 6px 0 #0D6A22,0 0 26px rgba(91,234,110,.6)}
.ar-play.off{filter:grayscale(.6) brightness(.75);cursor:not-allowed}
.ar-cost{display:inline-flex;align-items:center;gap:6px}.ar-cost .coin{width:26px;height:26px}
.ar-sh{display:flex;align-items:center;gap:16px}.ar-sh h2{margin:0;font:900 clamp(22px,2.4vw,30px)/1 var(--f-display);text-transform:uppercase;font-style:italic;white-space:nowrap}.ar-sh i{flex:1;height:2px;background:rgba(160,190,255,.35)}
.ar-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ar-card{--c1:#2F7BFF;--c2:#123E9E;--gl:rgba(61,139,255,.6);position:relative;display:grid;grid-template-columns:42% minmax(0,1fr);align-items:stretch;min-height:200px;border-radius:24px;overflow:hidden;border:3px solid color-mix(in srgb,var(--c1) 60%,#fff);
  background:radial-gradient(80% 80% at 20% 30%,rgba(255,255,255,.25),transparent 60%),linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 0 26px var(--gl)}
.ar-pop{--c1:#A33CF0;--c2:#4A1789;--gl:rgba(170,90,255,.55)}.ar-flip{--c1:#FF9A2E;--c2:#A8460A;--gl:rgba(255,150,40,.5)}
/* the picture is laid over the left side so its own (very tall) size can't stretch the card; Safari did that */
.ar-char{position:absolute;left:0;top:0;width:42%;height:100%;object-fit:cover;object-position:top center}
.ar-ctx{grid-column:2;position:relative}
.ar-ctx{display:flex;flex-direction:column;gap:6px;padding:16px 16px 16px 6px}
.ar-ctx b{font:900 clamp(22px,2.2vw,30px)/1 var(--f-display)}.ar-ctx small{font-size:15px;line-height:1.3;color:#EEF2FF}
.ar-best{font-weight:800;color:#FFD23F}.ar-stars i{font-style:normal;font-size:22px;color:rgba(255,255,255,.35);margin-right:2px}.ar-stars i.on{color:#FFD23F;text-shadow:0 0 8px rgba(255,210,63,.7)}
.ar-ctx .ar-play{margin-top:auto;align-self:stretch}
.ar-soon{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ar-sc{display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:18px;background:rgba(40,46,90,.75);border:1.5px solid rgba(160,170,220,.35);color:#C9D0EC}
.ar-sci{font-size:44px;filter:grayscale(1) brightness(.85)}.ar-lock{font-size:28px}.ar-sc b{display:block;font:900 19px/1.1 var(--f-display);color:#fff;text-transform:uppercase}.ar-sc small{font-size:15px}
.ar-foot{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;color:#C9D4FF}.ar-foot i{width:1px;height:16px;background:rgba(255,255,255,.3)}
@media (max-width:1100px){.ar-grid,.ar-soon{grid-template-columns:1fr}.ar-card{min-height:170px;grid-template-columns:34% minmax(0,1fr)}.ar-char{width:34%}}
@media (max-width:900px){.ar-head{padding-left:130px;min-height:120px}.ar-rip{height:170px;left:-6px;top:0}.ar-feat{margin-left:0;grid-template-columns:1fr;padding:12px}.ar-fart{height:160px}.ar-feat .ar-play.big{width:100%}}
@media (max-width:560px){.ar-head{flex-wrap:wrap}.ar-plays{margin-left:0;align-items:flex-start;text-align:left;width:100%}.ar-plays.off{flex-direction:column;align-items:flex-start}}
@media (max-width:560px){.ar-head{padding-left:140px}.ar-logo h1{font-size:40px}.ar-rip{height:150px}}
/* results: rip your pack right from here */
.res-ripnow{display:flex;align-items:center;gap:18px;padding:16px 22px;margin:14px 0;border-radius:22px;color:#fff;background:linear-gradient(120deg,#3A2A0A,#2A1E6E 60%,#16226A);border:2px solid #FFC21A;box-shadow:0 0 28px rgba(255,194,26,.35);animation:eppulse 1.4s ease-in-out 3}
.res-ripnow .rpack.small{width:70px;transform:rotate(-8deg);flex:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.5))}
.res-ripnow>div{flex:1;min-width:0}.res-ripnow b{display:block;font:900 clamp(20px,2.2vw,28px)/1.1 var(--f-display)}.res-ripnow span{color:#D5DEFF}
.res-ripnow .btn{white-space:nowrap;min-height:58px;padding:0 26px;font-size:19px}
@keyframes eppulse{50%{box-shadow:0 0 50px rgba(255,194,26,.75)}}
@media (max-width:640px){.res-ripnow{flex-wrap:wrap}.res-ripnow .btn{width:100%}}
/* quiz: rip a pack now */
.qz-ripnow{min-height:38px;padding:0 16px;margin:0 8px;font-size:15px;animation:qzready 1.6s ease-in-out infinite;vertical-align:middle}
.qz-pack small{display:block;color:#AFC0F0;font-size:12px;margin-top:2px}
/* Rip's question-type recommendation */
.rec-card{display:flex;align-items:center;gap:14px;padding:14px 18px;margin:0 0 14px;border-radius:18px;background:linear-gradient(90deg,rgba(61,110,255,.22),rgba(14,24,66,.6));border:1.5px solid rgba(127,166,255,.5);color:#E6ECFF}
.rec-ic{font-size:30px}.rec-card b{display:block;font:900 18px/1.2 var(--f-display);color:#fff}.rec-card span{display:block;font-size:14px}
.rec-card em{display:inline-block;margin-top:6px;font-style:normal;font-weight:800;font-size:14px;color:#FFD23F}
.rec-note{margin:0 0 10px;padding:10px 14px;border-radius:12px;background:rgba(61,110,255,.15);border:1px solid rgba(127,166,255,.4);font-size:14px}
/* an empty date box never looks filled in (Safari shows today's date in an empty box) */
.input.nodate::-webkit-datetime-edit{color:transparent}
.input.nodate:focus::-webkit-datetime-edit{color:inherit}
.tdrow{position:relative}
.td-none{position:absolute;left:18px;top:52px;pointer-events:none;color:#8C9AC8;font-weight:700}
.tdrow .hint.warn{color:#FFD23F}
.rec-card .rec-ic{font-size:32px;display:block}
.td-none{top:auto;bottom:calc(100% - 92px);transform:translateY(-50%)}
/* flash cards */
.flash-card-note{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;margin:0 0 14px;border-radius:18px;background:linear-gradient(90deg,rgba(255,194,26,.18),rgba(14,24,66,.6));border:1.5px solid rgba(255,210,63,.55);color:#E6ECFF;font-size:30px}
.flash-card-note b{display:block;font:900 19px/1.2 var(--f-display);color:#fff}.flash-card-note span{display:block;font-size:14.5px;line-height:1.4;margin-top:2px}
.edrow{position:relative}
.swapdef{position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);z-index:2;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,210,63,.7);background:#1A2556;color:#FFD23F;font-size:17px;font-weight:900;cursor:pointer}
.swapdef:hover{background:#2A3A80}
.edrow .chk{grid-column:1/-1;font-size:13px;color:#FFD23F;font-weight:700}
.fh-steps{display:flex;align-items:center;justify-content:center;gap:14px;margin:4px 0}
.fh-steps span{display:flex;flex-direction:column;align-items:center;padding:10px 18px;border-radius:14px;background:rgba(255,255,255,.07);border:1.5px solid rgba(140,170,255,.45);font-weight:800;color:#fff}
.fh-steps small{font-weight:600;color:#C9D4FF}.fh-steps b{font-size:22px;color:#FFD23F}
/* flashcards study mode */
.fcs-entry{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;text-align:left;width:100%;padding:12px 16px;border-radius:16px;border:1.5px solid rgba(255,210,63,.55);background:linear-gradient(90deg,rgba(255,194,26,.14),rgba(255,255,255,.04));color:#fff;cursor:pointer}
.fcs-entry span{grid-row:1/3;font-size:28px}.fcs-entry b{font-size:16px}.fcs-entry small{color:#C9D4FF;font-size:13px}
.fcs-entry:hover{background:linear-gradient(90deg,rgba(255,194,26,.24),rgba(255,255,255,.06))}
.overlay.fcs{justify-content:flex-start;padding:16px 16px 24px;gap:14px;overflow-y:auto}
.fcs-top{width:100%;max-width:720px;display:flex;align-items:center;gap:12px}
.fcs-x{width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font-size:18px;cursor:pointer;flex:none}
.fcs-t{flex:1;min-width:0;text-align:left}.fcs-t b{display:block;font-size:18px}.fcs-t small{display:block;color:#C9D4FF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcs-cnt{display:flex;gap:8px;font-weight:900}.fcs-cnt span{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08)}.fcs-cnt .ok{color:#2DD4A0}.fcs-cnt .lrn{color:#FFB020}
.fcs-bar{width:100%;max-width:720px;height:10px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}.fcs-bar i{display:block;height:100%;background:linear-gradient(90deg,#2DD4A0,#FFD23F);transition:width .4s}
.fcs-card{width:100%;max-width:620px;aspect-ratio:3/2;max-height:52vh;perspective:1400px;background:none;border:0;padding:0;cursor:pointer;color:inherit;margin-top:8px}
.fcs-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
.fcs-card.flip .fcs-in{transform:rotateY(180deg)}
.fcs-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px 28px;border-radius:26px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.fcs-face.fr{background:linear-gradient(160deg,#FFE27A,#FFC21A);color:#1A1440;border:4px solid #fff}
.fcs-face.fr b{font:900 clamp(28px,6vw,48px)/1.1 var(--f-display,inherit)}.fcs-face small{font-size:13px;font-weight:900;letter-spacing:.14em;opacity:.7}
.fcs-face.fr em{font-style:normal;font-weight:800;font-size:14px;opacity:.65}
.fcs-face.bk{transform:rotateY(180deg);background:linear-gradient(160deg,#24357F,#151F55);border:4px solid #6F8BFF;color:#fff}
.fcs-face.bk small{letter-spacing:0;font-size:16px;color:#FFD23F;opacity:1}.fcs-face.bk b{font-size:clamp(19px,3.4vw,27px);line-height:1.35;font-weight:800}
.fcs-ex{font-size:15px;color:#C9D4FF;background:rgba(255,255,255,.08);padding:8px 14px;border-radius:12px}
.fcs-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;width:100%;max-width:620px}.fcs-btns .btn{flex:1;min-width:150px}
.fcs-no{background:#3A2A10;border:2px solid #FFB020;color:#FFD27A}
.fcs-tip{font-size:13px;color:#9FB0E8;max-width:560px}
.fcs-done{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:640px;margin:auto}
.fcs-rip{width:170px;height:auto}
.fcs-rew{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.fcs-rew span{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.1);font-weight:900}
.fcs-done .res-ripnow{width:100%}
@media (max-width:560px){.fcs-card{aspect-ratio:4/5;max-height:56vh}.fcs-tip{display:none}}

/* the 'Not set yet' label only shows while the date box is empty */
.input:not(.nodate) + .td-none,.input.nodate:focus + .td-none{display:none}
/* pictures cut from the study guide (math and drawings) */
.q-img{display:block;max-width:min(100%,520px);max-height:200px;margin:4px auto 14px;border-radius:12px;background:#fff;padding:6px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.q-img.sm{max-height:110px;margin:6px 0;padding:4px}
.ed-picq{display:flex;flex-direction:column;gap:6px;font-size:14px;color:#fff}
.ed-picq img{max-width:100%;max-height:120px;border-radius:10px;background:#fff;padding:4px;align-self:flex-start}
.fcs-pic{max-width:90%;max-height:34%;border-radius:10px;background:#fff;padding:4px}
.ar-ctx .ar-play{white-space:nowrap}
/* ---------- quiz launch screen ---------- */
.overlay.qiov{justify-content:flex-start;padding:0;gap:0;overflow-y:auto;background:#0B0E33}
.overlay.qiov::before{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(10,12,50,.55),rgba(14,16,64,.35) 40%,rgba(8,10,40,.75)),url(../img/home/hero-bg.webp) center 30%/cover no-repeat;z-index:-1}
.overlay.qiov.out{opacity:0;transform:scale(1.04);transition:opacity .22s,transform .22s}
.qi{width:100%;max-width:1000px;min-height:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.6vh,16px);padding:max(12px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom))}
.qi-bar{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:start}
.qi-back{justify-self:start;padding:9px 18px;border-radius:999px;border:2px solid rgba(110,150,255,.75);background:rgba(10,16,60,.6);color:#fff;font:700 15px/1 var(--f-body);cursor:pointer}
.qi-back:hover{background:rgba(40,70,190,.6)}
.qi-logo{height:clamp(40px,5vw,62px);filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}
.qi-mode{display:inline-flex;align-items:center;gap:10px;padding:9px 26px;border-radius:999px;font:900 clamp(17px,2vw,24px)/1 var(--f-display);text-transform:uppercase;color:#fff;letter-spacing:.02em;
  background:rgba(20,26,90,.85);border:2.5px solid #8C6BFF;box-shadow:0 0 18px rgba(140,107,255,.65),inset 0 0 12px rgba(140,107,255,.35);animation:up .4s both}
.qi-mode.bt{border-color:#FF5C7A;box-shadow:0 0 18px rgba(255,92,122,.6)}.qi-mode.sp{border-color:#FFB020;box-shadow:0 0 18px rgba(255,176,32,.6)}
.qi-mode.wu{border-color:#2DD4A0;box-shadow:0 0 18px rgba(45,212,160,.6)}.qi-mode.rd{border-color:#FFD23F;box-shadow:0 0 18px rgba(255,210,63,.6)}.qi-mode.ch{border-color:#3DA0FF;box-shadow:0 0 18px rgba(61,160,255,.6)}
.qi-title{position:relative;margin:0;text-align:center;font:900 clamp(30px,5vw,60px)/1.05 var(--f-display)!important;font-style:italic!important;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.35),0 0 24px rgba(120,150,255,.4);animation:up .45s .1s both;max-width:90vw}
.qi-title::before,.qi-title::after{content:"";position:absolute;top:50%;width:clamp(30px,6vw,80px);height:6px;border-radius:6px;background:linear-gradient(90deg,transparent,#B57CFF);filter:drop-shadow(0 0 6px #A06BFF)}
.qi-title::before{right:calc(100% + 14px);rotate:-14deg}.qi-title::after{left:calc(100% + 14px);rotate:14deg;background:linear-gradient(270deg,transparent,#B57CFF)}
.qi-chips{display:flex;gap:clamp(8px,1.6vw,18px);flex-wrap:wrap;justify-content:center;animation:up .45s .2s both}
.qi-chips span{display:inline-flex;align-items:center;gap:9px;padding:9px clamp(14px,2vw,26px);border-radius:999px;background:rgba(14,20,72,.75);border:2px solid rgba(120,150,255,.55);font:800 clamp(14px,1.5vw,19px)/1 var(--f-display);color:#fff}
.qi-chips i{font-style:normal;font-size:1.15em}
.qi-mid{position:relative;width:100%;display:flex;align-items:center;justify-content:center;margin-top:clamp(4px,1vh,12px)}
.qi-rip{position:relative;z-index:2;width:clamp(150px,24vw,340px);margin-right:clamp(-120px,-8vw,-40px);filter:drop-shadow(0 0 22px rgba(100,170,255,.6)) drop-shadow(0 14px 18px rgba(0,0,0,.45));animation:qiRip .7s .25s cubic-bezier(.3,1.4,.5,1) both}
@keyframes qiRip{from{opacity:0;transform:translateX(-40px) rotate(-8deg) scale(.85)}}
.qi-card{position:relative;z-index:1;flex:0 1 560px;padding:clamp(16px,2.4vw,28px) clamp(18px,3vw,36px) clamp(16px,2.4vw,26px) clamp(70px,9vw,120px);border-radius:24px;
  background:linear-gradient(160deg,rgba(28,40,120,.92),rgba(14,20,72,.94));border:2.5px solid rgba(120,160,255,.7);box-shadow:0 0 26px rgba(90,140,255,.45);transform:skewX(-4deg);animation:up .5s .3s both}
.qi-card > *{transform:skewX(4deg)}
.qi-ready{margin:0 0 10px;text-align:center;font:900 clamp(26px,3.4vw,44px)/1.05 var(--f-display);font-style:italic;color:#fff}
.qi-ready span{display:inline-block;background:linear-gradient(180deg,#FFFBD0,#FFE34D 35%,#FFC400 70%,#FFA800);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.1em;filter:drop-shadow(0 3px 0 rgba(150,80,0,.7))}
.qi-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.qi-list li{display:flex;align-items:center;gap:12px;font:600 clamp(15px,1.6vw,20px)/1.25 var(--f-body);color:#E6ECFF}
.qi-list i{font-style:normal;font-size:1.3em;width:1.4em;text-align:center}
.qi-pack{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;background:rgba(8,12,48,.6);border:1.5px solid rgba(120,150,255,.45)}
.qi-pack .rpack.small{width:clamp(34px,3.6vw,48px)}
.qi-pack > div{flex:1;min-width:0}
.qi-pack p{margin:0 0 6px;font:700 clamp(14px,1.5vw,18px)/1.25 var(--f-body);color:#fff}.qi-pack b{color:#FFD23F}
.qi-pbar{display:block;height:12px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.qi-pbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#FFC21A,#FFE34D);box-shadow:0 0 10px rgba(255,210,63,.6)}
.qi-who{display:flex;align-items:center;gap:12px;padding:6px 24px 6px 6px;border-radius:999px;background:rgba(14,20,72,.85);border:2px solid rgba(160,110,255,.7);box-shadow:0 0 16px rgba(160,110,255,.4);animation:up .45s .4s both}
.qi-who .avatar,.qi-who img{border:3px solid #2DD4A0;border-radius:50%}
.qi-who b{font:900 clamp(18px,2vw,24px)/1 var(--f-display);font-style:italic;text-transform:uppercase;color:#fff}
.qi-who small{font:800 clamp(14px,1.5vw,18px)/1 var(--f-display);font-style:italic;color:#FFD23F}
.qi-who small::before{content:"•";color:#fff;margin-right:10px}
.qi-go{min-width:min(560px,88vw);min-height:clamp(62px,8vh,80px);border-radius:999px;font:900 clamp(26px,3.4vw,44px)/1 var(--f-display)!important;font-style:italic;letter-spacing:.01em;
  box-shadow:0 7px 0 #B57A00,0 0 36px rgba(255,200,40,.6)!important;animation:up .45s .5s both,qiPulse 2.2s 1.2s ease-in-out infinite}
@keyframes qiPulse{50%{box-shadow:0 7px 0 #B57A00,0 0 56px rgba(255,210,60,.9)}}
.qi-foot{display:flex;align-items:center;gap:clamp(10px,2vw,22px);flex-wrap:wrap;justify-content:center;font:800 clamp(14px,1.5vw,18px)/1 var(--f-display);color:#fff;animation:up .45s .6s both}
.qi-foot > span{display:inline-flex;align-items:center;gap:8px}.qi-foot > i{width:2px;height:24px;background:rgba(255,255,255,.3)}
.qi-foot .coin{width:28px;height:28px}.qi-foot .rpack.small{width:24px}
.qi-xp{display:inline-grid;place-items:center;width:32px;height:28px;border-radius:8px;background:linear-gradient(180deg,#B57CFF,#6A2FE0);font:900 13px/1 var(--f-display);color:#fff;box-shadow:0 0 8px rgba(160,110,255,.6)}
@media (max-width:640px){.qi-title::before,.qi-title::after{display:none}.qi-mid{flex-direction:column}.qi-rip{width:150px;margin:0 0 -34px}.qi-card{padding:28px 18px 16px;transform:none}.qi-card > *{transform:none}
  .qi-back{font-size:13px;padding:8px 12px}.qi-logo{height:36px}}
@media (max-height:760px) and (min-width:641px){.qi-rip{width:clamp(130px,18vw,230px)}.qi-ready{font-size:clamp(22px,2.8vw,34px)}.qi-list{gap:4px;margin-bottom:8px}}
.qi-pack .rpack.small,.qi-pack .rpack{width:clamp(34px,3.4vw,46px)!important;flex:none}
.qi-foot .rpack.small,.qi-foot .rpack{width:22px!important;flex:none}
.qi-card{flex-basis:640px;padding-left:clamp(60px,7vw,100px)}
.qi-list li{text-align:left}
.qi-go{border-radius:999px!important;border:0!important}
.qi-go:focus{outline:none}.qi-go:focus-visible{outline:3px solid #fff;outline-offset:5px}
.qi-pack p{text-align:left}
.qi-rip{margin-right:clamp(-90px,-6vw,-30px)}
@media (max-width:640px){.qi-rip{margin:0 0 -34px}}
@media (max-width:640px){.qi-card{flex:none;width:100%}}
@media (max-height:760px) and (min-width:641px){.qi{gap:6px}.qi-title{font-size:clamp(28px,4vw,46px)!important}.qi-mode{padding:7px 20px;font-size:17px}.qi-chips span{padding:7px 16px}
  .qi-card{padding-top:12px;padding-bottom:12px}.qi-go{min-height:56px;font-size:30px!important}.qi-who{padding-top:4px;padding-bottom:4px}.qi-who .avatar{width:44px!important;height:44px!important}}
/* ---------- quiz screen (v3 look) ---------- */
body.playing{background:#0B0E33}
body.playing::after{content:"";position:fixed;inset:0;height:auto;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(10,12,50,.72),rgba(14,16,64,.5) 45%,rgba(8,10,40,.82)),url(../img/home/hero-bg.webp) center 35%/cover no-repeat}
.play.qz{gap:clamp(10px,1.6vh,16px);padding-top:6px}
.qz-top{border-bottom:0;gap:clamp(8px,1.4vw,18px);padding:4px 0 0;flex-wrap:nowrap}
.qz-exit{border-radius:999px;border:2px solid rgba(110,150,255,.75);background:rgba(10,16,60,.6);min-height:44px;padding:0 18px;flex:none}
.qz-top .qz-prog{flex:1;min-width:0;display:flex;align-items:center;gap:14px;padding:10px 20px;border-radius:999px;background:rgba(10,16,60,.6);border:2px solid rgba(110,150,255,.45);box-shadow:0 0 16px rgba(80,120,255,.25)}
.qz-top .qcount{font:800 clamp(14px,1.4vw,18px)/1 var(--f-display);white-space:nowrap}
.qz-top .qz-bar{height:12px}
.qz-me{flex:none;gap:12px;padding:6px 8px 6px 16px;border-radius:999px;background:rgba(10,16,60,.6);border:2px solid rgba(110,150,255,.45)}
.qz-streak svg{width:26px;height:26px}.qz-streak b{font-size:22px}.qz-streak small{font-size:11px;letter-spacing:0;text-transform:none;color:#fff;font-weight:800}
.qz-sep{width:2px;height:30px;background:rgba(160,180,255,.35)}
.qz-me .qz-xp{border:2px solid #FFC21A;background:rgba(0,0,0,.35);height:40px}
.qz-combo:empty{display:none}.qz-combo{align-self:center}
/* pack strip: a slim pill */
.play.qz .qz-pack{align-self:center;width:min(760px,100%);padding:6px 18px 6px 10px;border-radius:999px;border:2px solid rgba(90,150,255,.65);background:rgba(10,16,60,.62);box-shadow:0 0 16px rgba(80,140,255,.3)}
.play.qz .qz-pack .rpack.small{width:40px;margin:-14px 0}
.play.qz .qz-pack p{font:700 clamp(14px,1.5vw,18px)/1.25 var(--f-body);color:#fff}.play.qz .qz-pack p b{font:900 clamp(16px,1.7vw,20px)/1 var(--f-display);color:#FFD23F}
.play.qz .qz-pack small{display:none}
.qz-dots i{width:16px;height:16px}
/* the question card: glowing frame, big centered italic question */
.play.qz .card.qcard{align-self:center;width:min(1080px,100%);padding:clamp(18px,2.6vw,34px) clamp(16px,3vw,44px);border-radius:30px;background:linear-gradient(180deg,rgba(24,34,110,.9),rgba(14,20,72,.92));
  border:2.5px solid rgba(130,170,255,.85);box-shadow:0 0 0 1px rgba(160,120,255,.35),0 0 34px rgba(110,140,255,.55),inset 0 0 30px rgba(110,140,255,.18);gap:clamp(12px,1.8vh,18px)}
.play.qz .qkind{display:none}
.play.qz .qtext{text-align:center;font:900 clamp(26px,3.6vw,52px)/1.1 var(--f-display);font-style:italic;text-shadow:0 3px 0 rgba(0,0,0,.3)}
.play.qz .qz-help{text-align:center}
.play.qz .quote{display:flex;align-items:stretch;padding:0;border:2px solid rgba(130,160,255,.6);border-radius:999px;background:rgba(8,12,48,.55);overflow:hidden}
.qlab{flex:none;display:flex;align-items:center;padding:0 clamp(16px,2vw,28px) 0 clamp(18px,2.2vw,30px);background:linear-gradient(180deg,#FFE34D,#FFC21A);color:#1C1300;font:900 clamp(14px,1.6vw,22px)/1 var(--f-display);font-style:italic;letter-spacing:.02em;
  clip-path:polygon(0 0,100% 0,88% 100%,0 100%);margin-right:-6px}
.qq{flex:1;min-width:0;padding:12px clamp(16px,2.4vw,30px) 12px clamp(18px,2.4vw,30px);border-left:4px solid #FFC21A;margin-left:10px;font:700 clamp(17px,2vw,28px)/1.35 var(--f-body);font-style:italic;color:#fff;text-align:center}
.qq::before{content:"“"}.qq::after{content:"”"}
/* answers: slimmer rows with square letter tiles */
.play.qz .choices{gap:clamp(8px,1.2vh,12px)}
.play.qz .choice,.play.qz .tf .choice{min-height:clamp(54px,7vh,70px)!important;border-radius:16px!important;border:2px solid rgba(110,150,255,.55)!important;background:linear-gradient(180deg,rgba(40,70,170,.7),rgba(24,40,110,.75))!important}
.play.qz .choice .k{width:clamp(40px,4vw,50px)!important;height:clamp(40px,4vw,50px)!important;border-radius:12px!important;background:rgba(8,12,48,.6)!important;border:2px solid rgba(160,190,255,.7)!important;font:900 clamp(18px,2vw,24px)/1 var(--f-display)!important}
.play.qz .choice .t{font:800 clamp(18px,2.2vw,30px)/1.2 var(--f-display)!important}
/* QuizTip: a full-width bar with a yellow "Use QuizTip" button at the end */
.play.qz .qz-foot{justify-content:center}
.play.qz .hintbtn{width:100%;display:flex;align-items:center;gap:14px;padding:8px 8px 8px 22px;border-radius:999px;border:2px solid rgba(130,160,255,.55);background:rgba(8,12,48,.55);min-height:60px}
.play.qz .hintbtn .hb{font-size:28px}.play.qz .hintbtn .hn{font:900 clamp(18px,2vw,24px)/1 var(--f-display);font-style:italic}
.play.qz .hintbtn .hleft{padding:6px 14px;border-radius:999px;background:rgba(40,90,220,.5);border:2px solid #4F8BFF}
.play.qz .hintbtn small{flex:1;text-align:left;padding-left:14px;border-left:2px solid rgba(160,180,255,.35);font-size:clamp(13px,1.4vw,17px);font-weight:700;color:#fff}
.hint-use{flex:none;padding:12px 26px;border-radius:999px;background:linear-gradient(180deg,#FFE34D,#FFC21A);color:#1C1300;font:900 clamp(16px,1.8vw,22px)/1 var(--f-display);font-style:italic;box-shadow:0 4px 0 #B57A00,0 0 18px rgba(255,200,40,.45)}
.play.qz .hintbtn:hover:not(:disabled) .hint-use{filter:brightness(1.08)}
.play.qz .hintbtn:disabled .hint-use{display:none}
.play.qz .qz-next{border-radius:999px}
@media (max-width:760px){.qz-top{flex-wrap:wrap}.qz-top .qz-prog{order:3;flex-basis:100%}.qz-me{margin-left:auto}.qz-logo img{height:30px}
  .play.qz .quote{border-radius:18px;flex-direction:column}.qlab{clip-path:none;padding:8px 14px;margin:0;justify-content:center}.qq{border-left:0;margin:0;padding:10px 14px}
  .play.qz .hintbtn{flex-wrap:wrap;border-radius:18px;padding:10px 12px}.play.qz .hintbtn small{flex-basis:100%;order:5;border:0;padding:4px 0 0}.hint-use{margin-left:auto;padding:10px 18px}}
.qz-top .qcount{color:#fff}
@media (max-height:780px) and (min-width:761px){.play.qz{gap:8px}.play.qz .qtext{font-size:clamp(24px,3vw,40px)}.play.qz .choice,.play.qz .tf .choice{min-height:50px!important}
  .play.qz .choice .k{width:38px!important;height:38px!important}.play.qz .choice .t{font-size:clamp(17px,1.9vw,24px)!important}.play.qz .card.qcard{padding-top:16px;padding-bottom:16px;gap:10px}.play.qz .hintbtn{min-height:52px}.hint-use{padding:10px 20px}}
/* ---------- quiz screen: calmer sizes and wider margins ---------- */
.play.qz .card.qcard{width:min(880px,100%);padding:clamp(16px,2.2vw,28px) clamp(16px,2.6vw,36px);gap:clamp(10px,1.4vh,14px)}
.play.qz .qtext{font-size:clamp(22px,2.7vw,38px)}
.play.qz .qq{font-size:clamp(16px,1.6vw,22px)}.qlab{font-size:clamp(13px,1.3vw,18px)}
.play.qz .choice,.play.qz .tf .choice{min-height:clamp(48px,6vh,60px)!important;padding-top:8px!important;padding-bottom:8px!important;gap:14px!important}
.play.qz .choice .k{width:clamp(34px,3.2vw,42px)!important;height:clamp(34px,3.2vw,42px)!important;font-size:clamp(16px,1.6vw,20px)!important}
.play.qz .choice .t{font-size:clamp(16px,1.7vw,22px)!important;line-height:1.3!important}
.play.qz .hintbtn{min-height:52px}.play.qz .hintbtn .hn{font-size:clamp(16px,1.7vw,20px)}.hint-use{padding:10px 20px;font-size:clamp(15px,1.5vw,18px)}
.play.qz .qz-pack{width:min(700px,100%)}
/* right answer: Rip cheers next to it */
.qz-fb.good.show{position:relative;padding:14px 20px 14px 18px;border-radius:22px;overflow:visible}
.qz-fbrip{gap:16px}
.qz-fbr{flex:none;width:clamp(78px,9vw,120px);margin:-38px 0 -18px -8px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));animation:fbrip .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes fbrip{from{opacity:0;transform:translateY(20px) scale(.8) rotate(-6deg)}}
.qz-fb.good .qz-big{display:flex;align-items:center;gap:10px;font-size:clamp(24px,2.6vw,34px);font-style:italic;background:none;-webkit-background-clip:initial;background-clip:initial;color:#fff}
.qz-ok.sm{width:36px;height:36px;box-shadow:0 0 0 4px rgba(45,212,160,.25)}.qz-ok.sm svg{width:20px;height:20px}
.qz-fb.good .qz-sm{font-size:clamp(14px,1.4vw,17px);color:#E3FFF4}
.qz-fb.good .qz-gain{flex-direction:column;gap:2px;padding:0 6px 0 18px;border-left:2px solid rgba(120,240,190,.3)}
.qz-fb.good .qz-gain svg{width:24px;height:30px}.qz-fb.good .qz-gain b{font-size:clamp(22px,2.4vw,30px)}.qz-fb.good .qz-gain small{display:none}
.play.qz .qz-next.good{background:linear-gradient(180deg,#FFE34D,#FFC21A)!important;color:#1C1300!important;box-shadow:0 5px 0 #B57A00!important;border:0!important}
@media (max-width:640px){.qz-fbr{width:70px;margin:-30px 0 -10px -6px}.qz-fb.good .qz-gain{padding-left:10px}}
/* ---------- Home: big test countdown ---------- */
.h3-testbig{display:flex;align-items:center;gap:16px;margin:0 0 14px;padding:10px 16px 10px 10px;border-radius:18px;background:linear-gradient(90deg,rgba(49,100,244,.55),rgba(20,30,90,.6));border:2px solid rgba(140,170,255,.75);box-shadow:0 0 20px rgba(80,130,255,.35)}
.h3-testbig.soon{background:linear-gradient(90deg,rgba(255,140,40,.6),rgba(90,30,20,.55));border-color:#FFB27A;box-shadow:0 0 22px rgba(255,122,58,.5)}
.h3-testbig.now{background:linear-gradient(90deg,#FF7A3A,#E24A1A);border-color:#FFD2A8;box-shadow:0 0 28px rgba(255,100,40,.7);animation:h3pulse 1.8s ease-in-out infinite}
.tb-cal{flex:none;width:64px;border-radius:12px;overflow:hidden;background:#fff;text-align:center;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.tb-cal small{display:block;background:#E8433A;color:#fff;font:900 13px/1.6 var(--f-display);letter-spacing:.06em}
.tb-cal b{display:block;color:#1A1A2E;font:900 30px/1.25 var(--f-display)}
.tb-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tb-tx b{font:900 clamp(22px,2.6vw,34px)/1 var(--f-display);font-style:italic;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.25)}
.tb-tx small{font-size:clamp(13px,1.3vw,16px);font-weight:700;color:#FFF3E0}
.tb-count{flex:none;display:flex;flex-direction:column;align-items:center;padding:6px 14px;border-radius:14px;background:rgba(0,0,0,.25)}
.tb-count b{font:900 32px/1 var(--f-display);color:#FFE27A}.tb-count small{font-size:12px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.04em}
@media (max-width:520px){.tb-cal{width:52px}.tb-cal b{font-size:24px}.tb-count{padding:4px 10px}.tb-count b{font-size:24px}}
.qz-fb.good .qz-gain b{white-space:nowrap}.play.qz .qz-pack p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width:640px){.play.qz .qz-pack p{white-space:normal}}
.tb-tx b{font-size:clamp(18px,1.9vw,28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.tb-tx b{white-space:normal;font-size:18px}
  .qz-fb.good .qz-fbh.qz-fbrip{flex-direction:row!important;align-items:center;flex-wrap:nowrap;gap:10px}.qz-fbr{width:60px;margin:-26px 0 -8px -6px}
  .qz-fb.good .qz-gain{flex-direction:column!important;padding:0 0 0 8px!important;border-left:2px solid rgba(120,240,190,.3)!important;border-top:0!important;align-self:center}
  .qz-fb.good .qz-gain b{font-size:18px}.qz-fb.good .qz-big{font-size:20px}}
/* ---------- results screen (v3 look) ---------- */
body:has(.res.rs){background:#0B0E33}
body:has(.res.rs)::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(10,12,50,.65),rgba(14,16,64,.45) 45%,rgba(8,10,40,.8)),url(../img/home/hero-bg.webp) center 35%/cover no-repeat}
.res.rs{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(12px,1.8vh,18px);color:#fff}
.rs-head{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,24px);padding-top:6px}
.rs-rip{width:clamp(130px,19vw,240px);flex:none;margin-right:clamp(4px,1vw,12px);filter:drop-shadow(0 0 24px rgba(100,170,255,.55)) drop-shadow(0 12px 16px rgba(0,0,0,.4));animation:qiRip .6s .1s cubic-bezier(.3,1.4,.5,1) both}
.rs-main{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.rs-eye{font:800 clamp(12px,1.3vw,16px)/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:#C9D8FF}
.rs-h{margin:0;text-align:center;font:900 clamp(30px,4.6vw,58px)/1.05 var(--f-display)!important;font-style:italic!important;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.35)}
.rs-h span{background:linear-gradient(180deg,#FFFBD0,#FFE34D 35%,#FFC400 70%,#FFA800);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.12em;filter:drop-shadow(0 3px 0 rgba(150,80,0,.7))}
.rs-score{display:flex;align-items:center;margin-top:4px}
.rs-shield{position:relative;z-index:2;width:clamp(110px,13vw,160px);aspect-ratio:.9;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%,#5B3AE8,#2A1580 70%);clip-path:polygon(50% 0,100% 14%,96% 58%,50% 100%,4% 58%,0 14%);filter:drop-shadow(0 0 0 #FFC21A);animation:pop .55s .2s cubic-bezier(.2,.9,.3,1.6) both}
.rs-shield::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#FFE34D,#E89A00);clip-path:polygon(50% 0,100% 14%,96% 58%,50% 100%,4% 58%,0 14%,8% 18%,11% 56%,50% 91%,89% 56%,92% 18%,50% 8.5%,8% 18%);z-index:-1}
.rs-shield b{font:900 clamp(40px,5vw,62px)/1 var(--f-display);font-style:italic;background:linear-gradient(180deg,#FFFBD0,#FFE34D 40%,#FFB800);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(120,60,0,.8));margin-top:-8%}
.rs-shield.gc,.rs-shield.gd{background:radial-gradient(circle at 50% 35%,#3A6AE8,#152A80 70%)}
.rs-pct{margin-left:clamp(-26px,-2vw,-14px);padding:10px 30px 10px clamp(34px,3.6vw,46px);border-radius:0 22px 22px 0;background:linear-gradient(90deg,rgba(40,30,120,.95),rgba(20,24,80,.92));border:2.5px solid #9B6BFF;border-left:0;box-shadow:0 0 22px rgba(155,107,255,.55);transform:skewX(-8deg)}
.rs-pct > *{transform:skewX(8deg)}
.rs-pct b{display:block;font:900 clamp(38px,4.6vw,60px)/1 var(--f-display);font-style:italic}
.rs-pct small{display:flex;align-items:center;gap:8px;font:800 clamp(14px,1.5vw,19px)/1.2 var(--f-display);color:#E6ECFF}
.rs-pct small i{font-style:normal;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#16B987;color:#fff;font-size:14px}
.rs-stats{display:grid;grid-template-columns:repeat(3,1fr);padding:10px 0;border-radius:20px;background:rgba(10,16,60,.72);border:2px solid rgba(110,150,255,.6);box-shadow:0 0 18px rgba(80,130,255,.3)}
.rs-stats > div{display:flex;align-items:center;justify-content:center;gap:12px;padding:4px 8px}
.rs-stats > div + div{border-left:2px solid rgba(140,170,255,.3)}
.rs-stats i{font-style:normal;font-size:clamp(24px,2.6vw,34px)}
.rs-stats b{display:block;font:900 clamp(18px,2vw,26px)/1.1 var(--f-display)}.rs-stats small{font-size:clamp(12px,1.2vw,15px);color:#C9D4FF;font-weight:700}
/* needs work */
.rs-work{position:relative;display:flex;align-items:center;gap:8px;padding:14px clamp(14px,2.4vw,28px) 14px 8px;border-radius:24px;background:linear-gradient(160deg,rgba(28,40,120,.92),rgba(14,20,72,.94));border:2.5px solid rgba(150,130,255,.75);box-shadow:0 0 24px rgba(130,110,255,.4)}
.rs-wrip{flex:none;width:clamp(100px,13vw,170px);margin:-34px 0 -18px -14px;filter:drop-shadow(0 0 16px rgba(100,170,255,.5))}
.rs-wbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.rs-wt{display:flex;align-items:center;gap:12px}.rs-wt > i{font-style:normal;font-size:clamp(30px,3.4vw,44px)}
.rs-wt b{display:block;font:900 clamp(20px,2.6vw,34px)/1.1 var(--f-display);font-style:italic}.rs-wt b span{color:#FFD23F}
.rs-wt small{display:block;font-size:clamp(13px,1.4vw,17px);color:#C9D8FF;font-weight:600}
.rs-wbtns{display:flex;gap:12px;flex-wrap:wrap}
.rs-wbtns .btn{flex:1;min-width:180px;min-height:54px;border-radius:999px;font:900 clamp(16px,1.8vw,22px)/1 var(--f-display)!important}
.rs-review{background:rgba(10,16,60,.6)!important;border:2.5px solid #4F8BFF!important;color:#fff!important;box-shadow:0 0 14px rgba(79,139,255,.35)!important}
.rs-redeem{font-style:italic}
/* progress */
.rs-prog{padding:clamp(14px,2vw,22px);border-radius:24px;background:linear-gradient(160deg,rgba(20,30,100,.9),rgba(12,18,64,.94));border:2px solid rgba(110,150,255,.6);display:flex;flex-direction:column;gap:12px}
.rs-prog h2{margin:0;font:900 clamp(20px,2.2vw,28px)/1 var(--f-display);font-style:italic}
.rs-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rs-two .card.rcard{margin:0;padding:12px 16px;border-radius:18px;background:rgba(8,12,48,.6);border:1.5px solid rgba(120,150,255,.35);box-shadow:none}
.rs-rew{display:flex;align-items:center;gap:clamp(10px,2vw,22px);flex-wrap:wrap;padding:10px 12px 10px 18px;border-radius:999px;background:rgba(8,12,48,.6);border:1.5px solid rgba(120,150,255,.35);font:800 clamp(14px,1.5vw,18px)/1 var(--f-display)}
.rs-rew > span{display:inline-flex;align-items:center;gap:7px}.rs-rew i{font-style:normal}.rs-rew .coin{width:24px;height:24px}
.rs-rl{font:700 clamp(13px,1.3vw,16px)/1 var(--f-body)!important;color:#C9D4FF}
.rs-rp{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#7B45EE;font:900 11px/1 var(--f-display);color:#fff}
.rs-pill{margin-left:auto;display:inline-flex!important;align-items:center;gap:10px;padding:6px 18px 6px 8px;border-radius:999px;background:rgba(20,40,120,.7);border:2px solid rgba(120,160,255,.7)}
.rs-pill.done{background:rgba(6,60,48,.85);border-color:#2DD4A0;box-shadow:0 0 14px rgba(45,212,160,.4)}
.rs-pill > i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#16B987;color:#fff;font-size:15px}
.rs-pill:not(.done) > i{background:none;font-size:20px}
.rs-pill b{display:block;font-size:clamp(13px,1.3vw,16px)}.rs-pill small{display:block;font:700 12px/1.2 var(--f-body);color:#C9F5E4}
.rs-lost{margin:-4px 0 0 18px;font-size:13px;color:#FF9AB0}
.rs .negv{color:#FF7A90}
/* actions */
.rs-acts{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:4px}
.rs-acts .btn{border-radius:999px!important;font:900 clamp(18px,2vw,26px)/1 var(--f-display)!important;font-style:italic}
.rs-again{width:min(620px,100%);min-height:clamp(60px,8vh,76px);font-size:clamp(24px,3vw,38px)!important}
.rs-again i{font-style:normal;margin-right:8px}
.rs-acts2{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(620px,100%)}.rs-acts2 .btn{min-height:58px}
.rs-back{align-self:center;background:none;border:0;color:#C9D8FF;font:800 clamp(15px,1.6vw,19px)/1 var(--f-display);padding:8px 12px;cursor:pointer}.rs-back:hover{color:#fff}
.rs .res-ripnow{border-radius:22px}
@media (max-width:700px){.rs-head{flex-direction:column}.rs-rip{width:130px;margin:0 0 -30px}.rs-two{grid-template-columns:1fr}.rs-work{flex-direction:column;align-items:stretch;padding:12px 14px}
  .rs-wrip{width:100px;margin:-30px auto -10px}.rs-pill{margin-left:0}.rs-rew{border-radius:18px}.rs-stats > div{flex-direction:column;gap:2px;text-align:center}}
.rs-two{align-items:start}.rs-acts2 .btn{white-space:nowrap;font-size:clamp(16px,1.8vw,24px)!important;padding-inline:12px}
@media (max-width:700px){.rs-rip{width:120px;margin:0 0 -4px}.rs-acts2 .btn{font-size:15px!important}}
/* ---------- quiz page (Choose Your Mode) ---------- */
body:has(.gv){background:#0B0E33}
body:has(.gv)::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(10,12,50,.6),rgba(14,16,64,.5) 45%,rgba(8,10,40,.85)),url(../img/home/hero-bg.webp) center 35%/cover no-repeat}
.gv{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:18px;color:#fff;padding-top:8px}
.gv-head{display:flex;align-items:center;gap:16px}
.gv-ic{font-size:clamp(40px,4.6vw,62px);filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.gv-head h1{margin:0;font:900 clamp(28px,3.8vw,50px)/1.05 var(--f-display);color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.3)}
.gv-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.gv-chips span{padding:6px 16px;border-radius:999px;background:rgba(14,20,72,.75);border:2px solid rgba(120,150,255,.55);font:800 clamp(13px,1.4vw,17px)/1 var(--f-display)}
.gv-chips .mst{border-color:#2DD4A0;color:#7FFFD0;box-shadow:0 0 12px rgba(45,212,160,.35)}
.gv-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
.gv-main{display:flex;flex-direction:column;gap:12px;padding:clamp(16px,2.2vw,26px);border-radius:26px;background:linear-gradient(170deg,rgba(24,34,110,.92),rgba(14,20,72,.94));border:2.5px solid rgba(110,150,255,.7);box-shadow:0 0 26px rgba(90,130,255,.35)}
.gv-main h2{margin:0;font:900 clamp(22px,2.4vw,30px)/1 var(--f-display)}.gv-main h3{margin:6px 0 0;font:900 clamp(17px,1.8vw,22px)/1 var(--f-display)}
.gv-modes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gv-mode{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;border-radius:18px;background:rgba(8,12,48,.55);border:2px solid rgba(120,150,255,.4);color:#fff;text-align:center;cursor:pointer;transition:transform .15s,border-color .15s}
.gv-mode:hover{transform:translateY(-2px);border-color:rgba(160,190,255,.8)}
.gv-mode i{font-style:normal;font-size:clamp(28px,3vw,38px)}.gv-mode b{font:900 clamp(16px,1.7vw,21px)/1 var(--f-display)}.gv-mode small{font-size:clamp(12px,1.2vw,14px);color:#C9D4FF;line-height:1.3}
.gv-mode[aria-pressed="true"]{background:linear-gradient(180deg,#2F6BFF,#1A44C8);border-color:#9CC2FF;box-shadow:0 0 0 2px rgba(156,194,255,.35),0 0 20px rgba(60,120,255,.6)}
.gv-mode.speed[aria-pressed="true"]{background:linear-gradient(180deg,#FF9A2E,#C9620A);border-color:#FFD08A;box-shadow:0 0 20px rgba(255,150,40,.55)}
.gv-mode.battle[aria-pressed="true"]{background:linear-gradient(180deg,#8B5CF6,#5B2BC8);border-color:#C8B0FF;box-shadow:0 0 20px rgba(140,90,255,.6)}
.gv-mode.warm[aria-pressed="true"]{background:linear-gradient(180deg,#22C38E,#0F8A62);border-color:#8FF0CC;box-shadow:0 0 20px rgba(45,212,160,.55)}
.gv-mode[aria-pressed="true"] small{color:#fff}
.gv-rec{display:flex;align-items:center;gap:6px;margin-top:4px}
.gv-rip{flex:none;width:clamp(80px,9vw,120px);margin:-8px -14px -8px -6px;position:relative;z-index:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.gv-rec p{flex:1;margin:0;padding:12px 18px 12px 26px;border-radius:999px;background:rgba(8,12,48,.6);border:2px solid rgba(160,130,255,.6)}
.gv-rec b{display:block;font:900 clamp(15px,1.6vw,20px)/1.2 var(--f-display)}.gv-rec b span{color:#FFD23F}.gv-rec small{display:block;color:#C9D8FF;font-size:clamp(13px,1.3vw,15px)}
.gv-types{display:flex;gap:10px;flex-wrap:wrap}
.gv-type{flex:1;min-width:140px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 16px;border-radius:999px;background:rgba(8,12,48,.55);border:2px solid rgba(120,150,255,.45);color:#C9D4FF;font:800 clamp(15px,1.5vw,18px)/1 var(--f-display);cursor:pointer}
.gv-type i{width:20px;height:20px;border-radius:50%;border:2.5px solid currentColor;display:grid;place-items:center;font-style:normal}
.gv-type[aria-pressed="true"]{color:#fff;border-color:#2DD4A0;background:rgba(6,60,48,.6);box-shadow:0 0 12px rgba(45,212,160,.35)}
.gv-type[aria-pressed="true"] i{border:0}.gv-type[aria-pressed="true"] i::before{content:"✓";color:#2DD4A0;font-size:20px;font-weight:900}
.gv-type:disabled{opacity:.45;cursor:not-allowed}
.gv-len{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.gv-seg{display:flex;border-radius:16px;overflow:hidden;border:2px solid rgba(120,150,255,.45);background:rgba(8,12,48,.55)}
.gv-seg button{min-width:64px;min-height:48px;padding:0 16px;background:none;border:0;border-right:1.5px solid rgba(120,150,255,.3);color:#fff;font:900 clamp(16px,1.7vw,20px)/1 var(--f-display);cursor:pointer}
.gv-seg button:last-child{border-right:0}
.gv-seg button[aria-pressed="true"]{background:linear-gradient(180deg,#3D7BFF,#1F52E0);box-shadow:inset 0 0 0 2px #9CC2FF}
.gv-time{padding-left:16px;border-left:2px solid rgba(140,170,255,.3);color:#E6ECFF;font-weight:700;font-size:clamp(14px,1.4vw,17px)}
.gv-go{margin-top:8px;min-height:clamp(58px,7vh,70px);border-radius:999px!important;font:900 clamp(22px,2.6vw,32px)/1 var(--f-display)!important;box-shadow:0 6px 0 #B57A00,0 0 30px rgba(255,200,40,.45)!important}
.gv-links{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.gv-link{background:none;border:0;color:#E6ECFF;font:800 clamp(14px,1.5vw,18px)/1 var(--f-display);text-decoration:underline;text-underline-offset:5px;cursor:pointer;padding:6px 4px}
.gv-link:hover{color:#fff}.gv-link.del{color:#FF9AB0}
.gv-note{margin:0;font-size:14px;color:#C9D4FF}.gv-note.c{text-align:center}
/* right column */
.gv-side{display:flex;flex-direction:column;gap:14px}
.gv-card{padding:16px 18px;border-radius:22px;background:linear-gradient(170deg,rgba(24,34,110,.9),rgba(14,20,72,.92));border:2px solid rgba(110,150,255,.6);color:#fff}
.gv-card h3{margin:0;font:900 clamp(18px,1.9vw,24px)/1 var(--f-display)}
.gv-ch{display:flex;align-items:center;justify-content:space-between}.gv-ch b{font:900 clamp(26px,2.8vw,36px)/1 var(--f-display);color:#4BEAB8}
.gv-mbar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.12);margin:12px 0 10px}
.gv-mbar i{display:block}.gv-mbar .m{background:#22D69C}.gv-mbar .f{background:#3DA0FF}.gv-mbar .l{background:#FFC21A}.gv-mbar .n{background:rgba(255,255,255,.18)}
.gv-leg{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:#C9D4FF}.gv-leg span{display:inline-flex;align-items:center;gap:6px}.gv-leg i{width:12px;height:12px;border-radius:3px}.gv-leg b{color:#fff}
.gv-leg .m i{background:#22D69C}.gv-leg .f i{background:#3DA0FF}.gv-leg .l i{background:#FFC21A}
.gv-tip{display:flex;align-items:center;gap:4px;margin-top:12px}
.gv-tiprip{flex:none;width:64px;margin:-6px -12px -6px -4px;position:relative;z-index:1}
.gv-tip p{flex:1;margin:0;padding:10px 14px 10px 20px;border-radius:999px;border:2px solid #FFC21A;background:rgba(40,30,0,.25);font:700 14px/1.3 var(--f-body);color:#FFE27A}.gv-tip b{color:#fff}
.gv-test summary,.gv-terms summary{list-style:none;display:flex;align-items:center;gap:14px;cursor:pointer}
.gv-test summary::-webkit-details-marker,.gv-terms summary::-webkit-details-marker,.gv-hist summary::-webkit-details-marker{display:none}
.gv-cal{font-size:34px}.gv-test summary > span:nth-child(2){flex:1}.gv-test summary b{display:block;font:900 clamp(18px,1.9vw,24px)/1.1 var(--f-display)}.gv-test summary small{display:block;color:#C9D4FF;font-size:14px}
.gv-test summary > i,.gv-terms summary > i{font-style:normal;font-size:28px;color:#C9D4FF;transition:transform .2s}
.gv-test[open] summary > i{transform:rotate(90deg)}.gv-terms[open] summary > i{transform:rotate(180deg)}
.gv-test.soon{border-color:#FFB27A;box-shadow:0 0 18px rgba(255,122,58,.4)}.gv-test.soon summary b{color:#FFC48A}
.gv-trow{display:flex;gap:8px;margin-top:12px}.gv-trow .input{flex:1}
.gv-sr{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(140,170,255,.2);font-size:15px;color:#E6ECFF}
.gv-sr b{font:900 18px/1 var(--f-display);color:#fff}.gv-sr b.best{color:#4FB8FF}
.gv-hist summary{margin-top:10px;color:#FFD23F;font:800 15px/1 var(--f-display);text-decoration:underline;text-underline-offset:5px;cursor:pointer;list-style:none}
.gv-hist .bars{margin-top:12px}.gv-empty{margin:8px 0 0;color:#C9D4FF;font-size:14px}
.gv-terms summary span{flex:1;font:900 clamp(17px,1.8vw,22px)/1 var(--f-display)}.gv-terms .terms{margin-top:12px}
.gv-tools{display:flex;gap:18px;justify-content:center}
@media (max-width:900px){.gv-grid{grid-template-columns:1fr}.gv-modes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.gv-time{border:0;padding:0}.gv-seg button{min-width:52px;padding:0 10px}.gv-rip{width:72px}}
.gv-mode b{white-space:nowrap;font-size:clamp(15px,1.5vw,20px)}.gv-type{white-space:nowrap}.gv-link{white-space:nowrap}@media (max-width:1200px) and (min-width:901px){.gv-type{min-width:0;font-size:15px;padding:0 10px}}
@media (max-width:520px){.gv-ic{display:none}.gv-head{justify-content:center;text-align:center}.gv-chips{justify-content:center}}
.rs-pill.bonus{background:rgba(80,55,0,.55);border-color:#FFC21A;box-shadow:0 0 14px rgba(255,194,26,.4)}.rs-pill.bonus > i{background:none;font-size:20px}.rs-pill.bonus small{color:#FFE9A8}
.h3-pkcap.bonus small{color:#FFD23F}
.card.packprog.bonus{border-color:#FFC21A}
.qz-fb.bad.show{position:relative;overflow:visible}
.rs-acts2.one{grid-template-columns:1fr;width:min(320px,100%)}
/* launch screen: mode switcher + a Start button that moves */
.qi-modes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;animation:up .45s .35s both}
.qi-mb{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;background:rgba(10,16,60,.65);border:2px solid rgba(120,150,255,.45);color:#C9D4FF;font:800 clamp(13px,1.4vw,16px)/1 var(--f-display);cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.qi-mb i{font-style:normal}.qi-mb:hover{transform:translateY(-2px);border-color:rgba(170,195,255,.9);color:#fff}
.qi-mb[aria-pressed="true"]{color:#fff;background:linear-gradient(180deg,#2F6BFF,#1A44C8);border-color:#9CC2FF;box-shadow:0 0 14px rgba(60,120,255,.55)}
.qi-mb.sp[aria-pressed="true"]{background:linear-gradient(180deg,#FF9A2E,#C9620A);border-color:#FFD08A}
.qi-mb.bt[aria-pressed="true"]{background:linear-gradient(180deg,#8B5CF6,#5B2BC8);border-color:#C8B0FF}
.qi-mb.wu[aria-pressed="true"]{background:linear-gradient(180deg,#22C38E,#0F8A62);border-color:#8FF0CC}
.qi-go,.gv-go,.rs-again,.rx-go,.rx-bigbtn{position:relative;overflow:hidden;transition:transform .18s cubic-bezier(.3,1.6,.5,1),filter .18s,box-shadow .18s!important}
.qi-go::after,.gv-go::after,.rs-again::after,.rx-go::after,.rx-bigbtn::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);pointer-events:none;animation:btnShine 3.2s 1.2s ease-in-out infinite}
@keyframes btnShine{0%,70%{left:-40%}100%{left:130%}}
.qi-go:hover,.gv-go:hover,.rs-again:hover,.rx-go:hover,.rx-bigbtn:hover{transform:translateY(-4px) scale(1.03);filter:brightness(1.08)}
.qi-go:active,.gv-go:active,.rs-again:active,.rx-go:active,.rx-bigbtn:active{transform:translateY(2px) scale(.98)}
@media (prefers-reduced-motion:reduce){.qi-go::after,.gv-go::after,.rs-again::after,.rx-go::after,.rx-bigbtn::after{animation:none}}
.qi-go{animation:up .45s .5s backwards,qiPulse 2.2s 1.2s ease-in-out infinite}
/* ---------- Home: test countdown (v2) ---------- */
.h3-tb{position:relative;display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);margin:4px 0 16px;padding:12px clamp(14px,2vw,22px) 12px clamp(10px,1.4vw,16px);border-radius:26px;
  background:linear-gradient(100deg,rgba(60,40,170,.9),rgba(24,30,110,.92) 55%,rgba(60,30,150,.9));border:2.5px solid rgba(170,130,255,.9);box-shadow:0 0 0 1px rgba(120,160,255,.35),0 0 26px rgba(140,100,255,.55),inset 0 0 22px rgba(140,110,255,.25);transform:skewX(-6deg)}
.h3-tb > *{transform:skewX(6deg)}
.h3-tb.soon{box-shadow:0 0 0 1px rgba(255,200,80,.4),0 0 30px rgba(255,170,60,.5),inset 0 0 22px rgba(255,170,60,.18)}
.h3-tb.now{animation:tbGlow 1.8s ease-in-out infinite}
@keyframes tbGlow{50%{box-shadow:0 0 0 2px rgba(255,210,80,.6),0 0 44px rgba(255,180,60,.8),inset 0 0 22px rgba(255,170,60,.25)}}
.tb2-spark{position:absolute;left:-6px;top:-18px;width:40px;height:36px;background:conic-gradient(from 200deg,transparent 0 0)}
.tb2-spark::before,.tb2-spark::after{content:"";position:absolute;width:7px;height:20px;border-radius:4px;background:#FFC21A;box-shadow:0 0 8px #FFC21A}
.tb2-spark::before{left:6px;top:4px;rotate:-40deg}.tb2-spark::after{left:22px;top:-4px;rotate:-10deg}
.tb2-cal{position:relative;flex:none;width:clamp(62px,6.2vw,84px);aspect-ratio:1;border-radius:16px;background:#fff;box-shadow:0 6px 0 #C9D0E8,0 10px 16px rgba(0,0,0,.4);display:flex;flex-direction:column;overflow:visible;rotate:-8deg}
.tb2-cal small{display:block;height:36%;border-radius:16px 16px 0 0;background:linear-gradient(180deg,#FF5A52,#E2302A);color:#fff;font:900 clamp(13px,1.3vw,17px)/1 var(--f-display);display:grid;place-items:center;letter-spacing:.04em}
.tb2-cal b{flex:1;display:grid;place-items:center;color:#151530;font:900 clamp(28px,3vw,40px)/1 var(--f-display)}
.tb2-cal i{position:absolute;top:-8px;width:9px;height:18px;border-radius:5px;background:linear-gradient(180deg,#E8ECF8,#9AA4C4);box-shadow:0 2px 2px rgba(0,0,0,.3)}
.tb2-cal .r1{left:24%}.tb2-cal .r2{right:24%}
.tb2-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.tb2-tx b{font:900 clamp(24px,3vw,42px)/1 var(--f-display);font-style:italic;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb2-tx b span{background:linear-gradient(180deg,#FFFBD0,#FFE34D 35%,#FFC400 70%,#FFA800);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.1em;filter:drop-shadow(0 3px 0 rgba(150,80,0,.7))}
.tb2-tx small{font:700 clamp(13px,1.3vw,17px)/1.25 var(--f-body);font-style:italic;color:#F1F4FF}
.tb2-shield{position:relative;flex:none;width:clamp(70px,7vw,96px);aspect-ratio:.86;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:radial-gradient(circle at 50% 35%,#3D2A9E,#1A1258 70%);clip-path:polygon(50% 0,100% 14%,95% 60%,50% 100%,5% 60%,0 14%);filter:drop-shadow(0 0 10px rgba(255,190,40,.7))}
.tb2-shield::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#FFE34D,#E89A00);clip-path:polygon(50% 0,100% 14%,95% 60%,50% 100%,5% 60%,0 14%,9% 18%,13% 57%,50% 90%,87% 57%,91% 18%,50% 9%,9% 18%)}
.tb2-shield b{position:relative;margin-top:-6%;font:900 clamp(28px,3vw,40px)/1 var(--f-display);color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.tb2-shield small{position:relative;font:900 clamp(10px,1vw,13px)/1.05 var(--f-display);color:#fff;text-align:center;letter-spacing:.04em}
.tb2-shield::after{content:"";position:absolute;inset:0;pointer-events:none}
@media (max-width:520px){.h3-tb{transform:none;border-radius:20px;padding:10px 12px;gap:10px}.h3-tb > *{transform:none}.tb2-tx b{font-size:22px;white-space:normal}.tb2-cal{width:54px;rotate:-6deg}.tb2-cal b{font-size:24px}.tb2-shield{width:60px}.tb2-shield b{font-size:24px}}
/* ---------- matching: clear colors (blue = picked, green = right, red = wrong) ---------- */
.play.qz .match{gap:12px}
.play.qz .mi{position:relative;min-height:56px;border-radius:14px;border:2px solid rgba(110,150,255,.55)!important;background:linear-gradient(180deg,rgba(40,70,170,.7),rgba(24,40,110,.75))!important;color:#fff!important;
  box-shadow:none!important;font:700 clamp(15px,1.6vw,19px)/1.3 var(--f-body)!important;transition:transform .12s,border-color .12s,background .12s}
.play.qz .mi.mterm{font-family:var(--f-display)!important;font-weight:900!important}
.play.qz .mi:hover:not(:disabled){border-color:rgba(170,195,255,.95)!important;transform:translateY(-2px)}
.play.qz .mi.sel{border-color:#FFD23F!important;background:linear-gradient(180deg,rgba(90,80,20,.7),rgba(60,50,10,.75))!important;box-shadow:0 0 0 3px rgba(255,210,63,.3),0 0 16px rgba(255,210,63,.45)!important;transform:translateY(-2px)}
.play.qz .mi.done{border-color:#2DD4A0!important;background:linear-gradient(180deg,rgba(10,110,80,.7),rgba(6,70,52,.8))!important;color:#E8FFF6!important;opacity:1;padding-right:46px}
.play.qz .mi.done::after{content:"✓ " attr(data-pair);position:absolute;right:10px;top:50%;translate:0 -50%;min-width:30px;padding:3px 8px;border-radius:999px;background:#16B987;color:#fff;font:900 13px/1 var(--f-display);text-align:center}
.play.qz .mi.no{border-color:#FF5C7A!important;background:linear-gradient(180deg,rgba(130,20,50,.75),rgba(90,14,36,.8))!important}
.play.qz .mi.c0,.play.qz .mi.c1,.play.qz .mi.c2,.play.qz .mi.c3,.play.qz .mi.c4{background:inherit}
.play.qz .qz-help b{color:#FFD23F}
.h3-text{min-width:0}.h3-tb{max-width:100%;min-width:0}.tb2-tx b{font-size:clamp(22px,2.4vw,36px)}
.play.qz .mi.done{padding-right:12px}
.play.qz .mi.done::after{top:-9px;right:-6px;translate:none;font-size:12px;padding:3px 7px;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.h3-tb{align-self:stretch}
.tb2-tx b{font-size:clamp(20px,2.1vw,32px);white-space:normal;overflow:visible}.tb2-tx small{font-size:clamp(12px,1.15vw,15px)}.tb2-shield{width:clamp(64px,6vw,86px)}
@media (max-width:640px){.qz-fb .qz-fbh.qz-fbrip{flex-direction:row!important;align-items:flex-start;flex-wrap:nowrap!important;gap:8px}.qz-fb.bad .qz-fbr{width:58px;margin:-22px 0 0 -6px}.qz-fb.bad .qz-big{font-size:19px}}
/* ---------- countdown: 3 → 2 → 1 → GO! ---------- */
.overlay.cdxov{background:#120B3A;overflow:hidden;padding:0}
.overlay.cdxov::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(40,10,90,.55),rgba(30,12,80,.25) 50%,rgba(40,10,90,.5)),url(../img/home/hero-bg.webp) center 40%/cover no-repeat;filter:hue-rotate(18deg) saturate(1.1) brightness(.75)}
.overlay.cdxov.out{opacity:0;transform:scale(1.06);transition:opacity .2s,transform .2s}
.cdx{position:relative;width:100%;height:100%;display:grid;place-items:center}
.cdx-logo{position:absolute;left:max(18px,3vw);top:max(14px,3vh);height:clamp(42px,6vw,80px);filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.cdx-rip{position:absolute;left:max(-10px,4vw);bottom:max(0px,4vh);width:clamp(150px,26vw,380px);filter:drop-shadow(0 0 26px rgba(140,110,255,.6)) drop-shadow(0 14px 18px rgba(0,0,0,.45));animation:cdxRip .9s ease-in-out infinite alternate,qiRip .5s cubic-bezier(.3,1.4,.5,1) backwards;transform-origin:50% 100%}
@keyframes cdxRip{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-10px) rotate(3deg) scale(1.03)}}
.cdx-dial{position:relative;width:min(56vmin,440px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle,rgba(70,40,170,.55),rgba(30,16,90,.75) 62%,transparent 64%);box-shadow:0 0 60px rgba(150,100,255,.45),inset 0 0 40px rgba(150,110,255,.25);animation:cdxGlow 1s ease-in-out infinite alternate}
@keyframes cdxGlow{to{box-shadow:0 0 90px rgba(170,120,255,.65),inset 0 0 50px rgba(170,130,255,.35)}}
.cdx-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.cdx-ring circle{fill:none;stroke-width:3.4}
.cdx-ring .bg{stroke:rgba(160,130,255,.3)}
.cdx-ring .fg{stroke:#FFD23F;stroke-linecap:round;filter:drop-shadow(0 0 3px #FFC21A) drop-shadow(0 0 7px rgba(255,200,60,.8))}
.cdx-dial.last .fg{stroke:#FFE97A}
.cdx-n{position:relative;font:900 min(36vmin,280px)/1 var(--f-display);background:linear-gradient(180deg,#FFF6B0 0%,#FFE14A 40%,#FFB800 85%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 0 #5B2BC8) drop-shadow(0 0 22px rgba(255,200,60,.55));-webkit-text-stroke:3px rgba(110,60,230,.6)}
.cdx-n.pop{animation:cdxPop .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes cdxPop{0%{transform:scale(.8);opacity:0}55%{transform:scale(1.1);opacity:1}100%{transform:scale(1)}}
.cdx-n.go{font-size:min(26vmin,210px);font-style:italic}
.cdx-dial.go{animation:none;box-shadow:0 0 120px rgba(255,200,60,.6)}
.cdx-burst{position:absolute;left:50%;top:50%;width:150vmax;aspect-ratio:1;translate:-50% -50%;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,220,120,.35) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 6%,transparent 45%);mask:radial-gradient(circle,#000 6%,transparent 45%)}
.cdx-burst.on{animation:cdxBurst .5s ease-out forwards}
@keyframes cdxBurst{0%{opacity:0;transform:scale(.4) rotate(0)}40%{opacity:1}100%{opacity:0;transform:scale(1.2) rotate(25deg)}}
@media (max-width:640px){.cdx-rip{width:150px;left:-6px;bottom:2vh}.cdx-dial{width:72vmin}.cdx-n{font-size:46vmin}.cdx-n.go{font-size:32vmin}}
@media (prefers-reduced-motion:reduce){.cdx-rip,.cdx-dial,.cdx-n.pop,.cdx-burst.on{animation:none!important}}
.cdx-ring .fg{filter:none}.cdx-ring{filter:drop-shadow(0 0 6px rgba(255,200,60,.75))}.cdx-dial{isolation:isolate}
.cdx-n.go{font-size:min(17vmin,140px)}@media (max-width:640px){.cdx-n.go{font-size:22vmin}}
/* ---------- card games: Arcade tiles + unlock banner ---------- */
.cg-intro{margin:-6px 0 10px;color:#C9D4FF;font-size:15px}
.cg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:18px;margin-bottom:22px}
.cg-tile{display:flex;align-items:center;gap:16px;padding:14px 18px 14px 14px;border-radius:24px;background:linear-gradient(135deg,#FFD23F33,#4CBF4A33),linear-gradient(160deg,#1F7BE0,#0E3E9E);border:3px solid #FFE27A;box-shadow:0 0 22px rgba(255,210,63,.45)}
.cg-art{position:relative;flex:none;width:clamp(96px,10vw,130px);aspect-ratio:1;border-radius:20px;background:linear-gradient(180deg,#8FD3FF,#C8EBFF 70%,#6CCB5F 71%);display:grid;place-items:center;border:3px solid #1E2340}
.cg-art img{width:100%}
.cg-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;color:#fff}
.cg-tag{font:800 12px/1 var(--f-display);letter-spacing:.04em;color:#FFE27A;text-transform:uppercase}
.cg-tx b{font:900 clamp(20px,2vw,26px)/1.05 var(--f-display)}.cg-tx small{font-size:14px;color:#E6ECFF}
.cg-tx .ar-play{align-self:flex-start;margin-top:4px}
.cg-tile.locked{background:linear-gradient(160deg,#2A2F52,#15182F);border-color:rgba(160,170,220,.4);box-shadow:none}
.cg-tile.locked .cg-art img{filter:brightness(0) opacity(.55)}.cg-tile.locked .cg-art{background:#232846}
.cg-lock{position:absolute;font-style:normal;font-size:34px}
.cg-tile.locked .cg-tag{color:#A9B4D6}
.cg-unlock{display:flex;align-items:center;gap:14px;width:min(640px,94vw);padding:12px 16px;border-radius:20px;background:linear-gradient(90deg,rgba(255,194,26,.25),rgba(40,30,120,.9));border:2.5px solid #FFD23F;box-shadow:0 0 26px rgba(255,210,63,.55);animation:pop .55s .6s cubic-bezier(.2,.9,.3,1.6) both}
.cg-unlock img{width:72px;flex:none;border-radius:16px;background:linear-gradient(180deg,#8FD3FF,#C8EBFF)}
.cg-unlock > div{flex:1;min-width:0;text-align:left}.cg-unlock small{display:block;font:900 14px/1 var(--f-display);color:#FFD23F;letter-spacing:.05em}.cg-unlock b{display:block;font:900 22px/1.1 var(--f-display);color:#fff}.cg-unlock span{font-size:13px;color:#E6ECFF}
@media (max-width:520px){.cg-unlock{flex-wrap:wrap}.cg-unlock .btn{width:100%}}
/* ---------- Zippy's Buzz Run screen ---------- */
body.zb-open{overflow:hidden}
.zbov{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:#3FA0F5;touch-action:none;user-select:none;-webkit-user-select:none}
.zb-hud{display:flex;align-items:center;gap:clamp(8px,1.4vw,18px);padding:8px clamp(10px,1.6vw,20px);background:linear-gradient(180deg,#172156,#0E1640);border-bottom:3px solid #3D5BD8;color:#fff}
.zb-logo{height:clamp(28px,4vw,48px)}
.zb-title{display:inline-flex;align-items:center;gap:8px;padding:4px 18px 4px 4px;border-radius:999px;border:2.5px solid #FFC21A;background:rgba(10,16,60,.6);font:900 clamp(14px,1.8vw,22px)/1 var(--f-display);white-space:nowrap}
.zb-title img{width:clamp(30px,3.4vw,42px);height:clamp(30px,3.4vw,42px);border-radius:50%;background:#FFF2B0;border:2px solid #FFC21A}
.zb-sc{margin-left:auto;display:flex;align-items:center;padding:4px 8px;border-radius:999px;background:rgba(10,16,60,.6);border:2px solid rgba(120,150,255,.5)}
.zb-sc > span{display:grid;grid-template-columns:auto auto;column-gap:7px;align-items:center;padding:2px clamp(8px,1.4vw,18px)}
.zb-sc > span + span{border-left:2px solid rgba(140,170,255,.3)}
.zb-sc i{grid-row:1/3;font-style:normal;font-size:clamp(18px,2.2vw,28px)}.zb-sc small{font:800 11px/1 var(--f-display);color:#C9D4FF;letter-spacing:.06em}.zb-sc b{font:900 clamp(18px,2.2vw,28px)/1 var(--f-display)}
.zb-btn{flex:none;width:clamp(38px,4vw,50px);aspect-ratio:1;border-radius:14px;border:2.5px solid rgba(200,215,255,.8);background:rgba(10,16,60,.6);color:#fff;font:900 16px/1 var(--f-display);cursor:pointer}
.zb-stage{position:relative;flex:1;min-height:0;overflow:hidden;cursor:pointer}
.zb-cv{display:block}
.zb-tip{position:absolute;left:50%;bottom:4%;translate:-50% 0;display:flex;align-items:center;gap:10px;padding:8px 22px 8px 10px;border-radius:999px;background:#0E1640;border:3px solid #FFC21A;color:#fff;font:900 clamp(15px,1.8vw,22px)/1 var(--f-display);white-space:nowrap;transition:opacity .4s,translate .4s;pointer-events:none;animation:zbTip 1.2s ease-in-out infinite alternate}
@keyframes zbTip{to{transform:scale(1.05)}}
.zb-tip kbd{padding:6px 14px;border-radius:10px;background:#E8ECF8;color:#1E2340;box-shadow:0 3px 0 #9AA4C4;font:900 .85em/1 var(--f-display)}.zb-tip i{font-style:normal}
.zb-tip.gone{opacity:0;translate:-50% 20px}
.zb-pause{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(14,22,64,.55);color:#fff;text-align:center}
.zb-pause b{font:900 44px/1 var(--f-display)}.zb-pause span{font-weight:700}
.zb-over{position:absolute;inset:0;display:grid;place-items:center;background:rgba(14,22,64,.45);animation:fade .25s both}
.zb-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 34px;border-radius:28px;background:#fff;border:4px solid #1E2340;box-shadow:0 8px 0 #1E2340;color:#1E2340;min-width:min(340px,86vw);animation:pop .4s cubic-bezier(.2,.9,.3,1.6) both}
.zb-new{padding:6px 16px;border-radius:999px;background:linear-gradient(180deg,#FFE34D,#FFB800);border:3px solid #1E2340;font:900 16px/1 var(--f-display)}
.zb-big{font:900 clamp(64px,10vw,96px)/1 var(--f-display);color:#FF7BB0;-webkit-text-stroke:3px #1E2340}
.zb-lbl{font:900 15px/1 var(--f-display);letter-spacing:.08em}
.zb-row{display:flex;gap:12px;margin:8px 0 10px}.zb-row span{display:flex;flex-direction:column;align-items:center;padding:8px 18px;border-radius:16px;background:#EEF3FF;border:2.5px solid #1E2340}
.zb-row small{font:900 11px/1 var(--f-display);color:#5A6390;letter-spacing:.06em}.zb-row b{font:900 24px/1.2 var(--f-display)}
.zb-again{min-width:240px;border-radius:999px!important;border:3px solid #1E2340!important;box-shadow:0 5px 0 #1E2340!important}
.zb-link{background:none;border:0;color:#3D5BD8;font:800 15px/1 var(--f-display);padding:8px;cursor:pointer;text-decoration:underline}
@media (max-width:640px){.zb-logo,.zb-sc .nec{display:none}.zb-title{padding-right:10px}.zb-sc > span{padding:2px 8px}}
@media (max-width:640px){.zb-hud{gap:6px;padding:6px 8px}.zb-title{font-size:0;padding:3px}.zb-title img{width:34px;height:34px}.zb-sc{margin-left:auto;padding:2px 4px}.zb-sc small{font-size:9px}.zb-sc b{font-size:18px}.zb-sc i{font-size:16px}.zb-btn{width:36px}}
.rx-sum2{justify-content:safe center;overflow-y:auto;min-height:0}.ripx:has(.rx-sum2){overflow-y:auto}