/* ===== Superkrachten - Kenney-stijl Pixel UI ===== */

:root {
  --c-bg: #1a1530;
  --c-bg-light: #2a2444;
  --c-panel: #3b3461;
  --c-text: #f8f4e8;
  --c-text-dim: #b8b0d0;
  --c-accent: #ffd54f;
  --c-accent-hover: #ffe082;
  --c-danger: #e53935;
  --c-success: #66bb6a;
  --c-warn: #fb8c00;
  --c-blue: #42a5f5;
  --c-purple: #ab47bc;

  --hp-full: #66bb6a;
  --hp-mid: #ffd54f;
  --hp-low: #e53935;

  --pixel-border: 4px solid #000;
  --pixel-shadow: 0 4px 0 #000;
}

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

html, body {
  height: 100%;
  width: 100%;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: 'Trebuchet MS', 'Verdana', sans-serif;
  font-size: 16px;
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

body {
  background:
    radial-gradient(ellipse at top, #2a2444 0%, #1a1530 60%),
    var(--c-bg);
}

#app {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fade-in 0.4s ease;
}

@keyframes fade-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== Buttons (Kenney pixel-style) ===== */

.btn {
  display: inline-block;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 18px;
  font-weight: bold;
  color: #000;
  background: var(--c-accent);
  border: var(--pixel-border);
  border-radius: 0;
  box-shadow: var(--pixel-shadow);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
  text-transform: uppercase;
  letter-spacing: 1px;
  image-rendering: pixelated;
}

.btn:hover:not(:disabled) {
  background: var(--c-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #000;
}

.btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #000;
}

.btn:disabled {
  background: #555;
  color: #888;
  cursor: not-allowed;
  box-shadow: 0 2px 0 #000;
}

.btn-big {
  font-size: 24px;
  padding: 18px 36px;
}

.btn-secondary {
  background: var(--c-blue);
  color: #fff;
}
.btn-secondary:hover:not(:disabled) { background: #64b5f6; }

.btn-danger {
  background: var(--c-danger);
  color: #fff;
}
.btn-danger:hover:not(:disabled) { background: #ef5350; }

/* ===== Title scene ===== */

.title-scene {
  background:
    radial-gradient(ellipse at center, rgba(255,213,79,0.18) 0%, transparent 60%),
    radial-gradient(ellipse at top, #2a2444 0%, #1a1530 60%);
  overflow: hidden;
}

/* Animated starfield overlay */
.title-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent 50%),
    radial-gradient(1px 1px at 28% 8%, #fff, transparent 50%),
    radial-gradient(1.5px 1.5px at 44% 26%, #ffd54f, transparent 50%),
    radial-gradient(1px 1px at 62% 14%, #fff, transparent 50%),
    radial-gradient(1px 1px at 78% 22%, #fff, transparent 50%),
    radial-gradient(1.5px 1.5px at 88% 10%, #fff, transparent 50%),
    radial-gradient(1px 1px at 22% 70%, #aa3df5, transparent 50%),
    radial-gradient(1px 1px at 58% 78%, #fff, transparent 50%),
    radial-gradient(1px 1px at 84% 68%, #00ddff, transparent 50%);
  background-repeat: no-repeat;
  animation: starshine 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes starshine {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Floating particles */
.title-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 200px at 50% 85%, rgba(170, 61, 245, 0.2), transparent 70%),
    radial-gradient(ellipse 400px 150px at 50% 100%, rgba(255, 107, 0, 0.15), transparent 70%);
  pointer-events: none;
}

.title-logo {
  font-size: 96px;
  font-weight: 900;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--c-accent);
  text-shadow:
    0 0 8px rgba(255, 213, 79, 0.5),
    4px 4px 0 #000,
    -2px -2px 0 #c44,
    8px 8px 24px rgba(0, 0, 0, 0.6);
  margin-bottom: 8px;
  text-align: center;
  animation: title-bob 3s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

@keyframes title-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.title-subtitle {
  font-size: 20px;
  color: var(--c-text-dim);
  margin-bottom: 48px;
  text-align: center;
  letter-spacing: 2px;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.title-heroes {
  display: flex;
  gap: 24px;
  margin-bottom: 48px;
  position: relative;
  z-index: 2;
}
.title-heroes .sprite {
  width: 110px;
  height: 110px;
  position: relative;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}
/* Glow under each hero */
.title-heroes .sprite::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 10%;
  right: 10%;
  height: 14px;
  background: radial-gradient(ellipse at center, rgba(255, 213, 79, 0.3), transparent 70%);
  border-radius: 50%;
  z-index: -1;
}
/* Individual idle animations per hero */
.title-heroes .sprite:nth-child(1) {
  animation: hero-bob 2.2s ease-in-out infinite;
}
.title-heroes .sprite:nth-child(2) {
  animation: hero-bob 2.4s ease-in-out infinite;
  animation-delay: -0.4s;
}
.title-heroes .sprite:nth-child(3) {
  animation: hero-bob 1.6s ease-in-out infinite; /* Bliksem - faster */
}
.title-heroes .sprite:nth-child(4) {
  animation: hero-bob-heavy 3s ease-in-out infinite; /* Kool - slower */
}
.title-heroes .sprite:nth-child(5) {
  animation: hero-float 3.5s ease-in-out infinite; /* Maanfee - floats more */
}
@keyframes hero-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes hero-bob-heavy {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.02); }
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

.title-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

/* ===== Intro scene ===== */

.intro-scene {
  justify-content: space-between;
  padding: 60px;
}

.intro-text {
  max-width: 800px;
  background: var(--c-panel);
  border: var(--pixel-border);
  box-shadow: var(--pixel-shadow);
  padding: 32px;
  font-size: 22px;
  line-height: 1.6;
  text-align: center;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-progress {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.intro-progress .dot {
  width: 12px; height: 12px;
  background: #555;
  border: 2px solid #000;
}
.intro-progress .dot.active { background: var(--c-accent); }

/* ===== Powers scene ===== */

.powers-scene {
  justify-content: flex-start;
  padding-top: 24px;
}

.powers-title {
  font-size: 32px;
  margin-bottom: 8px;
  color: var(--c-accent);
  text-shadow: 3px 3px 0 #000;
}

.powers-subtitle {
  color: var(--c-text-dim);
  margin-bottom: 16px;
  font-size: 16px;
}

.powers-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.powers-tab {
  background: var(--c-bg-light);
  border: var(--pixel-border);
  padding: 8px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: bold;
  position: relative;
}
.powers-tab .sprite { width: 36px; height: 36px; }
.powers-tab.active {
  background: var(--c-accent);
  color: #000;
  transform: translateY(-2px);
}
.powers-tab.done::after {
  content: "✓";
  position: absolute;
  top: -10px; right: -10px;
  width: 22px; height: 22px;
  background: var(--c-success);
  border: 2px solid #000;
  border-radius: 50%;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}

.powers-hero-display {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  background: var(--c-panel);
  border: var(--pixel-border);
  box-shadow: var(--pixel-shadow);
  padding: 24px;
  width: 100%;
  max-width: 900px;
  align-items: center;
}

.powers-hero-display .sprite-big {
  width: 180px;
  height: 180px;
}

.powers-hero-info h3 {
  font-size: 28px;
  margin-bottom: 4px;
  color: var(--c-accent);
}
.powers-hero-info .theme { color: var(--c-text-dim); margin-bottom: 12px; }

.power-slot {
  margin-top: 16px;
}
.power-slot-label {
  text-transform: uppercase;
  font-size: 12px;
  color: var(--c-text-dim);
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.power-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.power-option {
  background: var(--c-bg-light);
  border: 3px solid #000;
  padding: 10px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 13px;
}
.power-option:hover {
  background: var(--c-bg);
  transform: translateY(-2px);
}
.power-option.selected {
  background: var(--c-accent);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 4px 0 #000;
}
.power-option strong { display: block; margin-bottom: 4px; }
.power-option span { font-size: 11px; opacity: 0.8; }

.powers-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
}

/* ===== Training & Battle scenes ===== */

.battle-scene {
  justify-content: flex-start;
  padding: 0;
  align-items: stretch;
}

.battle-area {
  flex: 1;
  min-height: 0;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  overflow: hidden;
}

.battle-area.world-bg-1 {
  background:
    radial-gradient(ellipse at bottom, rgba(0,0,0,0.6), transparent 60%),
    linear-gradient(180deg, #0d2818 0%, #1a4a2a 50%, #0d2818 100%);
}
.battle-area.world-bg-2 {
  background:
    radial-gradient(ellipse at bottom, rgba(0,0,0,0.5), transparent 60%),
    linear-gradient(180deg, #0d3a5c 0%, #4ba3d9 50%, #b8e0f0 100%);
}
.battle-area.world-bg-3 {
  background:
    radial-gradient(ellipse at bottom, rgba(0,0,0,0.7), transparent 60%),
    linear-gradient(180deg, #1a0a2e 0%, #4a1e6b 50%, #2a0e3e 100%);
}
.battle-area.world-bg-training {
  background:
    repeating-linear-gradient(45deg, #2a2444 0 20px, #322952 20px 40px);
}

.battle-side {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.battle-side.enemies { align-items: flex-start; }

.battle-card {
  background: rgba(0,0,0,0.55);
  border: 3px solid #000;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 130px;
  max-width: 160px;
  position: relative;
  transition: transform 0.2s;
}
.battle-card.active {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent);
  transform: translateY(-4px);
}
.battle-card.dead { opacity: 0.35; filter: grayscale(0.8); }
.battle-card.targetable { cursor: pointer; }
.battle-card.targetable:hover {
  border-color: var(--c-danger);
  box-shadow: 0 0 16px var(--c-danger);
}

.battle-card .sprite {
  width: 90px;
  height: 90px;
  animation: idle-bob 2s ease-in-out infinite;
}
@keyframes idle-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.battle-card.shake .sprite { animation: shake 0.4s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-8px); }
  80% { transform: translateX(8px); }
}

.battle-card.heal .sprite { animation: pulse-heal 0.6s; }
@keyframes pulse-heal {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 #66bb6a); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 16px #66bb6a); }
}

.battle-card.cast .sprite { animation: cast 0.5s; }
@keyframes cast {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 #ffd54f); }
  50% { transform: scale(1.2); filter: drop-shadow(0 0 24px #ffd54f); }
}

.battle-card-name {
  font-size: 14px;
  font-weight: bold;
  margin-top: 6px;
  text-align: center;
}

.hp-bar {
  width: 100%;
  height: 14px;
  background: #000;
  border: 2px solid #000;
  margin-top: 6px;
  position: relative;
  overflow: hidden;
}
.hp-bar-fill {
  height: 100%;
  background: var(--hp-full);
  transition: width 0.3s, background 0.3s;
}
.hp-bar-fill.mid { background: var(--hp-mid); }
.hp-bar-fill.low { background: var(--hp-low); }
.hp-bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}

.statuses {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 22px;
}
.status-icon {
  width: 22px; height: 22px;
  background: rgba(0,0,0,0.6);
  border: 2px solid #000;
  border-radius: 4px;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.status-icon .count {
  position: absolute;
  bottom: -2px; right: -2px;
  background: var(--c-accent);
  color: #000;
  font-size: 9px;
  font-weight: bold;
  padding: 1px 3px;
  border: 1px solid #000;
  border-radius: 4px;
}

/* ===== Attack effect projectiles ===== */

.attack-fx {
  position: fixed;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
  pointer-events: none;
  z-index: 50;
  --toX: 0px;
  --toY: 0px;
  animation: attack-fly 0.45s cubic-bezier(0.3, 0, 0.7, 1) forwards;
}
@keyframes attack-fly {
  0%   { transform: translate(0, 0) scale(0.4) rotate(0deg); opacity: 0; }
  20%  { transform: translate(calc(var(--toX) * 0.15), calc(var(--toY) * 0.15)) scale(1) rotate(60deg); opacity: 1; }
  100% { transform: translate(var(--toX), var(--toY)) scale(1.1) rotate(360deg); opacity: 0.9; }
}

.fx-fire {
  background: radial-gradient(circle at 35% 35%, #fff200 0%, #ff8c00 30%, #ff2020 70%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 20px #ff6b00, 0 0 40px #ff8c00;
}
.fx-fire::after {
  content: "";
  position: absolute;
  inset: -8px;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.4), transparent 70%);
  border-radius: 50%;
}

.fx-ice {
  background: linear-gradient(135deg, #fff 0%, #a0e8ff 50%, #0066cc 100%);
  clip-path: polygon(50% 0%, 100% 35%, 85% 100%, 15% 100%, 0% 35%);
  box-shadow: 0 0 16px #00ddff;
}

.fx-lightning {
  background: linear-gradient(180deg, #fff200, #fff700);
  clip-path: polygon(50% 0%, 70% 35%, 50% 35%, 60% 55%, 40% 100%, 50% 60%, 30% 60%);
  box-shadow: 0 0 24px #fff200, 0 0 12px #fff;
  animation: attack-fly 0.25s linear forwards; /* faster */
}

.fx-rock {
  background: radial-gradient(circle at 35% 35%, #bcb098 0%, #7a6a58 60%, #3a2a18 100%);
  border-radius: 35% 65% 55% 45% / 40% 50% 50% 60%;
  box-shadow: 0 0 8px rgba(0,0,0,0.6), inset -4px -4px 6px rgba(0,0,0,0.4);
}

.fx-shadow {
  background: radial-gradient(circle at 50% 50%, #fff8c8 0%, #aa3df5 40%, #3a0d5a 80%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 24px #aa3df5;
}

.fx-slash {
  background: linear-gradient(45deg, transparent 40%, #ff2020 45%, #fff 50%, #ff2020 55%, transparent 60%);
  width: 70px;
  height: 70px;
  margin-left: -35px;
  margin-top: -35px;
  filter: drop-shadow(0 0 6px #ff2020);
}

.fx-poison {
  background: radial-gradient(circle, #7ab050 20%, #3a8048 60%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 16px #7ab050;
  opacity: 0.85;
}

.fx-laser {
  background: linear-gradient(90deg, #fff 0%, #fff200 30%, #ff2020 70%, transparent 100%);
  width: 80px;
  height: 8px;
  margin-left: -40px;
  margin-top: -4px;
  box-shadow: 0 0 16px #ff2020;
  animation: attack-fly 0.2s linear forwards; /* very fast */
}

.fx-magic {
  background: radial-gradient(circle, #ffaaff 0%, #aa3df5 40%, #5a1a8a 80%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 24px #aa3df5, inset 0 0 10px #fff;
}

.fx-heal {
  background: radial-gradient(circle, #fff 0%, #66bb6a 50%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 20px #66bb6a;
}

.damage-number {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 32px;
  font-weight: 900;
  color: var(--c-danger);
  text-shadow: 3px 3px 0 #000;
  pointer-events: none;
  animation: damage-float 1s ease-out forwards;
  z-index: 10;
}
.damage-number.heal { color: var(--c-success); }
.damage-number.miss { color: var(--c-text-dim); font-size: 22px; }
@keyframes damage-float {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, -30px) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -100px) scale(1); }
}

/* ===== Battle controls ===== */

.battle-controls {
  background: rgba(0,0,0,0.85);
  border-top: 4px solid #000;
  padding: 12px 16px;
  min-height: 130px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  z-index: 5;
}

.battle-log {
  flex: 1;
  background: rgba(0,0,0,0.5);
  border: 2px solid #000;
  padding: 8px 12px;
  font-size: 14px;
  font-family: 'Courier New', monospace;
  max-height: 60px;
  overflow-y: auto;
}
.battle-log p { margin-bottom: 2px; }

.battle-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.battle-actions .action-prompt {
  font-size: 16px;
  align-self: center;
  padding-right: 12px;
  font-weight: bold;
}

.action-btn {
  background: var(--c-bg-light);
  border: 3px solid #000;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  color: var(--c-text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 100px;
  transition: transform 0.08s;
}
.action-btn:hover:not(:disabled) {
  background: var(--c-panel);
  transform: translateY(-2px);
}
.action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.action-btn .action-name { font-size: 13px; }
.action-btn .action-meta {
  font-size: 10px;
  color: var(--c-text-dim);
  font-weight: normal;
}
.action-btn.attack { background: #5a2d2d; }
.action-btn.attack:hover:not(:disabled) { background: #7a3d3d; }
.action-btn.special { background: #2d2d5a; }
.action-btn.special:hover:not(:disabled) { background: #3d3d7a; }
.action-btn.defend { background: #2d5a2d; }
.action-btn.defend:hover:not(:disabled) { background: #3d7a3d; }

/* ===== World map scene ===== */

.worldmap-scene {
  justify-content: flex-start;
  padding-top: 24px;
}
.worldmap-title {
  font-size: 32px;
  color: var(--c-accent);
  text-shadow: 3px 3px 0 #000;
  margin-bottom: 24px;
}

.worlds {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: stretch;
  max-width: 1100px;
  width: 100%;
}

.world-card {
  flex: 1;
  background: var(--c-panel);
  border: var(--pixel-border);
  box-shadow: var(--pixel-shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.15s;
  position: relative;
}
.world-card:hover:not(.locked) {
  transform: translateY(-4px);
}
.world-card.locked {
  cursor: not-allowed;
  opacity: 0.55;
}
.world-card.done {
  background: linear-gradient(180deg, #2d5a2d, var(--c-panel));
}
.world-card.done::before {
  content: "✓ Voltooid";
  position: absolute;
  top: 6px; right: 8px;
  background: var(--c-success);
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border: 2px solid #000;
  font-weight: bold;
}
.world-card.locked::before {
  content: "🔒";
  position: absolute;
  top: 8px; right: 12px;
  font-size: 22px;
}

.world-card h3 {
  font-size: 22px;
  color: var(--c-accent);
}

.world-scene-preview {
  width: 100%;
  height: 120px;
  border: 3px solid #000;
}
.world-1 .world-scene-preview { background: linear-gradient(180deg, #0d2818, #1a4a2a); }
.world-2 .world-scene-preview { background: linear-gradient(180deg, #0d3a5c, #b8e0f0); }
.world-3 .world-scene-preview { background: linear-gradient(180deg, #1a0a2e, #4a1e6b); }

.world-enemies {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.world-enemies .sprite {
  width: 54px;
  height: 54px;
}
.world-enemy-slot {
  border: 2px dashed #555;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.world-enemy-slot.beaten::after {
  content: "✓";
  position: absolute;
  inset: 0;
  background: rgba(102, 187, 106, 0.6);
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  display: flex; align-items: center; justify-content: center;
}

/* ===== Ending scene ===== */

.ending-scene {
  background: radial-gradient(ellipse at center, #2a4444 0%, #1a1530 70%);
  text-align: center;
}
.ending-title {
  font-size: 80px;
  color: var(--c-accent);
  text-shadow: 4px 4px 0 #000;
  margin-bottom: 16px;
}
.ending-message {
  font-size: 22px;
  max-width: 700px;
  margin-bottom: 32px;
  line-height: 1.6;
}
.ending-heroes {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
}
.ending-heroes .sprite {
  width: 90px;
  height: 90px;
  animation: idle-bob 2s ease-in-out infinite;
}
.ending-heroes .sprite:nth-child(1) { animation-delay: 0s; }
.ending-heroes .sprite:nth-child(2) { animation-delay: 0.2s; }
.ending-heroes .sprite:nth-child(3) { animation-delay: 0.4s; }
.ending-heroes .sprite:nth-child(4) { animation-delay: 0.6s; }
.ending-heroes .sprite:nth-child(5) { animation-delay: 0.8s; }

/* ===== Modal ===== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fade-in 0.2s;
}
.modal {
  background: var(--c-panel);
  border: var(--pixel-border);
  box-shadow: 0 6px 0 #000;
  padding: 32px;
  max-width: 500px;
  text-align: center;
}
.modal h2 {
  font-size: 28px;
  color: var(--c-accent);
  margin-bottom: 12px;
}
.modal p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* ===== Sprite container ===== */

.sprite {
  display: inline-block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.sprite svg {
  width: 100%;
  height: 100%;
  shape-rendering: crispEdges;
}

/* ===== Training intro overlay ===== */
.training-intro {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 50;
  text-align: center;
  padding: 32px;
}
.training-intro h2 {
  font-size: 36px;
  color: var(--c-accent);
  margin-bottom: 12px;
  text-shadow: 3px 3px 0 #000;
}
.training-intro p {
  font-size: 20px;
  margin-bottom: 24px;
  max-width: 600px;
}
.training-intro .sprite {
  width: 160px;
  height: 160px;
  margin-bottom: 16px;
}

/* Touch: grotere tap-targets op grove pointers (tablet) */
@media (pointer: coarse) {
  .btn { min-height: 48px; padding: 12px 22px; }
  .action-btn { min-height: 52px; padding: 10px 16px; }
}