:root{
  --pink:#B01E5A;--pink-light:#D4316E;--pink-dark:#7A1040;
  --blue-locker:#BDD5EA;--blue-light:#D5E8F5;--blue-dark:#7AAAC8;
  --purple:#C8BAE8;--purple-mid:#9B8AC0;--purple-dark:#5A3F8A;
  --green:#06D6A0;--red:#EF233C;--yellow:#F5A623;--orange:#F5A623;
  --bg:#F7F4FC;--card-bg:#fff;--text:#1A0D2E;--text-dim:#6A5080;
  --radius:18px;--radius-sm:12px;--shadow:0 4px 20px rgba(0,0,0,0.12);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body{font-family:'Nunito',sans-serif;background:#E8E0F5;min-height:100vh;display:flex;align-items:center;justify-content:center;}
#app{width:390px;height:844px;max-height:100vh;position:relative;overflow:hidden;border-radius:36px;box-shadow:0 24px 64px rgba(0,0,0,0.25);background:var(--bg);}
@media(max-height:860px){#app{border-radius:0;height:100vh;width:100vw;max-width:430px;}}

/* SCREENS */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .25s;overflow:hidden;}
.screen.active{opacity:1;pointer-events:all;}

/* ── TOP BAR ── */
.top-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:48px 16px 10px;flex-shrink:0;
}
.top-bar.hidden{display:none;}

/* CATERPILLAR ENERGY */
.caterpillar-wrap{display:flex;align-items:center;gap:0;}
.caterpillar-face{
  width:44px;height:44px;border-radius:50%;
  background:#B01E5A;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 3px 10px rgba(176,30,90,.4);
  position:relative;z-index:2;
}
.caterpillar-face svg { display:block; }
.caterpillar-track{
  height:28px;
  border-radius:0 99px 99px 0;
  background:linear-gradient(90deg,#d0a0d0,#C8BAE8,#BDD5EA);
  display:flex;align-items:center;
  padding:0 6px 0 4px;
  gap:3px;
  flex:1;
  max-width:200px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.1);
}
.cater-seg{
  width:20px;height:20px;border-radius:4px;
  background:transparent;
  transition:background .4s;
  flex-shrink:0;
}
.cater-seg.filled:nth-child(1){background:#C0224A;}
.cater-seg.filled:nth-child(2){background:#C42A30;}
.cater-seg.filled:nth-child(3){background:#D94020;}
.cater-seg.filled:nth-child(4){background:#E05515;}
.cater-seg.filled:nth-child(5){background:#E86A10;}
.cater-seg.filled:nth-child(6){background:#F08015;}
.cater-seg.filled:nth-child(7){background:#F5A020;}
.cater-seg.filled:nth-child(8){background:#F5A623;}

/* JASPER AVATAR */
.jasper-avatar{
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.jasper-avatar img{
  width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:top;
  border:3px solid var(--pink);box-shadow:0 2px 10px rgba(192,34,74,.3);
}
.jasper-avatar span{font-size:10px;font-weight:800;color:var(--pink);}

/* NOTEPAD BTN */
.notepad-fab{
  position:absolute;bottom:16px;right:12px;
  width:56px;height:56px;
  background:transparent;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:50;transition:transform .2s;
}
.notepad-fab:active{transform:scale(.88);}
.notepad-fab.hidden{display:none;}

/* ── SPLASH ── */
#screen-splash{
  background:linear-gradient(160deg,#1A0D2E 0%,#2A1845 100%);
  align-items:center;justify-content:center;gap:20px;text-align:center;padding:40px 32px;
}
.splash-icon{font-size:72px;animation:pulse 2s ease infinite;}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.07);}}
.splash-title{font-family:'Baloo 2',cursive;font-size:36px;color:var(--yellow);line-height:1.1;}
.splash-sub{font-size:14px;color:rgba(255,255,255,.6);max-width:280px;line-height:1.6;}
.splash-case{
  background:rgba(255,255,255,.07);border-radius:var(--radius);
  padding:16px 20px;font-size:13px;color:rgba(255,255,255,.8);
  line-height:1.7;text-align:left;border-left:4px solid var(--pink);
  max-height:200px;overflow-y:auto;
}

/* ── STORY ── */
#screen-story{background:linear-gradient(180deg,#0D1B2A,#1B2A3B);}
.story-char{
  flex:1;display:flex;align-items:flex-end;justify-content:center;
  position:relative;padding:0 40px 0;
}
.story-char img{max-height:300px;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(0,0,0,.5));}
.story-bubble{
  position:absolute;top:16px;left:16px;right:148px;
  background:#fff;color:var(--text);border-radius:16px 16px 16px 4px;
  padding:14px 16px;font-size:13px;line-height:1.6;
  box-shadow:var(--shadow);
}
.story-bubble::after{content:'';position:absolute;bottom:-8px;left:16px;
  border:8px solid transparent;border-top-color:#fff;border-bottom:0;}
.story-dots{display:flex;gap:5px;justify-content:center;margin-top:8px;}
.story-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .3s;}
.story-dot.active{background:var(--pink);width:20px;border-radius:4px;}
.story-actions{padding:16px 20px 28px;display:flex;flex-direction:column;gap:10px;}

/* ── NOTEPAD INTRO ── */
#screen-notepad-intro{
  background:linear-gradient(180deg,#3D1F6E,#2A1845);
  align-items:center;justify-content:center;padding:32px 24px;gap:20px;text-align:center;
}
.notepad-big{font-size:72px;animation:bounce .8s ease infinite alternate;}
@keyframes bounce{from{transform:translateY(0);}to{transform:translateY(-10px);}}
.notepad-intro-title{font-family:'Baloo 2',cursive;font-size:26px;color:var(--yellow);}
.notepad-intro-text{font-size:14px;color:rgba(255,255,255,.75);line-height:1.7;max-width:300px;}
.notepad-entries-preview{width:100%;display:flex;flex-direction:column;gap:8px;}
.note-pill{background:rgba(255,255,255,.1);border-radius:10px;padding:10px 14px;font-size:13px;color:#fff;text-align:left;border-left:3px solid var(--yellow);}
.note-pill strong{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--yellow);margin-bottom:2px;}

/* ── GAMES MAP ── */
#screen-map{background:var(--bg);}
.map-header{padding:48px 20px 12px;text-align:center;}
.map-header h1{font-family:'Baloo 2',cursive;font-size:26px;color:var(--text);}
.map-header p{font-size:13px;color:var(--text-dim);margin-top:2px;}
.map-list{flex:1;padding:12px 16px 80px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;}
.map-item{
  background:#fff;border-radius:var(--radius);padding:14px 16px;
  display:flex;align-items:center;gap:14px;cursor:pointer;
  border:2px solid transparent;transition:all .2s;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.map-item:hover{border-color:var(--pink);transform:translateY(-2px);}
.map-item.done{border-color:var(--green);background:#F0FBF7;}
.map-item.done .map-status{color:var(--green);}
.map-item.locked{opacity:.35;cursor:not-allowed;}
.map-item.locked:hover{transform:none;border-color:transparent;}
.map-item.next{border-color:var(--pink);box-shadow:0 4px 16px rgba(192,34,74,.15);}
.map-item.next .map-status{color:var(--pink);font-size:24px;}
.map-icon{font-size:32px;flex-shrink:0;}
.map-info h3{font-size:15px;font-weight:800;color:var(--text);}
.map-info p{font-size:11px;color:var(--text-dim);}
.map-status{margin-left:auto;font-size:20px;}

/* ── BUTTONS ── */
.btn{padding:13px 22px;border-radius:var(--radius-sm);border:none;font-family:'Nunito',sans-serif;font-size:15px;font-weight:800;cursor:pointer;transition:all .2s;text-align:center;width:100%;}
.btn:active{transform:scale(.96);}
.btn-pink{background:var(--pink);color:#fff;}
.btn-pink:hover{background:var(--pink-light);}
.btn-purple{background:var(--purple);color:#fff;}
.btn-green{background:var(--green);color:#fff;}
.btn-red{background:var(--red);color:#fff;}
.btn-outline{background:transparent;color:var(--text);border:2px solid rgba(0,0,0,.15);}

/* ── GAME HEADER ── */
/* 82px bovenmarge: de vaste energiebalk is 74px hoog en dekte titel + terugknop af. */
.game-hdr{padding:82px 16px 10px;display:flex;align-items:center;gap:10px;flex-shrink:0;}
.back-btn{width:34px;height:34px;border-radius:10px;background:rgba(0,0,0,.07);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.back-btn:hover{background:rgba(0,0,0,.12);}
.game-hdr-info{flex:1;}
.game-hdr-info h2{font-size:17px;font-weight:900;color:var(--text);}
.game-hdr-info p{font-size:11px;color:var(--text-dim);}
.progress-dots{display:flex;gap:4px;padding:6px 16px;}
.prog-dot{flex:1;height:5px;border-radius:99px;background:rgba(0,0,0,.1);transition:background .3s;}
.prog-dot.done{background:var(--green);}
.prog-dot.cur{background:var(--pink);}

/* ── MEMORY: LOCKERS ── */
#screen-memory{background:var(--bg);display:flex;flex-direction:column;}
.memory-scroll{flex:1;overflow-y:auto;padding:6px 14px 8px;-webkit-overflow-scrolling:touch;min-height:0;}
.locker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.locker-card{
  height:160px;border-radius:12px;cursor:pointer;
  position:relative;transform-style:preserve-3d;transition:transform .5s;
}
.locker-card.flipped{transform:rotateY(180deg);}
.locker-card.matched{pointer-events:none;}
.locker-front,.locker-back{
  position:absolute;inset:0;border-radius:12px;
  backface-visibility:hidden;overflow:hidden;
}
/* FRONT = gesloten kluisje */
.locker-front{
  background:var(--pink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:3px solid var(--pink-dark);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.2);
}
.locker-card.matched .locker-front{background:var(--blue-locker);border-color:var(--blue-dark);}
.locker-svg{width:65%;height:65%;}
/* BACK = tekst van de reactie */
.locker-back{
  transform:rotateY(180deg);
  background:#fff;border:3px solid var(--blue-locker);
  display:flex;flex-direction:column;padding:8px;
  overflow:hidden;
}
.locker-back .react-who{
  font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;
  color:var(--pink);margin-bottom:4px;flex-shrink:0;
}
.locker-back .react-text{
  font-size:9px;font-weight:700;color:var(--text);line-height:1.4;
  overflow-y:auto;flex:1;
  -webkit-overflow-scrolling:touch;
}
.locker-card.matched .locker-back{border-color:var(--green);}

/* JUDGMENT PANEL */
/* Bij een match staan de reactie en de keuzeknoppen midden op het scherm,
   niet meer als balk onderaan. */
.judgment-bar{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:calc(100% - 32px);max-width:340px;z-index:60;
  background:#fff;border-radius:18px;
  padding:16px 14px;
  box-shadow:0 12px 40px rgba(0,0,0,.28);
}
.judgment-bar.hidden{display:none;}
.judgment-bar .jb-label{font-size:11px;color:var(--text-dim);margin-bottom:6px;text-align:center;font-weight:700;}
.judgment-reaction{
  background:var(--bg);border-radius:10px;padding:9px 12px;
  font-size:12px;font-weight:700;text-align:center;margin-bottom:10px;
  border:2px solid rgba(107,63,160,.2);line-height:1.4;color:var(--text);
}
.judge-btns{display:flex;gap:8px;}
.judge-btn{
  flex:1;padding:11px 6px;border-radius:10px;border:none;cursor:pointer;
  font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;
  transition:all .2s;line-height:1.3;text-align:center;
}
.judge-btn:active{transform:scale(.95);}
.judge-good{background:#E8FBF4;color:#05B884;border:2px solid #06D6A0;}
.judge-bad{background:#FDEAEA;color:#C91A30;border:2px solid #EF233C;}

/* ── NINJA ── */
#screen-ninja{background:linear-gradient(180deg,#0A1628,#1A2D4A);}
/* Ninja is het enige spelscherm met een donkere achtergrond. De standaard
   donkere koptekst van .game-hdr was daarop onleesbaar (titel 1.02:1), dus
   hier een lichte variant. Geel sluit aan bij de titel in de intro-overlay. */
#screen-ninja .game-hdr-info h2{color:var(--yellow);}
#screen-ninja .game-hdr-info p{color:rgba(255,255,255,.78);}
#screen-ninja .back-btn{background:rgba(255,255,255,.14);color:#fff;}
#screen-ninja .back-btn:hover{background:rgba(255,255,255,.24);}
.ninja-arena{flex:1;position:relative;margin:0 14px;border-radius:var(--radius);overflow:hidden;background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.07);}
.ninja-hud{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;}
.ninja-hud-pill{background:rgba(0,0,0,.5);padding:5px 12px;border-radius:99px;font-size:13px;font-weight:800;}
.ninja-hud-pill.timer{color:var(--green);}
.ninja-hud-pill.score{color:var(--yellow);}
.ninja-bottom{padding:10px 16px 20px;display:flex;flex-direction:column;gap:8px;}

.balloon{
  position:absolute;padding:10px 13px;border-radius:20px;font-size:11.5px;font-weight:700;
  cursor:pointer;user-select:none;max-width:150px;text-align:center;line-height:1.35;
  background:#fff;color:var(--text);
  border:2px solid rgba(255,255,255,.6);box-shadow:0 3px 12px rgba(0,0,0,.3);
  animation:rise linear forwards;
  transition:background .2s, color .2s;
}
.balloon.revealed-pos{background:linear-gradient(135deg,#2EC4B6,#06D6A0);color:#fff;border-color:transparent;}
.balloon.revealed-neg{background:linear-gradient(135deg,#FF6B35,#EF233C);color:#fff;border-color:transparent;}
.balloon .who-tag{display:block;font-size:9px;opacity:.8;margin-bottom:3px;text-transform:uppercase;letter-spacing:.5px;}
@keyframes rise{0%{transform:translateY(0);opacity:1;}80%{opacity:1;}100%{transform:translateY(-900px);opacity:0;}}
@keyframes pop{0%{transform:scale(1);opacity:1;}50%{transform:scale(1.4);opacity:.5;}100%{transform:scale(0);opacity:0;}}
.balloon.popped{animation:pop .3s forwards;pointer-events:none;}

/* ── ZOEK ── */
#screen-zoek{background:var(--bg);}
.zoek-logo-strip{display:flex;gap:8px;padding:8px 16px;align-items:center;flex-wrap:wrap;}
.zoek-logo-strip p{font-size:11px;color:var(--text-dim);width:100%;}
.logo-badge{background:#fff;border-radius:10px;padding:5px 10px;display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;border:2px solid transparent;transition:all .2s;white-space:nowrap;}
.logo-badge.found{opacity:.45;border-color:var(--green)!important;}
.logo-badge img{height:18px;object-fit:contain;}
.zoek-scene{flex:1;margin:0 16px;border-radius:var(--radius);overflow:hidden;position:relative;border:2px solid rgba(0,0,0,.1);}
.classroom-draw{width:100%;height:100%;background-size:cover;background-position:center top;position:relative;}
/* classroom fallback drawing */
.classroom-draw{width:100%;height:100%;background:linear-gradient(180deg,#C8DEF0 0%,#EAF3FB 60%,#B8D4E8 100%);position:relative;}
.zoek-target{
  position:absolute;width:58px;height:36px;border-radius:8px;
  border:2px dashed rgba(255,255,255,.35);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
  animation:shimmer 2s ease-in-out infinite;
}
.zoek-target:hover{border-color:var(--yellow);background:rgba(255,209,102,.25);transform:scale(1.08);}
.zoek-target.found{border:2px solid var(--green);background:rgba(6,214,160,.15);pointer-events:none;animation:none;}
@keyframes shimmer{0%,100%{border-color:rgba(255,255,255,.2);}50%{border-color:rgba(255,255,255,.6);}}
.zoek-target img{width:80%;height:80%;object-fit:contain;opacity:.15;transition:opacity .2s;}
.zoek-target:hover img,.zoek-target.found img{opacity:.85;}
.zoek-progress{text-align:center;padding:6px 16px;font-size:12px;color:var(--text-dim);}
.zoek-bottom{padding:8px 16px 16px;}

/* ── CARD CLASH ── */
#screen-clash{background:var(--bg);}
/* Het personage staat nu centraal met de reactie erboven, en de keuzekaarten
   staan als drie compacte kaarten naast elkaar onderaan. Eerder stond het
   personage klein in de hoek en rekten de kaarten zich over de volle hoogte
   uit, waardoor het spel aanvoelde als een rij grote tekstvlakken. */
.clash-scene{
  flex:1;min-height:0;margin:0 16px 6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;position:relative;
}
/* De portretbestanden hebben een dichte witte achtergrond. Als ronde avatar
   leest dat wit als een kader in plaats van als een losse witte blok, en het
   sluit aan bij de andere ronde portretten in de app. */
.clash-speaker-img{
  width:120px;height:120px;border-radius:50%;
  object-fit:cover;object-position:center 18%;
  background:#fff;border:4px solid #fff;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.clash-bubble{
  width:100%;max-width:310px;background:#fff;border-radius:14px 14px 14px 4px;
  padding:11px 14px;font-size:12.5px;line-height:1.5;
  box-shadow:var(--shadow);color:var(--text);text-align:center;
}
.clash-bubble .who-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--pink);margin-bottom:4px;}
.clash-q{padding:0 16px 6px;font-size:12.5px;color:var(--text-dim);font-weight:700;text-align:center;}
/* align-content:start houdt de kaarten op de hoogte van hun eigen tekst; met
   flex:1 rekten ze zich eerder uit tot drie halflege vlakken. */
.clash-options{
  padding:0 12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  align-content:start;flex-shrink:0;
}
.clash-opt{
  background:#fff;border-radius:var(--radius-sm);padding:10px 9px;
  cursor:pointer;border:2px solid transparent;transition:all .2s;
  font-size:10.5px;font-weight:700;color:var(--text);line-height:1.35;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.clash-opt:hover{border-color:var(--pink);transform:translateY(-1px);}
.clash-opt.correct{border-color:var(--green);background:#E8FBF4;}
.clash-opt.wrong{border-color:var(--red);background:#FDEAEA;}
.clash-opt.disabled{pointer-events:none;opacity:.7;}
.clash-feedback{margin:8px 16px 0;padding:11px 14px;border-radius:10px;font-size:12.5px;font-weight:700;line-height:1.5;}
.clash-feedback.good{background:#E8FBF4;color:#05B884;border:2px solid var(--green);}
.clash-feedback.bad{background:#FDEAEA;color:#C91A30;border:2px solid var(--red);}
/* Ruimte onderaan vrijhouden: het notitieboekje zweeft rechtsonder en lag
   anders over de derde keuzekaart, die daardoor niet volledig aantikbaar was. */
.clash-nav{padding:10px 16px 74px;display:flex;gap:8px;}
.clash-nav button{flex:1;}

/* ── SILENCE ── */
#screen-silence{background:var(--bg);}
.silence-room{flex-shrink:0;overflow:hidden;}
.silence-room-bg{width:100%;display:block;object-fit:cover;object-position:center top;}
.silence-chars{display:none;}
.silence-jasper-sit{display:none;}
.silence-you-silhouette{display:none;}
.silence-name-tag{display:none;}
/* Het gesprek staat centraal als twee ballonnen naast elkaar: Jasper links,
   zoals hij in de kamer zit, en jouw gekozen antwoord rechts bij het zwarte
   figuur. Eerder stond alles onder elkaar, wat als multiple choice aanvoelde. */
.silence-convo{
  flex:1;min-height:0;padding:10px 14px;
  display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:center;
}
.silence-say{
  background:#fff;border-radius:14px;padding:9px 12px;
  font-size:11.5px;line-height:1.45;color:var(--text);
  box-shadow:0 4px 14px rgba(0,0,0,.14);
}
.silence-say .who-lbl{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px;}
.silence-say-jasper{border-top-left-radius:4px;}
.silence-say-jasper .who-lbl{color:var(--pink);}
.silence-say-you{border-top-right-radius:4px;background:#F3EFFB;}
.silence-say-you .who-lbl{color:var(--purple-dark);}
/* De keuzes zelf zijn nu drie ballonnen naast elkaar. */
.silence-opts{
  flex-shrink:0;padding:0 12px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start;
}
.silence-opt{
  background:#fff;border-radius:14px 14px 14px 4px;padding:10px 9px;
  cursor:pointer;border:2px solid transparent;font-size:10.5px;font-weight:700;
  transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.06);color:var(--text);line-height:1.35;
}
.silence-opt:hover{border-color:var(--purple);transform:translateY(-1px);}
.silence-opt.good{border-color:var(--green);background:#E8FBF4;}
.silence-opt.bad{border-color:var(--red);background:#FDEAEA;}
.silence-opt.disabled{pointer-events:none;opacity:.65;}
.silence-fb{margin:6px 16px 0;padding:11px 14px;border-radius:10px;font-size:12.5px;font-weight:700;line-height:1.5;}
.silence-fb.good{background:#E8FBF4;color:#05B884;border:2px solid var(--green);}
.silence-fb.bad{background:#FDEAEA;color:#C91A30;border:2px solid var(--red);}
/* Onderaan ruimte vrijhouden voor het zwevende notitieboekje. */
.silence-nav{padding:8px 16px 74px;display:flex;gap:8px;}
.silence-nav button{flex:1;}

/* ── NOTEPAD OVERLAY ── */
#notepad-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:200;
  display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity .3s;
}
#notepad-overlay.open{opacity:1;pointer-events:all;}
.notepad-sheet{
  width:100%;background:linear-gradient(180deg,#3D1F6E,#2A1845);
  border-radius:26px 26px 0 0;padding:20px 22px 36px;max-height:72%;
  overflow-y:auto;transform:translateY(100%);transition:transform .35s cubic-bezier(.34,1.2,.64,1);
}
#notepad-overlay.open .notepad-sheet{transform:translateY(0);}
.np-handle{width:44px;height:5px;background:rgba(255,255,255,.2);border-radius:99px;margin:0 auto 18px;}
.np-title{font-family:'Baloo 2',cursive;font-size:22px;color:var(--yellow);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.np-entry{background:rgba(255,255,255,.08);border-radius:10px;padding:11px 14px;margin-bottom:8px;font-size:13px;line-height:1.6;color:#fff;border-left:3px solid var(--yellow);}
.np-entry strong{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--yellow);margin-bottom:3px;}
.np-empty{text-align:center;color:rgba(255,255,255,.4);padding:20px 0;font-size:14px;}

/* ── FEEDBACK MODAL ── */
#fb-modal{
  position:absolute;inset:0;background:rgba(0,0,0,.65);z-index:300;
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
#fb-modal.open{opacity:1;pointer-events:all;}
.fb-card{background:#fff;border-radius:22px;padding:26px 22px;width:100%;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.2);transform:scale(.88);transition:transform .3s cubic-bezier(.34,1.4,.64,1);}
#fb-modal.open .fb-card{transform:scale(1);}
.fb-icon{font-size:48px;margin-bottom:10px;}
.fb-title{font-family:'Baloo 2',cursive;font-size:22px;color:var(--text);margin-bottom:8px;}
.fb-text{font-size:13px;color:var(--text-dim);line-height:1.6;margin-bottom:18px;}

/* ── WIN ── */
#screen-win{
  background:linear-gradient(160deg,#1A0D2E,#3D1F6E,#1A0D2E);
}
.eval-section{background:rgba(255,255,255,.07);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;}
.eval-title{font-family:'Baloo 2',cursive;font-size:16px;color:var(--yellow);margin-bottom:2px;}
.eval-item{background:rgba(255,255,255,.06);border-radius:10px;padding:10px 12px;font-size:12px;line-height:1.5;color:rgba(255,255,255,.85);}
.eval-item .eval-game{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
.eval-item .eval-game.good{color:var(--green);}
.eval-item .eval-game.partial{color:var(--yellow);}
.eval-item .eval-game.improve{color:#FF9F7A;}
.eval-lesson{display:flex;flex-direction:column;gap:8px;}
.eval-lesson-item{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:rgba(255,255,255,.8);line-height:1.5;}
.eval-lesson-item span{flex:1;}
.win-trophy{font-size:72px;animation:bounce .8s ease infinite alternate;}
.win-title{font-family:'Baloo 2',cursive;font-size:34px;color:var(--yellow);}
/* margin:0 auto — zonder auto-marges bleef dit blok van 280px links hangen in
   de bredere ouder, waardoor de tekst 70px uit het midden stond. */
.win-sub{font-size:14px;color:rgba(255,255,255,.65);max-width:280px;line-height:1.7;margin:0 auto;}
.win-stats{display:flex;gap:12px;}
.win-stat{flex:1;background:rgba(255,255,255,.08);border-radius:14px;padding:14px;text-align:center;}
.win-stat .n{font-family:'Baloo 2',cursive;font-size:28px;color:var(--green);}
.win-stat .l{font-size:11px;color:rgba(255,255,255,.5);}
/* Aantal keer dat de energiebalk leegliep: geen groen, dat is geen winst. */
.win-stat .n.alert{color:var(--yellow);}
.confetti-wrap{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.confetti-p{position:absolute;border-radius:2px;animation:fall linear forwards;}
@keyframes fall{from{transform:translateY(-20px) rotate(0deg);opacity:1;}to{transform:translateY(920px) rotate(720deg);opacity:0;}}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:0;}

/* ── CHAT ── */
.chat-msg{display:flex;flex-direction:column;max-width:80%;animation:fadeIn .3s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.chat-msg.jasper{align-self:flex-start;}
.chat-msg.system{align-self:center;max-width:95%;}
.chat-bubble{padding:10px 14px;border-radius:18px;font-size:13px;line-height:1.55;box-shadow:0 1px 4px rgba(0,0,0,.1);}
.chat-msg.jasper .chat-bubble{background:#fff;color:var(--text);border-radius:4px 18px 18px 18px;}
.chat-msg.system .chat-bubble{background:rgba(176,30,90,.12);color:var(--pink-dark);font-size:12px;text-align:center;border-radius:12px;}
.chat-sender{font-size:10px;font-weight:800;color:var(--pink);margin-bottom:3px;padding-left:4px;}
.chat-typing{display:flex;gap:4px;padding:10px 14px;background:#fff;border-radius:4px 18px 18px 18px;align-self:flex-start;width:56px;}
.chat-dot{width:8px;height:8px;border-radius:50%;background:var(--text-dim);animation:dot-bounce .8s ease infinite;}
.chat-dot:nth-child(2){animation-delay:.15s;}
.chat-dot:nth-child(3){animation-delay:.3s;}
@keyframes dot-bounce{0%,80%,100%{transform:translateY(0);}40%{transform:translateY(-6px);}}

@keyframes logoAppear {
  from { transform: scale(0) rotate(-10deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}