/* ═══════════════════════════════════════════
   NEON ASSAULT v6 — styles.css
   ═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Share+Tech+Mono&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #020209;
  --cyan: #00f7ff;
  --yellow: #ffe740;
  --red: #ff3a5c;
  --green: #39ff7a;
  --purple: #bf5fff;
  --orange: #ff8c00;
  --pink: #ff69b4;
  --white: #e8f4ff;
  --f1: 'Orbitron', sans-serif;
  --f2: 'Share Tech Mono', monospace;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#gc {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#c {
  display: block;
  touch-action: none;
}

/* ══ HUD ══ */
#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--f1);
}

#h-left {
  position: absolute;
  top: 12px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hstat {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.hlbl {
  font-size: 8px;
  letter-spacing: 2.5px;
  color: var(--cyan);
  opacity: .58;
}

#hv-score {
  font-size: clamp(18px, 4.5vw, 26px);
  font-weight: 900;
  color: var(--white);
  text-shadow: 0 0 10px var(--cyan);
}

#hv-lives {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--cyan);
  opacity: .9;
}

#hv-coins {
  font-size: 13px;
  font-weight: 700;
  color: var(--yellow);
  text-shadow: 0 0 7px var(--yellow);
}

#hv-tier {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--cyan);
}

#h-center {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--purple);
  opacity: .85;
  white-space: nowrap;
}

#h-right {
  position: absolute;
  top: 12px;
  right: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: all;
}

#hv-best {
  font-size: 16px;
  font-weight: 700;
  color: var(--yellow);
  text-shadow: 0 0 7px var(--yellow);
}

#btn-pause {
  background: rgba(0, 247, 255, .08);
  border: 1px solid rgba(0, 247, 255, .22);
  color: var(--cyan);
  font-size: 14px;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
  font-family: var(--f1);
  pointer-events: all;
}

#btn-pause:hover {
  background: rgba(0, 247, 255, .18);
}

#h-boss {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(200px, 55vw, 340px);
  background: rgba(2, 2, 9, .78);
  border-bottom: 1px solid rgba(255, 58, 92, .28);
  padding: 8px 12px 7px;
  display: none;
  flex-direction: column;
  gap: 4px;
}

#h-boss.show {
  display: flex;
}

#h-boss-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#h-boss-lbl {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--red);
}

#h-boss-pct {
  font-size: 9px;
  color: var(--red);
  opacity: .72;
}

#h-boss-track {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, .1);
  border-radius: 3px;
  overflow: hidden;
}

#h-boss-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--red), var(--orange));
  border-radius: 3px;
  transition: width .12s, background .3s;
}

#h-combo {
  position: absolute;
  bottom: 108px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: opacity .22s;
}

#h-combo.hidden {
  opacity: 0;
  pointer-events: none;
}

#hv-combo {
  font-size: clamp(24px, 6.5vw, 34px);
  font-weight: 900;
  color: var(--yellow);
  text-shadow: 0 0 18px var(--yellow), 0 0 36px #ff9900;
}

#h-combo-track {
  width: 68px;
  height: 3px;
  background: rgba(255, 255, 255, .12);
  border-radius: 2px;
  overflow: hidden;
}

#h-combo-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--yellow), #ff9900);
  border-radius: 2px;
  transition: width .05s linear;
}

#h-putray {
  position: absolute;
  bottom: 68px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  pointer-events: none;
}

.pu-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(2, 2, 9, .88);
  border-radius: 18px;
  border: 1px solid currentColor;
  font-family: var(--f2);
  font-size: 10px;
  box-shadow: 0 0 7px currentColor;
}

.pu-chip.spread {
  color: var(--green);
}

.pu-chip.rapid {
  color: var(--yellow);
}

.pu-chip.shield {
  color: var(--purple);
}

.pu-chip.laser {
  color: var(--cyan);
}

.pu-chip.bomb {
  color: var(--orange);
}

.pu-chip.magnet {
  color: var(--pink);
}

.pu-tbar {
  width: 38px;
  height: 3px;
  background: rgba(255, 255, 255, .14);
  border-radius: 2px;
  overflow: hidden;
}

.pu-tfill {
  height: 100%;
  border-radius: 2px;
}

#boss-div {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, transparent 0, transparent 7px, rgba(255, 58, 92, .5) 7px, rgba(255, 58, 92, .5) 14px);
  display: none;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(255, 58, 92, .4);
}

#boss-div.show {
  display: block;
}

/* ══ SCREENS ══ */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 2, 9, .92);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
}

.screen.on {
  opacity: 1;
  pointer-events: all;
}

.sc {
  text-align: center;
  font-family: var(--f1);
  padding: 16px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

/* ── Menu shared ── */
.menu-sc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.logo {
  font-size: clamp(48px, 12vw, 80px);
  font-weight: 900;
  letter-spacing: 10px;
  color: var(--cyan);
  line-height: 1;
  text-shadow: 0 0 28px var(--cyan), 0 0 56px var(--cyan);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-sub {
  font-size: clamp(14px, 3.5vw, 22px);
  letter-spacing: 16px;
  color: var(--white);
  opacity: .38;
}

.stags {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

.stags span {
  font-family: var(--f2);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--cyan);
  opacity: .7;
  background: rgba(0, 247, 255, .07);
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0, 247, 255, .18);
}

.menu-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
  width: 100%;
  max-width: 280px;
  align-self: center;
  align-items: stretch;
}

.mbtn {
  font-family: var(--f1);
  font-size: 12px;
  letter-spacing: 3px;
  font-weight: 700;
  background: rgba(0, 247, 255, .06);
  border: 1px solid rgba(0, 247, 255, .25);
  color: var(--cyan);
  padding: 12px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .1s;
  width: 100%;
  text-align: center;
}

.mbtn:hover,
.mbtn:active {
  background: rgba(0, 247, 255, .16);
  box-shadow: 0 0 14px rgba(0, 247, 255, .3);
  transform: scale(1.02);
}

.mbtn-primary {
  background: rgba(0, 247, 255, .12);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 18px rgba(0, 247, 255, .2);
  font-size: 14px;
}

.blink-border {
  animation: blinkBorder 1.1s step-end infinite;
}

@keyframes blinkBorder {

  0%,
  100% {
    box-shadow: 0 0 18px rgba(0, 247, 255, .4);
  }

  50% {
    box-shadow: 0 0 4px rgba(0, 247, 255, .1);
  }
}

.best-ln {
  font-family: var(--f2);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--yellow);
  opacity: .65;
  margin-top: 14px;
}

/* ── Wave / Boss screens ── */
.wnum {
  font-size: clamp(24px, 6.5vw, 38px);
  font-weight: 900;
  letter-spacing: 5px;
  color: var(--cyan);
  text-shadow: 0 0 20px var(--cyan);
}

.whint {
  font-family: var(--f2);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--white);
  opacity: .5;
  margin-top: 9px;
}

#s-wave .sc,
#s-bwarn .sc {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bw-icon {
  font-size: 44px;
  animation: bwarn .5s step-end infinite;
}

@keyframes bwarn {
  50% {
    opacity: 0;
  }
}

.bw-title {
  font-size: clamp(42px, 10.5vw, 68px);
  font-weight: 900;
  letter-spacing: 8px;
  color: var(--red);
  text-shadow: 0 0 28px var(--red);
}

.bw-sub {
  font-size: clamp(16px, 4vw, 24px);
  letter-spacing: 12px;
  color: var(--orange);
  margin-top: 5px;
}

.bw-hint {
  font-family: var(--f2);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--white);
  opacity: .44;
  margin-top: 14px;
}

/* ── Dead screen ── */
.dead-hd {
  font-size: clamp(32px, 8.5vw, 56px);
  font-weight: 900;
  letter-spacing: 6px;
  color: var(--red);
  text-shadow: 0 0 28px var(--red);
}

.dead-lbl {
  font-family: var(--f2);
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--white);
  opacity: .42;
  margin-top: 18px;
}

.dead-score {
  font-size: clamp(42px, 10vw, 70px);
  font-weight: 900;
  color: var(--white);
  text-shadow: 0 0 16px var(--cyan);
  line-height: 1.1;
  margin-top: 4px;
}

.dead-meta {
  font-family: var(--f2);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--white);
  opacity: .48;
  margin-top: 8px;
}

.dead-best {
  font-family: var(--f2);
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--yellow);
  min-height: 20px;
  margin-top: 6px;
  text-shadow: 0 0 8px var(--yellow);
}

#s-dead .sc {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Pause screen ── */
.pause-title {
  font-size: clamp(32px, 8vw, 52px);
  font-weight: 900;
  letter-spacing: 8px;
  color: var(--cyan);
  text-shadow: 0 0 24px var(--cyan);
  margin-bottom: 8px;
}

#s-pause .sc {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Panel screens (settings, howto, shop) ── */
.panel-sc {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  max-height: 100%;
  overflow-y: auto;
  width: 100%;
}

.panel-title {
  font-size: clamp(18px, 4.5vw, 26px);
  font-weight: 900;
  letter-spacing: 5px;
  color: var(--cyan);
  text-shadow: 0 0 18px var(--cyan);
  margin-bottom: 20px;
  flex-shrink: 0;
}

/* ── Settings ── */
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 320px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 247, 255, .1);
}

.sett-lbl {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--white);
  opacity: .72;
}

.slider-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100px;
  height: 3px;
  background: rgba(0, 247, 255, .2);
  border-radius: 2px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--cyan);
}

.slider-val {
  font-family: var(--f2);
  font-size: 10px;
  color: var(--cyan);
  width: 24px;
  text-align: right;
}

.toggle-btn {
  font-family: var(--f1);
  font-size: 9px;
  letter-spacing: 2px;
  background: rgba(57, 255, 122, .1);
  border: 1px solid var(--green);
  color: var(--green);
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s;
}

.toggle-btn.off {
  background: rgba(255, 58, 92, .08);
  border-color: rgba(255, 58, 92, .4);
  color: rgba(255, 58, 92, .6);
}

/* ── How to play ── */
.howto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 340px;
  margin-bottom: 16px;
}

.howto-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--f2);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--white);
  opacity: .72;
  text-align: left;
  background: rgba(0, 247, 255, .04);
  padding: 8px;
  border-radius: 6px;
  border: 1px solid rgba(0, 247, 255, .1);
}

.hi-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.howto-pu {
  width: 100%;
  max-width: 340px;
}

.howto-pu-title {
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--cyan);
  opacity: .6;
  margin-bottom: 8px;
}

.howto-pu-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  font-family: var(--f2);
  font-size: 10px;
  letter-spacing: 0.5px;
}

.howto-pu-list span {
  background: rgba(255, 255, 255, .04);
  padding: 5px 8px;
  border-radius: 4px;
  text-align: left;
}

/* ── Ship shop ── */
.shop-sc {
  gap: 12px;
}

.shop-wallet {
  font-family: var(--f2);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--yellow);
  text-shadow: 0 0 8px var(--yellow);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 380px;
}

.skin-card {
  background: rgba(0, 247, 255, .05);
  border: 1px solid rgba(0, 247, 255, .18);
  border-radius: 8px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .1s;
  position: relative;
}

.skin-card:hover {
  background: rgba(0, 247, 255, .1);
  transform: scale(1.03);
}

.skin-card.selected {
  border-color: var(--green);
  box-shadow: 0 0 14px rgba(57, 255, 122, .35);
  background: rgba(57, 255, 122, .08);
}

.skin-card.locked {
  opacity: 0.55;
  cursor: default;
}

.skin-card.locked:hover {
  transform: none;
  background: rgba(0, 247, 255, .05);
}

.skin-canvas {
  width: 52px;
  height: 52px;
}

.skin-name {
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--white);
  opacity: .8;
}

.skin-price {
  font-family: var(--f2);
  font-size: 9px;
  color: var(--yellow);
}

.skin-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 10px;
  line-height: 1;
}

.skin-owned-lbl {
  font-family: var(--f2);
  font-size: 8px;
  color: var(--green);
  letter-spacing: 1px;
}

.blink {
  animation: blink 1.1s step-end infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* ── Skip hint ── */
.skip-hint {
  font-family: var(--f2);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--white);
  opacity: .32;
  margin-top: 14px;
  animation: pulse-fade 1.4s ease-in-out infinite;
}

@keyframes pulse-fade {

  0%,
  100% {
    opacity: .32
  }

  50% {
    opacity: .55
  }
}

/* ── In-game onboarding overlay ── */
#onboarding {
  position: absolute;
  bottom: 130px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: all;
  transition: opacity .4s;
}

#onboarding.hidden {
  opacity: 0;
  pointer-events: none;
}

#ob-inner {
  background: rgba(2, 2, 9, .88);
  border: 1px solid rgba(0, 247, 255, .28);
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 0 22px rgba(0, 247, 255, .12);
}

.ob-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f1);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--cyan);
}

.ob-icon {
  font-size: 20px;
  width: 26px;
  text-align: center;
}

.ob-text {
  color: var(--white);
  opacity: .8;
}

.ob-kbd {
  gap: 4px;
  font-family: var(--f2);
  font-size: 10px;
  color: var(--white);
  opacity: .7;
  flex-wrap: wrap;
  justify-content: center;
}

.kbd {
  background: rgba(0, 247, 255, .12);
  border: 1px solid rgba(0, 247, 255, .35);
  border-radius: 3px;
  padding: 2px 6px;
  font-family: var(--f2);
  font-size: 9px;
  color: var(--cyan);
}

.ob-slash,
.ob-sep {
  opacity: .4;
}

.ob-label {
  color: var(--white);
  opacity: .55;
  letter-spacing: 1px;
  margin-left: 4px;
}

.ob-skip {
  font-family: var(--f1);
  font-size: 8px;
  letter-spacing: 2px;
  background: rgba(57, 255, 122, .1);
  border: 1px solid rgba(57, 255, 122, .35);
  color: var(--green);
  padding: 5px 14px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 4px;
  transition: background .15s;
}

.ob-skip:hover {
  background: rgba(57, 255, 122, .22);
}

@media(max-width:440px) {
  #onboarding.hidden {
    opacity: 0;
    pointer-events: none;
  }

  .skip-hint {
    font-size: 8px;
  }
}

@media(max-width:440px) {
  #hv-score {
    font-size: 18px;
  }

  #hv-combo {
    font-size: 22px;
  }

  #h-combo {
    bottom: 88px;
  }

  #h-putray {
    bottom: 52px;
  }

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

  .menu-btns {
    max-width: 240px;
  }

  .mbtn {
    font-size: 11px;
    padding: 10px 14px;
  }

  .logo {
    font-size: clamp(36px, 10vw, 64px);
  }

  .dead-score {
    font-size: clamp(34px, 8vw, 56px);
  }

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

  .howto-pu-list {
    grid-template-columns: 1fr;
  }
}

/* Small height (landscape mobile, 450px height) */
@media(max-height:520px) {
  .menu-sc {
    gap: 0;
  }

  .stags {
    display: none;
  }

  .menu-btns {
    margin-top: 14px;
    gap: 6px;
  }

  .mbtn {
    padding: 8px 14px;
  }

  .logo {
    font-size: clamp(28px, 8vw, 48px);
  }

  .best-ln {
    margin-top: 8px;
  }

  .panel-sc {
    padding: 10px 14px;
  }

  .panel-title {
    margin-bottom: 10px;
    font-size: clamp(14px, 3.5vw, 20px);
  }

  .setting-row {
    padding: 6px 0;
  }

  .dead-lbl {
    margin-top: 10px;
  }

  .dead-score {
    font-size: clamp(30px, 7vw, 48px);
  }

  #s-dead .sc .menu-btns {
    margin-top: 12px;
  }

  .howto-grid {
    gap: 6px;
  }

  .howto-item {
    padding: 5px;
  }
}