/* ---------- tokens ---------- */
:root{
  --bg:#0b0118;
  --bg2:#1a0430;
  --pink:#ff2e88;
  --pink-d:#b3005c;
  --cream:#ffeaf4;
  --gold:#ffd166;
  --cyan:#45e0ff;
  --violet:#8a5cff;
  --ink:#12001f;
  --px:3px;
  --font:"Press Start 2P", ui-monospace, "Courier New", monospace;
  --body:"Quicksand", -apple-system, system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;height:100dvh}
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--cream);
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:manipulation;
}

/* ---------- animated backdrop ---------- */
#sky{position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(120% 80% at 50% 0%, #3a0a5e 0%, var(--bg2) 45%, var(--bg) 100%);
}
#sky::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,46,136,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,46,136,.07) 1px, transparent 1px);
  background-size:28px 28px;
  animation:grid 14s linear infinite;
  mask-image:linear-gradient(transparent 30%, #000 100%);
  -webkit-mask-image:linear-gradient(transparent 30%, #000 100%);
}
@keyframes grid{to{background-position:0 28px, 28px 0}}

#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
.star{position:absolute;width:var(--px);height:var(--px);background:var(--cream);opacity:.6;
  animation:tw 3s steps(2,end) infinite}
@keyframes tw{0%,100%{opacity:.15}50%{opacity:.9}}

#hearts{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.fh{position:absolute;bottom:-40px;font-size:14px;opacity:.5;animation:rise linear forwards;filter:saturate(1.4)}
@keyframes rise{to{transform:translateY(-110vh) rotate(25deg);opacity:0}}

#fx{position:fixed;inset:0;z-index:40;pointer-events:none}

/* CRT scanlines over everything */
#crt{position:fixed;inset:0;z-index:60;pointer-events:none;
  background:repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.09) 2px 3px);
  opacity:.75}

/* ---------- screen shell ---------- */
#app{position:relative;z-index:10;height:100%}
.screen{
  position:absolute;inset:0;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  justify-content:safe center;
  padding:24px 18px calc(24px + env(safe-area-inset-bottom));
  text-align:center;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.screen.on{display:flex;animation:fadein .45s ease both}
@keyframes fadein{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}

/* ---------- pixel type ---------- */
.px{font-family:var(--font);line-height:1.7;letter-spacing:.5px}
h1.px{font-size:clamp(18px,6.4vw,30px);color:var(--pink);
  text-shadow:0 var(--px) 0 var(--pink-d), 0 calc(var(--px)*2) 0 rgba(0,0,0,.5)}
h2.px{font-size:clamp(13px,4.4vw,18px);color:var(--gold);text-shadow:0 2px 0 #8a5600}
.small{font-family:var(--font);font-size:10px;color:#e2c8ef;line-height:1.9}
.body{font-size:16px;line-height:1.75;color:var(--cream)}

/* ---------- pixel button ---------- */
.btn{
  font-family:var(--font);font-size:12px;
  color:var(--ink);background:var(--gold);
  border:none;padding:15px 20px;
  box-shadow:0 var(--px) 0 #a8730a, 0 calc(var(--px)*2) 0 rgba(0,0,0,.45);
  cursor:pointer;min-width:62vw;max-width:340px;
  image-rendering:pixelated;
  transition:transform .06s;
}
.btn:active{transform:translateY(var(--px));box-shadow:0 0 0 #a8730a}
.btn.pink{background:var(--pink);color:#fff;box-shadow:0 var(--px) 0 var(--pink-d), 0 calc(var(--px)*2) 0 rgba(0,0,0,.45)}
.btn.pink:active{box-shadow:0 0 0 var(--pink-d)}
.btn.ghost{background:transparent;color:var(--cyan);box-shadow:inset 0 0 0 var(--px) var(--cyan);font-size:10px;min-width:auto;padding:11px 14px}
.btn.ghost:active{transform:translateY(2px)}

/* ---------- pixel panel ---------- */
.panel{
  width:100%;max-width:420px;
  background:rgba(12,2,28,.82);
  border:var(--px) solid var(--pink);
  box-shadow:0 0 0 var(--px) var(--ink), 0 0 28px rgba(255,46,136,.35);
  padding:20px 16px;
}

/* ---------- boot ---------- */
#boot .bar{width:70vw;max-width:300px;height:14px;border:var(--px) solid var(--cream);padding:2px;margin:18px auto}
#boot .fill{height:100%;width:0;background:var(--pink);transition:width .1s linear}
#boot .tap{margin-top:26px;animation:blink 1s steps(2,end) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- title ---------- */
#title .cab{margin-bottom:8px}
.press{animation:blink 1.1s steps(2,end) infinite;margin-top:22px}
.wobble{animation:wob 3.4s ease-in-out infinite}
@keyframes wob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}

/* ---------- name reveal ---------- */
#reveal .letters{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin:14px 0 6px}
#reveal .L{
  font-family:var(--font);font-size:clamp(26px,10vw,52px);
  color:var(--gold);text-shadow:0 var(--px) 0 #8a5600, 0 0 22px var(--gold);
  opacity:0;transform:translateY(-60px) rotate(-14deg);
}
#reveal .L.in{animation:drop .5s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes drop{to{opacity:1;transform:none}}

/* ---------- quiz ---------- */
.lives{display:flex;gap:6px;justify-content:center;margin-bottom:12px;min-height:18px}
.lives span{font-size:14px;filter:grayscale(1) brightness(.5)}
.lives span.got{filter:none;animation:pop .35s ease}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.5)}to{transform:scale(1)}}
.opts{display:grid;gap:10px;margin-top:16px}
.opt{
  font-family:var(--font);font-size:11px;line-height:1.6;text-align:left;
  background:rgba(69,224,255,.08);color:var(--cream);
  border:2px solid var(--cyan);padding:14px;cursor:pointer;
}
.opt:active{transform:translateY(2px)}
.opt.bad{animation:shake .4s;border-color:var(--pink);background:rgba(255,46,136,.14)}
.opt.good{border-color:var(--gold);background:rgba(255,209,102,.2);color:var(--gold)}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.feedback{margin-top:14px;min-height:46px;font-size:14px;color:var(--gold)}
.bigheart{font-size:40px;display:inline-block}
.bigheart.shake{animation:shake .5s}

/* ---------- map ---------- */
#map .nodes{display:grid;gap:14px;width:100%;max-width:360px;margin-top:18px}
.node{
  display:flex;align-items:center;gap:14px;
  border:var(--px) solid var(--violet);background:rgba(138,92,255,.12);
  padding:14px;cursor:pointer;text-align:left;
}
.node .sprite{flex:0 0 auto}
.node .nm{font-family:var(--font);font-size:12px;color:var(--cream)}
.node .sub{font-size:12px;color:#c9a8d8;margin-top:5px}
.node.locked{opacity:.4;filter:grayscale(1);cursor:not-allowed}
.node.done{border-color:var(--gold);background:rgba(255,209,102,.1)}
.node.open{animation:glow 1.6s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 rgba(255,46,136,0)}50%{box-shadow:0 0 22px rgba(255,46,136,.55)}}
.tick{margin-left:auto;font-family:var(--font);font-size:12px;color:var(--gold)}

/* ---------- memory card ---------- */
.card{width:100%;max-width:420px;animation:cardin .5s cubic-bezier(.2,1.3,.3,1) both}
@keyframes cardin{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.badge{
  font-family:var(--font);font-size:14px;color:var(--ink);background:var(--gold);
  width:42px;height:42px;display:grid;place-items:center;margin:0 auto 12px;
  box-shadow:0 var(--px) 0 #a8730a;
}
.card h3{font-family:var(--font);font-size:13px;color:var(--pink);margin-bottom:12px;line-height:1.6}
.card .img{width:100%;border:var(--px) solid var(--cream);margin-bottom:12px;display:block}
.prog{font-family:var(--font);font-size:9px;color:#8f6fa8;margin-top:16px}

/* ---------- typewriter ---------- */
.tw{white-space:pre-wrap}
.caret{display:inline-block;width:8px;background:var(--pink);animation:blink .7s steps(2,end) infinite}

/* ---------- kid level ---------- */
.kid{display:flex;flex-direction:column;align-items:center;gap:6px}
.kid .sprite{animation:bob 1.1s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.bubble{
  position:relative;background:var(--cream);color:var(--ink);
  border:var(--px) solid var(--pink);padding:16px 14px;
  font-size:16px;line-height:1.7;width:100%;max-width:400px;min-height:96px;
  box-shadow:0 var(--px) 0 var(--pink-d);
}
.bubble::before{
  content:"";position:absolute;top:calc(var(--px)*-5);left:50%;transform:translateX(-50%);
  border-left:10px solid transparent;border-right:10px solid transparent;
  border-bottom:12px solid var(--pink);
}
.kidname{font-family:var(--font);font-size:12px;color:var(--cyan);margin-bottom:4px}
.vobtn{margin-top:10px}

/* ---------- sprite renderer ---------- */
.sprite{display:grid;image-rendering:pixelated}
.sprite i{display:block}

/* ---------- cake ---------- */
.cake{position:relative;margin:10px auto 18px;cursor:pointer}
.flame{position:absolute;width:8px;height:12px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 70%, #fff6c0, var(--gold) 55%, #ff7a18);
  animation:flick .25s steps(2,end) infinite;filter:drop-shadow(0 0 8px var(--gold))}
@keyframes flick{0%{transform:scaleY(1) translateX(0)}50%{transform:scaleY(.82) translateX(1px)}}
.flame.out{display:none}
.smoke{position:absolute;font-size:12px;opacity:0;animation:smk 1.4s ease-out forwards}
@keyframes smk{20%{opacity:.8}to{opacity:0;transform:translateY(-44px) scale(1.6)}}

.closing{font-family:var(--font);font-size:clamp(12px,4.2vw,17px);line-height:2;color:var(--pink);
  text-shadow:0 var(--px) 0 var(--pink-d);animation:beat 2.4s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.stack{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}

/* ---------- misc ---------- */
.mute{position:fixed;top:calc(10px + env(safe-area-inset-top));right:10px;z-index:70;
  font-family:var(--font);font-size:10px;background:rgba(0,0,0,.5);color:var(--cream);
  border:2px solid var(--cream);padding:8px 9px;cursor:pointer}
.hide{display:none !important}
@media (min-height:760px){ .body{font-size:17px} .bubble{font-size:17px} }
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important}}

/* ---------- chocolate brownie build ---------- */
.cake{width:188px;height:130px}
.cake .plate{position:absolute;bottom:0;left:-10px;width:208px;height:9px;background:#cfd2ff;
  box-shadow:0 var(--px) 0 #8a8fcf}
/* slab */
.cake .body1{position:absolute;bottom:9px;left:19px;width:150px;height:58px;
  background:#4a2410;
  background-image:
    radial-gradient(circle 3px at 22px 16px, #1d0d05 98%, transparent 100%),
    radial-gradient(circle 3px at 68px 34px, #1d0d05 98%, transparent 100%),
    radial-gradient(circle 3px at 112px 14px, #1d0d05 98%, transparent 100%),
    radial-gradient(circle 3px at 92px 44px, #1d0d05 98%, transparent 100%),
    radial-gradient(circle 3px at 40px 46px, #1d0d05 98%, transparent 100%),
    linear-gradient(#53290f, #35190a);
  box-shadow:inset 0 0 0 var(--px) #1d0d05}
/* top face of the slab, catches the light */
.cake .body2{position:absolute;bottom:67px;left:19px;width:150px;height:11px;
  background:linear-gradient(#7a451f, #5c3215);
  box-shadow:inset 0 0 0 var(--px) #1d0d05}
/* fudge glaze */
.cake .frost{position:absolute;bottom:74px;left:27px;width:134px;height:9px;
  background:linear-gradient(#3b1c0a, #241005);
  box-shadow:0 var(--px) 0 #150902,
             8px calc(var(--px)*2) 0 #241005,
             42px calc(var(--px)*2) 0 #241005,
             96px calc(var(--px)*2) 0 #241005}
.cake .candles{position:absolute;bottom:83px;left:0;width:100%;height:22px}
.cake .candles i{position:absolute;bottom:0;width:7px;height:22px;background:var(--cyan);
  box-shadow:inset 0 0 0 1px #0b6c85}
.cake .candles i:nth-child(1){left:calc(32% - 3px)}
.cake .candles i:nth-child(2){left:calc(50% - 3px)}
.cake .candles i:nth-child(3){left:calc(68% - 3px)}
.cake .flame{bottom:101px;top:auto !important}