/* Neon Cascade — gameplay HUD overlays */

.nc-hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  pointer-events: none;
}

.nc-hud-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 1rem;
  background: linear-gradient(180deg, rgba(8, 6, 24, 0.92), rgba(8, 6, 24, 0.55));
  border-bottom: 1px solid rgba(0, 245, 255, 0.2);
  font-size: 0.85rem;
  color: rgba(200, 200, 255, 0.85);
  pointer-events: auto;
}

.nc-hud-stat strong {
  color: #fff;
  margin-left: 0.25rem;
}

.nc-heat-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.nc-heat-bar {
  width: 88px;
  height: 10px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 140, 0, 0.35);
  border-radius: 2px;
  overflow: hidden;
}

.nc-heat-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff8c00, #ff3860);
  transition: width 0.08s linear;
}

.nc-hud-btn {
  background: rgba(0, 245, 255, 0.12);
  border: 1px solid rgba(0, 245, 255, 0.35);
  color: #00f5ff;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
  font-weight: bold;
}

.nc-pit-controls {
  position: fixed;
  left: 8px;
  bottom: 10px;
  z-index: 41;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: min(148px, calc(100vw - 16px));
  padding: 0.45rem 0.55rem;
  background: rgba(8, 6, 22, 0.88);
  border: 1px solid rgba(0, 245, 255, 0.22);
  border-radius: 4px;
  pointer-events: auto;
  font-size: 0.68rem;
  color: rgba(190, 185, 220, 0.9);
}

.nc-pit-controls.hidden {
  display: none;
}

.nc-pit-controls-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.nc-pit-controls-label {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nc-pit-controls input[type="range"] {
  width: 100%;
  height: 4px;
  accent-color: #00f5ff;
  cursor: pointer;
}

.nc-pit-controls-value {
  color: #00f5ff;
  font-weight: 700;
  font-size: 0.75rem;
}

/* Hide desktop pit sliders on phones — they steal fight space */
.platform-mobile .nc-pit-controls {
  display: none !important;
}

/* Mobile cascade touch pad */
.nc-touch-controls {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  padding: 0.45rem max(0.55rem, env(safe-area-inset-right))
    max(0.55rem, env(safe-area-inset-bottom))
    max(0.55rem, env(safe-area-inset-left));
  gap: 0.55rem;
  justify-content: space-between;
  align-items: flex-end;
  background: linear-gradient(180deg, transparent, rgba(4, 6, 18, 0.92) 28%);
  pointer-events: none;
}

.nc-touch-controls.hidden {
  display: none !important;
}

.platform-mobile .nc-touch-controls:not(.hidden) {
  display: flex;
}

.nc-touch-cluster {
  display: flex;
  gap: 0.4rem;
  pointer-events: auto;
}

.nc-touch-btn {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(0, 245, 255, 0.4);
  background: rgba(12, 14, 32, 0.88);
  color: #e8f7ff;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  user-select: none;
}

.nc-touch-btn:active {
  transform: scale(0.96);
  background: rgba(0, 245, 255, 0.18);
}

.nc-touch-hard {
  border-color: rgba(255, 56, 96, 0.55);
  color: #ff8aa8;
}

.nc-touch-heat {
  border-color: rgba(255, 140, 0, 0.6);
  color: #ffb347;
  width: 64px;
  height: 64px;
}

.nc-touch-rotate {
  border-color: rgba(196, 77, 255, 0.5);
}

@media (max-width: 380px) {
  .nc-touch-btn {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
  }
  .nc-touch-heat {
    width: 56px;
    height: 56px;
  }
}

.nc-gameover-stats p {
  margin: 0.35rem 0;
  font-size: 1.05rem;
}

/* ——— Main menu: Neon Cascade identity (overrides Shape Survival shell) ——— */

#menu-screen.menu-overlay {
  background: transparent;
}

#menu-screen .menu-content.nc-menu-hero {
  max-width: min(92vw, 520px);
  gap: 0;
  padding-top: clamp(12px, 4vh, 36px);
}

#menu-screen .nc-brand {
  margin-bottom: 1.1rem;
  position: relative;
}

#menu-screen .nc-brand-eyebrow {
  margin: 0 0 0.45rem;
  font-family: Orbitron, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  color: rgba(0, 245, 255, 0.55);
  text-transform: uppercase;
}

#menu-screen .nc-cascade-mark {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 52px;
  margin: 0 auto 14px;
}

#menu-screen .nc-cascade-col {
  display: block;
  width: 11px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #00f5ff, #c44dff);
  box-shadow: 0 0 12px rgba(0, 245, 255, 0.45);
  animation: nc-cascade-bob 2.4s ease-in-out infinite;
}

#menu-screen .nc-cascade-col:nth-child(1) { height: 38%; animation-delay: 0s; }
#menu-screen .nc-cascade-col:nth-child(2) { height: 72%; animation-delay: 0.18s; background: linear-gradient(180deg, #ff3860, #c44dff); }
#menu-screen .nc-cascade-col:nth-child(3) { height: 100%; animation-delay: 0.36s; }
#menu-screen .nc-cascade-col:nth-child(4) { height: 54%; animation-delay: 0.54s; background: linear-gradient(180deg, #ffe600, #ff8c00); }

@keyframes nc-cascade-bob {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50% { transform: translateY(-5px); filter: brightness(1.25); }
}

#menu-screen .logo-title {
  font-family: Orbitron, system-ui, sans-serif;
  font-size: clamp(2.8rem, 11vw, 4.6rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #e8fbff;
  text-shadow:
    0 0 18px rgba(0, 245, 255, 0.55),
    0 0 48px rgba(0, 245, 255, 0.25);
  line-height: 0.95;
  margin: 0;
}

#menu-screen .logo-subtitle {
  font-family: Orbitron, system-ui, sans-serif;
  font-size: clamp(1.05rem, 3.6vw, 1.55rem);
  font-weight: 700;
  letter-spacing: 0.55em;
  color: #ff4d9a;
  text-shadow: 0 0 22px rgba(255, 56, 96, 0.45);
  margin: 0.2rem 0 0;
  padding-left: 0.2em;
}

#menu-screen .nc-menu-tagline {
  font-family: Orbitron, system-ui, sans-serif;
  font-size: clamp(0.72rem, 2.2vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(180, 220, 255, 0.72);
  margin: 0 0 1.6rem;
  line-height: 1.5;
}

#menu-screen .nc-menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: min(100%, 280px);
  margin: 0 auto;
}

#menu-screen .nc-menu-buttons .menu-btn {
  width: 100%;
  border-radius: 2px;
  font-family: Orbitron, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.75rem 1rem;
  border-width: 1px;
  background: rgba(6, 10, 28, 0.72);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

#menu-screen .nc-btn-primary {
  border-color: #00f5ff !important;
  color: #00f5ff !important;
  background: linear-gradient(90deg, rgba(0, 245, 255, 0.16), rgba(196, 77, 255, 0.12)) !important;
  box-shadow: 0 0 22px rgba(0, 245, 255, 0.18);
}

#menu-screen .nc-btn-primary:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(0, 245, 255, 0.35);
  background: linear-gradient(90deg, rgba(0, 245, 255, 0.28), rgba(196, 77, 255, 0.2)) !important;
}

#menu-screen .nc-btn-ghost {
  border-color: rgba(0, 245, 255, 0.28) !important;
  color: rgba(210, 230, 255, 0.88) !important;
}

#menu-screen .nc-btn-ghost:not(:disabled):hover {
  border-color: #c44dff !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(196, 77, 255, 0.2);
}

#menu-screen .nc-btn-lab {
  border-color: rgba(255, 230, 0, 0.35) !important;
  color: #ffe45c !important;
}

#menu-screen .nc-btn-lab:not(:disabled):hover {
  border-color: #ffe600 !important;
  box-shadow: 0 0 16px rgba(255, 230, 0, 0.22);
}

#menu-screen .nc-menu-link {
  margin-top: 1rem;
  font-family: Orbitron, system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: rgba(0, 245, 255, 0.7);
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
}

#menu-screen .nc-menu-link:hover {
  color: #00f5ff;
  text-shadow: 0 0 10px rgba(0, 245, 255, 0.4);
}

#menu-screen .menu-corner-btn {
  border-radius: 2px !important;
  border: 1px solid rgba(0, 245, 255, 0.35) !important;
  background: rgba(6, 10, 28, 0.85) !important;
  color: #00f5ff !important;
  box-shadow: none !important;
}

#menu-screen .menu-corner-btn--store {
  background: linear-gradient(135deg, rgba(0, 245, 255, 0.18), rgba(196, 77, 255, 0.2)) !important;
  border-color: rgba(196, 77, 255, 0.55) !important;
  color: #e8d0ff !important;
}

#menu-screen .menu-user-id {
  color: rgba(180, 220, 255, 0.75);
}

#menu-screen .menu-user-id-label {
  color: #00f5ff;
  font-family: Orbitron, system-ui, sans-serif;
  letter-spacing: 0.12em;
  font-size: 0.65rem;
}