@font-face{font-family:"Marquee";src:url("assets/fonts/passion-one-400.woff2") format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"Marquee";src:url("assets/fonts/passion-one-700.woff2") format("woff2");font-weight:700;font-display:block}
@font-face{font-family:"Marquee";src:url("assets/fonts/passion-one-900.woff2") format("woff2");font-weight:900;font-display:block}

*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#0B1030}
body{
  font-family:"Marquee",Impact,"Arial Narrow",sans-serif;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
}
#app{position:fixed;inset:0;overflow:hidden}
#stage{display:block;width:100%;height:100%;touch-action:none}

/* ---------- boot veil ---------- */
#boot{
  position:absolute;inset:0;z-index:40;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:
    radial-gradient(120% 80% at 50% 105%, #4a1d5e 0%, #1b1240 55%, #0B1030 100%);
  transition:opacity .5s ease;
}
#boot.gone{opacity:0;pointer-events:none}
.boot-mark{
  font-weight:900;font-style:italic;letter-spacing:.06em;
  font-size:clamp(28px,7vw,64px);line-height:1;
  color:#F4F7FF;
  text-shadow:0 0 6px #fff,0 0 18px #FF2D95,0 0 42px #FF2D95;
  transform:skewX(-7deg);
}
.boot-bar{width:min(52vw,320px);height:10px;border:3px solid #3A2418;border-radius:6px;background:#1A1730;overflow:hidden}
.boot-bar i{display:block;height:100%;width:38%;background:#FFC22E;border-radius:3px;animation:bz 1.1s ease-in-out infinite alternate}
@keyframes bz{from{width:12%;background:#FF2D95}to{width:92%;background:#9BE800}}
.boot-note{font-size:clamp(13px,3.2vw,18px);letter-spacing:.18em;color:#9aa6d8;text-transform:uppercase}

/* ---------- touch controls ---------- */
#touch{position:absolute;inset:0;z-index:30;pointer-events:none;display:none}
#touch.on{display:block}
.pad{
  position:absolute;bottom:0;left:0;right:0;display:none;pointer-events:none;
  align-items:flex-end;justify-content:space-between;gap:10px;
  padding:0 max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
}
.pad.on{display:flex}
.pad .grp{display:flex;gap:10px;align-items:flex-end}
/* two seats share the phone: one thumb zone each */
#touch.two #padP1{right:50%}
#touch.two #padP2{display:flex;left:50%}
.tbtn{
  pointer-events:auto;font-family:inherit;font-weight:900;font-style:italic;
  letter-spacing:.04em;border:0;background:none;color:#fff;
  opacity:.55;transition:opacity .08s ease,transform .06s ease;
  -webkit-appearance:none;appearance:none;
}
.tbtn:active,.tbtn.down{opacity:.92;transform:translateY(2px)}
.tdir{
  width:clamp(52px,15vw,76px);height:clamp(52px,15vw,76px);
  border-radius:14px;font-size:clamp(18px,5vw,26px);
  background:rgba(20,18,42,.72);
  border:3px solid rgba(255,194,46,.85);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.4);
}
.tjump{
  width:clamp(76px,22vw,112px);height:clamp(76px,22vw,112px);border-radius:50%;
  font-size:clamp(15px,3.6vw,22px);
  background:radial-gradient(circle at 38% 32%,#ff5a6e,#c1102c 70%);
  border:4px solid #F4F7FF;
  box-shadow:0 0 0 4px rgba(20,18,42,.8),inset 0 -6px 0 rgba(0,0,0,.35);
}
.trun{
  width:clamp(52px,15vw,76px);height:clamp(52px,15vw,76px);border-radius:14px;
  font-size:clamp(13px,3.2vw,18px);
  background:rgba(20,18,42,.72);
  border:3px solid rgba(155,232,0,.85);
}
.p2 .tdir{border-color:rgba(255,45,149,.9)}
.p2 .tjump{background:radial-gradient(circle at 38% 32%,#ff86c4,#a3106a 70%)}
.p2 .trun{border-color:rgba(122,60,255,.95)}

/* The lobby, while a room is filling. We run the room and draw the waiting;
   this is the waiting, on the page's own chrome rather than a browser dialog. */
#lobby{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(6,5,16,.82);z-index:60;
  font-family:Marquee,Impact,"Arial Narrow",sans-serif;
}
#lobby.on{display:flex}
#lobby .lb-card{
  width:min(460px,100%);max-height:100%;overflow:auto;
  padding:22px 20px;border-radius:16px;text-align:center;
  background:linear-gradient(180deg,#1b1630,#120e24);
  border:4px solid rgba(255,45,149,.85);
  box-shadow:0 0 0 3px rgba(0,0,0,.55),0 18px 40px rgba(0,0,0,.6);
}
#lobby h2{
  margin:0;font-size:clamp(22px,6vw,32px);font-style:italic;letter-spacing:.05em;
  color:#FF2D95;text-shadow:0 0 16px rgba(255,45,149,.55);
}
#lobby .lb-sub{margin:8px 0 16px;font-size:14px;font-style:italic;color:#EAF2FF;opacity:.86}
#lobby .lb-seats{list-style:none;margin:0 0 14px;padding:0}
#lobby .lb-seats li{
  display:flex;align-items:center;gap:12px;margin:6px 0;padding:9px 12px;
  border-radius:10px;background:rgba(255,255,255,.05);
  border:2px solid rgba(255,255,255,.10);
}
#lobby .lb-seats li.in{border-color:rgba(155,232,0,.8)}
#lobby .sn{
  width:26px;height:26px;line-height:26px;border-radius:50%;flex:none;
  background:#0b0a18;color:#FFC22E;font-size:15px;
}
#lobby .su{font-size:17px;font-style:italic;color:#FFF;word-break:break-all}
#lobby .lb-note{margin:0 0 12px;font-size:14px;color:#FF8FA8}
#lobby .lb-link{display:flex;gap:8px;margin:12px 0}
#lobby .lb-link span{display:none}
#lobby .lb-link input{
  flex:1;min-width:0;padding:9px;border-radius:8px;font:inherit;font-size:13px;
  color:#EAF2FF;background:#0b0a18;border:2px solid rgba(255,194,46,.55);
}
#lobby button{
  display:block;width:100%;margin:8px 0;padding:12px;border-radius:10px;
  font:inherit;font-size:17px;font-style:italic;letter-spacing:.05em;cursor:pointer;
  color:#fff;background:radial-gradient(circle at 50% 0,#3a2f66,#1b1630 75%);
  border:3px solid rgba(255,45,149,.8);
}
#lobby .lb-link button{width:auto;flex:none;margin:0;padding:9px 14px;font-size:14px}
#lobby button:active{transform:translateY(2px)}