:root{--ink:#171a2c;--paper:#f4f0e8;--cream:#fffdf8;--coral:#e3664a;--yellow:#edb94c;--blue:#78a9b9;--line:#d9d2c5;--muted:#716f75;--display:"Playfair Display",serif;--sans:"Noto Sans TC",sans-serif;--mono:"DM Mono",monospace}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);min-height:100vh}.grain{opacity:.32;position:fixed;inset:0;pointer-events:none;z-index:3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E")}.app-shell{max-width:1260px;margin:auto;padding:0 42px 30px}.topbar{height:108px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:13px;color:inherit;text-decoration:none;font:800 22px/16px var(--display);letter-spacing:-.8px}.brand small{font:10px var(--mono);display:block;letter-spacing:1.4px;color:var(--coral);margin-top:6px}.brand-mark{color:var(--cream);background:var(--ink);border-radius:50%;width:37px;height:37px;display:grid;place-items:center;font:800 25px var(--display);font-style:italic}.stat-set{display:flex;gap:35px;text-align:right}.stat-set div+div{border-left:1px solid var(--line);padding-left:35px}.stat-set span{display:block;font:500 14px var(--mono)}.stat-set small{color:var(--muted);font-size:11px}.nav-tabs{display:flex;gap:26px;border-bottom:1px solid var(--line)}button{font-family:inherit;cursor:pointer}.nav-tab{background:none;border:0;color:var(--muted);padding:19px 1px 14px;font-size:13px;position:relative}.nav-tab.active{color:var(--ink);font-weight:700}.nav-tab.active:after{content:"";height:2px;background:var(--coral);position:absolute;bottom:-1px;left:0;right:0}.view{display:none}.view.active{display:block}.hero{display:flex;justify-content:space-between;gap:50px;padding:72px 4px 65px;border-bottom:1px solid var(--line)}.eyebrow{font:500 10px var(--mono);letter-spacing:1.8px;color:var(--coral);margin:0 0 13px}.eyebrow span{color:var(--ink)}h1,h2,p{margin-top:0}h1{font:800 clamp(40px,5.2vw,68px)/1.06 var(--display);letter-spacing:-2.8px;margin-bottom:19px}h1 em{color:var(--coral);font-weight:700}.hero-copy{max-width:530px;line-height:1.85;font-size:14px;color:#585762}.hero-note{align-self:flex-end;width:240px;border-top:2px solid var(--ink);padding-top:11px;margin-bottom:8px}.hero-note span{font:10px var(--mono);color:var(--coral);letter-spacing:1px}.hero-note strong{font:italic 24px var(--display);display:block;margin-top:9px}.hero-note p{font-size:11px;color:var(--muted);line-height:1.65;margin:9px 0}.packs-section,.recent-section{padding:46px 0 38px;border-bottom:1px solid var(--line)}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px}.section-heading h2{font:700 29px var(--display);letter-spacing:-1px;margin:0}.section-heading>p{color:var(--muted);font-size:12px;margin:0}.pack-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.pack{aspect-ratio:3/4;background:var(--ink);position:relative;overflow:hidden;color:var(--cream);text-align:left;border:0;padding:15px;transition:transform .25s,box-shadow .25s}.pack:not(.opened):hover{transform:translateY(-7px) rotate(-1deg);box-shadow:7px 9px 0 var(--coral)}.pack:nth-child(even){background:#2c4d62}.pack:nth-child(3){background:#8c4c46}.pack:before{content:"";position:absolute;border:1px solid rgba(255,255,255,.42);border-radius:50%;width:142%;aspect-ratio:1;top:11%;left:-20%}.pack:after{content:"✦";position:absolute;right:13px;bottom:11px;color:#efcb70;font-size:29px}.pack .pack-letter{font:800 38px var(--display);position:relative;z-index:1}.pack small{font:10px var(--mono);letter-spacing:1px;position:absolute;bottom:17px;left:15px}.pack.opened{background:#d9d2c5!important;color:#777;cursor:not-allowed}.pack.opened:before{border-color:#aaa}.pack.opened:after{content:"✓";color:#777}.recent-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.empty-recent{grid-column:1/-1;color:var(--muted);font-size:14px;padding:18px 0}.text-button{border:0;background:0;color:var(--coral);font-size:12px}.card{background:var(--cream);border:1px solid var(--line);min-width:0;overflow:hidden}.card-art{height:155px;position:relative;display:grid;place-items:center;overflow:hidden}.card-art:before{content:"";position:absolute;width:135px;height:135px;border:1px solid rgba(23,26,44,.25);border-radius:50%;top:20px}.cat{font-size:74px;line-height:1;filter:drop-shadow(3px 6px 0 rgba(23,26,44,.12));position:relative;z-index:1}.card-info{padding:11px 12px 12px}.rarity{font:9px var(--mono);letter-spacing:.8px;text-transform:uppercase}.card-name{font:700 16px var(--display);letter-spacing:-.4px;display:block;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.common .card-art{background:#dfe3cf}.common .rarity{color:#6f7e54}.rare .card-art{background:#cce5e7}.rare .rarity{color:#2e7882}.epic .card-art{background:#e3d4e7}.epic .rarity{color:#86558e}.legendary .card-art{background:#f3dfa7}.legendary .rarity{color:#a57417}.new-badge{background:var(--coral);color:#fff;padding:3px 6px;position:absolute;right:7px;top:7px;font:9px var(--mono);letter-spacing:.6px;z-index:2}.collection-head{display:flex;align-items:center;justify-content:space-between;padding:60px 0 30px}.collection-head h1,.fusion-head h1{font-size:52px;margin-bottom:9px}.collection-head p:not(.eyebrow),.fusion-head p:not(.eyebrow){color:var(--muted);font-size:14px}.progress-ring{width:112px;height:112px;border:8px solid var(--yellow);border-right-color:var(--line);border-radius:50%;display:flex;align-content:center;justify-content:center;flex-wrap:wrap;text-align:center}.progress-ring strong{font:700 31px var(--display)}.progress-ring span{align-self:flex-end;padding:0 0 6px 2px;font:11px var(--mono)}.progress-ring small{width:100%;font-size:10px;color:var(--muted)}.collection-tools{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0;display:flex;justify-content:space-between;gap:18px}.filters{display:flex;gap:7px;flex-wrap:wrap}.filter{background:transparent;border:1px solid transparent;border-radius:20px;padding:6px 12px;color:var(--muted);font-size:12px}.filter.active{border-color:var(--ink);color:var(--ink)}.search{border-bottom:1px solid var(--line);display:flex;gap:7px;align-items:center}.search input{border:0;background:transparent;outline:0;width:145px;font:12px var(--sans)}.collection-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;padding:27px 0}.collection-grid .card-art{height:175px}.collection-grid .card.locked{filter:grayscale(1)}.collection-grid .locked .card-art{background:#dad5cb}.locked .card-art:before{border-color:#b4afa4}.locked .cat{font-size:35px;color:#aaa;filter:none}.locked .card-name{color:#888}.duplicate{font:10px var(--mono);color:var(--muted);margin-top:8px;display:block}.fusion-head{padding:60px 0 25px;border-bottom:1px solid var(--line)}.fusion-board{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;padding:35px 0 20px}.fusion-tier{background:var(--cream);border:1px solid var(--line);padding:20px;min-height:265px;display:flex;flex-direction:column}.fusion-tier h2{font:700 23px var(--display);margin:3px 0}.fusion-tier p{font-size:11px;color:var(--muted);line-height:1.65}.material-count{margin:auto 0 14px;font:28px var(--display)}.material-count span{font:10px var(--mono);color:var(--muted)}.fusion-button,.primary-button{border:0;background:var(--ink);color:#fff;padding:12px 14px;font-size:12px;font-weight:700}.fusion-button:disabled{background:#d4cec2;color:#888;cursor:not-allowed}.fusion-note{font:11px var(--mono);line-height:1.8;color:var(--muted)}.storage-note{text-align:center;color:#999;font-size:10px;margin:45px 0 8px}.modal{position:fixed;inset:0;background:rgba(16,21,44,.76);z-index:10;display:none;align-items:center;justify-content:center;padding:25px}.modal.show{display:flex}.modal-inner{max-width:970px;width:100%;background:var(--paper);position:relative;padding:42px;max-height:92vh;overflow:auto;text-align:center}.modal-inner h2{font:700 35px var(--display);margin:0 0 30px}.close-modal{position:absolute;right:15px;top:10px;border:0;background:transparent;font-size:30px;color:var(--muted)}.reveal-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin-bottom:30px}.reveal-cards .card{animation:pop .5s both}.reveal-cards .card:nth-child(2){animation-delay:.1s}.reveal-cards .card:nth-child(3){animation-delay:.2s}.reveal-cards .card:nth-child(4){animation-delay:.3s}.reveal-cards .card:nth-child(5){animation-delay:.4s}@keyframes pop{from{transform:translateY(25px) scale(.94);opacity:0}to{transform:none;opacity:1}}.primary-button{font-size:14px;padding:14px 24px}.primary-button span{padding-left:14px}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:#fff;padding:12px 19px;font-size:12px;transition:.25s;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:720px){.app-shell{padding:0 19px}.topbar{height:84px}.stat-set{gap:12px}.stat-set div+div{padding-left:12px}.stat-set small{font-size:9px}.brand{font-size:18px}.brand-mark{width:31px;height:31px}.hero{display:block;padding:44px 0}.hero h1{font-size:43px;letter-spacing:-2px}.hero-note{margin-top:34px}.pack-grid{gap:9px}.pack{padding:8px}.pack .pack-letter{font-size:25px}.pack small{font-size:7px;left:8px;bottom:10px}.pack:after{font-size:18px;right:7px;bottom:6px}.recent-cards{grid-template-columns:repeat(2,1fr)}.recent-cards .card:nth-child(n+3){display:none}.collection-head{padding:38px 0 22px}.collection-head h1,.fusion-head h1{font-size:40px}.progress-ring{width:83px;height:83px;border-width:6px}.progress-ring strong{font-size:25px}.collection-tools{display:block}.search{margin-top:11px;width:100%}.search input{width:100%;padding:5px}.collection-grid{grid-template-columns:repeat(2,1fr);gap:11px}.collection-grid .card-art{height:145px}.fusion-board{grid-template-columns:repeat(2,1fr);gap:10px;padding-top:20px}.fusion-tier{padding:14px;min-height:225px}.fusion-tier h2{font-size:18px}.reveal-cards{grid-template-columns:repeat(2,1fr)}.modal-inner{padding:34px 18px}.modal-inner h2{font-size:29px}.reveal-cards .card-art{height:130px}.nav-tabs{gap:20px}}

/* Optimization pass: card art remains the collectible, not a cropped banner. */
.hero{padding:46px 4px 40px}.packs-section{padding-top:32px}.card-art{height:auto;aspect-ratio:2/3;background:#dad5cb}.card-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.card-meta{display:block;font-size:11px;color:var(--muted);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lock-mark{font:700 32px var(--display);color:#aaa;position:relative;z-index:1}.encounter{display:inline-block;margin-top:7px;font:9px var(--mono);letter-spacing:.4px;color:var(--coral)}.encounter.repeat{color:#536f76}.collection-grid .card-art{height:auto;aspect-ratio:2/3}.recent-cards .card-art{aspect-ratio:2/3}.card.locked .card-art{background:#dad5cb}.collection-grid .card{min-height:0}.series-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 0 22px}.series-progress-card{border:1px solid var(--line);background:var(--cream);padding:11px;display:grid;gap:8px}.series-progress-card span{font-size:11px;line-height:1.35}.series-progress-card strong{font:17px var(--display)}.series-progress-card i{display:block;height:4px;background:var(--line);overflow:hidden}.series-progress-card b{display:block;height:100%;background:var(--coral)}.collection-tools{align-items:center;flex-wrap:wrap}.collection-tools select{border:1px solid var(--line);background:var(--cream);font:12px var(--sans);padding:7px 9px;color:var(--ink)}.status-filters{margin-left:auto}.summary-stats{font-size:12px;color:var(--muted);margin:-19px 0 24px}.reveal-cards .card-art{height:auto;aspect-ratio:2/3}.reveal-cards .card-info{text-align:left}.reveal-cards .card{cursor:default}.pack:disabled{opacity:1}.pack:disabled:not(.opened){filter:saturate(.2);cursor:not-allowed}
@media(min-width:1000px){.hero{min-height:270px}.packs-section{padding-top:28px}.pack-grid{max-height:260px}.pack{max-height:250px}}
@media(max-width:720px){.hero{padding:34px 0 28px}.hero-note{margin-top:20px}.packs-section{padding-top:28px}.pack-grid{grid-template-columns:repeat(5,minmax(55px,1fr));gap:7px}.pack{aspect-ratio:3/4}.series-progress{grid-template-columns:repeat(2,1fr);gap:8px}.series-progress-card{padding:9px}.status-filters{margin-left:0}.collection-tools select{width:100%;margin-top:8px}.collection-grid .card-art{aspect-ratio:2/3}.card-name{font-size:15px}.recent-cards .card:nth-child(n+3){display:block}.reveal-cards .card-art{aspect-ratio:2/3}}

/* Round 2: archival packs and legible, image-first catalogue cards. */
.card:not(.locked) .card-art::before{content:none}
.collection-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.collection-grid .card-info{padding:13px 14px 15px}
.collection-grid .card-name{font-size:19px;white-space:normal;line-height:1.15;min-height:2.3em}
.collection-grid .card-meta{font-size:12px;line-height:1.45;white-space:normal;min-height:1.45em}
.collection-grid .encounter{font-size:10px}
.card.locked{filter:none!important;background:#e7e0d4}
.card.locked .card-art{background:linear-gradient(145deg,#c7bbab,#eee7db 56%,#b8ab9b)}
.card.locked .card-art::before{content:"";width:68%;height:45%;top:29%;border:1px solid rgba(80,69,57,.2);border-radius:48% 48% 34% 34%}
.archive-mark{position:absolute;left:0;right:0;top:14px;text-align:center;color:rgba(72,61,52,.62);font:9px var(--mono);letter-spacing:2px;z-index:2}
.archive-silhouette{position:relative;z-index:1;width:42%;aspect-ratio:1/1.12;background:rgba(95,83,70,.45);clip-path:polygon(12% 24%,4% 0,32% 12%,50% 7%,68% 12%,96% 0,88% 24%,100% 57%,89% 88%,67% 100%,33% 100%,11% 88%,0 57%)}
.card.locked .rarity{color:#786c60}.card.locked .card-name{color:#786c60;white-space:normal;font-size:14px;line-height:1.35}
.pack{background:linear-gradient(150deg,#233348,#101a2d);border:1px solid rgba(255,253,248,.22);padding:16px;box-shadow:inset 0 0 0 5px rgba(255,253,248,.045);isolation:isolate}
.pack:nth-child(even){background:linear-gradient(150deg,#355c65,#162f3e)}.pack:nth-child(3){background:linear-gradient(150deg,#9c6152,#4b2930)}
.pack::before{width:108%;aspect-ratio:1;top:19%;left:-4%;border-radius:0;transform:rotate(45deg);border-color:rgba(255,255,255,.2)}
.pack::after{content:"";right:12px;bottom:13px;width:28px;height:28px;border:1px solid rgba(237,185,76,.86);border-radius:50%;background:radial-gradient(circle,#edb94c 0 15%,transparent 18%)}
.pack-kicker{display:block;position:relative;z-index:1;font:8px var(--mono);letter-spacing:1px;color:rgba(255,253,248,.68)}
.pack .pack-letter{display:block;margin-top:22px;font-size:48px}.pack .pack-seal{position:absolute;right:17px;top:42%;z-index:1;color:#edb94c;font-size:23px}.pack small{right:15px;bottom:17px;line-height:1.45}.pack.opened{background:linear-gradient(145deg,#d8d0c2,#b9ad9e)!important;color:#6f6255;border-color:#a29688}.pack.opened::before{border-color:rgba(95,83,70,.25)}.pack.opened::after{content:"✓";display:grid;place-items:center;background:transparent;color:#66584b;border-color:#66584b}.pack.opened .pack-seal{color:#66584b}
.fusion-board{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:1000px){.hero{min-height:0;padding:32px 4px 26px}.hero h1{font-size:clamp(42px,4.4vw,58px)}.packs-section{padding-top:26px}.pack-grid{max-height:none}.pack{max-height:none}.collection-grid .card-art{min-height:0}}
@media(max-width:720px){.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.collection-grid .card-info{padding:10px}.collection-grid .card-name{font-size:16px}.collection-grid .card-meta{font-size:10px}.pack-kicker{font-size:6px}.pack .pack-letter{margin-top:15px;font-size:28px}.pack .pack-seal{right:8px;top:43%;font-size:15px}.fusion-board{grid-template-columns:1fr}.card.locked .card-name{font-size:12px}}

/* Final selected artwork integration. */
#home{position:relative;margin-inline:calc(50% - 50vw);padding-inline:max(42px,calc((100vw - 1260px)/2));background-image:linear-gradient(90deg,rgba(244,240,232,.92),rgba(244,240,232,.58)),var(--home-background);background-size:cover;background-position:center;background-attachment:fixed}
.background-switcher{display:flex;gap:6px;margin-top:16px}.background-switcher button{border:1px solid rgba(23,26,44,.28);background:rgba(255,253,248,.64);padding:5px 8px;font:9px var(--mono);color:var(--ink)}.background-switcher button.active{background:var(--ink);color:var(--cream)}
.pack{background:transparent!important;border:0;box-shadow:none!important;padding:0;overflow:visible;aspect-ratio:2/3}.pack>img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 16px 18px rgba(20,25,42,.23));transition:transform .25s}.pack:hover>img{transform:translateY(-7px) rotate(-1deg)}.pack::before,.pack::after,.pack-kicker{display:none}.pack .pack-letter{position:absolute;left:14%;top:14%;margin:0;font-size:clamp(24px,3vw,40px);color:#fffdf8;text-shadow:0 2px 8px #171a2c;z-index:2}.pack .pack-seal{position:absolute;right:9%;top:18%;font:8px var(--mono);letter-spacing:1px;background:#fffdf8;color:#171a2c;border-radius:20px;padding:5px 7px;z-index:2}.pack small{left:0;right:0;bottom:11%;text-align:center;color:#fffdf8;text-shadow:0 1px 6px #171a2c;z-index:2}.pack.opened>img{filter:grayscale(.25) sepia(.2) drop-shadow(0 8px 10px rgba(20,25,42,.15));clip-path:polygon(0 0,100% 0,100% 92%,58% 92%,51% 98%,44% 92%,0 92%)}.pack.opened .pack-seal{background:#e3664a;color:#fff}.pack.opened{opacity:.88}
.card-art{background:#20263d}.card-art .cat-art{object-fit:contain;background:#20263d}.rarity-frame{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:fill!important;z-index:3;pointer-events:none}.undiscovered-art{display:block;width:100%;height:100%;object-fit:contain;background:#20263d}.card.locked .card-art::before,.archive-mark,.archive-silhouette{display:none!important}
.recent-cards .card,.collection-grid .card{background:rgba(255,253,248,.93)}.recent-cards .card-art,.collection-grid .card-art{aspect-ratio:2/3}
#fusion{position:relative;isolation:isolate;margin-inline:calc(50% - 50vw);padding-inline:max(42px,calc((100vw - 1260px)/2));background:linear-gradient(rgba(15,22,42,.77),rgba(15,22,42,.88)),url("assets/optimization/alchemy/alchemy_room_background.png") center/cover;color:#fffdf8}.fusion-head{border-color:rgba(255,255,255,.24)}.fusion-head p:not(.eyebrow),.fusion-note{color:rgba(255,253,248,.78)}.fusion-tier{background:rgba(18,26,47,.76);border-color:rgba(237,185,76,.42);backdrop-filter:blur(7px)}.fusion-tier p,.material-count span{color:rgba(255,253,248,.72)}.fusion-button{background:#edb94c;color:#171a2c}.fusion-button:disabled{background:rgba(255,255,255,.2);color:rgba(255,255,255,.55)}
@media(max-width:720px){#home,#fusion{margin-inline:-19px;padding-inline:19px;background-attachment:scroll}.background-switcher{justify-content:flex-start}.pack .pack-letter{font-size:20px}.pack .pack-seal{font-size:6px;padding:4px 5px}.pack small{font-size:6px}.pack-grid{gap:4px}}