@font-face{font-family:"Display";src:url(/fonts/tiltopia-display.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Body";src:url(/fonts/tiltopia-body.woff2) format("woff2");font-weight:400 900;font-display:swap}
:root{--ink:#15283B;--navy:#0d1824;--navy2:#13243a;--honey:#F2A93B;--honey-hi:#FFC85F;--honey-d:#B86F0E;--leaf:#4CAF5E;--leaf-hi:#7BDB8A;--leaf-d:#2E7D3F;--sky:#5AA8E6;--sky-d:#2F6FA3;--berry:#E05A6C;--gold:#FFD45C;--muted:rgba(255,255,255,.78);
  --display:"Display","Baloo 2",system-ui,sans-serif;--body:"Body","Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;--gut:clamp(16px,4vw,40px)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:#fff;font-family:var(--body);font-weight:700;font-size:17px;line-height:1.5;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.08;margin:0;letter-spacing:.01em;text-wrap:balance;overflow-wrap:break-word}
p{margin:0;text-wrap:pretty}
.wrap{width:min(1120px,100%);margin:0 auto;padding:0 var(--gut)}

/* ---------- top bar ---------- */
.top{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:calc(12px + env(safe-area-inset-top)) var(--gut) 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:1.35rem;text-shadow:0 2px 0 rgba(13,24,36,.35)}
.brand img{border-radius:11px;box-shadow:0 3px 0 rgba(13,24,36,.3)}
.langs{position:relative}
.langs summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;background:rgba(13,24,36,.55);border-radius:999px;padding:9px 14px;font-weight:800;min-height:44px;backdrop-filter:blur(6px)}
.langs summary::-webkit-details-marker{display:none}
.langs svg{width:20px;height:20px}
.langs nav{position:absolute;right:0;top:calc(100% + 8px);background:var(--navy);border:2px solid rgba(255,255,255,.14);border-radius:16px;padding:8px;display:grid;gap:2px;min-width:180px;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.langs nav a,.flangs a{text-decoration:none;padding:10px 12px;border-radius:10px;font-weight:800}
.langs nav a:hover,.langs nav a[aria-current]{background:var(--sky);color:#fff}

/* ---------- hero ---------- */
.hero{position:relative;background:linear-gradient(180deg,#3F97E6 0%,#6BB8F0 46%,#BFE6FA 100%);padding:calc(92px + env(safe-area-inset-top)) 0 0;overflow:hidden;isolation:isolate}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:90px;background:linear-gradient(180deg,transparent,var(--navy));z-index:1}
.sky{position:absolute;inset:0;z-index:-1}
.cloud{position:absolute;display:block;width:190px;height:60px;border-radius:60px;background:#fff;opacity:.9;filter:drop-shadow(0 8px 0 rgba(255,255,255,.35))}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:86px;height:86px;left:26px;top:-40px}.cloud::after{width:64px;height:64px;right:30px;top:-26px}
.c1{left:-40px;top:150px;animation:drift 38s linear infinite}.c2{right:6%;top:96px;transform:scale(.7);animation:drift 52s linear infinite reverse}.c3{left:44%;top:330px;transform:scale(.55);opacity:.7;animation:drift 46s linear infinite}
@keyframes drift{from{translate:-30px 0}50%{translate:60px 0}to{translate:-30px 0}}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:end;position:relative;z-index:2}
.pitch{padding:24px 0 96px}
.logo{width:min(520px,92%);filter:drop-shadow(0 8px 0 rgba(13,24,36,.22))}
.hero h1{font-size:clamp(1.9rem,4.6vw,3.1rem);margin-top:18px;text-shadow:0 3px 0 rgba(13,24,36,.28)}
.hero p{font-size:clamp(1.02rem,1.6vw,1.2rem);margin-top:12px;max-width:34em;color:#fff;text-shadow:0 1px 0 rgba(13,24,36,.25)}
.stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.store{display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:#fff;text-decoration:none;border-radius:16px;padding:10px 18px 10px 14px;min-height:58px;box-shadow:0 5px 0 rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.16)}
.store svg{width:30px;height:30px;flex:none}
.store span{display:grid;line-height:1.1;text-align:left}
.store small{font-size:.72rem;font-weight:800;color:var(--gold);letter-spacing:.02em}
.store b{font-family:var(--display);font-size:1.22rem}
a.store:hover{transform:translateY(-2px)}a.store:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.store.soon{opacity:.96;cursor:default}
.stage{position:relative;height:clamp(360px,44vw,520px);align-self:end}
.stand{position:absolute;left:50%;bottom:26px;translate:-50% 0;width:min(430px,96%);display:grid;justify-items:center}
.hero-plat{width:100%;filter:drop-shadow(0 14px 0 rgba(13,24,36,.18))}
.hero-char{position:relative;z-index:1;width:58%;margin-bottom:-13%;transform-origin:50% 100%;animation:hop 2.4s cubic-bezier(.3,0,.3,1) infinite;filter:drop-shadow(0 10px 0 rgba(13,24,36,.16))}
@keyframes hop{0%,100%{transform:translateY(0) scale(1.04,.96)}12%{transform:translateY(0) scale(.97,1.05)}45%{transform:translateY(-74px) scale(1,1)}78%{transform:translateY(0) scale(.98,1.03)}86%{transform:translateY(0) scale(1.06,.94)}}
.coin{position:absolute;width:58px;animation:bob 3s ease-in-out infinite}
.k1{left:6%;top:14%}.k2{right:4%;top:36%;width:44px;animation-delay:-1.1s}.k3{left:16%;top:52%;width:50px;animation-delay:-2s}
@keyframes bob{0%,100%{translate:0 0;rotate:-6deg}50%{translate:0 -14px;rotate:6deg}}

/* ---------- invite ---------- */
.invite{padding:20px var(--gut) 0}
.invite .card{width:min(720px,100%);margin:0 auto;background:linear-gradient(180deg,#7D5BE6,#5B3FC4);border-radius:24px;padding:18px;display:flex;gap:16px;align-items:center;box-shadow:0 8px 0 rgba(0,0,0,.3)}
.invite img{width:84px;height:84px;flex:none;border-radius:50%;background:rgba(255,255,255,.18)}
.invite h2{font-size:1.4rem}.invite p{margin-top:4px;color:rgba(255,255,255,.9);font-size:.98rem}
.btn{display:inline-block;margin-top:12px;background:linear-gradient(180deg,var(--leaf-hi),var(--leaf));color:#0c2a14;text-decoration:none;font-family:var(--display);font-size:1.15rem;padding:10px 22px;border-radius:14px;box-shadow:0 5px 0 var(--leaf-d)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--leaf-d)}

/* ---------- features ---------- */
.feature,.cast,.fair,.cta{padding:clamp(48px,8vw,96px) 0}
.feature:nth-of-type(odd){background:var(--navy2)}
.feature .wrap{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,6vw,72px);align-items:center}
.feature.flip .wrap{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.feature.flip .wrap>:first-child{order:2}
.copy h2,.cast h2,.fair h2{font-size:clamp(1.7rem,3.6vw,2.6rem);color:var(--gold)}
ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
li{position:relative;padding-left:34px;color:var(--muted);font-size:1.06rem}
li::before{content:"";position:absolute;left:0;top:.2em;width:22px;height:22px;border-radius:50%;background:var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m6 12.500 4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:0 2px 0 var(--leaf-d)}
.phone{width:min(300px,78vw);margin:0 auto;border-radius:38px;border:9px solid #060d16;background:#060d16;box-shadow:0 0 0 2px rgba(255,255,255,.14),0 26px 60px rgba(0,0,0,.5);overflow:hidden;rotate:-2deg}
.flip .phone{rotate:2deg}
.phone img{width:100%;border-radius:29px}
.pair{position:relative;width:min(340px,86vw);margin:0 auto}
.pair .phone{width:74%;margin:0;position:relative;z-index:2}
.pair .phone.back{position:absolute;right:0;top:9%;width:66%;z-index:1;rotate:6deg;opacity:.92}
.crowd{display:grid;gap:18px;justify-items:center}
.faces{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:min(320px,80vw)}
.faces img{border-radius:50%;background:linear-gradient(180deg,#2c5f93,#1b3a5c);box-shadow:0 0 0 4px rgba(255,255,255,.14),0 6px 0 rgba(0,0,0,.3)}
.faces img:nth-child(odd){translate:0 10px}
.crests{display:flex;gap:10px;justify-content:center}
.crests img{width:64px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.3))}

/* ---------- cast ---------- */
.cast{background:linear-gradient(180deg,#2B63A6,#1b3a5c)}
.cast h2{text-align:center;color:#fff}
.chars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:28px}
.char{background:rgba(13,24,36,.42);border-radius:20px;padding:14px 12px 16px;text-align:center;border:2px solid rgba(255,255,255,.1)}
.char img{height:clamp(120px,15vw,168px);width:auto;max-width:92%;object-fit:contain;margin:0 auto;filter:drop-shadow(0 6px 0 rgba(0,0,0,.22))}
.char h3{font-size:1.25rem;margin-top:8px;color:var(--gold)}
.char p{font-size:.86rem;line-height:1.35;color:var(--muted);margin-top:4px}
.dress{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,6vw,64px);align-items:center;margin-top:44px}
.dress ul{margin-top:0}

/* ---------- fair play, call to action, footer ---------- */
.fair .wrap{width:min(780px,100%)}
.fair{background:var(--navy2)}
.cta{background:linear-gradient(180deg,#3F97E6,#6BB8F0);text-align:center}
.cta .logo{margin:0 auto;width:min(380px,80%)}
.cta p{margin:16px auto 0;max-width:30em;font-size:1.12rem;text-shadow:0 1px 0 rgba(13,24,36,.25)}
.cta .stores{justify-content:center}
footer{padding:28px var(--gut) calc(28px + env(safe-area-inset-bottom));text-align:center;color:var(--muted);font-size:.95rem;display:grid;gap:10px;justify-items:center}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px}
footer a{padding:8px 10px;border-radius:10px;min-height:40px}
.flangs a{text-decoration:none;padding:6px 10px;font-size:.88rem}
.flangs a[aria-current]{color:var(--gold)}
:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:10px}

.rise{opacity:0;translate:0 26px;transition:opacity .6s ease,translate .6s cubic-bezier(.2,.8,.2,1)}
.rise.in{opacity:1;translate:0 0}

@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;gap:0}
  .pitch{padding:8px 0 0;text-align:center}
  .logo{margin:0 auto}.hero p{margin-left:auto;margin-right:auto}.stores{justify-content:center}
  .stage{height:330px;margin-top:14px}.stand{width:min(300px,84%)}
  .feature .wrap,.feature.flip .wrap,.dress{grid-template-columns:1fr}
  .feature.flip .wrap>:first-child{order:0}
  .chars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .invite .card{flex-direction:column;text-align:center}
}
@media (max-width:480px){.store{flex:1 1 148px;justify-content:center;padding:10px 12px}.store b{font-size:1.08rem}.brand b{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rise{opacity:1;translate:0 0}html{scroll-behavior:auto}}