:root{color-scheme:dark;--bg:#100e17;--panel:#191520;--text:#f3edf7;--muted:#a79bb5;--gold:#d5b985;--purple:#a882ef}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 75% 28%,#35204466,transparent 43%),var(--bg);color:var(--text);font:15px/1.6 system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.6}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:5px}header{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid #ffffff10;padding:20px 5%}.brand{display:flex;align-items:center;gap:14px;color:var(--gold);text-decoration:none;font-size:32px}.brand span{font-size:15px;letter-spacing:3px;font-weight:700}.brand small{display:block;font-size:8px;color:var(--muted);letter-spacing:2px}nav{display:flex;gap:25px}.nav{background:none;border:0;color:var(--muted);padding:12px 0}.nav.active{color:var(--text);border-bottom:2px solid var(--gold)}#nav-count{padding:4px 8px;background:#ffffff09;border-radius:5px;font-size:11px;margin-left:6px}.test,.eyebrow{font-size:10px;letter-spacing:3px;color:var(--gold)}.test{border:1px solid #d5b98533;padding:7px 12px;border-radius:20px;font-size:9px}main{max-width:1400px;margin:auto;padding:0 5%}.hero{min-height:670px;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:45px}.eyebrow{margin-bottom:20px}h1{font:normal clamp(38px,4.6vw,68px)/1.08 "Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;letter-spacing:-1.5px;margin:0 0 25px}h1 em{color:#c4a2f4;font-weight:400}.intro>p{color:var(--muted);max-width:480px;line-height:1.85}.primary,.secondary{border-radius:7px;padding:14px 22px;border:1px solid #aa86db55;color:var(--text);background:#282032}.primary{background:linear-gradient(110deg,#7955b1,#624190);border-color:#b394dc66;box-shadow:0 5px 30px #9c66d515;font-weight:600}.primary:hover{filter:brightness(1.15)}.primary span{font-size:11px;margin-left:30px;opacity:.65}.intro .primary{margin-top:20px}.micro{font-size:10px!important;color:#8e809f!important}.stats{display:flex;gap:40px;margin-top:45px}.stats strong{font:32px "Palatino Linotype","Book Antiqua",Palatino,Georgia,serif}.stats strong span{font-size:19px;color:#756882}.stats small{display:block;font-size:8px;letter-spacing:1.5px;margin-top:7px;color:var(--muted)}.pack-scene{position:relative;display:flex;align-items:center;flex-direction:column;justify-content:center;min-height:570px;isolation:isolate}.orbit{width:470px;height:470px;max-width:100%;border:1px solid #b287dc17;border-radius:50%;position:absolute;z-index:-1;background:radial-gradient(circle,#9161bf25,transparent 70%);box-shadow:0 0 100px #8850aa13}.orbit:after{content:'';position:absolute;inset:30px;border:1px dashed #b287dc18;border-radius:50%}.booster{position:relative;width:270px;height:405px;background:linear-gradient(110deg,#392544,#16131e 50%,#372840);border:1px solid #9e7b5466;box-shadow:15px 30px 55px #0009,inset 3px 0 8px #b79a6530;transform:rotate(7deg);text-align:center;padding:32px 20px;transition:transform .7s,opacity .7s;overflow:hidden}.booster:before,.booster:after{content:'';position:absolute;left:0;right:0;height:13px;background:repeating-linear-gradient(90deg,#967e5833 0 2px,#14111c 2px 5px);border-block:1px solid #ab8b5655}.booster:before{top:0}.booster:after{bottom:0}.pack-top{font-size:9px;letter-spacing:4px;color:var(--gold)}.moon{font:100px Georgia;line-height:1.2;color:var(--gold);text-shadow:0 0 25px #aa6fdb}.paw{position:absolute;top:113px;left:122px;font-size:27px;filter:grayscale(1);opacity:.65}.booster h2{font:26px/1.15 Georgia;letter-spacing:5px;color:#eee0c5;margin:15px 0}.pack-line{width:40px;height:1px;background:var(--gold);margin:20px auto}.booster p{font-size:7px;letter-spacing:1.8px;color:var(--muted)}.booster footer{font-size:8px;color:var(--gold);margin-top:28px;letter-spacing:1px}.booster b{padding:0 12px}.scene-caption{margin-top:48px;font-size:8px;letter-spacing:2px;color:#96849e}.booster.tearing{transform:translateY(-40px) rotate(-8deg) scale(1.15);opacity:0}.season-note{border-block:1px solid #ffffff10;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}.season-note span{font-size:8px;color:#9986ab;letter-spacing:1.5px}.season-note p{font:20px "Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;color:#cec0da}.section-head{margin:65px 0 35px}.section-head h1{font-size:42px}.section-head p{color:var(--muted)}.collection-head{display:flex;align-items:center;justify-content:space-between;gap:25px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 22px}.draws{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.card-button{display:block;width:100%;padding:0;background:none;color:inherit;border:0;text-align:left}.art{position:relative;aspect-ratio:2/3;border-radius:10px;overflow:hidden;border:1px solid #8f7da73b;background:#1c1727;display:flex;align-items:center;justify-content:center;transition:transform .3s,box-shadow .3s}.art img{width:100%;height:100%;object-fit:contain}.card-button:hover .art{transform:translateY(-5px);box-shadow:0 12px 35px #0007}.back{background:radial-gradient(circle,#42305255,transparent),repeating-linear-gradient(45deg,transparent 0 12px,#bca3d005 12px 13px),#1c1727;flex-direction:column;outline:1px solid #a882ef33;outline-offset:-12px;color:var(--gold)}.back .sigil{font:68px Georgia}.back strong{font:16px Georgia;letter-spacing:3px}.back small{font-size:8px;letter-spacing:2px;margin-top:25px;color:#9a86ab}.card-meta{padding:13px 2px}.card-meta small{font-size:9px;letter-spacing:1px;color:var(--rarity,var(--muted))}.card-meta h3{font:600 16px/1.35 "Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;margin:5px 0;color:#ddd4e7}.badge{display:inline-block;background:#30253e;border:1px solid #9e79c645;border-radius:4px;padding:2px 7px;font-size:9px;color:#d5bff2;margin:5px 4px 0 0}.badge.new{color:#e6cd97;border-color:#d5b98555;background:#372e21}.holo:after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 15%,#65e8fc38 28%,#ef8ffc48 38%,#ffe99a30 48%,transparent 60%);background-size:300% 100%;mix-blend-mode:screen;pointer-events:none;animation:shimmer 5s infinite}.revealing .art{animation:reveal .6s ease-out}.actions{text-align:center;margin:35px 0}.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}.filters button{background:none;border:1px solid #ffffff15;border-radius:20px;color:var(--muted);font-size:12px;padding:8px 17px}.filters button.active{background:#32253f;color:#e4d2f7;border-color:#9d75c555}.rules{margin:55px 0 30px;color:var(--muted);font-size:12px;max-width:850px}.rules summary{cursor:pointer;color:#c2b3d0}.site-footer{display:flex;justify-content:space-between;gap:20px;padding:30px 5%;border-top:1px solid #ffffff10;color:#8e7d9f;font-size:8px;letter-spacing:2px}#notice:not(:empty){padding:12px 16px;background:#312718;color:#d9c49c;border:1px solid #baa46533;border-radius:7px;font-size:12px;margin-top:20px}.missing-art{text-align:center;padding:20px;color:#b3a0c5;font-size:12px}.missing-art b{display:block;margin:15px 0;color:var(--gold)}dialog{background:#17121e;color:var(--text);border:1px solid #9270b855;border-radius:14px;max-width:540px;width:90vw;padding:25px}dialog::backdrop{background:#08050de8}#detail-content img{width:100%;max-height:70vh;object-fit:contain}#close-detail{position:absolute;right:7px;top:5px;background:#201827;color:white;border:0;border-radius:50%;width:32px;height:32px;font-size:23px;z-index:2}[hidden]{display:none!important}@keyframes shimmer{to{background-position:-300% 0}}@keyframes reveal{from{transform:perspective(800px) rotateY(90deg);opacity:0}to{transform:perspective(800px) rotateY(0);opacity:1}}@media(max-width:900px){header{flex-wrap:wrap}.test{display:none}.hero{gap:10px;min-height:610px}.booster{width:230px;height:380px}.paw{left:103px}.grid{grid-template-columns:repeat(3,1fr)}.draws{grid-template-columns:repeat(3,1fr)}.season-note span:last-child{display:none}.stats{gap:25px}}@media(max-width:600px){header{padding:18px 6%;gap:12px}nav{width:100%;justify-content:space-between}.hero{grid-template-columns:1fr;padding-top:45px}.pack-scene{min-height:500px}.intro h1{font-size:48px}.intro>p{font-size:14px}.grid,.draws{grid-template-columns:repeat(2,1fr);gap:20px 12px}.collection-head{display:block}.section-head h1{font-size:34px}.section-head{margin-top:40px}.site-footer span:nth-child(2){display:none}.season-note p{font-size:16px}.season-note{gap:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

#sound-toggle{white-space:nowrap;padding:8px 12px}#draws .revealed:hover .art{transform:none;box-shadow:none}

/* V0.3.3.4 – UI polish: reserve two title lines so card rows stay aligned. */
.card-meta h3{min-height:2.8em;display:flex;align-items:flex-start}

/* V0.6.0 FINAL – elegant Chronicle typography */
.eyebrow,.card-meta small,.section-head p,.scene-caption,.season-note span{font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;letter-spacing:.12em}.card-meta h3{letter-spacing:.01em}.section-head h1{font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif}.intro h1 em{font-style:italic;text-shadow:0 0 22px #a882ef33}

/* Collection polish: scoped to the album only. */
#collection .section-head h1,#collection .collection-season h2,#collection .card-meta h3{font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;font-weight:400;letter-spacing:.045em}
#collection .section-head h1{line-height:1.2;font-variant-caps:small-caps}
#collection .section-head p{font-family:system-ui,sans-serif;letter-spacing:normal}
#collection .collection-season{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 26px;margin:0 0 26px;border:1px solid #d5b98535;border-radius:12px;background:linear-gradient(110deg,#d5b9850c,#a882ef09)}
#collection .collection-season .eyebrow{font:10px/1.6 system-ui,sans-serif;letter-spacing:.22em}
#collection .collection-season h2{margin:4px 0 0;font-size:24px;color:#e5d4b5}
#collection .collection-progress-wrap{width:230px;max-width:100%;flex-shrink:0}
#collection .collection-progress-wrap label{display:block;margin-bottom:10px;font-size:12px;letter-spacing:.06em;color:#e5d4b5}
#collection progress{appearance:none;display:block;width:100%;height:5px;border:0;border-radius:99px;overflow:hidden;background:#ffffff0d;accent-color:#d5b985}
#collection progress::-webkit-progress-bar{background:#ffffff0d}
#collection progress::-webkit-progress-value{background:linear-gradient(90deg,#a882ef,#d5b985);border-radius:99px}
#collection progress::-moz-progress-bar{background:linear-gradient(90deg,#a882ef,#d5b985);border-radius:99px}
#collection .card-meta h3{font-size:17px;line-height:1.5;color:#eadff1;margin:5px 0 6px}
/* Fixed collection slots keep optional badges from changing card alignment. */
#collection .card-button{display:flex;flex-direction:column;justify-content:flex-start;min-width:0}
#collection .card-button>.art{width:100%;flex-shrink:0}
#collection .card-meta{width:100%;padding-bottom:14px;border-bottom:1px solid transparent;display:grid;grid-template-rows:24px auto 54px 26px}
#collection .card-meta h3{height:4.5em}
#collection .collection-indicators{display:grid;grid-template-rows:27px 27px;align-items:start;justify-items:start;min-width:0}
#collection .collection-count,#collection .collection-status{grid-row:1;grid-column:1;white-space:nowrap}
#collection .collection-holo-badge{grid-row:2;grid-column:1;white-space:nowrap}
#collection .collection-hidden{cursor:default}
#collection .collection-hidden h3{letter-spacing:.2em;color:#b7a7c5}
#collection .collection-status{font:11px/1.6 system-ui,sans-serif;color:var(--muted)}
#collection .collection-count{font:600 11px/1.5 system-ui,sans-serif;color:#eadfcb;background:#d5b9850d;border-color:#d5b98540;border-radius:99px;padding:2px 8px}
#collection .collection-holo .art{border-color:#c5aeed;box-shadow:0 0 0 1px #9cdbe52b,0 0 20px #b38bed24}
#collection .collection-holo-badge{color:#eee5ff;border-color:#c6a7ef77;background:linear-gradient(110deg,#28424b,#49304d,#453d2c);letter-spacing:.08em}
#collection .collection-panorama .card-meta{border-bottom:1px solid #d5b98555;padding-bottom:14px}
#collection .collection-panorama-label{display:block;margin-top:9px;font-size:10px;letter-spacing:.06em;color:#dcc69e}
#collection .collection-panorama-label span{margin-left:5px;color:#a99abb}
@media(max-width:600px){#collection .collection-season{align-items:flex-start;flex-direction:column;gap:16px;padding:18px}#collection .collection-progress-wrap{width:100%}#collection .collection-season h2{font-size:22px}#collection .card-meta h3{font-size:15px;letter-spacing:.02em}}
/* Season 0: sealed booster presentation. */
#pack-opening {text-align:center; overflow:hidden; padding-bottom:24px; scroll-margin-top:20px}
#pack-opening .section-head {margin-bottom:0}
#pack-opening h1 {font-size:clamp(28px,4vw,46px)}
.pack-theatre {position:relative;isolation:isolate;width:min(100%,650px);height:clamp(330px,52vh,510px);margin:0 auto;display:grid;place-items:center;cursor:pointer}
.sealed-pack {position:relative;height:88%;aspect-ratio:2/3;z-index:3;filter:drop-shadow(0 18px 24px #0009)}
.sealed-pack img {position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pack-body {clip-path:polygon(9% 12%,22% 11.6%,36% 12.4%,50% 11.8%,65% 12.4%,79% 11.7%,90% 12%,91% 96%,9% 96%)}
.pack-seal {clip-path:polygon(9% 5%,90% 5%,90% 12%,79% 11.7%,65% 12.4%,50% 11.8%,36% 12.4%,22% 11.6%,9% 12%)}
.pack-glow {position:absolute;inset:12% 15%;border-radius:50%;background:radial-gradient(ellipse,#b777df55,transparent 65%);z-index:0}
.pack-fan {position:absolute;inset:0;z-index:2;pointer-events:none}
.pack-fan>div {position:absolute;left:50%;top:42%;width:clamp(68px,14vw,105px);aspect-ratio:2/3;border:1px solid #caa965;border-radius:7px;background:linear-gradient(135deg,#20172f,#3e2353,#171020);box-shadow:0 4px 20px #0008,inset 0 0 0 5px #201829;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#e2c283;opacity:0;transform:translate(-50%,0) scale(.65)}
.pack-fan span {font-size:35px}.pack-fan small{font-size:9px;letter-spacing:2px;line-height:1.5}
.pack-controls {position:relative;z-index:4;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.pack-controls .micro{flex-basis:100%;margin:0}
.pack-sparks {position:absolute;top:25%;left:50%;z-index:4;pointer-events:none}
.pack-sparks i {position:absolute;width:4px;height:4px;border-radius:50%;background:#edcf8c;box-shadow:0 0 10px #c18bff;opacity:0}
.unsealing .pack-seal {animation:sp-seal 1.75s ease-out both}
.unsealing .pack-body {animation:sp-body 1.75s ease-in both}
.unsealing .pack-glow {animation:sp-light 1.75s ease-out both}
.unsealing .pack-fan>div {animation:sp-fan 1.75s cubic-bezier(.2,.7,.2,1) both}
.unsealing .pack-sparks i {animation:sp-spark 1.3s ease-out var(--delay) both}
@keyframes sp-seal {0%{transform:none}22%{transform:translate(8%,-20%) rotate(-8deg);opacity:1}65%,100%{transform:translate(24%,-38%) rotate(18deg);opacity:0}}
@keyframes sp-body {0%,20%{transform:none;opacity:1}65%{opacity:1}100%{transform:translateY(24%) scale(.92);opacity:0}}
@keyframes sp-light {0%{opacity:.4;transform:scale(.7)}35%{opacity:1;transform:scale(1.5);background:radial-gradient(ellipse,#f5d38dcc,#b46cff99 30%,transparent 65%)}100%{opacity:0;transform:scale(1.8)}}
@keyframes sp-fan {0%,18%{opacity:0;transform:translate(-50%,0) scale(.65)}40%{opacity:1}80%,100%{opacity:1;transform:translate(calc(-50% + var(--i)*75%),-65%) rotate(calc(var(--i)*10deg)) scale(1)}}
@keyframes sp-spark {0%,15%{opacity:0;transform:translate(0,0)}30%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y))}}
@media(max-width:600px){.pack-theatre{height:clamp(300px,49svh,430px)}#pack-opening .section-head p{font-size:13px}.pack-controls{gap:8px}.pack-controls button{min-height:44px}}
@media(prefers-reduced-motion:reduce){#pack-opening *{animation:none!important}}

/* Permanent Chronicles card back, shared across seasons. Keep the complete artwork. */
.art.back,.pack-fan>div{background:#100e17 url("assets/chronicles-card-back.png") center / contain no-repeat;outline:none;border:0;border-radius:0}
.pack-fan>div{box-shadow:0 4px 20px #0008}

/* Booster reveal: one stable viewport and two coincident faces. */
#draws .card-button{align-self:start}
#draws .reveal-slot{position:relative;width:100%;aspect-ratio:2/3;border-radius:10px;perspective:800px;margin:auto}
#draws .reveal-turn{position:absolute;inset:0;border-radius:inherit;transform-origin:50% 50%;transform-style:preserve-3d;transition:transform .6s ease-out}
#draws .revealed .reveal-turn{transform:rotateY(180deg)}
#draws .reveal-turn>.back,#draws .reveal-front{position:absolute;inset:0;width:100%;height:100%;min-width:0;margin:0;border-radius:inherit;transform-origin:50% 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#draws .reveal-front{transform:rotateY(180deg)}
#draws .reveal-turn .art{width:100%;height:100%;min-width:0;margin:0;aspect-ratio:2/3;border:1px solid #8f7da73b;border-radius:10px;transform:none;animation:none;transition:none;box-shadow:none}
#draws .reveal-turn>.back{background-size:cover;background-position:center}
#draws .reveal-front img{display:block;object-fit:contain;object-position:center}
@media(max-width:600px){#draws .reveal-slot{width:min(100%, calc(53svh * 2 / 3));min-width:170px}}
@media(prefers-reduced-motion:reduce){#draws .reveal-turn{transition:none}}

/* Season hero: use the same complete artwork as the booster opening. */
#home .booster{height:auto;aspect-ratio:2/3;padding:0;border:0;background:none;overflow:visible}
#home .booster::before,#home .booster::after{content:none}
#home .booster>img{display:block;width:100%;height:auto}
