* {
  box-sizing: border-box;
  user-select: none;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #02030a;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

#gameCanvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  cursor: crosshair;
  background:
    radial-gradient(circle at 15% 35%, rgba(255, 79, 216, 0.14), transparent 28%),
    radial-gradient(circle at 72% 42%, rgba(0, 229, 255, 0.13), transparent 34%),
    radial-gradient(circle at 50% 90%, rgba(140, 82, 255, 0.12), transparent 30%),
    linear-gradient(135deg, #02030a, #07111f 55%, #150016);
}

.bg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.scanlines {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025),
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent 5px
  );
}

.grid-shimmer {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.05), transparent),
    linear-gradient(0deg, transparent, rgba(255, 79, 216, 0.04), transparent);
  animation: shimmer 7s linear infinite;
}

@keyframes shimmer {
  from { transform: translateX(-20%) translateY(-10%); }
  to { transform: translateX(20%) translateY(10%); }
}

.orb {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  filter: blur(76px);
  opacity: 0.14;
  animation: floatOrb 10s ease-in-out infinite alternate;
}

.orb-a { left: 7%; top: 25%; background: #ff4fd8; }
.orb-b { right: 8%; top: 31%; background: #00e5ff; animation-delay: 1.8s; }
.orb-c { left: 47%; bottom: 7%; background: #8c52ff; animation-delay: 3.1s; }

@keyframes floatOrb {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-40px) scale(1.18); }
}

/* HUD */

.top-hud {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  height: 78px;
  z-index: 25;
  display: grid;
  grid-template-columns: 300px 1fr 370px;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(2, 3, 10, 0.89);
  border: 1px solid rgba(125, 249, 255, 0.25);
  box-shadow: 0 0 30px rgba(0,229,255,0.12), inset 0 0 22px rgba(255,255,255,0.03);
  backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.brand-core {
  width: 40px;
  height: 40px;
  border: 2px solid #7df9ff;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(125,249,255,0.9), inset 0 0 16px rgba(255,79,216,0.4);
  position: relative;
}

.brand-core::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px solid #ff4fd8;
  transform: rotate(45deg);
}

.brand h1 {
  margin: 0;
  color: #7df9ff;
  font-size: 1.18rem;
  text-shadow: 0 0 14px rgba(125,249,255,0.75);
}

.brand p {
  margin: 5px 0 0;
  color: #d9d7ff;
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 900;
}

.stats {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.stat {
  min-width: 76px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(125,249,255,0.2);
}

.stat:first-child {
  min-width: 94px;
}

.stat span {
  display: block;
  color: #aaa6d8;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  font-weight: 900;
  margin-bottom: 2px;
}

.stat strong {
  color: #ffdc5e;
  font-size: 0.98rem;
}

.stat.core strong {
  color: #7dff9b;
}

.top-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

button {
  font-family: inherit;
}

.hud-btn,
.panel-btn,
.play-map-btn,
.start-wave,
.speed-btn,
.power-btn,
.base-upgrade,
.reward-choice,
.map-choice {
  border: none;
  cursor: pointer;
  font-weight: 900;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.hud-btn,
.panel-btn,
.speed-btn,
.power-btn {
  color: #7df9ff;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(125,249,255,0.28);
  padding: 11px 13px;
}

.hud-btn:hover,
.panel-btn:hover,
.speed-btn:hover,
.power-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(0,229,255,0.3);
}

/* Top panels */

.mission {
  position: fixed;
  top: 104px;
  left: 16px;
  z-index: 15;
  max-width: 660px;
  padding: 11px 15px;
  background: rgba(2,3,10,0.80);
  border-left: 3px solid #7df9ff;
  box-shadow: 0 0 20px rgba(0,229,255,0.08);
  backdrop-filter: blur(10px);
}

.mission strong {
  color: #7df9ff;
  margin-right: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.mission span {
  color: #e9e8ff;
  font-weight: 800;
}

.profile-panel {
  position: fixed;
  top: 154px;
  left: 16px;
  z-index: 15;
  display: flex;
  gap: 8px;
  background: rgba(2,3,10,0.68);
  border: 1px solid rgba(125,249,255,0.18);
  padding: 8px;
  backdrop-filter: blur(10px);
}

.profile-panel div {
  min-width: 92px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.045);
}

.profile-panel span {
  display: block;
  color: #aaa6d8;
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 900;
}

.profile-panel strong {
  color: #ffdc5e;
}

.boss-bar {
  position: fixed;
  top: 104px;
  right: 16px;
  width: 380px;
  z-index: 15;
  display: none;
  padding: 12px;
  background: rgba(2,3,10,0.84);
  border: 1px solid rgba(255,79,216,0.38);
  box-shadow: 0 0 28px rgba(255,79,216,0.14);
}

.boss-bar.show {
  display: block;
}

.boss-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #ffbdf1;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 900;
}

.boss-track {
  height: 11px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}

#bossFill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ff4fd8, #ffdc5e);
  box-shadow: 0 0 18px rgba(255,79,216,0.9);
}

/* Center controls */

.center-controls {
  position: fixed;
  left: 50%;
  bottom: 126px;
  transform: translateX(-50%);
  z-index: 24;
  display: flex;
  align-items: center;
  gap: 14px;
}

.start-wave {
  min-width: 230px;
  padding: 18px 30px;
  font-size: 1.1rem;
  color: #02030a;
  background: linear-gradient(90deg, #00e5ff, #ff4fd8);
  box-shadow: 0 0 32px rgba(0,229,255,0.34), 0 0 38px rgba(255,79,216,0.26);
}

.start-wave:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 0 42px rgba(0,229,255,0.55), 0 0 46px rgba(255,79,216,0.42);
}

.start-wave:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.speed-box {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: rgba(2,3,10,0.82);
  border: 1px solid rgba(125,249,255,0.23);
}

.speed-box span {
  color: #aaa6d8;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 900;
  padding: 0 6px;
}

.speed-btn {
  padding: 10px 13px;
}

.speed-btn.active {
  color: #02030a;
  background: #7df9ff;
  box-shadow: 0 0 18px rgba(125,249,255,0.65);
}

/* Power panel */

.power-panel {
  position: fixed;
  right: 16px;
  top: 154px;
  z-index: 15;
  display: grid;
  gap: 8px;
}

.power-btn {
  min-width: 150px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.power-btn span {
  color: #ffdc5e;
}

/* Shop */

.shop {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  min-height: 104px;
  z-index: 23;
  display: grid;
  grid-template-columns: minmax(860px, 1060px) 1fr;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(2,3,10,0.89);
  border: 1px solid rgba(125,249,255,0.26);
  box-shadow: 0 0 30px rgba(0,229,255,0.12), inset 0 0 22px rgba(255,255,255,0.03);
  backdrop-filter: blur(14px);
}

.tower-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.tower-card {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 3px 9px;
  text-align: left;
  color: white;
  padding: 11px;
  cursor: pointer;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(125,249,255,0.18);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.tower-card:hover,
.tower-card.active {
  transform: translateY(-3px);
  background: rgba(0,229,255,0.095);
  border-color: rgba(125,249,255,0.78);
  box-shadow: 0 0 22px rgba(0,229,255,0.22), inset 0 0 18px rgba(255,255,255,0.035);
}

.tower-card.locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.tower-card.locked:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(255,220,94,0.28);
}

.tower-icon {
  grid-row: 1 / 4;
  width: 26px;
  height: 26px;
  display: inline-block;
  box-shadow: 0 0 18px currentColor;
}

.pulse-icon {
  color: #00e5ff;
  border-radius: 50%;
  border: 3px solid #00e5ff;
}

.laser-icon {
  color: #7dff7a;
  background: #7dff7a;
  clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%);
}

.cannon-icon {
  color: #ff4fd8;
  background: #ff4fd8;
  transform: rotate(45deg);
}

.freeze-icon {
  color: #8c52ff;
  background: #8c52ff;
  border-radius: 6px;
}

.storm-icon {
  color: #ffdc5e;
  border-radius: 50%;
  border: 3px dashed #ffdc5e;
}

.blackhole-icon {
  color: #ffffff;
  border-radius: 50%;
  background: radial-gradient(circle, #02030a 30%, #ffffff 31%, #8c52ff 70%);
}

.tower-card strong {
  color: #7df9ff;
  font-size: 0.86rem;
}

.tower-card span {
  color: #bbb7df;
  font-size: 0.72rem;
  font-weight: 700;
}

.tower-card em {
  color: #ffdc5e;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
}

.tower-panel {
  display: grid;
  grid-template-columns: 1fr 188px;
  gap: 12px;
  align-items: center;
}

.tower-info {
  min-height: 76px;
  padding: 12px 14px;
  color: #e8e8ff;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(125,249,255,0.18);
  line-height: 1.45;
  font-size: 0.88rem;
}

.tower-info strong {
  color: #ffdc5e;
}

.tower-actions {
  display: grid;
  gap: 8px;
}

/* Overlay modals */

.map-modal,
.base-modal,
.daily-modal,
.reward-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  place-items: center;
  background: rgba(0,0,0,0.58);
  backdrop-filter: blur(8px);
}

.map-modal.show,
.base-modal.show,
.daily-modal.show,
.reward-modal.show {
  display: grid;
}

.map-card,
.base-card,
.reward-card {
  position: relative;
  width: min(920px, calc(100vw - 40px));
  padding: 32px;
  background: rgba(2,3,10,0.96);
  border: 1px solid rgba(125,249,255,0.36);
  box-shadow: 0 0 40px rgba(0,229,255,0.2), 0 0 70px rgba(255,79,216,0.18);
}

.map-card h2,
.base-card h2,
.reward-card h2 {
  margin: 0 0 8px;
  color: #7df9ff;
  font-size: 2rem;
  text-shadow: 0 0 18px rgba(125,249,255,0.85);
}

.map-card p,
.base-card p,
.reward-card p {
  color: #e7e6ff;
  margin: 0 0 22px;
  line-height: 1.55;
}

.close-btn {
  position: absolute;
  right: 18px;
  top: 14px;
  background: transparent;
  border: none;
  color: #7df9ff;
  font-size: 2rem;
  cursor: pointer;
}

.map-grid,
.reward-grid,
.base-upgrades {
  display: grid;
  gap: 14px;
}

.map-grid {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 22px;
}

.reward-grid {
  grid-template-columns: repeat(4, 1fr);
}

.base-upgrades {
  grid-template-columns: repeat(2, 1fr);
}

.map-choice,
.reward-choice,
.base-upgrade {
  min-height: 118px;
  text-align: left;
  padding: 16px;
  color: white;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(125,249,255,0.22);
}

.map-choice.active,
.reward-choice:hover,
.base-upgrade:hover {
  border-color: #7df9ff;
  box-shadow: 0 0 22px rgba(0,229,255,0.22);
  transform: translateY(-2px);
}

.map-choice.locked {
  opacity: 0.55;
  cursor: not-allowed;
  border-color: rgba(255,220,94,0.26);
}

.map-choice strong,
.reward-choice strong,
.base-upgrade strong {
  display: block;
  color: #ffdc5e;
  margin-bottom: 8px;
  font-size: 1.02rem;
}

.map-choice span,
.reward-choice span,
.base-upgrade span {
  display: block;
  color: #e8e8ff;
  line-height: 1.45;
  font-size: 0.88rem;
}

.base-upgrade em {
  display: block;
  color: #7df9ff;
  margin-top: 10px;
  font-style: normal;
}

.play-map-btn {
  padding: 15px 24px;
  color: #02030a;
  background: linear-gradient(90deg, #00e5ff, #ff4fd8);
  box-shadow: 0 0 24px rgba(0,229,255,0.28);
}

.bank-row,
.daily-box {
  padding: 16px;
  margin-bottom: 18px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(125,249,255,0.22);
}

.bank-row {
  display: flex;
  justify-content: space-between;
}

.bank-row span {
  color: #aaa6d8;
  text-transform: uppercase;
  font-weight: 900;
}

.bank-row strong,
.daily-box strong {
  color: #ffdc5e;
}

.daily-box span {
  display: block;
  color: #e8e8ff;
  margin: 10px 0 16px;
}

/* Alerts / game over */

.wave-alert {
  position: fixed;
  left: 50%;
  top: 48%;
  z-index: 35;
  transform: translate(-50%, -50%) scale(.92);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
}

.wave-alert.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.wave-alert h2 {
  margin: 0;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: .9;
  color: #7df9ff;
  text-transform: uppercase;
  letter-spacing: -3px;
  text-shadow: 0 0 18px rgba(125,249,255,.95), 0 0 48px rgba(255,79,216,.60);
}

.wave-alert p {
  margin: 16px 0 0;
  font-weight: 900;
  color: white;
  text-shadow: 0 0 14px rgba(255,255,255,.45);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(8px);
}

.modal.show {
  display: flex;
}

.modal-card {
  width: min(720px, calc(100vw - 34px));
  text-align: center;
  background: rgba(2,3,10,.96);
  border: 1px solid rgba(125,249,255,.42);
  padding: 34px;
  box-shadow: 0 0 34px rgba(0,229,255,.25), 0 0 60px rgba(255,79,216,.24);
}

.modal-card h2 {
  margin: 0 0 14px;
  font-size: 2.6rem;
  color: #7df9ff;
  text-shadow: 0 0 18px rgba(125,249,255,.90);
}

.run-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
  margin: 18px 0 22px;
}

.run-summary div {
  padding: 13px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(125,249,255,0.18);
}

.run-summary span {
  display: block;
  color: #aaa6d8;
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 900;
}

.run-summary strong {
  color: #ffdc5e;
  font-size: 1.25rem;
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 1360px) {
  .top-hud {
    grid-template-columns: 250px 1fr 330px;
  }

  .stat {
    min-width: 68px;
  }

  .shop {
    grid-template-columns: 1fr;
  }

  .center-controls {
    bottom: 230px;
  }

  .tower-list {
    grid-template-columns: repeat(6, 1fr);
  }

  .map-grid,
  .reward-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ===== V6.1 UI CLEANUP + SPACE RECOVERY ===== */

.top-hud {
  height: 62px;
  grid-template-columns: 250px 1fr 330px;
  padding: 8px 12px;
}

.brand-core {
  width: 32px;
  height: 32px;
}

.brand-core::after {
  inset: 7px;
}

.brand h1 {
  font-size: 1rem;
}

.brand p {
  font-size: 0.62rem;
  margin-top: 3px;
}

.stats {
  gap: 5px;
}

.stat {
  min-width: 64px;
  padding: 6px 8px;
}

.stat:first-child {
  min-width: 82px;
}

.stat.wide {
  min-width: 88px;
}

.stat span {
  font-size: 0.56rem;
}

.stat strong {
  font-size: 0.84rem;
}

.top-buttons {
  gap: 6px;
}

.hud-btn {
  padding: 9px 10px;
  font-size: 0.78rem;
}

.mission {
  top: 78px;
  left: 14px;
  max-width: 410px;
  padding: 8px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mission strong {
  font-size: 0.84rem;
}

.mission span {
  font-size: 0.84rem;
}

.profile-panel {
  display: none !important;
}

.boss-bar {
  top: 78px;
}

.center-controls {
  bottom: 122px;
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
}

.power-strip {
  display: flex;
  gap: 6px;
  padding: 8px;
  background: rgba(2,3,10,0.82);
  border: 1px solid rgba(125,249,255,0.23);
}

.power-btn {
  min-width: 105px;
  padding: 10px 10px;
  font-size: 0.78rem;
  text-align: center;
}

.power-panel {
  display: none !important;
}

.start-wave {
  min-width: 210px;
  padding: 16px 28px;
}

.shop {
  min-height: 96px;
  padding: 10px 12px;
  grid-template-columns: minmax(820px, 1040px) 1fr;
}

.tower-card {
  padding: 9px;
}

.tower-info {
  min-height: 70px;
  padding: 10px 12px;
}

.close-inline {
  margin-left: 10px;
}

.top-back {
  margin: 0 0 14px 0;
}

.map-card,
.base-card,
.reward-card {
  padding-top: 38px;
}

@media (max-width: 1360px) {
  .top-hud {
    grid-template-columns: 220px 1fr 300px;
  }

  .center-controls {
    bottom: 224px;
  }

  .power-strip {
    justify-content: center;
  }
}


/* ===== V6.2 VISUAL COMBAT UPGRADE ===== */
/* Bigger text, cleaner HUD, premium battlefield feel */

.top-hud {
  height: 82px !important;
  grid-template-columns: 330px 1fr 420px !important;
  padding: 12px 16px !important;
}

.brand-core {
  width: 44px !important;
  height: 44px !important;
}

.brand-core::after {
  inset: 10px !important;
}

.brand h1 {
  font-size: 1.38rem !important;
}

.brand p {
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
  max-width: 240px;
}

.stats {
  gap: 8px !important;
}

.stat {
  min-width: 82px !important;
  padding: 9px 11px !important;
  background: rgba(255,255,255,0.075) !important;
  border-color: rgba(125,249,255,0.32) !important;
}

.stat:first-child {
  min-width: 106px !important;
}

.stat.wide {
  min-width: 112px !important;
}

.stat span {
  font-size: 0.68rem !important;
  letter-spacing: 1.2px !important;
}

.stat strong {
  font-size: 1.08rem !important;
}

.hud-btn {
  font-size: 0.92rem !important;
  padding: 12px 14px !important;
}

.mission {
  top: 98px !important;
  left: 18px !important;
  max-width: 650px !important;
  padding: 12px 16px !important;
  border-left-width: 5px !important;
  background: rgba(2,3,10,0.86) !important;
  white-space: normal !important;
}

.mission strong,
.mission span {
  font-size: 1rem !important;
}

.boss-bar {
  top: 98px !important;
  width: 430px !important;
}

.boss-row {
  font-size: 0.95rem !important;
}

.center-controls {
  bottom: 130px !important;
  gap: 14px !important;
}

.power-strip {
  padding: 10px !important;
  gap: 8px !important;
  background: rgba(2,3,10,0.88) !important;
  border-color: rgba(125,249,255,0.34) !important;
  box-shadow: 0 0 26px rgba(0,229,255,0.14);
}

.power-btn {
  min-width: 128px !important;
  padding: 13px 14px !important;
  font-size: 0.92rem !important;
}

.start-wave {
  min-width: 260px !important;
  padding: 20px 36px !important;
  font-size: 1.25rem !important;
}

.speed-box {
  padding: 10px !important;
  gap: 8px !important;
}

.speed-box span {
  font-size: 0.86rem !important;
}

.speed-btn {
  padding: 12px 15px !important;
  font-size: 0.95rem !important;
}

.shop {
  min-height: 112px !important;
  grid-template-columns: minmax(900px, 1120px) 1fr !important;
  padding: 12px 14px !important;
}

.tower-card {
  padding: 12px 10px !important;
}

.tower-card strong {
  font-size: 1rem !important;
}

.tower-card span {
  font-size: 0.82rem !important;
}

.tower-card em {
  font-size: 0.86rem !important;
}

.tower-info {
  min-height: 82px !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  padding: 13px 15px !important;
}

.panel-btn {
  font-size: 1rem !important;
  padding: 14px 16px !important;
}

.close-inline {
  margin-left: 10px;
}

.top-back {
  margin: 0 0 14px 0;
}

.map-card,
.base-card,
.reward-card,
.modal-card {
  font-size: 1rem;
}

.map-choice strong,
.reward-choice strong,
.base-upgrade strong {
  font-size: 1.15rem !important;
}

.map-choice span,
.reward-choice span,
.base-upgrade span {
  font-size: 1rem !important;
}

@media (max-width: 1360px) {
  .top-hud {
    grid-template-columns: 270px 1fr 360px !important;
  }

  .center-controls {
    bottom: 238px !important;
  }

  .shop {
    grid-template-columns: 1fr !important;
  }
}


/* ===== V6.3 REVIVE / GAME OVER FIX ===== */
.modal {
  z-index: 999 !important;
}

.modal-card {
  width: min(780px, calc(100vw - 34px)) !important;
}

.modal-actions {
  flex-wrap: wrap;
}

.continue-btn {
  background: linear-gradient(90deg, #7dff9b, #00e5ff) !important;
}

.continue-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(1);
}

.run-summary div {
  min-height: 76px;
}


/* ===== V6.4 CONTROL MENU ===== */

.hud-btn.danger,
.panel-btn.danger {
  color: #ff9a9a !important;
  border-color: rgba(255,64,64,0.45) !important;
}

.danger-fill {
  background: linear-gradient(90deg, #ff4040, #ff9f43) !important;
}

.pause-modal,
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  background: rgba(0,0,0,0.58);
  backdrop-filter: blur(8px);
}

.pause-modal.show,
.confirm-modal.show {
  display: grid;
}

.pause-card,
.confirm-card {
  width: min(620px, calc(100vw - 36px));
  padding: 32px;
  background: rgba(2,3,10,0.97);
  border: 1px solid rgba(125,249,255,0.42);
  box-shadow: 0 0 40px rgba(0,229,255,0.24), 0 0 70px rgba(255,79,216,0.18);
  text-align: center;
}

.pause-card h2,
.confirm-card h2 {
  margin: 0 0 10px;
  color: #7df9ff;
  font-size: 2.2rem;
  text-shadow: 0 0 18px rgba(125,249,255,0.85);
}

.pause-card p,
.confirm-card p {
  color: #e8e8ff;
  line-height: 1.55;
  margin: 0 0 22px;
  font-size: 1.05rem;
}

.pause-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.pause-actions button {
  font-size: 1.05rem !important;
  padding: 16px !important;
}

@media (max-width: 1360px) {
  .top-hud {
    grid-template-columns: 270px 1fr 450px !important;
  }
}


/* ===== V6.6 LAYOUT + POWER-UP FIX ===== */

.center-controls {
  bottom: 154px !important;
  z-index: 35 !important;
  display: grid !important;
  grid-template-columns: auto auto auto !important;
  align-items: end !important;
  gap: 14px !important;
  pointer-events: auto !important;
}

.power-wrap {
  display: grid;
  gap: 6px;
}

.power-hint {
  text-align: center;
  color: #c9c7e8;
  font-weight: 900;
  font-size: 0.76rem;
  letter-spacing: 0.4px;
  text-shadow: 0 0 10px rgba(125,249,255,0.35);
  opacity: 0.85;
}

.power-strip {
  display: flex !important;
  gap: 8px !important;
  padding: 10px !important;
  background: rgba(2,3,10,0.91) !important;
  border: 1px solid rgba(125,249,255,0.38) !important;
  box-shadow: 0 0 28px rgba(0,229,255,0.20), inset 0 0 18px rgba(255,255,255,0.035) !important;
  backdrop-filter: blur(10px);
}

.power-btn {
  position: relative;
  overflow: hidden;
  min-width: 132px !important;
  padding: 13px 15px !important;
  font-size: 0.95rem !important;
  text-align: center !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  border-color: rgba(125,249,255,0.42) !important;
}

.power-btn::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: linear-gradient(90deg, transparent, rgba(125,249,255,0.20), transparent);
  transform: translateX(-70%) rotate(20deg);
  animation: powerSweep 3.2s linear infinite;
  pointer-events: none;
}

.power-btn.ready {
  color: #02030a !important;
  background: linear-gradient(90deg, #00e5ff, #ff4fd8) !important;
  box-shadow: 0 0 26px rgba(0,229,255,0.35), 0 0 24px rgba(255,79,216,0.25) !important;
  animation: readyPulse 1.4s ease-in-out infinite alternate;
}

.power-btn.ready span {
  color: #02030a !important;
}

.power-btn.empty {
  opacity: 0.62;
  filter: grayscale(0.25);
}

.power-btn.empty::before {
  opacity: 0.25;
}

@keyframes powerSweep {
  from { transform: translateX(-75%) rotate(20deg); }
  to { transform: translateX(75%) rotate(20deg); }
}

@keyframes readyPulse {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-2px) scale(1.03); }
}

.start-wave {
  min-width: 270px !important;
  padding: 21px 38px !important;
  font-size: 1.3rem !important;
  align-self: end !important;
}

.speed-box {
  align-self: end !important;
  background: rgba(2,3,10,0.91) !important;
  border-color: rgba(125,249,255,0.38) !important;
  box-shadow: 0 0 24px rgba(0,229,255,0.14) !important;
}

.shop {
  z-index: 30 !important;
  min-height: 118px !important;
  padding-top: 14px !important;
}

.tower-panel {
  grid-template-columns: minmax(420px, 1fr) 170px !important;
}

.tower-info {
  overflow: hidden;
}

@media (max-width: 1450px) {
  .center-controls {
    bottom: 246px !important;
    grid-template-columns: 1fr !important;
    justify-items: center;
  }

  .power-strip {
    flex-wrap: wrap;
    justify-content: center;
  }

  .start-wave {
    min-width: 240px !important;
  }
}

@media (max-height: 820px) {
  .center-controls {
    bottom: 144px !important;
    transform: translateX(-50%) scale(0.92) !important;
    transform-origin: bottom center;
  }
}


/* ===== V7 PROGRESSION UPDATE ===== */

.wave-preview {
  position: fixed;
  top: 150px;
  left: 18px;
  z-index: 16;
  width: 460px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(2,3,10,0.86);
  border-left: 5px solid #ffdc5e;
  border: 1px solid rgba(255,220,94,0.26);
  box-shadow: 0 0 24px rgba(255,220,94,0.10);
  backdrop-filter: blur(10px);
}

.wave-preview strong {
  display: block;
  color: #ffdc5e;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.wave-preview span {
  display: block;
  color: #e8e8ff;
  font-size: 0.92rem;
  margin-top: 4px;
  font-weight: 800;
}

.wave-preview em {
  color: #7df9ff;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
  align-self: center;
}

.mission-panel {
  position: fixed;
  top: 236px;
  left: 18px;
  z-index: 16;
  width: 460px;
  padding: 12px 14px;
  background: rgba(2,3,10,0.76);
  border: 1px solid rgba(125,249,255,0.20);
  backdrop-filter: blur(10px);
}

.mission-panel strong {
  display: block;
  color: #7df9ff;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.mission-panel span {
  color: #e8e8ff;
  font-weight: 800;
  line-height: 1.45;
}

.evolution-modal,
.shop-modal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: none;
  place-items: center;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(10px);
}

.evolution-modal.show,
.shop-modal.show {
  display: grid;
}

.evolution-card,
.shop-card {
  width: min(880px, calc(100vw - 42px));
  padding: 34px;
  background: rgba(2,3,10,0.97);
  border: 1px solid rgba(125,249,255,0.42);
  box-shadow: 0 0 48px rgba(0,229,255,0.24), 0 0 80px rgba(255,79,216,0.22);
}

.evolution-card h2,
.shop-card h2 {
  margin: 0 0 10px;
  color: #7df9ff;
  font-size: 2.35rem;
  text-shadow: 0 0 20px rgba(125,249,255,0.85);
}

.evolution-card p,
.shop-card p {
  color: #e8e8ff;
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 24px;
}

.evolution-grid,
.shop-grid {
  display: grid;
  gap: 14px;
}

.evolution-grid {
  grid-template-columns: repeat(2, 1fr);
}

.shop-grid {
  grid-template-columns: repeat(3, 1fr);
}

.evolution-choice,
.shop-item {
  min-height: 138px;
  padding: 18px;
  color: white;
  text-align: left;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(125,249,255,0.26);
  cursor: pointer;
  transition: 0.16s ease;
}

.evolution-choice:hover,
.shop-item:hover {
  transform: translateY(-3px);
  border-color: #7df9ff;
  box-shadow: 0 0 26px rgba(0,229,255,0.22);
}

.evolution-choice strong,
.shop-item strong {
  display: block;
  color: #ffdc5e;
  font-size: 1.16rem;
  margin-bottom: 8px;
}

.evolution-choice span,
.shop-item span {
  display: block;
  color: #e8e8ff;
  line-height: 1.45;
  font-size: 1rem;
}

.shop-item em {
  display: block;
  margin-top: 12px;
  color: #7df9ff;
  font-style: normal;
  font-weight: 900;
}

.tower-card.evolved {
  border-color: #ffdc5e !important;
  box-shadow: 0 0 22px rgba(255,220,94,0.22);
}

@media (max-width: 1450px) {
  .wave-preview,
  .mission-panel {
    width: 390px;
  }

  .mission-panel {
    top: 230px;
  }

  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ===== V7.1 MAP MENU FIX ===== */

.map-card {
  width: min(1040px, calc(100vw - 48px)) !important;
}

.map-grid {
  grid-template-columns: repeat(4, minmax(170px, 1fr)) !important;
  align-items: stretch;
}

.map-choice {
  min-height: 150px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.map-choice strong {
  font-size: 1.18rem !important;
}

.map-choice span {
  font-size: 1rem !important;
  line-height: 1.35 !important;
}

.map-actions {
  display: flex !important;
  justify-content: center;
  gap: 18px;
  margin-top: 8px;
}

.map-actions button {
  min-width: 180px;
  font-size: 1rem !important;
  padding: 16px 24px !important;
}

.map-choice.unlocked:not(.active) {
  border-color: rgba(125,249,255,0.38);
}

.map-choice.unlocked:not(.active):hover {
  border-color: #7df9ff;
  box-shadow: 0 0 24px rgba(0,229,255,0.22);
}

@media (max-width: 980px) {
  .map-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .map-actions {
    flex-direction: column;
    align-items: stretch;
  }
}


/* ===== V7.2 UI PANEL FIX ===== */
/* Move information panels away from the left-side route/portal. */

.mission {
  top: 96px !important;
  left: 16px !important;
  width: 360px !important;
  max-width: 360px !important;
  padding: 10px 13px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: rgba(2,3,10,0.78) !important;
}

.mission strong,
.mission span {
  font-size: 0.92rem !important;
}

.wave-preview {
  top: 96px !important;
  left: auto !important;
  right: 18px !important;
  width: 430px !important;
  max-width: 430px !important;
  padding: 11px 13px !important;
  background: rgba(2,3,10,0.82) !important;
}

.wave-preview strong {
  font-size: 0.95rem !important;
}

.wave-preview span {
  font-size: 0.86rem !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wave-preview em {
  font-size: 0.9rem !important;
}

.mission-panel {
  top: 170px !important;
  left: auto !important;
  right: 18px !important;
  width: 430px !important;
  max-width: 430px !important;
  padding: 11px 13px !important;
  background: rgba(2,3,10,0.76) !important;
}

.mission-panel strong {
  font-size: 0.95rem !important;
}

.mission-panel span {
  display: block;
  font-size: 0.86rem !important;
  line-height: 1.35 !important;
}

@media (max-width: 1350px) {
  .mission {
    width: 310px !important;
    max-width: 310px !important;
  }

  .wave-preview,
  .mission-panel {
    right: 12px !important;
    width: 360px !important;
    max-width: 360px !important;
  }
}

@media (max-width: 980px) {
  .mission,
  .wave-preview,
  .mission-panel {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
  }

  .mission { top: 86px !important; }
  .wave-preview { top: 132px !important; }
  .mission-panel { top: 210px !important; }
}


/* ===== V7.3 CLEAN INTEL HUD ===== */
/* Fix: previous mission/wave/objective panels were still covering the map. 
   Now they are one compact collapsible strip under the top HUD. */

.intel-panel {
  position: fixed !important;
  top: 88px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 22 !important;
  width: min(980px, calc(100vw - 36px)) !important;
  display: grid !important;
  grid-template-columns: 1fr 1.35fr 1.35fr !important;
  gap: 8px !important;
  pointer-events: none;
}

.intel-panel .mission,
.intel-panel .wave-preview,
.intel-panel .mission-panel {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 9px 11px !important;
  background: rgba(2,3,10,0.72) !important;
  border: 1px solid rgba(125,249,255,0.22) !important;
  box-shadow: 0 0 18px rgba(0,229,255,0.08) !important;
  backdrop-filter: blur(8px) !important;
  overflow: hidden !important;
  pointer-events: auto;
}

.intel-panel .mission {
  border-left: 4px solid #7df9ff !important;
  white-space: nowrap !important;
}

.intel-panel .wave-preview {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  border-left: 4px solid #ffdc5e !important;
}

.intel-panel .mission-panel {
  border-left: 4px solid #ff4fd8 !important;
}

.intel-panel .mission strong,
.intel-panel .mission span,
.intel-panel .wave-preview strong,
.intel-panel .wave-preview span,
.intel-panel .wave-preview em,
.intel-panel .mission-panel strong,
.intel-panel .mission-panel span {
  font-size: 0.78rem !important;
  line-height: 1.22 !important;
}

.intel-panel .mission strong,
.intel-panel .wave-preview strong,
.intel-panel .mission-panel strong {
  display: inline !important;
  margin: 0 6px 0 0 !important;
  letter-spacing: 0.8px !important;
}

.intel-panel .mission span,
.intel-panel .wave-preview span,
.intel-panel .mission-panel span {
  display: inline !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.intel-panel .wave-preview div {
  overflow: hidden;
}

.intel-panel .wave-preview em {
  white-space: nowrap !important;
  margin-left: 8px;
}

.intel-panel.collapsed {
  width: min(560px, calc(100vw - 36px)) !important;
  grid-template-columns: 1fr !important;
}

.intel-panel.collapsed .mission,
.intel-panel.collapsed .mission-panel {
  display: none !important;
}

.intel-panel.collapsed .wave-preview {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  padding: 8px 10px !important;
  background: rgba(2,3,10,0.60) !important;
}

.intel-panel.hidden {
  display: none !important;
}

#intelBtn.active {
  color: #02030a !important;
  background: #7df9ff !important;
  box-shadow: 0 0 18px rgba(125,249,255,0.55);
}

@media (max-width: 1450px) {
  .intel-panel {
    top: 94px !important;
    width: min(760px, calc(100vw - 28px)) !important;
    grid-template-columns: 1fr !important;
  }

  .intel-panel .mission,
  .intel-panel .wave-preview,
  .intel-panel .mission-panel {
    padding: 7px 9px !important;
  }

  .intel-panel:not(.collapsed) .mission,
  .intel-panel:not(.collapsed) .mission-panel {
    display: block !important;
  }
}

@media (max-height: 760px) {
  .intel-panel {
    top: 78px !important;
  }

  .intel-panel.collapsed .wave-preview {
    opacity: 0.76;
  }
}


/* ===== V7.4 HOTKEYS ===== */

.panel-btn small,
.tower-card small {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  color: #02030a;
  background: #7df9ff;
  border-radius: 4px;
  font-size: 0.72em;
  box-shadow: 0 0 12px rgba(125,249,255,0.38);
}

.hotkeys-modal {
  position: fixed;
  inset: 0;
  z-index: 1002;
  display: none;
  place-items: center;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(10px);
}

.hotkeys-modal.show {
  display: grid;
}

.hotkeys-card {
  position: relative;
  width: min(860px, calc(100vw - 42px));
  padding: 34px;
  background: rgba(2,3,10,0.97);
  border: 1px solid rgba(125,249,255,0.42);
  box-shadow: 0 0 48px rgba(0,229,255,0.24), 0 0 80px rgba(255,79,216,0.22);
}

.hotkeys-card h2 {
  margin: 0 0 8px;
  color: #7df9ff;
  font-size: 2.35rem;
  text-shadow: 0 0 20px rgba(125,249,255,0.85);
}

.hotkeys-card p {
  color: #e8e8ff;
  margin: 0 0 22px;
  font-size: 1.04rem;
}

.hotkeys-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.hotkeys-grid div {
  display: grid;
  grid-template-columns: 86px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(125,249,255,0.18);
}

kbd {
  display: inline-block;
  text-align: center;
  color: #02030a;
  background: linear-gradient(90deg, #00e5ff, #ff4fd8);
  padding: 7px 10px;
  border-radius: 6px;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(0,229,255,0.25);
}

.hotkeys-grid span {
  color: #e8e8ff;
  font-weight: 800;
}

.hotkey-flash {
  animation: hotkeyFlash 0.22s ease;
}

@keyframes hotkeyFlash {
  from { transform: translateY(-3px) scale(1.03); box-shadow: 0 0 28px rgba(125,249,255,0.7); }
  to { transform: translateY(0) scale(1); }
}

@media (max-width: 780px) {
  .hotkeys-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== V7.5 UNDO TOWER ===== */

.undo-btn {
  color: #ffdc5e !important;
  border-color: rgba(255,220,94,0.45) !important;
}

.undo-btn.ready {
  color: #02030a !important;
  background: linear-gradient(90deg, #ffdc5e, #00e5ff) !important;
  box-shadow: 0 0 22px rgba(255,220,94,0.28), 0 0 18px rgba(0,229,255,0.22) !important;
  animation: undoPulse 1s ease-in-out infinite alternate;
}

.undo-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

@keyframes undoPulse {
  from { transform: translateY(0); }
  to { transform: translateY(-2px); }
}


/* ===== V7.9 STABILITY + HOTKEY FIX ===== */
/* Hotkey badges are drawn with CSS only, so they do not break button text or JS. */

.btn-key,
.card-key,
.panel-btn small,
.tower-card small {
  display: none !important;
}

.hud-btn,
.panel-btn,
.play-map-btn,
.start-wave,
.power-btn,
.speed-btn {
  position: relative !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.hud-btn::before,
.panel-btn::before,
.play-map-btn::before,
.start-wave::before,
.power-btn::before,
.speed-btn::before {
  content: attr(data-key);
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #02030a;
  background: linear-gradient(90deg, #00e5ff, #ff4fd8);
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 0 12px rgba(0,229,255,0.35);
  font-size: 0.68rem;
  font-weight: 1000;
  line-height: 1;
  text-shadow: none;
  pointer-events: none;
}

.hud-btn:not([data-key])::before,
.panel-btn:not([data-key])::before,
.play-map-btn:not([data-key])::before,
.start-wave:not([data-key])::before,
.power-btn:not([data-key])::before,
.speed-btn:not([data-key])::before {
  display: none;
}

.top-hud {
  grid-template-columns: 315px minmax(500px, 1fr) minmax(610px, auto) !important;
  gap: 10px !important;
}

.top-buttons {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

.hud-btn {
  min-width: 66px !important;
  padding: 10px 8px 10px 33px !important;
  font-size: 0.76rem !important;
}

.tower-actions .panel-btn {
  min-width: 140px !important;
  padding: 13px 12px 13px 45px !important;
  font-size: 1rem !important;
}

#undoBtn::before,
#upgradeBtn::before,
#sellBtn::before {
  left: 10px;
  min-width: 24px;
  height: 24px;
  font-size: 0.78rem;
}

.tower-card {
  position: relative !important;
  padding-left: 48px !important;
  padding-top: 12px !important;
}

.tower-card::before {
  content: attr(data-key);
  position: absolute;
  left: 10px;
  top: 10px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #02030a;
  background: linear-gradient(90deg, #00e5ff, #ff4fd8);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 0 14px rgba(0,229,255,0.35);
  font-size: 0.76rem;
  font-weight: 1000;
  z-index: 2;
}

.tower-card:not([data-key])::before {
  display: none;
}

.start-wave {
  padding-left: 92px !important;
}

.start-wave::before {
  min-width: 62px;
  height: 28px;
  font-size: 0.76rem;
}

.power-btn {
  padding-left: 42px !important;
  min-width: 118px !important;
}

.speed-btn {
  padding-left: 36px !important;
}

.tower-panel {
  grid-template-columns: minmax(520px, 1fr) 154px !important;
  gap: 12px !important;
}

@media (max-width: 1600px) {
  .top-hud {
    grid-template-columns: 270px minmax(450px, 1fr) minmax(560px, auto) !important;
  }

  .hud-btn {
    min-width: 60px !important;
    padding-left: 31px !important;
    font-size: 0.70rem !important;
  }
}


/* ===== V8 CAMPAIGN + SHOP UPDATE ===== */

.wallet-row,
.leader-grid,
.victory-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0 24px;
}

.wallet-row div,
.leader-grid div,
.victory-summary div {
  padding: 14px;
  background: rgba(255,255,255,0.065);
  border: 1px solid rgba(125,249,255,0.20);
}

.wallet-row span,
.leader-grid span,
.victory-summary span {
  display: block;
  color: #c9c7e8;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.wallet-row strong,
.leader-grid strong,
.victory-summary strong {
  color: #ffdc5e;
  font-size: 1.35rem;
}

.shop-card h3 {
  color: #7df9ff;
  margin: 26px 0 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.buy-shop-item {
  border-color: rgba(125,249,255,0.35) !important;
}

.buy-shop-item:hover {
  background: rgba(0,229,255,0.08);
}

.locked-shop {
  opacity: 0.62;
  filter: grayscale(0.25);
}

.ad-placeholder {
  border-color: rgba(255,220,94,0.35) !important;
}

.leaderboard-modal,
.victory-modal {
  position: fixed;
  inset: 0;
  z-index: 1002;
  display: none;
  place-items: center;
  background: rgba(0,0,0,0.64);
  backdrop-filter: blur(10px);
}

.leaderboard-modal.show,
.victory-modal.show {
  display: grid;
}

.leaderboard-card,
.victory-card {
  position: relative;
  width: min(820px, calc(100vw - 42px));
  padding: 34px;
  background: rgba(2,3,10,0.97);
  border: 1px solid rgba(125,249,255,0.42);
  box-shadow: 0 0 48px rgba(0,229,255,0.24), 0 0 80px rgba(255,79,216,0.22);
}

.leaderboard-card h2,
.victory-card h2 {
  margin: 0 0 10px;
  color: #7df9ff;
  font-size: 2.4rem;
  text-shadow: 0 0 20px rgba(125,249,255,0.85);
}

.leaderboard-card p,
.victory-card p {
  color: #e8e8ff;
  margin: 0 0 20px;
  line-height: 1.45;
}

.daily-missions {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.daily-mission {
  padding: 12px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(125,249,255,0.18);
  color: #e8e8ff;
  font-weight: 800;
}

.daily-mission.done {
  border-color: rgba(125,255,155,0.45);
  color: #7dff9b;
}

.boss-name-alert {
  color: #ffdc5e !important;
  text-shadow: 0 0 18px rgba(255,220,94,0.7);
}

@media (max-width: 850px) {
  .wallet-row,
  .leader-grid,
  .victory-summary {
    grid-template-columns: 1fr;
  }
}


/* ===== V8.1 RUNTIME + LAYOUT FIX ===== */

.top-hud {
  height: 68px !important;
  grid-template-columns: 300px minmax(560px, 1fr) minmax(600px, auto) !important;
  padding: 8px 10px !important;
  gap: 8px !important;
}

.brand-core {
  width: 36px !important;
  height: 36px !important;
}

.brand h1 {
  font-size: 1.06rem !important;
}

.brand p {
  font-size: 0.62rem !important;
}

.stats {
  gap: 4px !important;
  justify-content: center !important;
}

.stat {
  min-width: 58px !important;
  padding: 6px 7px !important;
}

.stat:first-child,
.stat.wide {
  min-width: 76px !important;
}

.stat span {
  font-size: 0.52rem !important;
}

.stat strong {
  font-size: 0.78rem !important;
}

.top-buttons {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  gap: 4px !important;
}

.hud-btn {
  min-width: 56px !important;
  padding: 8px 6px 8px 28px !important;
  font-size: 0.66rem !important;
}

.hud-btn::before {
  left: 5px !important;
  min-width: 17px !important;
  height: 17px !important;
  font-size: 0.58rem !important;
}

.intel-panel {
  top: 74px !important;
}

.center-controls {
  bottom: 132px !important;
  transform: translateX(-50%) scale(0.94) !important;
  transform-origin: bottom center !important;
}

.shop {
  min-height: 112px !important;
}

.tower-panel {
  grid-template-columns: minmax(480px, 1fr) 145px !important;
}

.tower-actions .panel-btn {
  min-width: 132px !important;
  padding: 11px 10px 11px 40px !important;
  font-size: 0.9rem !important;
}

#gameCanvas {
  background:
    radial-gradient(circle at 20% 40%, rgba(255,79,216,0.16), transparent 28%),
    radial-gradient(circle at 72% 36%, rgba(0,229,255,0.16), transparent 30%),
    linear-gradient(90deg, rgba(5,8,20,0.98), rgba(5,10,24,0.98)) !important;
}

@media (max-width: 1600px) {
  .top-hud {
    grid-template-columns: 250px minmax(500px, 1fr) minmax(540px, auto) !important;
  }

  .hud-btn {
    min-width: 50px !important;
    font-size: 0.61rem !important;
  }
}


/* ===== V8.2 UI CLEANUP — no overlap gameplay layout ===== */

/* Top HUD: brand + stats + two-row compact action grid */
.top-hud {
  height: 86px !important;
  display: grid !important;
  grid-template-columns: 300px minmax(760px, 1fr) 560px !important;
  align-items: start !important;
  gap: 10px !important;
  padding: 8px 10px !important;
}

.brand {
  align-self: center !important;
}

.brand h1 {
  font-size: 1.1rem !important;
  line-height: 1.05 !important;
}

.brand p {
  font-size: 0.62rem !important;
  line-height: 1.1 !important;
}

.stats {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(64px, 1fr)) !important;
  gap: 5px !important;
  align-self: center !important;
  min-width: 0 !important;
}

.stat {
  min-width: 0 !important;
  height: 44px !important;
  padding: 6px 7px !important;
  overflow: hidden !important;
}

.stat span {
  font-size: 0.50rem !important;
  letter-spacing: 0.7px !important;
}

.stat strong {
  display: block !important;
  font-size: 0.78rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.top-buttons {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  grid-auto-rows: 32px !important;
  gap: 5px !important;
  align-self: center !important;
  width: 100% !important;
  min-width: 0 !important;
}

.hud-btn {
  min-width: 0 !important;
  width: 100% !important;
  height: 32px !important;
  padding: 6px 6px 6px 28px !important;
  font-size: 0.65rem !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.hud-btn::before {
  left: 5px !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 3px !important;
  font-size: 0.56rem !important;
}

/* Intel strip below top HUD, never over the route */
.intel-panel {
  top: 92px !important;
  transform: translateX(-50%) scale(0.92) !important;
  transform-origin: top center !important;
  opacity: 0.92 !important;
}

/* Canvas starts visually below HUD */
#gameCanvas {
  display: block !important;
}

/* Bottom gameplay controls sit ABOVE shop, not on top of it */
.center-controls {
  bottom: 174px !important;
  transform: translateX(-50%) scale(0.88) !important;
  transform-origin: bottom center !important;
  z-index: 42 !important;
  gap: 10px !important;
}

.power-hint {
  font-size: 0.68rem !important;
  margin-bottom: 2px !important;
}

.power-strip {
  padding: 7px !important;
  gap: 6px !important;
}

.power-btn {
  min-width: 100px !important;
  height: 38px !important;
  padding: 8px 8px 8px 36px !important;
  font-size: 0.76rem !important;
}

.start-wave {
  min-width: 250px !important;
  height: 58px !important;
  padding: 14px 26px 14px 88px !important;
  font-size: 1.05rem !important;
}

.speed-box {
  height: 58px !important;
  padding: 8px !important;
  gap: 6px !important;
}

.speed-box span {
  font-size: 0.68rem !important;
}

.speed-btn {
  min-width: 46px !important;
  height: 40px !important;
  padding: 8px 8px 8px 31px !important;
  font-size: 0.76rem !important;
}

/* Shop area: fixed height with clean columns */
.shop {
  min-height: 158px !important;
  height: 158px !important;
  display: grid !important;
  grid-template-columns: minmax(720px, 1fr) minmax(640px, 1.35fr) !important;
  gap: 10px !important;
  padding: 9px 10px !important;
  overflow: hidden !important;
}

.tower-list {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(96px, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.tower-card {
  min-height: 0 !important;
  height: 138px !important;
  padding: 10px 8px 8px 45px !important;
  grid-template-columns: 28px 1fr !important;
  gap: 8px !important;
  overflow: hidden !important;
}

.tower-card::before {
  left: 8px !important;
  top: 10px !important;
  min-width: 23px !important;
  height: 23px !important;
  font-size: 0.68rem !important;
}

.tower-card strong {
  font-size: 0.82rem !important;
  line-height: 1.1 !important;
}

.tower-card span {
  font-size: 0.66rem !important;
  line-height: 1.15 !important;
}

.tower-card em {
  font-size: 0.72rem !important;
}

.tower-icon {
  width: 22px !important;
  height: 22px !important;
}

.tower-panel {
  display: grid !important;
  grid-template-columns: minmax(420px, 1fr) 132px !important;
  gap: 8px !important;
  min-width: 0 !important;
  height: 138px !important;
}

.tower-info {
  min-height: 0 !important;
  height: 138px !important;
  padding: 10px 12px !important;
  font-size: 0.80rem !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
}

.tower-actions {
  display: grid !important;
  grid-template-rows: repeat(3, 1fr) !important;
  gap: 7px !important;
  height: 138px !important;
}

.tower-actions .panel-btn {
  min-width: 0 !important;
  width: 100% !important;
  height: 41px !important;
  padding: 8px 8px 8px 38px !important;
  font-size: 0.78rem !important;
}

#undoBtn::before,
#upgradeBtn::before,
#sellBtn::before {
  left: 8px !important;
  min-width: 21px !important;
  height: 21px !important;
  font-size: 0.66rem !important;
}

/* Make disabled undo clearly disabled, not confusing text */
#undoBtn:disabled {
  color: rgba(255, 220, 94, 0.55) !important;
}

/* Prevent any horizontal text spill */
button,
.stat,
.tower-info,
.tower-card,
.hud-btn {
  box-sizing: border-box !important;
}

/* 1920 and smaller */
@media (max-width: 1700px) {
  .top-hud {
    grid-template-columns: 260px minmax(660px, 1fr) 520px !important;
  }

  .stats {
    grid-template-columns: repeat(10, minmax(56px, 1fr)) !important;
  }

  .shop {
    grid-template-columns: minmax(620px, 1fr) minmax(560px, 1.25fr) !important;
  }
}

@media (max-width: 1450px) {
  .top-hud {
    height: 116px !important;
    grid-template-columns: 260px 1fr !important;
    grid-template-areas:
      "brand stats"
      "brand buttons" !important;
  }

  .brand { grid-area: brand; }
  .stats { grid-area: stats; }
  .top-buttons { grid-area: buttons; grid-template-columns: repeat(10, 1fr) !important; }

  .intel-panel {
    top: 118px !important;
  }

  .center-controls {
    bottom: 256px !important;
  }

  .shop {
    height: 238px !important;
    min-height: 238px !important;
    grid-template-columns: 1fr !important;
  }

  .tower-list {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  .tower-card {
    height: 104px !important;
  }

  .tower-panel {
    height: 96px !important;
  }

  .tower-info,
  .tower-actions {
    height: 96px !important;
  }

  .tower-actions .panel-btn {
    height: 27px !important;
    font-size: 0.7rem !important;
  }
}


/* ===== V8.3 FINAL UI POLISH ===== */

/* Wider hotkey reservation for long keys like Enter and Esc */
.play-map-btn,
.panel-btn {
  min-width: 190px;
}

.play-map-btn[data-key="Enter"],
.panel-btn[data-key="Esc"],
.panel-btn.close-inline {
  padding-left: 78px !important;
}

.play-map-btn[data-key="Enter"]::before,
.panel-btn[data-key="Esc"]::before,
.panel-btn.close-inline::before {
  min-width: 48px !important;
  height: 24px !important;
  font-size: 0.68rem !important;
}

.modal-actions {
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.bottom-back-row {
  margin-top: 24px !important;
  justify-content: center !important;
}

/* Map play/back buttons: no text overlap */
.map-actions button,
.confirm-card .modal-actions button,
.pause-actions button,
.victory-card .modal-actions button,
.modal-card .modal-actions button {
  min-width: 210px !important;
  height: 58px !important;
  padding-right: 24px !important;
  text-align: center !important;
}

/* Bottom center command controls: more horizontal breathing room */
.center-controls {
  width: min(1120px, calc(100vw - 520px)) !important;
  min-width: 760px !important;
  grid-template-columns: minmax(360px, 1fr) 300px 260px !important;
  justify-content: center !important;
  align-items: end !important;
  gap: 16px !important;
  bottom: 176px !important;
  transform: translateX(-50%) scale(0.92) !important;
}

.power-wrap {
  width: 100% !important;
}

.power-strip {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(118px, 1fr)) !important;
}

.power-btn {
  min-width: 0 !important;
  width: 100% !important;
  height: 44px !important;
  padding-left: 42px !important;
  font-size: 0.82rem !important;
}

.start-wave {
  min-width: 300px !important;
  width: 300px !important;
}

.speed-box {
  min-width: 252px !important;
  justify-content: center !important;
}

/* Wider tower action buttons */
.shop {
  grid-template-columns: minmax(720px, 1fr) minmax(760px, 1.45fr) !important;
}

.tower-panel {
  grid-template-columns: minmax(450px, 1fr) 190px !important;
}

.tower-actions {
  width: 190px !important;
}

.tower-actions .panel-btn {
  width: 190px !important;
  min-width: 190px !important;
  padding-left: 52px !important;
  padding-right: 14px !important;
  justify-content: flex-start !important;
  text-align: left !important;
  font-size: 0.86rem !important;
  overflow: visible !important;
}

.tower-actions .panel-btn::before {
  left: 12px !important;
  min-width: 28px !important;
  height: 24px !important;
}

#upgradeBtn,
#sellBtn,
#undoBtn {
  white-space: nowrap !important;
}

/* Tower level badges must sit above weapon graphics and always be readable */
.tower-level-badge {
  pointer-events: none;
}

/* Portal label readability */
.portal-label-plate {
  pointer-events: none;
}

/* Shop/large modals back button visibility */
.shop-card,
.leaderboard-card,
.hotkeys-card {
  max-height: calc(100vh - 70px) !important;
  overflow-y: auto !important;
}

.shop-card .close-btn,
.leaderboard-card .close-btn,
.hotkeys-card .close-btn,
.map-card .close-btn,
.base-card .close-btn,
.reward-card .close-btn {
  min-width: 88px !important;
  height: 36px !important;
  font-size: 0.9rem !important;
}

/* Final top HUD cleanup */
.top-buttons {
  grid-template-columns: repeat(5, minmax(74px, 1fr)) !important;
}

.hud-btn {
  min-width: 74px !important;
}

/* Responsive fallback: stack command controls if not enough width */
@media (max-width: 1500px) {
  .center-controls {
    width: min(920px, calc(100vw - 40px)) !important;
    min-width: 0 !important;
    grid-template-columns: 1fr 270px 230px !important;
  }

  .shop {
    grid-template-columns: minmax(620px, 1fr) minmax(620px, 1.2fr) !important;
  }

  .tower-panel {
    grid-template-columns: minmax(390px, 1fr) 170px !important;
  }

  .tower-actions,
  .tower-actions .panel-btn {
    width: 170px !important;
    min-width: 170px !important;
  }
}

@media (max-width: 1180px) {
  .center-controls {
    bottom: 260px !important;
    grid-template-columns: 1fr !important;
    width: min(720px, calc(100vw - 40px)) !important;
  }

  .power-strip {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .start-wave,
  .speed-box {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* ===== V8.4 POWER + SHOP POLISH ===== */

/* Make shop exit obvious and comfortable */
.shop-card {
  position: relative !important;
  padding-top: 58px !important;
}

.shop-card .close-btn,
.leaderboard-card .close-btn,
.hotkeys-card .close-btn,
.map-card .close-btn,
.base-card .close-btn {
  position: sticky !important;
  top: 8px !important;
  float: right !important;
  z-index: 20 !important;
  min-width: 56px !important;
  height: 44px !important;
  padding: 8px 12px !important;
  font-size: 1.35rem !important;
  border: 1px solid rgba(125,249,255,0.55) !important;
  background: rgba(2,3,10,0.92) !important;
  color: #7df9ff !important;
  box-shadow: 0 0 18px rgba(125,249,255,0.28) !important;
}

.sticky-back-btn {
  position: sticky !important;
  top: 8px !important;
  z-index: 21 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 210px !important;
  height: 46px !important;
  margin: -38px 72px 16px 0 !important;
  padding: 12px 20px 12px 72px !important;
  color: #02030a !important;
  background: linear-gradient(90deg, #00e5ff, #ff4fd8) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  font-weight: 1000 !important;
  cursor: pointer !important;
  box-shadow: 0 0 26px rgba(0,229,255,0.28) !important;
}

.sticky-back-btn::before {
  content: "Esc";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 42px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(2,3,10,0.9);
  color: #7df9ff;
  border-radius: 6px;
  border: 1px solid rgba(125,249,255,0.55);
}

/* Power-up cinematic effects */
.power-cinematic {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0;
}

.power-cinematic.show {
  opacity: 1;
}

.power-cinematic.air {
  background:
    radial-gradient(circle at 35% 35%, rgba(255,220,94,0.26), transparent 24%),
    radial-gradient(circle at 65% 55%, rgba(255,64,64,0.24), transparent 26%),
    rgba(255,110,40,0.08);
  animation: airCinematic 1.45s ease-out forwards;
}

.power-cinematic.freeze {
  background:
    radial-gradient(circle at 50% 50%, rgba(125,249,255,0.30), transparent 30%),
    linear-gradient(135deg, rgba(125,249,255,0.18), rgba(140,82,255,0.16));
  animation: freezeCinematic 1.85s ease-out forwards;
}

.power-cinematic.repair {
  background:
    radial-gradient(circle at 80% 48%, rgba(125,255,155,0.30), transparent 22%),
    radial-gradient(circle at 50% 50%, rgba(125,255,155,0.12), transparent 55%);
  animation: repairCinematic 1.65s ease-out forwards;
}

.power-cinematic-label {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%);
  font-size: clamp(2rem, 5vw, 5rem);
  font-weight: 1000;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 26px currentColor, 0 0 48px currentColor;
  white-space: nowrap;
}

.power-cinematic.air .power-cinematic-label {
  color: #ffdc5e;
}

.power-cinematic.freeze .power-cinematic-label {
  color: #7df9ff;
}

.power-cinematic.repair .power-cinematic-label {
  color: #7dff9b;
}

.power-streak {
  position: absolute;
  width: 7px;
  height: 210px;
  background: linear-gradient(180deg, transparent, #ffdc5e, #ff4040);
  border-radius: 999px;
  box-shadow: 0 0 22px #ffdc5e;
  transform: rotate(32deg);
  animation: missileStreak 1.2s ease-in forwards;
}

.freeze-crack {
  position: absolute;
  width: 3px;
  height: 160px;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 0 18px #7df9ff;
  transform: rotate(var(--r));
  animation: frostCrack 1.8s ease-out forwards;
}

.repair-orb {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #7dff9b;
  box-shadow: 0 0 20px #7dff9b;
  animation: repairOrb 1.55s ease-in-out forwards;
}

@keyframes airCinematic {
  0% { opacity: 0; filter: brightness(1); }
  15% { opacity: 1; filter: brightness(1.8); }
  55% { opacity: 0.95; filter: brightness(1.25); }
  100% { opacity: 0; filter: brightness(1); }
}

@keyframes freezeCinematic {
  0% { opacity: 0; filter: saturate(1); }
  20% { opacity: 1; filter: saturate(1.8) brightness(1.4); }
  70% { opacity: 0.92; filter: saturate(1.4); }
  100% { opacity: 0; filter: saturate(1); }
}

@keyframes repairCinematic {
  0% { opacity: 0; filter: brightness(1); }
  20% { opacity: 0.95; filter: brightness(1.6); }
  70% { opacity: 0.82; filter: brightness(1.25); }
  100% { opacity: 0; filter: brightness(1); }
}

@keyframes missileStreak {
  0% { transform: translate(-120px, -260px) rotate(32deg); opacity: 0; }
  15% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translate(170px, 230px) rotate(32deg); opacity: 0; }
}

@keyframes frostCrack {
  0% { transform: scaleY(0.1) rotate(var(--r)); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scaleY(1.4) rotate(var(--r)); opacity: 0; }
}

@keyframes repairOrb {
  0% { transform: translate(var(--sx), var(--sy)) scale(0.5); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(var(--ex), var(--ey)) scale(0.1); opacity: 0; }
}


/* ===== V8.5 UPLOAD READY: PC/LAPTOP/ULTRAWIDE SAFE LAYOUT ===== */

.pc-only-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  place-items: center;
  background: radial-gradient(circle at 50% 30%, rgba(0,229,255,0.18), rgba(2,3,10,0.96) 55%);
  backdrop-filter: blur(8px);
}

.pc-only-card {
  width: min(560px, calc(100vw - 34px));
  padding: 34px;
  text-align: center;
  background: rgba(2,3,10,0.96);
  border: 1px solid rgba(125,249,255,0.50);
  box-shadow: 0 0 44px rgba(0,229,255,0.24), 0 0 80px rgba(255,79,216,0.16);
}

.pc-only-card h2 {
  margin: 0 0 14px;
  color: #7df9ff;
  font-size: 2rem;
  text-shadow: 0 0 18px rgba(125,249,255,0.8);
}

.pc-only-card p {
  color: #e8e8ff;
  line-height: 1.5;
  margin: 8px 0;
}

@media (max-width: 1024px), (pointer: coarse) and (max-width: 1180px) {
  .pc-only-overlay { display: grid; }

  .top-hud,
  .mission,
  .intel-panel,
  .center-controls,
  .shop,
  canvas,
  .modal,
  .map-modal,
  .base-modal,
  .daily-modal,
  .shop-modal,
  .leaderboard-modal,
  .hotkeys-modal,
  .pause-modal,
  .confirm-modal,
  .reward-modal,
  .evolution-modal,
  .victory-modal {
    display: none !important;
  }
}

body { overflow: hidden !important; }

.top-hud {
  height: 82px !important;
  display: grid !important;
  grid-template-columns: 300px minmax(700px, 1fr) 610px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
}

.brand h1 { font-size: 1.08rem !important; line-height: 1.05 !important; }
.brand p { font-size: 0.62rem !important; }

.stats {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(58px, 1fr)) !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.stat {
  min-width: 0 !important;
  height: 43px !important;
  padding: 6px 7px !important;
}

.stat span { font-size: 0.49rem !important; }

.stat strong {
  font-size: 0.76rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.top-buttons {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(74px, 1fr)) !important;
  grid-auto-rows: 31px !important;
  gap: 5px !important;
  width: 100% !important;
}

.hud-btn {
  width: 100% !important;
  min-width: 0 !important;
  height: 31px !important;
  padding: 6px 6px 6px 28px !important;
  font-size: 0.64rem !important;
  line-height: 1 !important;
}

.hud-btn::before {
  left: 5px !important;
  min-width: 17px !important;
  height: 17px !important;
  font-size: 0.56rem !important;
}

.intel-panel {
  top: 88px !important;
  transform: translateX(-50%) scale(0.90) !important;
  transform-origin: top center !important;
}

.center-controls {
  bottom: 178px !important;
  width: min(1160px, calc(100vw - 520px)) !important;
  min-width: 770px !important;
  display: grid !important;
  grid-template-columns: minmax(380px, 1fr) 310px 260px !important;
  gap: 16px !important;
  align-items: end !important;
  transform: translateX(-50%) scale(0.91) !important;
  transform-origin: bottom center !important;
}

.power-wrap, .power-strip { width: 100% !important; }

.power-strip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(120px, 1fr)) !important;
  gap: 7px !important;
  padding: 8px !important;
}

.power-btn {
  min-width: 0 !important;
  width: 100% !important;
  height: 44px !important;
  padding: 9px 8px 9px 42px !important;
  font-size: 0.82rem !important;
}

.start-wave {
  width: 310px !important;
  min-width: 310px !important;
  height: 60px !important;
  padding-left: 94px !important;
}

.speed-box {
  width: 260px !important;
  min-width: 260px !important;
  height: 60px !important;
  justify-content: center !important;
}

.shop {
  height: 164px !important;
  min-height: 164px !important;
  display: grid !important;
  grid-template-columns: minmax(760px, 1fr) minmax(760px, 1.35fr) !important;
  gap: 10px !important;
  padding: 9px 10px !important;
  overflow: hidden !important;
}

.tower-list {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(105px, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.tower-card {
  height: 144px !important;
  min-height: 0 !important;
  padding: 10px 8px 8px 48px !important;
  grid-template-columns: 30px 1fr !important;
  gap: 8px !important;
  overflow: hidden !important;
}

.tower-card::before {
  left: 9px !important;
  top: 10px !important;
  min-width: 26px !important;
  height: 25px !important;
  font-size: 0.70rem !important;
}

.tower-card strong { font-size: 0.82rem !important; line-height: 1.08 !important; }
.tower-card span { font-size: 0.66rem !important; line-height: 1.15 !important; }
.tower-card em { font-size: 0.72rem !important; }

.tower-panel {
  height: 144px !important;
  display: grid !important;
  grid-template-columns: minmax(480px, 1fr) 190px !important;
  gap: 9px !important;
  min-width: 0 !important;
}

.tower-info {
  height: 144px !important;
  padding: 10px 12px !important;
  font-size: 0.80rem !important;
  line-height: 1.32 !important;
  overflow: hidden !important;
}

.tower-actions {
  height: 144px !important;
  width: 190px !important;
  display: grid !important;
  grid-template-rows: repeat(3, 1fr) !important;
  gap: 8px !important;
}

.tower-actions .panel-btn {
  width: 190px !important;
  min-width: 190px !important;
  height: 42px !important;
  padding: 8px 10px 8px 52px !important;
  font-size: 0.86rem !important;
  justify-content: flex-start !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.play-map-btn[data-key="Enter"],
.panel-btn[data-key="Esc"],
.panel-btn.close-inline {
  padding-left: 82px !important;
  min-width: 230px !important;
}

.play-map-btn[data-key="Enter"]::before,
.panel-btn[data-key="Esc"]::before,
.panel-btn.close-inline::before {
  min-width: 50px !important;
  height: 25px !important;
  font-size: 0.68rem !important;
}

.map-actions button,
.confirm-card .modal-actions button,
.pause-actions button,
.victory-card .modal-actions button,
.modal-card .modal-actions button,
.bottom-back-row button {
  min-width: 230px !important;
  height: 58px !important;
  padding-right: 24px !important;
}

.shop-card {
  position: relative !important;
  padding-top: 66px !important;
  max-height: calc(100vh - 54px) !important;
  overflow-y: auto !important;
}

.shop-card .close-btn,
.leaderboard-card .close-btn,
.hotkeys-card .close-btn,
.map-card .close-btn,
.base-card .close-btn {
  position: sticky !important;
  top: 8px !important;
  float: right !important;
  z-index: 30 !important;
  min-width: 62px !important;
  height: 46px !important;
  font-size: 1.45rem !important;
  background: rgba(2,3,10,0.94) !important;
  border: 1px solid rgba(125,249,255,0.55) !important;
  color: #7df9ff !important;
  box-shadow: 0 0 20px rgba(125,249,255,0.30) !important;
}

.sticky-back-btn {
  position: sticky !important;
  top: 8px !important;
  z-index: 31 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 220px !important;
  height: 48px !important;
  margin: -44px 76px 18px 0 !important;
  padding: 12px 20px 12px 74px !important;
  color: #02030a !important;
  background: linear-gradient(90deg, #00e5ff, #ff4fd8) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  font-weight: 1000 !important;
  cursor: pointer !important;
  box-shadow: 0 0 28px rgba(0,229,255,0.30) !important;
}

.sticky-back-btn::before {
  content: "Esc";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 44px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(2,3,10,0.9);
  color: #7df9ff;
  border-radius: 6px;
  border: 1px solid rgba(125,249,255,0.55);
}

/* Laptop 1366–1600 safe layout */
@media (max-width: 1600px) {
  .top-hud {
    height: 112px !important;
    grid-template-columns: 260px 1fr !important;
    grid-template-areas:
      "brand stats"
      "brand buttons" !important;
  }

  .brand { grid-area: brand; }
  .stats { grid-area: stats; grid-template-columns: repeat(10, minmax(52px, 1fr)) !important; }
  .top-buttons { grid-area: buttons; grid-template-columns: repeat(10, minmax(54px, 1fr)) !important; }

  .intel-panel { top: 118px !important; }

  .center-controls {
    bottom: 246px !important;
    width: min(920px, calc(100vw - 40px)) !important;
    min-width: 0 !important;
    grid-template-columns: 1fr 260px 230px !important;
    transform: translateX(-50%) scale(0.84) !important;
  }

  .start-wave { width: 260px !important; min-width: 260px !important; }
  .speed-box { width: 230px !important; min-width: 230px !important; }

  .shop {
    height: 236px !important;
    min-height: 236px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 108px 108px !important;
  }

  .tower-list { grid-template-columns: repeat(6, minmax(90px, 1fr)) !important; }
  .tower-card { height: 104px !important; padding-left: 44px !important; }
  .tower-card strong { font-size: 0.76rem !important; }
  .tower-card span { font-size: 0.60rem !important; }
  .tower-card em { font-size: 0.66rem !important; }

  .tower-panel {
    height: 106px !important;
    grid-template-columns: minmax(480px, 1fr) 180px !important;
  }

  .tower-info, .tower-actions { height: 106px !important; }
  .tower-actions { width: 180px !important; }

  .tower-actions .panel-btn {
    width: 180px !important;
    min-width: 180px !important;
    height: 30px !important;
    font-size: 0.74rem !important;
  }
}

/* Ultrawide */
@media (min-width: 2300px) {
  .center-controls {
    width: 1260px !important;
    grid-template-columns: 440px 330px 280px !important;
  }

  .shop {
    grid-template-columns: 980px minmax(900px, 1fr) !important;
  }

  .tower-list {
    max-width: 980px !important;
  }
}


/* ===== V8.6 LAPTOP LAYOUT FIX ===== */
/* Fixes the 1366/1440/1600 laptop bottom-panel issue:
   tower names/costs must stay readable, and the command bar must not crowd the shop. */

/* Slightly reduce the command bar footprint on laptop-sized screens */
@media (max-width: 1800px) {
  .center-controls {
    bottom: 246px !important;
    width: min(980px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    grid-template-columns: minmax(360px, 1fr) 270px 230px !important;
    gap: 12px !important;
    transform: translateX(-50%) scale(0.84) !important;
    transform-origin: bottom center !important;
  }

  .power-strip {
    grid-template-columns: repeat(3, minmax(112px, 1fr)) !important;
    gap: 6px !important;
  }

  .power-btn {
    height: 42px !important;
    font-size: 0.78rem !important;
  }

  .start-wave {
    width: 270px !important;
    min-width: 270px !important;
    height: 58px !important;
    font-size: 1rem !important;
  }

  .speed-box {
    width: 230px !important;
    min-width: 230px !important;
    height: 58px !important;
  }

  /* The bottom shop becomes a clean two-row command deck */
  .shop {
    height: 246px !important;
    min-height: 246px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 116px 112px !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .tower-list {
    grid-template-columns: repeat(6, minmax(112px, 1fr)) !important;
    gap: 8px !important;
    height: 116px !important;
  }

  /* Laptop tower card: hide descriptions, keep name + cost readable */
  .tower-card {
    height: 116px !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 26px 32px 22px 24px !important;
    justify-items: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 8px 6px !important;
    overflow: hidden !important;
  }

  .tower-card::before {
    position: static !important;
    grid-row: 1 !important;
    min-width: 34px !important;
    height: 23px !important;
    font-size: 0.70rem !important;
    margin: 0 !important;
  }

  .tower-card .tower-icon {
    grid-row: 2 !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
  }

  .tower-card strong {
    grid-row: 3 !important;
    display: block !important;
    width: 100% !important;
    font-size: 0.78rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .tower-card span {
    display: none !important;
  }

  .tower-card em {
    grid-row: 4 !important;
    display: block !important;
    width: 100% !important;
    font-size: 0.72rem !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-align: center !important;
  }

  .tower-panel {
    height: 112px !important;
    display: grid !important;
    grid-template-columns: minmax(560px, 1fr) 190px !important;
    gap: 8px !important;
  }

  .tower-info {
    height: 112px !important;
    padding: 10px 12px !important;
    font-size: 0.78rem !important;
    line-height: 1.30 !important;
    overflow: hidden !important;
  }

  .tower-actions {
    height: 112px !important;
    width: 190px !important;
    grid-template-rows: repeat(3, 32px) !important;
    gap: 6px !important;
  }

  .tower-actions .panel-btn {
    width: 190px !important;
    min-width: 190px !important;
    height: 32px !important;
    padding: 6px 10px 6px 50px !important;
    font-size: 0.78rem !important;
    justify-content: flex-start !important;
    text-align: left !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  .tower-actions .panel-btn::before {
    left: 10px !important;
    min-width: 26px !important;
    height: 22px !important;
    font-size: 0.66rem !important;
  }
}

/* 1366px width / smaller laptop safety */
@media (max-width: 1450px) {
  .top-hud {
    height: 118px !important;
    grid-template-columns: 230px 1fr !important;
  }

  .brand h1 {
    font-size: 0.96rem !important;
  }

  .brand p {
    font-size: 0.56rem !important;
  }

  .stats {
    grid-template-columns: repeat(5, minmax(70px, 1fr)) !important;
    grid-auto-rows: 38px !important;
  }

  .stat {
    height: 38px !important;
  }

  .top-buttons {
    grid-template-columns: repeat(10, minmax(52px, 1fr)) !important;
  }

  .hud-btn {
    height: 30px !important;
    font-size: 0.58rem !important;
    padding-left: 27px !important;
  }

  .intel-panel {
    top: 122px !important;
  }

  .center-controls {
    bottom: 252px !important;
    width: min(900px, calc(100vw - 36px)) !important;
    grid-template-columns: 1fr 245px 210px !important;
    transform: translateX(-50%) scale(0.80) !important;
  }

  .start-wave {
    width: 245px !important;
    min-width: 245px !important;
  }

  .speed-box {
    width: 210px !important;
    min-width: 210px !important;
  }

  .shop {
    height: 250px !important;
    min-height: 250px !important;
    grid-template-rows: 118px 116px !important;
  }

  .tower-list {
    grid-template-columns: repeat(6, minmax(96px, 1fr)) !important;
  }

  .tower-card {
    height: 118px !important;
  }

  .tower-card strong {
    font-size: 0.70rem !important;
  }

  .tower-card em {
    font-size: 0.66rem !important;
  }

  .tower-panel {
    height: 116px !important;
    grid-template-columns: minmax(430px, 1fr) 180px !important;
  }

  .tower-info {
    height: 116px !important;
    font-size: 0.72rem !important;
  }

  .tower-actions {
    width: 180px !important;
    height: 116px !important;
  }

  .tower-actions .panel-btn {
    width: 180px !important;
    min-width: 180px !important;
  }
}

/* Tall desktop and ultrawide stay spacious */
@media (min-width: 1900px) {
  .tower-card span {
    display: block !important;
  }
}


/* ===== V8.7 FINAL SCREEN FIT ===== */
/* Goal: no text over gameplay grid, clean laptop/tablet-landscape fit, phone/portrait blocked. */

/* Block phones and portrait, but allow tablet landscape if wide enough */
@media (max-width: 899px), (orientation: portrait) and (pointer: coarse) {
  .pc-only-overlay {
    display: grid !important;
  }

  .top-hud,
  .mission,
  .intel-panel,
  .center-controls,
  .shop,
  canvas,
  .modal,
  .map-modal,
  .base-modal,
  .daily-modal,
  .shop-modal,
  .leaderboard-modal,
  .hotkeys-modal,
  .pause-modal,
  .confirm-modal,
  .reward-modal,
  .evolution-modal,
  .victory-modal {
    display: none !important;
  }
}

@media (min-width: 900px) and (orientation: landscape) {
  .pc-only-overlay {
    display: none !important;
  }
}

/* Compact top HUD so it does not steal battlefield height */
@media (max-width: 1800px) {
  .top-hud {
    height: 92px !important;
    grid-template-columns: 255px minmax(620px, 1fr) 560px !important;
    padding: 7px 8px !important;
    gap: 8px !important;
  }

  .brand h1 {
    font-size: 0.98rem !important;
  }

  .brand p {
    font-size: 0.56rem !important;
  }

  .stats {
    grid-template-columns: repeat(10, minmax(52px, 1fr)) !important;
    gap: 4px !important;
  }

  .stat {
    height: 38px !important;
    padding: 5px 6px !important;
  }

  .stat span {
    font-size: 0.46rem !important;
  }

  .stat strong {
    font-size: 0.70rem !important;
  }

  .top-buttons {
    grid-template-columns: repeat(5, minmax(64px, 1fr)) !important;
    grid-auto-rows: 30px !important;
    gap: 4px !important;
  }

  .hud-btn {
    height: 30px !important;
    padding-left: 27px !important;
    font-size: 0.60rem !important;
  }

  .hud-btn::before {
    min-width: 16px !important;
    height: 16px !important;
    font-size: 0.54rem !important;
  }

  .intel-panel {
    top: 96px !important;
    transform: translateX(-50%) scale(0.84) !important;
    opacity: 0.82 !important;
  }
}

/* The command bar is now docked just above the compact shop, not in the build area */
@media (max-width: 1800px) {
  .center-controls {
    bottom: 128px !important;
    width: min(940px, calc(100vw - 360px)) !important;
    min-width: 0 !important;
    grid-template-columns: minmax(330px, 1fr) 250px 210px !important;
    gap: 10px !important;
    transform: translateX(-50%) scale(0.82) !important;
    transform-origin: bottom center !important;
    z-index: 44 !important;
  }

  .power-hint {
    display: none !important;
  }

  .power-strip {
    grid-template-columns: repeat(3, minmax(96px, 1fr)) !important;
    gap: 5px !important;
    padding: 6px !important;
  }

  .power-btn {
    height: 38px !important;
    padding: 7px 6px 7px 38px !important;
    font-size: 0.72rem !important;
  }

  .start-wave {
    width: 250px !important;
    min-width: 250px !important;
    height: 52px !important;
    padding-left: 86px !important;
    font-size: 0.96rem !important;
  }

  .start-wave::before {
    min-width: 54px !important;
    height: 24px !important;
    font-size: 0.68rem !important;
  }

  .speed-box {
    width: 210px !important;
    min-width: 210px !important;
    height: 52px !important;
    padding: 6px !important;
  }

  .speed-box span {
    font-size: 0.62rem !important;
  }

  .speed-btn {
    min-width: 42px !important;
    height: 34px !important;
    padding-left: 28px !important;
    font-size: 0.68rem !important;
  }
}

/* FINAL LAPTOP SHOP: one compact row, not a tall two-row panel */
@media (max-width: 1800px) {
  .shop {
    height: 126px !important;
    min-height: 126px !important;
    display: grid !important;
    grid-template-columns: minmax(610px, 1fr) minmax(520px, 1.05fr) 176px !important;
    grid-template-rows: 1fr !important;
    gap: 7px !important;
    padding: 7px !important;
    overflow: hidden !important;
  }

  .tower-list {
    height: 112px !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(84px, 1fr)) !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .tower-card {
    height: 112px !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 24px 30px 22px 22px !important;
    justify-items: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 7px 4px !important;
    overflow: hidden !important;
  }

  .tower-card::before {
    position: static !important;
    grid-row: 1 !important;
    min-width: 31px !important;
    height: 22px !important;
    font-size: 0.66rem !important;
    margin: 0 !important;
  }

  .tower-card .tower-icon {
    grid-row: 2 !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
  }

  .tower-card strong {
    grid-row: 3 !important;
    display: block !important;
    width: 100% !important;
    font-size: 0.70rem !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .tower-card span {
    display: none !important;
  }

  .tower-card em {
    grid-row: 4 !important;
    display: block !important;
    width: 100% !important;
    font-size: 0.64rem !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  .tower-panel {
    display: contents !important;
  }

  .tower-info {
    height: 112px !important;
    min-height: 0 !important;
    padding: 9px 11px !important;
    font-size: 0.72rem !important;
    line-height: 1.28 !important;
    overflow: hidden !important;
  }

  .tower-actions {
    height: 112px !important;
    width: 176px !important;
    display: grid !important;
    grid-template-rows: repeat(3, 32px) !important;
    gap: 6px !important;
  }

  .tower-actions .panel-btn {
    width: 176px !important;
    min-width: 176px !important;
    height: 32px !important;
    padding: 6px 8px 6px 48px !important;
    font-size: 0.72rem !important;
    justify-content: flex-start !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  .tower-actions .panel-btn::before {
    left: 9px !important;
    min-width: 25px !important;
    height: 21px !important;
    font-size: 0.64rem !important;
  }
}

/* 1366px and tablet landscape: make even more room for the battlefield */
@media (max-width: 1450px) {
  .top-hud {
    height: 104px !important;
    grid-template-columns: 220px 1fr !important;
    grid-template-areas:
      "brand stats"
      "brand buttons" !important;
  }

  .brand {
    grid-area: brand;
  }

  .stats {
    grid-area: stats;
    grid-template-columns: repeat(5, minmax(62px, 1fr)) !important;
    grid-auto-rows: 34px !important;
  }

  .stat {
    height: 34px !important;
  }

  .top-buttons {
    grid-area: buttons;
    grid-template-columns: repeat(10, minmax(48px, 1fr)) !important;
  }

  .hud-btn {
    height: 28px !important;
    font-size: 0.54rem !important;
    padding-left: 25px !important;
  }

  .intel-panel {
    top: 108px !important;
    transform: translateX(-50%) scale(0.76) !important;
  }

  .center-controls {
    bottom: 120px !important;
    width: min(820px, calc(100vw - 30px)) !important;
    grid-template-columns: minmax(300px, 1fr) 224px 190px !important;
    transform: translateX(-50%) scale(0.78) !important;
  }

  .start-wave {
    width: 224px !important;
    min-width: 224px !important;
  }

  .speed-box {
    width: 190px !important;
    min-width: 190px !important;
  }

  .shop {
    height: 118px !important;
    min-height: 118px !important;
    grid-template-columns: minmax(520px, 1fr) minmax(390px, 0.95fr) 160px !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  .tower-list {
    height: 106px !important;
    grid-template-columns: repeat(6, minmax(74px, 1fr)) !important;
    gap: 5px !important;
  }

  .tower-card {
    height: 106px !important;
    padding: 6px 3px !important;
  }

  .tower-card::before {
    min-width: 28px !important;
    height: 20px !important;
    font-size: 0.60rem !important;
  }

  .tower-card strong {
    font-size: 0.62rem !important;
  }

  .tower-card em {
    font-size: 0.58rem !important;
  }

  .tower-info {
    height: 106px !important;
    padding: 8px 9px !important;
    font-size: 0.66rem !important;
    line-height: 1.22 !important;
  }

  .tower-actions {
    height: 106px !important;
    width: 160px !important;
    grid-template-rows: repeat(3, 30px) !important;
    gap: 5px !important;
  }

  .tower-actions .panel-btn {
    width: 160px !important;
    min-width: 160px !important;
    height: 30px !important;
    font-size: 0.66rem !important;
    padding-left: 44px !important;
  }
}

/* Keep core text from being hidden by bottom shop: hide the extra low status text on smaller heights */
@media (max-height: 850px) {
  .center-controls {
    opacity: 0.96 !important;
  }
}

/* Make map modal long-key buttons readable */
.play-map-btn[data-key="Enter"],
.panel-btn[data-key="Esc"],
.panel-btn.close-inline {
  padding-left: 84px !important;
}

.play-map-btn[data-key="Enter"]::before,
.panel-btn[data-key="Esc"]::before,
.panel-btn.close-inline::before {
  min-width: 52px !important;
  font-size: 0.66rem !important;
}


/* ===== V8.8 FINAL TESTING TEXT FIXES ===== */

/* Tower card full names must fit */
@media (max-width: 1800px) {
  .tower-card strong {
    font-size: 0.62rem !important;
    letter-spacing: 0.1px !important;
    white-space: normal !important;
    line-height: 1.05 !important;
    max-height: 2.1em !important;
  }
}

@media (max-width: 1450px) {
  .tower-card strong {
    font-size: 0.56rem !important;
    line-height: 1.05 !important;
  }
}

/* Speed buttons must show 1x / 2x / 4x fully */
.speed-box {
  overflow: visible !important;
}

.speed-btn {
  min-width: 58px !important;
  width: 58px !important;
  padding: 8px 8px !important;
  text-align: center !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.speed-btn::before {
  display: none !important;
}

@media (max-width: 1800px) {
  .speed-box {
    width: 236px !important;
    min-width: 236px !important;
    gap: 7px !important;
  }

  .speed-btn {
    min-width: 54px !important;
    width: 54px !important;
    height: 36px !important;
    font-size: 0.78rem !important;
    padding: 8px 8px !important;
  }
}

@media (max-width: 1450px) {
  .speed-box {
    width: 218px !important;
    min-width: 218px !important;
    gap: 6px !important;
  }

  .speed-btn {
    min-width: 50px !important;
    width: 50px !important;
    height: 34px !important;
    font-size: 0.72rem !important;
  }
}

/* Top HUD mode/stat text should not truncate badly */
.stat strong {
  text-overflow: clip !important;
}

#modeText {
  font-size: 0.70rem !important;
}

@media (max-width: 1450px) {
  #modeText {
    font-size: 0.66rem !important;
  }

  .stat strong {
    font-size: 0.66rem !important;
  }
}

/* Give the command bar a little more room because speed buttons are wider */
@media (max-width: 1800px) {
  .center-controls {
    grid-template-columns: minmax(330px, 1fr) 250px 236px !important;
  }
}

@media (max-width: 1450px) {
  .center-controls {
    grid-template-columns: minmax(292px, 1fr) 224px 218px !important;
  }
}


/* ===== V8.9 HELP / HOW TO PLAY ===== */

.help-card {
  width: min(980px, calc(100vw - 44px)) !important;
  max-height: calc(100vh - 58px) !important;
  overflow-y: auto !important;
}

.help-sections {
  display: grid;
  gap: 18px;
}

.help-section {
  padding: 16px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(125,249,255,0.18);
}

.help-section h3 {
  margin: 0 0 12px;
  color: #7df9ff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.help-section p,
.help-section li {
  color: #e8e8ff;
  line-height: 1.55;
  font-weight: 750;
}

.help-section ol {
  margin: 0;
  padding-left: 24px;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.guide-grid div {
  padding: 12px;
  background: rgba(2,3,10,0.55);
  border: 1px solid rgba(125,249,255,0.16);
}

.guide-grid strong {
  display: block;
  color: #ffdc5e;
  margin-bottom: 6px;
}

.guide-grid span {
  display: block;
  color: #e8e8ff;
  line-height: 1.4;
}

.hotkeys-grid.compact {
  grid-template-columns: repeat(3, 1fr);
}

.hotkeys-grid.compact div {
  grid-template-columns: 70px 1fr;
}

.first-help-modal {
  position: fixed;
  inset: 0;
  z-index: 1003;
  display: none;
  place-items: center;
  background: rgba(0,0,0,0.68);
  backdrop-filter: blur(10px);
}

.first-help-modal.show {
  display: grid;
}

.first-help-card {
  width: min(760px, calc(100vw - 42px));
  padding: 34px;
  text-align: center;
  background: rgba(2,3,10,0.97);
  border: 1px solid rgba(125,249,255,0.46);
  box-shadow: 0 0 48px rgba(0,229,255,0.24), 0 0 80px rgba(255,79,216,0.20);
}

.first-help-card h2 {
  margin: 0 0 12px;
  color: #7df9ff;
  font-size: 2.45rem;
  text-shadow: 0 0 22px rgba(125,249,255,0.85);
}

.first-help-card p {
  color: #e8e8ff;
  font-size: 1.05rem;
  line-height: 1.5;
}

.first-help-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 24px 0;
}

.first-help-grid div {
  padding: 14px 10px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(125,249,255,0.20);
}

.first-help-grid kbd {
  display: inline-flex;
  min-width: 54px;
  justify-content: center;
  margin-bottom: 8px;
}

.first-help-grid span {
  display: block;
  color: #e8e8ff;
  font-weight: 900;
  font-size: 0.86rem;
}

@media (max-width: 900px) {
  .guide-grid,
  .hotkeys-grid.compact,
  .first-help-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== V8.9.1 LOCKED TOWER FIX ===== */
.tower-card.locked {
  cursor: not-allowed !important;
  opacity: 0.62 !important;
  filter: grayscale(0.25) !important;
}

.tower-card.locked.active {
  border-color: rgba(125,249,255,0.20) !important;
  box-shadow: none !important;
}


/* ===== V9 PREMIUM TOWERS ===== */

.tower-card.premium-locked {
  opacity: 0.60 !important;
  filter: grayscale(0.18) !important;
  border-color: rgba(255,220,94,0.28) !important;
}

.tower-card.premium-locked::after {
  content: "LOCKED";
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 3px 6px;
  color: #02030a;
  background: #ffdc5e;
  border-radius: 5px;
  font-size: 0.56rem;
  font-weight: 1000;
  box-shadow: 0 0 12px rgba(255,220,94,0.45);
}

.premium-unlock {
  border-color: rgba(255,220,94,0.45) !important;
  box-shadow: inset 0 0 18px rgba(255,220,94,0.06);
}

.premium-unlock.unlocked {
  border-color: rgba(125,255,155,0.55) !important;
  box-shadow: inset 0 0 20px rgba(125,255,155,0.10);
}

.premium-unlock.unlocked em {
  color: #7dff9b !important;
}

@media (max-width: 1800px) {
  .tower-card strong {
    font-size: 0.62rem !important;
    white-space: normal !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 1450px) {
  .tower-card strong {
    font-size: 0.56rem !important;
  }
}

/* ===== V9.7 STABLE BUILD ===== */
.tower-card::after { display:none !important; content:none !important; }
.tower-card[data-tower="pulse"],
.tower-card[data-tower="laser"],
.tower-card[data-tower="cannon"],
.tower-card[data-tower="freeze"],
.tower-card.locked:not(.premium-locked) {
  opacity:1 !important; filter:none !important; cursor:pointer !important;
}
.tower-card.locked:not(.premium-locked)::after { display:none !important; content:none !important; }
.tower-card.premium-locked {
  opacity:.62 !important; filter:grayscale(.2) !important; border-color:rgba(255,220,94,.36) !important; cursor:not-allowed !important;
}
.tower-card.premium-locked::after {
  content:"LOCKED" !important; display:inline-flex !important; position:absolute !important;
  right:7px !important; bottom:7px !important; padding:3px 7px !important; color:#02030a !important;
  background:#ffdc5e !important; border-radius:5px !important; font-size:.56rem !important; font-weight:1000 !important;
}
.stat span{font-size:.54rem !important;letter-spacing:.7px !important}
.stat strong{font-size:.78rem !important;text-overflow:clip !important}
.hud-btn{font-size:.68rem !important}
.speed-btn{min-width:54px !important;width:54px !important;padding-left:8px !important;padding-right:8px !important;text-align:center !important}
.speed-btn::before{display:none !important}
.danger-btn{border-color:rgba(255,64,64,.55) !important;color:#ff9b9b !important}
#gameCanvas{background:radial-gradient(circle at 12% 28%,rgba(255,79,216,.18),transparent 26%),radial-gradient(circle at 78% 38%,rgba(0,229,255,.18),transparent 30%),linear-gradient(90deg,rgba(5,8,20,.98),rgba(5,10,24,.98)) !important}
@media(max-width:1450px){.stat span{font-size:.48rem !important}.stat strong{font-size:.66rem !important}.hud-btn{font-size:.58rem !important}.tower-card strong{font-size:.56rem !important;line-height:1.05 !important}}