* { box-sizing: border-box; }

body {
  margin: 0;
  background: #071a26;
  color: #eaf4f8;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

#spel {
  max-width: 860px;
  margin: 0 auto;
  padding: 12px;
}

.scherm { display: none; }
.scherm.actief { display: block; }

h1 {
  font-size: 32px;
  margin: 8px 0;
  text-align: center;
}

.uitleg {
  text-align: center;
  color: #9fc2d2;
  margin-top: 0;
}

/* Dier kiezen */

.kaartenrij {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.dierkaart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 2px solid #1d4a63;
  border-radius: 14px;
  background: #0e2a3a;
  color: #eaf4f8;
  font: inherit;
  cursor: pointer;
}

.dierkaart:active { background: #16455c; }
.dierkaart .emoji { font-size: 34px; }
.dierkaart .emoji svg { display: block; margin: 0 auto; }
.dierkaart .naam { font-weight: 700; }
.dierkaart .getallen { font-size: 12px; color: #9fc2d2; text-align: center; }
.dierkaart .supernaam { font-size: 12px; color: #ffd166; }
.dierkaart .vechten {
  margin-top: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #1d4a63;
  font-size: 13px;
  font-weight: 700;
}

h2 {
  font-size: 18px;
  margin: 18px 0 6px;
  color: #9fc2d2;
}

/* Eieren */

.eierenrij {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 20px;
}

.eiknop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 84px;
  padding: 12px 10px;
  border: 2px solid #5a4a12;
  border-radius: 14px;
  background: #241d06;
  color: #ffd166;
  font: inherit;
  cursor: pointer;
}

.eiknop:active { background: #3a2f0a; }
.eiknop .emoji { font-size: 32px; }
.eiknop .einaam { font-size: 12px; }

/* Onthulling van een ei */

.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4, 14, 20, 0.85);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.overlay.actief { display: flex; }

.onthulkaart {
  max-width: 320px;
  width: 100%;
  padding: 24px;
  border-radius: 20px;
  background: #0e2a3a;
  border: 2px solid #1d4a63;
  text-align: center;
}

.onthulkaart h2 { color: #eaf4f8; margin: 6px 0; font-size: 24px; }
.onthulkaart p { color: #9fc2d2; font-size: 13px; margin: 4px 0; }
.emoji-groot { font-size: 72px; display: block; }
.emoji-groot svg { display: block; margin: 0 auto; }
.balksprite { display: inline-block; vertical-align: middle; margin-right: 6px; }
.balksprite svg { display: block; }
.balkleven { color: #9fc2d2; margin-left: 8px; }

/* Arena */

.vechterbalk {
  padding: 8px 12px;
  border-radius: 10px;
  background: #0e2a3a;
  font-weight: 600;
  font-size: 14px;
  margin: 6px 0;
}

.vechterbalk.speler { border-left: 6px solid #48c774; }
.vechterbalk.bot { border-left: 6px solid #e05a5a; }

.arena-houder {
  display: flex;
  justify-content: center;
}

canvas#arena {
  display: block;
  aspect-ratio: 600 / 800;
  max-height: 62vh;
  max-width: 100%;
  border-radius: 14px;
  background: #0e2a3a;
  touch-action: none;
}

#knoppen {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.actieknop {
  flex: 1;
  padding: 22px 10px;
  border: none;
  border-radius: 16px;
  background: #1d4a63;
  color: #eaf4f8;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.actieknop:active { background: #2b6c8f; }

.actieknop .toets {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #9fc2d2;
}

.actieknop.super { background: #5a4a12; }
.actieknop.super.geladen {
  background: #ffd166;
  color: #2a1f00;
  box-shadow: 0 0 18px rgba(255, 209, 102, 0.6);
}
.actieknop.super.geladen .toets { color: #6b5200; }

/* Resultaat */

#scherm-resultaat { text-align: center; padding-top: 60px; }
#scherm-resultaat p { color: #9fc2d2; }
#knop-verder { max-width: 260px; margin: 20px auto 0; }

#scherm-team .uitleg { text-align: left; margin: 0 0 8px; }

/* Kop met muntjes */

.kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.kop h1 { text-align: left; }

.munten {
  padding: 8px 14px;
  border-radius: 999px;
  background: #241d06;
  border: 2px solid #5a4a12;
  color: #ffd166;
  font-weight: 700;
  white-space: nowrap;
}

/* Winkel */

.eiknop.koop .prijs { font-size: 13px; font-weight: 700; }
.eiknop.koop:disabled { opacity: 0.4; cursor: default; }