:root{
  --crust:#3b1f12; --dough:#f6e3c0; --cream:#fff6e4; --red:#e0302c; --red-d:#a81d1d; --gold:#ffd23f; --night:#1a1033; --ink:#2a1608;
  --font:'Fredoka','Trebuchet MS',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--cream);background:var(--night);overflow-x:hidden;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;position:relative;z-index:3}
.center{text-align:center}

/* sprite (PixelLab mascot): 8 frames x 2 rows, 128px cells */
.sprite{--s:128px;display:inline-block;width:var(--s);height:var(--s);
  background:url(/assets/redbread-logo.png) 0 0/calc(var(--s)*8) calc(var(--s)*2) no-repeat;
  image-rendering:pixelated;animation:frames .9s steps(8) infinite}
.sprite[data-anim=cheer]{background-position-y:calc(var(--s)*-1);animation-duration:1.1s}
.sprite-sm{--s:44px}
.sprite-xl{--s:256px}
@keyframes frames{to{background-position-x:calc(var(--s)*-8)}}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:8px 24px;
  background:linear-gradient(#1a1033cc,#1a103300);backdrop-filter:blur(2px)}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:1.15rem}
.brand b{color:var(--red)}
.nav nav{display:flex;gap:20px;align-items:center;font-weight:600}
.nav nav a:hover{color:var(--gold)}
.pill{background:var(--red);padding:6px 16px;border-radius:99px;box-shadow:0 3px 0 var(--red-d)}
.pill:hover{color:#fff!important;transform:translateY(-1px)}

/* scenes + parallax layers */
.scene{position:relative;overflow:hidden;isolation:isolate}
.layer{position:absolute;left:0;right:0;top:-15%;height:130%;z-index:0;will-change:transform;background-size:cover;background-position:center;image-rendering:pixelated}
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity .7s,transform .7s}
[data-reveal].in{opacity:1;transform:none}

/* hero */
.hero{min-height:100vh;display:grid;place-items:center;text-align:center;background:#2a1a55}
.hero .sky{background:linear-gradient(#150c2e,#3a1f6b 55%,#e0602c 100%)}
.hero .stars{background-image:radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(2px 2px at 70% 20%,#fff,transparent),radial-gradient(3px 3px at 40% 60%,#ffd23f,transparent),radial-gradient(2px 2px at 85% 50%,#fff,transparent),radial-gradient(2px 2px at 10% 70%,#fff,transparent),radial-gradient(2px 2px at 55% 12%,#fff,transparent);background-size:420px 420px;animation:twinkle 4s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.5}to{opacity:1}}
.hero .castle{background-image:url(/assets/bg/title.jpg);opacity:.55;mix-blend-mode:screen}
.cloud{background:none!important;height:auto;top:0}
.cloud::before{content:"";position:absolute;width:var(--w);height:calc(var(--w)*.35);left:var(--x);top:var(--y);
  background:#fff;opacity:.85;image-rendering:pixelated;
  clip-path:polygon(0 70%,10% 70%,10% 50%,25% 50%,25% 30%,45% 30%,45% 10%,70% 10%,70% 30%,85% 30%,85% 50%,100% 50%,100% 100%,0 100%);
  animation:drift var(--t) linear infinite alternate}
.c1{--w:220px;--x:8%;--y:22vh;--t:26s}.c2{--w:150px;--x:68%;--y:34vh;--t:34s}.c3{--w:300px;--x:40%;--y:12vh;--t:48s}
@keyframes drift{to{transform:translateX(120px)}}
.hero .hills{background:
  radial-gradient(120% 60% at 20% 100%,#2f7d32 0 60%,transparent 61%),
  radial-gradient(120% 50% at 85% 100%,#3a9a3c 0 60%,transparent 61%);
  top:auto;bottom:0;height:45%}
.ground{position:absolute;left:0;right:0;bottom:0;height:90px;z-index:2;
  background:linear-gradient(#5ec45f 0 14px,#6b4423 14px);box-shadow:0 -4px 0 #3d8f3f inset}
.ground::after{content:"";position:absolute;inset:14px 0 0;background:radial-gradient(circle at 10px 10px,#4d2f17 3px,transparent 4px) 0 0/40px 30px}
.hero-content{position:relative;z-index:3;padding:110px 20px 140px}
.hero h1{font-size:clamp(3rem,10vw,7rem);line-height:.9;font-weight:700;letter-spacing:-1px;color:var(--cream);
  text-shadow:0 5px 0 var(--crust),0 10px 0 #0003}
.hero h1 .red{color:var(--red);text-shadow:0 5px 0 var(--red-d),0 10px 0 #0003}
.hero h1 small{display:block;font-size:.32em;letter-spacing:.45em;text-transform:uppercase;color:var(--gold);margin-top:14px;text-shadow:0 3px 0 var(--crust)}
.tag{font-size:1.4rem;margin:18px 0 26px}
#hero-mascot{filter:drop-shadow(0 12px 0 #0004);animation:frames .9s steps(8) infinite,hop 1.8s ease-in-out infinite}
@keyframes hop{50%{transform:translateY(-10px)}}
.btn{display:inline-block;background:var(--red);color:#fff;font-weight:700;padding:14px 30px;border-radius:99px;font-size:1.1rem;
  box-shadow:0 6px 0 var(--red-d);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--red-d)}
.scroll-hint{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);z-index:3;font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;opacity:.8;animation:bob 1.4s infinite}
.scroll-hint::after{content:"";display:block;margin:6px auto 0;width:2px;height:26px;background:var(--cream)}
@keyframes bob{50%{transform:translate(-50%,8px)}}

/* about */
.band{background:var(--dough);color:var(--ink);padding:110px 0;position:relative;z-index:4}
.band::before{content:"";position:absolute;top:-24px;left:0;right:0;height:26px;
  background:radial-gradient(circle at 14px 26px,var(--dough) 13px,transparent 14px) 0 0/28px 26px}
h2{font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;margin-bottom:36px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.card{background:#fff;border-radius:24px;padding:28px;box-shadow:0 8px 0 #0002;border:3px solid var(--crust)}
.card:nth-child(2){transition-delay:.12s}.card:nth-child(3){transition-delay:.24s}
.card:hover{transform:translateY(-6px) rotate(-1deg)}
.card .ico{font-size:2.6rem}
.card h3{color:var(--red);margin:6px 0}

/* game */
.game{padding:140px 0;background:#143a6b}
.bg-meadow{background-image:url(/assets/bg/meadow.jpg)}
.bg-castle{background-image:url(/assets/bg/throne.jpg);opacity:.35}
.game::after{content:"";position:absolute;inset:0;background:linear-gradient(#143a6bf0,#1a1033cc);z-index:1}
.game-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
.eyebrow{display:inline-block;background:var(--gold);color:var(--ink);font-weight:700;padding:4px 14px;border-radius:99px;transform:rotate(-2deg)}
.king{font-size:clamp(3rem,8vw,5.5rem);color:var(--gold);text-shadow:0 5px 0 #7a4a00;margin:14px 0 0}
.lede{font-size:1.5rem;font-weight:600;margin-bottom:12px}
.ticks{list-style:none;margin:20px 0 28px}
.ticks li{padding-left:34px;position:relative;margin:8px 0}
.ticks li::before{content:"\2605";position:absolute;left:0;color:var(--gold)}
.store-btn{display:inline-flex;align-items:center;gap:12px;background:#000;border:2px solid #fff6;color:#fff;border-radius:14px;padding:10px 22px;cursor:not-allowed;opacity:.9}
.store-btn small{display:block;font-size:.7rem;opacity:.7;text-transform:uppercase;letter-spacing:.1em}
.store-btn span{font-weight:700;font-size:1.2rem;line-height:1.1}
.store-btn{animation:glow 2.2s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 28px #ffd23f88}}
.shots{position:relative;height:520px}
.shot{position:absolute;margin:0;border-radius:16px;overflow:hidden;border:5px solid var(--cream);box-shadow:0 16px 0 #0005;will-change:transform;background:#000}
.shot img{width:100%;image-rendering:pixelated}
.s1{width:72%;top:0;left:0;rotate:-4deg}
.s2{width:68%;top:150px;right:0;rotate:3deg;z-index:2}
.s3{width:62%;bottom:-10px;left:6%;rotate:-2deg;z-index:3}

/* gallery */
.strip{padding:120px 0;background:#8fb8e8;color:var(--ink)}
.bg-snow{background-image:url(/assets/bg/snow.jpg);opacity:.6}
.strip h2{text-align:center;color:#12274d;text-shadow:0 3px 0 #fff8}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.gallery figure{background:var(--cream);padding:10px 10px 14px;border-radius:14px;border:3px solid var(--crust);box-shadow:0 10px 0 #0003;will-change:transform}
.gallery figure:nth-child(odd){rotate:-1.5deg}.gallery figure:nth-child(even){rotate:1.5deg}
.gallery img{border-radius:8px;image-rendering:pixelated;aspect-ratio:16/9;object-fit:cover;width:100%}
.gallery figcaption{text-align:center;font-weight:600;margin-top:8px}

/* soon */
.soon{padding:160px 0 120px;background:#2a1055;text-align:center}
.bg-throne{background-image:url(/assets/bg/throne.jpg);opacity:.5}
.soon::after{content:"";position:absolute;inset:0;background:linear-gradient(#8fb8e8 0,#2a1055cc 22%,#1a1033dd);z-index:1}
.soon h2{margin:10px 0 12px;color:var(--gold);text-shadow:0 4px 0 #0006}
.soon p{margin-bottom:26px;font-size:1.2rem}
.ember{background:radial-gradient(3px 3px at 15% 80%,#ff9b3d,transparent),radial-gradient(3px 3px at 60% 60%,#ffd23f,transparent),radial-gradient(2px 2px at 85% 85%,#ff6a3d,transparent),radial-gradient(3px 3px at 35% 40%,#ffd23f,transparent);background-size:360px 360px;z-index:2;opacity:.8}

footer{display:flex;gap:12px;align-items:center;justify-content:center;padding:24px;background:#0e0820;font-size:.95rem;opacity:.95;position:relative;z-index:5}

@media(max-width:860px){
  .game-grid{grid-template-columns:1fr}
  .shots{height:440px}
  .nav nav a:not(.pill){display:none}
  .sprite-xl{--s:192px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
}