@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#101216;--panel:#1b1e24;--line:#303339;--text:#f4f4ed;--muted:#969ba5;--lime:#d3f79a;--rarity:#bcc4d2}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--lime);outline-offset:5px}button{color:inherit}a{color:inherit;text-decoration:none}header{height:92px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:20px;padding:0 5vw;position:relative;z-index:2}h1,h2,h3,.brand,strong{font-family:'Space Grotesk',sans-serif}header .brand{margin-right:auto}.brand{font-weight:700;letter-spacing:-1px;font-size:20px;white-space:nowrap}.brand>span:last-child{color:var(--lime)}.brandmark{display:inline-grid;place-items:center;color:var(--lime);font-size:34px;vertical-align:middle;margin-right:9px}nav{display:flex;gap:8px}nav button{background:none;border:0;border-radius:8px;padding:12px 16px;color:var(--muted);font-size:14px}nav button.active{background:#292e25;color:var(--lime)}#nav-count{font-size:11px;margin-left:6px}.wallet{padding:12px 16px;border:1px solid var(--line);border-radius:10px;font-size:14px;white-space:nowrap}.wallet>span{color:#bb9af5}.wallet small{color:var(--muted);font-size:9px;margin-left:5px}.icon-button{background:none;border:1px solid var(--line);border-radius:50%;width:36px;height:36px;color:var(--muted)}.icon-button.on{color:var(--lime)}main{max-width:1440px;margin:auto;padding:42px 5vw 0}.page{display:none}.page.active{display:block;animation:appear .3s}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.eyebrow,.tiny-label{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--lime)}h1{font-size:clamp(35px,4.1vw,58px);line-height:1.08;letter-spacing:-2.6px;font-weight:500;margin:16px 0}h1>span{color:var(--lime)}.sub{color:var(--muted);font-size:14px;line-height:1.7}.season{font-size:11px;letter-spacing:1.7px}.season small{display:block;letter-spacing:0;color:var(--muted);margin-top:12px}.live-dot{display:inline-block;width:6px;height:6px;background:var(--lime);border-radius:100%;margin-right:8px;box-shadow:0 0 15px var(--lime)}.hatch-layout{display:grid;grid-template-columns:1fr 330px;gap:24px}.arena{min-height:560px;position:relative;overflow:hidden;border:1px solid #3c4138;border-radius:18px;background:radial-gradient(ellipse at 50% 32%,#353e2c 0%,#222920 35%,#1c211d 70%)}.arena-top{display:flex;justify-content:space-between;align-items:center;padding:24px;position:relative;z-index:1}.pill{font-size:10px;letter-spacing:1.4px;padding:8px 11px;border:1px solid #59624b;border-radius:6px;color:var(--lime)}#arena-status{font-size:11px;color:#a9af9e}.orbital{position:absolute;border:1px solid #8ba76c14;width:480px;height:480px;border-radius:50%;left:50%;top:47%;transform:translate(-50%,-50%)}.orbital.two{width:620px;height:620px}.specks{position:absolute;inset:0;background-image:radial-gradient(circle at 22% 25%,#d3f79a80 1px,transparent 2px),radial-gradient(circle at 76% 40%,#d3f79a80 1px,transparent 2px),radial-gradient(circle at 72% 20%,#d3f79a70 2px,transparent 3px),radial-gradient(circle at 35% 52%,#d3f79a70 1px,transparent 2px)}.egg-scene{height:260px;position:relative;display:grid;place-items:center;--rarity:#c6dd9b}.egg-wrap{animation:float 4s ease-in-out infinite;z-index:1}.egg{width:145px;height:185px;border-radius:49% 51% 47% 46% / 62% 62% 39% 38%;background:radial-gradient(ellipse at 34% 20%,#fffff5 0%,var(--rarity) 27%,#596447 80%,#253327 100%);position:relative;box-shadow:inset -12px -13px 20px #0008,inset 4px 4px 9px #fff6,0 0 45px color-mix(in srgb,var(--rarity) 20%,transparent);transform:rotate(-8deg)}.egg:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(125deg,transparent 45%,#ffffff30 46%,transparent 48%);border:1px solid #ffffff40}.egg i{position:absolute;inset:20% 15%;border-radius:50%;border:1px solid #ffffff30;transform:rotate(-20deg)}.egg b{position:absolute;top:43%;left:38%;font-size:37px;color:#f3ffd8;text-shadow:0 0 20px white}.cracks{position:absolute;inset:0;width:100%;height:100%;opacity:0;filter:drop-shadow(0 0 4px white)}.cracks path{stroke:#fffce3;stroke-width:3;fill:none;stroke-linejoin:round}.pedestal{width:220px;height:35px;background:radial-gradient(ellipse,#b7d78b44,#131a1080 60%,transparent 70%);position:absolute;bottom:9px}.aura{position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rarity) 25%,transparent),transparent 68%);pointer-events:none}.arena-bottom{position:relative;text-align:center;padding:12px 20px 26px}.tiny-label{color:#b9c5a9;font-size:9px}.arena-bottom h2{font-size:25px;font-weight:500;letter-spacing:-.8px;margin:12px 0}.arena-bottom p{color:#a4ad9c;font-size:12px}.primary{background:var(--lime);color:#172014;border:1px solid #e4ffc3;border-radius:9px;padding:15px 24px;font-weight:700;box-shadow:0 4px 0 #869e60;transition:transform .15s,filter .15s}.primary:hover{filter:brightness(1.08);transform:translateY(-2px)}.primary:active{transform:translateY(3px);box-shadow:0 1px 0 #869e60}.primary span{margin-left:30px}.arena-bottom .primary{margin-top:13px;min-width:245px}.arena-bottom small{display:block;font-size:8px;letter-spacing:1.8px;color:#94a084;margin-top:18px}.progress-card{background:var(--panel);border:1px solid var(--line);padding:25px;border-radius:16px}.section-kicker{font-size:9px;letter-spacing:1.7px;color:var(--muted);display:flex;justify-content:space-between}.progress-card h3{font-size:22px;font-weight:500;line-height:1.3;letter-spacing:-.6px;margin:20px 0}.stats{display:flex;gap:35px;margin:25px 0 20px}.stats strong{display:block;font-size:34px;font-weight:500}.stats strong span{font-size:18px;color:#666c75}.stats small{font-size:8px;color:var(--muted);letter-spacing:1.4px}.progress-track{height:4px;background:#353a40;border-radius:4px;margin-bottom:22px}.progress-track i{display:block;background:var(--lime);height:100%;border-radius:4px;transition:width .5s}.rarity-row{display:flex;align-items:center;font-size:12px;margin:15px 0;color:#c6c9cf}.rarity-row i{height:7px;width:7px;border-radius:50%;background:var(--color);margin-right:10px}.rarity-row span:last-child{margin-left:auto;color:#7f8590;font-size:11px}.text-button{background:none;border:0;font-size:12px;padding:10px 0;color:var(--lime)}.progress-card .text-button{border-top:1px solid var(--line);width:100%;text-align:left;margin-top:10px;padding-top:18px}.text-button span{float:right}.tip-card{display:flex;gap:15px;margin-top:20px;padding:21px;border:1px solid var(--line);border-radius:14px}.tip-card>span{color:var(--lime);font-size:28px}.tip-card h4{font-size:13px;margin:0 0 9px}.tip-card p{font-size:11px;line-height:1.7;color:var(--muted);margin:0}.tip-card button{font-size:10px;border:0;background:none;padding:10px 0 0;color:var(--lime)}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:35px 0 20px}.section-heading h2{font-size:22px;font-weight:500;letter-spacing:-.6px}.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.shop-card{background:linear-gradient(130deg,color-mix(in srgb,var(--rarity) 9%,#181b20),#181b20);border:1px solid var(--line);border-radius:14px;padding:22px;position:relative;overflow:hidden}.shop-card .mini-egg{height:135px;display:grid;place-items:center}.mini-egg .egg{width:75px;height:96px}.mini-egg .egg b{font-size:23px;left:36%;top:38%}.shop-card h3{font-size:20px;font-weight:500;margin:10px 0}.shop-card p{font-size:12px;color:var(--muted);line-height:1.6}.shop-card .badge{font-size:8px;letter-spacing:1.4px;color:var(--rarity);border:1px solid color-mix(in srgb,var(--rarity) 30%,transparent);padding:5px 7px;border-radius:4px}.shop-buy{display:flex;width:100%;justify-content:space-between;padding:13px;margin-top:20px;border:1px solid #44494e;border-radius:7px;background:#ffffff07;font-size:12px}.shop-buy:hover{background:#ffffff12;border-color:var(--rarity)}.shop-buy b{color:var(--rarity)}.odds-copy{font-size:10px!important}.test-banner{border:1px solid #464339;background:#24251d;padding:16px 20px;margin:30px 0;display:flex;gap:10px;align-items:center;color:#bbbfb1;font-size:12px;border-radius:10px}.test-banner button{margin-left:auto;background:none;color:var(--lime);border:0}.info-panel{padding:25px;border-top:1px solid var(--line);margin-top:30px;color:var(--muted);font-size:13px;line-height:1.8}.info-panel h3{color:var(--text)}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:55px;padding:25px 0;border-top:1px solid var(--line);color:var(--muted);font-size:11px}footer .brand{font-size:13px}footer small{font-size:9px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}.filters button{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:10px 14px;color:var(--muted);font-size:12px}.filters button.active{background:var(--lime);color:#172014;border-color:var(--lime)}.search{border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;padding:10px 14px;color:var(--muted)}.search input{background:none;border:0;color:var(--text);padding:5px;max-width:170px}#collection-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.monster-card{padding:0;text-align:left;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);transition:transform .2s,border-color .2s}.monster-card:hover{transform:translateY(-5px);border-color:var(--rarity)}.monster-art{position:relative;aspect-ratio:1;overflow:hidden}.monster-art img{width:100%;display:block}.monster-card.locked img{filter:grayscale(1) brightness(.23);opacity:.65}.locked-icon{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;color:#ffffff90}.monster-card .card-info{padding:15px}.card-info small{font-size:8px;letter-spacing:1.4px;color:var(--rarity);text-transform:uppercase}.card-info h3{font-size:15px;font-weight:500;margin:7px 0 0}.owned-count{position:absolute;right:10px;top:10px;border-radius:5px;background:#101216c9;padding:5px 8px;font-size:10px}.empty{grid-column:1/-1;text-align:center;padding:60px;color:var(--muted)}dialog{background:#13161d;color:var(--text);border:1px solid #424751;border-radius:22px;padding:36px;width:min(560px,94vw);max-height:94dvh;overflow:auto;box-shadow:0 30px 150px #000b}dialog::backdrop{background:#06080de0;backdrop-filter:blur(10px)}.close{position:absolute;right:18px;top:14px;border:0;background:#ffffff0a;color:var(--muted);border-radius:50%;width:32px;height:32px;font-size:23px;z-index:4}#hatch-dialog{text-align:center;--rarity:#bcc4d2;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--rarity) 15%,#12151c),#12151c 65%);overflow:hidden}#hatch-dialog h2{font-size:30px;letter-spacing:-1px;margin:14px 0 20px;font-weight:500}.rarity-pill{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2px;background:color-mix(in srgb,var(--rarity) 12%,transparent);border:1px solid color-mix(in srgb,var(--rarity) 45%,transparent);color:var(--rarity);padding:8px 14px;border-radius:30px}#tap-egg{display:grid;place-items:center;width:100%;height:280px;border:0;background:none;position:relative;isolation:isolate;touch-action:manipulation}#tap-egg .egg{width:160px;height:205px;transition:background .25s;z-index:1}#tap-egg:hover .egg{filter:brightness(1.07)}#tap-message{height:30px;font-size:20px;font-family:'Space Grotesk',sans-serif;color:var(--rarity)}#tap-dots{display:flex;gap:10px;justify-content:center;margin:20px 0 12px}#tap-dots i{width:32px;height:5px;background:#363b43;border-radius:5px}#tap-dots i.done{background:var(--rarity);box-shadow:0 0 12px var(--rarity)}#tap-counter{font-size:12px;color:#aeb3bd}#upgrade-odds{color:#737b89;font-size:10px}#particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:9}.particle{position:absolute;left:50%;top:47%;height:6px;width:6px;border-radius:2px;background:var(--rarity);box-shadow:0 0 12px var(--rarity);animation:burst .8s ease-out forwards}.ring{position:absolute;left:50%;top:45%;width:40px;height:40px;border:2px solid var(--rarity);border-radius:50%;animation:ring .65s ease-out forwards}.hit .egg{animation:hit .3s ease-out}.upgrade{animation:flash .6s}.reveal-art{position:relative;max-width:310px;margin:15px auto 0}.reveal-art img{width:100%;border-radius:16px;border:1px solid var(--rarity);box-shadow:0 0 60px color-mix(in srgb,var(--rarity) 20%,transparent)}.reveal-art .rarity-pill{margin-top:-17px;position:relative;background:#181b24}#reveal-stage{animation:reveal .65s cubic-bezier(.12,.9,.3,1.2)}#reveal-stage h2{margin-bottom:10px}#reveal-stage p:not(.eyebrow){font-size:13px;color:var(--muted)}#reveal-stage .primary{display:block;margin:22px auto 10px;min-width:240px}#reveal-stage .text-button{display:block;margin:auto}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:#e2f9bd;color:#1c2714;padding:14px 22px;border-radius:10px;font-size:13px;z-index:99;opacity:0;transition:.2s;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}#info-content{font-size:13px;line-height:1.8;color:var(--muted)}#info-content h2{color:var(--text);font-size:26px;line-height:1.2}#info-content img{max-width:100%;border-radius:12px}.shake{animation:shake .28s}@keyframes float{50%{transform:translateY(-12px) rotate(3deg)}}@keyframes hit{15%{transform:scale(.89) rotate(-13deg)}45%{transform:scale(1.1) rotate(9deg)}75%{transform:rotate(-5deg)}}@keyframes burst{to{transform:translate(var(--x),var(--y)) rotate(250deg);opacity:0}}@keyframes ring{to{transform:translate(-50%,-50%) scale(12);opacity:0}}@keyframes flash{25%{box-shadow:inset 0 0 100px color-mix(in srgb,var(--rarity) 40%,transparent),0 0 90px var(--rarity)}}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@keyframes reveal{from{opacity:0;transform:scale(.65) translateY(25px)}to{opacity:1;transform:none}}@keyframes appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(min-width:1200px){#home-shop .shop-card{padding-left:115px;min-height:190px}#home-shop .mini-egg{position:absolute;left:20px;top:26px}#home-shop .shop-buy{margin-top:15px}}@media(max-width:1050px){header{padding:0 4vw;gap:10px}nav button{padding:10px;font-size:12px}.wallet small{display:none}.hatch-layout{grid-template-columns:1fr 290px;gap:16px}main{padding:30px 4vw 0}.season{display:none}}@media(max-width:760px){header{height:120px;flex-wrap:wrap;padding:12px 5vw;gap:10px}header .brand{font-size:16px}.brandmark{font-size:26px}.wallet{font-size:12px;padding:8px}nav{order:5;width:100%;justify-content:space-between}nav button{flex:1}.icon-button{width:30px;height:30px}.hatch-layout{grid-template-columns:1fr}.intro{margin-bottom:22px}h1{font-size:39px}.sub{font-size:12px}.arena{min-height:520px}.arena-top{padding:18px}#arena-status{font-size:9px}.arena-bottom h2{font-size:22px}aside{display:grid;grid-template-columns:1fr}.progress-card{padding:20px}.progress-card h3{margin:14px 0}.stats{margin:12px 0;gap:35px}#rarity-counts{display:flex;flex-wrap:wrap;gap:0 20px}.rarity-row{gap:5px;font-size:10px;margin:7px 0}.rarity-row i{margin-right:0}.rarity-row span:last-child{margin-left:3px}.tip-card{margin-top:14px}.shop-grid{grid-template-columns:1fr}.shop-card{padding-left:125px;min-height:210px}.shop-card .mini-egg{position:absolute;left:26px;top:35px}.shop-card h3{font-size:21px}.section-heading h2{font-size:18px}.section-heading{align-items:flex-start;flex-wrap:wrap}#collection-grid{grid-template-columns:repeat(2,1fr);gap:12px}.card-info h3{font-size:13px}.monster-card .card-info{padding:12px}.test-banner{flex-wrap:wrap;font-size:11px}.test-banner button{margin-left:0}footer{flex-wrap:wrap}footer>span{display:none}.search{width:100%}.search input{max-width:none;width:100%}dialog{padding:28px 20px}#tap-egg{height:250px}.reveal-art{max-width:270px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}.particle{display:none}}
