/* ============================================================
   NEON INVADERS — GamiPress Edition
   Design tokens (Nexus aangepast naar neon arcade-richting)
   ============================================================ */
/* Tokens alléén binnen de game (geen botsing met thema-variabelen) */
.si-frame {
  --font-display: 'Orbitron', 'Chakra Petch', sans-serif;
  --font-body: 'Chakra Petch', 'Inter', sans-serif;

  --color-bg: #06070d;
  --color-bg-deep: #04050a;
  --color-surface: rgba(16, 20, 38, 0.72);
  --color-surface-solid: #101426;
  --color-border: rgba(122, 240, 214, 0.18);
  --color-border-strong: rgba(122, 240, 214, 0.45);
  --color-text: #e8ecf8;
  --color-text-muted: #8b93b8;
  --color-primary: #4af0c0;      /* neon mint — speler, EXP */
  --color-accent: #ff3e9d;       /* neon magenta — vijanden, gevaar */
  --color-warning: #ffaa22;      /* bonus / UFO */
  --color-danger: #ff4466;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 28px;
  --text-2xl: 40px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px;

  --panel-blur: 12px;
  --panel-radius: 14px;
  --transition-ui: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset alléén binnen de game (breekt het WP-thema niet) */
.si-frame, .si-frame *, .si-wp-wrap, .si-wp-wrap * { box-sizing: border-box; margin: 0; padding: 0; }

/* Alleen op de standalone demo-pagina: pagina-achtergrond en centrering */
body.si-standalone {
  min-height: 100vh;
  background:
    radial-gradient(1200px 800px at 50% -10%, #0d1430 0%, #04050a 55%),
    #04050a;
  color: #e8ecf8;
  font-family: 'Chakra Petch', 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

/* WordPress-context: wrapper van de [neon_invaders] shortcode */
.si-wp-wrap { width: 100%; display: flex; justify-content: center; }

/* ---------- Frame ---------- */
.si-frame {
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.si-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--panel-radius);
  background: var(--color-surface);
  backdrop-filter: blur(var(--panel-blur));
}

.si-brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }

.si-logo {
  width: 34px; height: 34px; flex: 0 0 auto;
  color: var(--color-primary);
  filter: drop-shadow(0 0 6px rgba(74, 240, 192, 0.7));
}

.si-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.05;
  color: var(--color-primary);
  text-shadow: 0 0 14px rgba(74, 240, 192, 0.55);
}
.si-subtitle {
  font-size: var(--text-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.si-header-right { display: flex; align-items: center; gap: var(--space-2); }

.si-exp-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: rgba(74, 240, 192, 0.08);
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums lining-nums;
  text-shadow: 0 0 10px rgba(74, 240, 192, 0.5);
}
.si-exp-badge svg { width: 15px; height: 15px; }

.si-icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-ui), border-color var(--transition-ui);
}
.si-icon-btn:hover { color: var(--color-primary); border-color: var(--color-border-strong); }
.si-icon-btn.is-muted { color: var(--color-danger); }
.si-icon-btn svg { width: 20px; height: 20px; }

/* ---------- Stage ---------- */
.si-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 540 / 760;
  border: 1px solid var(--color-border);
  border-radius: var(--panel-radius);
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: 0 0 40px rgba(74, 240, 192, 0.06), inset 0 0 60px rgba(4, 5, 10, 0.8);
}

#game { display: block; width: 100%; height: 100%; }

/* ---------- Overlays ---------- */
.si-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  background: rgba(4, 5, 10, 0.78);
  backdrop-filter: blur(6px);
  z-index: 10;
  overflow-y: auto; /* paneel groter dan het speelveld? scrollbaar i.p.v. afgekapt */
  animation: siFadeIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.si-overlay[hidden] { display: none; }

@keyframes siFadeIn { from { opacity: 0; } to { opacity: 1; } }

.si-panel {
  width: min(420px, 100%);
  margin: auto; /* centreert, maar blijft bereikbaar als de overlay scrolt */
  text-align: center;
  padding: var(--space-6) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--panel-radius);
  background: var(--color-surface);
  backdrop-filter: blur(var(--panel-blur));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 30px rgba(74, 240, 192, 0.07);
}
.si-panel--small { width: min(320px, 100%); }

.si-kicker {
  font-size: var(--text-xs);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.si-kicker--danger { color: var(--color-danger); }

.si-display {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: var(--color-text);
  text-shadow: 0 0 22px rgba(74, 240, 192, 0.35);
  margin-bottom: var(--space-3);
}
.si-display--sm { font-size: var(--text-xl); }
.si-display--danger { color: var(--color-danger); text-shadow: 0 0 22px rgba(255, 68, 102, 0.4); }

.si-copy { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; margin-bottom: var(--space-4); }
.si-copy--dim { font-size: var(--text-xs); margin: var(--space-3) 0 0; }

/* ---------- Buttons ---------- */
.si-btn {
  display: inline-block;
  width: 100%;
  padding: 13px 20px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-ui), box-shadow var(--transition-ui), background var(--transition-ui);
  text-transform: uppercase;
}
.si-btn + .si-btn { margin-top: var(--space-2); }

.si-btn--primary {
  background: linear-gradient(180deg, #57ffd1, #23c9a0);
  color: #04251c;
  box-shadow: 0 0 24px rgba(74, 240, 192, 0.35);
}
.si-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 0 34px rgba(74, 240, 192, 0.55); }
.si-btn--primary:active { transform: translateY(1px); }
.si-btn--primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.si-btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.si-btn--ghost:hover { color: var(--color-text); border-color: var(--color-border-strong); }

kbd {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  padding: 2px 7px;
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
}

.si-controls-hint {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--text-xs); color: var(--color-text-muted);
}

/* ---------- Powerup-kaarten ---------- */
.si-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-1);
}

.si-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: transform var(--transition-ui), border-color var(--transition-ui), box-shadow var(--transition-ui);
  text-align: center;
}
.si-card:hover, .si-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 22px rgba(74, 240, 192, 0.25);
  outline: none;
}
.si-card--rare { border-color: rgba(255, 170, 34, 0.45); }
.si-card--rare:hover { border-color: var(--color-warning); box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 22px rgba(255, 170, 34, 0.3); }

.si-card-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(74, 240, 192, 0.1);
  color: var(--color-primary);
}
.si-card--rare .si-card-icon { background: rgba(255, 170, 34, 0.12); color: var(--color-warning); }
.si-card-icon svg { width: 24px; height: 24px; }

.si-card-name {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.25;
  min-height: 2.6em;
  display: flex; align-items: center;
  color: var(--color-text);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.si-card-desc { font-size: 11px; color: #b6bee0; line-height: 1.4; min-height: 3.1em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.si-card-level {
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 8px;
}
.si-card--rare .si-card-level { color: var(--color-warning); }

/* ---------- Highscores ---------- */
.si-lb-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--color-text-muted);
  margin: var(--space-3) 0 var(--space-1);
}
.si-lb {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 400px;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
}
.si-lb--compact { max-height: none; }
.si-lb-row {
  display: grid;
  grid-template-columns: 26px 1fr auto auto;
  align-items: center; gap: var(--space-2);
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--text-sm);
}
.si-lb-row--mine {
  border-color: var(--color-primary);
  background: rgba(74, 240, 192, 0.1);
  box-shadow: 0 0 14px rgba(74, 240, 192, 0.15);
}
.si-lb-rank {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  color: var(--color-text-muted);
}
.si-lb-row--mine .si-lb-rank { color: var(--color-primary); }
.si-lb-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.si-lb-waves { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.si-lb-score {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums lining-nums;
}
.si-lb-empty { font-size: var(--text-xs); color: var(--color-text-muted); padding: var(--space-3) 0; }
.si-lb-sep {
  text-align: center; color: var(--color-text-muted); font-size: 10px; letter-spacing: 0.4em;
  padding: 2px 0; user-select: none;
}

.si-name-row { display: flex; gap: var(--space-2); margin: 0 0 var(--space-2); }
.si-name-row[hidden] { display: none; }
.si-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  background: rgba(4, 5, 10, 0.7);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  outline: none;
}
.si-input:focus { border-color: var(--color-primary); box-shadow: 0 0 12px rgba(74, 240, 192, 0.25); }
.si-input::placeholder { color: var(--color-text-muted); }
.si-btn--inline { width: auto; flex: 0 0 auto; padding: 10px 16px; }
.si-btn--inline + .si-btn, .si-btn--inline + .si-btn--ghost { margin-top: 0; }

/* ---------- Stats (game over) ---------- */
.si-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-4);
}
.si-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.si-stat-value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-primary);
}
.si-stat-label { font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); }

.si-claim { margin-bottom: var(--space-3); }
.si-claim-msg { margin-top: var(--space-2); font-size: var(--text-xs); line-height: 1.5; color: #b9c1de; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }
.si-claim-msg.ok { color: var(--color-primary); }
.si-claim-msg.err { color: var(--color-danger); }

/* ---------- Toast ---------- */
.si-toast {
  position: absolute;
  left: 50%; bottom: 84px;
  transform: translateX(-50%);
  z-index: 20;
  padding: 10px 18px;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: rgba(8, 12, 24, 0.92);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: siToastIn 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.si-toast[hidden] { display: none; }
@keyframes siToastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- Touch controls ---------- */
.si-touch {
  position: absolute; inset: auto 0 0 0;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: var(--space-3);
  z-index: 15;
  pointer-events: none;
}
.si-touch[hidden] { display: none; }
.si-touch-btn {
  pointer-events: auto;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: rgba(8, 12, 24, 0.75);
  color: var(--color-primary);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.si-touch-btn svg { width: 30px; height: 30px; }
.si-touch-btn--fire { color: var(--color-accent); border-color: rgba(255, 62, 157, 0.5); width: 76px; height: 76px; }
.si-touch-btn:active { background: rgba(74, 240, 192, 0.15); }

/* ---------- Footer ---------- */
.si-footer { text-align: center; padding: var(--space-1) 0 var(--space-2); }
.si-footer p { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.05em; }

/* ---------- Responsive ---------- */
@media (max-height: 820px) {
  .si-title { font-size: var(--text-base); }
  .si-display { font-size: var(--text-xl); }
}
@media (max-width: 420px) {
  .si-cards { gap: 6px; }
  .si-card { padding: var(--space-2) 4px; }
  .si-card-name { font-size: 11px; }
}