@font-face{font-family:Cartoon;src:url('assets/cartoon-italic.ttf') format('truetype');font-weight:900;font-style:italic;font-display:swap}@font-face{font-family:Prism;src:url('assets/bold.ttf') format('truetype');font-weight:700;font-display:swap}@font-face{font-family:Body;src:url('assets/regular.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--bg:#10102c;--ink:#f8f7ff;--muted:#c8c9e7;--cyan:#6ae9ff;--pink:#ff94e8;--lime:#c2fa62;--ease:cubic-bezier(.16,1,.3,1)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Body,sans-serif;line-height:1.6}body:before{content:'';position:absolute;z-index:-1;inset:0 0 auto;height:960px;pointer-events:none;background:radial-gradient(ellipse at 78% 42%,#292674 0,transparent 52%)}a{color:inherit}button{font:inherit;cursor:pointer}svg{width:24px;height:24px;flex-shrink:0}.symbols{position:absolute;width:0;height:0;overflow:hidden}.wrap{max-width:1220px;margin:auto;padding-inline:36px}.header{display:flex;justify-content:space-between;align-items:center;padding-top:24px;padding-bottom:24px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:Prism,sans-serif;font-size:13px;line-height:1.25;letter-spacing:.03em}.brand img{border-radius:13px;transform:rotate(-8deg)}nav{display:flex;align-items:center;gap:14px}.nav-trailer{text-decoration:none;font-size:14px;margin-right:16px}.nav-trailer:hover{color:var(--cyan)}.lang,.motion{height:44px;min-width:46px;border:1px solid #68658c;border-radius:12px;background:#1b1a3c;color:var(--ink);display:grid;place-items:center}.lang{font-family:Prism,sans-serif;padding-inline:12px}.motion:hover,.lang:hover{background:#302d5e}a:focus-visible,button:focus-visible,video:focus-visible{outline:3px solid var(--cyan);outline-offset:6px}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;padding-top:38px;padding-bottom:92px}.hero-copy{position:relative;z-index:2}.game-title{font-family:Cartoon,sans-serif;font-style:italic;font-weight:900;font-size:clamp(72px,7.7vw,96px);line-height:.94;letter-spacing:-.035em;margin:0 0 30px;transform:rotate(-3deg);transform-origin:left center;color:#fff;-webkit-text-stroke:2px #132257;paint-order:stroke fill;text-shadow:0 5px 1px #3860c7,0 11px 8px #03071d80}.game-title span{display:block;color:var(--cyan)}.hero-slogan{font-family:Cartoon,sans-serif;font-weight:900;font-style:italic;font-size:clamp(27px,3.3vw,42px);line-height:1.18;margin:0 0 21px;letter-spacing:-.025em}.hero-slogan em{font-style:inherit;color:var(--lime)}.intro{font-size:17px;max-width:430px;margin:0 0 28px;color:var(--muted);line-height:1.7}.cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--lime);color:#142409;text-decoration:none;border-radius:16px;padding:18px 24px;font:700 16px Prism,sans-serif;box-shadow:0 6px 12px #050a1680;transition:transform .25s var(--ease),background .25s}.cta:hover{transform:translateY(-4px);background:#d9ff9a}.cta:active{transform:translateY(1px)}.cta-arrow{width:21px;margin-left:3px}.sub{color:#b7bad7;font-size:12px;margin:18px 0 0}
.scene{height:640px;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate}.phone{width:280px;position:relative;border-radius:30px;overflow:hidden;transform:rotate(8deg);box-shadow:15px 28px 35px #030316b3;animation:phone-arrive 1.3s var(--ease) both}.phone:after{content:'';position:absolute;inset:0;border-radius:30px;box-shadow:inset 0 0 0 3px #6f86ae60;pointer-events:none}.screen{display:block;width:100%;height:auto}.orbit{position:absolute;border:1px solid #5851a75c;border-radius:50%;z-index:-1;transform:rotate(-30deg)}.orbit-one{width:94%;height:77%}.orbit-two{width:80%;height:92%;transform:rotate(22deg);border-color:#5c4b8459}.comic-tag{font:900 italic 24px/1.05 Cartoon,sans-serif;position:absolute;color:#fff;text-shadow:0 3px 3px #152857;letter-spacing:-.025em}.combo-tag{top:115px;right:-3px;transform:rotate(9deg);padding:17px 21px;background:#a91fb3;border-radius:14px;box-shadow:5px 10px 22px #09072470;animation:combo-pop 7s 2s infinite}.record-tag{bottom:52px;left:45px;display:flex;align-items:center;gap:9px;transform:rotate(-7deg);padding:14px 18px;border-radius:12px;background:#1d4ce0;font-size:19px}.record-tag svg{color:#ffdc68}.mascot{position:absolute;bottom:105px;right:0;transform:rotate(12deg);animation:bob 5s 1s ease-in-out infinite}.mascot img{display:block;width:142px;height:142px;border-radius:32px;box-shadow:5px 14px 23px #0605208c}.mascot-star{position:absolute;top:-20px;left:-12px;width:36px;height:36px;color:#ffe98b;transform:rotate(-18deg)}.float-piece{position:absolute;display:grid;grid-template-columns:repeat(2,32px);gap:4px;z-index:2;animation:bob 6s ease-in-out infinite}.float-piece i,.mini-piece i{display:block;border-radius:6px;background:var(--piece);box-shadow:inset 2px 3px 2px #ffffff90,inset -3px -4px 2px #14134655,3px 6px 7px #07082940}.piece-cyan{--piece:#23d7ed;left:23px;top:55px;transform:rotate(-17deg);grid-auto-rows:32px}.piece-cyan i:first-child{grid-column:2}.piece-pink{--piece:#e44cc4;right:20px;bottom:16px;transform:rotate(17deg);grid-auto-rows:32px;animation-delay:-2s}.piece-pink i:last-child{grid-column:2}.piece-yellow{--piece:#f7bc2d;left:0;bottom:183px;grid-auto-rows:32px;transform:rotate(-12deg);animation-delay:-4s}.color-ribbon{background:#382e80;border-block:1px solid #7168b3;transform:skewY(-2deg);padding:19px 20px}.color-ribbon>div{max-width:1060px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#d3caff;font:900 italic clamp(18px,2.4vw,30px)/1.2 Cartoon,sans-serif}.color-ribbon svg{color:var(--lime);width:20px;height:20px}
.trailer-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:95px;align-items:center;padding-top:126px;padding-bottom:108px}.video-stage{max-width:342px;width:100%;margin:auto}.video-shell{position:relative;border-radius:25px;overflow:hidden;background:#060617;box-shadow:10px 22px 35px #04041680;aspect-ratio:9/16}.video-shell video{display:block;width:100%;height:100%;object-fit:contain}.video-cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;width:100%;border:0;background:linear-gradient(transparent 30%,#08071d30 55%,#08071df5);color:white;padding:30px 12px;font:900 italic 18px/1.4 Cartoon,sans-serif}.video-cover[hidden]{display:none}.play-disc{display:grid;place-items:center;position:absolute;top:42%;left:calc(50% - 36px);width:72px;height:72px;background:var(--lime);color:#122713;border-radius:50%;box-shadow:0 8px 25px #0008;transition:transform .3s var(--ease)}.play-disc svg{width:35px;height:35px}.video-cover:hover .play-disc{transform:scale(1.1)}.video-cover small{font:12px/1.6 Body,sans-serif;color:#dddcf3;margin-top:9px}.video-link{display:block;text-align:center;font-size:12px;color:#bab9d8;margin-top:19px;text-underline-offset:4px}.video-error{font-size:14px;color:#ffb9ce}.display{font:900 italic clamp(30px,3.3vw,43px)/1.16 Cartoon,sans-serif;letter-spacing:-.03em;margin:0 0 24px;text-wrap:balance}.display span{color:var(--pink)}.section-intro{font-size:17px;color:var(--muted);max-width:470px;margin:0 0 38px}.features{display:grid;gap:30px}.features article{display:flex;align-items:flex-start;gap:23px}.features h3{font:900 italic 24px/1.2 Cartoon,sans-serif;margin:0 0 9px;color:var(--cyan)}.features article:nth-child(2) h3{color:var(--pink)}.features article:nth-child(3) h3{color:var(--lime)}.features p{font-size:14px;line-height:1.65;margin:0;color:#c8c9e7;max-width:370px}.mini-piece{display:grid;grid-template-columns:repeat(2,18px);grid-auto-rows:18px;gap:3px;flex:0 0 39px;transform:rotate(-10deg);margin-top:7px}.mini-piece i{border-radius:4px}.mini-piece.cyan{--piece:#23d7ed}.mini-piece.cyan i:first-child{grid-column:2}.mini-piece.pink{--piece:#e44cc4}.mini-piece.pink i:last-child{grid-column:2}.feature-star{flex:0 0 39px;margin-top:4px;color:#ffda65}.feature-star svg{width:39px;height:39px}.final-section{background:#1d1946;border-top:1px solid #514585;border-bottom:1px solid #514585}.final-inner{display:flex;align-items:center;gap:30px;padding-top:45px;padding-bottom:45px}.final-inner>img{border-radius:25px;transform:rotate(-8deg)}.final-inner .display{font-size:30px;margin-bottom:10px}.final-inner p{font-size:15px;color:var(--muted);margin:0}.final-inner .cta{margin-left:auto;min-width:160px}footer{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:34px!important;padding-bottom:34px!important;font-size:12px;color:#bab9d8}footer strong{display:block;font:700 13px Prism,sans-serif;color:var(--ink);margin-bottom:6px}.links{display:flex;flex-wrap:wrap;gap:12px 25px}.links a{text-underline-offset:4px}.links a:hover{color:white}
@keyframes phone-arrive{from{transform:translateY(28px) rotate(15deg);filter:brightness(.75)}to{transform:translateY(0) rotate(8deg);filter:brightness(1)}}@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -12px}}@keyframes combo-pop{0%,28%,100%{scale:1}18%{scale:1.09}23%{scale:1.02}}
.motion-off *,.motion-off *:before,.motion-off *:after{animation-play-state:paused!important}.motion-off{scroll-behavior:auto}
@media(max-width:1000px){.scene{height:610px}.phone{width:250px}.combo-tag{right:-8px;font-size:20px}.mascot img{width:115px;height:115px}.record-tag{font-size:16px;left:25px;bottom:70px}.trailer-section{gap:48px}.final-inner{gap:24px}.final-inner .display{font-size:25px}}
@media(max-width:700px){.wrap{padding-inline:24px}.header{padding-top:18px;padding-bottom:18px}.brand{font-size:11px}.brand img{width:40px;height:40px}.nav-trailer{display:none}nav{gap:9px}.lang,.motion{height:42px;min-width:42px}.hero{grid-template-columns:1fr;gap:15px;padding-top:32px;padding-bottom:42px;text-align:center}.game-title{font-size:clamp(40px,10.5vw,72px);transform-origin:center;margin-bottom:25px;white-space:nowrap}.game-title span{display:inline;margin-left:10px}.hero-slogan{font-size:33px}.intro{max-width:420px;margin:0 auto 26px;font-size:15px}.sub{font-size:11px}.cta{font-size:14px;padding:17px 19px}.scene{height:535px;width:100%;max-width:390px;margin:auto}.phone{width:235px}.combo-tag{top:91px;right:0;font-size:19px;padding:13px 14px}.mascot{bottom:85px;right:0}.mascot img{width:105px;height:105px;border-radius:25px}.record-tag{left:7px;bottom:35px;font-size:16px}.piece-cyan{left:3px;top:28px}.piece-yellow{left:0;bottom:156px}.piece-pink{right:5px;bottom:8px}.color-ribbon{padding:17px 12px}.color-ribbon>div{gap:9px;font-size:clamp(11px,3.15vw,18px)}.color-ribbon svg{width:13px;height:13px}.trailer-section{grid-template-columns:1fr;gap:36px;padding-top:68px;padding-bottom:65px}.trailer-copy{grid-row:1}.display{font-size:34px}.section-intro{font-size:15px;margin-bottom:29px}.features{gap:25px}.features h3{font-size:22px}.features p{font-size:14px}.video-stage{max-width:310px}.final-inner{flex-wrap:wrap;gap:21px;padding-top:33px;padding-bottom:33px}.final-inner>img{width:72px;height:72px;border-radius:18px}.final-inner>div{flex:1}.final-inner .display{font-size:24px}.final-inner p{font-size:13px}.final-inner .cta{margin:8px 0 0;width:100%}footer{flex-direction:column;align-items:flex-start;gap:20px}.links{gap:15px;flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Keep decorative orbits inside the illustration on narrow screens. */
.scene{overflow:clip}
.trailer-shortcut{display:none}
@media(max-width:700px){.trailer-shortcut{display:block;margin:21px auto 0;width:max-content;color:var(--cyan);font-size:14px;text-underline-offset:5px}}