/* AFROCADO — geometry in SAFE units (2048x1152), scaled by --s. */
:root { --ink:#1b1420; --pink:#ff7ec4; --pink2:#ffb3dc; --cream:#fff6e0; --lilac:#eed3fe; --mint:#8fe3c0; --floor:#d1acf2; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; overflow:hidden; background:var(--floor); font-family:Fredoka,system-ui,sans-serif; }
body { cursor:default; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

#plate { position:fixed; left:50%; top:50%; width:2816px; height:1280px; transform-origin:0 0;
  background:url(assets/L0_plate.jpg) 0 0/100% 100%; z-index:0; }
#stage { position:fixed; left:50%; top:50%; width:2048px; height:1152px; transform-origin:0 0; z-index:1; }
#stage img.layer { position:absolute; pointer-events:none; }
/* cropped textures placed at their exact bbox origin inside the safe canvas */
#body  { left:883px; top:431px; width:279px; height:401px; }
#face  { left:920px; top:531px; width:164px;  height:69px; }
#froA1 { left:866px; top:394px; width:316px;  height:218px; }
#froA2 { left:827px; top:324px; width:393px;  height:297px; }
#froA3 { left:666px; top:124px; width:701px;  height:542px; }
.fro { will-change:transform,opacity; }
#face { opacity:0; }

.shadow { position:absolute; left:874px; top:808px; width:300px; height:46px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(150,80,200,.55), rgba(150,80,200,0)); will-change:transform,opacity; }

#char { position:absolute; inset:0; transform-origin:1024px 831px; }

/* title */
#title { position:absolute; left:96px; top:168px; width:560px; font-family:'Titan One',sans-serif; color:var(--cream);
  -webkit-text-stroke:10px var(--ink); paint-order:stroke fill; text-shadow:0 10px 0 var(--pink); line-height:.92;
  pointer-events:none; }
#title .l1 { font-size:168px; letter-spacing:2px; white-space:nowrap; }
#title .l2 { font-size:168px; }
#title.final .l1 { font-size:80px; letter-spacing:0; }
#title.final .l2 { font-size:92px; color:var(--pink2); }

#tag { position:absolute; left:104px; top:520px; font:700 34px Fredoka; color:var(--ink); background:var(--cream);
  border:5px solid var(--ink); border-radius:40px; padding:10px 26px; box-shadow:0 6px 0 var(--ink); pointer-events:none; }

/* meter */
#meter { position:absolute; left:1630px; top:190px; width:150px; height:520px; pointer-events:none; }
#meter .cap { font:700 30px Fredoka; text-align:center; color:var(--ink); margin-bottom:14px; letter-spacing:1px; }
#meter .tube { position:relative; margin:0 auto; width:84px; height:400px; border:7px solid var(--ink); border-radius:50px;
  background:var(--cream); overflow:hidden; box-shadow:0 8px 0 var(--ink); }
#meter .fill { position:absolute; left:0; right:0; bottom:0; height:0; background:var(--ink);
  background-image:radial-gradient(circle at 30% 30%, #3a2f40 0 18%, transparent 19%), radial-gradient(circle at 70% 60%, #3a2f40 0 14%, transparent 15%);
  background-size:40px 40px; }
#meter .ticks { position:absolute; inset:0; background:repeating-linear-gradient(to top, transparent 0 78px, rgba(27,20,32,.35) 78px 82px); }
#meter .val { margin-top:18px; text-align:center; font:700 40px Fredoka; color:var(--ink); }
#meter .lvl { margin:8px auto 0; width:max-content; font:700 26px Fredoka; color:var(--cream); background:var(--ink); border-radius:30px; padding:6px 18px; }
#meter.final .lvl { background:var(--pink); color:var(--ink); border:4px solid var(--ink); }
#meter.overflow .fill { animation:overflow .5s ease-in-out 2; }
@keyframes overflow { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(6px) } }

/* bubble */
#bubble { position:absolute; left:1200px; top:704px; font:700 30px Fredoka; color:var(--ink); background:#fff;
  border:5px solid var(--ink); border-radius:28px; padding:12px 24px; white-space:nowrap; pointer-events:none; z-index:6; }
#bubble::before { content:''; position:absolute; left:-24px; top:22px; border:14px solid transparent; border-right:22px solid var(--ink); }

/* CTA */
#cta { position:absolute; left:724px; top:920px; width:600px; height:118px; border:8px solid var(--ink); border-radius:70px;
  background:var(--pink); box-shadow:0 12px 0 var(--ink); font:400 46px 'Titan One',sans-serif; color:var(--cream);
  -webkit-text-stroke:6px var(--ink); paint-order:stroke fill; display:flex; align-items:center; justify-content:center;
  letter-spacing:1px; cursor:pointer; padding:0; overflow:hidden; z-index:7; -webkit-user-select:none; user-select:none;
  transition:box-shadow .06s linear; }
#cta .fillcta { position:absolute; left:0; top:0; bottom:0; width:0%; background:#e45aa4; z-index:0; }
#cta .lbl { position:relative; z-index:1; white-space:nowrap; }
#cta.pressed { transform:translateY(8px); box-shadow:0 4px 0 var(--ink); }
#cta.deflating { pointer-events:none; cursor:not-allowed; background:var(--cream); border-style:dashed; box-shadow:0 10px 0 var(--ink); }
#cta.deflating .lbl { color:rgba(27,20,32,.45); -webkit-text-stroke:0; }
#cta.pulse { animation:ctapulse 2s ease-in-out infinite; }
@keyframes ctapulse { 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.03) } }
#cta:focus-visible { outline:5px solid #fff; outline-offset:5px; }

#hint { position:absolute; left:724px; width:600px; top:1062px; text-align:center; font:700 26px Fredoka; color:var(--ink); opacity:.75; pointer-events:none; z-index:7; }

/* idle pick resting in the fro */
#restpick { position:absolute; height:150px; width:auto; left:1118px; top:376px; transform-origin:50% 80%; z-index:3; will-change:transform; }

/* launch picks (final) */
.lp { position:absolute; width:112px; height:210px; display:none; transform-origin:50% 70%; padding:0; border:0; background:none; cursor:pointer;
  transform:rotate(var(--rot,0deg)); -webkit-tap-highlight-color:transparent; }
.lp img { width:100%; height:100%; display:block; pointer-events:none; }
.lp .lbl { position:absolute; left:50%; top:16%; transform:translateX(-50%) rotate(calc(-1 * var(--rot,0deg))); font:700 24px Fredoka;
  color:var(--ink); background:var(--cream); border:4px solid var(--ink); border-radius:20px; padding:2px 12px; white-space:nowrap; pointer-events:none; }
.lp:hover img { animation:pickwig .5s ease-in-out infinite; }
.lp:hover { transform:rotate(var(--rot,0deg)) scale(1.06); transition:transform .15s ease-out; }
@keyframes pickwig { 0%,100%{ transform:rotate(-4deg) } 50%{ transform:rotate(4deg) } }
.lp:focus-visible { outline:5px solid var(--ink); outline-offset:6px; border-radius:20px; }
body.final .lp { display:block; }
.lp.soon { cursor:not-allowed; }
.lp.soon:hover img { animation:none; }
.lp.soon:hover { transform:rotate(var(--rot,0deg)); }
.lp.soon .lbl { color:rgba(27,20,32,.6); }

/* header: viewport anchored */
#hdr { position:fixed; left:0; right:0; top:0; display:flex; justify-content:space-between; align-items:center;
  padding:calc(var(--s,1)*26px) calc(var(--s,1)*40px); font-size:calc(var(--s,1)*28px); z-index:20; pointer-events:none; }
#hdr .chip, #hdr .pill, #hdr .mute { pointer-events:auto; }
#hdr .chip, #hdr .pill, #hdr .mute { font:700 1em Fredoka; color:var(--ink); background:var(--cream); border:calc(var(--s,1)*5px) solid var(--ink);
  border-radius:99px; padding:.25em .9em; box-shadow:0 calc(var(--s,1)*5px) 0 var(--ink); margin-left:.5em; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; }
#hdr .chip { margin-left:0; background:var(--mint); cursor:default; }
#hdr .pill.disabled { background:var(--cream); color:rgba(27,20,32,.45); border-style:dashed; cursor:not-allowed; }
#hdr .pill:focus-visible, #hdr .mute:focus-visible { outline:calc(var(--s,1)*4px) solid #fff; outline-offset:calc(var(--s,1)*3px); }
#hdr .mute { padding:.25em .55em; }
#hdr .mute .ic-off { display:none; }
#hdr .mute.muted .ic-on { display:none; }
#hdr .mute.muted .ic-off { display:block; }

/* fx overlay */
#fx { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:5; }
.flash { position:absolute; inset:0; background:radial-gradient(circle at 50% 36%, rgba(255,255,255,.95), rgba(255,255,255,0) 62%); opacity:0; }
.ring { position:absolute; border-radius:50%; border:16px solid rgba(255,255,255,.9); opacity:0; }
.particle { position:absolute; left:0; top:0; width:40px; height:40px; will-change:transform,opacity; }

/* loader */
#loader { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; background:var(--cream); transition:opacity .4s ease; }
#loader.hide { opacity:0; pointer-events:none; }
#loader .spin { width:64px; height:120px; animation:spin 1s linear infinite; transform-origin:50% 50%; }
#loader .spin img { width:100%; height:100%; object-fit:contain; }
#loader .ltxt { font:700 22px Fredoka; color:var(--ink); opacity:.8; }
@keyframes spin { to { transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  #cta.pulse, #loader .spin, .lp:hover img { animation:none !important; }
}