/* == NEON BREAKOUT — cabinet & holo UI ===================================== */

:root {
  --void:       #04050c;
  --abyss:      #0a0e22;
  --panel:      rgba(10, 16, 40, 0.82);
  --pink:       #ff2d78;
  --cyan:       #22e0ff;
  --violet:     #a855f7;
  --lime:       #8dff4f;
  --amber:      #ff9f1c;
  --ink:        #cfe9ff;
  --ink-dim:    #5d7396;
  --display:    "Bahnschrift", "Avenir Next Condensed", "Arial Narrow", "Trebuchet MS", sans-serif;
  --mono:       ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

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

html, body {
  height: 100%;
  background: var(--void);
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 50% 120%, rgba(255, 45, 120, 0.07), transparent 60%),
    radial-gradient(900px 600px at 50% -10%, rgba(34, 224, 255, 0.06), transparent 60%),
    var(--void);
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

/* -- Cabinet ---------------------------------------------------------------- */

#cabinet {
  width: min(96vw, calc((100vh - 24px) * (900 / 780)));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* -- Holo panels (signature bezel: clipped corners + neon edge) ------------- */

.holo-panel {
  background: linear-gradient(180deg, rgba(20, 30, 66, 0.85), rgba(8, 12, 30, 0.85));
  border: 1px solid rgba(34, 224, 255, 0.28);
  box-shadow:
    0 0 14px rgba(34, 224, 255, 0.10),
    inset 0 0 22px rgba(34, 224, 255, 0.05);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 55%, calc(100% - 6px) 100%, 6px 100%, 0 55%);
  padding: 8px 26px;
  display: flex;
  align-items: center;
  gap: 22px;
}

#hud-top { justify-content: space-between; min-height: 52px; }
#hud-bottom { min-height: 58px; }

.hud-block { display: flex; flex-direction: column; line-height: 1.15; min-width: 70px; }
.hud-center { align-items: center; flex: 1; }

.hud-label {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
}
.hud-label kbd {
  font-family: var(--mono);
  font-size: 9px;
  border: 1px solid var(--ink-dim);
  border-radius: 3px;
  padding: 0 3px;
  color: var(--ink);
}

.hud-value {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  text-shadow: 0 0 8px rgba(34, 224, 255, 0.55);
  font-variant-numeric: tabular-nums;
}
.hud-value.dim { color: var(--ink-dim); text-shadow: none; }
.hud-value.level-name {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(34, 224, 255, 0.8);
}

.track-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}
.track-title:not(:empty)::before { content: '♪ '; color: var(--cyan); }

#hud-lives { letter-spacing: 3px; color: var(--pink); text-shadow: 0 0 9px rgba(255, 45, 120, 0.9); }
#hud-mult { color: var(--lime); text-shadow: 0 0 9px rgba(141, 255, 79, 0.7); }

/* -- Meters ------------------------------------------------------------------ */

.meter-block { flex: 1; display: flex; flex-direction: column; gap: 4px; max-width: 220px; }

.meter {
  height: 8px;
  background: rgba(5, 8, 20, 0.9);
  border: 1px solid rgba(93, 115, 150, 0.4);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  width: 0%;
  transition: width 90ms linear;
}
.meter.combo  .meter-fill { background: linear-gradient(90deg, #a855f7, #ff2d78); box-shadow: 0 0 10px #ff2d78; }
.meter.heat   .meter-fill { background: linear-gradient(90deg, #ff9f1c, #ff4517); box-shadow: 0 0 10px #ff5a1c; }
.meter.energy .meter-fill { background: linear-gradient(90deg, #22e0ff, #8dff4f); box-shadow: 0 0 10px #8dff4f; }
.meter.energy.full { animation: energy-pulse 0.8s ease-in-out infinite; }
@keyframes energy-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.7); }
}

/* -- Ability chips ------------------------------------------------------------ */

#hud-abilities { display: flex; gap: 8px; min-width: 210px; justify-content: flex-end; }

.ability-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 9px 4px;
  border: 1px solid currentColor;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: chip-in 0.25s ease-out;
  background: rgba(5, 8, 20, 0.85);
}
.ability-chip .chip-glyph { font-family: var(--mono); font-size: 15px; font-weight: 700; line-height: 1.1; }
.ability-chip .chip-timer {
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: currentColor; box-shadow: 0 0 6px currentColor;
}
@keyframes chip-in { from { transform: scale(1.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* -- Screen (canvas + CRT dressing) ------------------------------------------- */

#screen {
  position: relative;
  aspect-ratio: 900 / 640;
  border: 1px solid rgba(34, 224, 255, 0.35);
  box-shadow:
    0 0 30px rgba(34, 224, 255, 0.12),
    0 0 90px rgba(168, 85, 247, 0.10),
    inset 0 0 60px rgba(4, 5, 12, 0.9);
  background: var(--void);
}

/* animated corner brackets — part of the signature bezel */
#screen::before, #screen::after {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  pointer-events: none;
  z-index: 6;
  animation: bracket-breathe 2.6s ease-in-out infinite;
}
#screen::before {
  top: -2px; left: -2px;
  border-top: 2px solid var(--pink);
  border-left: 2px solid var(--pink);
  filter: drop-shadow(0 0 6px var(--pink));
}
#screen::after {
  bottom: -2px; right: -2px;
  border-bottom: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
  filter: drop-shadow(0 0 6px var(--cyan));
}
@keyframes bracket-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#scanlines {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.16) 3px,
    rgba(0, 0, 0, 0) 4px
  );
  mix-blend-mode: multiply;
}

#crt-roll {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(to bottom, transparent 0%, rgba(160, 220, 255, 0.045) 48%, transparent 100%);
  background-size: 100% 220px;
  background-repeat: no-repeat;
  animation: crt-roll 7s linear infinite;
  opacity: 0.9;
}
@keyframes crt-roll {
  from { background-position: 0 -240px; }
  to   { background-position: 0 calc(100% + 240px); }
}

/* glitch state applied to the whole screen on big events */
#screen.glitching #game { animation: screen-glitch 0.28s steps(2) infinite; }
@keyframes screen-glitch {
  0%   { transform: translate(0, 0); filter: none; }
  25%  { transform: translate(-3px, 1px); filter: hue-rotate(18deg) saturate(1.6); }
  50%  { transform: translate(2px, -2px) skewX(0.6deg); filter: hue-rotate(-14deg); }
  75%  { transform: translate(-1px, 2px); filter: saturate(2.2) contrast(1.15); }
}

/* -- Overlay screens (menus) --------------------------------------------------- */

.overlay {
  position: absolute; inset: 0;
  z-index: 8;
  display: none;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(70% 70% at 50% 45%, rgba(6, 9, 24, 0.55), rgba(4, 5, 12, 0.92));
  backdrop-filter: blur(2px);
}
.overlay.visible { display: flex; }

.menu-panel {
  text-align: center;
  padding: 34px 56px 30px;
  background: var(--panel);
  border: 1px solid rgba(34, 224, 255, 0.30);
  clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px),
                     calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);
  box-shadow: 0 0 40px rgba(34, 224, 255, 0.12), inset 0 0 40px rgba(34, 224, 255, 0.04);
  max-width: 640px;
}

.game-title {
  font-size: clamp(38px, 6vw, 58px);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.05;
  position: relative;
  color: var(--ink);
  text-shadow:
    0 0 18px rgba(34, 224, 255, 0.75),
    0 0 60px rgba(34, 224, 255, 0.35);
}
.game-title .accent { color: var(--pink); text-shadow: 0 0 18px rgba(255, 45, 120, 0.85), 0 0 60px rgba(255, 45, 120, 0.4); }

/* dual-layer chromatic glitch on the title */
.glitch-wrap { position: relative; display: inline-block; }
.glitch-wrap::before, .glitch-wrap::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.75;
}
.glitch-wrap::before { color: var(--cyan); animation: glitch-a 3.1s steps(1) infinite; }
.glitch-wrap::after  { color: var(--pink); animation: glitch-b 2.7s steps(1) infinite; }
@keyframes glitch-a {
  0%, 92%, 100% { transform: none; clip-path: inset(0 0 100% 0); opacity: 0; }
  93% { transform: translate(-3px, 1px); clip-path: inset(8% 0 62% 0); opacity: 0.7; }
  95% { transform: translate(3px, -1px);  clip-path: inset(55% 0 18% 0); opacity: 0.7; }
  97% { transform: translate(-2px, 0);   clip-path: inset(30% 0 40% 0); opacity: 0.6; }
}
@keyframes glitch-b {
  0%, 89%, 100% { transform: none; clip-path: inset(0 0 100% 0); opacity: 0; }
  90% { transform: translate(3px, 1px);  clip-path: inset(62% 0 8% 0); opacity: 0.7; }
  93% { transform: translate(-3px, 0);   clip-path: inset(12% 0 70% 0); opacity: 0.65; }
  96% { transform: translate(2px, -1px); clip-path: inset(42% 0 28% 0); opacity: 0.6; }
}

.menu-sub {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.menu-buttons { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; align-items: center; }

.neon-btn {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(34, 224, 255, 0.05);
  border: 1px solid rgba(34, 224, 255, 0.55);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  padding: 11px 42px;
  min-width: 280px;
  cursor: pointer;
  transition: background 120ms, color 120ms, box-shadow 120ms;
}
.neon-btn:hover, .neon-btn.focused {
  background: rgba(34, 224, 255, 0.18);
  color: #fff;
  box-shadow: 0 0 18px rgba(34, 224, 255, 0.5);
  outline: none;
}
.neon-btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.neon-btn.pink { color: var(--pink); border-color: rgba(255, 45, 120, 0.6); background: rgba(255, 45, 120, 0.06); }
.neon-btn.pink:hover, .neon-btn.pink.focused { background: rgba(255, 45, 120, 0.2); color: #fff; box-shadow: 0 0 18px rgba(255, 45, 120, 0.5); }
.neon-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.controls-hint {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.9;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
}
.controls-hint b { color: var(--ink); font-weight: 600; }

.stat-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 18px;
  font-family: var(--mono);
}
.stat-row .stat b { display: block; font-size: 26px; color: var(--cyan); text-shadow: 0 0 10px rgba(34,224,255,0.6); }
.stat-row .stat span { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-dim); }

/* -- Level select grid ---------------------------------------------------------- */

.level-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 24px;
}
.level-cell {
  position: relative;
  padding: 12px 8px 10px;
  border: 1px solid rgba(34, 224, 255, 0.35);
  background: rgba(34, 224, 255, 0.04);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  cursor: pointer;
  font-family: var(--display);
  color: var(--ink);
  transition: background 120ms, box-shadow 120ms;
  text-align: center;
}
.level-cell:hover:not(.locked), .level-cell.focused:not(.locked) {
  background: rgba(34, 224, 255, 0.16);
  box-shadow: 0 0 14px rgba(34, 224, 255, 0.4);
}
.level-cell .lv-no { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--cyan); }
.level-cell .lv-name { display: block; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 3px; color: var(--ink-dim); }
.level-cell.locked { opacity: 0.35; cursor: not-allowed; }
.level-cell.locked .lv-no { color: var(--ink-dim); }
.level-cell.boss .lv-no { color: var(--pink); }

/* -- In-game banners -------------------------------------------------------------- */

#banner {
  position: absolute;
  left: 0; right: 0; top: 38%;
  z-index: 5;
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
#banner.show { animation: banner-in 2.2s ease-out forwards; }
#banner .banner-title {
  font-size: 42px; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink); text-shadow: 0 0 24px var(--cyan);
}
#banner .banner-sub { font-size: 13px; letter-spacing: 0.55em; text-transform: uppercase; color: var(--ink-dim); margin-top: 6px; }
@keyframes banner-in {
  0% { opacity: 0; transform: scale(1.25); filter: blur(6px); }
  12% { opacity: 1; transform: scale(1); filter: none; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: scale(0.96); }
}

.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  #crt-roll, #screen::before, #screen::after { animation: none; }
  .glitch-wrap::before, .glitch-wrap::after { animation: none; opacity: 0; }
  #screen.glitching #game { animation: none; }
}