/* CARTOON THEME (Fortnite / Roblox style). Loaded LAST on every page so it overrides the older look.
   Change colours/fonts in :root below. */
:root{
  --void:#1c1050; --panel:#2d1a85; --panel2:#4630c2; --text:#fff; --muted:#d6cfff; --line:rgba(255,255,255,.22);
  --ink:#1b0a45; --paper:#FFF1B8; --sun:#FFD21F; --sky:#38d9ff;
  --display:'Lilita One','Luckiest Guy',Impact,sans-serif; --body:'Fredoka',system-ui,sans-serif; --mono:'Fredoka',system-ui,sans-serif;
}
body{background-color:var(--void);background-image:radial-gradient(rgba(255,255,255,.07) 2px,transparent 2px);background-size:24px 24px;font-weight:500}
em{color:var(--lime)}

/* chunky outlined headings */
h1,h2,.serif-title{font-family:var(--display);font-style:normal;font-weight:400;letter-spacing:.02em;-webkit-text-stroke:8px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink);color:#fff}
.serif-title.ink{color:#fff}.ink-em{color:var(--lime)}
.pick-info h3,.half h3,.art-title,.step h3,.how h3{-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink)}
.kicker{font-family:var(--display);font-size:1rem;letter-spacing:.1em;color:var(--sun);-webkit-text-stroke:0}
.kicker.dark-k{color:#d0147a}
.kicker::before,.kicker::after{content:"";display:inline-block;width:22px;height:22px;margin:0 10px;vertical-align:-5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6L63 36L96 39L71 61L79 94L50 77L21 94L29 61L4 39L37 36Z' fill='%23FFD21F' stroke='%231b0a45' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.eyebrow{font-family:var(--display);color:var(--sun)}

/* bubbly 3D buttons */
.btn{font-family:var(--display);transform:rotate(-1.5deg);border:4px solid var(--ink);border-radius:16px;color:var(--ink);letter-spacing:.03em;background:linear-gradient(#f7ff8a,#c8f000);box-shadow:0 6px 0 var(--ink),inset 0 4px 0 rgba(255,255,255,.55)}
.btn:hover{transform:translateY(-3px) rotate(0);box-shadow:0 9px 0 var(--ink),inset 0 4px 0 rgba(255,255,255,.55)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}
.btn-ghost{background:#fff;color:var(--ink);border:4px solid var(--ink)}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink)}
.btn.soon,.big-cta.soon{background:#8f84d6;color:#2b1d6e;cursor:not-allowed}
.g-btns .btn.off{background:#8f84d6;color:#2b1d6e;border:4px solid var(--ink)}
.g-btns .btn.off:hover{transform:rotate(-1.5deg);box-shadow:0 6px 0 var(--ink)}

/* nav */
.nav,.home .nav,.nav.solid{background:var(--void);border-bottom:4px solid var(--ink);backdrop-filter:none}
.nav nav{font-weight:600}
.nav nav a:not(.btn):hover{color:var(--sun)}

/* hero: sunset sky, sunburst rays, floating icons, cloud edge */
.hero,.s-hero{background:linear-gradient(#2a1590 0%,#6a2bd9 55%,#ff5fa8 100%)}
.hero-grid{background:repeating-conic-gradient(from 0deg at 50% 70%,rgba(255,255,255,.09) 0 7deg,transparent 7deg 14deg);mask-image:none;opacity:1}
.hero-glow{background:radial-gradient(circle,rgba(255,210,31,.45),transparent 62%)}
.hero.center::before{background:radial-gradient(ellipse at center,transparent 55%,rgba(27,10,69,.45) 100%)}
.hero::after,.s-hero::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:64px;z-index:2;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='64' viewBox='0 0 180 64'%3E%3Cpath d='M0 64V44Q0 22 24 22Q28 2 56 6Q78 -4 96 16Q122 6 134 28Q168 22 176 48V64Z' fill='%231c1050' stroke='%231b0a45' stroke-width='5'/%3E%3C/svg%3E") repeat-x bottom/180px 64px}
.hero::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='64' viewBox='0 0 180 64'%3E%3Cpath d='M0 64V44Q0 22 24 22Q28 2 56 6Q78 -4 96 16Q122 6 134 28Q168 22 176 48V64Z' fill='%23FFF1B8' stroke='%231b0a45' stroke-width='5'/%3E%3C/svg%3E")}
.hero-video{opacity:1;z-index:0}
.hero.center .hero-video.on~.hero-grid{opacity:.12}
.hero.center .hero-video.on~.hero-glow{opacity:.35}
.hero.center .hero-video.on~.floaties{opacity:.7}
.hero.center::before{background:radial-gradient(ellipse at center,rgba(27,10,69,.28) 0%,rgba(27,10,69,.5) 100%)}
.hero-logo{filter:drop-shadow(0 10px 0 rgba(27,10,69,.35));animation:pop 3.2s ease-in-out infinite}
.hero-line{font-family:var(--display);font-style:normal;background:var(--pink);color:#fff;border:4px solid var(--ink);border-radius:14px;padding:8px 22px;transform:rotate(-2deg);box-shadow:0 5px 0 var(--ink);letter-spacing:.06em}
.aura-tag{font-family:var(--display)}
.floaties{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.float{position:absolute;width:var(--s,56px);height:var(--s,56px);animation:floaty 7s ease-in-out infinite;filter:drop-shadow(0 6px 0 rgba(27,10,69,.45))}
.float svg{width:100%;height:100%}
.f1{rotate:-14deg}.f2{rotate:10deg}.f3{rotate:-6deg}.f4{rotate:16deg}
.ico{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.2em}.ico svg{width:100%;height:100%}
@keyframes floaty{50%{transform:translateY(-24px) rotate(8deg)}}
@keyframes pop{50%{transform:translateY(-8px) scale(1.02)}}

/* bands */
.band.dark{background-color:var(--void);background-image:radial-gradient(rgba(255,255,255,.07) 2px,transparent 2px);background-size:24px 24px}
.band.light{background-color:var(--paper);background-image:radial-gradient(rgba(27,10,69,.09) 2px,transparent 2px);background-size:24px 24px;border-block:4px solid var(--ink)}
.band-head{border-bottom:4px solid var(--ink)}
.band-head h2{-webkit-text-stroke:5px var(--ink)}
.aura{font-family:var(--display);color:var(--ink)}
.band-sub{color:var(--muted)}
.hint,.hint code{color:var(--muted)}.band.light .hint{color:#5a4a96}.band.light .hint code{color:#d0147a}
.band.light .news p{opacity:.85}

/* all "card" things get a thick outline and a hard shadow */
.card,.pick,.step,.vid,.how div,.rows li,.g-feat li,.g-box,.code-box,.news .thumb,.shot,.half,.split{border:4px solid var(--ink);border-radius:20px;box-shadow:0 8px 0 var(--ink)}
.split-full .half{border-radius:0;box-shadow:none;border-left:0;border-right:0}
.card:hover,.pick:hover{transform:translateY(-8px) rotate(-.6deg);border-color:var(--ink);box-shadow:0 14px 0 var(--ink)}
.pick.off:hover{transform:none;box-shadow:0 8px 0 var(--ink)}
.news:hover .thumb{box-shadow:0 12px 0 var(--ink)}
.band.light .vid{background:#fff;border-color:var(--ink)}
.pick::after{background:linear-gradient(transparent 45%,rgba(27,10,69,.9))}
.pick-info small{font-family:var(--display);color:var(--sun);letter-spacing:.06em}
.pick.p2{background:url("../media/game-images/mega-ramp-art.svg") center/cover,linear-gradient(160deg,#ff8a00,#ff2e88)}
.pick.p4{background:radial-gradient(rgba(255,255,255,.12) 3px,transparent 3px) 0 0/22px 22px,linear-gradient(160deg,#4630c2,#2a1590)}
.t1{background:radial-gradient(rgba(255,255,255,.25) 3px,transparent 3px) 0 0/22px 22px,linear-gradient(135deg,#FFC400,#ff2e88)}
.t2{background:url("../media/game-images/mega-ramp-art.svg") center/cover}
.t3{background:linear-gradient(135deg,#00d4ff,#6a1bff)}
.t4{background:linear-gradient(135deg,#FFD21F,#ff8a00)}
.news small{font-family:var(--display);color:#d0147a;letter-spacing:.08em}
.news h3{font-family:var(--body);font-weight:700}

/* pills, tags, codes */
.pill{background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);font-family:var(--display);font-weight:400;font-size:.8rem}
.pill.live,.pill.pink{background:var(--pink);color:#fff;border-color:var(--ink)}
.pill i{background:#fff}
.tags span{background:var(--panel2);color:#fff;border:2px solid var(--ink);font-weight:600}
.code{font-family:var(--display);font-weight:400;background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.code:hover{background:var(--lime);color:var(--ink)}
.code-band{background:linear-gradient(135deg,#ffd21f,#ff8a00);border-block:4px solid var(--ink)}
.code-band .code.big{background:var(--ink);color:var(--lime);transform:rotate(-2deg)}
.code-band h2{-webkit-text-stroke:8px var(--ink)}
.support-band{background:repeating-conic-gradient(from 0deg at 50% 100%,#3a22b8 0 8deg,#2a1590 8deg 16deg);border-block:4px solid var(--ink)}
.socials a{font-family:var(--display);background:#fff;color:var(--ink);border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink);border-radius:14px}
.socials a:hover{background:var(--lime);transform:translateY(-3px)}
.toast{background:var(--lime);color:var(--ink);border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink);font-family:var(--display)}
footer{background:var(--ink);border-top:4px solid #000;color:var(--muted)}

/* leaderboard + ranks */
.tier,.monthly{font-family:var(--display);font-weight:400}
.avatar{border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink)}
.block{border:4px solid var(--ink);border-bottom:0}
.demo-note{border:3px solid var(--ink);font-family:var(--display)}
.step{background:var(--ink);border-top:6px solid var(--c)}

/* game page */
.g-inner h1{transform:rotate(-2deg)}
.g-box{background:var(--panel);backdrop-filter:none}
.g-box p{font-family:var(--display);color:var(--sun);-webkit-text-stroke:0}
.g-feat li{background:var(--panel);border-left:4px solid var(--ink)}
.g-hero .g-shade{background:linear-gradient(to bottom,rgba(27,10,69,.5),transparent 35%,rgba(28,16,80,.85) 85%,var(--void))}
.back{font-family:var(--display)}