/* QuizRips: collectible cards, Rip Packs, the rip/reveal screens and the My Collection binder. */
:root{--r-common:#B8C6E0;--r-common2:#6F86B8;--r-rare:#3DA0FF;--r-rare2:#1E55E6;--r-epic:#B66BFF;--r-epic2:#6A2FE0;--r-legendary:#FFD23F;--r-legendary2:#E88A00}

/* ---------- a card ---------- */
.ccard{position:relative;aspect-ratio:3/4;width:100%;border-radius:12px;overflow:hidden;isolation:isolate;--a:var(--r-common);--b:var(--r-common2);
  background:linear-gradient(150deg,var(--a),var(--b));padding:4px;box-shadow:0 6px 16px -8px rgba(0,0,0,.7);container-type:inline-size;user-select:none;-webkit-user-select:none}
.ccard.r-rare{--a:var(--r-rare);--b:var(--r-rare2);box-shadow:0 0 0 1px rgba(61,160,255,.4),0 6px 18px -6px rgba(61,160,255,.6)}
.ccard.r-epic{--a:var(--r-epic);--b:var(--r-epic2);box-shadow:0 0 0 1px rgba(182,107,255,.4),0 6px 20px -6px rgba(182,107,255,.65)}
.ccard.r-legendary{--a:#FFF0A8;--b:var(--r-legendary2);background:linear-gradient(135deg,#FFF3B0,#FFD23F 30%,#E88A00 55%,#FFE27A 75%,#B86A00);box-shadow:0 0 0 1px rgba(255,210,63,.5),0 6px 22px -6px rgba(255,180,0,.75)}
.qc-art{position:absolute;inset:4px;border-radius:9px;overflow:hidden;background:#0B1330}
.qc-art img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;display:block}
.qc-crown{position:absolute;left:5px;top:5px;width:22%;aspect-ratio:1;border-radius:50%;background:#0F1838;border:2px solid var(--a);display:grid;place-items:center;z-index:2}
.qc-crown img{width:72%}
.qc-num{position:absolute;right:6px;top:6px;z-index:2;font:800 clamp(9px,8cqi,14px)/1 var(--f-mono);color:#fff;background:rgba(10,16,40,.78);border:1px solid var(--a);border-radius:6px;padding:3px 5px}
.qc-count{position:absolute;right:6px;top:calc(6px + 1.9em);z-index:2;font:800 clamp(10px,8.5cqi,15px)/1 var(--f-display);color:#1A1300;background:#FFD23F;border-radius:999px;padding:3px 6px}
.qc-name{position:absolute;left:4px;right:4px;bottom:4px;z-index:2;border-radius:0 0 9px 9px;padding:18% 6px 6px;text-align:center;background:linear-gradient(transparent,rgba(8,12,34,.86) 45%);display:flex;flex-direction:column;align-items:center;gap:2px}
.qc-name b{font:800 clamp(10px,10.5cqi,22px)/1.05 var(--f-display);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.6);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qc-name small{font:800 clamp(7px,6.5cqi,12px)/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:#10183A;background:var(--a);border-radius:999px;padding:2px 7px}
.ccard.r-legendary .qc-name small{background:#FFD23F}
.qc-holo{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:color-dodge;border-radius:inherit}
.ccard.r-epic .qc-holo,.ccard.r-legendary .qc-holo{opacity:.35;background:linear-gradient(115deg,transparent 20%,rgba(255,120,255,.55) 35%,rgba(120,220,255,.55) 45%,rgba(255,255,140,.5) 55%,transparent 70%);background-size:250% 250%;animation:holo 4.5s linear infinite}
.ccard.r-legendary .qc-holo{opacity:.45;background:linear-gradient(115deg,transparent 20%,rgba(255,240,150,.7) 38%,rgba(255,255,255,.75) 46%,rgba(255,190,60,.6) 54%,transparent 70%);background-size:250% 250%}
@keyframes holo{0%{background-position:100% 0}100%{background-position:-150% 0}}
.ccard.tilt{transition:transform .08s;transform-style:preserve-3d}
.ccard.tilt .qc-holo{animation:none;opacity:.55;background:radial-gradient(circle at var(--hx,50%) var(--hy,30%),rgba(255,255,255,.55),transparent 45%),linear-gradient(115deg,rgba(255,120,255,.35),rgba(120,220,255,.35),rgba(255,255,140,.35))}
.ccard.big{max-width:340px;border-radius:18px;padding:6px}.ccard.big .qc-art{inset:6px;border-radius:13px}
/* card back */
.ccard.back{background:linear-gradient(150deg,#FFD23F,#E88A00);padding:5px}
.qb-in{position:absolute;inset:5px;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8%;
  background:radial-gradient(circle at 50% 40%,#3D74FF,#1B2C80 60%,#0F1838),repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 6px,transparent 6px 12px);background-blend-mode:overlay}
.qb-logo{width:78%;filter:drop-shadow(0 3px 0 rgba(0,0,0,.4))}
.qb-tag{font:800 clamp(8px,7cqi,14px)/1 var(--f-display);letter-spacing:.14em;color:#FFD23F;text-transform:uppercase}
/* not discovered yet */
.ccard.missing{background:linear-gradient(150deg,#26325E,#141C3C);box-shadow:inset 0 0 0 2px rgba(255,255,255,.06)}
.ccard.missing::before{content:"";position:absolute;inset:4px;border-radius:9px;background:radial-gradient(circle at 50% 42%,#1D2850,#0B1128 70%)}
.qm-q{position:absolute;inset:0;display:grid;place-items:center;font:800 clamp(28px,34cqi,64px)/1 var(--f-display);color:rgba(170,190,255,.22)}
.qm-n{position:absolute;left:0;right:0;bottom:9%;text-align:center;font:800 clamp(9px,9cqi,14px)/1 var(--f-mono);color:rgba(190,205,255,.55)}

/* ---------- the pack ---------- */
.rpack{position:relative;width:min(250px,62vw);aspect-ratio:300/420;filter:drop-shadow(0 18px 26px rgba(0,0,0,.55))}
.rpack.small{width:58px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.rp-svg{position:absolute;inset:0;width:100%;height:100%}
.rp-flap{position:absolute;left:0;right:0;top:0;height:calc(100% * 66 / 420);transform-origin:100% 100%;transition:transform .55s cubic-bezier(.3,1.4,.5,1),opacity .55s}
.rp-flap svg{position:absolute;inset:0;width:100%;height:100%}
.rp-flap span{position:absolute;inset:auto 0 22% 0;text-align:center;font:800 clamp(8px,4.6cqi,13px)/1 var(--f-display);letter-spacing:.12em;color:#5A3A00}
.rpack{container-type:inline-size}
.rp-tear{position:absolute;left:0;right:0;top:calc(100% * 64 / 420);height:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 6px,transparent 6px 11px)}
.rp-tear i{position:absolute;left:0;top:-2px;bottom:-2px;width:0;background:#fff;box-shadow:0 0 10px #fff,0 0 22px #FFD23F;border-radius:3px}
.rp-shine{position:absolute;inset:16% 0 2% 0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 45%,transparent 60%);background-size:260% 100%;animation:packshine 3.2s ease-in-out infinite}
@keyframes packshine{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}
.rp-face{position:absolute;inset:18% 6% 9% 6%;display:flex;flex-direction:column;align-items:center;gap:3%;pointer-events:none}
.rp-logo{width:86%}
.rp-series{font:800 clamp(8px,6cqi,16px)/1 var(--f-display);letter-spacing:.2em;color:#FFD23F}
.rp-fan{position:relative;flex:1;width:100%;margin-top:4%}
.rp-fan img{position:absolute;left:50%;top:6%;width:42%;aspect-ratio:3/4;object-fit:cover;border-radius:7px;border:2px solid #FFD23F;box-shadow:0 6px 12px rgba(0,0,0,.45)}
.rp-fan img:nth-child(1){transform:translateX(-112%) rotate(-12deg)}.rp-fan img:nth-child(2){transform:translateX(-50%) translateY(-6%);z-index:1}.rp-fan img:nth-child(3){transform:translateX(12%) rotate(12deg)}
.rp-kind{font:800 clamp(7px,5.4cqi,14px)/1 var(--f-display);letter-spacing:.08em;color:#fff}
.rp-n{font:800 clamp(7px,4.6cqi,12px)/1 var(--f-body);letter-spacing:.14em;color:#1A1300;background:#FFD23F;border-radius:999px;padding:4px 10px}
.rpack.small .rp-face,.rpack.small .rp-tear,.rpack.small .rp-flap span{display:none}

/* ---------- full-screen rip overlay ---------- */
.ripov{position:fixed;inset:0;z-index:60;overflow-y:auto;overscroll-behavior:contain;display:flex;align-items:flex-start;justify-content:center;padding:max(18px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));
  background:radial-gradient(800px 600px at 50% 20%,rgba(61,116,255,.45),transparent 70%),radial-gradient(600px 500px at 50% 100%,rgba(123,63,242,.4),transparent 70%),#0A1230;color:#fff;animation:fadein .2s}
@keyframes fadein{from{opacity:0}}
.rip-stage{width:100%;max-width:720px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin:auto 0}
.rip-h{font-family:var(--f-display);font-weight:800;font-size:clamp(24px,6vw,36px);margin:0;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.rip-pack{touch-action:none;cursor:grab;border-radius:16px;outline:none;padding:6px;animation:packin .55s cubic-bezier(.3,1.5,.5,1)}
.rip-pack:focus-visible{outline:3px solid #FFD23F}
.rip-pack:active{cursor:grabbing}
.rip-pack:not(.torn) .rpack{animation:packbob 2.6s ease-in-out infinite}
@keyframes packin{from{transform:translateY(60px) scale(.7);opacity:0}}
@keyframes packbob{50%{transform:translateY(-6px) rotate(-1deg)}}
.rip-pack.torn .rp-flap{transform:translate(30%,-90%) rotate(28deg);opacity:0}
.rip-pack.torn .rpack{animation:packout .6s .2s ease-in forwards}
@keyframes packout{to{transform:translateY(40px) scale(.9);opacity:0}}
.rip-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.rip-btns.col{flex-direction:column;width:min(360px,100%)}
.rip-btns .btn{min-height:48px}
/* face-down cards that flip */
.flip-row{display:grid;grid-template-columns:repeat(3,minmax(0,200px));gap:clamp(8px,3vw,20px);width:100%;justify-content:center;perspective:1200px}
.flip{position:relative;border:0;background:none;padding:0;aspect-ratio:3/4;animation:cardup .5s cubic-bezier(.3,1.4,.5,1) backwards;border-radius:12px}
@keyframes cardup{from{transform:translateY(120px) scale(.6);opacity:0}}
.flip-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,1.3,.5,1)}
.flip.on .flip-in{transform:rotateY(180deg)}
.ff{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ff.front{transform:rotateY(180deg)}
.flip.ready{animation:ready 1s ease-in-out infinite}
.flip.ready .ccard.back{box-shadow:0 0 0 3px #FFD23F,0 0 26px rgba(255,210,63,.75)}
@keyframes ready{50%{transform:translateY(-8px)}}
.flip.on.r-rare .ff.front{filter:drop-shadow(0 0 16px rgba(61,160,255,.9))}
.flip.on.r-epic .ff.front{filter:drop-shadow(0 0 20px rgba(182,107,255,.95))}
.flip.on.r-legendary .ff.front{filter:drop-shadow(0 0 26px rgba(255,200,40,1));animation:legend 1.2s ease-out}
@keyframes legend{0%{transform:rotateY(180deg) scale(1)}35%{transform:rotateY(180deg) scale(1.12)}100%{transform:rotateY(180deg) scale(1)}}
.tag-new,.tag-dup{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);z-index:5;font:800 12px/1 var(--f-display);font-style:normal;letter-spacing:.06em;white-space:nowrap;border-radius:999px;padding:6px 10px}
.tag-new{background:#0FA97A;color:#fff;box-shadow:0 3px 0 #08694B}
.tag-dup{background:#24336A;color:#BFE6FF;border:1px solid #4FA3FF}
/* summary */
.sum-row{display:grid;grid-template-columns:repeat(3,minmax(0,190px));gap:clamp(8px,3vw,18px);width:100%;justify-content:center;margin-bottom:10px}
.sum-card{position:relative}
.sum-card .tag-new,.sum-card .tag-dup{font-size:11px}
.sum-stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.sum-stats span{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 14px;font-size:15px}
.sum-stats b{font-family:var(--f-display);font-size:18px}
.sum-stats .coin{width:20px;height:20px}
.sum-prog{width:min(460px,100%);text-align:left;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.sum-prog .muted{color:#B9C4E6;display:inline-flex;align-items:center;gap:4px}
.ms-hit{display:flex;gap:12px;align-items:center;text-align:left;background:linear-gradient(90deg,#FFE27A,#FFB020);color:#2A1A00;border-radius:16px;padding:10px 16px;width:min(460px,100%)}
.ms-hit span{font-size:28px}.ms-hit small{display:block;font-weight:700;opacity:.8}.ms-hit b{font-family:var(--f-display);font-size:18px}
/* review to unlock */
.rv-card{width:min(560px,100%);margin:auto 0;background:#18224A;border:1px solid #33468A;border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:12px;text-align:left}
.rv-card h2{font-family:var(--f-display);font-size:clamp(20px,5vw,26px);line-height:1.2}
.rv-ans{background:#123E35;border:1px solid #0FA97A;border-radius:14px;padding:12px 14px}
.rv-ans small{display:block;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#7FE8C4}
.rv-ans b{font-size:20px}
.rv-card .muted{color:#B9C4E6}
.rv-card .rip-btns{justify-content:flex-start}
.rv-done{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.rv-done h2{font-family:var(--f-display);font-size:32px}
.otab{width:100%;border-collapse:collapse;font-size:15px}
.otab th,.otab td{padding:8px 6px;border-bottom:1px solid #33468A;text-align:left}
.otab th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#B9C4E6}
.rr{font-weight:800}.rr.r-common{color:var(--r-common)}.rr.r-rare{color:var(--r-rare)}.rr.r-epic{color:var(--r-epic)}.rr.r-legendary{color:var(--r-legendary)}
/* card detail */
.cdov{align-items:center}
.cd-wrap{display:grid;grid-template-columns:minmax(0,320px) minmax(0,340px);gap:24px;align-items:center;margin:auto 0;max-width:720px;width:100%}
.cd-card{perspective:900px;display:flex;justify-content:center}
.cd-info{display:flex;flex-direction:column;gap:8px;text-align:left}
.cd-info h2{font-family:var(--f-display);font-size:32px}
.cd-kind{margin:-6px 0 0;color:#B9C4E6;font-weight:700}
.cd-info dl{margin:4px 0 10px;display:grid;gap:6px}
.cd-info dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #33468A;padding:6px 0}
.cd-info dt{color:#B9C4E6}.cd-info dd{margin:0;font-weight:800;text-align:right}
@media (max-width:640px){.cd-wrap{grid-template-columns:1fr;gap:14px}.cd-card .ccard.big{max-width:240px}.cd-info h2{font-size:26px}}

/* ---------- earned pack on the results screen ---------- */
.earnpack{display:flex;gap:18px;align-items:center;background:radial-gradient(circle at 20% 30%,rgba(255,210,63,.25),transparent 55%),linear-gradient(135deg,#1F3CB8,#4A2BB8);color:#fff;border-radius:24px;padding:18px 20px;margin-bottom:14px;box-shadow:0 18px 40px -18px rgba(45,91,255,.8)}
.earnpack .rpack{width:min(130px,32vw)}
.ep-tx{display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0}
.ep-tx h2{font-family:var(--f-display);font-size:clamp(22px,5vw,32px);line-height:1.05}
.ep-tx p{margin:0;color:#D9E2FF}
.ep-tx .btn{min-width:min(260px,100%)}
@media (max-width:520px){.earnpack{flex-direction:column;text-align:center}.ep-tx{align-items:center}.ep-tx .btn{width:100%}}
.packprog{display:flex;flex-direction:column;gap:8px}
.packprog span{color:var(--muted);font-size:14px}
/* "you have packs" button (home, quests, results, binder) */
.packbtn{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:2px solid #FFD23F;border-radius:20px;padding:10px 16px 10px 12px;margin-bottom:18px;color:var(--ink);
  background:linear-gradient(100deg,color-mix(in srgb,#2D5BFF 30%,var(--surface)),color-mix(in srgb,#7B3FF2 26%,var(--surface)));box-shadow:0 10px 26px -14px rgba(255,210,63,.7)}
.packbtn .rpack.small{flex:none;animation:packbob 2.4s ease-in-out infinite}
.pb-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.pb-tx b{font-family:var(--f-display);font-size:19px}
.pb-tx small{color:var(--muted);font-size:14px}
.pb-go{flex:none;font:800 16px/1 var(--f-display);color:#1A1300;background:#FFD23F;border-radius:999px;padding:10px 16px;box-shadow:0 3px 0 #B57A00}
.packbtn.inres{margin-top:4px}

/* ---------- My Collection binder ---------- */
.binder{--bk:#2D5BFF;padding-bottom:20px}
.binder.purple{--bk:#7B3FF2}
.bhead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:18px 0 12px}
.bhead .eyebrow{color:#FFD23F}
.bhead h2{font-family:var(--f-display);font-size:clamp(30px,6vw,44px);letter-spacing:.01em}
.bstats{display:flex;align-items:center;gap:12px}
.bpill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 12px;font-size:14px}
.bpill b{font-family:var(--f-display);font-size:16px}
.cbadges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.cbadge{font-size:12px;font-weight:800;border-radius:999px;padding:4px 10px;background:color-mix(in srgb,var(--bk) 30%,var(--surface));border:1px solid var(--bk)}
.cbadge.gold{background:#FFD23F;color:#2A1A00;border-color:#B57A00}
.bprog{background:linear-gradient(120deg,color-mix(in srgb,var(--bk) 22%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--bk) 45%,var(--line));border-radius:20px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.bprog b{font-family:var(--f-display);font-size:17px;letter-spacing:.02em}
.mstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mdot{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;opacity:.5}
.mdot b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 12px/1 var(--f-display);background:var(--surface-2);border:2px solid var(--line)}
.mdot small{font-size:10px;line-height:1.15;color:var(--muted)}
.mdot.on{opacity:1}.mdot.on b{background:#FFD23F;color:#2A1A00;border-color:#B57A00}
@media (max-width:520px){.mdot small{display:none}}
.bfilters{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.bcat{display:flex;overflow-x:auto;scrollbar-width:none}
.bcat button{white-space:nowrap}
.frow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fchip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 12px;font-size:14px;font-weight:700;min-height:38px}
.fchip[aria-pressed="true"]{background:var(--bk);border-color:var(--bk);color:#fff}
.fsort{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);font-weight:700}
.fsort select{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:7px 8px;font:inherit;font-weight:700;min-height:38px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
@media (min-width:700px){.cgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}}
.cslot{border:0;background:none;padding:0;display:block;border-radius:12px;text-align:inherit}
button.cslot{cursor:pointer;transition:transform .12s}
button.cslot:hover{transform:translateY(-3px)}
/* home tile for the collection */
.colltile{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:12px 16px;margin-bottom:14px;color:var(--ink)}
.colltile .ct-cards{position:relative;width:64px;height:58px;flex:none}
.colltile .ct-cards .ccard{position:absolute;width:38px;top:2px}
.colltile .ct-cards .ccard:nth-child(1){left:0;transform:rotate(-10deg)}.colltile .ct-cards .ccard:nth-child(2){left:22px;transform:rotate(8deg)}
.colltile .ct-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.colltile .ct-tx b{font-family:var(--f-display);font-size:18px}
.colltile .ct-tx small{color:var(--muted);font-size:13px}
.colltile .lightbar{height:8px}
.colltile .sc-go{flex:none;color:var(--sky);font-weight:800}
.shard{flex:none;vertical-align:-3px}

:root[data-theme="light"] .qc-num{background:rgba(10,16,40,.78)}
@media (prefers-reduced-motion:reduce){.ccard .qc-holo{animation:none}.rpack,.rp-shine,.flip.ready,.packbtn .rpack.small{animation:none!important}}
@container (max-width:90px){.qb-tag{display:none}.ccard .qc-name small,.ccard .qc-num{display:none}.ccard .qc-name b{font-size:8px}}
.bstats .sh-link{color:#4FA3FF;font-weight:800}
:root[data-theme="light"] .bstats .sh-link{color:#1E4BE0}
:root[data-theme="light"] .bhead .eyebrow{color:#A86A00}
.rpack.small .rp-face{display:flex;inset:22% 8% 10% 8%}.rpack.small .rp-face>*:not(.rp-logo){display:none}