/* ============================================================
   VONK DE ROBOT — Stylesheet
   Alle regels zijn beperkt tot .vg-container, zodat de game
   veilig op elke website geëmbed kan worden zonder de layout
   van de pagina te verstoren.
   ============================================================ */

/* ----- De container: 16:9, blijft netjes binnen zijn ouder ----- */
.vg-container {
  position: relative;
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(30, 40, 90, 0.25);
  background: #7ec8f5;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  user-select: none;
}

/* Het canvas vult de container precies */
.vg-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ----- Hulpklasse: verbergen ----- */
.vg-container .vg-verborgen {
  display: none !important;
}

/* ----- Overlays (start, pauze, game-over, klaar, vraag) ----- */
.vg-container .vg-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 30, 70, 0.55);
  z-index: 10;
}

.vg-container .vg-paneel {
  background: #fffdf5;
  border: 4px solid #2b3a8f;
  border-radius: 18px;
  padding: 22px 34px;
  max-width: 78%;
  max-height: 88%;
  overflow-y: auto;
  text-align: center;
  color: #2b3a8f;
  box-shadow: 0 6px 0 #1d2a6b;
}

.vg-container .vg-titel {
  margin: 0 0 4px 0;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  color: #ff8c42;
  text-shadow: 2px 2px 0 #2b3a8f;
  letter-spacing: 2px;
}

.vg-container .vg-ondertitel {
  margin: 0 0 10px 0;
  font-weight: bold;
  color: #17a2b8;
  font-size: clamp(0.9rem, 2.2vw, 1.15rem);
}

.vg-container .vg-paneel p {
  margin: 6px 0;
  font-size: clamp(0.8rem, 1.9vw, 1rem);
  line-height: 1.35;
}

.vg-container .vg-uitleg {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #eef4ff;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: clamp(0.75rem, 1.7vw, 0.92rem);
}

.vg-container .vg-score-regel {
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  font-weight: bold;
  color: #17a2b8;
}

/* ----- Knoppen ----- */
.vg-container .vg-knop {
  display: inline-block;
  margin: 8px 6px 0 6px;
  padding: 10px 22px;
  font-size: clamp(0.85rem, 2.2vw, 1.05rem);
  font-weight: bold;
  font-family: inherit;
  color: #fff;
  background: #ff8c42;
  border: 3px solid #d96b23;
  border-radius: 12px;
  box-shadow: 0 4px 0 #d96b23;
  cursor: pointer;
  transition: transform 0.08s;
}

.vg-container .vg-knop:hover  { transform: translateY(-2px); }
.vg-container .vg-knop:active { transform: translateY(2px); box-shadow: none; }

.vg-container .vg-knop-licht {
  background: #17a2b8;
  border-color: #0e7a8a;
  box-shadow: 0 4px 0 #0e7a8a;
}

.vg-container .vg-knop-paars {
  background: #8d4fc7;
  border-color: #6a3699;
  box-shadow: 0 4px 0 #6a3699;
}

.vg-container .vg-knop-spelen {
  background: #3cb54a;
  border-color: #2a8a35;
  box-shadow: 0 4px 0 #2a8a35;
}

/* ----- Hoofdmenu ----- */
.vg-container #vg-scherm-menu {
  align-items: stretch;
  justify-content: stretch;
  background: linear-gradient(180deg, rgba(45, 159, 238, 0.88), rgba(143, 218, 255, 0.86) 62%, rgba(111, 190, 235, 0.9));
}

.vg-container .vg-paneel-menu {
  position: relative;
  width: 100%;
  max-width: none;
  max-height: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #14265d;
  background: #8fd3ff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.vg-container .vg-paneel-menu::before,
.vg-container .vg-paneel-menu::after { content: none; }

.vg-container .vg-menu-decoraties,
.vg-container .vg-menu-inhoud,
.vg-container .vg-menu-topbar,
.vg-container .vg-menu-held {
  position: absolute;
  z-index: 1;
}

.vg-container .vg-menu-decoraties {
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.vg-container .vg-menu-level-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.vg-container .vg-menu-wolk {
  position: absolute;
  width: 9%;
  aspect-ratio: 2.2 / 1;
  background: rgba(255,255,255,0.88);
  border-radius: 999px;
  filter: drop-shadow(0 5px 0 rgba(49, 130, 196, 0.08));
}

.vg-container .vg-menu-wolk::before,
.vg-container .vg-menu-wolk::after {
  content: "";
  position: absolute;
  bottom: 18%;
  width: 52%;
  aspect-ratio: 1;
  background: inherit;
  border-radius: 50%;
}

.vg-container .vg-menu-wolk::before { left: 9%; }
.vg-container .vg-menu-wolk::after  { right: 7%; transform: scale(1.15); }

.vg-container .vg-menu-wolk-1 { left: 5%; top: 16%; }
.vg-container .vg-menu-wolk-2 { right: 18%; top: 13%; width: 10%; }

.vg-container .vg-menu-zon {
  position: absolute;
  right: 8%;
  top: 18%;
  width: 8.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7a6 0 55%, #f9df55 56% 68%, rgba(255,241,123,0.22) 69% 100%);
  box-shadow: 0 0 0 18px rgba(255,255,255,0.16);
}

.vg-container .vg-menu-munt {
  position: absolute;
  width: 3.2%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fffbd0 0 12%, #ffd447 13% 54%, #f0a51c 55% 100%);
  box-shadow: 0 0 0 10px rgba(255,232,88,0.22), inset 0 -4px 0 rgba(176, 112, 22, 0.22);
}

.vg-container .vg-menu-munt-1 { right: 22%; top: 47%; }
.vg-container .vg-menu-munt-2 { left: 17%; top: 30%; }

.vg-container .vg-menu-platform {
  position: absolute;
  height: 6%;
  background:
    radial-gradient(circle at 12% 100%, #a7622f 0 7%, transparent 8%),
    linear-gradient(180deg, #58c84b 0 43%, #9e6936 44% 100%);
  border-radius: 10px;
  box-shadow: inset 0 -5px 0 rgba(116,70,30,0.24);
}

.vg-container .vg-menu-platform-1 { left: 20%; top: 41%; width: 8%; }
.vg-container .vg-menu-platform-2 { right: 13%; top: 49%; width: 13%; }
.vg-container .vg-menu-platform-3 { right: -1%; bottom: 21%; width: 14%; }

.vg-container .vg-menu-vijand,
.vg-container .vg-menu-slijm {
  position: absolute;
  bottom: 18%;
  width: 4.2%;
  aspect-ratio: 1;
  border-radius: 35% 35% 22% 22%;
}

.vg-container .vg-menu-vijand {
  right: 14%;
  background: #191d5f;
  box-shadow: inset 0 -10px 0 rgba(0,0,0,0.18);
}

.vg-container .vg-menu-vijand::before,
.vg-container .vg-menu-vijand::after,
.vg-container .vg-menu-slijm::before,
.vg-container .vg-menu-slijm::after {
  content: "";
  position: absolute;
  top: 38%;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #72fff0;
}

.vg-container .vg-menu-vijand::before,
.vg-container .vg-menu-slijm::before { left: 28%; }
.vg-container .vg-menu-vijand::after,
.vg-container .vg-menu-slijm::after  { right: 28%; }

.vg-container .vg-menu-slijm {
  right: 25%;
  bottom: 9%;
  width: 3.8%;
  background: #8b52d5;
  border-radius: 50% 50% 34% 34%;
}

.vg-container .vg-menu-spikes {
  position: absolute;
  right: 5.2%;
  bottom: 18%;
  width: 6%;
  height: 5%;
  background: linear-gradient(115deg, transparent 0 33%, #e34858 34% 64%, transparent 65%) 0 100% / 33.3% 100% repeat-x;
}

.vg-container .vg-menu-topbar {
  left: 2.1%;
  right: 2.1%;
  top: 4%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;   /* boven de titel, zodat de knoppen altijd klikbaar zijn */
}

.vg-container .vg-menu-topbar > * {
  pointer-events: auto;
}

/* Rechterkant van de topbar: klas-login + geluid naast elkaar */
.vg-container .vg-menu-topbar-rechts {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vg-container .vg-menu-inhoud {
  left: 50%;
  top: 5%;
  width: min(46%, 590px);
  transform: translateX(-50%);
  text-align: center;
}

.vg-container .vg-paneel-menu .vg-titel {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-size: clamp(2.4rem, 6.5vw, 5.2rem);
  line-height: 0.82;
  color: #ff9f28;
  letter-spacing: 2px;
  text-shadow:
    0 5px 0 #12295f,
    4px 8px 0 #12295f,
    -4px 8px 0 #12295f,
    0 12px 18px rgba(19, 45, 93, 0.28);
  transform: rotate(-1deg);
}

.vg-container .vg-paneel-menu .vg-titel span {
  margin-top: 0.08em;
  color: #f6fbff;
  font-size: 0.58em;
  letter-spacing: 1px;
  text-shadow:
    0 4px 0 #12295f,
    3px 7px 0 #12295f,
    -3px 7px 0 #12295f,
    0 11px 16px rgba(19, 45, 93, 0.26);
}

.vg-container .vg-paneel-menu .vg-ondertitel {
  display: inline-block;
  margin: 8px 0 12px 0;
  padding: 6px 26px 8px 26px;
  color: #fff;
  background: linear-gradient(180deg, #32599c, #244684);
  border: 3px solid rgba(26, 54, 112, 0.75);
  border-radius: 8px;
  box-shadow: 0 4px 0 #17346d, inset 0 2px 0 rgba(255,255,255,0.12);
  font-size: clamp(1rem, 2.6vw, 1.45rem);
}

/* De menuknoppen: rustige witte kaarten met een gekleurd icoon.
   (Bewust subtieler dan de rest van de game: het menu is het
    eerste wat je ziet en mag er professioneel uitzien.) */
.vg-container .vg-knop-groot,
.vg-container .vg-knop-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 8px 14px;
  font-size: clamp(0.88rem, 2vw, 1.14rem);
  text-transform: none;
  letter-spacing: 0.4px;
  color: #1c2c66;
  background: rgba(255, 255, 255, 0.94);
  border: 2px solid rgba(43, 58, 143, 0.28);
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(18, 41, 95, 0.16), 0 2px 0 rgba(18, 41, 95, 0.08);
  transition: transform 0.08s, box-shadow 0.08s, border-color 0.08s;
}

.vg-container .vg-knop-groot { margin-bottom: 8px; }

/* De rij menuknoppen onder de grote knop */
.vg-container .vg-menu-knoppen {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Twee knoppen naast elkaar (Winkel + Codewoord) */
.vg-container .vg-menu-rij {
  display: flex;
  gap: 7px;
}

.vg-container .vg-menu-rij .vg-knop-menu {
  flex: 1;
  min-width: 0;
}

/* Subtiel oplichten bij hover, licht indrukken bij klikken */
.vg-container .vg-knop-groot:hover,
.vg-container .vg-knop-menu:hover {
  transform: translateY(-2px);
  background: #fff;
  border-color: rgba(43, 58, 143, 0.5);
  box-shadow: 0 6px 14px rgba(18, 41, 95, 0.22), 0 2px 0 rgba(18, 41, 95, 0.08);
}

.vg-container .vg-knop-groot:active,
.vg-container .vg-knop-menu:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(18, 41, 95, 0.18);
}

/* De kleur zit nu alleen nog in het icoontje links */
.vg-container .vg-menu-knop-icoon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(30px, 4.2vw, 42px);
  aspect-ratio: 1;
  border-radius: 12px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.14);
}

.vg-container .vg-knop-groot .vg-menu-knop-icoon {
  background: linear-gradient(180deg, #ffd75e, #f2a534);
}

.vg-container .vg-paneel-menu .vg-knop-spelen .vg-menu-knop-icoon {
  background: linear-gradient(180deg, #54d85c, #2fb745);
}

.vg-container .vg-paneel-menu .vg-knop-licht .vg-menu-knop-icoon {
  background: linear-gradient(180deg, #4ab8e9, #2786c5);
}

.vg-container .vg-paneel-menu .vg-knop-paars .vg-menu-knop-icoon {
  background: linear-gradient(180deg, #a86ae1, #7f45c5);
}

.vg-container .vg-paneel-menu .vg-knop-goud .vg-menu-knop-icoon {
  background: linear-gradient(180deg, #ff9d76, #e8633c);
}

/* Het pijltje rechts: rustig donkerblauw */
.vg-container .vg-menu-knop-pijl {
  flex: 0 0 auto;
  color: rgba(28, 44, 102, 0.4);
  font-size: 1em;
  text-shadow: none;
}

.vg-container .vg-menu-held {
  left: 6%;
  bottom: 13%;
  width: 18%;
  aspect-ratio: 0.9 / 1;
  pointer-events: none;
}

.vg-container .vg-menu-karakter {
  position: absolute;
  display: block;
  width: auto;
  height: auto;
  pointer-events: none;
  image-rendering: auto;
}

.vg-container .vg-menu-vonk-canvas {
  left: 12%;
  bottom: 7%;
  width: 76%;
  height: auto;
}

.vg-container .vg-menu-slijm-canvas {
  right: 24%;
  bottom: 7.5%;
  width: 7%;
}

.vg-container .vg-menu-happer-canvas {
  right: 13%;
  bottom: 15%;
  width: 8.5%;
}

.vg-container .vg-menu-bewaker-canvas {
  right: 7%;
  bottom: 20%;
  width: 6.5%;
}

.vg-container .vg-menu-robot {
  position: absolute;
  left: 19%;
  bottom: 13%;
  width: 63%;
  aspect-ratio: 0.85 / 1;
}

.vg-container .vg-menu-robot-antenne {
  position: absolute;
  left: 46%;
  top: -5%;
  width: 8%;
  height: 15%;
  background: #16406f;
  border-radius: 999px;
}

.vg-container .vg-menu-robot-antenne::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -42%;
  width: 160%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ffc632;
  border: 3px solid #c06d19;
}

.vg-container .vg-menu-robot-hoofd {
  position: absolute;
  left: 2%;
  right: 2%;
  top: 0;
  height: 58%;
  background: linear-gradient(135deg, #f8fbff, #c8d8ed);
  border: 4px solid #26416e;
  border-radius: 38% 38% 30% 30%;
  box-shadow: inset -10px -10px 0 rgba(38,65,110,0.16), 0 7px 0 rgba(23,51,103,0.24);
}

.vg-container .vg-menu-robot-hoofd::before {
  content: "";
  position: absolute;
  inset: 18% 12% 15% 12%;
  background: #122052;
  border-radius: 25%;
  box-shadow: inset 0 -8px 0 rgba(255,255,255,0.07);
}

.vg-container .vg-menu-robot-oog {
  position: absolute;
  z-index: 1;
  top: 38%;
  width: 12%;
  height: 21%;
  border-radius: 999px;
  background: #48f5dc;
  box-shadow: 0 0 10px rgba(72,245,220,0.7);
}

.vg-container .vg-menu-robot-oog:nth-child(1) { left: 33%; }
.vg-container .vg-menu-robot-oog:nth-child(2) { right: 33%; }

.vg-container .vg-menu-robot-mond {
  position: absolute;
  z-index: 1;
  left: 43%;
  top: 61%;
  width: 16%;
  height: 9%;
  border-bottom: 4px solid #48f5dc;
  border-radius: 0 0 999px 999px;
}

.vg-container .vg-menu-robot-lijf {
  position: absolute;
  left: 24%;
  bottom: 0;
  width: 52%;
  height: 38%;
  display: grid;
  place-items: center;
  color: #ffb02a;
  font-size: clamp(1.1rem, 3.8vw, 3rem);
  background: linear-gradient(135deg, #f9fbff, #cbd9e9);
  border: 4px solid #26416e;
  border-radius: 32% 32% 24% 24%;
  text-shadow: 0 2px 0 #c26d18;
}

.vg-container .vg-menu-robot-lijf::before,
.vg-container .vg-menu-robot-lijf::after {
  content: "";
  position: absolute;
  bottom: 12%;
  width: 34%;
  height: 17%;
  background: #85e4ee;
  border: 3px solid #26416e;
  border-radius: 999px;
}

.vg-container .vg-menu-robot-lijf::before { left: -32%; transform: rotate(16deg); }
.vg-container .vg-menu-robot-lijf::after  { right: -32%; transform: rotate(-16deg); }

.vg-container .vg-menu-bloem {
  position: absolute;
  left: 0;
  bottom: 6%;
  width: 14%;
  aspect-ratio: 1;
  background: #ffd24a;
  border-radius: 50%;
  box-shadow:
    0 -14px 0 #be5ada,
    12px 0 0 #be5ada,
    0 14px 0 #be5ada,
    -12px 0 0 #be5ada;
}

.vg-container .vg-menu-bloem::before {
  content: "";
  position: absolute;
  left: 48%;
  top: 100%;
  width: 16%;
  height: 240%;
  background: #258c4c;
  border-radius: 999px;
}

/* ----- Uitlegschermen (scrollbaar, tekst links uitgelijnd) ----- */
.vg-container .vg-paneel-uitleg {
  text-align: left;
  min-width: 72%;
  max-width: 92%;   /* extra ruimte: zo passen 6 wereldtegels naast elkaar */
}

.vg-container .vg-paneel-uitleg .vg-titel,
.vg-container .vg-paneel-uitleg .vg-winkel-saldo,
.vg-container .vg-paneel-uitleg > .vg-knop {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.vg-container .vg-titel-klein {
  font-size: clamp(1.1rem, 3vw, 1.6rem);
}

.vg-container .vg-paneel-uitleg ul {
  margin: 4px 0 8px 0;
  padding-left: 22px;
  font-size: clamp(0.78rem, 1.8vw, 0.95rem);
  line-height: 1.4;
}

/* Twee kolommen: niet-veilige en veiligere voorbeelden naast elkaar */
.vg-container .vg-uitleg-kolommen {
  display: flex;
  gap: 10px;
  margin: 8px 0;
  flex-wrap: wrap;
}

.vg-container .vg-uitleg-blok {
  flex: 1;
  min-width: 180px;
  background: #eef4ff;
  border-radius: 10px;
  padding: 8px 12px;
}

.vg-container .vg-blok-fout { background: #ffe9e9; border: 2px solid #e8b0b0; }
.vg-container .vg-blok-goed { background: #e8f8ec; border: 2px solid #a9d9b4; }

.vg-container .vg-tip {
  background: #fff6dd;
  border-radius: 10px;
  padding: 8px 12px;
  border: 2px solid #e8d49a;
}

.vg-container .vg-waarschuwing {
  background: #f3e9ff;
  border-radius: 10px;
  padding: 8px 12px;
  border: 2px solid #cdb0e8;
}

/* "Veilig of Niet veilig" voorbeeldlabels in de speluitleg */
.vg-container .vg-keuze-voorbeeld {
  text-align: center;
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
}

.vg-container .vg-label-veilig,
.vg-container .vg-label-nietveilig {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 9px;
  font-weight: bold;
  color: #fff;
}

.vg-container .vg-label-veilig     { background: #3cb54a; }
.vg-container .vg-label-nietveilig { background: #d95252; }

/* ----- Winkel ----- */
.vg-container .vg-winkel-saldo {
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
}

.vg-container .vg-sleutel-icoon {
  color: #f2c14e;
  text-shadow: 0 0 2px #a37b1e;
}

/* Saldo-regel in het hoofdmenu */
.vg-container .vg-menu-saldo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 9px 18px;
  color: #14265d;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: bold;
  background: rgba(236, 247, 255, 0.78);
  border: 2px solid rgba(255,255,255,0.76);
  border-radius: 18px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 4px 0 rgba(28,74,132,0.16);
}

.vg-container .vg-menu-stat-icoon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffe98b;
  box-shadow: inset 0 -3px 0 rgba(168,103,23,0.22);
}

/* De knopjes in de topbar van het menu (klas-login, leerkracht,
   geluid) — compact en rustig, passend bij de nieuwe menustijl */
.vg-container .vg-knop-geluid-menu {
  margin: 0;
  padding: 6px 11px;
  font-family: inherit;
  font-size: clamp(0.7rem, 1.5vw, 0.86rem);
  font-weight: bold;
  color: #2b3a8f;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(43, 58, 143, 0.3);
  border-radius: 11px;
  box-shadow: 0 2px 8px rgba(18, 41, 95, 0.15);
  cursor: pointer;
  transition: transform 0.08s, border-color 0.08s;
}

.vg-container .vg-knop-geluid-menu:hover {
  background: #fff;
  border-color: rgba(43, 58, 143, 0.55);
  transform: translateY(-2px);
}

/* ----- Levelkiezer ----- */
.vg-container .vg-levels-uitleg {
  text-align: center;
  color: #6a6f85;
}

/* ----- Wereldkiezer: zes kleine vaste tegels naast elkaar ----- */
.vg-container .vg-wereld-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 12px 0;
}

.vg-container .vg-wereld-kaart {
  width: 172px;
  background: #eef4ff;
  border: 3px solid #c3d2f0;
  border-radius: 12px;
  padding: 6px 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Tekst op de kaarten mag nooit worden samengedrukt (anders
   schuift de tekst over de sterrenteller heen) */
.vg-container .vg-wereld-kaart p,
.vg-container .vg-wereld-kaart canvas {
  margin: 0 !important;
  flex-shrink: 0;
}

/* Speelbare kaarten zijn in hun geheel klikbaar */
.vg-container .vg-wereld-klikbaar {
  cursor: pointer;
  transition: transform 0.1s, border-color 0.1s;
}

.vg-container .vg-wereld-klikbaar:hover {
  transform: translateY(-3px);
  border-color: #f2c14e;
}

.vg-container .vg-wereld-dicht {
  opacity: 0.65;
  filter: grayscale(0.5);
}

.vg-container .vg-wereld-plaatje {
  width: 72px;       /* expliciet: anders rekt de algemene canvas-regel
                        (width/height 100% voor het speelveld) hem op */
  height: 48px;
  background: linear-gradient(#dff0ff, #f5faff);
  border-radius: 9px;
  border: 2px solid #c3d2f0;
}

.vg-container .vg-wereld-doel {
  font-size: clamp(0.6rem, 1.3vw, 0.72rem);
  color: #6a6f85;
  line-height: 1.2;
}

/* Lange wereldnamen ("Wachtwoordwerkplaats") netjes binnen de
   tegel houden: iets kleiner en desnoods afbreken */
.vg-container .vg-wereld-kaart .vg-level-naam {
  font-size: clamp(0.78rem, 1.8vw, 0.92rem);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.vg-container .vg-wereld-status {
  font-weight: bold;
  font-size: clamp(0.72rem, 1.7vw, 0.88rem);
  color: #2b3a8f;
}

.vg-container .vg-level-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 12px 0;
}

.vg-container .vg-level-kaart {
  width: 160px;
  background: #eef4ff;
  border: 3px solid #c3d2f0;
  border-radius: 12px;
  padding: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.vg-container .vg-level-kaart p { margin: 0 !important; flex-shrink: 0; }

.vg-container .vg-level-dicht { opacity: 0.7; }

.vg-container .vg-level-nummer {
  font-size: clamp(0.72rem, 1.7vw, 0.85rem);
  color: #6a6f85;
  font-weight: bold;
}

.vg-container .vg-level-naam {
  font-weight: bold;
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
}

.vg-container .vg-level-sterren { font-size: clamp(1.1rem, 3vw, 1.5rem); }

.vg-container .vg-level-hint {
  font-size: clamp(0.68rem, 1.6vw, 0.8rem);
  color: #d33;
  font-weight: bold;
}

.vg-container .vg-level-kaart .vg-knop {
  margin: 6px 0 0 0;
  padding: 8px 18px;
}

/* ----- Sterren (goud = behaald, grijs = nog niet) ----- */
.vg-container .vg-ster-goud  { color: #f2c14e; text-shadow: 0 0 3px #a37b1e; }
.vg-container .vg-ster-grijs { color: #c3c9d8; }

.vg-container .vg-sterren {
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  margin: 2px 0 !important;
  letter-spacing: 6px;
}

/* ----- Wachtwoord-bouwer ----- */
.vg-container .vg-bouwer-waarschuwing {
  background: #f3e9ff;
  border: 2px solid #cdb0e8;
  border-radius: 10px;
  padding: 6px 12px;
}

.vg-container #vg-bouwer-invoer {
  width: 90%;
  padding: 10px 14px;
  margin: 8px 0 10px 0;
  font-family: "Consolas", "Courier New", monospace;
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  font-weight: bold;
  color: #2b3a8f;
  background: #fffdf5;
  border: 3px solid #2b3a8f;
  border-radius: 10px;
  outline: none;
}

.vg-container #vg-bouwer-invoer:focus { border-color: #17a2b8; }

/* De sterkte-meter (balk die meegroeit en van kleur wisselt) */
.vg-container .vg-bouwer-meter {
  width: 90%;
  height: 16px;
  margin: 0 auto;
  background: #e3e7f0;
  border: 2px solid #c3d2f0;
  border-radius: 9px;
  overflow: hidden;
}

.vg-container #vg-bouwer-meter-vulling {
  height: 100%;
  width: 0%;
  background: #c3c9d8;
  border-radius: 7px;
  transition: width 0.25s, background 0.25s;
}

.vg-container #vg-bouwer-label {
  font-weight: bold;
  margin: 4px 0 8px 0 !important;
}

/* Checklist met kruisjes die vinkjes worden */
.vg-container .vg-bouwer-checklist {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 14px;
  margin: 0 auto 10px auto;
  padding: 8px 14px;
  max-width: 92%;
  text-align: left;
  background: #eef4ff;
  border-radius: 10px;
  font-size: clamp(0.72rem, 1.8vw, 0.9rem);
}

.vg-container .vg-bouwer-checklist li::before {
  content: "\2716\00a0";      /* ✖ */
  color: #d95252;
  font-weight: bold;
}

.vg-container .vg-bouwer-checklist li.vg-check-behaald::before {
  content: "\2714\00a0";      /* ✔ */
  color: #3cb54a;
}

.vg-container .vg-bouwer-checklist li.vg-check-behaald {
  color: #2a8a35;
  font-weight: bold;
}

/* Kleine vaste tegels die vanzelf naar de volgende rij lopen —
   zo rekt er niets uit en hoeft er nooit zijwaarts gescrold */
.vg-container .vg-winkel-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 10px 0;
}

.vg-container .vg-skin-kaart {
  width: 128px;
  background: #eef4ff;
  border: 3px solid #c3d2f0;
  border-radius: 12px;
  padding: 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

/* De actieve (geselecteerde) skin krijgt een gouden randje */
.vg-container .vg-skin-actief {
  border-color: #f2c14e;
  background: #fff8e4;
}

.vg-container .vg-skin-preview {
  width: 72px;      /* canvas is 90×96; iets verkleind weergegeven */
  height: 77px;
  background: linear-gradient(#bfe4ff, #e6f5ff);
  border-radius: 9px;
}

.vg-container .vg-skin-naam {
  margin: 2px 0 0 0 !important;
  font-weight: bold;
}

.vg-container .vg-skin-prijs {
  margin: 0 !important;
  color: #6a6f85;
}

.vg-container .vg-knop-winkel {
  margin: 4px 0 0 0;
  padding: 7px 12px;
  font-size: clamp(0.72rem, 1.7vw, 0.88rem);
}

.vg-container .vg-knop-geselecteerd {
  background: #3cb54a;
  border-color: #2a8a35;
  box-shadow: none;
  cursor: default;
}

.vg-container .vg-skin-melding {
  margin: 2px 0 0 0 !important;
  min-height: 1em;
  color: #d33;
  font-weight: bold;
  font-size: clamp(0.68rem, 1.6vw, 0.8rem);
}

/* Afdelingstitels in de winkel ("Robots", "Lasers") */
.vg-container .vg-winkel-titel {
  text-align: left;
  font-weight: bold;
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  color: #2b3a8f;
  margin: 14px 0 4px 0 !important;
  padding: 6px 12px;
  background: #eef4ff;
  border-left: 5px solid #f2c14e;
  border-radius: 6px;
}

/* Vergrendelde winkelkaarten (lasers vóór Wereld 2) */
.vg-container .vg-skin-dicht {
  opacity: 0.55;
  filter: grayscale(0.5);
}

/* ----- Codewoord inwisselen ----- */
.vg-container .vg-code-vak {
  background: #eef4ff;
  border: 3px solid #c3d2f0;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 0 auto 10px auto;
  max-width: 420px;
  text-align: center;
}

.vg-container .vg-code-uitleg {
  margin: 0 0 8px 0 !important;
  font-size: clamp(0.72rem, 1.7vw, 0.85rem);
  color: #6a6f85;
}

.vg-container .vg-code-rij {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}

.vg-container .vg-code-invoer {
  flex: 1;
  min-width: 150px;
  padding: 8px 12px;
  font-family: "Consolas", "Courier New", monospace;
  font-size: clamp(0.85rem, 2vw, 1rem);
  font-weight: bold;
  color: #2b3a8f;
  background: #fffdf5;
  border: 3px solid #2b3a8f;
  border-radius: 10px;
  outline: none;
}

.vg-container .vg-code-invoer:focus { border-color: #17a2b8; }

.vg-container .vg-code-rij .vg-knop-winkel { margin: 0; }

.vg-container .vg-code-melding {
  margin: 8px 0 0 0 !important;
  min-height: 1em;
  font-weight: bold;
  font-size: clamp(0.78rem, 1.8vw, 0.92rem);
}

.vg-container .vg-code-goed { color: #1d9e3f; }
.vg-container .vg-code-fout { color: #d33; }

/* ----- Pauze/herstart-knopjes tijdens het spelen ----- */
.vg-container .vg-spelknoppen {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  z-index: 5;
}

.vg-container .vg-spelknoppen button {
  width: 34px;
  height: 34px;
  font-size: 15px;
  color: #2b3a8f;
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid #2b3a8f;
  border-radius: 9px;
  cursor: pointer;
}

.vg-container .vg-spelknoppen button:hover {
  background: #fff;
}

/* ----- Vraagvenster (wachtwoordcheck) ----- */
.vg-container .vg-paneel-vraag {
  min-width: 58%;
}

.vg-container .vg-vraag-label {
  font-weight: bold;
  color: #8d4fc7;
  margin: 0;
}

.vg-container .vg-paneel-vraag h2 {
  margin: 6px 0 10px 0;
  font-size: clamp(1rem, 2.6vw, 1.3rem);
}

/* Het voorbeeldwachtwoord: groot en goed leesbaar in letterletters */
.vg-container .vg-wachtwoord {
  font-family: "Consolas", "Courier New", monospace;
  font-size: clamp(1.05rem, 3vw, 1.5rem);
  font-weight: bold;
  letter-spacing: 1px;
  background: #2b3a8f;
  color: #ffe9a8;
  border-radius: 10px;
  padding: 12px 16px;
  margin: 6px 0 14px 0 !important;
  word-break: break-all;
}

/* Echtnep-vragen (Wereld 2): het bericht als chatballon
   in plaats van als wachtwoord-weergave */
.vg-container .vg-wachtwoord.vg-bericht {
  font-family: inherit;
  font-size: clamp(0.85rem, 2.1vw, 1.05rem);
  font-weight: normal;
  letter-spacing: 0;
  text-align: left;
  background: #eef4ff;
  color: #2b3a8f;
  border: 2px solid #c3d2f0;
  border-radius: 14px 14px 14px 4px;   /* chatballon-vorm */
  word-break: normal;
}

/* De keuzeknoppen: 2 naast elkaar (Veilig/Niet veilig)
   of 3 onder elkaar (sterkste/verbeter-vragen) */
.vg-container .vg-vraag-keuzes {
  display: grid;
  gap: 10px;
}

.vg-container .vg-keuzes-2 { grid-template-columns: 1fr 1fr; }
.vg-container .vg-keuzes-1 { grid-template-columns: 1fr; }

.vg-container .vg-antwoord {
  padding: 14px 10px;
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  font-family: inherit;
  font-weight: bold;
  color: #fff;
  border-radius: 12px;
  cursor: pointer;
  border: 3px solid;
}

.vg-container .vg-antwoord-veilig {
  background: #3cb54a;
  border-color: #2a8a35;
  box-shadow: 0 4px 0 #2a8a35;
}

.vg-container .vg-antwoord-nietveilig {
  background: #d95252;
  border-color: #a83232;
  box-shadow: 0 4px 0 #a83232;
}

/* Keuzeknoppen bij "sterkste"/"verbeter"-vragen (blauwe stijl) */
.vg-container .vg-antwoord-optie {
  background: #eef4ff;
  border-color: #2b3a8f;
  box-shadow: 0 4px 0 #2b3a8f;
  color: #2b3a8f;
  padding: 11px 10px;
  font-size: clamp(0.82rem, 2vw, 1rem);
  text-align: left;
}

.vg-container .vg-antwoord-optie:hover:not(:disabled) { background: #d9e6ff; }

/* Wachtwoord-opties in letterletters */
.vg-container .vg-antwoord-mono {
  font-family: "Consolas", "Courier New", monospace;
  letter-spacing: 1px;
  text-align: center;
}

.vg-container .vg-antwoord:hover:not(:disabled) {
  transform: translateY(-2px);
}

.vg-container .vg-antwoord:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

/* Na het antwoord: het juiste antwoord licht groen op, fout wordt rood */
.vg-container .vg-antwoord.vg-goed {
  opacity: 1;
  outline: 4px solid #1d9e3f;
  outline-offset: 2px;
}

.vg-container .vg-antwoord.vg-fout {
  opacity: 1;
  outline: 4px solid #d33;
  outline-offset: 2px;
}

.vg-container #vg-vraag-feedback {
  font-weight: bold;
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  margin-top: 12px;
}

.vg-container #vg-vraag-feedback.vg-feedback-goed { color: #1d9e3f; }
.vg-container #vg-vraag-feedback.vg-feedback-fout { color: #d33; }

/* De uitleg waarom een wachtwoord wel/niet veilig is */
.vg-container #vg-vraag-uitleg {
  background: #eef4ff;
  border-radius: 10px;
  padding: 8px 12px;
}

/* "+10 muntjes!"-badge bij een goed antwoord */
.vg-container .vg-munt-badge {
  display: inline-block;
  background: #fff3cd;
  border: 3px solid #f2c14e;
  border-radius: 12px;
  padding: 6px 16px;
  font-weight: bold;
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  color: #7a5c10;
}

/* ============================================================
   KLAS-LOGIN — het scherm waar leerlingen inloggen
   (klasnaam → naam kiezen → wachtwoord)
   ============================================================ */

.vg-container #vg-klas-invoer,
.vg-container #vg-klas-wachtwoord {
  display: block;
  width: min(90%, 420px);
  margin: 8px auto 12px auto;
  padding: 10px 14px;
  font-family: "Consolas", "Courier New", monospace;
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  font-weight: bold;
  color: #2b3a8f;
  background: #fffdf5;
  border: 3px solid #2b3a8f;
  border-radius: 10px;
  outline: none;
}

.vg-container #vg-klas-invoer:focus,
.vg-container #vg-klas-wachtwoord:focus { border-color: #17a2b8; }

/* Het naam-raster: klikbare naamknoppen naast elkaar */
.vg-container .vg-klas-namen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-height: 260px;
  overflow-y: auto;
  margin: 10px 0 14px 0;
  padding: 4px;
}

.vg-container .vg-klas-naamknop {
  min-width: 120px;
  padding: 10px 16px;
  font-size: clamp(0.9rem, 2.2vw, 1.05rem);
}

/* Foutmelding (klas niet gevonden / wachtwoord fout) */
.vg-container .vg-klas-fout {
  color: #c0392b;
  font-weight: bold;
  background: #fdecea;
  border: 2px solid #f5b7b1;
  border-radius: 10px;
  padding: 8px 14px;
  margin: 10px auto;
  max-width: 480px;
}

/* ============================================================
   CODEWOORD-SCHERM — eigen menuscherm (voorheen in de winkel)
   ============================================================ */

.vg-container .vg-code-rij-midden {
  max-width: 420px;
  margin: 14px auto 0 auto;
}

.vg-container .vg-code-rij-midden .vg-knop { margin: 0; }