/* ============================================================
 * Space Battleships — UI stylesheet
 * ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #05070f;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: #cfe0ff;
  user-select: none;
}

.hidden { display: none !important; }

#gl, #overlay {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  display: block;
}
#overlay { pointer-events: none; z-index: 2; }
#hudUi { z-index: 3; }

/* ---------------- top-left: radar / map / gold ---------------- */
#topLeft {
  position: fixed; top: 14px; left: 14px;
  display: flex; flex-direction: column; gap: 8px;
  width: 190px; z-index: 4;
}
#radar {
  width: 190px; height: 190px;
  border-radius: 50%;
  border: 2px solid rgba(70, 150, 240, 0.45);
  box-shadow: 0 0 24px rgba(30, 100, 220, 0.25), inset 0 0 30px rgba(10, 30, 70, 0.6);
  background: rgba(5, 10, 24, 0.55);
}
#mapBtn {
  pointer-events: auto;
  background: rgba(12, 22, 44, 0.85);
  color: #9fd0ff;
  border: 1px solid rgba(70, 150, 240, 0.5);
  border-radius: 6px;
  padding: 7px 0;
  font: 600 13px "Segoe UI", sans-serif;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background 0.15s;
}
#mapBtn:hover { background: rgba(30, 60, 110, 0.9); }
#mapBtn .key {
  background: rgba(70, 150, 240, 0.25);
  border-radius: 3px; padding: 1px 5px; font-size: 11px;
}
#goldBox {
  background: rgba(12, 22, 44, 0.85);
  border: 1px solid rgba(255, 200, 80, 0.4);
  border-radius: 6px;
  padding: 6px 10px;
  font: 700 16px "Segoe UI", sans-serif;
  color: #ffd76b;
  text-align: center;
  letter-spacing: 1px;
}
#pips { display: flex; gap: 4px; }
.upgTag {
  flex: 1;
  background: rgba(12, 22, 44, 0.85);
  border: 1px solid rgba(90, 130, 200, 0.35);
  border-radius: 5px;
  text-align: center;
  font: 600 10px "Segoe UI", sans-serif;
  color: #8fb0dd;
  padding: 4px 0;
}
.upgTag b { display: block; font-size: 13px; color: #cfe4ff; }
.upgTag.maxed { border-color: #ffd76b; color: #ffd76b; }
.upgTag.maxed b { color: #ffd76b; }
.upgTag.mk2 { border-color: rgba(255, 160, 90, 0.55); }

/* refit row stands out in the shop */
.shopRow.refit {
  border: 1px solid rgba(255, 200, 80, 0.35);
  background: rgba(60, 45, 15, 0.25);
  margin-top: 4px;
}
.shopRow.refit .shopName { color: #ffd76b; }

/* ---------------- top-center ---------------- */
#topCenter {
  position: fixed; top: 10px; left: 50%;
  transform: translateX(-50%);
  text-align: center; z-index: 4;
  pointer-events: none;
}
#modeLabel { font: 600 11px "Segoe UI", sans-serif; letter-spacing: 2px; color: #6d87b5; }
#clock { font: 700 20px "Consolas", monospace; color: #cfe0ff; text-shadow: 0 0 8px rgba(80, 160, 255, 0.6); }
#announce { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; align-items: center; }
.annItem {
  font: 700 17px "Segoe UI", sans-serif;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  background: rgba(8, 14, 28, 0.55);
  padding: 4px 18px;
  border-radius: 20px;
  transition: opacity 0.9s;
}
.annItem.fade { opacity: 0; }

/* ---------------- killfeed ---------------- */
#killfeed {
  position: fixed; top: 14px; right: 16px;
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-end; z-index: 4; pointer-events: none;
}
.feedItem {
  font: 600 12.5px "Segoe UI", sans-serif;
  background: rgba(8, 14, 28, 0.7);
  border: 1px solid rgba(90, 130, 200, 0.25);
  padding: 4px 10px; border-radius: 5px;
  color: #b9cdee;
  transition: opacity 0.9s;
}
.feedItem.fade { opacity: 0; }
.feedItem .x { color: #ff5346; font-weight: 800; }
.feedItem .g { color: #ffd76b; }
.feedItem .me { color: #7fe0ff; }

/* ---------------- bottom bars ---------------- */
#barsWrap {
  position: fixed; bottom: 18px; left: 50%;
  transform: translateX(-50%);
  width: min(430px, 60vw);
  display: flex; flex-direction: column; gap: 5px;
  z-index: 4; pointer-events: none;
}
.barRow { display: flex; align-items: center; gap: 8px; }
.barLabel { font: 700 10px "Segoe UI", sans-serif; color: #6d87b5; width: 30px; text-align: right; letter-spacing: 1px; }
.bar {
  flex: 1; height: 14px;
  background: rgba(8, 14, 28, 0.8);
  border: 1px solid rgba(90, 130, 200, 0.4);
  border-radius: 7px; overflow: hidden;
}
.bar.shield { height: 9px; border-radius: 5px; }
#hullFill { height: 100%; width: 100%; background: #42e07a; border-radius: 6px; transition: width 0.15s; }
#shieldFill { height: 100%; width: 100%; background: #56c8ff; border-radius: 4px; transition: width 0.15s; }
.barText { font: 600 11px "Consolas", monospace; color: #9fb4d8; width: 74px; }

/* ---------------- Mk II ability bar ---------------- */
#abilities {
  position: fixed; bottom: 112px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 10px;
  z-index: 4; pointer-events: none;
}
.ab {
  position: relative;
  width: 52px; height: 52px;
  background: rgba(10, 18, 36, 0.88);
  border: 1px solid rgba(90, 130, 200, 0.5);
  border-radius: 9px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ab.ready { border-color: #7fe0ff; box-shadow: 0 0 12px rgba(80, 200, 255, 0.45); }
.ab.active { border-color: #ffd76b; box-shadow: 0 0 14px rgba(255, 200, 80, 0.6); }
.abFill {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 0%;
  background: rgba(20, 40, 80, 0.85);
  transition: height 0.1s linear;
}
.abIcon { position: relative; font-size: 22px; line-height: 1; }
.abKey {
  position: absolute; bottom: 2px; right: 4px;
  font: 700 8.5px "Consolas", monospace; color: #9fd0ff;
  background: rgba(70, 150, 240, 0.25);
  border-radius: 3px; padding: 0 3px;
}
.abCd {
  position: absolute; top: 2px; left: 4px;
  font: 700 11px "Consolas", monospace; color: #ffd76b;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* ---------------- FFA leaderboard ---------------- */
#ffaBoard {
  position: fixed; top: 214px; right: 16px;
  width: 200px;
  background: rgba(8, 14, 28, 0.8);
  border: 1px solid rgba(90, 130, 200, 0.3);
  border-radius: 8px;
  padding: 8px 10px;
  z-index: 4; pointer-events: none;
}
.fbTitle {
  font: 700 10.5px "Segoe UI", sans-serif; letter-spacing: 2px;
  color: #9fd0ff; margin-bottom: 6px;
}
.fbTitle .dim { font-weight: 400; letter-spacing: 0; color: #5d7095; float: right; }
.fbRow {
  display: flex; align-items: center; gap: 6px;
  font: 500 12px "Segoe UI", sans-serif; color: #b9cdee;
  padding: 2px 0;
}
.fbRow.self { color: #7fe0ff; font-weight: 700; }
.fbRank { width: 14px; color: #5d7095; font: 700 10px "Consolas", monospace; }
.fbRow.self .fbRank { color: #7fe0ff; }
.fbName { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbKills { font: 700 13px "Consolas", monospace; color: #ffd76b; width: 24px; text-align: right; }
.fbDeaths { font: 700 13px "Consolas", monospace; color: #ff8078; width: 24px; text-align: right; }
.fbRow.fbHead { padding: 0; }
.fbRow.fbHead .fbKills, .fbRow.fbHead .fbDeaths { font: 600 9px "Segoe UI", sans-serif; color: #5d7095; }
.fbRow.enemy .fbName { color: #ff9a90; }

/* ---------------- shop ---------------- */
#shopHint {
  position: fixed; bottom: 70px; left: 50%;
  transform: translateX(-50%);
  font: 600 14px "Segoe UI", sans-serif;
  color: #7fe0ff;
  background: rgba(10, 25, 45, 0.85);
  border: 1px solid rgba(80, 200, 255, 0.5);
  padding: 6px 16px; border-radius: 20px;
  animation: pulse 1.6s infinite;
  z-index: 4; pointer-events: none;
}
@keyframes pulse { 50% { box-shadow: 0 0 18px rgba(80, 200, 255, 0.5); } }

#shop {
  position: fixed; right: 16px; top: 50%;
  transform: translateY(-50%);
  width: 330px;
  background: rgba(8, 14, 30, 0.94);
  border: 1px solid rgba(80, 170, 255, 0.5);
  border-radius: 10px;
  box-shadow: 0 0 40px rgba(20, 80, 200, 0.35);
  z-index: 6; pointer-events: auto;
}
#shopHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(80, 170, 255, 0.3);
  font: 700 14px "Segoe UI", sans-serif; letter-spacing: 2px; color: #9fd0ff;
}
#shopGold { color: #ffd76b; }
#shopClose {
  background: none; border: none; color: #6d87b5;
  font-size: 16px; cursor: pointer;
}
#shopClose:hover { color: #fff; }
#shopRows { padding: 6px; }
.shopRow {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: 7px;
}
.shopRow:hover { background: rgba(40, 80, 160, 0.15); }
.shopKey {
  width: 22px; height: 22px; border-radius: 4px;
  background: rgba(70, 150, 240, 0.2);
  border: 1px solid rgba(70, 150, 240, 0.4);
  text-align: center; line-height: 22px;
  font: 700 12px "Consolas", monospace; color: #9fd0ff;
}
.shopInfo { flex: 1; }
.shopName { font: 700 13px "Segoe UI", sans-serif; color: #dfeaff; }
.shopDesc { font: 400 11px "Segoe UI", sans-serif; color: #7d95bd; margin: 1px 0 3px; }
.shopPips { display: flex; gap: 3px; }
.pip {
  width: 14px; height: 5px; border-radius: 2px;
  background: rgba(90, 130, 200, 0.25);
}
.pip.on { background: #7fe0ff; box-shadow: 0 0 6px rgba(80, 200, 255, 0.7); }
.shopBuy {
  min-width: 64px;
  background: rgba(30, 90, 60, 0.6);
  border: 1px solid rgba(80, 220, 140, 0.6);
  color: #7fe8a8;
  font: 700 12px "Segoe UI", sans-serif;
  padding: 7px 8px; border-radius: 6px; cursor: pointer;
}
.shopBuy:hover:not(:disabled) { background: rgba(40, 130, 85, 0.8); }
.shopBuy:disabled {
  background: rgba(40, 50, 70, 0.5);
  border-color: rgba(90, 110, 150, 0.3);
  color: #5d7095; cursor: default;
}
#shopFoot {
  padding: 8px 14px;
  border-top: 1px solid rgba(80, 170, 255, 0.2);
  font: 400 10.5px "Segoe UI", sans-serif; color: #5d7095;
}

/* ---------------- scoreboard ---------------- */
#scoreboard {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 340px;
  background: rgba(8, 14, 30, 0.95);
  border: 1px solid rgba(80, 170, 255, 0.5);
  border-radius: 10px;
  padding: 14px 20px;
  z-index: 7; pointer-events: none;
}
.sbTitle { font: 700 15px "Segoe UI", sans-serif; letter-spacing: 3px; color: #9fd0ff; text-align: center; margin-bottom: 8px; }
.sbGroup { font: 700 11px "Segoe UI", sans-serif; letter-spacing: 2px; color: #42e07a; margin: 10px 0 4px; }
.sbGroup.enemy { color: #ff5346; }
#scoreboard table { width: 100%; border-collapse: collapse; }
#scoreboard th { font: 600 10px "Segoe UI", sans-serif; color: #5d7095; text-align: right; padding: 2px 6px; }
#scoreboard td { font: 500 13px "Segoe UI", sans-serif; color: #cfe0ff; padding: 3px 6px; text-align: right; }
#scoreboard td:first-child, #scoreboard th:first-child { text-align: left; }
#scoreboard tr.self td { color: #7fe0ff; font-weight: 700; }

/* ---------------- death / end overlays ---------------- */
#deathOverlay {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(60, 5, 10, 0.25), rgba(10, 2, 5, 0.55));
  z-index: 5; pointer-events: none;
}
.deathTitle { font: 800 42px "Segoe UI", sans-serif; letter-spacing: 8px; color: #ff5346; text-shadow: 0 0 30px rgba(255, 60, 60, 0.7); }
.deathSub { font: 600 18px "Segoe UI", sans-serif; color: #ffb0a8; margin-top: 8px; }
#deathTimer { font-family: "Consolas", monospace; }
#deathTip { font: 400 13px "Segoe UI", sans-serif; color: #9fb4d8; margin-top: 22px; max-width: 420px; text-align: center; }

#endOverlay {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(4, 6, 14, 0.7);
  z-index: 9; pointer-events: none;
}
#endTitle { font: 800 64px "Segoe UI", sans-serif; letter-spacing: 12px; }
#endTitle.win { color: #ffd76b; text-shadow: 0 0 40px rgba(255, 200, 80, 0.8); }
#endTitle.lose { color: #ff5346; text-shadow: 0 0 40px rgba(255, 60, 60, 0.8); }
#endMsg { font: 600 20px "Segoe UI", sans-serif; color: #cfe0ff; margin-top: 10px; }
#endSub { font: 400 14px "Segoe UI", sans-serif; color: #7d95bd; margin-top: 20px; }

/* ---------------- map overlay ---------------- */
#mapOverlay {
  position: fixed; inset: 0;
  background: rgba(3, 5, 12, 0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 8; pointer-events: auto;
}
#mapPanel {
  background: rgba(8, 14, 30, 0.95);
  border: 1px solid rgba(80, 170, 255, 0.5);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 0 60px rgba(20, 80, 200, 0.4);
}
#mapTitle { font: 700 13px "Segoe UI", sans-serif; letter-spacing: 3px; color: #9fd0ff; margin-bottom: 8px; }
#mapTitle .dim { font-weight: 400; letter-spacing: 0; color: #5d7095; }
#mapCanvas {
  width: min(70vmin, 640px); height: min(70vmin, 640px);
  border-radius: 4px;
  display: block;
}
#mapLegend { display: flex; gap: 16px; margin-top: 8px; font: 500 11px "Segoe UI", sans-serif; color: #8fa8cf; }
#mapLegend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
#mapLegend .dot.sq { border-radius: 1px; }

/* ---------------- help ---------------- */
#helpBox {
  position: fixed; bottom: 16px; right: 16px;
  background: rgba(8, 14, 30, 0.85);
  border: 1px solid rgba(90, 130, 200, 0.35);
  border-radius: 8px;
  padding: 10px 14px;
  font: 400 12px "Segoe UI", sans-serif;
  color: #9fb4d8; line-height: 1.55;
  z-index: 4; pointer-events: none;
  max-width: 340px;
}
#helpBox b { color: #9fd0ff; letter-spacing: 2px; font-size: 10.5px; display: block; margin-top: 6px; }
#helpBox b:first-child { margin-top: 0; }

/* ---------------- menu ---------------- */
#menu {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  background: radial-gradient(ellipse at 50% 120%, rgba(20, 40, 90, 0.35), rgba(3, 5, 12, 0.25));
}
.menuCard {
  width: min(680px, 92vw);
  background: rgba(6, 10, 24, 0.88);
  border: 1px solid rgba(80, 170, 255, 0.4);
  border-radius: 14px;
  padding: 34px 38px 26px;
  text-align: center;
  box-shadow: 0 0 80px rgba(20, 80, 200, 0.35);
  backdrop-filter: blur(4px);
}
.menuCard h1 {
  font: 800 40px "Segoe UI", sans-serif;
  letter-spacing: 6px;
  color: #ffffff;
  text-shadow: 0 0 30px rgba(80, 180, 255, 0.9);
}
.menuCard h1 span { color: #58c6ff; }
.tagline { font: 400 13px "Segoe UI", sans-serif; color: #7d95bd; margin: 6px 0 22px; }
#nameInput {
  width: 300px;
  background: rgba(12, 22, 44, 0.9);
  border: 1px solid rgba(80, 170, 255, 0.5);
  border-radius: 8px;
  color: #dfeaff;
  font: 600 16px "Segoe UI", sans-serif;
  padding: 10px 16px;
  text-align: center;
  outline: none;
}
#nameInput:focus { border-color: #58c6ff; box-shadow: 0 0 14px rgba(80, 180, 255, 0.4); }
#modeCards { display: flex; gap: 12px; margin: 20px 0; }
.modeCard {
  flex: 1;
  background: rgba(12, 22, 44, 0.7);
  border: 1px solid rgba(90, 130, 200, 0.3);
  border-radius: 10px;
  padding: 16px 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.modeCard:hover { border-color: rgba(120, 190, 255, 0.7); transform: translateY(-2px); }
.modeCard.sel {
  border-color: #58c6ff;
  background: rgba(25, 55, 105, 0.65);
  box-shadow: 0 0 20px rgba(60, 150, 255, 0.35);
}
.modeCard h3 { font: 700 15px "Segoe UI", sans-serif; letter-spacing: 2px; color: #9fd0ff; margin-bottom: 6px; }
.modeCard.sel h3 { color: #ffffff; }
.modeCard p { font: 400 11.5px "Segoe UI", sans-serif; color: #7d95bd; line-height: 1.45; }
#playBtn {
  background: linear-gradient(180deg, #1c6dc0, #14498a);
  border: 1px solid #58c6ff;
  color: #fff;
  font: 800 18px "Segoe UI", sans-serif;
  letter-spacing: 4px;
  padding: 12px 60px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
#playBtn:hover { box-shadow: 0 0 26px rgba(60, 150, 255, 0.7); transform: translateY(-1px); }
#instrBtn {
  display: block; margin: 10px auto 0;
  background: rgba(12, 22, 44, 0.7);
  border: 1px solid rgba(90, 130, 200, 0.5);
  color: #9fd0ff;
  font: 700 12px "Segoe UI", sans-serif;
  letter-spacing: 2px;
  padding: 8px 26px; border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
#instrBtn:hover { border-color: rgba(120, 190, 255, 0.8); color: #fff; }
#menuMsg { min-height: 20px; margin-top: 12px; font: 600 13px "Segoe UI", sans-serif; color: #ffb347; }

/* ---------------- instructions overlay ---------------- */
#instrOverlay {
  position: fixed; inset: 0;
  background: rgba(3, 5, 12, 0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 11; pointer-events: auto;
}
#instrPanel {
  width: min(460px, 92vw);
  max-height: 90vh; overflow-y: auto;
  background: rgba(8, 14, 30, 0.96);
  border: 1px solid rgba(80, 170, 255, 0.5);
  border-radius: 10px;
  box-shadow: 0 0 60px rgba(20, 80, 200, 0.4);
}
#instrHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(80, 170, 255, 0.3);
  font: 700 14px "Segoe UI", sans-serif; letter-spacing: 3px; color: #9fd0ff;
}
#instrClose { background: none; border: none; color: #6d87b5; font-size: 16px; cursor: pointer; }
#instrClose:hover { color: #fff; }
#instrBody {
  padding: 12px 16px 16px;
  font: 400 12.5px "Segoe UI", sans-serif;
  color: #9fb4d8; line-height: 1.6;
  text-align: left;
}
#instrBody b { color: #9fd0ff; letter-spacing: 2px; font-size: 11px; display: block; margin: 10px 0 2px; }
#instrBody b:first-child { margin-top: 0; }
.menuControls { margin-top: 10px; font: 400 11.5px "Segoe UI", sans-serif; color: #5d7095; }

/* ---------------- touch controls ---------------- */
#touchUi { z-index: 5; }
.joy {
  position: fixed; bottom: 24px;
  width: 128px; height: 128px;
  border-radius: 50%;
  background: rgba(12, 22, 44, 0.35);
  border: 2px solid rgba(70, 150, 240, 0.4);
  pointer-events: auto;
  touch-action: none;
  display: flex; align-items: center; justify-content: center;
}
#joyL { left: 22px; }
#joyR { right: 22px; }
.joy.fire { border-color: rgba(255, 110, 90, 0.45); }
.joyKnob {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(90, 160, 255, 0.35);
  border: 1px solid rgba(140, 200, 255, 0.6);
}
.joy.fire .joyKnob { background: rgba(255, 110, 90, 0.3); border-color: rgba(255, 150, 130, 0.6); }
#tBtns {
  position: fixed; right: 30px; bottom: 168px;
  display: flex; gap: 12px; pointer-events: auto;
}
#tBtnsL {
  position: fixed; left: 30px; bottom: 168px;
  display: flex; gap: 12px; pointer-events: auto;
}
.tBtn {
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(12, 22, 44, 0.7);
  border: 1px solid rgba(90, 130, 200, 0.55);
  color: #9fd0ff; font-size: 22px;
  touch-action: none;
}
.tBtn.small { width: 46px; height: 46px; font-size: 18px; }
.tBtn:active { background: rgba(40, 80, 160, 0.8); }

/* ---------------- mobile / small-screen layout ---------------- */
html.touch, html.touch body { touch-action: none; overscroll-behavior: none; }
html.touch #helpBox, html.touch .menuControls, html.touch #shopHint { display: none; }

@media (max-width: 900px), (max-height: 520px) {
  #topLeft { width: 110px; top: 8px; left: 8px; gap: 5px; }
  #radar { width: 110px; height: 110px; }
  #mapBtn { padding: 5px 0; font-size: 11px; letter-spacing: 1px; }
  #goldBox { padding: 4px 8px; font-size: 13px; }
  .upgTag { font-size: 8px; padding: 2px 0; }
  .upgTag b { font-size: 10px; }
  #topCenter { top: 4px; }
  #clock { font-size: 15px; }
  #modeLabel { font-size: 9px; }
  .annItem { font-size: 13px; padding: 3px 12px; }
  #killfeed { top: 8px; right: 174px; }
  .feedItem { font-size: 10.5px; padding: 3px 7px; }
  #ffaBoard { top: 8px; right: 8px; width: 158px; padding: 6px 8px; }
  .fbRow { font-size: 10.5px; }
  .fbKills, .fbDeaths { font-size: 11px; width: 20px; }
  #barsWrap { width: min(300px, 42vw); bottom: 8px; }
  .bar { height: 11px; }
  .bar.shield { height: 7px; }
  .barText { font-size: 9.5px; width: 60px; }
  #abilities { bottom: 60px; }
  .ab { width: 42px; height: 42px; }
  .abIcon { font-size: 17px; }
  #shop { width: min(320px, 94vw); right: 50%; transform: translate(50%, -50%); max-height: 92vh; overflow-y: auto; }
  .shopRow { padding: 6px; gap: 7px; }
  #scoreboard { min-width: 300px; max-width: 94vw; }
  #helpBox { display: none; }
  .menuCard { padding: 20px 16px 16px; }
  .menuCard h1 { font-size: 26px; letter-spacing: 3px; }
  #modeCards { gap: 8px; margin: 12px 0; }
  .modeCard { padding: 10px 8px; }
  .modeCard p { font-size: 10px; }
  #nameInput { width: min(300px, 80vw); font-size: 14px; padding: 8px 12px; }
  #playBtn { padding: 10px 40px; font-size: 15px; }
  .joy { width: 108px; height: 108px; bottom: 16px; }
  .joyKnob { width: 44px; height: 44px; }
  #tBtns { bottom: 140px; right: 20px; }
  #tBtnsL { bottom: 140px; left: 130px; }
  .tBtn { width: 48px; height: 48px; font-size: 19px; }
}

/* ---------------- disconnect ---------------- */
#dcOverlay {
  position: fixed; inset: 0;
  background: rgba(3, 5, 12, 0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 20;
}
.dcCard {
  text-align: center;
  font: 700 22px "Segoe UI", sans-serif;
  color: #ff5346; letter-spacing: 3px;
}
.dcCard button {
  display: block; margin: 18px auto 0;
  background: rgba(30, 90, 60, 0.6);
  border: 1px solid rgba(80, 220, 140, 0.6);
  color: #7fe8a8;
  font: 700 14px "Segoe UI", sans-serif;
  letter-spacing: 2px;
  padding: 10px 30px; border-radius: 8px; cursor: pointer;
}