:root{color-scheme:dark;--bg:#0b1020;--panel:#171d32;--panel2:#1e263d;--line:#333b56;--txt:#f2f5ff;--sub:#a8b2d0;--accent:#85e5c6;--gold:#ffcf69;--shadow:0 20px 55px #03061585}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 70% -20%,#31335a 0,transparent 48%),radial-gradient(ellipse at 0 28%,#1c2940 0,transparent 40%),var(--bg);color:var(--txt);font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.56}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}.app-shell{max-width:1220px;margin:auto;padding:0 24px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:85px;border-bottom:1px solid #ffffff14}.brand{display:flex;align-items:center;gap:12px;line-height:1.07}.brand-mark{display:grid;place-items:center;background:linear-gradient(135deg,#ffdc70,#f5a75c);color:#38250c;width:47px;height:47px;border-radius:14px;font-size:31px;box-shadow:0 6px 23px #e8af5940}.brand strong{display:block;letter-spacing:1.3px;font-weight:900;font-size:17px}.brand small{display:block;color:var(--sub);letter-spacing:2px;margin-top:4px;font-size:9px;font-weight:800}.brand-dot{color:var(--gold)}.header-right{display:flex;align-items:center;gap:10px}.wallet{display:flex;align-items:center;gap:9px;padding:9px 15px;background:#202741;border:1px solid #49496a;border-radius:13px;font-weight:900;font-size:18px;white-space:nowrap}.wallet small{font-size:10px;color:var(--sub);letter-spacing:1px}.icon-btn{border:1px solid var(--line);border-radius:12px;min-height:45px;min-width:46px;background:#222944;color:white}.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;min-height:340px;padding:36px 45px 34px;margin-top:24px;background:radial-gradient(circle at 78% 50%,#4b3b8c90,transparent 42%),linear-gradient(110deg,#1b2942,#20233f 66%,#30264f);border:1px solid #55547770;border-radius:25px;overflow:hidden;position:relative}.hero-copy{z-index:1;align-self:center}.eyebrow,.kicker{color:#8ce7ce;font-weight:900;font-size:10px;letter-spacing:2px}.hero h1{font-size:clamp(36px,5vw,63px);letter-spacing:-2.4px;line-height:1.05;margin:16px 0}.hero h1 span{color:#ffd774}.hero p{color:#c3cee6;max-width:490px;margin:0 0 22px}.hero-pills{display:flex;gap:8px;flex-wrap:wrap}.hero-pills span{font-size:11px;font-weight:700;background:#ffffff16;border:1px solid #ffffff22;padding:7px 10px;border-radius:100px}.hero-art{min-height:255px;position:relative;display:grid;place-items:center}.hero-card{position:absolute;width:182px;height:240px;border-radius:16px;border:5px solid #fff3a9;box-shadow:0 20px 55px #0a0c2899}.hero-card-back{transform:translate(-50px,12px) rotate(-17deg);background:linear-gradient(140deg,#42398a,#242b61);display:grid;place-items:center;font-size:100px;color:#ffdc74}.hero-card-front{transform:translate(54px,4px) rotate(11deg);background:radial-gradient(circle at 60% 35%,#ffeb9d,#ca8c32 65%,#62411e);color:#3c2613;display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:11px}.hero-card-label{font-size:10px;font-weight:1000;letter-spacing:1.7px}.hero-character{font-size:95px;filter:drop-shadow(0 4px 5px #a36c20aa)}.hero-card-front strong{font-size:22px}.hero-card-front small{letter-spacing:3px}.star-s1,.star-s2{position:absolute;font-size:55px;color:#fff0a8}.star-s1{left:7%;top:2%}.star-s2{right:1%;bottom:0}.tabs{display:flex;gap:7px;overflow-x:auto;border-bottom:1px solid var(--line);padding-top:20px;margin-bottom:28px;scrollbar-width:thin}.tab{background:transparent;border:0;border-bottom:3px solid transparent;color:#9cabc6;padding:14px 21px;white-space:nowrap;font-weight:800}.tab:hover{color:white}.tab.active{color:#b4ffe4;border-bottom-color:#7feac6}.count-dot{background:#343d57;border-radius:15px;padding:2px 7px;font-size:11px;margin-left:4px}.page{display:none;min-height:340px}.page.active{display:block}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:25px}.section-heading h2{font-size:29px;margin:4px 0;letter-spacing:-.7px}.section-heading p{color:var(--sub);margin:5px 0 0}.section-tip{border:1px solid var(--line);border-radius:100px;padding:8px 14px;color:#bfd2e9;font-size:12px;white-space:nowrap}.pack-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.pack-tile{border:1px solid #3a4563;background:linear-gradient(160deg,#202842,#171e34);border-radius:19px;padding:19px 16px;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden;text-align:center;min-width:0;transition:transform .2s,border-color .2s}.pack-tile:hover{transform:translateY(-4px);border-color:#697da0}.pack-top{display:flex;justify-content:space-between;width:100%;gap:7px;align-items:center}.pack-label{font-size:10px;font-weight:900;letter-spacing:1px;color:#d0d8e9}.pack-count{font-size:11px;color:var(--sub)}.pack-art{position:relative;margin:22px auto 14px;width:145px;height:190px;max-width:95%;border-radius:15px 15px 22px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:3px solid #ffffff44;box-shadow:0 16px 30px #0006,inset 0 0 24px #fff2;clip-path:polygon(0 0,100% 0,100% 93%,94% 100%,7% 100%,0 93%)}.pack-art:before,.pack-art:after{content:"";position:absolute;left:0;right:0;height:9px;background:repeating-linear-gradient(90deg,#ffffff80 0 8px,#ffffff30 8px 15px)}.pack-art:before{top:4px}.pack-art:after{bottom:4px}.pack-art .pack-emoji{font-size:74px;filter:drop-shadow(0 7px 3px #0004);z-index:1}.pack-art .pack-name{font-size:15px;letter-spacing:1.6px;font-weight:1000;text-shadow:0 2px 4px #0008;z-index:1}.pack-art .pack-mini{font-size:9px;letter-spacing:2px;font-weight:900;z-index:1}.pack-scout{background:radial-gradient(circle at 50% 35%,#91e4b8,#26766d 65%,#153c58)}.pack-forest{background:radial-gradient(circle at 50% 35%,#f2e176,#6baf5d 55%,#266245)}.pack-thunder{background:radial-gradient(circle at 50% 35%,#8fcfff,#4f63bd 60%,#2e2b64)}.pack-galaxy{background:radial-gradient(circle at 50% 35%,#ffdb85,#a560c3 50%,#3d296d)}.pack-tile h3{font-size:19px;margin:4px 0}.pack-desc{color:var(--sub);font-size:12px;line-height:1.45;min-height:36px;margin:0}.pack-odds{color:#c2ccde;font-size:11px;margin:10px 0 14px;min-height:32px}.pack-buy{margin-top:auto;width:100%;border:0;border-radius:11px;background:#83e5c3;color:#112b30;font-weight:1000;padding:12px 8px}.pack-buy.premium{background:linear-gradient(90deg,#ffe39a,#f6bd70)}.pack-buy:disabled{background:#6d768a;color:#d5d9e2}.how-it-works{background:#171f35;border:1px solid var(--line);border-radius:18px;padding:22px;margin-top:32px}.how-it-works h3{margin:0 0 17px;font-size:17px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.steps>div{display:grid;grid-template-columns:35px auto;column-gap:12px;align-items:center}.steps b{grid-row:span 2;display:grid;place-items:center;width:35px;height:35px;border-radius:11px;color:#153f3f;background:#9ceace}.steps strong{font-size:14px}.steps span{font-size:12px;color:var(--sub)}.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 21px}.filter-bar input,.filter-bar select{background:#1c253b;border:1px solid #43506e;border-radius:11px;color:#eff5ff;padding:12px;min-height:46px}.filter-bar input{flex:1;min-width:180px}.filter-bar select{min-width:146px}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:15px}.creature-card{--rarity-color:#86dc9a;position:relative;text-align:left;min-width:0;border-radius:15px;border:2px solid var(--rarity-color);background:linear-gradient(155deg,color-mix(in srgb,var(--rarity-color) 18%,#1c2134),#161b2d 68%);color:#fff;overflow:hidden;padding:9px;box-shadow:0 4px 16px #0003;transition:transform .17s,box-shadow .17s}.creature-card:hover{transform:translateY(-3px);box-shadow:0 9px 25px #0008}.creature-card.legendary{box-shadow:0 0 15px #ffd66e55,inset 0 0 17px #ffe27e20}.creature-card.legendary:before{content:"";position:absolute;inset:-70%;background:linear-gradient(100deg,transparent 42%,#ffffff50 49%,transparent 55%);transform:rotate(20deg);animation:shine 5s linear infinite;pointer-events:none;z-index:2}@keyframes shine{0%{translate:-80% 0}100%{translate:80% 0}}.creature-card.common{--rarity-color:#66cf81}.creature-card.uncommon{--rarity-color:#aeb7c8}.creature-card.rare{--rarity-color:#61baff}.creature-card.epic{--rarity-color:#ba82ff}.creature-card.legendary{--rarity-color:#f7c95f}.card-topline{display:flex;justify-content:space-between;gap:5px;align-items:center;font-size:9px;font-weight:900;letter-spacing:.6px;color:var(--rarity-color);text-transform:uppercase}.card-illustration{display:grid;place-items:center;height:115px;border-radius:9px;margin:7px 0;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--rarity-color) 46%,#34415c),#151c31 76%);font-size:70px;position:relative}.card-illustration span{filter:drop-shadow(0 8px 3px #0007)}.card-name{display:block;font-weight:900;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-sub{display:flex;justify-content:space-between;color:#ccd4e5;font-size:11px;gap:4px;margin-top:4px}.card-grade{background:#ffe3a2;color:#5a3611;padding:1px 5px;border-radius:5px;font-weight:900}.card-shiny{color:#ffe797;font-size:10px}.muted-number{font-weight:500;color:var(--sub);font-size:17px}.empty-state{border:1px dashed #4a5874;border-radius:18px;text-align:center;padding:46px 15px;background:#151e31}.empty-state>div{font-size:55px}.empty-state h3{margin:5px 0}.empty-state p{color:var(--sub)}.primary-btn,.secondary-btn,.danger-outline{border-radius:11px;padding:11px 17px;font-weight:850;min-height:43px}.primary-btn{background:#8debc9;border:0;color:#17352e}.secondary-btn{background:#252e47;color:#e9f1ff;border:1px solid #566483}.danger-outline{background:transparent;color:#ffb0ad;border:1px solid #905054}.lab-note,.progress-panel,.rarity-legend,.settings-panel{padding:20px;border:1px solid var(--line);border-radius:17px;background:#1b2338;margin-bottom:24px}.lab-note{color:#dce2f4}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}.stat-tile{background:#1c253b;border:1px solid var(--line);border-radius:16px;padding:22px}.stat-tile strong{display:block;font-size:28px;color:#fce199}.stat-tile span{color:var(--sub);font-size:12px;font-weight:750}.progress-top{display:flex;justify-content:space-between;align-items:center}.progress-top h3,.rarity-legend h3,.settings-panel h3{margin:0 0 12px}.progress-top span{color:var(--gold);font-weight:850}.progress-track{height:13px;background:#0b1426;border-radius:20px;overflow:hidden}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#7fe9cd,#f6d677);border-radius:20px;transition:width .4s}.progress-panel p,.settings-panel p{color:var(--sub);font-size:13px}.legend-items{display:flex;flex-wrap:wrap;gap:9px}.rarity-tag{display:inline-block;padding:6px 10px;border-radius:8px;font-size:12px;font-weight:850;border:1px solid currentColor}.rarity-tag.common{color:#77db8b;background:#28513a55}.rarity-tag.uncommon{color:#b4c1d3;background:#52607444}.rarity-tag.rare{color:#78c7ff;background:#286a9a44}.rarity-tag.epic{color:#c491ff;background:#673c9244}.rarity-tag.legendary{color:#ffe080;background:#9c712944}footer{padding:35px 0;margin-top:35px;color:#7c8ba9;text-align:center;border-top:1px solid #29344c;font-size:12px}footer span{padding:0 8px}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);padding:12px 18px;border-radius:12px;color:#152b2a;background:#a6f2d3;box-shadow:var(--shadow);font-weight:850;opacity:0;transition:.25s;pointer-events:none;z-index:20;max-width:90vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.overlay{position:fixed;inset:0;background:#050917d9;z-index:10;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}.modal{background:linear-gradient(145deg,#222b46,#151d34);border:1px solid #637193;border-radius:22px;max-width:750px;width:100%;max-height:min(94dvh,950px);overflow-y:auto;box-shadow:var(--shadow);padding:24px;position:relative}.modal-head{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:16px}.modal-head h2{margin:0;font-size:25px}.modal-head p{margin:4px 0 0;color:var(--sub);font-size:13px}.close-modal{border:1px solid var(--line);background:#2b3651;color:white;border-radius:10px;font-size:20px;width:40px;height:40px;flex-shrink:0}.pull-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:13px;margin-bottom:16px}.pull-card{min-height:210px;border:0;background:none;padding:0;perspective:800px;color:white}.pull-inner{position:relative;width:100%;height:210px;transition:transform .5s;transform-style:preserve-3d}.pull-card.revealed .pull-inner{transform:rotateY(180deg)}.pull-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;overflow:hidden}.pull-back{display:grid;place-items:center;align-content:center;gap:13px;background:radial-gradient(circle,#4059a0,#232858 70%);border:3px solid #9aaef3;box-shadow:inset 0 0 0 4px #26396d}.pull-back span{font-size:62px;color:#f7d675}.pull-back small{font-weight:850;letter-spacing:1px;color:#c8d5f7}.pull-front{transform:rotateY(180deg)}.pull-front .creature-card{height:100%;width:100%;cursor:default}.modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}.modal-actions>button{flex:1 1 135px}.detail-layout{display:grid;grid-template-columns:210px 1fr;gap:23px;align-items:start}.detail-layout>.creature-card{width:100%;cursor:default}.detail-layout .card-illustration{height:170px;font-size:100px}.detail-info h3{font-size:24px;margin:0 0 5px}.detail-info>p{color:var(--sub);margin:4px 0 16px}.detail-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}.detail-meta div{background:#111a30;border-radius:10px;padding:10px}.detail-meta span{display:block;color:var(--sub);font-size:11px}.detail-meta strong{font-size:17px}.detail-buttons{display:flex;flex-direction:column;gap:9px}.detail-buttons button{width:100%}.detail-note{font-size:12px;color:var(--sub);margin-top:10px}.confirm-text{color:#d4ddf1}.confirm-box{display:flex;gap:12px;align-items:center;background:#121b2f;border-radius:12px;padding:13px;margin:14px 0}.confirm-box span{font-size:40px}.confirm-box strong{display:block}.confirm-box small{color:var(--sub)}@media(max-width:900px){.pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{padding:26px}.stat-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.app-shell{padding:0 13px}.topbar{min-height:72px}.brand-mark{width:37px;height:37px;font-size:25px}.brand strong{font-size:13px}.brand small{font-size:8px;letter-spacing:1px}.wallet{font-size:15px;padding:7px 9px;gap:5px}.wallet small{display:none}.icon-btn{min-width:37px;min-height:39px}.hero{grid-template-columns:1fr;padding:25px 20px;margin-top:15px;gap:5px}.hero h1{font-size:42px;letter-spacing:-1.8px}.hero p{font-size:13px}.hero-art{min-height:190px}.hero-card{width:120px;height:162px;border-width:3px}.hero-card-back{transform:translate(-40px,7px) rotate(-16deg);font-size:60px}.hero-card-front{transform:translate(36px,0) rotate(11deg);padding:4px}.hero-card-label{font-size:7px}.hero-character{font-size:61px}.hero-card-front strong{font-size:16px}.hero-card-front small{font-size:9px}.star-s1,.star-s2{font-size:30px}.tabs{margin-bottom:23px;padding-top:10px}.tab{padding:12px 12px;font-size:12px}.section-heading{align-items:start;flex-direction:column;margin-bottom:19px}.section-heading h2{font-size:24px}.section-tip{font-size:11px}.pack-grid{gap:10px}.pack-tile{padding:12px 9px;border-radius:14px}.pack-art{width:115px;height:147px;margin:15px auto 11px}.pack-art .pack-emoji{font-size:52px}.pack-art .pack-name{font-size:12px}.pack-art .pack-mini{font-size:8px}.pack-tile h3{font-size:16px}.pack-label,.pack-count{font-size:9px}.pack-desc,.pack-odds{font-size:10px}.pack-buy{font-size:12px;padding:10px 5px}.steps{grid-template-columns:1fr;gap:16px}.filter-bar input{flex-basis:100%}.filter-bar select{flex:1;min-width:120px}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card-illustration{height:105px}.stat-tile{padding:15px}.stat-tile strong{font-size:23px}.modal{padding:15px;border-radius:18px}.modal-head h2{font-size:20px}.pull-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pull-inner{height:202px}.pull-card{min-height:202px}.pull-front .card-illustration{height:96px}.detail-layout{grid-template-columns:1fr}.detail-layout>.creature-card{max-width:230px;margin:auto}.detail-info h3{text-align:center}.detail-info>p{text-align:center}.detail-meta strong{font-size:15px}footer{font-size:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}