:root{
  --bg:#0b1220;
  --panel:rgba(255,255,255,.05);
  --text:#e7ebff;
  --muted:rgba(231,235,255,.72);
  --line:rgba(255,255,255,.12);
  --blue:#8fb3ff;
  --good:#5bf0b2;
  --bad:#ff6b6b;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  display:flex;
  flex-direction:column;
  height:100dvh;
  overflow:hidden;
  overscroll-behavior:none;
  background:radial-gradient(1000px 700px at 18% -10%, rgba(39,177,236,.18), transparent 60%),
             radial-gradient(900px 600px at 80% 10%, rgba(233,156,32,.14), transparent 60%),
             var(--bg);
  color:var(--text);
}
.legalBar{
  position:sticky;top:0;z-index:10;
  display:flex;gap:10px;align-items:center;justify-content:center;
  padding:10px 12px;
  background:rgba(0,0,0,.35);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
  font-size:13px;
}
.mobileOs.fullscreenLike .legalBar{display:none}
.legalBar a{color:rgba(231,235,255,.9);text-decoration:none}
.sep{opacity:.55}
.app-root{
  max-width:1200px;
  margin:0 auto;
  padding:12px;
  width:100%;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.viewHome .app-root{overflow:auto}

.pcHelp{
  position:fixed;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  z-index:60;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
  color:rgba(231,235,255,.82);
  font-size:12px;
  line-height:1.2;
  max-width:calc(100vw - 22px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
  display:none;
}
.viewGame .pcHelp{display:block}
.mobileOs .pcHelp{display:none}
@media (hover: none) and (pointer: coarse) { .pcHelp{display:none} }
.panel{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  padding:12px;
  box-shadow:0 18px 42px rgba(0,0,0,.25);
  min-height:0;
}
.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.title{font-weight:900;letter-spacing:.3px;font-size:22px}
.muted{color:var(--muted)}
.muted.small{font-size:13px}
.pill{
  padding:6px 10px;border-radius:999px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.12);
  font-size:13px;
}
.pill.clickable{cursor:pointer}
.rolePill{display:inline-flex;align-items:center;gap:6px;font-weight:900;font-size:12px;padding:5px 9px}
.rolePill.role-president{border-color:rgba(233,156,32,.35);background:rgba(233,156,32,.14)}
.rolePill.role-vice{border-color:rgba(143,179,255,.38);background:rgba(143,179,255,.14)}
.rolePill.role-officer{border-color:rgba(91,240,178,.30);background:rgba(91,240,178,.12)}
.rolePill.role-member{opacity:.9}
.hubConnPill{display:flex;align-items:center;gap:8px}
.statusDot{
  width:10px;height:10px;border-radius:999px;
  background:rgba(255,255,255,.25);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 0 2px rgba(0,0,0,.12);
  flex:0 0 auto;
}
.statusDot.ok{background:rgba(91,240,178,.95);border-color:rgba(91,240,178,.35);box-shadow:0 0 18px rgba(91,240,178,.22)}
.statusDot.bad{background:rgba(255,107,107,.95);border-color:rgba(255,107,107,.35);box-shadow:0 0 18px rgba(255,107,107,.18)}
.statusDot.checking{background:rgba(233,156,32,.95);border-color:rgba(233,156,32,.35);box-shadow:0 0 18px rgba(233,156,32,.18)}
.statusDot.stop{
  width:12px;height:12px;
  border-radius:0;
  background:rgba(255,107,107,.98);
  border-color:rgba(255,107,107,.45);
  box-shadow:0 0 18px rgba(255,107,107,.18);
  clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%);
  position:relative;
}
.statusDot.stop::after{
  content:"";
  position:absolute;
  left:2px;right:2px;top:50%;
  height:3px;
  transform:translateY(-50%);
  background:rgba(255,255,255,.92);
  border-radius:2px;
}
.teamA{color:var(--blue)}
.teamB{color:var(--bad)}
.teamRosterWrap{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.teamRosterCard{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(0,0,0,.14);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:56px;
}
.teamRosterCard.spec{grid-column:1/-1}
.teamList{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.viewGame .teamRosterWrap{display:none}
.btn{
  border:1px solid rgba(143,179,255,.35);
  background:rgba(143,179,255,.18);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
}
.btn.ghost{background:rgba(0,0,0,.18);border-color:rgba(255,255,255,.14);font-weight:750}
.btn.active{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28)}
.btn.disabled,.btn:disabled{opacity:0.45;cursor:default;filter:saturate(0.9)}
.switch{
  position:relative;
  width:54px;
  height:28px;
  flex:0 0 auto;
}
.switch input{
  opacity:0;
  width:0;
  height:0;
}
.switch .slider{
  position:absolute;
  inset:0;
  cursor:pointer;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  transition:background .18s ease, border-color .18s ease;
}
.switch .slider:before{
  content:"";
  position:absolute;
  height:22px;
  width:22px;
  left:3px;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.92);
  border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition:transform .18s ease, background .18s ease;
}
.switch input:checked + .slider{
  background:rgba(91,240,178,.22);
  border-color:rgba(91,240,178,.32);
}
.switch input:checked + .slider:before{
  transform:translate(26px, -50%);
  background:rgba(91,240,178,.95);
}
input,select,textarea{
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  border-radius:10px;
  padding:10px 12px;
}
.canvasWrap{
  flex:1;
  min-height:320px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  overflow:hidden;
  background:rgba(0,0,0,.18);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:filter 80ms ease-out;
  will-change:transform, filter;
}
.canvasWrap.hitBlur{filter:blur(0.8px)}
.hitFlash{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    rgba(var(--hitFlashRgb, 255,107,107), 0) 0%,
    rgba(var(--hitFlashRgb, 255,107,107), 0) 54%,
    rgba(var(--hitFlashRgb, 255,107,107), 0.88) 100%);
  opacity:0;
  mix-blend-mode:screen;
  z-index:30;
}
.hitFlash.on{animation:hitFlash 140ms ease-out 1}
@keyframes hitFlash{
  0%{opacity:0}
  18%{opacity:.9}
  100%{opacity:0}
}
.canvasWrap.hitShake{animation:hitShake 120ms ease-out 1}
@keyframes hitShake{
  0%{transform:translate3d(0,0,0)}
  12%{transform:translate3d(calc(var(--hitShakeX, 10px) * 1), calc(var(--hitShakeY, -8px) * 1), 0)}
  28%{transform:translate3d(calc(var(--hitShakeX, 10px) * -0.8), calc(var(--hitShakeY, -8px) * -0.75), 0)}
  44%{transform:translate3d(calc(var(--hitShakeX, 10px) * 0.65), calc(var(--hitShakeY, -8px) * 0.6), 0)}
  64%{transform:translate3d(calc(var(--hitShakeX, 10px) * -0.4), calc(var(--hitShakeY, -8px) * -0.35), 0)}
  100%{transform:translate3d(0,0,0)}
}
.noFx{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  font-weight:1000;
  letter-spacing:.6px;
  font-size:min(82px, 18vw);
  line-height:1;
  color:rgba(255,107,107,.98);
  text-shadow:0 18px 40px rgba(0,0,0,.55), 0 0 18px rgba(255,107,107,.22);
  opacity:0;
  z-index:32;
}
.noFx.on{animation:noFx 260ms ease-out 1}
@keyframes noFx{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.92) rotate(-2deg)}
  15%{opacity:.98;transform:translate(-50%,-50%) scale(1.04) rotate(1deg)}
  55%{opacity:.85;transform:translate(-50%,-50%) scale(1.0) rotate(-1deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.98) rotate(0deg)}
}
canvas{display:block;touch-action:none;max-width:100%;max-height:100%}
.viewJoin #teamChatPanel{display:flex}
#teamChatPanel{display:none}
.chatWrap{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.chatLog{
  flex:1;
  min-height:0;
  overflow:auto;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(0,0,0,.12);
  padding:8px;
  font-size:13px;
}
.chatMsg{margin:4px 0}
.chatMsg .who{opacity:.9;font-weight:800}
.chatMsg .txt{opacity:.85}
.viewHome .canvasWrap{display:none}
.viewJoin .canvasWrap{display:none}
.viewGame .canvasWrap{display:flex}
.no3d .canvasWrap{
  min-height:180px;
  background:
    radial-gradient(800px 500px at 50% 20%, rgba(233,156,32,.12), transparent 60%),
    radial-gradient(900px 650px at 20% 0%, rgba(39,177,236,.14), transparent 55%),
    rgba(0,0,0,.18);
}
.no3d canvas{display:none}
.no3d:not(.inGame) .hud{display:none}
.no3dBanner{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(420px,92%);
  padding:14px 14px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
  text-align:center;
  display:none;
  gap:10px;
  flex-direction:column;
  align-items:center;
  pointer-events:auto;
}
.no3dBanner.on{display:flex}
.no3dTitle{font-weight:950;letter-spacing:.2px}
.no3dText{font-size:12px;opacity:.85}
.hud{
  position:absolute;left:10px;right:10px;top:10px;
  display:flex;justify-content:space-between;gap:10px;
  pointer-events:none;
}
.hudLeftCol{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}
.radarPanel{
  display:flex;
  align-items:center;
  gap:8px;
}
.radarPanel.off .radar{display:none}
.radarToggle{
  pointer-events:auto;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  color:rgba(231,235,255,.92);
  padding:7px 9px;
  border-radius:12px;
  cursor:pointer;
  font-weight:950;
  letter-spacing:.6px;
  font-size:12px;
  line-height:1;
  user-select:none;
}
.radarToggle.on{
  border-color:rgba(233,156,32,.32);
  background:rgba(233,156,32,.12);
}
.radarToggle:active{transform:translateY(1px)}
.hudCenter{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  text-align:center;
  min-width:72px;
}
.radar{
  width:92px;
  height:92px;
  border-radius:999px;
  display:block;
}
.hud .panel{
  padding:6px 8px;border-radius:12px;background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  box-shadow:none;
}
.hud .muted{font-size:12px}
.hudFeed{
  margin-top:6px;
  display:flex;
  flex-direction:column;
  gap:3px;
  max-width:min(320px, 72vw);
}
.hudFeedLine{
  font-size:12px;
  font-weight:850;
  letter-spacing:.1px;
  color:rgba(231,235,255,.92);
  text-shadow:0 3px 12px rgba(0,0,0,.55);
  display:flex;
  gap:6px;
  align-items:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hudFeedLine.kill{color:rgba(255,107,107,.96)}
.hudFeedLine.spawn{color:rgba(91,240,178,.92)}
.hudFeedLine.voice{color:rgba(143,179,255,.96)}
.hudFeedIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.micIcon{display:block}
.hudFeedIcon .micIcon{width:14px;height:14px}

#topPanel{display:block}
.viewGame #topPanel{display:none}
.viewJoin #topPanel{display:none}
.viewSettings #topPanel{display:none}

#homePanel{display:none}
.viewHome #homePanel{display:block}

#joinPanel{display:none}
.viewJoin #joinPanel{display:block}

#settingsPanel{display:none}
.viewSettings #settingsPanel{display:block}

.homeHero{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  overflow:hidden;
  min-height:160px;
  padding:16px;
  background:
    radial-gradient(1000px 700px at 20% -10%, rgba(39,177,236,.22), transparent 60%),
    radial-gradient(900px 600px at 80% 10%, rgba(233,156,32,.18), transparent 60%),
    url("/assets/ui/start-bg.photo.png") center / cover no-repeat,
    url("/assets/ui/start-bg.svg") center / cover no-repeat,
    rgba(0,0,0,.12);
}
.homeHeroTitle{
  font-weight:1000;
  font-size:clamp(24px, 6vw, 42px);
  letter-spacing:.2px;
  text-shadow:0 18px 42px rgba(0,0,0,.35);
}

/* Smartphone landscape: fit on one screen and use 3 columns */
@media (orientation: landscape) and (max-height: 520px){
  .app-root{
    padding:8px;
    gap:8px;
  }
  .panel{padding:10px;border-radius:14px}
  .btn{padding:8px 10px;border-radius:10px;font-size:13px}
  input,select{padding:8px 10px;font-size:13px}
  .title{font-size:18px}

  /* Home: hero + 3 cards side-by-side */
  .viewHome #topPanel{display:none}
  .viewHome #homePanel{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    grid-template-rows:auto minmax(0, 1fr);
    gap:8px;
    height:100%;
    min-height:0;
  }
  .homeHero{
    grid-column:1 / -1;
    min-height:96px;
    padding:12px;
  }
  .homeHeroTitle{font-size:clamp(18px, 4vw, 28px)}
  .viewHome #homePanel .card{
    min-height:0;
    height:100%;
    overflow:auto;
    padding:10px;
  }

  /* Join: 2 panels in one row (join/chat) to give teams more space */
  .viewJoin .app-root{
    display:grid;
    grid-template-columns:2fr 1fr;
    grid-template-rows:minmax(0, 1fr);
    gap:8px;
    align-items:stretch;
  }
  .viewJoin #joinPanel{display:flex;flex-direction:column;overflow:auto;min-height:0}
  .viewJoin #teamChatPanel{display:flex;flex-direction:column;min-height:0;overflow:hidden}
  .viewJoin #teamChatPanel .chatLog{font-size:12px}
  .teamRosterWrap{gap:8px}
}
.countdownOverlay{
  position:fixed;
  inset:0;
  z-index:50;
  display:none;
  background:
    url("/countdown-bg.png") center / cover no-repeat,
    radial-gradient(1200px 800px at 20% 10%, rgba(39,177,236,.22), transparent 55%),
    radial-gradient(1000px 700px at 80% 0%, rgba(233,156,32,.16), transparent 55%),
    rgba(6,10,18,.95);
  /* Mobile-friendly: avoid heavy backdrop-filter (can cause reloads on some devices). */
  backdrop-filter:none;
}
.countdownOverlay.on{display:flex}
.countdownOverlay .inner{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:18px;
  gap:14px;
}
.countdownOverlay .count{
  font-size:clamp(72px, 18vw, 190px);
  font-weight:1000;
  line-height:1;
  text-align:center;
  margin-top:10dvh;
}
.countdownSetupCard{
  margin:0 auto;
  width:min(720px, 100%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  background:rgba(6,10,18,.55);
  padding:12px;
  display:none;
}
.countdownSetupCard .btn{padding:10px 12px}
.countdownLoadoutSlots{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:stretch;
  justify-content:center;
}
.countdownSlotBtn{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:54px;
  padding:10px 12px;
  max-width:240px;
}
.countdownSlotBtn svg{width:26px;height:26px}
.countdownSlotBtn .slotNum{
  width:22px;
  height:22px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:1000;
  font-size:12px;
}
.countdownSlotBtn .slotName{
  font-weight:900;
  font-size:13px;
  max-width:160px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.countdownSlotBtn.active{
  outline:2px solid rgba(39,177,236,.65);
  outline-offset:1px;
}
.countdownBotGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(118px, 1fr));
  gap:10px;
  max-height:34vh;
  overflow:auto;
  padding:4px;
}
.countdownBotBtn{
  position:relative;
  min-height:86px;
}
.countdownBotBtn .botPickPreview{
  width:56px;
  height:56px;
}
.countdownBotBtn.botPickBtn.used{
  opacity:.86;
  filter:saturate(1);
}
.countdownBotBtn.fav:after{
  content:"★";
  position:absolute;
  top:8px;
  right:10px;
  font-size:13px;
  opacity:.9;
  color:rgba(233,156,32,.95);
  text-shadow:0 6px 18px rgba(0,0,0,.35);
}
.countdownBotBtn.active{
  outline:2px solid rgba(233,156,32,.75);
  outline-offset:1px;
}

/* Touch layout lock toggle during countdown */
.layoutLockToggle{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  display:none;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(6,10,18,.62);
  backdrop-filter:none;
  pointer-events:auto;
  z-index:85;
}
.layoutLockToggle.on{display:flex}
.layoutLockLabel{
  font-size:13px;
  font-weight:700;
  letter-spacing:.2px;
  color:rgba(255,255,255,.92);
  white-space:nowrap;
}
.layoutScaleWrap{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:2px;
}
.layoutScaleLabel{
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.86);
  white-space:nowrap;
}
.layoutScaleSlider{
  width:160px;
  max-width:45vw;
}
.layoutLockToggle .switch{
  position:relative;
  width:54px;
  height:28px;
  flex:0 0 auto;
}
.layoutLockToggle .switch input{
  opacity:0;
  width:0;
  height:0;
}
.layoutLockToggle .switch .slider{
  position:absolute;
  inset:0;
  cursor:pointer;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  transition:background .18s ease, border-color .18s ease;
}
.layoutLockToggle .switch input:disabled + .slider{
  opacity:.55;
  cursor:not-allowed;
  filter:saturate(.7);
}
.layoutLockToggle .switch .slider:before{
  content:"";
  position:absolute;
  height:22px;
  width:22px;
  left:3px;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.92);
  border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition:transform .18s ease, background .18s ease;
}
.layoutLockToggle .switch input:checked + .slider{
  background:rgba(91,240,178,.22);
  border-color:rgba(91,240,178,.32);
}
.layoutLockToggle .switch input:checked + .slider:before{
  transform:translate(26px, -50%);
  background:rgba(91,240,178,.95);
}

.endOverlay{
  position:fixed;
  inset:0;
  z-index:65;
  display:none;
  background:rgba(6,10,18,.55);
  /* Mobile-friendly: backdrop-filter can cause WebGL context loss on some devices. */
  backdrop-filter:none;
}
.endOverlay.on{display:flex}
.endOverlay .inner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.endCard{
  width:min(520px, 92vw);
  text-align:center;
  padding:16px;
  animation:endPop 520ms ease-out both;
}
.endTitle{
  font-weight:1000;
  letter-spacing:.3px;
  font-size:clamp(28px, 8vw, 44px);
  line-height:1.05;
}
.endActions{justify-content:center;margin-top:12px}
.endOverlay.win .endTitle{color:rgba(91,240,178,.95);text-shadow:0 10px 30px rgba(91,240,178,.18)}
.endOverlay.lose .endTitle{color:rgba(255,107,107,.96);text-shadow:0 10px 30px rgba(255,107,107,.16)}
.endOverlay.draw .endTitle{color:rgba(233,156,32,.96);text-shadow:0 10px 30px rgba(233,156,32,.16)}
@keyframes endPop{
  from{transform:translateY(18px) scale(.96);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}
}

.levelUpOverlay{
  position:fixed;
  inset:0;
  z-index:70;
  pointer-events:none;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:18px;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease;
}
.levelUpOverlay.on{
  opacity:1;
  transform:translateY(0);
}
.levelUpOverlay .card{
  pointer-events:none;
  background:rgba(11,18,32,.92);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:10px 14px;
  box-shadow:0 14px 40px rgba(0,0,0,.38);
  backdrop-filter:none;
}
.levelUpOverlay .title{
  font-weight:1000;
  letter-spacing:.3px;
  color:rgba(91,240,178,.95);
  text-shadow:0 10px 30px rgba(91,240,178,.14);
}
.levelUpOverlay .sub{
  margin-top:2px;
  font-size:13px;
  color:rgba(231,235,255,.72);
}

/* Stats overlay: solid background + table layout */
#statsOverlay{
  background:rgb(6,10,18);
}
#statsOverlay .endCard{
  width:min(980px, 96vw);
  text-align:left;
  background:rgba(11,18,32,.96);
}
.statsGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:10px;
}
.statsTeamTitle{
  font-weight:900;
  letter-spacing:.2px;
  margin-bottom:8px;
}
.statsTeamTitle.teamA{color:rgba(143,179,255,.95)}
.statsTeamTitle.teamB{color:rgba(255,179,120,.95)}
.statsTable{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
}
.statsTable col.colNum{width:34px}
.statsTable col.colP{width:52px}
.statsTable th,.statsTable td{
  padding:8px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:13px;
}
.statsTable thead th{
  font-weight:800;
  text-transform:none;
  letter-spacing:.2px;
  color:rgba(231,235,255,.85);
  background:rgba(0,0,0,.28);
}
.statsTable td.name,.statsTable th.name{
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.statsTable td.num,.statsTable th.num{
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  padding-left:4px;
  padding-right:4px;
}
.statsTable tfoot td{
  border-bottom:none;
  font-weight:900;
  background:rgba(0,0,0,.22);
}
.statsLegend{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center;
}

/* Touch controls (like botwarsvs) */
.joysticks{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;justify-content:space-between;gap:10px;
  padding:12px;
  pointer-events:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.viewGame .joysticks{pointer-events:auto}
.layoutingControls .joysticks{
  position:fixed;
  inset:0;
  padding:12px;
  z-index:70;
  pointer-events:auto;
}
.joysticks.customLayout{
  top:0;
  bottom:0;
  padding:0;
}
.joysticks.customLayout .leftControls,
.joysticks.customLayout .rightControls{
  position:absolute;
}
.layoutingControls .leftControls,
.layoutingControls .rightControls,
.layoutingControls .voiceControls{
  pointer-events:auto;
}
.leftControls{
  display:flex;
  gap:10px;
  align-items:flex-end;
  pointer-events:none;
  position:relative;
  z-index:2;
}
.leftControls,
.rightControls,
.voiceControls{
  transform:scale(var(--touchScale, 1));
  transform-origin:top left;
}
.voiceControls{
  position:absolute;
  right:12px;
  bottom:98px;
  display:flex;
  gap:10px;
  align-items:flex-end;
  pointer-events:none;
  z-index:1;
}
.rightControls{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  pointer-events:none;
  position:relative;
  z-index:2;
}
.rightRow{
  display:flex;
  gap:10px;
  align-items:flex-end;
  justify-content:flex-end;
  pointer-events:none;
}
.viewGame .leftControls,
.viewGame .rightControls,
.viewGame .voiceControls,
.viewGame .rightRow{pointer-events:auto}

.layoutingControls .leftControls,
.layoutingControls .rightControls{z-index:3}
.layoutingControls .voiceControls{z-index:4}
.stick{
  width:min(190px, 42vw);
  aspect-ratio:1/1;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:transparent;
  position:relative;
  pointer-events:auto;
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.nub{
  position:absolute;left:50%;top:50%;
  width:46px;height:46px;border-radius:999px;
  transform:translate(-50%,-50%);
  background:rgba(143,179,255,.22);
  border:1px solid rgba(143,179,255,.35);
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.lookPad{
  display:none;
}
.shootBtn{
  width:86px;
  height:86px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  color:rgba(231,235,255,.95);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,107,107,.16);
  box-shadow:0 16px 36px rgba(0,0,0,.25);
  pointer-events:auto;
  user-select:none;
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  position:relative;
  overflow:hidden;
}
.ctrlIcon{width:30px;height:30px;display:block;pointer-events:none}
.ctrlIcon path,.ctrlIcon circle{vector-effect:non-scaling-stroke}
.shootBtn:active{background:rgba(255,107,107,.26)}

.shootBtn.disabled{
  opacity:.55;
  filter:saturate(.7);
}

.shootBtn .ctrlIcon{
  position:relative;
  z-index:1;
}
.mineBtn{
  width:86px;
  height:66px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(231,235,255,.95);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(143,179,255,.14);
  box-shadow:0 16px 36px rgba(0,0,0,.20);
  pointer-events:auto;
  user-select:none;
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  position:relative;
  overflow:hidden;
}
.mineBtn:active{background:rgba(143,179,255,.22)}
.specialBtn{
  width:86px;
  height:66px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(231,235,255,.95);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(233,156,32,.16);
  box-shadow:0 16px 36px rgba(0,0,0,.20);
  pointer-events:auto;
  user-select:none;
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  position:relative;
  overflow:hidden;
}
.specialBtn:active{background:rgba(233,156,32,.26)}

.voiceBtn{
  width:60px;
  height:60px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(231,235,255,.95);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(143,179,255,.14);
  box-shadow:0 16px 36px rgba(0,0,0,.20);
  pointer-events:auto;
  user-select:none;
  touch-action:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  position:relative;
  overflow:hidden;
}
.voiceBtn .micIcon{width:22px;height:22px;pointer-events:none}
.voiceBtn:active{background:rgba(143,179,255,.22)}
.voiceBtn.active{background:rgba(143,179,255,.24);border-color:rgba(143,179,255,.35)}
.voiceBtn.disabled{
  opacity:.55;
  filter:saturate(.7);
}

.mineBtn.disabled,
.specialBtn.disabled{
  opacity:.55;
  filter:saturate(.7);
}

.mineBtn .ctrlIcon,
.specialBtn .ctrlIcon{
  position:relative;
  z-index:1;
}

.abilityCd{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(0,0,0,.35);
  transform-origin:bottom;
  transform:scaleY(var(--cdPct, 0));
  z-index:2;
  pointer-events:none;
}

.abilityCdLabel{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  color:rgba(231,235,255,.95);
  text-shadow:0 2px 10px rgba(0,0,0,.7);
  z-index:3;
  pointer-events:none;
  opacity:0;
}

.abilityCharges{
  position:absolute;
  top:6px;
  right:6px;
  min-width:22px;
  height:18px;
  padding:0 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.32);
  color:rgba(231,235,255,.95);
  font-size:11px;
  font-weight:900;
  z-index:4;
  pointer-events:none;
}

/* Overlays (bot picker, bots browser) */
.modalBackdrop{
  position:fixed;
  inset:0;
  z-index:80;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(6,10,18,.72);
  backdrop-filter:none;
}
.modalBackdrop.on{display:flex}
.modal{
  width:min(980px, 92vw);
  max-height:min(88dvh, 900px);
  overflow:auto;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(0,0,0,.35);
  padding:12px;
  box-shadow:0 18px 42px rgba(0,0,0,.25);
}

/* Clan info modal must appear above the Clan page */
#clanInfoBackdrop{z-index:120}
/* Clan ranks modal must appear above the Clan page */
#clanRanksBackdrop{z-index:120}
/* Team/Squad modal (home/clan presence) */
#teamBackdrop{z-index:110}
.botPickModal h3,.botsModal h3{margin:0}
.botPickGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
@media (min-width:720px){
  .botPickGrid{grid-template-columns:repeat(5, minmax(0, 1fr))}
}
.botPickBtn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:12px 10px;
  min-height:92px;
}
.botPickBtn svg{width:34px;height:34px}
.botPickPreview{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(40px 30px at 30% 25%, rgba(255,255,255,.10), transparent 60%),
    rgba(0,0,0,.18);
  box-shadow:0 12px 26px rgba(0,0,0,.22);
}
.botPickName{font-size:13px;font-weight:900}
.botPickBtn.used{opacity:.38;filter:saturate(.7)}

.botCardBody{display:grid;gap:10px}
.botCardImg{
  width:100%;
  height:220px;
  object-fit:contain;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.12);
}
.botCardTitle{font-weight:1000;font-size:18px}
.botCardStory{white-space:pre-wrap;line-height:1.25}

/* Clan "page" (new screen, not a modal) */
.clanPage{
  position:fixed;
  inset:0;
  z-index:60;
  display:none;
  padding:8px;
  background:
    radial-gradient(1000px 700px at 18% -10%, rgba(39,177,236,.16), transparent 60%),
    radial-gradient(900px 600px at 80% 10%, rgba(233,156,32,.12), transparent 60%),
    rgba(6,10,18,.96);
}
.viewClan #clanPage{display:flex}
.viewClan .app-root{display:none}
.viewClan .legalBar{display:none}
.clanPageInner{
  width:min(1100px, 100%);
  margin:0 auto;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(0,0,0,.25);
  box-shadow:0 18px 42px rgba(0,0,0,.25);
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:0;
  height:100%;
}
.clanNav{
  gap:8px;
  flex-wrap:nowrap !important;
  overflow:auto;
  padding-bottom:6px;
  -webkit-overflow-scrolling:touch;
}
.clanBody{
  flex:1;
  min-height:0;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(0,0,0,.14);
  padding:12px;
}
.card .cardBody{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.card.disabled{
  opacity:.65;
  filter:saturate(.9);
}
details.card{padding:0}
details.card > summary{
  list-style:none;
  cursor:pointer;
  padding:12px;
  font-weight:900;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
details.card > summary::-webkit-details-marker{display:none}
details.card > summary::marker{content:""}
details.card > summary:after{content:"▾";opacity:.75}
details.card[open] > summary:after{content:"▴"}
details.card .cardBody{padding:0 12px 12px}

.clanSymbolPreview{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border:2px solid rgba(255,255,255,.92);
  border-radius:14px;
  font-weight:1000;
  font-size:26px;
  line-height:1;
  box-shadow:0 14px 30px rgba(0,0,0,.25);
  user-select:none;
}
.clanSymbolPreview.shape-circle{border-radius:999px}
.clanSymbolPreview.shape-hex{
  border-radius:10px;
  clip-path:polygon(25% 6%, 75% 6%, 96% 50%, 75% 94%, 25% 94%, 4% 50%);
}
.clanSymbolPreview.shape-shield{
  border-radius:14px;
  clip-path:polygon(12% 6%, 88% 6%, 94% 20%, 94% 58%, 50% 96%, 6% 58%, 6% 20%);
}

/* Modals / overlays */
.modalBackdrop{
  position:fixed;
  inset:0;
  z-index:50;
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(8px);
}
.modalBackdrop.on{display:flex}
.modal{
  width:min(620px, 100%);
  max-height:min(86dvh, 740px);
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(12,18,32,.92);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  padding:14px;
}
.botPickModal{width:min(760px, 100%)}
.botPickGrid{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:10px;
}
@media (max-width:560px){
  .botPickGrid{grid-template-columns:repeat(5, minmax(0, 1fr))}
}
.botPickBtn{
  padding:10px 10px;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:84px;
}
.botPickName{
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  opacity:.92;
  text-transform:none;
}
.botPickBtn.used{
  opacity:.28;
  filter:grayscale(1);
}
.botPickBtn.locked{
  opacity:.22;
  filter:grayscale(1);
}
.botPickBtn.locked .botPickName{opacity:.7}
body.pickingBot .joysticks{display:none !important}

.myBotsModal{width:min(860px, 100%)}
.myBotInfoModal{width:min(860px, 100%)}
.myBotsGrid{
  display:grid;
  gap:10px;
  margin-top:12px;
  grid-template-columns:1fr;
}
@media (min-width:720px){
  .myBotsGrid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
.myBotCard.locked{opacity:.72;filter:saturate(.75)}
.myBotCard{cursor:pointer}
.myBotCard.selected{outline:2px solid rgba(143, 211, 255, .35)}

.botCardBody{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.botCardImg{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
}
.botCardTitle{font-weight:950;font-size:22px;margin-top:6px}
.botCardStory{white-space:pre-line;opacity:.92}
.botCardNav{margin-top:4px}