@font-face{font-family:Paint;src:url('assets/display.ttf') format('truetype');font-display:swap}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:75px}body{margin:0;background:#100c22;color:#fff5e1;font-family:Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}header{position:absolute;z-index:10;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:23px 4%;background:linear-gradient(#0a081bd9,transparent)}.mini-brand{font:23px Paint;color:#ffdf93;letter-spacing:.5px}nav{display:flex;gap:30px;align-items:center;font-size:12px;font-weight:bold}.small-button{border:1px solid #d3a7669c;background:#19102888;border-radius:5px;padding:13px 19px}.hero{height:980px;min-height:850px;position:relative;overflow:hidden;isolation:isolate;background:#140e2d}.cosmos{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 50% 75%,#b838be66,transparent 48%),url('assets/cosmos.webp') center/cover}.hero:after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(#0b082729,transparent 38%,#100c2200 65%,#100c22)}.stars{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(1px 1px at 20% 25%,#fff,transparent),radial-gradient(2px 2px at 75% 40%,#fff7c9,transparent),radial-gradient(1px 1px at 40% 15%,#fff,transparent);background-size:213px 231px;opacity:.6}.hero-title{text-align:center;position:relative;margin:76px auto 0;z-index:4}.emblem{width:95px;height:95px;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 0 25px #ff8c0040)}h1{font:clamp(65px,8vw,112px)/.85 Paint;margin:-6px 0 12px;letter-spacing:-4px;color:#ffe99a;filter:drop-shadow(0 5px 0 #733b1f) drop-shadow(0 8px 10px #000);text-shadow:2px -2px #fff5ce}h1 i{font-size:.52em;font-style:normal;letter-spacing:-2px;color:#f5d2ff}h1 span:last-child{color:#ffbc55}.hero-title p{font-size:12px;font-weight:700;letter-spacing:6px;color:#f2d5ff}.hero-fan{position:relative;width:740px;height:410px;margin:18px auto 0;perspective:1200px}.card{aspect-ratio:1086/1448;position:relative;filter:drop-shadow(0 12px 18px #0009)}.card .art{position:absolute;width:89%;height:79%;left:5.5%;top:4%;object-fit:cover;border-radius:10%}.card .frame{position:absolute;width:100%;height:100%;inset:0;object-fit:fill}.card>span{position:absolute;left:12%;right:12%;bottom:7%;text-align:center;font:24px Paint;color:#462919}.hero-fan .card{position:absolute;width:258px;top:10px;transition:transform .5s}.hero-left{left:60px;transform:rotate(-19deg) translateY(20px)}.hero-right{right:60px;transform:rotate(19deg) translateY(20px)}.hero-front{left:241px;z-index:2;transform:translateY(-12px);animation:float 6s ease-in-out infinite}.hero-fan:hover .hero-left{transform:rotate(-24deg) translate(-12px,15px)}.hero-fan:hover .hero-right{transform:rotate(24deg) translate(12px,15px)}.hero-bottom{text-align:center;margin-top:-7px;position:relative;z-index:3}h2,h3{font-family:Paint;font-weight:400;margin:0;line-height:1.02}h2{font-size:clamp(38px,4.5vw,67px);text-shadow:0 4px 0 #190d30}.hero-bottom h2{font-size:48px}em{font-style:normal;color:#e7b7ff}.hero-bottom h2 br{display:none}.hero-bottom h2 em{margin-left:10px}.gold-button{border:1px solid #ffe9ab;border-bottom:4px solid #9e5923;background:linear-gradient(#ffe2a3,#ffc253 55%,#ef9d34);color:#40210e;display:inline-flex;align-items:center;gap:30px;padding:17px 32px;border-radius:9px;font:22px Paint;box-shadow:0 0 0 4px #4d28546b,0 8px 35px #f5ad3822;transition:transform .2s,filter .2s;margin-top:23px}.gold-button:hover{filter:brightness(1.13);transform:translateY(-3px)}.hero-bottom p{font-size:12px;color:#c9b6d9;letter-spacing:.5px;margin:16px 0}.scroll-cue{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:3px;text-align:center;color:#cbb8dc}.scroll-cue span{display:block;font-size:24px}.collection{position:relative;padding:85px 20px 65px;text-align:center;background:radial-gradient(ellipse at 50% 55%,#42226888,transparent 57%),#100c22;overflow:hidden}.section-heading{position:relative;z-index:2;text-align:center}.chapter{display:block;font-size:10px;color:#d8ad69;font-weight:bold;letter-spacing:3px;margin-bottom:22px}.section-heading p,.community>p{color:#d7c9df;font-size:17px;margin:22px 0}.collection-stage{height:490px;max-width:1000px;position:relative;margin:22px auto}.selected-card{position:absolute;width:300px;left:calc(50% - 65px);top:40px;transform:rotate(9deg);transition:transform .25s}.selected-card.switching{transform:rotate(3deg) scale(.94)}.paint-jar{position:absolute;width:340px;left:calc(50% - 360px);top:125px;filter:drop-shadow(0 10px 35px #782fc887);transform:rotate(-9deg)}.selection-glow{position:absolute;width:650px;height:240px;border-radius:50%;background:radial-gradient(ellipse,#d135e54d,transparent 66%);top:190px;left:calc(50% - 325px);transform:rotate(-18deg)}.orbit-label{position:absolute;top:50px;left:calc(50% - 350px);font:18px/1.3 Paint;letter-spacing:1px;color:#bd9ddc;transform:rotate(-8deg)}.elements{display:flex;gap:13px;justify-content:center;position:relative}.elements button{border:1px solid #5b426f;background:#1f1533;color:#cbb7de;border-radius:30px;padding:13px 20px;font:16px Paint;display:flex;align-items:center;gap:9px;transition:background .2s,transform .2s}.elements button[aria-pressed=true]{background:#583775;border-color:#edc6ff;color:white;box-shadow:0 0 24px #b55be344;transform:translateY(-4px)}.elements i{width:11px;height:11px;background:#ff7b3b;border-radius:50%;box-shadow:0 0 8px currentColor}.elements [data-element=water] i{background:#52bfff}.elements [data-element=grass] i{background:#96db55}.elements [data-element=ice] i{background:#b6faff}.elements [data-element=dark] i{background:#b073ef}.fine{font-size:10px;letter-spacing:.8px;color:#a996bc;margin:20px 0}.battle{position:relative;overflow:hidden;padding:90px 5% 0;background:#101c20;isolation:isolate}.battle-scenery{position:absolute;inset:0;z-index:-1;background:linear-gradient(#100c22,transparent 33%,#100c22),url('assets/forest.webp') center/cover;opacity:.7}.battle em{color:#e0f5a9}.gameplay{display:block;position:relative;width:min(1100px,100%);padding:0;margin:45px auto 0;border:2px solid #bfa269;border-radius:12px;background:#080c17;box-shadow:0 0 0 7px #282334,0 25px 90px #000a;overflow:hidden;transform:rotate(-2deg);transition:transform .3s}.gameplay:hover{transform:rotate(0deg) scale(1.015)}.gameplay img{width:100%;display:block}.gameplay span{position:absolute;bottom:15px;right:15px;background:#100c22dd;border:1px solid #bb9b63;padding:12px 17px;border-radius:4px;color:#ffe9a5;font-size:10px;letter-spacing:1px}.battle>.fine{text-align:center;margin-top:35px}.battle-bottom{display:flex;align-items:center;justify-content:center;gap:55px;max-width:1000px;margin:70px auto 0;padding-bottom:60px}.battle-bottom img{width:160px;transform:rotate(-14deg);filter:drop-shadow(0 15px 25px #000)}.battle-bottom h3{font-size:40px;max-width:550px}.battle-bottom em{color:#d6b4fa}.community{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding:60px 20px 95px;background:#140d28}.community .cosmos{opacity:.45;transform:rotate(180deg)}.community>img{width:145px;height:145px;object-fit:contain;mix-blend-mode:screen}.community .chapter{margin:15px 0 25px}.community h2{font-size:clamp(45px,5.5vw,78px)}.community .invite-note{font-size:11px;margin-top:22px;color:#bfa8cf}.community:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#100c22,transparent 40%,#100c22)}footer{padding:28px 5%;display:flex;justify-content:space-between;border-top:1px solid #ffffff12;color:#af9ac0;font-size:11px}footer span{font:20px Paint;color:#d7b880}dialog{max-width:95vw;width:1300px;background:#100c22;color:#eee;border:1px solid #9776b3;padding:40px 15px 10px;border-radius:12px}dialog::backdrop{background:#03020be8}dialog img{width:100%;display:block}dialog p{text-align:center;font-size:12px}.close-dialog{position:absolute;right:10px;top:2px;font-size:30px;color:white;background:none;border:0}a:focus-visible,button:focus-visible{outline:3px solid #fff0a2;outline-offset:6px}@keyframes float{50%{transform:translateY(-24px) rotate(2deg)}}@media(min-width:1500px){.hero{height:1040px}.hero-fan{margin-top:35px;height:440px}.hero-fan .card{width:285px}.hero-front{left:227px}.hero-left{left:35px}.hero-right{right:35px}}@media(max-width:700px){header{padding:18px 5%}.mini-brand{font-size:18px}nav{gap:0}nav>a:not(.small-button){display:none}.small-button{padding:10px;font-size:10px}.hero{height:840px;min-height:0}.hero-title{margin-top:82px}h1{font-size:63px;letter-spacing:-2px}.emblem{width:75px;height:75px}.hero-title p{font-size:9px;letter-spacing:4px}.hero-fan{width:380px;max-width:100%;height:330px;margin-top:35px}.hero-fan .card{width:190px}.hero-left{left:8px;transform:rotate(-18deg) translateY(20px)}.hero-right{right:8px;transform:rotate(18deg) translateY(20px)}.hero-front{left:calc(50% - 95px)}.card>span{font-size:19px}.hero-bottom h2{font-size:38px}.hero-bottom h2 br{display:block}.hero-bottom h2 em{margin:0}.gold-button{font-size:20px;padding:15px 25px}.hero-bottom p{font-size:11px}.scroll-cue{bottom:15px}.collection{padding:65px 15px 50px}h2{font-size:38px}.section-heading p{font-size:14px}.collection-stage{height:380px;margin:15px auto}.selected-card{width:220px;left:calc(50% - 30px);top:32px}.paint-jar{width:205px;left:calc(50% - 200px);top:130px}.orbit-label{left:15px;top:35px;font-size:11px;max-width:140px}.elements{gap:6px;flex-wrap:wrap}.elements button{font-size:13px;padding:11px 13px;gap:6px}.elements i{width:8px;height:8px}.battle{padding:65px 5% 0}.gameplay{margin-top:30px}.gameplay span{font-size:8px;padding:8px;bottom:8px;right:8px}.battle-bottom{gap:20px;margin-top:45px;padding-bottom:45px}.battle-bottom img{width:100px}.battle-bottom h3{font-size:26px}.community{padding:40px 15px 70px}.community>img{width:115px;height:115px}.community .chapter{font-size:8px;letter-spacing:2px}.community>p{font-size:14px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.hero-title{mix-blend-mode:screen}
@media(max-width:380px){.hero-fan .card{width:175px}.hero-front{left:calc(50% - 87.5px)}.selected-card{width:195px}.paint-jar{width:180px;left:calc(50% - 180px)}}

.hero-title{padding-top:70px}.community>img{width:105px;height:auto;mix-blend-mode:normal;transform:rotate(-9deg);filter:drop-shadow(0 8px 15px #0007)}@media(max-width:700px){.hero-title{padding-top:60px}.scroll-cue{bottom:8px}}
/* Owner-created cards and approved layered brand mark. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hero-title{padding-top:0;mix-blend-mode:normal;margin-top:65px}.approved-logo{position:relative;aspect-ratio:2061/763;width:min(680px,85vw);margin:0 auto;filter:drop-shadow(0 5px 18px #0009)}.approved-logo img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.logo-brush{transform-origin:54.4396% 59.8952%;transform:translate(-1.31%,5.6356%) rotate(-8deg) scale(1.15)}.logo-card{z-index:0}.logo-brush{z-index:1}.logo-monster{z-index:2}.logo-text{z-index:3}.hero-title>p{margin-top:-18px}.hero{height:1080px}.hero-fan{margin-top:20px}.owned-card{display:block;background:none;border:0;padding:0;color:inherit;text-align:initial;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.owned-card .art,.owned-card .drawing{position:absolute;left:3%;top:6.8%;width:94%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:0}.owned-card .drawing{background:#fffdf6;object-fit:contain}.owned-card .art{transition:opacity .28s ease}.owned-card.show-original .art{opacity:0}.owned-card .frame{pointer-events:none}.owned-card .card-name{top:84%;bottom:auto;left:12%;right:12%;height:10%;display:flex;align-items:center;justify-content:center;font:clamp(13px,1.5vw,21px)/1 Paint;text-align:center;letter-spacing:-.3px}.owned-card .element-symbols{position:absolute;top:69.25%;left:25%;right:25%;bottom:auto;height:13.5%;display:flex;justify-content:center;gap:5%;align-items:center}.element-symbols img{width:36%;aspect-ratio:1;object-fit:contain;border-radius:50%;background:radial-gradient(#483350,#151025);border:2px solid #d7b36f;padding:4px;box-shadow:0 2px 5px #0008}.owned-card.evolved-card .art,.owned-card.evolved-card .drawing{left:.5%;top:5%;width:99%}.evolved-card .card-name{color:#fff;text-shadow:0 2px 3px #000}.evolved-card .element-symbols img{border-color:#c4d9ff;background:#251731}.hero-fan .owned-card .card-name{font-size:18px}.hero-fan .owned-card:focus-visible{outline-offset:8px}.hero-fan .owned-card:hover,.hero-fan .owned-card:focus-visible{z-index:5}.hero-fan .hero-left:hover{transform:rotate(-8deg) translateY(-15px)}.hero-fan .hero-right:hover{transform:rotate(8deg) translateY(-15px)}.card-trio{display:flex;justify-content:center;gap:40px;max-width:1100px;margin:55px auto 25px;align-items:center}.card-trio .card{width:28%;max-width:300px;transition:transform .25s}.card-trio .card:first-child{transform:rotate(-6deg)}.card-trio .card:last-child{transform:rotate(6deg)}.card-trio .card:hover,.card-trio .card:focus-visible{transform:translateY(-12px) rotate(0deg)}.reveal-hint{font-size:12px;color:#c8b3da;letter-spacing:.4px}.silly{padding:75px 20px 90px;text-align:center;background:radial-gradient(ellipse at 50% 65%,#563d2366,transparent 65%),#171022;overflow:hidden}.silly em{color:#ffe2a3}.evolution{padding:85px 5% 95px;background:radial-gradient(ellipse at 80% 70%,#3c2d6c88,transparent 50%),#0e0d21;overflow:hidden}.evolution em{background:linear-gradient(100deg,#8edcfd,#dabdff,#b7f4cf);background-clip:text;color:transparent}.evolution-stages{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr;max-width:1100px;margin:60px auto 0;gap:15px;align-items:center}.evolution-stages figure{margin:0;min-width:0}.evolution-stages .card{width:100%}.original-paper{aspect-ratio:3/4;display:flex;align-items:center;background:#fffdf6;box-shadow:0 10px 35px #0006;border-radius:8px;transform:rotate(-4deg)}.original-paper img{width:100%;height:auto}.stage-arrow{font-size:32px;color:#dab7ff;text-shadow:0 0 22px #ce87ff}figcaption{margin-top:25px;text-align:center;font:20px Paint;color:#e7dcec}figcaption b{font:11px Arial;display:block;color:#b18fca;letter-spacing:2px;margin-bottom:8px}.community .approved-logo{width:min(480px,80vw);margin-bottom:25px}.community .chapter{margin-top:0}@media(hover:hover) and (pointer:fine){.owned-card:hover .art{opacity:0}}@media(max-width:700px){.hero{height:850px}.hero-title{margin-top:95px}.approved-logo{width:98vw;max-width:500px}.hero-title>p{margin-top:-2px}.hero-fan{margin-top:28px;height:315px}.hero-fan .owned-card .card-name{font-size:12px}.hero-fan .hero-front{animation:none}.hero-bottom h2{font-size:34px}.card-trio{gap:8px;margin-top:35px;flex-wrap:wrap}.card-trio .card{width:45%;max-width:250px}.card-trio .card:last-child{margin-top:10px;transform:rotate(3deg)}.owned-card .card-name{font-size:13px}.element-symbols img{padding:2px;border-width:1px}.silly{padding:55px 15px}.evolution{padding:65px 20px}.evolution-stages{grid-template-columns:1fr;gap:20px;max-width:280px;margin-top:40px}.stage-arrow{text-align:center;font-size:26px}.evolution-stages .card-name{font-size:20px}.evolution-stages figcaption{margin-top:20px}.evolution-stages .original-paper{aspect-ratio:1}.community .approved-logo{width:95vw}.hero-fan .hero-left:hover{transform:rotate(-18deg) translateY(20px)}.hero-fan .hero-right:hover{transform:rotate(18deg) translateY(20px)}}
.hero-title>p{margin-top:30px}.hero{height:1120px}.owned-card .art,.owned-card .drawing{border-radius:11%}.evolved-card .art,.evolved-card .drawing{border-radius:10%}.evolution em{text-shadow:none}.community .approved-logo{margin-bottom:55px}@media(max-width:700px){.hero-title>p{margin-top:25px}.hero{height:900px}.hero-fan{margin-top:24px}}
/* Per-artwork registration. The window stays fixed; only the original ink moves. */
.owned-card .drawing-window{position:absolute;display:block;left:3%;right:auto;top:6.8%;bottom:auto;width:94%;height:auto;aspect-ratio:1;overflow:hidden;border-radius:11%;background:#fffdf6;pointer-events:none}
.owned-card.evolved-card .drawing-window{left:.5%;top:5%;width:99%;border-radius:10%}
.owned-card .drawing-window .drawing{position:absolute;left:0;top:0;width:100%;height:100%;aspect-ratio:1;object-fit:contain;border-radius:0;background:none;transform-origin:0 0;transform:translate(var(--drawing-x,0%),var(--drawing-y,0%)) scale(var(--drawing-scale,1));max-width:none}

/* Local brand SVGs keep social links crisp without external scripts. */
.cta-icon{width:22px;height:22px;object-fit:contain;flex:none}
.small-button{display:inline-flex;align-items:center;gap:9px}
.small-button .cta-icon{width:17px;height:17px;filter:brightness(0) invert(1)}
.gold-button{gap:16px}.gold-button>span{margin-left:12px}
.social-links{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin:34px auto 0;width:fit-content;max-width:100%}
.social-link{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:64px;color:#d7c9df;font:12px/1.3 Arial,sans-serif;letter-spacing:.3px;border-radius:8px}
.social-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid #b59acf55;border-radius:50%;background:#180f2dcc;transition:transform .2s,background .2s,border-color .2s;box-shadow:0 4px 18px #0002}
.social-icon img{display:block;width:24px;height:24px;object-fit:contain;filter:brightness(0) invert(1)}
.social-twitch{--social-accent:#9146ff}.social-youtube{--social-accent:#ff0033}.social-instagram{--social-accent:#c13584}.social-discord{--social-accent:#5865f2}
.social-link:hover,.social-link:focus-visible{color:#fff}
.social-link:hover .social-icon,.social-link:focus-visible .social-icon{background:var(--social-accent);border-color:var(--social-accent);transform:translateY(-4px)}
@media(max-width:420px){.social-links{gap:14px}.social-link{min-width:58px}.social-icon{width:48px;height:48px}}