/* === Fonts === */
@font-face {
  font-family: 'Orbitron';
  src: url('../assets/fonts/orbitron.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Audiowide';
  src: url('../assets/fonts/audiowide.woff2') format('woff2');
  font-display: swap;
}

/* === Base === */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #app {
  height: 100%;
  width: 100%;
  background: #08051a;
  overflow: hidden;
  font-family: 'Orbitron', monospace;
  color: #e8d8ff;
}
#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated; /* keep neon edges crisp */
}
#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* === Top center bar === */
.hud-topbar {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: max-content;
  padding: 10px 28px;
  background: linear-gradient(180deg, rgba(8,5,26,0.45), rgba(8,5,26,0.15));
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 4px;
  backdrop-filter: blur(2px);
  box-shadow:
    0 0 30px rgba(0, 229, 255, 0.18),
    inset 0 0 12px rgba(192, 32, 255, 0.10);
}
.hud-title {
  font-family: 'Audiowide', monospace;
  font-size: 22px;
  letter-spacing: 0.32em;
  color: #fff;
  text-shadow:
    0 0 10px #00e5ff,
    -1px 0 0 rgba(255,45,149,0.6),
    1px 0 0 rgba(0,229,255,0.6);
}
.hud-tier {
  font-family: 'Audiowide', monospace;
  font-size: 14px;
  letter-spacing: 0.4em;
  margin-top: 4px;
  color: #00e5ff;
  text-shadow: 0 0 14px #00e5ff;
}
.hud-mode {
  font-size: 11px;
  letter-spacing: 0.5em;
  color: #ff39c8;
  margin-top: 2px;
  text-shadow: 0 0 8px #ff39c8;
}

/* === Player panels === */
.hud-player {
  position: absolute;
  top: 16px;
  width: 240px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(26,8,64,0.65), rgba(8,5,26,0.45));
  border: 1px solid var(--tint);
  box-shadow:
    0 0 22px color-mix(in srgb, var(--tint) 35%, transparent),
    inset 0 0 16px color-mix(in srgb, var(--tint) 12%, transparent);
  /* corner brackets via clip-path */
  --c: 14px;
  clip-path: polygon(
    0 var(--c), var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    var(--c) 100%, 0 calc(100% - var(--c))
  );
}
.hud-player-left { left: 16px; }
.hud-player-right { right: 16px; }
.hud-out {
  filter: grayscale(0.85) brightness(0.55);
}
.hud-out .hud-out-badge { display: inline; }

.hud-player-header {
  font-family: 'Audiowide', monospace;
  font-size: 26px;
  color: var(--tint);
  text-shadow: 0 0 14px var(--tint);
  letter-spacing: 0.18em;
  margin-bottom: 4px;
}
.hud-player-bracket { color: rgba(255,255,255,0.6); margin: 0 4px; }
.hud-out-badge {
  display: none;
  background: #ff2d6d;
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  margin-left: 8px;
  letter-spacing: 0.2em;
  vertical-align: middle;
  text-shadow: none;
}
.hud-player-difficulty {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.7);
  margin-bottom: 12px;
}

.hud-section { margin-top: 10px; }
.hud-mini-label {
  font-family: 'Audiowide', monospace;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: rgba(255,255,255,0.55);
  margin-bottom: 6px;
}

.hud-hold {
  display: block;
  width: 120px;
  height: 120px;
  background: rgba(0,0,0,0.35);
  border: 1px dashed color-mix(in srgb, var(--tint) 60%, transparent);
}

.hud-next {
  display: flex;
  gap: 6px;
}
.hud-next-cell {
  display: block;
  width: 64px;
  height: 64px;
  background: rgba(0,0,0,0.3);
  border: 1px solid color-mix(in srgb, var(--tint) 30%, transparent);
}

.hud-stats { margin-top: 14px; }
.hud-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  letter-spacing: 0.2em;
  margin-top: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 2px;
}
.hud-stat-k { color: rgba(255,255,255,0.55); }
.hud-stat-v {
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  font-size: 18px;
  color: var(--tint);
  text-shadow: 0 0 10px var(--tint);
  font-variant-numeric: tabular-nums;
}

/* === Combo flash === */
.hud-combo {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  font-family: 'Audiowide', monospace;
  font-size: 56px;
  letter-spacing: 0.16em;
  color: #fff;
  opacity: 0;
  text-shadow:
    0 0 18px #ff2d95,
    0 0 36px #ff2d95,
    -2px 0 0 rgba(0, 229, 255, 0.7),
    2px 0 0 rgba(255, 45, 149, 0.7);
  transition: opacity 200ms ease, transform 200ms ease;
}
.hud-combo-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  animation: comboFlash 1100ms forwards ease-out;
}
@keyframes comboFlash {
  0%   { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.9); }
  20%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1.0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.95); }
}