/* Impendency — arcade UI skin */
:root{
  --bg: #07090c;
  --panel: rgba(10,12,16,0.78);
  --panel2: rgba(16,18,24,0.86);
  --stroke: rgba(255,255,255,0.08);
  --stroke2: rgba(255,255,255,0.14);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.65);
  --hot: #4ee0ff;
  --hot2:#b06cff;
  --good:#46ff9b;
  --bad:#ff4f6e;
  --gold:#ffd56a;
  --shadow: 0 16px 40px rgba(0,0,0,0.55);
  --glow: 0 0 30px rgba(78,224,255,0.18);
  --radius: 16px;
}

*{ box-sizing:border-box; user-select:none; }
html,body{ margin:0; padding:0; height:100%; background:var(--bg); overflow:hidden; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--text); }
#app{ position:relative; width:100%; height:100%; }
#gameCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; background: #05070a; }

#uiRoot{ position:absolute; inset:0; pointer-events:none; }

/* Bottom-center controls (Pause / Exit / Restart) */
.bottomControls{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  z-index: 80;
  pointer-events: auto;
}
.ctrlChip{
  pointer-events: auto;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,0.20);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.28));
  box-shadow: 0 0 22px rgba(255,255,255,0.10), 0 12px 26px rgba(0,0,0,0.35);
  font-weight: 1100;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: clamp(14px, 2.0vw, 18px);
  color: rgba(255,255,255,0.92);
  transition: transform .08s ease, filter .08s ease, background .12s ease, border-color .12s ease;
}
.ctrlChip:hover{ filter: brightness(1.08); }
.ctrlChip:active{ transform: translateY(1px) scale(0.99); filter: brightness(1.12); }
.ctrlChip.danger{
  border-color: rgba(255,79,110,0.55);
  background: linear-gradient(180deg, rgba(255,79,110,0.20), rgba(0,0,0,0.30));
  box-shadow: 0 0 22px rgba(255,79,110,0.14), 0 12px 26px rgba(0,0,0,0.35);
}
@media (max-width: 900px){
  .bottomControls{ bottom: 12px; gap: 10px; }
  .ctrlChip{ padding: 10px 14px; border-radius: 16px; }
}

.topBar, .modal, .tutorial, .endOverlay, .attract{ pointer-events:auto; }

.panel{
  position:absolute;
  left:18px; top:18px; bottom:18px;
  width:340px;
  background:linear-gradient(180deg, rgba(20,22,30,0.92), rgba(8,10,14,0.78));
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  backdrop-filter: blur(10px);
  pointer-events:auto;
}

/* -----------------------------
   Main Menu layout (two panels)
   Left: title + buttons
   Right: high scores
----------------------------- */
#leftPanel.menuPanel{
  width: 360px;
}
#rightPanel.menuScoresPanel{
  position:absolute;
  right:18px; top:18px; bottom:18px;
  left:auto;
  width: 440px;
  background:linear-gradient(180deg, rgba(20,22,30,0.92), rgba(8,10,14,0.78));
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  pointer-events:auto;
}

/* Make the menu background feel clean (no in-menu world draw) */
body.menuMode #gameCanvas{ background:#000; }

.menuScoresPanel .leaderboard{
  width:100%;
  max-width: 380px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.menuScoresPanel .lbTitle{
  font-size: 20px;
  letter-spacing: 0.16em;
  opacity: 0.9;
}
.menuScoresPanel .lbList{
  margin: 22px 0 0;
  padding: 0;
  width: 100%;
  list-style-position: inside;
}
.menuScoresPanel .lbList li{
  margin: 12px 0;
  font-size: 28px;
  text-shadow: 0 0 16px rgba(255,213,106,0.12);
}

/* Responsive: stack panels on small screens */
@media (max-width: 980px){
  #leftPanel.menuPanel{
    left:10px; right:10px; top:10px; height:auto; bottom:auto;
    width:auto;
  }
  #rightPanel.menuScoresPanel{
    left:10px; right:10px;
    top:auto;
    bottom:10px;
    width:auto;
    height: 44vh;
  }
}

/* In-game HUD panels */
.hudPanel{
  position:absolute;
  top:72px;
  bottom:18px;
  left:18px;
  width:340px;
  background:linear-gradient(180deg, rgba(20,22,30,0.88), rgba(8,10,14,0.72));
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:14px 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  backdrop-filter: blur(10px);
  pointer-events:auto;
}
.hudPanel.right{
  left:auto;
  right:18px;
  width:320px;
}
.hudHeader{
  font-weight:1000;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:13px;
  color:rgba(255,255,255,0.85);
}
.hudCard{
  border:1px solid var(--stroke);
  border-radius:14px;
  background:rgba(0,0,0,0.22);
  padding:10px;
}
.unitBtn{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:8px 0;
  padding:10px 12px;
}
.unitBtn .unitLeft{ display:flex; align-items:center; gap:10px; }
.unitBtn .unitRight{ display:flex; align-items:center; gap:10px; }
.unitBtn.active{
  outline:2px solid rgba(78,224,255,0.55);
  box-shadow: 0 0 22px rgba(78,224,255,0.18);
}
.hudTiny{
  margin-top:10px;
  font-weight:900;
  font-size:12px;
  color: rgba(255,255,255,0.85);
}
.hudHint{
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  background:rgba(0,0,0,0.25);
  padding:10px 12px;
  font-weight:800;
  font-size:12px;
  color: rgba(255,255,255,0.75);
  box-shadow: 0 0 18px rgba(78,224,255,0.10);
}

/* Scoreboard */
.scoreboard{ display:flex; flex-direction:column; gap:8px; }
.sbRow{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:8px 8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.03);
}
.sbLeft{ display:flex; align-items:center; gap:10px; min-width:0; }
.sbSwatch{
  width:12px; height:12px;
  border-radius:50%;
  box-shadow: 0 0 14px rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.25);
}
.sbName{
  font-weight:1000;
  font-size:12px;
  letter-spacing:0.04em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sbStats{
  display:flex; gap:8px; align-items:center;
  font-weight:900;
  font-size:11px;
  color: rgba(255,255,255,0.78);
}
.sbTag{
  padding:4px 7px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}
.sbDead{ opacity:0.35; filter:saturate(0.65); }

.logoBlock{ padding:8px 10px 4px 10px; border:1px solid var(--stroke); border-radius:14px; background:rgba(0,0,0,0.24); box-shadow: var(--glow);  text-align:center; }
.logoTitle{
  font-weight:900; letter-spacing:0.08em; font-size:26px;
  background: linear-gradient(90deg, var(--hot), var(--hot2), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 18px rgba(78,224,255,0.15);
}
.logoSub{ margin-top:2px; color:var(--muted); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; }

.menuButtons{ display:flex; flex-direction:column; gap:10px; }

.btn{
  appearance:none; border:none; cursor:pointer;
  border-radius:14px;
  padding:12px 14px;
  font-weight:800;
  letter-spacing:0.03em;
  color:var(--text);
  background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border:1px solid var(--stroke2);
  box-shadow: 0 10px 20px rgba(0,0,0,0.35);
  transform: translateY(0);
  transition: transform .08s ease, box-shadow .08s ease, filter .08s ease, background .18s ease;
}
.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 14px 26px rgba(0,0,0,0.42), 0 0 26px rgba(78,224,255,0.10);
}
.btn:active{
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 6px 12px rgba(0,0,0,0.42);
}
.btn.primary{
  background:linear-gradient(180deg, rgba(78,224,255,0.35), rgba(78,224,255,0.10));
  border-color: rgba(78,224,255,0.35);
}
.btn.danger{
  background:linear-gradient(180deg, rgba(255,79,110,0.28), rgba(255,79,110,0.10));
  border-color: rgba(255,79,110,0.35);
}
.btn.small{ padding:8px 10px; border-radius:12px; font-size:12px; }

.leaderboard{
  margin-top:auto;
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:12px 12px;
  background:rgba(0,0,0,0.22);
}
.lbTitle{ font-weight:900; letter-spacing:0.06em; text-transform:uppercase; font-size:12px; color:var(--muted); }
.lbList{ margin:10px 0 6px 22px; padding:0; }
.lbList li{ margin:4px 0; font-weight:800; }
.lbHint{ font-size:11px; color:var(--muted); opacity:0.9; }

.topBar{
  position:absolute;
  left:18px; right:18px; top:18px;
  height:44px;
  background:rgba(0,0,0,0.38);
  border:1px solid var(--stroke);
  border-radius:16px;
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.topBar .chip{
  border:1px solid var(--stroke2);
  background:rgba(255,255,255,0.06);
  border-radius:999px;
  padding:7px 10px;
  font-weight:900;
  font-size:12px;
}
.topBar .spacer{ flex:1; }

.hidden{ display:none !important; }

.modal{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.55);
}
.modalCard{
  width:420px; max-width: calc(100% - 40px);
  background: linear-gradient(180deg, rgba(16,18,24,0.94), rgba(10,12,16,0.88));
  border:1px solid var(--stroke2);
  border-radius: 18px;
  padding:16px 16px 14px;
  box-shadow: var(--shadow);
}
.modalCard.modalBig{
  width: min(920px, calc(100% - 32px));
  max-height: 88vh;
  overflow:auto;
  padding:18px 18px 16px;
}

.sliderGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}

.modalCard.modalBig .sliderRow{
  margin: 8px 0;
  grid-template-columns: 150px 1fr 70px;
}

@media (max-width: 820px){
  .sliderGrid{ grid-template-columns: 1fr; }
  .modalCard.modalBig{ max-height: 92vh; }
  .modalCard.modalBig .sliderRow{ grid-template-columns: 120px 1fr 64px; }
}
.modalTitle{ font-weight:900; letter-spacing:0.05em; margin-bottom:10px; }
.modalButtons{ margin-top:12px; display:flex; justify-content:flex-end; }
.modalHint{ margin-top:10px; font-size:11px; color:var(--muted); }

.sliderRow{ display:grid; grid-template-columns: 70px 1fr 52px; align-items:center; gap:10px; margin:10px 0; }
.row{ display:flex; align-items:center; gap:10px; }
.rowLabel{ color:var(--muted); font-weight:800; letter-spacing:0.02em; }
.val{ text-align:right; font-weight:900; }

input[type="range"]{ width:100%; }

.switch{ position:relative; display:inline-block; width:44px; height:24px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; cursor:pointer; inset:0;
  background: rgba(255,255,255,0.12);
  border:1px solid var(--stroke2);
  transition:.2s;
  border-radius:999px;
}
.slider:before{
  position:absolute; content:"";
  height:18px; width:18px; left:3px; top:2px;
  background:white; border-radius:999px; transition:.2s;
}
.switch input:checked + .slider{
  background: rgba(78,224,255,0.26);
  border-color: rgba(78,224,255,0.35);
}
.switch input:checked + .slider:before{ transform: translateX(20px); }

.tutorial{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:center;
  padding:18px;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.55));
}
.tutorialCard{
  width: min(760px, calc(100% - 20px));
  background: rgba(0,0,0,0.62);
  border:1px solid var(--stroke2);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding:14px 14px 12px;
  backdrop-filter: blur(8px);
}
.tutorialTitle{ font-weight:900; letter-spacing:0.06em; margin-bottom:6px; }
.tutorialText{ font-size:14px; color:var(--text); min-height:52px; line-height:1.45; white-space: pre-line; }
.tutorialButtons{ display:flex; justify-content:flex-end; gap:10px; margin-top:10px; }

.endOverlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.62);
}
.endCard{
  width: 520px; max-width: calc(100% - 40px);
  background: linear-gradient(180deg, rgba(16,18,24,0.96), rgba(8,10,14,0.90));
  border:1px solid var(--stroke2);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 16px 16px 14px;
  text-align:center;
}
.endTitle{ font-weight:1000; letter-spacing:0.08em; text-transform:uppercase; font-size:18px; }
.endScore{ font-size:22px; margin-top:8px; font-weight:1000; }
.endRank{ margin-top:10px; color:var(--muted); font-weight:800; }
.endButtons{ display:flex; justify-content:center; gap:10px; margin-top:14px; }

.attract{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.22);
  display:flex; align-items:center; justify-content:center;
  pointer-events:auto;
}

.attractTop{
  position:absolute;
  left:0;
  right:0;
  top: 5vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding: 0 5vw;
  text-align:center;
  pointer-events:none; /* allow "press any key" anywhere */
}

.attractTitle{
  font-weight: 1100;
  letter-spacing: 0.12em;
  font-size: clamp(56px, 8vw, 110px);
  line-height: 1.05;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--gold), var(--hot), var(--hot2), var(--gold));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(255, 194, 76, 0.18);
  animation: titleShift 2.6s ease-in-out infinite, titlePop 0.9s ease-out;
  filter: drop-shadow(0 0 14px rgba(255, 120, 220, 0.20));
}

@keyframes titleShift{
  0%,100%{ background-position: 0% 50%; transform: translateY(0); }
  50%{ background-position: 100% 50%; transform: translateY(-2px); }
}
@keyframes titlePop{
  0%{ transform: scale(0.96); opacity:0.0; }
  100%{ transform: scale(1.0); opacity:1.0; }
}

.attractCredits{
  margin-top: 18px;
  font-weight: 900;
  font-size: clamp(14px, 1.8vw, 20px);
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.04em;
  pointer-events:none;
}
.attractCredits div{ margin: 8px 0; }

.attractPrompt{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 7vh;
  width: min(80vw, 980px);
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  background: rgba(0,0,0,0.35);
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: clamp(18px, 2.6vw, 34px);
  color: rgba(255,255,255,0.82);
  animation: blinkBig 0.95s steps(2,end) infinite;
  pointer-events:none;
}

@keyframes blinkBig{
  0%{ opacity: 0.15; }
  50%{ opacity: 0.95; }
  100%{ opacity: 0.15; }
}

.fakeCursor{
  position:absolute;
  width:16px; height:16px;
  border-radius: 50%;
  border:2px solid rgba(255,255,255,0.85);
  box-shadow: 0 0 18px rgba(78,224,255,0.28);
  pointer-events:none;
  transform: translate(-8px,-8px);
}

/* ===========================
   v5 HUD + Mobile Optimizations
   =========================== */

.muted{ color: var(--muted) !important; }
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: 0.02em;
}

/* Top bar: score centered + more prominent */
.topBar{
  justify-content: space-between;
  height:auto;
  min-height:52px;
}
.topBar .tbLeft, .topBar .tbRight{
  display:flex;
  align-items:center;
  gap:10px;
}
.topBar .tbCenter{
  flex:1;
  display:flex;
  justify-content:center;
  pointer-events:none; /* keeps center chip from blocking drags */
}
.scoreChip{
  pointer-events:none;
  padding:8px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.20);
  background: linear-gradient(180deg, rgba(255,213,106,0.18), rgba(0,0,0,0.25));
  box-shadow: 0 0 22px rgba(255, 213, 106, 0.14), 0 12px 28px rgba(0,0,0,0.35);
  font-weight: 1100;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: clamp(14px, 2.0vw, 18px);
  color: rgba(255,255,255,0.92);
}
.scoreChip span{
  color: rgba(255,255,255,0.98);
  font-weight: 1200;
  font-size: 1.25em;
  padding-left: 10px;
  text-shadow: 0 0 18px rgba(255, 213, 106, 0.18);
}

/* Deploy panel */
.btnGrid{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.divider{
  height:1px;
  background: rgba(255,255,255,0.10);
  margin:10px 0;
}
.unitBtn.selected{
  outline: 2px solid rgba(78,224,255,0.55);
  box-shadow: 0 0 0 4px rgba(78,224,255,0.10), 0 0 22px rgba(78,224,255,0.12);
}

/* Scoreboard rows */
.scoreRow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  border-radius: 14px;
  margin-bottom: 10px;
}

.scoreRow.elim{
  border-color: rgba(255,79,110,0.55) !important;
  background: linear-gradient(180deg, rgba(255,79,110,0.10), rgba(0,0,0,0.18));
  box-shadow: 0 0 18px rgba(255,79,110,0.10);
}
.scoreRow.elim .status{
  color: var(--bad) !important;
}
.scoreRow.elim .scoreName{
  color: rgba(255,255,255,0.92);
}
.scoreDot{
  width:12px;
  height:12px;
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(255,255,255,0.10);
  flex: 0 0 auto;
}
.scoreMain{
  flex:1;
  min-width:0;
}
.scoreName{
  font-weight: 1000;
  letter-spacing: 0.04em;
  font-size: 13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.scoreMeta{
  margin-top:2px;
  font-size: 12px;
  color: rgba(255,255,255,0.68);
}
.scoreRight{
  text-align:right;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
}
.scoreRight .status{
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* Mobile: make everything touch-friendly + keep playfield visible */
@media (max-width: 900px){
  .panel{
    left:10px; right:10px; top:10px; bottom:10px;
    width:auto;
  }

  .topBar{
    left:10px; right:10px; top:10px;
    padding:8px 8px;
    gap:8px;
  }
  .topBar .chip{
    padding:6px 8px;
    border-radius: 14px;
    font-size: 12px;
  }
  #btnRestartRun{
    display:none; /* keep top bar compact on mobile */
  }
  #btnScores{
    display:inline-flex;
  }

  /* Deploy becomes a bottom dock */
  #hudLeft{
    left:10px; right:10px;
    top:auto;
    bottom:10px;
    width:auto;
    max-height: 42vh;
  }

  /* Scoreboard becomes a slide-in drawer */
  #hudRight{
    left:auto;
    right:10px;
    top:68px;
    bottom:10px;
    width: min(360px, 92vw);
    max-height: none;
    transform: translateX(110%);
    opacity: 0;
    pointer-events:none;
    transition: transform 0.22s ease, opacity 0.22s ease;
  }
  #hudRight.open{
    transform: translateX(0);
    opacity: 1;
    pointer-events:auto;
  }

  .unitBtn{
    padding:14px 12px;
    font-size: 16px;
  }
  .hudTiny{
    font-size: 12px;
  }
}

/* Desktop: scoreboard toggle not needed */
@media (min-width: 901px){
  #btnScores{
    display:none;
  }
}

/* ===========================
   v6 HUD tweaks (time/score/res center row)
=========================== */
.topBar{
  height:auto;
  min-height:64px;
  padding:10px 12px;
}

.topBar .tbMetrics{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:14px;
  pointer-events:none; /* allows drag-pan through the center HUD */
}

.metricChip{
  pointer-events:none;
  padding:10px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.20);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.28));
  box-shadow: 0 0 22px rgba(255,255,255,0.10), 0 12px 26px rgba(0,0,0,0.35);
  font-weight: 1100;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: clamp(14px, 2.0vw, 18px);
  color: rgba(255,255,255,0.92);
}
.metricChip span{
  color: rgba(255,255,255,0.98);
  font-weight: 1200;
  font-size: 1.25em;
  padding-left: 10px;
}

.timeChip{
  background: linear-gradient(180deg, rgba(78,224,255,0.18), rgba(0,0,0,0.26));
  box-shadow: 0 0 24px rgba(78,224,255,0.16), 0 12px 28px rgba(0,0,0,0.35);
}
.timeChip span{ text-shadow: 0 0 16px rgba(78,224,255,0.22); }

.resChip{
  background: linear-gradient(180deg, rgba(255,213,106,0.20), rgba(0,0,0,0.26));
  box-shadow: 0 0 24px rgba(255,213,106,0.14), 0 12px 28px rgba(0,0,0,0.35);
}
.resChip span{ text-shadow: 0 0 16px rgba(255,213,106,0.22); }

/* Make SCORE a touch bigger */
.scoreChip{
  font-size: clamp(15px, 2.2vw, 20px);
}
.scoreChip span{
  font-size: 1.30em;
}

/* Right-side buttons */
.topBar .tbRight{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

/* Mobile: stack metrics then buttons so nothing overlaps */
@media (max-width: 720px){
  .topBar{
    padding:10px 10px 8px;
  }
  .topBar .tbMetrics{
    position:static;
    transform:none;
    justify-content:center;
    margin: 4px 0 8px;
  }
  .topBar .tbRight{
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
  }
}

/* Unit buttons: light up green when affordable */
.unitBtn.afford{
  border-color: rgba(70,255,155,0.55);
  background: linear-gradient(180deg, rgba(70,255,155,0.18), rgba(255,255,255,0.04));
  box-shadow: 0 0 18px rgba(70,255,155,0.12), 0 10px 22px rgba(0,0,0,0.35);
}
.unitBtn.afford:hover{
  border-color: rgba(70,255,155,0.75);
  box-shadow: 0 0 24px rgba(70,255,155,0.16), 0 12px 24px rgba(0,0,0,0.35);
}

/* End screen stats */
.endStatsRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}
.endStat{
  flex:1;
  text-align:center;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:10px 10px;
  border:1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
}
.endStat span{
  padding-left:8px;
  font-size: 1.25em;
  letter-spacing:0.02em;
}

/* Options modal sections */
.modalSectionTitle{
  margin-top:14px;
  margin-bottom:6px;
  font-weight:1000;
  letter-spacing:0.10em;
  text-transform:uppercase;
  font-size:12px;
  color: rgba(255,255,255,0.70);
  text-shadow: 0 0 18px rgba(78,224,255,0.10);
}

/* v7: Bigger centered leaderboard on main menu */
.menuPanel .leaderboard{
  margin-top: 16px;
  flex: 1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding: 16px 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 0 26px rgba(255,213,106,0.06);
}
.menuPanel .lbTitle{
  font-size: 18px;
  letter-spacing: 0.14em;
}
.menuPanel .lbList{
  margin: 18px 0 12px;
  padding: 0;
  width: 100%;
  max-width: 360px;
  list-style-position: inside;
}
.menuPanel .lbList li{
  margin: 10px 0;
  font-size: 22px;
  text-shadow: 0 0 14px rgba(255,213,106,0.10);
}
.menuPanel .lbHint{
  text-align:center;
  font-size:13px;
  max-width: 360px;
}

/* Tutorial control step: centered card */
.tutorial.centered{ align-items:center; }

/* Prominent options slider (e.g., Game Speed) */
.sliderRowBig .rowLabel{font-weight:800; letter-spacing:0.04em;}
.sliderRowBig input[type=range]{height:18px;}
.sliderRowBig .val{font-weight:900;}

/* Bottom controls color coding */

.ctrlChip.ctrlGreen{
  border-color: rgba(80,255,160,0.85) !important;
  color: rgba(220,255,238,0.95);
  background: linear-gradient(180deg, rgba(80,255,160,0.16), rgba(0,0,0,0.25));
  box-shadow: 0 0 18px rgba(80,255,160,0.14);
}
.ctrlChip.ctrlYellow{
  border-color: rgba(255,214,106,0.90) !important;
  color: rgba(255,242,208,0.98);
  background: linear-gradient(180deg, rgba(255,214,106,0.16), rgba(0,0,0,0.25));
  box-shadow: 0 0 18px rgba(255,214,106,0.12);
}
.ctrlChip.ctrlRed{
  border-color: rgba(255,79,110,0.92) !important;
  color: rgba(255,220,228,0.98);
  background: linear-gradient(180deg, rgba(255,79,110,0.14), rgba(0,0,0,0.25));
  box-shadow: 0 0 18px rgba(255,79,110,0.12);
}