:root {
  --glas: rgba(20, 24, 48, 0.62);
  --rand: rgba(255, 255, 255, 0.14);
  --goud: #ffd34d;
  --tekst: #ffffff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #03040a; overflow: hidden; }
body {
  font-family: 'Fredoka', system-ui, sans-serif; color: var(--tekst);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
#doek { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#doek.penseel { cursor: crosshair; }

/* ---------- Startscherm ---------- */
#start {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 16px;
}
#start h1 {
  margin: 0; font-size: clamp(44px, 9vw, 92px); font-weight: 700; letter-spacing: 1px;
  background: linear-gradient(180deg, #fff 30%, #ffd34d); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 24px rgba(255, 211, 77, 0.35));
}
.ondertitel { margin: 0 0 28px; font-size: clamp(20px, 3.5vw, 30px); opacity: 0.85; }
#makers { display: flex; gap: clamp(16px, 4vw, 48px); flex-wrap: wrap; justify-content: center; }
.maker-knop {
  display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 8px;
  transition: transform 0.2s;
}
.maker-knop:hover { transform: translateY(-6px); }
.maker-knop:active { transform: scale(0.94); }
.mini {
  width: clamp(110px, 18vw, 170px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 34%, var(--g) 0 26%, var(--w) 52%, #0a0d1a 80%);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06), 0 0 50px 6px color-mix(in srgb, var(--l) 55%, transparent), inset -18px -18px 36px rgba(0, 0, 0, 0.55);
  animation: zweef 4s ease-in-out infinite;
}
.maker-knop:nth-child(2) .mini { animation-delay: -1.3s; }
.maker-knop:nth-child(3) .mini { animation-delay: -2.6s; }
.mini.leeg {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 3px dashed rgba(255, 255, 255, 0.35); font-size: 56px; font-weight: 700; color: rgba(255, 255, 255, 0.6);
  box-shadow: none;
}
.mini.foto { background: none; box-shadow: none; object-fit: contain; display: block; }
.mini.laden {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 70%);
  box-shadow: none; animation: zweef 4s ease-in-out infinite, laden 1.2s ease-in-out infinite alternate;
}
@keyframes laden { to { opacity: 0.4; } }
@keyframes zweef { 50% { transform: translateY(-10px); } }
.maker-naam { font-size: clamp(26px, 4vw, 36px); font-weight: 700; }
.maker-sub { font-size: 16px; opacity: 0.7; }

/* ---------- Bovenbalk ---------- */
.balk {
  position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) 16px 0; pointer-events: none;
}
.balk > * { pointer-events: auto; }
#titel {
  flex: 1; text-align: center; font-size: clamp(22px, 4vw, 36px); font-weight: 700;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85); pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rond {
  width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--rand); background: var(--glas);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 28px; display: grid; place-items: center;
  transition: transform 0.15s, opacity 0.2s;
}
.rond:active { transform: scale(0.9); }
.rond.uit { opacity: 0.3; pointer-events: none; }

/* ---------- Dock ---------- */
#dock {
  position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; gap: 6px; padding: 8px; border-radius: 28px; max-width: calc(100vw - 16px); overflow-x: auto;
  background: var(--glas); border: 1px solid var(--rand); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  scrollbar-width: none;
}
#dock::-webkit-scrollbar { display: none; }
.gereedschap {
  flex: 0 0 auto; width: 76px; padding: 8px 2px 6px; border-radius: 20px; border: 2px solid transparent; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform 0.15s, background 0.15s;
}
.gereedschap .icoon { font-size: 34px; line-height: 1; }
.gereedschap .label { font-size: 13px; opacity: 0.85; white-space: nowrap; }
.gereedschap:active { transform: scale(0.9); }
.gereedschap.aan { background: rgba(255, 211, 77, 0.18); border-color: var(--goud); }
.gereedschap.wenk { animation: wenk 1.4s ease-in-out infinite; }
@keyframes wenk {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 211, 77, 0); }
  50% { box-shadow: 0 0 0 4px rgba(255, 211, 77, 0.7), 0 0 24px rgba(255, 211, 77, 0.6); transform: translateY(-4px); }
}

/* ---------- Paneel ---------- */
#paneel {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 108px);
  width: min(720px, calc(100vw - 24px)); max-height: 46vh; overflow-y: auto; padding: 10px 16px 16px; border-radius: 26px;
  background: var(--glas); border: 1px solid var(--rand); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: omhoog 0.22s ease-out;
}
@keyframes omhoog { from { opacity: 0; transform: translate(-50%, 16px); } }
.kop { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.kop span { flex: 1; }
.kop button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.1); font-size: 20px; }
.rij { margin-top: 10px; }
.rij-titel { font-size: 15px; opacity: 0.7; margin: 0 0 6px 4px; }
.keuzes { display: flex; flex-wrap: wrap; gap: 10px; }
.kaart {
  min-width: 92px; padding: 10px 10px 8px; border-radius: 18px; border: 2px solid transparent; background: rgba(255, 255, 255, 0.08);
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 15px; transition: transform 0.15s;
}
.kaart .groot { font-size: 36px; line-height: 1.1; }
.kaart:active { transform: scale(0.92); }
.kaart.aan { border-color: var(--goud); background: rgba(255, 211, 77, 0.15); }
.kaart.thema { min-width: 96px; }
.strook { display: flex; width: 72px; height: 30px; border-radius: 10px; overflow: hidden; }
.strook i { flex: 1; }
.kaart.feest { flex: 1; font-size: 20px; background: linear-gradient(135deg, rgba(255, 95, 176, 0.35), rgba(255, 211, 77, 0.35)); }
.kaartje.klein { min-width: 80px; }
.kleurbol {
  width: 56px; height: 56px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.15);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--k, #444) 60%, white), var(--k, #444) 60%);
  font-size: 24px; display: grid; place-items: center; transition: transform 0.15s; padding: 0;
}
.kleurbol:active { transform: scale(0.88); }
.kleurbol.aan { border-color: var(--goud); transform: scale(1.1); box-shadow: 0 0 16px rgba(255, 211, 77, 0.6); }
.kleurbol.plus, .kleurbol.geen, .kleurbol.gum, .kleurbol.maat { background: rgba(255, 255, 255, 0.1); }
.stip { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: block; }
.stip.klein { width: 14px; height: 14px; }
.schuif { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 30px; }
.schuif input { flex: 1; -webkit-appearance: none; appearance: none; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.18); }
.schuif input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 42px; height: 42px; border-radius: 50%; background: var(--goud);
  border: 4px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.schuif input::-moz-range-thumb { width: 36px; height: 36px; border-radius: 50%; background: var(--goud); border: 4px solid #fff; }
.tip { margin-top: 10px; font-size: 15px; opacity: 0.7; text-align: center; }

.giet {
  flex: 1; min-height: 110px; border-radius: 24px; border: 3px solid rgba(90, 200, 250, 0.6);
  background: linear-gradient(180deg, rgba(90, 200, 250, 0.3), rgba(0, 122, 255, 0.35));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 20px; font-weight: 600;
  touch-action: none; transition: transform 0.1s;
}
.giet .groot { font-size: 46px; }
.giet.leeg { flex: 0 0 120px; border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); }
.giet.ingedrukt { transform: scale(0.95); box-shadow: 0 0 30px rgba(90, 200, 250, 0.8); }

.naamrij { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.naamveld {
  flex: 1; min-width: 0; height: 58px; border-radius: 18px; border: 2px solid var(--rand); background: rgba(0, 0, 0, 0.3);
  color: #fff; font: 600 24px 'Fredoka', sans-serif; padding: 0 16px; outline: none; -webkit-user-select: text; user-select: text;
}
.naamveld:focus { border-color: var(--goud); }
.opnieuw { margin: 16px auto 0; display: block; background: none; border: 0; opacity: 0.55; font-size: 15px; text-decoration: underline; }

.wens { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.wens-tekst { flex: 1; display: flex; gap: 8px; min-width: 220px; }
.opneem {
  width: 104px; height: 104px; border-radius: 50%; border: 5px solid #fff; background: #2a0d12; display: grid; place-items: center;
}
.opname-stip { width: 56px; height: 56px; border-radius: 50%; background: #ff3b30; transition: all 0.2s; }
.opneem.neemt-op .opname-stip { width: 40px; height: 40px; border-radius: 8px; animation: puls 1s infinite; }
@keyframes puls { 50% { opacity: 0.5; } }
.wenslijst { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.wensregel { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.06); border-radius: 14px; padding: 6px 10px; font-size: 16px; }
.wensregel span { opacity: 0.7; }
.wensregel .kleurbol { width: 44px; height: 44px; font-size: 18px; }
.wenstekst { opacity: 1 !important; }

/* ---------- Meldingen ---------- */
#melding {
  position: fixed; left: 50%; top: 22%; transform: translateX(-50%); padding: 14px 26px; border-radius: 24px;
  background: var(--glas); border: 1px solid var(--rand); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: clamp(22px, 4vw, 32px); font-weight: 600; text-align: center; pointer-events: none;
  animation: wip 0.5s ease-out; max-width: calc(100vw - 32px);
}
#melding.groot {
  top: 14%; font-size: clamp(30px, 6vw, 54px); background: none; border: 0; white-space: nowrap;
  backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: 0 0 24px rgba(255, 211, 77, 0.8);
}
@keyframes wip { from { transform: translateX(-50%) scale(0.6); opacity: 0; } }
#flits { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#flits.aan { animation: flits 1.2s ease-out; }
@keyframes flits { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }

#vraag { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.5); padding: 16px; }
.vraag-doos { background: #1a1f3d; border: 1px solid var(--rand); border-radius: 26px; padding: 24px; max-width: 420px; text-align: center; }
.vraag-tekst { font-size: 22px; margin-bottom: 18px; }
.vraag-knoppen { display: flex; gap: 12px; justify-content: center; }
.vraag-knoppen button { min-width: 110px; height: 58px; border-radius: 18px; border: 0; font-size: 22px; font-weight: 600; }
.ja { background: #ff5f5f; }
.nee { background: rgba(255, 255, 255, 0.15); }

/* ---------- Wezens ---------- */
.kaart.nieuw-wezen { flex: 1; flex-direction: row; justify-content: center; gap: 12px; font-size: 20px; font-weight: 600;
  background: linear-gradient(135deg, rgba(156, 255, 138, 0.25), rgba(90, 200, 250, 0.25)); }
.wezenkaart { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 8px 10px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); flex-wrap: wrap; }
.wezenkaart img { width: 64px; height: 64px; object-fit: contain; animation: hup 1.6s ease-in-out infinite; }
.wezen-info { flex: 1; display: flex; flex-direction: column; min-width: 90px; }
.wezen-info b { font-size: 20px; }
.wezen-info span { opacity: 0.75; font-size: 15px; }
.wezen-knoppen { display: flex; gap: 6px; }
.wezen-knoppen .kleurbol { width: 48px; height: 48px; font-size: 20px; }
@keyframes hup { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px) rotate(-4deg); } }

/* ---------- Leven: jaartal, nieuws, verhaal ---------- */
.titelblok { flex: 1; min-width: 0; text-align: center; pointer-events: none; }
.titelblok #titel { flex: none; }
#jaar { font-size: 15px; opacity: 0.8; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); min-height: 1px; }
#verhaalknop { position: relative; }
.bolletje {
  position: absolute; top: -4px; right: -4px; min-width: 24px; height: 24px; border-radius: 12px; padding: 0 6px;
  background: #ff3b30; color: #fff; font-size: 14px; font-weight: 700; display: grid; place-items: center;
}
#nieuws { position: fixed; top: calc(max(12px, env(safe-area-inset-top)) + 72px); left: 16px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; z-index: 5; max-width: min(420px, calc(100vw - 32px)); }
.nieuwtje {
  display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 18px; font-size: 16px;
  background: var(--glas); border: 1px solid var(--rand); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: inschuif 0.4s ease-out; transition: opacity 0.5s, transform 0.5s;
}
.nieuwtje span { font-size: 28px; }
.nieuwtje.weg { opacity: 0; transform: translateX(-20px); }
@keyframes inschuif { from { opacity: 0; transform: translateX(-30px); } }
.verhaal-jaar { font-size: 18px; opacity: 0.8; margin: 4px 0 8px; }
.soortkaart { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); margin-bottom: 8px; }
.soortkaart img { width: 70px; height: 70px; object-fit: contain; animation: hup 1.6s ease-in-out infinite; }
.soortkaart img.dood { filter: grayscale(1) opacity(0.5); animation: none; }
.soort-info { flex: 1; min-width: 0; }
.soort-info b { font-size: 20px; }
.soort-stand { font-size: 15px; opacity: 0.85; }
.soort-tech { font-size: 22px; letter-spacing: 2px; margin-top: 4px; }
.soort-tech .dim { font-size: 14px; opacity: 0.6; letter-spacing: 0; }
.tijdlijn { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.gebeurtenis { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); cursor: pointer; }
.gebeurtenis.belang3 { background: rgba(255, 211, 77, 0.14); }
.gebeurtenis.belang1 { opacity: 0.75; }
.g-icoon { font-size: 26px; width: 34px; text-align: center; flex: none; }
.g-tekst { flex: 1; display: flex; flex-direction: column; font-size: 16px; }
.g-tekst small { opacity: 0.6; font-size: 13px; }
.gebeurtenis img { width: 40px; height: 40px; object-fit: contain; flex: none; }
#weg { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; padding: 16px; background: rgba(3, 4, 10, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.weg-doos { width: min(620px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 24px; border-radius: 28px; background: #141a3a; border: 1px solid var(--rand); text-align: center; }
.weg-doos h2 { margin: 0 0 6px; font-size: clamp(28px, 5vw, 40px); }
.weg-uitleg { font-size: 19px; opacity: 0.9; margin: 0 0 16px; }
.weg-lijst { display: flex; flex-direction: column; gap: 8px; text-align: left; margin-bottom: 18px; }
.weg-lijst .gebeurtenis { opacity: 0; animation: verschijn 0.6s ease-out forwards; }
@keyframes verschijn { from { opacity: 0; transform: translateY(12px) scale(0.95); } to { opacity: 1; transform: none; } }

/* ---------- Wolk: meenemen naar andere apparaten ---------- */
#wolkknop { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); opacity: 0.7; }
#wolkknop.bezig { animation: puls 1s infinite; }
#wolkpaneel { position: fixed; inset: 0; z-index: 26; display: grid; place-items: center; padding: 16px; background: rgba(3, 4, 10, 0.72); }
.wolk-link { display: flex; gap: 8px; align-items: center; margin: 8px 0; text-align: left; }
.wolk-link code { flex: 1; min-width: 0; overflow-wrap: anywhere; background: rgba(0, 0, 0, 0.35); padding: 10px 12px; border-radius: 12px; font-size: 14px; }
.maker-knop { position: relative; }
.botsing-teken { position: absolute; top: 4px; right: 8px; font-size: 30px; animation: puls 1.2s infinite; }
.versies { display: flex; gap: 12px; justify-content: center; margin: 14px 0 6px; flex-wrap: wrap; }
.versie-kaart { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 160px; padding: 10px; border-radius: 18px; border: 2px solid var(--rand); background: rgba(255, 255, 255, 0.06); }
.versie-kaart img, .versie-kaart .mini { width: 110px; height: 110px; object-fit: contain; }
.versie-kaart b { font-size: 17px; }
.versie-kaart span { font-size: 14px; opacity: 0.8; }
.versie-kaart:active { transform: scale(0.95); }

.huidkeuze { justify-content: center; margin-top: 14px; }
.wezen-knoppen .op-slot { opacity: 0.55; }
.huidkeuze .kaart { min-width: 84px; }
.wezen-knoppen .toverknop { background: radial-gradient(circle at 35% 30%, #fff3b0, #ffb84d 70%); box-shadow: 0 0 12px rgba(255, 211, 77, 0.6); }

/* ---------- Tekentafel ---------- */
#tekentafel {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 30%, #1e2550, #0a0d1f 75%); overflow-y: auto;
}
.tt-kop { width: 100%; max-width: 900px; display: flex; align-items: center; gap: 10px; }
.tt-titel { flex: 1; text-align: center; font-size: clamp(24px, 4vw, 34px); font-weight: 700; }
.tt-midden { flex: 1; min-height: 0; display: grid; place-items: center; width: 100%; }
.tt-vel {
  position: relative; width: min(calc(100vw - 32px), calc(100vh - 300px), 640px); aspect-ratio: 1; border-radius: 22px; overflow: hidden;
  background: #fffdf6; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(0, 0, 0, 0.05);
  background-image: radial-gradient(rgba(0, 0, 0, 0.07) 1.5px, transparent 1.5px); background-size: 28px 28px;
}
.tt-vel canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.tt-ogen { cursor: crosshair; }
.tt-gereedschap { width: 100%; max-width: 900px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tt-rij { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
.tt-kleuren .kleurbol { width: 46px; height: 46px; }
.tt-knop {
  width: 56px; height: 56px; border-radius: 16px; border: 2px solid transparent; background: rgba(255, 255, 255, 0.1);
  font-size: 26px; display: grid; place-items: center; padding: 0;
}
.tt-knop.aan { border-color: var(--goud); background: rgba(255, 211, 77, 0.18); }
.tt-maat i { display: block; border-radius: 50%; background: #fff; }
.tt-scheiding { width: 2px; height: 36px; background: rgba(255, 255, 255, 0.15); margin: 0 4px; }
.tt-klaar {
  min-width: 260px; height: 64px; border-radius: 22px; border: 0; font-size: 24px; font-weight: 700; color: #1b1035;
  background: linear-gradient(135deg, #ffd34d, #ff9de0); box-shadow: 0 6px 24px rgba(255, 211, 77, 0.35);
}
.tt-klaar:active { transform: scale(0.96); }
.tt-eigen { width: 100%; max-width: 900px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: center; flex: 1; }
.tt-voorbeeld {
  width: 220px; height: 220px; display: grid; place-items: end center; padding-bottom: 20px; border-radius: 50%;
  background: radial-gradient(circle at 50% 85%, rgba(156, 255, 138, 0.25), rgba(255, 255, 255, 0.04) 60%);
}
.tt-dier { width: calc(200px * var(--maat, 0.7)); max-height: calc(190px * var(--maat, 0.7)); object-fit: contain; transition: width 0.3s, max-height 0.3s; }
.tt-dier.gespiegeld { scale: -1 1; }
.tt-keuzes { flex: 1; min-width: 300px; }
.tt-keuzes .rij-titel { margin-top: 12px; }
.kaart .getal { font-size: 30px; font-weight: 700; }
.opneem.klein { width: 58px; height: 58px; border-width: 4px; }
.opneem.klein .opname-stip { width: 28px; height: 28px; }
.opneem.klein.neemt-op .opname-stip { width: 20px; height: 20px; }
.loop-lopen { animation: lopen 0.7s ease-in-out infinite; transform-origin: 50% 100%; }
.loop-huppen { animation: huppen 0.8s ease-in-out infinite; transform-origin: 50% 100%; }
.loop-zwemmen { animation: zwemmen 2.2s ease-in-out infinite; }
.loop-vliegen { animation: vliegen 0.25s ease-in-out infinite alternate, zweven 2.4s ease-in-out infinite; }
.loop-zweven { animation: zweven 2.6s ease-in-out infinite; }
@keyframes lopen { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-6px); } }
@keyframes huppen { 0%, 100% { transform: translateY(0) scaleY(0.88); } 50% { transform: translateY(-50px) scaleY(1.06); } }
@keyframes zwemmen { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(10px) rotate(6deg); } }
@keyframes vliegen { from { scale: 1 1; } to { scale: 1 0.9; } }
@keyframes zweven { 0%, 100% { translate: 0 -40px; } 50% { translate: 0 -64px; } }
.tt-dier.gespiegeld.loop-vliegen { animation: vliegen-sp 0.25s ease-in-out infinite alternate, zweven 2.4s ease-in-out infinite; }
@keyframes vliegen-sp { from { scale: -1 1; } to { scale: -1 0.9; } }

.klimaat-titel { margin: 14px 0 -4px 4px; font-size: 15px; opacity: 0.75; }
@media (max-width: 860px) {
  #dock { gap: 4px; }
  .gereedschap { width: 56px; }
  .gereedschap .icoon { font-size: 28px; }
  .gereedschap .label { font-size: 11px; }
}
@media (max-width: 560px) {
  .gereedschap { width: 64px; }
  .gereedschap .icoon { font-size: 28px; }
  .rond { width: 48px; height: 48px; font-size: 22px; }
  .kleurbol { width: 48px; height: 48px; }
  #paneel { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 96px); }
}

/* ---------- Veiligheid en voorlezen (panel ronde 2) ---------- */
/* Vasthouden om weg te gooien: een ring loopt vol. */
.houdknop { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.houdknop::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: conic-gradient(rgba(255, 95, 95, 0.55) calc(var(--p, 0) * 360deg), transparent 0); }
.opnieuw.houdknop { opacity: 0.8; text-decoration: none; padding: 12px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.08); }
.houd-ring { display: none; }
/* Woordjes onder de knoppen op de wezenkaart. */
.wezen-knoppen { flex-wrap: wrap; align-items: flex-start; }
.wezen-knoppen .wezenknop { width: 58px; height: 58px; flex-direction: column; display: inline-flex; align-items: center; justify-content: center; gap: 0; line-height: 1; }
.wezenknop small { font-size: 10px; font-weight: 600; margin-top: 3px; opacity: 0.85; white-space: nowrap; }
.wezen-knoppen .wezen-weg { margin-left: 18px; background: rgba(255, 95, 95, 0.12); }
/* ✋ draaien tijdens boetseren en verven */
#draaiknop { position: fixed; right: max(14px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); z-index: 6;
  width: 64px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 26px; }
#draaiknop small { font-size: 10px; font-weight: 600; }
#draaiknop.aan { background: var(--goud); color: #222; box-shadow: 0 0 18px rgba(255, 211, 77, 0.7); }
/* Je eigen planeet staat voorop en is iets groter. */
.maker-knop.eigen .mini { transform: scale(1.12); }
.maker-knop.eigen .maker-naam { color: var(--goud); }
.vraag-knoppen .ja::before { content: '✅ '; }
.vraag-knoppen .nee::before { content: '❌ '; }
.bak-lijst { margin: 10px 0; }
.bak-lijst .wolk-link span { flex: 1; }
/* Drie gezichtjes op de soortkaart: eten, water, warmte */
.meters { display: flex; gap: 8px; margin: 6px 0 2px; }
.meter { display: inline-flex; gap: 2px; align-items: center; border: 0; border-radius: 14px; padding: 6px 10px; font-size: 20px; background: rgba(255, 255, 255, 0.1); color: inherit; }
.meter.goed { background: rgba(156, 255, 138, 0.18); }
.meter.matig { background: rgba(255, 211, 77, 0.18); }
.meter.slecht { background: rgba(255, 95, 95, 0.25); }
/* Testomgeving (?sandbox=1) */
.zandbak-band { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: #ffd34d; color: #222; font-weight: 600; padding: 6px 14px; border-radius: 12px; font-size: 14px; z-index: 5; white-space: nowrap; }
#tijdknoppen { position: fixed; left: max(12px, env(safe-area-inset-left)); top: 84px; z-index: 6; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 16px; background: rgba(20, 22, 34, 0.85); border: 2px solid #ffd34d; }
#tijdknoppen button { border: 0; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 14px; font-weight: 600; background: rgba(255, 255, 255, 0.12); color: #fff; }
#tijdknoppen button.aan { background: #ffd34d; color: #222; }
#tijdknoppen.bezig { opacity: 0.5; pointer-events: none; }
.tk-titel { font-weight: 700; color: #ffd34d; text-align: center; }
.tk-scheiding { height: 4px; }
#tijdknoppen { display: grid; grid-template-columns: 1fr 1fr; }
#tijdknoppen .tk-titel, #tijdknoppen .tk-scheiding { grid-column: 1 / -1; }
#tijdknoppen [data-snel="600"] { grid-column: 1 / -1; }
/* Getekende icoontjes (Higgsfield) */
.ico { width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: middle; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.gereedschap .icoon .ico { width: 44px; height: 44px; transition: transform 0.15s; }
.gereedschap.aan .icoon .ico { transform: scale(1.12) rotate(-4deg); }
.gereedschap.wenk .icoon .ico { animation: wiebel 1.2s ease-in-out infinite; }
@keyframes wiebel { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg) scale(1.06); } 75% { transform: rotate(8deg) scale(1.06); } }
.kop-titel .ico { width: 30px; height: 30px; margin-right: 4px; }
.kaart.feest .groot .ico { width: 44px; height: 44px; }
@media (max-width: 860px) { .gereedschap .icoon .ico { width: 36px; height: 36px; } }
#tijdknoppen.dicht > :not(.tk-titel) { display: none; }
#tijdknoppen.dicht { display: block; padding: 4px; }
#tijdknoppen .tk-titel { background: none; color: #ffd34d; font-size: 15px; }
.kaart .groot .ico { width: 52px; height: 52px; }
.balk .rond .ico { width: 30px; height: 30px; }
.rond .ico { width: 34px; height: 34px; }
.rond.gedempt .ico, .rond.gedempt { opacity: 0.5; filter: grayscale(1); }
.rond.gedempt::after { content: ''; position: absolute; left: 20%; right: 20%; top: 50%; height: 4px; background: #ff5f5f; transform: rotate(-35deg); border-radius: 2px; }
#stemknop, #muziekknop { position: relative; }
#wolkknop .ico { width: 40px; height: 40px; }
.wezenknop .ico { width: 30px; height: 30px; }
/* Logo (Higgsfield) */
h1 .logo { width: min(640px, 82vw); height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)); animation: logo-zweef 5s ease-in-out infinite; }
@keyframes logo-zweef { 0%, 100% { transform: translateY(0) rotate(-0.6deg); } 50% { transform: translateY(-6px) rotate(0.6deg); } }
/* Sterrenhemel achter het startscherm (licht: alleen CSS, de 3D staat daar stil) */
#start {
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 72%, #cfe0ff, transparent),
    radial-gradient(1.5px 1.5px at 45% 30%, #fff, transparent), radial-gradient(1px 1px at 62% 82%, #fff, transparent),
    radial-gradient(2px 2px at 78% 22%, #ffe9a8, transparent), radial-gradient(1px 1px at 88% 60%, #fff, transparent),
    radial-gradient(1px 1px at 8% 88%, #fff, transparent), radial-gradient(1.5px 1.5px at 35% 52%, #ffd6f0, transparent),
    radial-gradient(1px 1px at 55% 8%, #fff, transparent), radial-gradient(1.5px 1.5px at 94% 92%, #cfe0ff, transparent),
    radial-gradient(ellipse at 20% 110%, rgba(120, 80, 220, 0.35), transparent 55%),
    radial-gradient(ellipse at 90% -10%, rgba(40, 140, 220, 0.3), transparent 50%),
    #05060f;
}
/* Bovenbalk: knoppen met een woordje eronder (kinderen lezen het plaatje, papa het woord) */
.balk .rond { width: 62px; height: 62px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; position: relative; }
.balk .rond .ico { width: 32px; height: 32px; }
.balk .rond small { font-size: 10px; font-weight: 600; line-height: 1; opacity: 0.9; }
/* Geluidmenu: twee grote schakelaars */
#geluidmenu { position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + 72px); right: max(12px, env(safe-area-inset-right)); z-index: 20;
  display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 20px; background: rgba(20, 22, 34, 0.94); border: 1px solid var(--rand); }
#geluidmenu .aan-uit { display: flex; align-items: center; gap: 12px; min-width: 190px; padding: 10px 16px; border-radius: 16px; border: 0; font: inherit; font-size: 20px; font-weight: 600; color: #fff;
  background: rgba(156, 255, 138, 0.22); }
#geluidmenu .aan-uit .ico { width: 36px; height: 36px; }
#geluidmenu .aan-uit::after { content: 'AAN'; margin-left: auto; font-size: 14px; color: #9cff8a; }
#geluidmenu .aan-uit.uit-gezet { background: rgba(255, 255, 255, 0.08); opacity: 0.75; }
#geluidmenu .aan-uit.uit-gezet::after { content: 'UIT'; color: #ff8a8a; }
@media (max-width: 560px) { .balk .rond { width: 52px; height: 52px; } .balk .rond small { display: none; } }
.soort-tech .slaapt { filter: grayscale(1); opacity: 0.55; }
#tijdknoppen .tk-fps { grid-column: 1 / -1; font-size: 12px; text-align: center; opacity: 0.8; }
#tijdknoppen.dicht .tk-fps { display: block; }
/* Wat wil jij erbij? (keuzekaarten voor de jongens) */
#kiesknop { margin: 18px auto 0; display: block; font-size: 20px; }
#kiezen { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(5, 6, 15, 0.82); padding: 16px; overflow-y: auto; }
.kies-doos { background: var(--glas, rgba(30, 32, 48, 0.95)); border: 1px solid var(--rand, rgba(255,255,255,0.15)); border-radius: 26px; padding: 22px; text-align: center; max-width: 520px; width: 100%; }
.kies-doos.breed { max-width: 900px; }
.kies-wie { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 16px 0; }
.kies-naam { font-size: 24px; min-width: 130px; }
.kies-kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0; }
.kies-kaart { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 20px; border: 3px solid transparent; background: rgba(255, 255, 255, 0.08); color: #fff; font: inherit; font-size: 17px; font-weight: 600; }
.kies-kaart .kies-plaat { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35)); }
.kies-kaart.aan { border-color: #ffd34d; background: rgba(255, 211, 77, 0.18); transform: scale(1.03); }
.kies-kaart .hartje { position: absolute; top: 6px; right: 10px; font-style: normal; font-size: 26px; display: none; }
.kies-kaart.aan .hartje { display: block; animation: wiebel 1s ease-in-out infinite; }
@media (max-width: 560px) { .kies-kaarten { grid-template-columns: repeat(2, 1fr); } .kies-kaart .kies-plaat { width: 90px; height: 90px; } }
.kies-doos { background: #1b1d2c; }
/* De grote kaart van een wezen */
img.tikbaar { cursor: pointer; }
#wezenkaart-groot { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; background: rgba(5, 6, 15, 0.8); padding: 14px; overflow-y: auto; }
.wk-doos { position: relative; background: #1b1d2c; border: 1px solid var(--rand); border-radius: 26px; padding: 20px; width: min(620px, 100%); max-height: calc(100vh - 28px); overflow-y: auto; }
.wk-dicht { position: absolute; top: 12px; right: 12px; }
.wk-kop { display: flex; gap: 16px; align-items: center; }
.wk-plaatje { width: 150px; height: 150px; object-fit: contain; animation: hup 1.8s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.4)); flex-shrink: 0; }
.wk-plaatje.dood { filter: grayscale(1) opacity(0.6); animation: none; }
.wk-titel h2 { margin: 0 0 6px; font-size: 30px; }
.wk-sub { opacity: 0.8; font-size: 15px; margin-top: 2px; }
.wk-cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0 8px; }
.wk-cijfer { background: rgba(255, 255, 255, 0.07); border-radius: 14px; padding: 10px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.wk-cijfer b { font-size: 20px; }
.wk-cijfer span { font-size: 12px; opacity: 0.8; }
.wk-cijfer.wijd { grid-column: 1 / -1; }
.wk-meters { display: flex; gap: 8px; margin: 8px 0; }
.wk-extra { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.wk-extra span { background: rgba(255, 211, 77, 0.15); border-radius: 12px; padding: 6px 10px; font-size: 14px; }
.wk-doos h3 { margin: 14px 0 6px; font-size: 17px; opacity: 0.9; }
.wk-ontdekt { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-ontdekt span { display: inline-flex; gap: 4px; align-items: center; background: rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 5px 9px; font-size: 13px; }
.wk-ontdekt i { font-style: normal; font-size: 17px; }
.wk-momenten { display: flex; flex-direction: column; gap: 6px; }
.wk-momenten .gebeurtenis { text-align: left; border: 0; color: inherit; font: inherit; width: 100%; }
.wk-knoppen { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 560px) { .wk-cijfers { grid-template-columns: repeat(2, 1fr); } .wk-plaatje { width: 100px; height: 100px; } }
/* Ontdekkingsboom (zoals de technologieboom in Civilization) */
.soort-tech, .wk-ontdekt { cursor: pointer; }
#ontdekkingsboom { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(5, 6, 15, 0.85); padding: 12px; }
.ob-doos { background: #161828; border: 1px solid var(--rand); border-radius: 24px; width: min(1100px, 100%); max-height: calc(100vh - 24px); display: flex; flex-direction: column; overflow: hidden; }
.ob-kop { display: flex; align-items: center; gap: 12px; padding: 14px 16px 8px; }
.ob-kop img { width: 54px; height: 54px; object-fit: contain; }
.ob-kop h2 { margin: 0; font-size: 22px; }
.ob-kop small { opacity: 0.75; }
.ob-kop .ob-dicht { margin-left: auto; }
.ob-veld { overflow: auto; flex: 1; min-height: 0; -webkit-overflow-scrolling: touch; }
.ob-boom { position: relative; margin: 0 auto; }
.ob-boom svg { position: absolute; inset: 0; pointer-events: none; }
.ob-boom path { fill: none; stroke-width: 4; stroke: rgba(255, 255, 255, 0.12); }
.ob-boom path.open { stroke: rgba(255, 255, 255, 0.55); stroke-dasharray: 8 6; }
.ob-boom path.klaar { stroke: #ffd34d; }
.ob-boom path.of { stroke-dasharray: 4 6; }
.ob-boom .of-tekst { fill: rgba(255, 255, 255, 0.6); font-size: 13px; font-weight: 600; text-anchor: middle; }
.knoop { position: absolute; width: 128px; height: 84px; border-radius: 18px; border: 2px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05); color: #fff; font: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px; opacity: 0.45; filter: grayscale(0.8); }
.knoop .ic { font-size: 26px; line-height: 1.1; }
.knoop b { font-size: 13px; line-height: 1.1; text-align: center; }
.knoop small { font-size: 11px; opacity: 0.85; }
.knoop.ontdekt { opacity: 1; filter: none; background: linear-gradient(160deg, rgba(255, 211, 77, 0.28), rgba(255, 154, 58, 0.18)); border-color: rgba(255, 211, 77, 0.6); }
.knoop.volgende { opacity: 1; filter: none; border: 2px dashed #9cff8a; background: rgba(156, 255, 138, 0.1); animation: wiebel 2.4s ease-in-out infinite; }
.knoop.slaapt { opacity: 0.8; filter: grayscale(1); border-style: dotted; }
.knoop.gekozen { box-shadow: 0 0 0 3px #fff, 0 0 18px rgba(255, 255, 255, 0.5); }
.knoop .balk { display: block; width: 90px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.15); margin-top: 3px; overflow: hidden; }
.knoop .balk i { display: block; height: 100%; background: #9cff8a; }
.ob-uitleg { padding: 12px 18px 16px; font-size: 16px; line-height: 1.35; border-top: 1px solid var(--rand); min-height: 56px; }
.knoop .ic .ob-ico { width: 40px; height: 40px; }
.knoop.slot .ob-ico { filter: grayscale(1) opacity(0.7); }
.soort-tech .ico { width: 24px; height: 24px; }
.wk-ontdekt i .ico { width: 22px; height: 22px; }

/* Geschiedenisgrafiek in het verhaalboek */
.grafiek { margin-top: 10px; background: rgba(255,255,255,0.75); border-radius: 14px; padding: 8px 8px 6px; }
.grafiek-kop { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.grafiek svg { width: 100%; max-width: 560px; margin: 0 auto; height: auto; display: block; overflow: visible; }
.gr-hulp { stroke: rgba(0,0,0,0.1); stroke-dasharray: 3 3; }
.gr-as { stroke: rgba(0,0,0,0.35); }
.gr-getal { font-size: 9px; fill: rgba(0,0,0,0.5); text-anchor: end; }
.gr-lijn { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gr-lijn.dood { stroke-dasharray: 4 3; opacity: 0.55; }
.gr-moment { cursor: pointer; }
.gr-moment circle { fill: #fff; stroke: rgba(0,0,0,0.2); }
.gr-moment text { font-size: 10px; text-anchor: middle; }
.grafiek-uitleg { font-size: 13px; color: #555; margin-top: 4px; min-height: 18px; }

/* Verlies van een eigen wezen: rustig, met de tekening (panelgesprek 2) */
#verlies { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(10, 14, 30, 0.72); padding: 16px; animation: verliesIn 0.8s ease; }
@keyframes verliesIn { from { opacity: 0; } to { opacity: 1; } }
.verlies-doos { background: #f6f1e7; color: #3b3a46; border-radius: 22px; padding: 22px; max-width: 440px; width: 100%; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.4); }
.verlies-doos img { width: 180px; height: 180px; object-fit: contain; filter: saturate(0.6); background: #fff; border-radius: 16px; padding: 8px; }
.verlies-doos h2 { margin: 12px 0 6px; font-size: 26px; }
.verlies-tekst { font-size: 18px; line-height: 1.45; margin: 0 0 16px; }
.verlies-knoppen { display: flex; flex-direction: column; gap: 10px; }
.verlies-knoppen button { min-height: 52px; font-size: 18px; }

/* Ontdekkingsboom, korte weergave */
.ob-kort { padding: 6px 4px 10px; }
.ob-kort h3 { font-size: 18px; margin: 10px 0 8px; }
.ob-kunnen { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-kort .knoop { position: static; }
.ob-kort .knoop.klein { width: 60px; height: 60px; min-width: 48px; padding: 4px; border-radius: 14px; display: grid; place-items: center; }
.ob-kort .knoop.klein .ob-ico { width: 46px; height: 46px; }
.ob-bezig { display: flex; flex-wrap: wrap; gap: 10px; }
.ob-kort .knoop.groot { width: 170px; min-height: 120px; padding: 10px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 16px; }
.ob-kort .knoop.groot .ob-ico { width: 64px; height: 64px; }
.ob-kort .knoop.groot .balk { width: 100%; }
.ob-heel { margin-top: 14px; min-height: 48px; font-size: 16px; }
/* Leesbaarheid op de tablet (panelgesprek 2) */
.verhaal-meer { margin-top: 6px; }
.meer-knop { margin-top: 10px; min-height: 48px; font-size: 16px; width: 100%; }
.gr-getal { font-size: 11px; }
.gr-moment text { font-size: 13px; }
.grafiek-uitleg { font-size: 15px; }
.ob-kort .knoop { opacity: 1; filter: none; }
.ob-kort .knoop.klein { background: linear-gradient(160deg, rgba(255, 211, 77, 0.28), rgba(255, 154, 58, 0.18)); border-color: rgba(255, 211, 77, 0.6); }
.ob-kort .knoop.groot { border: 2px dashed #9cff8a; background: rgba(156, 255, 138, 0.1); }
.ob-kort .knoop.groot b { font-size: 16px; }
.wezenknop small { font-size: 12px; }
.wk-cijfer span { font-size: 15px; }
.wk-ontdekt span { font-size: 16px; }
#verlies { overflow-y: auto; display: block; }
.verlies-doos { margin: 24px auto; }
.verlies-doos img { width: min(180px, 28vh); height: min(180px, 28vh); }

/* Gebed: een volk roept het kind (rustig, geen alarm; panelgesprek 2) */
#gebed { position: fixed; left: 50%; top: 86px; transform: translateX(-50%); z-index: 22; display: flex; align-items: center; gap: 12px; padding: 10px 12px; max-width: min(640px, calc(100vw - 32px)); background: rgba(255, 248, 230, 0.96); color: #3b3a46; border-radius: 22px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); animation: gebedIn 0.6s ease; }
@keyframes gebedIn { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }
#gebed > img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.gebed-tekst { display: flex; flex-direction: column; gap: 2px; font-size: 17px; line-height: 1.3; flex: 1; min-width: 0; }
.gebed-tekst small { font-size: 13px; opacity: 0.7; }
.gebed-knoppen { display: flex; gap: 8px; flex: none; }
.gebed-knoppen button { width: 96px; min-height: 96px; border-radius: 18px; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: inherit; cursor: pointer; }
.gebed-knoppen button span { font-size: 38px; line-height: 1; }
.gebed-knoppen button small { font-size: 13px; font-weight: 700; text-align: center; }
.gebed-ja { background: linear-gradient(160deg, #ffe58a, #ffb86b); color: #3b2a10; }
.gebed-nee { background: rgba(0, 0, 0, 0.07); color: #555; }
@media (max-width: 560px) { #gebed { flex-wrap: wrap; justify-content: center; } }
/* Gebed: niet half zo breed door left:50% (dan krimpt het kaartje), maar gewoon in het midden. */
#gebed { left: 16px; right: 16px; margin: 0 auto; width: fit-content; transform: none; animation-name: gebedIn2; }
@keyframes gebedIn2 { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.gebed-tekst { min-width: 180px; }

/* QR-codes om een tablet te koppelen (zoals bij KIZZO) */
.wolk-qrs { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 10px 0; }
.wolk-qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wolk-qr svg { width: min(220px, 70vw); height: auto; background: #fff; border-radius: 14px; padding: 6px; }
.wolk-qr figcaption { font-weight: 700; font-size: 16px; }
.wolk-qr .wolk-kopie { min-height: 40px; font-size: 14px; }

/* Eigen planeten per speler (3 plekken); op papa's laptop eerst de speler kiezen */
#spelerkeuze { display: flex; gap: 8px; justify-content: center; margin: 4px 0 2px; }
#spelerkeuze[hidden] { display: none; }
.speler-tab { font: inherit; font-weight: 700; font-size: 16px; padding: 8px 18px; border-radius: 999px; border: 2px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); color: #fff; cursor: pointer; min-height: 44px; }
.speler-tab.aan { background: var(--goud, #ffd34d); color: #222; border-color: transparent; }
.mini.leeg { font-size: 44px; }

/* DNA sturen en ontvangen */
#dna { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(10, 14, 30, 0.7); padding: 16px; overflow-y: auto; }
.dna-doos { background: #f6f1e7; color: #3b3a46; border-radius: 22px; padding: 20px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.4); }
.dna-doos img { width: min(160px, 26vh); height: min(160px, 26vh); object-fit: contain; }
.dna-doos h2 { margin: 8px 0 6px; font-size: 24px; }
.dna-doos p { font-size: 18px; line-height: 1.4; margin: 0 0 14px; }
.dna-knoppen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 10px; }
.dna-knoppen button { min-height: 56px; min-width: 120px; font-size: 18px; }

/* Kijkstand (etalage op de website van een kind) en planeten van een ander om te bekijken */
.etalage-spelen { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; }
.etalage-spelen button { min-height: 56px; font-size: 20px; padding: 0 28px; }
.ouder-link { color: rgba(255,255,255,0.6); font-size: 14px; }
body.alleen-kijken #wensknop, body.alleen-kijken #terug { display: none; }
body.kijkstand #kiesknop, body.kijkstand #wolkknop { display: none; }