:root{
  --pink:#f21c73;
  --pink-deep:#b6104f;
  --yellow:#eef01a;
  --teal:#5fd0d6;
  --purple:#7b3fb0;
  --bg0:#07060a;
  --bg1:#120b1a;
  --cream:#d9d2b0;
  --mush-red:#e0225c;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background:#000;
  overflow:hidden;
  font-family:'Anton', 'Arial Black', Impact, sans-serif;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  touch-action:none;
}

#stage{
  position:relative;
  width:100vw;
  height:100vh;
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(ellipse at center, #1a0f22 0%, #07060a 70%);
}

canvas#game{
  background:#0a0710;
  max-width:100vw;
  max-height:100vh;
  max-height:100dvh;
  aspect-ratio:960/540;
  width:auto;
  height:auto;
  box-shadow:0 0 60px rgba(242,28,115,0.25), 0 0 140px rgba(95,208,214,0.08);
}

@media (min-aspect-ratio:960/540){
  canvas#game{ height:100dvh; width:auto; }
}
@media (max-aspect-ratio:960/540){
  canvas#game{ width:100vw; height:auto; }
}

/* ---------- overlays ---------- */
.overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--cream);
  background:rgba(5,3,8,0.86);
  gap:14px;
  padding:20px;
  z-index:10;
}
.hidden{ display:none !important; }

.titleLogo{
  width:min(72vw, 520px);
  filter:drop-shadow(0 0 22px rgba(242,28,115,0.55)) drop-shadow(0 0 40px rgba(238,240,26,0.15));
  margin-bottom:-6px;
}
.subtitle{
  color:var(--teal);
  letter-spacing:0.06em;
  font-family:'Cinzel',serif;
  font-weight:600;
  font-size:14px;
  opacity:0.85;
  margin:0 0 8px 0;
}

.btn{
  font-family:'Anton','Arial Black',sans-serif;
  letter-spacing:0.08em;
  font-size:18px;
  padding:14px 34px;
  border-radius:2px;
  border:2px solid var(--yellow);
  background:linear-gradient(180deg, var(--pink), var(--pink-deep));
  color:#fff;
  cursor:pointer;
  text-shadow:0 2px 0 rgba(0,0,0,0.5);
  box-shadow:0 0 18px rgba(242,28,115,0.55), inset 0 0 12px rgba(255,255,255,0.15);
  clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);
  transition:transform 0.08s ease;
}
.btn:active{ transform:scale(0.95); }
.btnGhost{
  background:transparent;
  border:2px solid var(--teal);
  box-shadow:0 0 12px rgba(95,208,214,0.35);
  color:var(--teal);
}

.h2{
  font-size:34px;
  letter-spacing:0.05em;
  margin:0;
}
.glowPink{
  color:#fff;
  text-shadow:0 0 10px var(--pink), 0 0 26px var(--pink), 0 3px 0 #000;
}

.howGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  max-width:420px;
}
.howCard{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(238,240,26,0.35);
  padding:14px 10px;
  border-radius:6px;
}
.howIcon{ font-size:26px; margin-bottom:6px; }
.howCard p{ margin:0; font-family:'Cinzel',serif; font-size:12px; color:var(--cream); letter-spacing:0.02em; }

/* ---------- level intro ---------- */
.introEmblem{
  width:120px;height:120px;
  border-radius:50%;
  border:3px solid var(--yellow);
  box-shadow:0 0 30px rgba(238,240,26,0.5), inset 0 0 20px rgba(242,28,115,0.4);
  display:flex;align-items:center;justify-content:center;
  font-size:52px;
  margin-bottom:6px;
  background:radial-gradient(circle, rgba(123,63,176,0.5), rgba(0,0,0,0.6));
}
.introLevelNum{
  color:var(--teal);
  font-size:16px;
  letter-spacing:0.3em;
  font-family:'Cinzel',serif;
}
.introLevelName{
  font-size:38px;
  color:#fff;
  text-shadow:0 0 14px var(--pink), 0 3px 0 #000;
  letter-spacing:0.03em;
}
.introHint{
  color:var(--cream);
  font-family:'Cinzel',serif;
  font-size:13px;
  opacity:0.75;
  max-width:320px;
}

/* ---------- HUD ---------- */
#hud{
  position:absolute;
  top:10px; left:10px; right:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:5;
  pointer-events:none;
  font-family:'Anton',sans-serif;
  color:#fff;
}
.hudLeft{ display:flex; gap:16px; align-items:center; }
.heartsRow{ display:flex; gap:4px; align-items:center; }
.heart{ width:28px; height:auto; filter:drop-shadow(0 0 6px rgba(242,28,115,0.8)); }
.heart.empty{ filter:none; opacity:0.9; }
.orbCounter{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:19px;
  color:var(--yellow);
  text-shadow:0 0 8px rgba(238,240,26,0.6);
}
.orbDot{
  width:15px; height:15px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ffffff, var(--yellow) 55%, rgba(238,240,26,0.2));
  box-shadow:0 0 9px var(--yellow);
}
.hudCenter{
  font-size:13px;
  letter-spacing:0.15em;
  color:var(--yellow);
  text-shadow:0 0 8px rgba(238,240,26,0.6);
  opacity:0.85;
}
.hudRight{
  font-size:16px;
  color:var(--yellow);
  text-shadow:0 0 8px rgba(238,240,26,0.6);
}
.sparkIcon{ font-size:14px; }
.hudRight{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  max-width:180px;
}
.lineupHudImg{
  height:14px;
  width:auto;
  filter:drop-shadow(0 0 5px rgba(95,208,214,0.8));
}
.inviteCode{
  font-size:24px;
  letter-spacing:0.14em;
  color:var(--yellow);
  border:2px dashed var(--yellow);
  padding:10px 22px;
  border-radius:4px;
  text-shadow:0 0 12px rgba(238,240,26,0.7);
  background:rgba(0,0,0,0.5);
}

/* ---------- reward ---------- */
.frameWrap{
  position:relative;
  width:min(58vw, 340px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.rewardFrame{
  position:absolute;
  inset:0;
  width:100%;
  height:auto;
  z-index:2;
  pointer-events:none;
  filter:drop-shadow(0 0 26px rgba(242,28,115,0.5));
}
.rewardFlyer{
  width:88%;
  border-radius:2px;
  opacity:0;
  transform:scale(0.7);
  animation:flyerReveal 1.6s cubic-bezier(.2,.9,.25,1) 0.4s forwards;
  box-shadow:0 0 40px rgba(238,240,26,0.25);
}
@keyframes flyerReveal{
  0%{ opacity:0; transform:scale(0.6) rotate(-3deg); filter:blur(6px);}
  60%{ opacity:1; }
  100%{ opacity:1; transform:scale(1) rotate(0deg); filter:blur(0);}
}
/* floats above the frame + flyer artwork, always in the foreground */
.inviteFront{
  position:absolute;
  z-index:30;
  left:50%;
  bottom:7%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:14px;
  padding:12px 22px;
  opacity:0;
  animation:inviteFrontIn 0.5s ease 0.2s forwards, inviteFrontPulse 1.6s ease-in-out 0.7s infinite;
}
.inviteFront.hidden{ display:none !important; }
@keyframes inviteFrontIn{
  from{ opacity:0; transform:translateX(-50%) scale(0.6); }
  to{ opacity:1; transform:translateX(-50%) scale(1); }
}
@keyframes inviteFrontPulse{
  0%,100%{ box-shadow:0 0 18px rgba(242,28,115,0.7), inset 0 0 12px rgba(255,255,255,0.15); }
  50%{ box-shadow:0 0 36px rgba(242,28,115,1), 0 0 54px rgba(238,240,26,0.55), inset 0 0 12px rgba(255,255,255,0.15); }
}
.rewardCta{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  opacity:0;
  animation:fadeIn 1s ease 1.8s forwards;
}
@keyframes fadeIn{ to{ opacity:1; } }

/* ---------- sparkle ambient layer ---------- */
.sparkleLayer{
  position:absolute; inset:0;
  background-image:url('assets/sparkles.png');
  background-size:cover;
  background-position:center;
  opacity:0.35;
  mix-blend-mode:screen;
  pointer-events:none;
  animation:sparklePulse 5s ease-in-out infinite;
}
@keyframes sparklePulse{
  0%,100%{ opacity:0.25; }
  50%{ opacity:0.45; }
}

.cornerMushroom{
  position:absolute;
  bottom:-10px;
  width:120px;height:120px;
  opacity:0.25;
  pointer-events:none;
}

/* ---------- mute ---------- */
.muteBtn{
  position:absolute;
  top:10px; right:10px;
  z-index:20;
  background:rgba(0,0,0,0.5);
  border:1px solid var(--yellow);
  color:var(--yellow);
  border-radius:50%;
  width:34px;height:34px;
  font-size:15px;
  cursor:pointer;
}
.godBtn{
  right:52px;
  opacity:0.6;
  filter:grayscale(1);
}
.godBtn.active{
  border-color:var(--pink);
  box-shadow:0 0 14px rgba(242,28,115,0.85);
  opacity:1;
  filter:none;
}

/* ---------- touch controls ---------- */
#touchControls{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding:18px;
  z-index:15;
  pointer-events:none;
}
.touchLeft, .touchRight{
  display:flex;
  gap:12px;
  pointer-events:auto;
}
.tBtn{
  width:58px;height:58px;
  border-radius:50%;
  border:2px solid var(--yellow);
  background:rgba(20,10,25,0.55);
  color:var(--yellow);
  font-size:22px;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(2px);
}
.tJump{
  width:74px;height:74px;
  border-color:var(--pink);
  color:var(--pink);
  background:rgba(20,10,25,0.55);
}
.tFire{
  border-color:var(--teal);
  color:var(--teal);
}

/* ---------- rotate hint ---------- */
#rotateHint{ z-index:30; background:rgba(0,0,0,0.92); }
.rotateIcon{ font-size:44px; animation:rotateWiggle 1.6s ease-in-out infinite; }
@keyframes rotateWiggle{
  0%,100%{ transform:rotate(0deg); }
  50%{ transform:rotate(90deg); }
}

@media (max-width:820px) and (pointer:coarse){
  #touchControls.enabled{ display:flex; }
}

/* ---------- flash + level complete art ---------- */
#flashOverlay{
  position:absolute; inset:0;
  background:#ff1050;
  opacity:0;
  pointer-events:none;
  z-index:25;
}
#flashOverlay.flash{ animation:flashPulse 0.55s ease; }
@keyframes flashPulse{
  0%{ opacity:0; }
  25%{ opacity:0.85; }
  100%{ opacity:0; }
}
#levelCompleteArt{
  width:min(46vw, 220px);
  filter:drop-shadow(0 0 24px rgba(242,28,115,0.6));
  margin-bottom:4px;
}
.usbIconWrap{
  filter:drop-shadow(0 0 20px rgba(238,240,26,0.6));
  margin-bottom:4px;
  animation:usbFloat 2.4s ease-in-out infinite;
}
.usbIconWrap svg{ width:100%; height:auto; display:block; }
.usbIconWrap img{ height:130px; width:auto; display:block; }
@keyframes usbFloat{
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%{ transform:translateY(-8px) rotate(2deg); }
}

/* ---------- USB insert cutscene ---------- */
.cutsceneOverlay{ background:#000; gap:0; }
.cutsceneStage{
  position:relative;
  width:min(88vw, 560px);
  aspect-ratio:5/4;
}
.cutsceneComputer{
  position:absolute;
  left:50%; top:52%;
  transform:translate(-50%,-50%);
  width:92%;
}
.cutsceneComputer svg, .cutsceneUsb svg{ width:100%; height:auto; display:block; overflow:visible; }
.cutsceneUsb{
  position:absolute;
  width:12%;
  left:70%; top:6%;
  transform:rotate(-14deg);
  transition:transform 1.3s cubic-bezier(.32,.7,.2,1);
  filter:drop-shadow(0 0 16px rgba(242,28,115,0.65));
}
.cutsceneUsb.inserted{
  filter:drop-shadow(0 0 30px rgba(238,240,26,0.95));
}
.cutsceneFlash{
  position:absolute; inset:-10%;
  background:radial-gradient(circle at 68% 46%, rgba(238,240,26,0.95), transparent 55%);
  opacity:0;
  pointer-events:none;
}
.cutsceneFlash.pulse{ animation:cutsceneFlashPulse 0.6s ease; }
@keyframes cutsceneFlashPulse{
  0%{ opacity:0; }
  35%{ opacity:1; }
  100%{ opacity:0; }
}
.cutsceneCaption{
  margin-top:22px;
  color:var(--teal);
  font-family:'Cinzel',serif;
  font-size:14px;
  letter-spacing:0.1em;
  opacity:0;
  transition:opacity 0.9s ease;
  min-height:1.2em;
}
.cutsceneCaption.show{ opacity:0.85; }