/* =========================================================
   DNBKompilacija#009 — Invaders mini-game overlay
   Consumes tokens.css variables. Self-contained.
   ========================================================= */

.dnbk-invaders-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, 'Press Start 2P', monospace);
  color: var(--color-text, #f4efe6);
  /* subtle scanline wash to match arcade chrome */
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(61, 255, 154, 0.04) 0 2px,
      transparent 2px 4px
    );
}

.dnbk-invaders-panel {
  position: relative;
  width: min(960px, 96vw);
  max-height: 92vh;
  background: var(--color-bg, #0b1410);
  border: 2px solid var(--color-primary, #3dff9a);
  box-shadow: var(--sh-pixel-md, 4px 4px 0 0 #4b00b3);
  padding: var(--sp-2, 8px);
  display: flex;
  flex-direction: column;
  outline: none;
}

.dnbk-invaders-panel__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3, 16px);
  padding: var(--sp-1, 4px) var(--sp-2, 8px) var(--sp-2, 8px);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary, #3dff9a);
  border-bottom: 2px dashed var(--color-line, #2a463f);
  margin-bottom: var(--sp-2, 8px);
}

.dnbk-invaders-panel__title {
  font-family: var(--font-display, 'Press Start 2P', monospace);
  flex: 0 0 auto;
}

.dnbk-invaders-panel__close {
  font-family: var(--font-display, 'Press Start 2P', monospace);
  background: transparent;
  color: var(--color-primary, #3dff9a);
  border: 2px solid var(--color-primary, #3dff9a);
  padding: var(--sp-1, 4px) var(--sp-2, 8px);
  font-size: 10px;
  cursor: pointer;
  flex: 0 0 auto;
}
.dnbk-invaders-panel__close:hover,
.dnbk-invaders-panel__close:focus-visible {
  background: var(--color-primary, #3dff9a);
  color: var(--color-bg, #0b1410);
  outline: none;
}

/* ---------- BGM strip in the top bar ---------- */
.dnbk-invaders-bgm {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-xs, 12px);
  color: var(--color-text-dim, #8a8c83);
  overflow: hidden;
}
.dnbk-invaders-bgm__label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-primary, #3dff9a);
}
.dnbk-invaders-bgm__link {
  font-family: var(--font-display, 'Press Start 2P', monospace);
  font-size: 9px;
  color: var(--color-accent, #7a1fff);
  text-decoration: none;
  flex: 0 0 auto;
}
.dnbk-invaders-bgm__link:hover,
.dnbk-invaders-bgm__link:focus-visible { text-decoration: underline; }
.dnbk-invaders-bgm__mute {
  font-family: var(--font-display, 'Press Start 2P', monospace);
  background: transparent;
  color: var(--color-primary, #3dff9a);
  border: 2px solid var(--color-primary, #3dff9a);
  padding: 2px var(--sp-2, 8px);
  font-size: 10px;
  cursor: pointer;
  flex: 0 0 auto;
}
.dnbk-invaders-bgm__mute:hover,
.dnbk-invaders-bgm__mute:focus-visible {
  background: var(--color-primary, #3dff9a);
  color: var(--color-bg, #0b1410);
  outline: none;
}

/* ---------- Stage layout: playfield + leaderboard ---------- */
.dnbk-invaders-stage {
  display: flex;
  gap: var(--sp-2, 8px);
  flex: 1 1 auto;
  min-height: 0;
}
.dnbk-invaders-playfield {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dnbk-invaders-canvas {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  max-height: 70vh;
  display: block;
  background: var(--color-bg, #0b1410);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
}

/* ---------- Leaderboard ---------- */
.dnbk-invaders-lb {
  flex: 0 0 380px;
  background: var(--color-surface, #142420);
  border: 2px solid var(--color-line, #2a463f);
  padding: var(--sp-2, 8px) var(--sp-3, 16px);
  overflow-y: auto;
  font-family: var(--font-display, 'Press Start 2P', monospace);
  color: var(--color-primary, #3dff9a);
}
.dnbk-invaders-lb__title {
  margin: 0 0 var(--sp-3, 16px);
  font-size: var(--fs-xs, 12px);
  letter-spacing: 0.16em;
  color: var(--color-primary, #3dff9a);
  border-bottom: 2px dashed var(--color-line, #2a463f);
  padding-bottom: var(--sp-2, 8px);
}
.dnbk-invaders-lb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 10px;
  line-height: 1.6;
}
.dnbk-invaders-lb__list li {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  gap: var(--sp-2, 8px);
  padding: var(--sp-1, 4px) 0;
  border-bottom: 1px dotted var(--color-line, #2a463f);
}
.dnbk-invaders-lb__rank { color: var(--color-text-dim, #8a8c83); }
.dnbk-invaders-lb__name {
  color: var(--color-primary, #3dff9a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dnbk-invaders-lb__score { color: var(--color-text, #f4efe6); }
.dnbk-invaders-lb__wave  { color: var(--color-accent, #7a1fff); }
.dnbk-invaders-lb__empty {
  color: var(--color-text-dim, #8a8c83);
  font-size: 10px;
  list-style: none;
  padding: var(--sp-2, 8px) 0;
}

/* ---------- Game-over card (overlays the playfield) ---------- */
.dnbk-invaders-over {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 20, 16, 0.86);
  z-index: 2;
}
.dnbk-invaders-over[hidden] { display: none; }

.dnbk-invaders-over__card {
  background: var(--color-bg, #0b1410);
  border: 2px solid var(--color-primary, #3dff9a);
  box-shadow: var(--sh-pixel-md, 4px 4px 0 0 #4b00b3);
  padding: var(--sp-4, 24px);
  width: min(420px, 90%);
  text-align: center;
  font-family: var(--font-display, 'Press Start 2P', monospace);
  color: var(--color-text, #f4efe6);
}
.dnbk-invaders-over__title {
  margin: 0 0 var(--sp-3, 16px);
  font-size: var(--fs-lg, 20px);
  color: var(--color-danger, #ff2e4d);
  letter-spacing: 0.08em;
}
.dnbk-invaders-over__stats {
  margin: 0 0 var(--sp-3, 16px);
  font-size: var(--fs-xs, 12px);
  color: var(--color-primary, #3dff9a);
  line-height: 1.8;
}
.dnbk-invaders-over__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
  align-items: stretch;
}
.dnbk-invaders-over__label {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--color-text-dim, #8a8c83);
  text-align: left;
}
.dnbk-invaders-over__input {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-sm, 14px);
  background: var(--color-surface, #142420);
  color: var(--color-primary, #3dff9a);
  border: 2px solid var(--color-primary, #3dff9a);
  padding: var(--sp-2, 8px) var(--sp-3, 16px);
  outline: none;
}
.dnbk-invaders-over__input::placeholder { color: var(--color-text-dim, #8a8c83); }
.dnbk-invaders-over__input:focus-visible {
  border-color: var(--color-accent, #7a1fff);
  box-shadow: 0 0 0 2px var(--color-accent, #7a1fff);
}
.dnbk-invaders-over__err {
  margin: 0;
  font-size: 10px;
  color: var(--color-danger, #ff2e4d);
}
.dnbk-invaders-over__btns {
  display: flex;
  gap: var(--sp-2, 8px);
  justify-content: center;
  margin-top: var(--sp-2, 8px);
}
.dnbk-invaders-over__btn {
  font-family: var(--font-display, 'Press Start 2P', monospace);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: var(--sp-2, 8px) var(--sp-3, 16px);
  background: var(--color-primary, #3dff9a);
  color: var(--color-bg, #0b1410);
  border: 2px solid var(--color-primary, #3dff9a);
  cursor: pointer;
  box-shadow: var(--sh-pixel-sm, 2px 2px 0 0 #4b00b3);
}
.dnbk-invaders-over__btn:hover,
.dnbk-invaders-over__btn:focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 0 var(--color-accent-deep, #4b00b3);
  outline: none;
}
.dnbk-invaders-over__btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0; }
.dnbk-invaders-over__btn:disabled { opacity: 0.5; cursor: wait; }
.dnbk-invaders-over__btn--ghost {
  background: transparent;
  color: var(--color-primary, #3dff9a);
}
.dnbk-invaders-over__after {
  text-align: center;
  font-family: var(--font-display, 'Press Start 2P', monospace);
}
.dnbk-invaders-over__you {
  margin: 0 0 var(--sp-3, 16px);
  font-size: var(--fs-xs, 12px);
  color: var(--color-primary, #3dff9a);
  word-break: break-all;
}
.dnbk-invaders-over__hint {
  margin: 0;
  font-size: 10px;
  color: var(--color-text-dim, #8a8c83);
  letter-spacing: 0.12em;
}

/* ---------- Narrow screens: stack leaderboard below ---------- */
@media (max-width: 800px) {
  .dnbk-invaders-stage { flex-direction: column; }
  .dnbk-invaders-lb { flex: 0 0 auto; max-height: 30vh; }
  .dnbk-invaders-panel { width: 96vw; }
}

@media (prefers-reduced-motion: reduce) {
  .dnbk-invaders-backdrop {
    background-image: none;
  }
  .dnbk-invaders-over__btn { transition: none; }
  .dnbk-invaders-over__btn:hover,
  .dnbk-invaders-over__btn:active { transform: none; }
}