:root{
  --bg:#070b16;
  --bg2:#0c1326;
  --panel:rgba(16,24,45,.82);
  --line:rgba(120,170,255,.16);
  --cyan:#4ddbff;
  --pink:#ff5d8f;
  --text:#e8f0ff;
  --muted:#8fa3c8;
}
*{box-sizing:border-box;min-width:0}
html,body{margin:0;padding:0;height:100%;width:100%}
html{height:-webkit-fill-available}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Rajdhani',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100vw;
  min-height:100vh;
  min-height:100dvh;
  min-height:-webkit-fill-available;
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
img,svg,canvas{max-width:100%}
.hidden{display:none !important}
button{font-family:inherit;cursor:pointer;touch-action:manipulation}
input,select,textarea{font-size:16px;touch-action:manipulation}

/* ------------------------------------------------------------- lobby */
#lobby{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:clamp(24px,5vw,56px) max(20px, env(safe-area-inset-right)) 32px max(20px, env(safe-area-inset-left));
  padding-top:calc(clamp(24px,5vw,56px) + env(safe-area-inset-top));
  gap:clamp(22px,3vw,34px);
}
.grid-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 50% -10%, rgba(77,219,255,.16), transparent 70%),
    radial-gradient(800px 500px at 90% 110%, rgba(255,93,143,.14), transparent 70%),
    linear-gradient(rgba(120,170,255,.055) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg, rgba(120,170,255,.055) 1px, transparent 1px) 0 0/44px 44px,
    var(--bg);
}
#lobby > *{position:relative;z-index:1;width:100%;max-width:620px}

.hero{text-align:center}
.kicker{
  margin:0 0 10px;letter-spacing:.34em;text-transform:uppercase;
  font-size:11px;color:var(--cyan);font-family:'JetBrains Mono',monospace;
}
h1{
  margin:0;font-size:clamp(50px,13vw,96px);line-height:.92;font-weight:700;
  letter-spacing:.04em;
  text-shadow:0 0 42px rgba(77,219,255,.45);
}
h1 span{color:var(--pink);text-shadow:0 0 42px rgba(255,93,143,.5)}
.tagline{margin:14px auto 0;max-width:30em;color:var(--muted);font-size:clamp(15px,2.3vw,18px);line-height:1.5}
.tagline strong{color:var(--text)}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:clamp(18px,3vw,26px);
  backdrop-filter:blur(10px);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.field{display:block;margin:0 0 16px}
.field > span{
  display:flex;justify-content:space-between;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;
  font-family:'JetBrains Mono',monospace;
}
.field > span b{color:var(--cyan)}
input[type=text],input:not([type]){
  width:100%;padding:13px 14px;border-radius:11px;
  border:1px solid var(--line);background:rgba(5,9,20,.75);color:var(--text);
  font-family:inherit;font-size:17px;font-weight:600;outline:none;
}
input:not([type]):focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(77,219,255,.14)}
input.code{text-transform:uppercase;letter-spacing:.5em;text-align:center;font-family:'JetBrains Mono',monospace}
input[type=range]{width:100%;accent-color:var(--cyan)}

.tabs{display:flex;gap:6px;background:rgba(5,9,20,.6);padding:5px;border-radius:12px;margin-bottom:16px;flex-wrap:wrap}
.tab{
  flex:1 1 30%;min-width:96px;padding:12px 8px;border:0;border-radius:9px;background:transparent;
  color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.04em;transition:.15s;
  min-height:44px;
}
.tab:hover{color:var(--text)}
.tab.active{background:linear-gradient(180deg,rgba(77,219,255,.22),rgba(77,219,255,.08));color:#fff;box-shadow:inset 0 0 0 1px rgba(77,219,255,.35)}
.hint{margin:0 0 14px;color:var(--muted);font-size:14.5px;line-height:1.5}

.play{
  width:100%;padding:16px;border:0;border-radius:12px;min-height:50px;
  background:linear-gradient(135deg,var(--cyan),#2b8cff 55%,var(--pink));
  color:#04121f;font-size:19px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 12px 34px rgba(77,219,255,.3);transition:transform .12s, box-shadow .12s;
}
.play:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(77,219,255,.42)}
.play:active{transform:translateY(0)}
.error{margin:12px 0 0;color:#ff8da6;font-size:14px;text-align:center}

.controls{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;margin:20px 0 0;padding:14px 0 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
kbd{
  display:inline-block;padding:2px 7px;margin-right:3px;border-radius:6px;
  background:rgba(120,170,255,.12);border:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text);
}
.touchNote{margin:10px 0 0;font-size:12.5px;color:#6f84a8}

.board{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:20px clamp(16px,3vw,24px);backdrop-filter:blur(10px);
}
.board h2{margin:0 0 14px;font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace}
#leaderboard{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
#leaderboard li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:15px}
#leaderboard li:nth-child(odd){background:rgba(120,170,255,.05)}
#leaderboard li .rank{width:22px;color:var(--cyan);font-family:'JetBrains Mono',monospace;font-size:13px}
#leaderboard li .who{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#leaderboard li .num{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted)}
#leaderboard li .num b{color:var(--text)}
#leaderboard li.empty{color:var(--muted);justify-content:center;font-size:14px}
.foot{text-align:center;color:#55688a;font-size:12.5px;margin:4px 0 0}

/* -------------------------------------------------------------- game */
#game{position:fixed;inset:0;background:#05080f;overflow:hidden;touch-action:none}
#canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

#hud{
  position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;
  padding:max(12px, env(safe-area-inset-top)) max(clamp(10px,2vw,20px), env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(clamp(10px,2vw,20px), env(safe-area-inset-left));
}
.hudTop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
#scoreboard{display:flex;flex-direction:column;gap:4px}
.srow{
  display:flex;align-items:center;gap:8px;
  background:rgba(7,11,22,.72);border:1px solid var(--line);border-left-width:3px;
  padding:4px 10px 4px 8px;border-radius:7px;font-size:13.5px;font-weight:600;
  min-width:178px;
}
.srow .dot{width:8px;height:8px;border-radius:50%}
.srow .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .bt{font-size:9px;letter-spacing:.14em;color:var(--muted);font-family:'JetBrains Mono',monospace}
.srow .kd{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)}
.srow .kd b{color:#fff;font-size:14px}
.srow.me{background:rgba(77,219,255,.14)}
.srow.dead{opacity:.45}

.roomTag{display:flex;flex-direction:column;align-items:flex-end;gap:3px;pointer-events:auto}
.roomLabel{font-size:9px;letter-spacing:.26em;color:var(--muted);font-family:'JetBrains Mono',monospace}
#codeChip{
  background:rgba(7,11,22,.72);border:1px solid rgba(77,219,255,.35);color:var(--cyan);
  font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:700;letter-spacing:.22em;
  padding:9px 10px 9px 14px;border-radius:8px;min-height:44px;
}
#codeChip:hover{background:rgba(77,219,255,.16)}

#killfeed{position:absolute;top:50px;right:clamp(10px,2vw,20px);display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.kf{
  background:rgba(7,11,22,.76);border:1px solid var(--line);border-radius:7px;
  padding:4px 9px;font-size:13px;animation:kfIn .18s ease-out;
}
.kf .k{font-weight:700}
.kf .arrow{color:var(--pink);margin:0 6px;font-family:'JetBrains Mono',monospace}
.kf .v{color:var(--muted)}
.kf.sys{color:var(--muted);font-size:12.5px}
@keyframes kfIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

.hudBottom{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.meters{display:flex;flex-direction:column;gap:6px;width:min(290px,45vw)}
.meter{display:flex;align-items:center;gap:8px}
.mLabel{font-size:9px;letter-spacing:.18em;color:var(--muted);width:34px;font-family:'JetBrains Mono',monospace}
.bar{flex:1;height:11px;background:rgba(7,11,22,.8);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#43e08a,#8aff80);transition:width .12s}
.bar.dash i{background:linear-gradient(90deg,#4ddbff,#2b8cff)}
.hudBtns{display:flex;gap:8px;pointer-events:auto;flex-wrap:wrap}
.hudBtns button{
  background:rgba(7,11,22,.76);border:1px solid var(--line);color:var(--text);
  padding:9px 13px;border-radius:9px;font-size:13px;font-weight:700;letter-spacing:.04em;
  min-height:44px;min-width:44px;
}
.hudBtns button:hover{border-color:var(--cyan);color:var(--cyan)}

#centerMsg{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;
  background:rgba(7,11,22,.8);border:1px solid var(--line);border-radius:16px;
  padding:22px 34px;backdrop-filter:blur(6px);max-width:min(90vw,520px);
}
#centerMsg .big{font-size:clamp(26px,5vw,42px);font-weight:700;letter-spacing:.05em;line-height:1.1}
#centerMsg .sub{margin-top:8px;color:var(--muted);font-size:15px}
#centerMsg .sub b{color:var(--cyan)}

#rotateHint{
  position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 10px);transform:translateX(-50%);
  background:rgba(7,11,22,.86);border:1px solid rgba(77,219,255,.4);color:var(--cyan);
  padding:7px 14px;border-radius:20px;font-size:12.5px;font-weight:600;letter-spacing:.03em;
  pointer-events:none;z-index:5;transition:opacity .4s;white-space:nowrap;
}

#sticks{position:absolute;inset:0;pointer-events:none}
.stick{
  position:absolute;bottom:calc(clamp(18px,6vh,54px) + env(safe-area-inset-bottom));width:124px;height:124px;border-radius:50%;
  background:rgba(120,170,255,.07);border:1px solid var(--line);pointer-events:auto;touch-action:none;
}
.stick i{
  position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;
  background:rgba(77,219,255,.3);border:1px solid rgba(77,219,255,.6);
}
#stickMove{left:calc(clamp(14px,4vw,40px) + env(safe-area-inset-left))}
#stickAim{right:calc(clamp(14px,4vw,40px) + env(safe-area-inset-right))}
#stickAim i{background:rgba(255,93,143,.3);border-color:rgba(255,93,143,.6)}

@media (max-width:560px){
  .srow{min-width:0;font-size:12px;padding:3px 8px}
  .srow .bt{display:none}
  #killfeed{top:44px;max-width:52vw}
  .meters{width:min(220px,52vw)}
  .stick{width:104px;height:104px}
  .stick i{width:42px;height:42px;margin:-21px 0 0 -21px}
}

@media (max-width:380px){
  .stick{width:92px;height:92px}
  .hudBtns button{padding:8px 10px;font-size:12px}
}