:root{
  --bg:#0d1117;
  --panel:#151b23;
  --panel2:#1c2530;
  --line:#2a3441;
  --accent:#5ee6a8;
  --accent2:#ff5c5c;
  --text:#e6edf3;
  --sub:#8b98a5;
  font-family: 'Segoe UI', 'Malgun Gothic', system-ui, sans-serif;
}
*{ box-sizing:border-box; }
html, body{
  margin:0; padding:0; width:100%; height:100%;
  background:var(--bg); color:var(--text); overflow:hidden;
}
#stage{ position:relative; width:100vw; height:100vh; }
canvas{ position:absolute; inset:0; display:block; }
#gameLayer{ cursor:none; }

.brand-banner{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  z-index:50; pointer-events:none;
  background:rgba(0,0,0,.5); border:1px solid rgba(94,230,168,.4);
  color:var(--accent); font-weight:800; letter-spacing:1px;
  padding:6px 20px; border-radius:20px; font-size:15px;
  white-space:nowrap;
}

.hud{ position:absolute; inset:0; pointer-events:none; font-size:13px; }
.hud-topbar{
  position:absolute; top:44px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.45); padding:6px 16px; border-radius:20px;
  white-space:nowrap;
}
.hud-topbar b{ color:var(--accent); }
.bottom-hud{
  position:absolute; bottom:16px; left:16px; display:flex; flex-direction:column; gap:6px;
}
.bottom-right-hud{
  position:absolute; bottom:16px; right:16px; display:flex; flex-direction:column;
  align-items:flex-end; gap:6px;
}
.bar-row{ display:flex; align-items:center; gap:14px; }
.bar-label{ width:80px; font-size:22px; color:var(--sub); }
.bar-bg{ width:340px; height:20px; background:#000a; border-radius:10px; overflow:hidden; border:2px solid var(--line); }
.bar-fill{ height:100%; transition:width .1s linear; }
.hp-fill{ background:linear-gradient(90deg,#ff5c5c,#ff9a5c); width:100%; }
.ammo-fill{ background:linear-gradient(90deg,#5ee6a8,#5ecbe6); width:100%; }
.hud-value{ font-size:40px; font-weight:700; min-width:2.6em; }
.control-hint{
  background:rgba(0,0,0,.4); color:var(--sub);
  padding:5px 12px; border-radius:8px; font-size:13px; font-weight:600;
  white-space:nowrap; width:fit-content;
}
.zone-status{
  position:absolute; top:90px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.45); color:#e6d6ff;
  padding:10px 28px; border-radius:32px; font-size:24px; font-weight:600;
  white-space:nowrap;
}
.zone-warning{
  position:absolute; top:148px; left:50%; transform:translateX(-50%);
  background:rgba(120,60,220,.35); border:1px solid rgba(200,140,255,.9);
  color:#f0e6ff; padding:10px 28px; border-radius:32px; font-size:24px; font-weight:700;
}
.kill-feed{
  position:absolute; top:14px; right:14px; width:300px;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
}
.kill-feed-item{
  background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.08);
  color:#e6edf3; font-size:13px; font-weight:600;
  padding:7px 14px; border-radius:8px; white-space:nowrap;
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
  animation:killFeedIn .15s ease-out, killFeedOut .4s ease-in forwards;
  animation-delay:0s, 4.6s;
}
.kill-feed-item b{ color:var(--accent); font-weight:800; }
@keyframes killFeedIn{ from{ opacity:0; transform:translateX(24px); } to{ opacity:1; transform:translateX(0); } }
@keyframes killFeedOut{ from{ opacity:1; } to{ opacity:0; } }
.spectator-banner{
  position:absolute; top:206px; left:50%; transform:translateX(-50%);
  background:rgba(255,92,92,.22); border:1px solid rgba(255,92,92,.8);
  color:#ffd9d9; padding:8px 20px; border-radius:20px; font-size:14px; font-weight:700;
  white-space:nowrap;
}
#minimap{
  position:absolute; top:14px; left:14px; right:auto; bottom:auto;
  border:1px solid var(--line); border-radius:8px;
}
.reload-pill{
  background:rgba(255,92,92,.25); border:1px solid var(--accent2); color:var(--accent2);
  padding:12px 24px; border-radius:8px; font-size:24px;
}

#crosshair{
  position:absolute; width:34px; height:34px; pointer-events:none;
  transform:translate(-50%,-50%); z-index:5;
}
#crosshair .ring{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid rgba(94,230,168,.55);
}
#crosshair .dot{
  position:absolute; left:50%; top:50%; width:4px; height:4px;
  border-radius:50%; background:var(--accent);
  transform:translate(-50%,-50%);
  box-shadow:0 0 4px rgba(0,0,0,.6);
}
#crosshair span.tick{
  position:absolute; background:var(--accent);
  box-shadow:0 0 2px rgba(0,0,0,.7);
  transition:background .06s ease-out;
}
#crosshair .h1{ left:2px; top:16px; width:8px; height:2px; }
#crosshair .h2{ right:2px; top:16px; width:8px; height:2px; }
#crosshair .v1{ top:2px; left:16px; height:8px; width:2px; }
#crosshair .v2{ bottom:2px; left:16px; height:8px; width:2px; }
#crosshair.firing .ring{ border-color:rgba(255,92,92,.75); }
#crosshair.firing .dot{ background:var(--accent2); }
#crosshair.firing span.tick{ background:var(--accent2); }

.overlay{
  position:absolute; inset:0; background:rgba(10,13,18,.85);
  display:flex; align-items:center; justify-content:center; z-index:10;
}
.overlay[hidden]{ display:none; }
.start-card{
  text-align:center; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:28px 34px; max-width:420px; width:90%;
}
.brand-line{
  font-size:13px; font-weight:800; letter-spacing:1.5px;
  color:var(--accent); margin-bottom:6px; opacity:.85;
}
.logo{ font-size:24px; font-weight:800; letter-spacing:1px; color:var(--accent); margin-bottom:10px; }
.logo span{ color:var(--accent2); }
.logo small{ font-size:12px; color:var(--sub); font-weight:600; letter-spacing:2px; vertical-align:middle; margin-left:6px; }
.start-card p{ color:var(--sub); font-size:13px; line-height:1.6; margin-bottom:18px; }
.round-reset-text{ font-size:18px !important; color:var(--text) !important; }
.round-reset-text b{ color:var(--accent); font-size:22px; }
#nameInput, #roomNameInput, #roomPasswordInput, #joinPasswordInput{
  display:block; width:100%; margin-bottom:14px; padding:10px 12px;
  border-radius:8px; border:1px solid var(--line); background:var(--panel2);
  color:var(--text); font-size:14px; text-align:center;
}
#startBtn, #confirmCreateRoomBtn, #confirmJoinBtn, #startGameBtn{
  padding:12px 22px; border-radius:8px; border:none; cursor:pointer;
  background:var(--accent); color:#04150c; font-weight:700; font-size:14px;
  width:100%;
}
#startBtn:disabled, #startGameBtn:disabled{ opacity:.6; cursor:default; }
.secondary-btn{
  padding:10px 22px; border-radius:8px; border:1px solid var(--line); cursor:pointer;
  background:transparent; color:var(--sub); font-weight:600; font-size:13px;
  width:100%; margin-top:10px;
}
.connect-status{ margin-top:12px; font-size:12px; color:var(--accent2); min-height:16px; }

/* ---- 로비 / 방 ---------------------------------------------------------- */
.lobby-card{ max-width:480px; text-align:left; }
.lobby-card .logo{ text-align:center; }
.lobby-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; }
.lobby-myname{ color:var(--sub); font-size:13px; }
#createRoomBtn{
  padding:8px 14px; border-radius:8px; border:none; cursor:pointer;
  background:var(--accent); color:#04150c; font-weight:700; font-size:13px; white-space:nowrap;
}
.room-list-empty{ color:var(--sub); font-size:13px; text-align:center; padding:20px 0; }
.room-list{ list-style:none; margin:0; padding:0; max-height:320px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.room-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:10px 14px; cursor:pointer;
}
.room-item:hover{ border-color:var(--accent); }
.room-item.full{ opacity:.5; cursor:not-allowed; }
.room-item-name{ font-weight:700; font-size:14px; }
.room-item-name .lock{ margin-right:4px; }
.room-item-meta{ font-size:12px; color:var(--sub); }
.room-item-status{ font-size:11px; padding:3px 10px; border-radius:12px; white-space:nowrap; }
.room-item-status.waiting{ background:rgba(94,230,168,.18); color:var(--accent); }
.room-item-status.playing{ background:rgba(255,215,94,.18); color:#ffd75e; }

.field-label{ display:block; text-align:left; color:var(--sub); font-size:13px; margin-bottom:6px; }
#maxPlayersInput, #raceLapsInput{ width:100%; margin-bottom:16px; }
.modal-actions{ display:flex; gap:10px; }
.modal-actions button{ margin:0; }

/* ---- 방 만들기: 맵 선택 / 관전 참가 토글 ------------------------------------- */
.map-select-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:16px; }
.map-select-grid.cols-2{ grid-template-columns:1fr 1fr; }
.map-card{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--panel2); border:2px solid var(--line); border-radius:10px; padding:6px 4px 8px;
  cursor:pointer; color:var(--text); font-family:inherit; font-size:12px; font-weight:700;
}
.map-card:hover{ border-color:var(--accent); }
.map-card.selected{ border-color:var(--accent); background:rgba(94,230,168,.12); color:var(--accent); }
.map-thumb-svg{ width:100%; aspect-ratio:80/50; }
.gametype-card-icon{ font-size:28px; line-height:1; }
.host-spectate-toggle{
  display:flex; align-items:center; gap:8px; text-align:left; color:var(--sub);
  font-size:13px; margin-bottom:16px; cursor:pointer; line-height:1.4;
}
.host-spectate-toggle input{ flex-shrink:0; width:16px; height:16px; }

/* ---- 방 나가기 선택 모달 / 게임 변경 버튼 ----------------------------------- */
#changeGameBtn{ margin-bottom:10px; }
.leave-choice-actions{ display:flex; flex-direction:column; gap:10px; }
.leave-choice-actions button{ margin:0; width:100%; }
.danger-btn{
  padding:12px 22px; border-radius:8px; border:none; cursor:pointer;
  background:var(--accent2); color:#fff; font-weight:700; font-size:14px;
}
.accent-outline-btn{ border-color:var(--accent); color:var(--accent); }

.room-meta{ font-size:13px !important; }
.room-last-winner{
  background:rgba(94,230,168,.15); border:1px solid rgba(94,230,168,.5); color:var(--accent);
  padding:8px 12px; border-radius:8px; font-size:13px; font-weight:600; margin-bottom:14px;
}
.room-member-list{ list-style:none; margin:0 0 18px; padding:0; text-align:left; max-height:220px; overflow-y:auto; }
.room-member-list li{
  display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px;
  background:var(--panel2); margin-bottom:6px; font-size:13px;
}
.room-member-list .host-tag{
  font-size:10px; background:var(--accent); color:#04150c; padding:2px 7px; border-radius:8px; font-weight:800;
}
.waiting-host-text{ color:var(--sub); font-size:13px; margin:4px 0 0; }

/* ---- 게임 선택 화면 (방 만들기 -> 게임 카드 선택) ------------------------------ */
.game-select-card{ max-width:760px; }
.game-select-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px; }
@media (max-width:820px){ .game-select-grid{ grid-template-columns:1fr 1fr; } }
.game-card{
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  background:var(--panel2); border:2px solid var(--line); border-radius:12px; padding:0;
  cursor:pointer; overflow:hidden; text-align:left; color:var(--text); font-family:inherit;
}
.game-card:hover{ border-color:var(--accent); }
.game-thumb-svg{ width:100%; display:block; aspect-ratio:200/120; background:#000; }
.game-card-title{ font-weight:800; font-size:14px; padding:10px 12px 2px; }
.game-card-desc{ font-size:11px; color:var(--sub); padding:0 12px 12px; line-height:1.4; }

.room-gametype-tag{
  display:inline-block; font-size:11px; font-weight:700; color:var(--accent);
  background:rgba(94,230,168,.12); border:1px solid rgba(94,230,168,.4);
  border-radius:10px; padding:3px 10px; margin-bottom:12px;
}

/* ---- 레이싱(거북이달리기) HUD ---------------------------------------------- */
.race-countdown-banner{
  position:absolute; top:90px; left:50%; transform:translateX(-50%);
  background:rgba(255,215,94,.22); border:1px solid rgba(255,215,94,.85);
  color:#fff3cf; padding:10px 24px; border-radius:24px; font-size:18px; font-weight:700;
  white-space:nowrap;
}
.race-leaderboard{
  position:absolute; top:210px; left:14px; margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:5px; width:220px;
}
.race-leaderboard li{
  background:rgba(0,0,0,.5); border-radius:8px; padding:6px 12px; font-size:13px;
  display:flex; justify-content:space-between; gap:8px; white-space:nowrap;
}
.race-leaderboard li.me{ background:rgba(94,230,168,.22); border:1px solid rgba(94,230,168,.6); }
.race-leaderboard li .rl-rank{ color:var(--accent); font-weight:800; width:1.6em; }
.race-leaderboard li .rl-name{ flex:1; overflow:hidden; text-overflow:ellipsis; }
.race-leaderboard li .rl-status{ color:var(--sub); font-size:11px; }
#raceMinimap{ position:absolute; top:14px; left:14px; border:1px solid var(--line); border-radius:8px; }

.bgm-toggle-btn{
  position:absolute; top:44px; right:16px; pointer-events:auto;
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.45); color:#fff; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.bgm-toggle-btn:hover{ background:rgba(0,0,0,.65); }

/* ---- 거북이 피하기 HUD ------------------------------------------------------ */
.dodge-my-lives{
  position:absolute; top:82px; left:14px;
  background:rgba(0,0,0,.55); border:2px solid rgba(94,230,168,.7);
  border-radius:12px; padding:8px 14px; display:flex; align-items:center; gap:10px;
  white-space:nowrap;
}
.dodge-my-lives .dml-label{ color:var(--accent); font-weight:800; font-size:15px; }
.dodge-my-lives .dml-hearts{ font-size:22px; letter-spacing:2px; }
.dodge-my-lives.is-out{ border-color:rgba(255,92,92,.8); }
.dodge-my-lives.is-out .dml-label{ color:var(--accent2); }
.dodge-my-lives.just-healed{ animation:dodgeHealPulse .8s ease-out; }
@keyframes dodgeHealPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,92,92,.75); }
  60%{ box-shadow:0 0 0 14px rgba(255,92,92,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,92,92,0); }
}

.dodge-heal-toast{
  position:absolute; top:82px; left:250px;
  background:rgba(255,92,92,.24); border:2px solid rgba(255,92,92,.9);
  color:#ffe1e1; padding:8px 16px; border-radius:12px;
  font-size:16px; font-weight:800; white-space:nowrap;
  animation:dodgeHealToastIn .3s ease-out;
}
.dodge-heal-toast[hidden]{ display:none; }
@keyframes dodgeHealToastIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

.dodge-speedup-banner{
  position:absolute; top:42%; left:50%; transform:translate(-50%,-50%);
  font-size:52px; font-weight:900; color:#ffe066;
  text-shadow:0 0 18px rgba(255,224,102,.9), 0 3px 0 #7a4a00, 0 0 3px #000;
  letter-spacing:1px; white-space:nowrap; pointer-events:none; z-index:5;
}
.dodge-speedup-banner[hidden]{ display:none; }
.dodge-speedup-banner.pop{ animation:dodgeSpeedUpPop 1.4s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes dodgeSpeedUpPop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(0.4); }
  15%{ opacity:1; transform:translate(-50%,-50%) scale(1.15); }
  25%{ transform:translate(-50%,-50%) scale(1); }
  75%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.05); }
}

.dodge-lives-list{
  position:absolute; top:140px; left:14px; margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:4px; width:236px;
  max-height:calc(100% - 220px); overflow:hidden;
}
.dodge-lives-list li{
  background:rgba(0,0,0,.5); border-radius:8px; padding:5px 10px; font-size:13px;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.dodge-lives-list li.me{ background:rgba(94,230,168,.22); border:1px solid rgba(94,230,168,.6); }
.dodge-lives-list li.is-out{ opacity:.45; }
.dodge-lives-list li .dl-name{ flex:1; overflow:hidden; text-overflow:ellipsis; }
.dodge-lives-list li .dl-hearts{ font-size:13px; letter-spacing:1px; }
.dodge-lives-list li .dl-state{ color:var(--sub); font-size:11px; }

.dodge-status-banner{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:rgba(0,0,0,.62); border:2px solid rgba(255,92,92,.85);
  color:#fff; padding:18px 38px; border-radius:18px;
  font-size:30px; font-weight:800; text-align:center; line-height:1.45;
  text-shadow:0 2px 8px rgba(0,0,0,.7); white-space:nowrap;
}
.dodge-status-banner[hidden]{ display:none; }
.dodge-invincible-banner{
  position:absolute; top:200px; left:50%; transform:translateX(-50%);
  background:rgba(94,230,168,.22); border:2px solid rgba(94,230,168,.9);
  color:#d8ffef; padding:10px 26px; border-radius:24px; font-size:22px; font-weight:800;
  white-space:nowrap;
}
.dodge-invincible-banner[hidden]{ display:none; }
.dodge-status-banner.safe{ border-color:rgba(94,230,168,.9); }
.rsc-hint.dodge-hint{ font-size:34px; line-height:1.5; white-space:normal; color:#fff; }

.race-start-countdown{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  pointer-events:none; text-align:center;
}
.race-start-countdown[hidden]{ display:none; }
.rsc-number{
  font-size:140px; font-weight:900; color:#fff; line-height:1;
  text-shadow:0 0 24px rgba(94,230,168,.85), 0 4px 12px rgba(0,0,0,.6);
  animation:rscPop .3s ease-out;
}
.rsc-hint{
  font-size:30px; font-weight:800; color:#fff3cf;
  background:rgba(0,0,0,.5); padding:12px 28px; border-radius:16px;
  text-shadow:0 2px 6px rgba(0,0,0,.6); white-space:nowrap;
}
@keyframes rscPop{ from{ transform:scale(1.5); opacity:0; } to{ transform:scale(1); opacity:1; } }

.race-results-list{
  list-style:none; margin:0 0 14px; padding:0; text-align:left; max-height:260px; overflow-y:auto;
}
.race-results-list li{
  display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:8px;
  background:var(--panel2); margin-bottom:6px; font-size:13px;
}
.race-results-list li.retired{ opacity:.55; }
.race-results-list .rr-place{ font-weight:800; color:var(--accent); width:2.2em; flex-shrink:0; }
.race-results-list li.retired .rr-place{ color:var(--sub); }
.race-results-list .rr-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.race-results-list .rr-time{ font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }