:root{
  --pink:#ff3ea5;
  --purple:#b98cff;
  --red:#ff4d5e;
  --ink:#0a0510;
  --steam:#1b2838;
  --steam2:#2a475e;
}

*{box-sizing:border-box;margin:0;padding:0;}
.hidden{display:none !important;}
html,body{height:100%;}
body{
  background:#05030a;
  color:#fff;
  font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

/* ---------- stage ---------- */
#stage{position:fixed;inset:0;overflow:hidden;cursor:pointer;}

#bg{
  position:absolute;inset:0;
  background:url("assets/bg.jpg") center/cover no-repeat;
  transform:scale(1.06);
  filter:saturate(1.1) brightness(.85);
}
#bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 30%, rgba(3,0,10,.75) 100%);
}

#scene{position:absolute;inset:0;width:100%;height:100%;display:block;}

/* ---------- sweeping lights ---------- */
#lights{position:absolute;inset:0;pointer-events:none;z-index:5;mix-blend-mode:screen;overflow:hidden;}
.beam{
  position:absolute;
  top:-4vh;
  width:95vw;
  min-width:640px;
  height:auto;
  transform-origin:0% 30%;
  filter:blur(2px) saturate(1.3);
  will-change:transform,opacity;
}
.beam-a{left:16%;opacity:.75;animation:sweepA 6.5s ease-in-out infinite alternate, flick 5.3s ease-in-out infinite;}
.beam-b{left:84%;opacity:.7; animation:sweepB 8.5s ease-in-out infinite alternate, flick 6.7s ease-in-out infinite;}
.beam-c{left:38%;opacity:.55;animation:sweepC 5.5s ease-in-out infinite alternate, flick 4.1s ease-in-out infinite;}
.beam-d{left:64%;opacity:.5; animation:sweepD 10s  ease-in-out infinite alternate, flick 7.9s ease-in-out infinite;}

/* beams starting on the right side are mirrored (scaleY(-1) keeps the apex up) */
@keyframes sweepA{from{transform:rotate(24deg)  scaleX(1);}    to{transform:rotate(76deg) scaleX(1.18);}}
@keyframes sweepB{from{transform:rotate(156deg) scaleX(1.15) scaleY(-1);} to{transform:rotate(104deg) scaleX(1) scaleY(-1);}}
@keyframes sweepC{from{transform:rotate(70deg)  scaleX(.85);}  to{transform:rotate(30deg) scaleX(1.25);}}
@keyframes sweepD{from{transform:rotate(148deg) scaleX(1) scaleY(-1);} to{transform:rotate(110deg) scaleX(1.25) scaleY(-1);}}
@keyframes flick{0%,100%{filter:blur(2px) brightness(1);}42%{filter:blur(3px) brightness(.55);}58%{filter:blur(1px) brightness(1.35);}}

/* the lamps themselves */
.lamp{
  position:absolute;top:0;width:22px;height:22px;border-radius:50%;
  transform:translateX(-50%);
  box-shadow:0 0 34px 14px currentColor;
  background:currentColor;
  opacity:.85;
  animation:flick 5s ease-in-out infinite;
}
.lamp-1{left:16%;color:#b98cff;}
.lamp-2{left:84%;color:#ff6ec7;animation-duration:6.4s;}
.lamp-3{left:38%;color:#ff4d5e;animation-duration:4.2s;}
.lamp-4{left:64%;color:#ff6ec7;animation-duration:7.6s;}

body.party #lights .beam{animation-duration:1.1s,.35s;}
body.party .lamp{animation-duration:.35s;}

/* stage shadow — softens the hard bottom edge of the stage art */
#floor{
  position:absolute;left:0;right:0;bottom:0;top:60%;
  pointer-events:none;z-index:6;
  background:linear-gradient(180deg,rgba(5,3,10,0) 0%,rgba(5,3,10,.5) 5%,rgba(5,3,10,.78) 18%,rgba(5,3,10,.93) 100%);
}

/* ---------- speech bubble ---------- */
#bubbleLayer{position:absolute;inset:0;pointer-events:none;z-index:20;}
.bubble{
  position:absolute;
  transform:translate(-50%,-100%) scale(.4);
  background:#fff;
  color:#12071f;
  font-weight:900;
  font-size:clamp(18px,3.2vw,34px);
  letter-spacing:.5px;
  padding:.42em .72em;
  border-radius:999px;
  white-space:nowrap;
  box-shadow:0 8px 0 rgba(0,0,0,.25), 0 0 30px rgba(255,62,165,.55);
  animation:pop .9s cubic-bezier(.2,1.5,.4,1) forwards;
}
.bubble::after{
  content:"";position:absolute;left:26%;bottom:-13px;
  border:9px solid transparent;border-top-color:#fff;border-bottom:0;
  transform:rotate(-12deg);
}
@keyframes pop{
  0%{transform:translate(-50%,-100%) scale(.3) rotate(-8deg);opacity:0;}
  25%{transform:translate(-50%,-115%) scale(1.12) rotate(3deg);opacity:1;}
  45%{transform:translate(-50%,-118%) scale(1) rotate(-2deg);opacity:1;}
  100%{transform:translate(-50%,-165%) scale(.95) rotate(0deg);opacity:0;}
}

/* ---------- hit fx ---------- */
#fx{position:absolute;inset:0;pointer-events:none;z-index:15;}
.star{
  position:absolute;
  font-size:clamp(14px,2.4vw,26px);
  font-weight:900;
  color:#ffe14d;
  text-shadow:0 0 12px rgba(255,120,0,.9);
  animation:fly .7s ease-out forwards;
}
@keyframes fly{
  0%{transform:translate(-50%,-50%) scale(.4);opacity:1;}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.2) rotate(var(--rot));opacity:0;}
}
.flash{position:absolute;inset:0;background:#fff;opacity:.0;animation:flash .18s ease-out forwards;}
@keyframes flash{0%{opacity:.28;}100%{opacity:0;}}

body.shake #stage{animation:shake .22s linear;}
@keyframes shake{
  0%{transform:translate(0,0)}
  20%{transform:translate(-9px,4px) rotate(-.4deg)}
  40%{transform:translate(8px,-5px) rotate(.35deg)}
  60%{transform:translate(-6px,-3px)}
  80%{transform:translate(5px,3px)}
  100%{transform:translate(0,0)}
}

/* ---------- hint ---------- */
#hint{
  position:absolute;left:50%;bottom:14vh;transform:translateX(-50%);
  z-index:18;pointer-events:none;
  font-weight:900;letter-spacing:3px;font-size:clamp(12px,1.6vw,16px);
  color:#fff;text-shadow:0 0 18px rgba(255,62,165,.9);
  animation:breathe 1.9s ease-in-out infinite;
  transition:opacity .4s ease;
}
#hint.gone{opacity:0;}
@keyframes breathe{0%,100%{opacity:.55;transform:translateX(-50%) scale(1);}50%{opacity:1;transform:translateX(-50%) scale(1.06);}}

/* ---------- bars ---------- */
#topbar,#bottombar{
  position:fixed;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px clamp(12px,3vw,28px);
}
#topbar{top:0;background:linear-gradient(180deg,rgba(5,2,12,.85),rgba(5,2,12,0));}
#bottombar{bottom:0;background:linear-gradient(0deg,rgba(5,2,12,.9),rgba(5,2,12,0));}

.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:2px;font-size:clamp(13px,1.8vw,18px);}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--pink);box-shadow:0 0 14px var(--pink);animation:breathe 1.4s infinite;}
.top-actions,.foot-links{display:flex;align-items:center;gap:10px;}

.counter{font-weight:800;letter-spacing:1px;font-size:clamp(12px,1.6vw,15px);opacity:.9;}
.counter b{color:var(--pink);font-size:1.5em;text-shadow:0 0 14px rgba(255,62,165,.7);}
.counter b.bump{animation:bump .25s ease-out;}
@keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.45)}100%{transform:scale(1)}}

/* ---------- buttons ---------- */
.steam-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,#3d7ea6,#1b4f72);
  color:#fff;text-decoration:none;font-weight:900;letter-spacing:1px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  padding:10px 16px;font-size:13px;
  box-shadow:0 6px 0 rgba(0,0,0,.35), 0 0 26px rgba(61,126,166,.35);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
  white-space:nowrap;
}
.steam-btn:hover{transform:translateY(-2px);filter:brightness(1.12);box-shadow:0 8px 0 rgba(0,0,0,.35),0 0 34px rgba(61,126,166,.5);}
.steam-btn:active{transform:translateY(2px);box-shadow:0 3px 0 rgba(0,0,0,.35);}
.steam-btn.alt{background:linear-gradient(180deg,#ff5fae,#c01f78);box-shadow:0 6px 0 rgba(0,0,0,.35),0 0 26px rgba(255,62,165,.4);}
.steam-btn.alt:hover{box-shadow:0 8px 0 rgba(0,0,0,.35),0 0 34px rgba(255,62,165,.6);}
.steam-btn.small{padding:8px 13px;font-size:11.5px;}
.steam-btn.big{padding:14px 20px;font-size:15px;flex:1 1 auto;justify-content:center;}
.steam-ico{
  width:16px;height:16px;flex:0 0 16px;border-radius:50%;
  background:#fff;
  -webkit-mask:radial-gradient(circle at 62% 38%,#000 30%,transparent 31%) , linear-gradient(#000,#000);
  display:inline-block;opacity:.9;
}
.ghost-btn{
  background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.2);
  border-radius:10px;padding:8px 12px;font-size:11.5px;font-weight:800;letter-spacing:1px;cursor:pointer;
  font-family:inherit;
}
.ghost-btn:hover{background:rgba(255,255,255,.14);}
.text-btn{
  background:none;border:0;color:rgba(255,255,255,.55);font-family:inherit;font-size:12.5px;
  cursor:pointer;margin-top:14px;text-decoration:underline;letter-spacing:.4px;
}
.text-btn:hover{color:#fff;}

/* ---------- you / leaderboard ---------- */
.you{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.you-meta{display:flex;gap:10px;align-items:baseline;font-size:11.5px;font-weight:800;
  letter-spacing:1px;color:rgba(255,255,255,.6);text-transform:uppercase;}
#youRank{color:var(--purple);}

.board-card{text-align:left;}
.board-card h2,.board-card .popup-kicker{text-align:center;}
.board-list{list-style:none;margin:6px 0 0;padding:0 2px 0 0;max-height:52vh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;}
.board-list::-webkit-scrollbar{width:6px;}
.board-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px;}
.board-list li{
  display:flex;align-items:center;gap:12px;
  padding:9px 12px;border-radius:10px;
  font-size:14px;font-weight:800;letter-spacing:.4px;
  background:rgba(255,255,255,.04);margin-bottom:5px;
}
.bl-rank{width:30px;flex:0 0 30px;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;text-align:left;}
.bl-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;}
.bl-slaps{color:var(--pink);font-variant-numeric:tabular-nums;text-align:right;flex:0 0 auto;}
.board-list li.bl-1{background:linear-gradient(90deg,rgba(255,225,77,.22),rgba(255,225,77,.05));}
.board-list li.bl-2{background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.04));}
.board-list li.bl-3{background:linear-gradient(90deg,rgba(255,138,61,.18),rgba(255,138,61,.04));}
.board-list li.is-me{outline:1px solid rgba(255,62,165,.7);}
.board-empty{justify-content:center;color:rgba(255,255,255,.5);font-weight:600;}
.board-me{
  margin-top:10px;padding:9px 12px;border-radius:10px;
  background:rgba(255,62,165,.14);border:1px solid rgba(255,62,165,.35);
  display:flex;align-items:center;gap:12px;font-size:14px;font-weight:800;
}
.board-me.hidden{display:none;}
.board-total{margin:14px 0 4px;text-align:center;color:rgba(255,255,255,.55);font-size:12.5px;letter-spacing:.5px;}

/* ---------- name gate ---------- */
#nameInput{
  display:block;width:100%;margin:10px 0 14px;
  background:rgba(0,0,0,.42);border:2px solid rgba(255,255,255,.2);
  border-radius:14px;padding:20px 18px;
  color:#fff;font-family:inherit;
  font-size:clamp(20px,3.4vw,26px);font-weight:900;letter-spacing:2px;text-align:center;
}
#nameInput::placeholder{font-size:16px;letter-spacing:1px;font-weight:700;color:rgba(255,255,255,.32);}
#nameInput:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,62,165,.22);}
.form-error{color:#ff7a86;font-size:13px;font-weight:700;margin:-6px 0 12px;}
.form-error.hidden{display:none;}

/* ---------- popup ---------- */
#popup,#board,#nameGate{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  background:rgba(4,1,10,.72);backdrop-filter:blur(6px);
  padding:20px;
  animation:fadeIn .25s ease-out;
}
#popup.hidden,#board.hidden,#nameGate.hidden{display:none;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.popup-card{
  position:relative;
  width:min(560px,100%);
  background:linear-gradient(160deg,#241036,#140825 60%,#1c0b2b);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  padding:clamp(24px,4vw,38px);
  text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 60px rgba(255,62,165,.22);
  animation:cardIn .35s cubic-bezier(.2,1.4,.4,1);
}
@keyframes cardIn{from{transform:translateY(24px) scale(.92);opacity:0}to{transform:none;opacity:1}}
.popup-kicker{color:var(--purple);font-weight:900;letter-spacing:3px;font-size:11px;margin-bottom:10px;}
.popup-card h2{font-size:clamp(22px,3.6vw,32px);line-height:1.15;margin-bottom:12px;}
.popup-card p{color:rgba(255,255,255,.75);line-height:1.6;font-size:clamp(13.5px,1.8vw,15px);margin-bottom:22px;}
.popup-card p b{color:var(--pink);}
.popup-actions{display:flex;flex-wrap:wrap;gap:10px;}
.popup-close{
  position:absolute;top:10px;right:14px;background:none;border:0;color:rgba(255,255,255,.45);
  font-size:26px;line-height:1;cursor:pointer;font-family:inherit;
}
.popup-close:hover{color:#fff;}

/* ---------- loader ---------- */
#loader{
  position:fixed;inset:0;z-index:90;background:#05030a;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease;
}
#loader.gone{opacity:0;pointer-events:none;}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:16px;font-weight:900;letter-spacing:3px;font-size:12px;color:rgba(255,255,255,.6);}
.spin{width:38px;height:38px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--pink);animation:sp .8s linear infinite;}
@keyframes sp{to{transform:rotate(360deg)}}

@media (max-width:640px){
  .board-list{max-height:48vh;}
  .you{width:100%;justify-content:center;}
  .foot-links{flex-wrap:wrap;justify-content:center;}
  .brand span:last-child{font-size:12px;}
  #hint{bottom:18vh;}
  .popup-actions{flex-direction:column;}
  #bottombar{flex-direction:column;gap:8px;align-items:center;padding-bottom:16px;}
}
@media (prefers-reduced-motion:reduce){
  .beam{animation:none!important;}
  body.shake #stage{animation:none;}
}