/* Denkmaat — design system. Rustig, premium, warm (Apple/Pixar). 90% canvas/wit/ink, 10% accent. */
:root{
  /* basis */
  --canvas:#FAFBF3; --white:#FFFFFF; --ink:#243047; --muted:#6B7280; --line:#E6EAF0;
  /* accenten (spaarzaam) */
  --aqua:#28C8EB; --blue:#5EA9FF; --gold:#F3C14B; --purple:#7C5CFF;
  /* zachte tinten (voor sfeervlakken) */
  --t-aqua:#E6F7FB; --t-sky:#EAF2FF; --t-lemon:#FFF6D6; --t-lilac:#F3EEFF; --t-peach:#FFE9E2; --t-bos:#E7F5EC;
  /* systeem */
  --radius:22px; --radius-sm:14px;
  --sh-sm:0 1px 2px rgba(36,48,71,.05), 0 6px 16px -8px rgba(36,48,71,.10);
  --sh-md:0 2px 4px rgba(36,48,71,.05), 0 22px 44px -22px rgba(36,48,71,.22);
}
@media (prefers-color-scheme:dark){
  :root{ --canvas:#12151c; --white:#1b2029; --ink:#eaf0f7; --muted:#9aa6b6; --line:#2a3140;
         --t-aqua:#122a30;--t-sky:#182233;--t-lemon:#2a2617;--t-lilac:#221d33;--t-peach:#2c2019;--t-bos:#16261d; }
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:"Manrope",ui-rounded,-apple-system,"Segoe UI",system-ui,sans-serif;
  color:var(--ink); background:var(--canvas); line-height:1.55; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.wrap{ max-width:1200px; margin:0 auto; padding:26px 22px 60px; }

/* typografie */
h1{ font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:800; letter-spacing:-.02em; line-height:1.08; }
h2{ font-size:1.35rem; font-weight:800; letter-spacing:-.01em; }
h3{ font-size:1.1rem; font-weight:700; }
.lead{ color:var(--ink); font-size:1.15rem; font-weight:600; margin-top:6px; }
.muted{ color:var(--muted); }
.small{ font-size:.9rem; color:var(--muted); }

/* merk */
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:82px; width:auto; }
@media (max-width:600px){ .brand img{ height:60px; } }

/* knoppen */
.btn{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:800; font-size:1rem;
  padding:13px 22px; border-radius:16px; color:#fff; border:none; cursor:pointer;
  background:var(--accent,var(--blue)); box-shadow:0 10px 22px -10px rgba(36,48,71,.5), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .14s, filter .14s; }
.btn:hover{ transform:translateY(-2px); filter:brightness(1.04); }
.btn.ghost{ background:var(--white); color:var(--ink); border:1.5px solid var(--line); box-shadow:var(--sh-sm); }

/* kaarten */
.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--sh-sm); }

/* ---- ouder-home ---- */
.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; }
.topbar .actions{ display:flex; gap:10px; }
.iconbtn{ width:44px; height:44px; border-radius:50%; background:var(--white); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; text-decoration:none; box-shadow:var(--sh-sm); }

.home{ display:grid; grid-template-columns:minmax(260px,1fr) minmax(0,1.7fr); gap:40px; align-items:start; }
@media (max-width:820px){ .home{ grid-template-columns:1fr; gap:24px; } }
.intro .desc{ color:var(--muted); margin-top:14px; font-size:1.02rem; max-width:34ch; }
.safe{ display:flex; gap:12px; align-items:flex-start; margin-top:26px; padding:16px 18px; border-radius:var(--radius-sm);
  background:var(--t-bos); border:1px solid var(--line); }
.safe .s-ic{ font-size:1.3rem } .safe b{ color:var(--ink) } .safe p{ color:var(--muted); font-size:.9rem; margin-top:2px }

.kids{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.kid-card{ position:relative; border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--ink);
  background:var(--white); border:1px solid var(--line); box-shadow:var(--sh-md); display:flex; flex-direction:column;
  transition:transform .16s, box-shadow .16s; }
.kid-card:hover{ transform:translateY(-4px); box-shadow:0 3px 8px rgba(36,48,71,.06),0 30px 56px -26px rgba(36,48,71,.34); }
.kid-hero{ position:relative; aspect-ratio:1/1; min-height:230px; display:flex; align-items:center; justify-content:center;
  background:var(--soft,#eef); background-size:cover; background-position:center; overflow:hidden; }
.kid-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(255,255,255,.16), transparent 55%); }
.kid-hero .emoji{ font-size:5rem; filter:drop-shadow(0 10px 18px rgba(36,48,71,.25)); position:relative; z-index:1; }
.kid-hero .kid-portret{ position:relative; z-index:1; width:58%; max-width:150px; aspect-ratio:1; border-radius:50%; object-fit:cover;
  border:4px solid #fff; box-shadow:0 12px 26px -8px rgba(36,48,71,.55); }
/* Vangnet (2026-08-07): een companion-portret is een avatar — nooit op ware 1024px-grootte tonen als een
   container geen eigen maat heeft. Specifieke regels (.kid-portret, .comp img, #hcomp img, …) winnen hier gewoon van. */
img[src*="/companions/"]{ max-width:160px; height:auto; }
/* "Ga verder"-ingang (thuiskomen) — prominente kaart bovenaan de home voor het laatst-actieve kind */
.verder{ margin:0 0 18px; }
.verder-card{ display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-left:5px solid var(--accent,#5EA9FF);
  border-radius:18px; padding:12px 16px; box-shadow:var(--sh-sm); transition:transform .15s, box-shadow .15s; }
.verder-card:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); }
.verder-portret{ width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none; background:var(--soft,#eef); box-shadow:var(--sh-sm); }
.verder-txt{ display:flex; flex-direction:column; gap:2px; }
.verder-txt b{ font-weight:800; } .verder-txt span{ color:var(--muted); font-size:.9rem; }
.kid-badge{ position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; font-size:1.15rem; box-shadow:var(--sh-sm); }
.kid-body{ padding:16px 18px 18px; }
.kid-body h2{ color:var(--accent); }
.kid-meta{ color:var(--muted); font-size:.92rem; margin:2px 0 14px; }
.kid-meta .comp{ display:block; }
.kid-cta{ display:inline-flex; align-items:center; gap:8px; font-weight:800; color:#fff; background:var(--accent);
  padding:11px 18px; border-radius:14px; box-shadow:0 10px 20px -10px var(--accent); }

.add{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:18px; padding:22px; border-radius:var(--radius);
  border:2px dashed var(--line); color:var(--muted); text-decoration:none; background:transparent; font-weight:700; }
.add:hover{ border-color:var(--blue); color:var(--ink); }
.add .plus{ width:40px;height:40px;border-radius:50%;background:var(--t-lilac);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--purple) }

/* thema's */
.themes-title{ margin:34px 0 12px; }
.themes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
.theme{ border-radius:var(--radius-sm); padding:18px 14px; text-align:center; border:1px solid var(--line); box-shadow:var(--sh-sm);
  font-weight:700; color:var(--ink); }
.theme .e{ font-size:1.7rem; display:block; margin-bottom:4px; }
.t-oceaan{ background:var(--t-aqua) } .t-sterren{ background:var(--t-lilac) } .t-bos{ background:var(--t-bos) } .t-zon{ background:var(--t-lemon) }

.footvals{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); }
.footvals .v b{ display:block; color:var(--ink); } .footvals .v p{ color:var(--muted); font-size:.88rem; margin-top:2px; }

/* ═══ Speelse laag & beweging (v2 design-overhaul) — respecteert prefers-reduced-motion ═══ */
@keyframes dm-pop{ 0%{transform:scale(.7); opacity:0} 60%{transform:scale(1.06)} 100%{transform:scale(1); opacity:1} }
@keyframes dm-fadeup{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)} }
@keyframes dm-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes dm-confetti{ to{ transform:translateY(118vh) rotate(680deg); } }
@keyframes dm-sheen{ from{background-position:-140% 0} to{background-position:140% 0} }

.btn:active{ transform:scale(.97); }
.btn.big{ font-size:1.15rem; padding:16px 26px; border-radius:20px; }

/* zachte, gestaffelde entree van kaarten/tegels */
@media (prefers-reduced-motion: no-preference){
  .kid-card, .tile, .adv, .ccard{ animation:dm-fadeup .5s cubic-bezier(.2,.7,.2,1) both; }
  .kids .kid-card:nth-child(2){ animation-delay:.06s } .kids .kid-card:nth-child(3){ animation-delay:.12s }
  .kids .kid-card:nth-child(4){ animation-delay:.18s } .kids .kid-card:nth-child(5){ animation-delay:.24s }
  .grid2 .tile:nth-child(2){ animation-delay:.05s } .grid2 .tile:nth-child(3){ animation-delay:.1s }
  .grid2 .tile:nth-child(4){ animation-delay:.15s } .grid2 .tile:nth-child(5){ animation-delay:.2s }
  .grid2 .tile:nth-child(6){ animation-delay:.25s }
  .float{ animation:dm-float 4s ease-in-out infinite; }
}

/* splash / merk-moment */
.splash{ position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:radial-gradient(130% 120% at 50% 32%, var(--t-sky), var(--canvas) 70%); transition:opacity .55s ease, visibility .55s; }
.splash img{ height:104px; width:auto; animation:dm-pop .6s cubic-bezier(.2,.8,.2,1) both; }
.splash .tag{ color:var(--muted); font-weight:700; letter-spacing:.01em; opacity:0; animation:dm-fadeup .6s ease .3s both; }
.splash.hide{ opacity:0; visibility:hidden; }
@media (prefers-reduced-motion: reduce){ .splash img{ animation:none } .splash .tag{ animation:none; opacity:1 } }

/* confetti (beloning) */
.confetti{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:60; }
.confetti i{ position:absolute; top:-12vh; width:9px; height:14px; border-radius:2px; will-change:transform;
  animation:dm-confetti linear forwards; }
@media (prefers-reduced-motion: reduce){ .confetti{ display:none } }

/* premium accent-knop met zachte glans */
.btn.shine{ position:relative; overflow:hidden; }
.btn.shine::after{ content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  background-size:220% 100%; animation:dm-sheen 3.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .btn.shine::after{ animation:none; opacity:0 } }