/* ============================================================
   RENE BATERBONIA — troll site
   mobile-first. 480px column. loud on purpose.
   ============================================================ */

:root{
  --ink:#12042a;
  --ink2:#1d0842;
  --ink3:#2a0b5e;
  --pink:#ff3ea5;
  --hot:#ff0066;
  --cyan:#25e7ff;
  --lime:#c6ff3d;
  --yellow:#ffe94a;
  --violet:#a855f7;
  --paper:#fff;
  --disp:"Luckiest Guy","Baloo 2",system-ui,sans-serif;
  --body:"Baloo 2",system-ui,-apple-system,"Segoe UI",sans-serif;
  --dock-h:64px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--body);
  color:#fff;
  background:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
}

/* animated background blobs */
body::before{
  content:"";position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 12% 8%, rgba(255,62,165,.42), transparent 62%),
    radial-gradient(34vmax 34vmax at 88% 22%, rgba(37,231,255,.30), transparent 62%),
    radial-gradient(40vmax 40vmax at 50% 92%, rgba(168,85,247,.38), transparent 62%),
    radial-gradient(28vmax 28vmax at 80% 70%, rgba(198,255,61,.16), transparent 62%);
  animation:blobs 18s ease-in-out infinite alternate;
}
@keyframes blobs{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-3%,2%,0) scale(1.08)}
  100%{transform:translate3d(3%,-2%,0) scale(1.02)}
}

img,video{display:block;max-width:100%}
button{font-family:var(--body);cursor:pointer;border:0;background:none;color:inherit}

/* ============ SHELL (the "phone") ============ */
.shell{
  position:relative;z-index:1;
  width:100%;max-width:480px;margin:0 auto;
  padding-bottom:calc(var(--dock-h) + 34px);
}

/* ============ DESKTOP NOTE ============ */
.desknote{display:none}
@media (min-width:1000px){
  .desknote{
    display:block;position:fixed;z-index:80;
    left:max(24px,calc(50% - 480px));top:50%;transform:translate(-100%,-50%);
    padding-right:28px;width:320px;
  }
  .deskbubble{
    background:linear-gradient(150deg,var(--pink),var(--violet));
    border:5px solid #fff;border-radius:28px;padding:24px;text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,.5);transform:rotate(-3deg);
  }
  .dn-big{font-size:48px;line-height:1}
  .deskbubble h3{font-family:var(--disp);font-size:30px;margin:8px 0;letter-spacing:.5px;line-height:1.05}
  .deskbubble p{margin:0;font-size:15px;font-weight:700;opacity:.95}
  .dn-tag{margin-top:14px;background:#fff;color:var(--hot);font-weight:800;border-radius:999px;padding:6px 14px;display:inline-block}
  .shell{
    border-left:3px dashed rgba(255,255,255,.22);
    border-right:3px dashed rgba(255,255,255,.22);
    min-height:100vh;
  }
}

/* ============ SPLASH ============ */
.splash{
  position:fixed;inset:0;z-index:100;
  background:radial-gradient(120% 90% at 50% 0%,#3a0b6b,#0b0219 70%);
  display:grid;place-items:center;padding:24px;text-align:center;
  transition:opacity .5s ease,transform .5s ease;
}
.splash.gone{opacity:0;transform:scale(1.15);pointer-events:none}
.splash-inner{position:relative;width:100%;max-width:420px}
.splash-sticker{position:absolute;font-size:34px;animation:floaty 3.4s ease-in-out infinite}
.s1{top:-12px;left:2%}
.s2{top:18px;right:4%;animation-delay:.5s}
.s3{bottom:-4px;left:8%;animation-delay:1s}
.s4{bottom:24px;right:2%;animation-delay:1.5s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-16px) rotate(8deg)}}

.bigname{
  font-family:var(--disp);font-size:clamp(38px,13vw,62px);line-height:.95;
  margin:0 0 26px;letter-spacing:1px;
  text-shadow:0 0 18px rgba(255,62,165,.8),3px 3px 0 var(--cyan),-3px -3px 0 var(--hot);
}
.bigname span{display:inline-block;animation:letterpop .6s cubic-bezier(.2,1.7,.4,1) both}
.bigname .brk{display:block;height:0}

@keyframes letterpop{0%{transform:translateY(-40px) rotate(-25deg) scale(.3);opacity:0}100%{transform:none;opacity:1}}

.loadwrap{width:100%;max-width:300px;margin:0 auto}
.loadbar{height:18px;border:4px solid #fff;border-radius:999px;overflow:hidden;background:rgba(0,0,0,.4)}
.loadbar i{display:block;height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),var(--lime),var(--yellow),var(--pink));
  transition:width .4s ease}
.loadtxt{margin-top:10px;font-weight:800;font-size:15px;color:var(--lime);min-height:22px}

.enterbtn{
  margin-top:26px;font-family:var(--disp);font-size:26px;letter-spacing:1px;
  padding:14px 34px;border-radius:999px;color:#fff;
  background:linear-gradient(135deg,var(--hot),var(--violet));
  border:5px solid #fff;box-shadow:0 10px 0 rgba(0,0,0,.35);
  animation:bounce 1.1s ease-in-out infinite;
}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ============ TOP MARQUEE ============ */
.topbar{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(90deg,var(--hot),var(--violet),var(--cyan));
  border-bottom:3px solid #fff;
}
.marquee{overflow:hidden;white-space:nowrap;padding:6px 0}
.marquee-track{display:inline-block;white-space:nowrap;animation:mq 26s linear infinite;font-weight:800;font-size:14px;letter-spacing:.4px}
.marquee-track span{padding:0 12px;text-shadow:1px 1px 0 rgba(0,0,0,.35)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ SECTION BASICS ============ */
.sec{position:relative;z-index:1;padding:52px 18px 44px;text-align:center;scroll-margin-top:46px}
.disp{font-family:var(--disp);margin:0 0 6px;line-height:1;letter-spacing:.5px}
.glow{
  font-size:clamp(36px,12vw,54px);
  color:#fff;
  text-shadow:0 0 24px rgba(255,62,165,.9),4px 4px 0 var(--cyan),-4px -4px 0 var(--hot);
  animation:hue 6s linear infinite;
}
@keyframes hue{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)}}

.pop{
  font-size:clamp(34px,11vw,50px);
  color:var(--yellow);-webkit-text-stroke:3px #2a0b5e;
  text-shadow:0 6px 0 var(--hot),0 12px 20px rgba(0,0,0,.5);
  animation:wig 2.4s ease-in-out infinite;
}
.pop2{
  font-size:clamp(34px,11vw,50px);
  color:var(--cyan);-webkit-text-stroke:3px #12042a;
  text-shadow:0 6px 0 var(--violet),0 12px 20px rgba(0,0,0,.5);
  animation:wig 2.4s ease-in-out infinite reverse;
}
@keyframes wig{0%,100%{transform:rotate(-2.5deg) scale(1)}50%{transform:rotate(2.5deg) scale(1.04)}}

.sub{margin:2px 0 18px;font-weight:700;font-size:15px;color:rgba(255,255,255,.82)}

.bigbtn{
  font-family:var(--disp);font-size:21px;letter-spacing:.8px;
  padding:13px 26px;border-radius:999px;color:#fff;
  background:linear-gradient(135deg,var(--hot),var(--violet));
  border:4px solid #fff;box-shadow:0 7px 0 rgba(0,0,0,.4);
  transition:transform .12s ease,box-shadow .12s ease;
}
.bigbtn:active{transform:translateY(6px);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.bigbtn.alt{background:linear-gradient(135deg,var(--cyan),#1b7dff)}
.bigbtn.open{background:linear-gradient(135deg,var(--lime),#3ad13a);color:#12042a;-webkit-text-stroke:0}
.bigbtn.punch{background:linear-gradient(135deg,var(--yellow),var(--hot));color:#2a0b5e}
.btnrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}

/* ============ 1. HERO ============ */
.wobble-title{animation:wobbleslow 7s ease-in-out infinite}
@keyframes wobbleslow{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}

.heartframe{position:relative;width:min(78vw,300px);margin:22px auto 8px;aspect-ratio:1}
.hf-clip{
  position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'><path d='M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z' fill='%23000'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29.6'><path d='M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z' fill='%23000'/></svg>");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  animation:beat 1.6s ease-in-out infinite;
}
.hf-clip img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.heartframe:active .hf-clip img{transform:scale(1.12)}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.06)}24%{transform:scale(1)}36%{transform:scale(1.05)}48%{transform:scale(1)}}
.hf-ring{
  position:absolute;inset:-10px;border-radius:50%;
  border:4px dashed rgba(255,255,255,.5);animation:spin 14s linear infinite;pointer-events:none;
}
@keyframes spin{to{transform:rotate(360deg)}}

.orbit{
  position:absolute;font-family:var(--disp);font-size:15px;padding:5px 11px;border-radius:999px;
  background:#fff;color:var(--hot);box-shadow:0 4px 0 rgba(0,0,0,.3);white-space:nowrap;
  animation:floaty 4s ease-in-out infinite;
}
.o1{top:-6px;left:-14px;transform:rotate(-12deg)}
.o2{top:18%;right:-20px;transform:rotate(9deg);color:var(--violet);animation-delay:.6s}
.o3{bottom:16%;left:-24px;transform:rotate(7deg);color:#1b7dff;animation-delay:1.2s}
.o4{bottom:-4px;right:-8px;transform:rotate(-8deg);color:#2a9d2a;animation-delay:1.8s}

.tapcount{margin-top:14px;font-weight:800;font-size:15px;color:var(--lime)}
.tapcount b{font-family:var(--disp);font-size:22px;color:var(--yellow)}
.scrollhint{margin-top:22px;font-weight:800;letter-spacing:2px;font-size:13px;opacity:.7;animation:bounce 1.6s ease-in-out infinite}

/* ============ 2. ANO JAY ============ */
.hud{display:flex;gap:10px;justify-content:center;margin-bottom:14px}
.hud-box{
  background:rgba(0,0,0,.45);border:3px solid #fff;border-radius:16px;
  padding:6px 16px;min-width:92px;
}
.hud-box span{display:block;font-size:11px;font-weight:800;letter-spacing:1.4px;opacity:.8}
.hud-box b{font-family:var(--disp);font-size:26px;color:var(--yellow)}

.molegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:340px;margin:0 auto 16px}
.hole{
  position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;
  background:radial-gradient(circle at 50% 120%,#3a0b6b,#0b0219);
  border:3px solid rgba(255,255,255,.32);
}
.hole img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:translateY(112%);transition:transform .18s cubic-bezier(.2,1.6,.4,1);
}
.hole.up img{transform:translateY(0)}
.hole.bonk{animation:bonk .3s ease}
@keyframes bonk{0%{transform:scale(1)}40%{transform:scale(.82) rotate(-6deg)}100%{transform:scale(1)}}
.hole .hit{
  position:absolute;inset:0;display:grid;place-items:center;font-family:var(--disp);
  font-size:26px;color:var(--yellow);opacity:0;pointer-events:none;
  text-shadow:2px 2px 0 var(--hot);
}
.hole.bonk .hit{animation:hitpop .5s ease}
@keyframes hitpop{0%{opacity:1;transform:translateY(0) scale(.6)}100%{opacity:0;transform:translateY(-34px) scale(1.4)}}

.jay-say{margin-top:14px;font-family:var(--disp);font-size:22px;color:var(--cyan);min-height:30px;text-shadow:2px 2px 0 #12042a}

/* ============ 3. REELS ============ */
.reels{
  width:100%;max-width:340px;margin:0 auto;height:70vh;max-height:620px;
  overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;
  border-radius:26px;border:5px solid #fff;box-shadow:0 14px 40px rgba(0,0,0,.55);
  background:#000;-webkit-overflow-scrolling:touch;
}
.reels::-webkit-scrollbar{display:none}
.reel{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
.reel video,.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-ui{position:absolute;inset:0;pointer-events:none}
.reel-ui>*{pointer-events:auto}
.reel-cap{
  position:absolute;left:12px;bottom:62px;right:76px;text-align:left;
  text-shadow:0 2px 8px rgba(0,0,0,.9);
}
.reel-cap b{display:block;font-size:15px;color:var(--lime)}
.reel-cap span{font-size:14px;font-weight:700}
.reel-side{position:absolute;right:10px;bottom:62px;display:flex;flex-direction:column;gap:14px}
.rbtn{font-size:26px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.8))}
.rbtn i{display:block;font-style:normal;font-size:11px;font-weight:800;margin-top:2px}
.rbtn:active{transform:scale(1.3)}
.rbtn.liked{animation:bonk .4s ease}
.unmute{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.66);border:2px solid #fff;border-radius:999px;
  padding:5px 12px;font-size:12px;font-weight:800;white-space:nowrap;
}
.unmute.on{background:var(--lime);color:#12042a;border-color:#12042a}

/* ============ 4. GALAWGAW BOARD ============ */
.board{
  position:relative;width:100%;max-width:340px;margin:0 auto;aspect-ratio:1/1.1;
  border-radius:24px;border:5px solid #fff;overflow:hidden;touch-action:none;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 12px,transparent 12px 24px),
    linear-gradient(160deg,#2a0b5e,#0b0219);
  box-shadow:inset 0 0 60px rgba(0,0,0,.7);
}
.sticker{
  position:absolute;width:84px;border:4px solid #fff;border-radius:10px;
  box-shadow:0 8px 18px rgba(0,0,0,.6);overflow:hidden;touch-action:none;
  transition:box-shadow .15s ease;will-change:transform;
}
.sticker img{width:100%;aspect-ratio:.78;object-fit:cover;pointer-events:none}
.sticker .stag{
  display:block;background:#fff;color:var(--hot);font-weight:800;font-size:9px;
  text-align:center;padding:2px 0;letter-spacing:.2px;
}
.sticker.grab{box-shadow:0 16px 30px rgba(0,0,0,.8);z-index:20}

/* ============ 5. TARA GALA DECK ============ */
.deckwrap{position:relative;width:100%;max-width:320px;margin:0 auto;aspect-ratio:.72}
.deck{position:absolute;inset:0}
.card{
  position:absolute;inset:0;border-radius:24px;overflow:hidden;border:5px solid #fff;
  background:#12042a;box-shadow:0 16px 40px rgba(0,0,0,.6);
  will-change:transform;touch-action:none;
}
.card img{width:100%;height:100%;object-fit:cover}
.card-name{
  position:absolute;left:0;right:0;bottom:0;padding:28px 14px 14px;text-align:left;
  background:linear-gradient(transparent,rgba(0,0,0,.88));
}
.card-name b{font-family:var(--disp);font-size:24px;display:block;line-height:1}
.card-name span{font-size:13px;font-weight:700;color:var(--lime)}
.stampL,.stampR{
  position:absolute;top:22px;font-family:var(--disp);font-size:26px;padding:6px 14px;
  border:5px solid;border-radius:12px;opacity:0;transition:opacity .1s;
}
.stampR{left:16px;transform:rotate(-16deg);color:var(--lime);border-color:var(--lime)}
.stampL{right:16px;transform:rotate(16deg);color:var(--hot);border-color:var(--hot)}
.deck-empty{position:absolute;inset:0;display:grid;place-items:center}
.match{text-align:center;width:100%}
.match-txt{font-family:var(--disp);font-size:30px;color:var(--yellow);text-shadow:3px 3px 0 var(--hot);animation:wig 1.4s ease-in-out infinite}
.match img{width:88%;margin:12px auto;border-radius:20px;border:5px solid #fff}
.match-sub{font-weight:800;color:var(--cyan);margin-bottom:14px}

.roundbtn{
  width:64px;height:64px;border-radius:50%;font-size:26px;border:5px solid #fff;
  box-shadow:0 7px 0 rgba(0,0,0,.4);
}
.roundbtn:active{transform:translateY(6px);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.roundbtn.no{background:linear-gradient(135deg,#ff4d6d,var(--hot))}
.roundbtn.yes{background:linear-gradient(135deg,var(--lime),#2ecc71)}

/* ============ 6. ML ML ============ */
.scoreboard{
  position:relative;width:100%;max-width:340px;margin:0 auto 16px;
  border-radius:22px;overflow:hidden;border:5px solid #fff;padding:14px 10px 12px;
  background:linear-gradient(160deg,#2a0b5e,#0b0219);
}
.sb-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;filter:saturate(1.3)}
.sb-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sb-grid div{background:rgba(0,0,0,.55);border:3px solid rgba(255,255,255,.45);border-radius:14px;padding:6px 2px}
.sb-grid span{display:block;font-size:10px;font-weight:800;letter-spacing:1.2px;opacity:.85}
.sb-grid b{font-family:var(--disp);font-size:26px;color:var(--cyan)}
.sb-grid .lose b{color:var(--hot)}
.sb-tag{
  position:relative;margin-top:10px;font-family:var(--disp);font-size:19px;color:var(--yellow);
  text-shadow:2px 2px 0 var(--hot);min-height:24px;
}
.reactbox{width:132px;margin:0 auto 14px;border-radius:18px;overflow:hidden;border:5px solid #fff;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.reactbox img{width:100%;aspect-ratio:1;object-fit:cover}
.reactbox.shake{animation:shake .35s ease}
.openzone{position:relative;min-height:74px;display:grid;place-items:center}
.openzone .bigbtn{position:relative;transition:transform .18s cubic-bezier(.2,1.6,.4,1)}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px) rotate(-4deg)}40%{transform:translateX(9px) rotate(4deg)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}

/* ============ 7. SUNTUKAY ============ */
.arena{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:6px;
  width:100%;max-width:340px;margin:0 auto 16px;padding:14px 10px;
  border-radius:22px;border:5px solid #fff;
  background:linear-gradient(160deg,#3a0b6b,#0b0219);overflow:hidden;
}
.arena.hit{animation:shake .3s ease}
.fighter{flex:1;position:relative}
.fighter img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;border:4px solid #fff}
.fighter.hurt img{animation:bonk .3s ease}
.fname{display:block;margin-top:5px;font-family:var(--disp);font-size:14px;color:var(--yellow)}
.hpbar{height:12px;border:3px solid #fff;border-radius:999px;overflow:hidden;background:#400;margin-bottom:6px}
.hpbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--lime),var(--yellow));transition:width .2s ease}
.vs{font-family:var(--disp);font-size:26px;color:var(--hot);text-shadow:2px 2px 0 #fff;flex:0 0 auto}
.fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.powtxt{position:absolute;font-family:var(--disp);font-size:28px;color:var(--yellow);
  text-shadow:3px 3px 0 var(--hot);animation:powup .6s ease forwards;pointer-events:none}
@keyframes powup{0%{transform:scale(.3) rotate(-20deg);opacity:1}100%{transform:scale(1.6) rotate(12deg) translateY(-40px);opacity:0}}
.ko{margin-top:12px;font-family:var(--disp);font-size:24px;color:var(--lime);min-height:32px;text-shadow:2px 2px 0 #12042a}

/* ============ 8. GALLERY ============ */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;max-width:360px;margin:0 auto}
.gcell{
  position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;
  border:3px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.5);
  transition:transform .2s cubic-bezier(.2,1.6,.4,1);
}
.gcell:nth-child(3n){transform:rotate(2.5deg)}
.gcell:nth-child(3n+1){transform:rotate(-2.5deg)}
.gcell:active{transform:scale(1.14) rotate(0);z-index:5}
.gcell img{width:100%;height:100%;object-fit:cover}
.gcell::after{
  content:"💖";position:absolute;right:3px;bottom:1px;font-size:12px;opacity:0;transition:opacity .2s;
}
.gcell:active::after{opacity:1}

/* ============ FOOTER ============ */
.foot{padding:36px 18px 60px;text-align:center;position:relative;z-index:1}
.foot-hearts{font-size:24px;letter-spacing:6px;animation:floaty 3s ease-in-out infinite}
.phraselist{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:18px 0}
.phraselist b{
  font-family:var(--disp);font-size:13px;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.4);
  animation:floaty 4s ease-in-out infinite;
}
.secret{
  display:block;margin:8px auto;font-family:var(--disp);font-size:16px;padding:9px 20px;
  border-radius:999px;background:rgba(0,0,0,.45);border:3px dashed var(--yellow);color:var(--yellow);
}
.runaway{
  position:relative;display:block;margin:14px auto;font-family:var(--disp);font-size:18px;
  padding:11px 22px;border-radius:999px;color:#12042a;
  background:linear-gradient(135deg,var(--lime),var(--cyan));border:4px solid #fff;
  transition:transform .22s cubic-bezier(.2,1.6,.4,1);
}
.fineprint{font-size:12px;font-weight:700;opacity:.6;margin-top:22px}

/* ============ FIXED LAYER ============ */
.fixedlayer{
  position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;z-index:60;pointer-events:none;
}
.fixedlayer>*{pointer-events:auto}

.dock{
  position:absolute;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));
  height:var(--dock-h);display:flex;align-items:center;justify-content:space-around;
  background:rgba(15,3,38,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:3px solid rgba(255,255,255,.55);border-radius:999px;box-shadow:0 10px 26px rgba(0,0,0,.6);
}
.dock a{font-size:20px;text-decoration:none;transition:transform .15s ease;line-height:1}
.dock a:active{transform:scale(1.5) translateY(-4px)}

.sfxfab{
  position:absolute;left:20px;bottom:calc(var(--dock-h) + 88px + env(safe-area-inset-bottom));
  width:46px;height:46px;border-radius:50%;font-size:19px;
  background:rgba(15,3,38,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:3px solid rgba(255,255,255,.6);box-shadow:0 6px 16px rgba(0,0,0,.5);
  transition:transform .15s ease;
}
.sfxfab:active{transform:scale(.88)}
.sfxfab.off{opacity:.55;border-color:rgba(255,255,255,.3)}

.erpfab{
  position:absolute;left:14px;bottom:calc(var(--dock-h) + 22px + env(safe-area-inset-bottom));
  width:58px;height:58px;border-radius:50%;font-family:var(--disp);font-size:17px;color:#12042a;
  background:linear-gradient(135deg,var(--yellow),var(--lime));border:4px solid #fff;
  box-shadow:0 8px 20px rgba(0,0,0,.55);animation:bounce 2s ease-in-out infinite;
}

.toastwrap{position:absolute;top:52px;left:10px;right:10px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{
  pointer-events:none;background:#fff;color:#12042a;border-radius:16px;padding:9px 13px;
  display:flex;align-items:center;gap:10px;text-align:left;box-shadow:0 10px 26px rgba(0,0,0,.5);
  border:3px solid var(--violet);animation:toastin .4s cubic-bezier(.2,1.6,.4,1);
}
.toast img{width:38px;height:38px;border-radius:12px;object-fit:cover;flex:0 0 auto}
.toast b{display:block;font-size:13px;color:var(--hot)}
.toast span{font-size:12px;font-weight:700;line-height:1.2}
.toast.out{animation:toastout .35s ease forwards}
@keyframes toastin{from{transform:translateY(-24px) scale(.9);opacity:0}}
@keyframes toastout{to{transform:translateY(-16px) scale(.94);opacity:0}}

/* ============ OVERLAYS ============ */
.modal,.lightbox,.jumpscare{
  position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;z-index:90;display:grid;place-items:center;padding:20px;
}
.modal{background:rgba(8,2,20,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal-card{
  background:linear-gradient(160deg,var(--violet),var(--ink3));
  border:5px solid #fff;border-radius:26px;padding:18px;text-align:center;width:100%;max-width:320px;
  box-shadow:0 20px 50px rgba(0,0,0,.7);animation:toastin .35s cubic-bezier(.2,1.6,.4,1);
}
.modal-card img{width:100%;border-radius:16px;border:4px solid #fff;margin-bottom:12px;aspect-ratio:1.1;object-fit:cover}
.modal-card h3{font-family:var(--disp);font-size:30px;margin:0 0 4px;color:var(--yellow)}
.modal-card p{margin:0 0 6px;font-weight:700;font-size:15px;min-height:22px}
.modal-card .bigbtn{font-size:17px;padding:10px 18px}

.lightbox{background:rgba(6,1,16,.95);flex-direction:column}
.lightbox img{max-width:100%;max-height:72vh;border-radius:20px;border:5px solid #fff;box-shadow:0 20px 50px rgba(0,0,0,.7)}
.lb-cap{
  position:absolute;bottom:18%;left:20px;right:20px;font-family:var(--disp);font-size:22px;
  color:var(--yellow);text-shadow:3px 3px 0 var(--hot);
}
.lb-close{position:absolute;top:16px;right:18px;font-size:24px;background:#fff;color:var(--hot);
  width:44px;height:44px;border-radius:50%;border:3px solid var(--hot)}

.jumpscare{background:#000;animation:flash .6s steps(2) 3}
.jumpscare img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;animation:zoomin .5s ease}
.js-txt{position:relative;font-family:var(--disp);font-size:15vw;color:var(--hot);
  text-shadow:0 0 30px #000;animation:wig .2s linear infinite}
@keyframes flash{50%{filter:invert(1)}}
@keyframes zoomin{from{transform:scale(1.6)}}

/* ============ FLOATING HEARTS / FLOATERS ============ */
.floater{
  position:fixed;z-index:95;pointer-events:none;font-size:24px;
  animation:up 1.2s ease-out forwards;will-change:transform,opacity;
}
.floater.word{font-family:var(--disp);font-size:20px;color:var(--yellow);text-shadow:2px 2px 0 var(--hot);white-space:nowrap}
@keyframes up{
  0%{transform:translate(-50%,-50%) scale(.5) rotate(0);opacity:1}
  100%{transform:translate(-50%,-190px) scale(1.3) rotate(var(--r,20deg));opacity:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important}
  html{scroll-behavior:auto}
}