*{box-sizing:border-box}
:root{
  --kort:#25B75A;
  --lang:#F7D74E;
  --twee:#EF4444;
  --stom:#F59E0B;
  --med:#3B8EEA;
  --ink:#071426;
}
body{margin:0;height:100vh;overflow:hidden;color:white;font-family:Arial,Helvetica,sans-serif;background:#07101f}
#app{height:100vh;display:grid;grid-template-columns:300px 1fr 360px;grid-template-rows:76px 1fr;gap:12px;padding:12px}
header{grid-column:1/4;display:flex;gap:14px;align-items:center}
.logo{font-size:34px;font-weight:900;font-style:italic;margin-right:auto}.logo span{color:#ffd43b}
.hud{min-width:118px;height:56px;background:#0b2e58;border:1px solid #2367aa;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:24px}
button{border:0;border-radius:12px;background:#126ef5;color:white;font-weight:900;padding:10px 12px;cursor:pointer;box-shadow:inset 0 -3px 0 #0004}
button:hover{filter:brightness(1.08)}.green{background:#16a334}.red{background:#d92525}.coffee{background:#8b5a2b}
#soundBtn.off{background:#dc2626}
#leftColumn{
  grid-column:1;
  grid-row:2;
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:10px;
}
#left,#right,#controls{
  background:#0d2b4d;
  border:1px solid #2367aa;
  border-radius:18px;
  padding:14px;
}
#left{overflow-y:auto;padding-bottom:18px;min-height:0;position:relative}
#controls{margin:0;padding:10px}
#right{grid-column:3;grid-row:2;overflow:hidden}
#main{grid-column:2;grid-row:2}
.profile{display:flex;align-items:center;background:#061a31;border:1px solid #2367aa;border-radius:15px;padding:14px 16px;min-height:76px}
.profile b{font-size:18px}.profile button{width:auto}.twoSpaces{display:inline-block;width:14px}
section{margin-bottom:10px}h3,h2{margin:4px 0 10px;color:#43b5ff}label{display:flex;gap:8px;align-items:center;margin:4px 0;font-size:15px}input{accent-color:#38bdf8}
textarea{width:100%;height:56px;background:#06101f;color:white;border:1px solid #2367aa;border-radius:9px;padding:7px;resize:none}
.buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.buttons .wide{grid-column:1/-1}
#main{display:grid;grid-template-rows:74px minmax(0,1fr) 46px;gap:12px;min-width:0;min-height:0}
#levelPanel{background:#eaf5ff;color:#071426;border-radius:18px;padding:12px 16px;display:grid;grid-template-columns:minmax(0,1fr) 112px;align-items:center;gap:12px}
#progress{height:34px;background:#0c1b30;border-radius:18px;position:relative;overflow:hidden;border:2px solid #224c7b;align-self:center}
#progressFill{height:100%;width:0%;background:#85e51d;transition:width .25s}
#progressWipe{display:none;position:absolute;left:0;top:0;height:100%;width:0%;background:#0c1b30;z-index:2}
#stage{background:#fff;border-radius:20px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:34px;min-height:0}
#cardArea{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;max-width:96%;max-height:92%;transition:transform .12s}
.wordGroup{display:flex;align-items:center;gap:8px;margin:8px 14px}
.sentenceWord{margin-left:34px;margin-right:34px}
.syllable{display:flex;gap:8px;align-items:center;padding:16px 14px 14px;border-radius:24px;background:#EEF2FF;border:4px solid #CBD5E1}
.syllable:nth-child(2n){background:#F1F5F9;border-color:#94A3B8}
.klankCard{min-width:112px;height:132px;border-radius:20px;border:2px solid rgba(15,23,42,.18);box-shadow:0 9px 0 rgba(0,0,0,.16);display:flex;align-items:center;justify-content:center;padding:10px;position:relative}
.klankCard.kort{background:var(--kort)}
.klankCard.lang{background:var(--lang)}
.klankCard.twee{background:var(--twee)}
.klankCard.stom{background:var(--stom)}
.klankCard.medeklinker{background:var(--med)}
.klankCard.confusion{outline:5px solid #7C3AED;outline-offset:4px}
.cardLabel{background:#FAFAFA;border:2px solid rgba(15,23,42,.18);border-radius:10px;min-width:74px;height:76px;display:flex;align-items:center;justify-content:center;padding:4px 6px}
.letterImg{height:62px;max-width:48px;object-fit:contain;margin:0 2px}
.cardLabel .letterImg + .letterImg{margin-left:1px}
.punctCard{height:100px;width:60px;display:flex;align-items:center;justify-content:center;margin-left:10px}.punctCard .letterImg{height:92px}
#feedback{background:#eaf5ff;color:#071426;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800}
#path{display:flex;gap:20px;align-items:center;justify-content:center;background:#0f5132;border:1px solid #5ac46c;border-radius:20px}
.node{width:54px;height:54px;border-radius:50%;background:#6b7280;border:4px solid #d1d5db;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:24px;box-shadow:0 5px 0 #0005}
.node.done{background:#4bc91f}.node.active{background:#1688ff;transform:scale(1.18)}.node.gift{background:#7e22ce}
#right h2{display:flex;align-items:baseline;justify-content:space-between}
#rewardCount{font-size:15px;color:#cbd5e1}
#newRewards{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(7,72px);gap:8px;margin-bottom:8px}
.rewardMini,.reward{border-radius:14px;background:#071426;border:2px solid #334155;overflow:hidden;position:relative}
.rewardMini.empty:before{content:"?";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px;color:#94a3b8;font-weight:900}
.rewardMini img,.reward img{width:100%;height:100%;object-fit:cover}
.rewardMini small,.reward small{display:none}
.museumSection{margin:18px 0 8px;color:#7dd3fc}
#museumGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.reward{height:118px}
.reward.locked:before{content:"?";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:42px;color:#94a3b8;font-weight:900}
.reward.locked:after{content:"⭐";position:absolute;right:8px;bottom:5px;color:#FBBF24;font-size:18px}
#yellowCard,#redCard{position:fixed;inset:0;background:#000c;display:none;align-items:center;justify-content:center;z-index:20}
#yellowCard div,#redCard div{border-radius:28px;padding:46px 60px;font-size:min(8vw,72px);font-weight:900;text-align:center}
#yellowCard div{background:#facc15;color:#111827;border:5px solid #fef3c7}
#redCard div{background:#dc2626;border:5px solid #fecaca}
#yellowCard small,#redCard small{display:block;font-size:min(3vw,28px);margin-top:12px}
#modal{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:30}.hidden{display:none!important}
#box{background:#0f172a;border:1px solid #475569;border-radius:18px;width:min(1060px,92vw);max-height:86vh;overflow:auto;padding:20px;position:relative}
#closeModal{position:absolute;right:10px;top:10px;background:#dc2626;color:#fff;border:2px solid #fecaca}
table{width:100%;border-collapse:collapse}td,th{border-bottom:1px solid #334155;padding:7px;text-align:left}
#startSplash{color:#071426;text-align:center;font-weight:900;font-size:34px}#startSplash small{display:block;margin-top:10px;font-size:18px;color:#334155}
.nameDialog{display:grid;gap:10px}.nameDialog input{height:42px;border-radius:10px;border:2px solid #22d3ee;background:#06101f;color:#fff;font-size:18px;padding:8px}.nameDialog .row{display:flex;gap:8px;justify-content:flex-end}
@media(max-width:1120px){
  #app{grid-template-columns:270px 1fr;grid-template-rows:70px 1fr 240px}
  header{grid-column:1/3}.hud{display:none}
  #leftColumn{grid-column:1;grid-row:2}
  #right{grid-column:1/3;grid-row:3}
  #main{grid-column:2;grid-row:2}
  #newRewards{grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(4,56px)}
}

/* Update 1-6 */
#path{display:none!important}

/* Verwarringen: geen paarse cirkels/randen meer. */
.klankCard.confusion{
  outline:none!important;
  outline-offset:0!important;
}

/* Lettergrepen: rode ronde omlijning, geen shading/schaduw. */
.syllable{
  display:flex;
  gap:10px;
  align-items:center;
  padding:14px 14px;
  border-radius:26px;
  background:transparent!important;
  border:4px solid #ef4444!important;
  box-shadow:none!important;
}
.syllable:nth-child(2n){
  background:transparent!important;
  border-color:#ef4444!important;
}
.wordGroup{
  gap:10px;
  margin:10px 28px;
}
.sentenceWord{
  margin-left:48px!important;
  margin-right:48px!important;
}
.klankCard{
  box-shadow:0 8px 0 rgba(0,0,0,.15);
}
.syllable .klankCard{
  box-shadow:none!important;
}

/* Groter label voor letters met staarten zoals g. */
.cardLabel{
  overflow:visible;
}
.letterImg{
  height:58px;
  max-width:52px;
}


/* Update 1-7: kleurlegenda rechts */
#colorLegend{
  margin-top:18px;
  background:#071426;
  border:1px solid #2367aa;
  border-radius:16px;
  padding:12px;
}
#colorLegend h3{
  margin:0 0 10px;
  color:#43b5ff;
  font-size:18px;
}
.legendRow{
  display:flex;
  align-items:center;
  gap:9px;
  margin:8px 0;
  color:#e5f2ff;
  font-size:14px;
}
.legendDot{
  width:22px;
  height:22px;
  border-radius:7px;
  border:2px solid rgba(255,255,255,.45);
  flex:0 0 auto;
}
.legendDot.med{background:var(--med)}
.legendDot.kort{background:var(--kort)}
.legendDot.lang{background:var(--lang)}
.legendDot.twee{background:var(--twee)}
.legendDot.stom{background:var(--stom)}

.wordWrap{
  display:flex;
  align-items:center;
  gap:12px;
}
.sentenceWord.wordWrap{
  margin-left:54px!important;
  margin-right:54px!important;
}
.sentenceWord .syllable{
  margin-left:0;
  margin-right:0;
}


/* Update 1-8: beloningen als vervangbare jpg's, gelijke maat in hoofdscherm en museum. */
:root{
  --rewardTile:72px;
}
#newRewards{
  grid-template-columns:repeat(4,var(--rewardTile))!important;
  grid-template-rows:repeat(7,var(--rewardTile))!important;
  justify-content:center;
}
.rewardMini,.reward{
  width:var(--rewardTile)!important;
  height:var(--rewardTile)!important;
}
.rewardMini img,.reward img{
  width:100%;
  height:100%;
  object-fit:contain!important;
  background:#fff;
}
#museumGrid{
  grid-template-columns:repeat(auto-fill,minmax(var(--rewardTile),var(--rewardTile)))!important;
  justify-content:start;
}


/* Update 1-9 */
#rewardHint{
  min-height:38px;
  margin:8px 0 10px;
  padding:8px 10px;
  border-radius:12px;
  background:#061a31;
  color:#dff4ff;
  font-weight:800;
  font-size:13px;
  line-height:1.25;
}
.museumGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(var(--rewardTile),var(--rewardTile)))!important;
  gap:10px;
  justify-content:start;
}
.reward{
  padding:0!important;
  box-shadow:none;
}
#museumInfo{
  position:sticky;
  bottom:0;
  margin-top:18px;
  padding:14px 16px;
  background:#071426;
  border:1px solid #2367aa;
  border-radius:14px;
  color:#e0f2fe;
  font-size:18px;
  line-height:1.35;
}
.plainWord{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin:6px 18px;
}
.plainUnit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:0;
  margin:0;
}
.plainUnit .letterImg{
  height:112px;
  max-width:82px;
  margin:0 -1px;
}
.syllable .plainUnit .letterImg{
  height:88px;
  max-width:68px;
  margin:0;
}
.sentenceWord.noCards{
  margin-left:22px!important;
  margin-right:22px!important;
}


/* Update 1-12: schermschaal, vaste mobiele bediening en functioneel hartje. */
#settingsBtn{display:none}
#closeSettingsBtn{display:none}
#museumBtn{
  width:112px;
  height:38px;
  padding:0 12px;
  align-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
#feedback{
  min-height:0;
  padding:7px 12px;
  text-align:center;
  line-height:1.2;
}
.sessionHud{cursor:default}

/* Houd woorden bijeen. Schaal eerst, breek alleen tussen woorden. */
.sentenceWord,
.wordWrap,
.wordGroup,
.syllable{
  flex-shrink:0;
}
#cardArea{
  transform-origin:center center;
}

/* Telefoon/tablet: spel als vaste app-indeling. */
@media (max-width:760px){
  :root{--mobileControls:154px}
  html,body{height:100%;height:100dvh;overflow:hidden}
  body{overscroll-behavior:none}
  #app{
    height:100vh;
    height:100dvh;
    grid-template-columns:1fr;
    grid-template-rows:52px minmax(0,1fr);
    gap:6px;
    padding:7px 7px calc(var(--mobileControls) + env(safe-area-inset-bottom) + 7px);
  }

  header{
    grid-column:1;
    grid-row:1;
    min-width:0;
    gap:5px;
    overflow:hidden;
    position:relative;
    z-index:70;
  }
  #leftColumn{display:contents}
  .logo{
    font-size:18px;
    line-height:1;
    margin-right:auto;
    white-space:nowrap;
  }
  .hud{
    display:flex!important;
    min-width:45px;
    width:auto;
    height:32px;
    padding:0 7px;
    border-radius:8px;
    gap:4px;
    font-size:13px;
    flex:0 0 auto;
  }
  #settingsBtn,#soundBtn{
    display:flex;
    width:34px;
    height:32px;
    padding:0;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    font-size:14px;
    flex:0 0 auto;
  }

  #main{
    grid-column:1;
    grid-row:2;
    grid-template-rows:38px minmax(0,1fr) 32px;
    gap:5px;
    min-height:0;
    overflow:hidden;
  }
  #levelPanel{
    height:38px;
    min-height:38px;
    border-radius:10px;
    padding:4px 6px;
    grid-template-columns:minmax(0,1fr) 68px;
    gap:6px;
  }
  #progress{
    width:100%;
    height:26px;
    border-width:2px;
  }
  #museumBtn{
    width:68px;
    height:26px;
    min-height:26px;
    padding:0 5px;
    border-radius:8px;
    font-size:10px;
    box-shadow:inset 0 -2px 0 #0004;
  }
  #stage{
    min-height:0;
    border-radius:11px;
    padding:10px 7px;
  }
  #cardArea{
    gap:5px;
    max-width:98%;
    max-height:96%;
  }
  #feedback{
    height:32px;
    border-radius:8px;
    padding:4px 7px;
    font-size:10px;
    line-height:1.1;
  }

  /* Kleinere, rustiger kaartjes op telefoon. */
  .klankCard{
    min-width:46px;
    height:54px;
    border-radius:9px;
    padding:4px;
    border-width:1px;
    box-shadow:0 4px 0 rgba(0,0,0,.16);
  }
  .cardLabel{
    min-width:34px;
    height:38px;
    border-radius:6px;
    border-width:1px;
    padding:2px 3px;
  }
  .letterImg{
    height:30px;
    max-width:25px;
    margin:0 1px;
  }
  .cardLabel .letterImg + .letterImg{margin-left:0}
  .wordGroup{
    gap:4px;
    margin:4px 7px;
  }
  .sentenceWord,
  .sentenceWord.wordWrap{
    margin-left:9px!important;
    margin-right:9px!important;
  }
  .wordWrap{gap:4px}
  .syllable{
    gap:3px;
    padding:5px 5px;
    border-width:2px!important;
    border-radius:10px;
  }
  .punctCard{
    width:20px;
    height:42px;
    margin-left:2px;
  }
  .punctCard .letterImg{height:32px}
  .plainUnit .letterImg{
    height:44px!important;
    max-width:32px!important;
    margin:0 -1px!important;
  }
  .syllable .plainUnit .letterImg{
    height:34px!important;
    max-width:27px!important;
  }
  .plainWord{margin:3px 7px}

  /* Rechts verdwijnt op telefoon; museum blijft bereikbaar. */
  #right{display:none}

  /* Linkerpaneel wordt mobiele instellingenlade. */
  #left{
    position:fixed;
    z-index:65;
    left:7px;
    right:7px;
    bottom:calc(var(--mobileControls) + env(safe-area-inset-bottom) + 7px);
    top:58px;
    display:none;
    overflow:auto;
    padding:44px 12px 20px;
    border-radius:14px;
    box-shadow:0 15px 40px #000b;
  }
  body.settingsOpen #left{display:block}
  body.settingsOpen::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:50;
    background:#0009;
  }
  #closeSettingsBtn{
    display:flex;
    position:absolute;
    right:9px;
    top:8px;
    width:32px;
    height:32px;
    padding:0;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#dc2626;
    border:2px solid #fecaca;
    font-size:21px;
    z-index:2;
  }

  /* Bedieningsknoppen staan buiten het verborgen instellingenpaneel
     en blijven daarom altijd in beeld. */
  #controls{
    position:fixed;
    z-index:70;
    left:7px;
    right:7px;
    bottom:calc(env(safe-area-inset-bottom) + 7px);
    height:var(--mobileControls);
    margin:0;
    padding:8px;
    display:grid!important;
    grid-template-columns:1fr 1fr;
    grid-template-rows:34px 34px 34px 34px;
    gap:5px;
    background:#0d2b4d;
    border:1px solid #2367aa;
    border-radius:12px;
    box-shadow:0 -8px 25px #0007;
  }
  #controls button{
    min-height:0;
    padding:3px 6px;
    border-radius:8px;
    font-size:11px;
    touch-action:manipulation;
  }
  #controls .wide{grid-column:1/-1}

  #modal{padding:8px}
  #box{
    width:96vw;
    max-height:90dvh;
    border-radius:13px;
    padding:15px;
  }
  #yellowCard div,#redCard div{
    padding:28px 22px;
    font-size:min(13vw,52px);
  }
  #yellowCard small,#redCard small{
    font-size:min(5vw,20px);
  }
}

/* Zeer smalle telefoons: minder drukke bovenbalk en nóg kleinere letters. */
@media (max-width:390px){
  .logo{font-size:16px}
  .hud{min-width:40px;padding:0 5px;font-size:12px}
  .klankCard{min-width:42px;height:49px}
  .cardLabel{min-width:31px;height:34px}
  .letterImg{height:27px;max-width:23px}
  .sentenceWord,.sentenceWord.wordWrap{
    margin-left:6px!important;
    margin-right:6px!important;
  }
}

/* Lage/landscape schermen: compactere vaste bediening. */
@media (max-width:900px) and (max-height:540px){
  :root{--mobileControls:112px}
  #app{grid-template-rows:42px minmax(0,1fr)}
  header{height:42px}
  .logo{font-size:16px}
  .hud,#settingsBtn,#soundBtn{height:28px}
  #main{grid-template-rows:32px minmax(0,1fr) 27px}
  #levelPanel{height:32px;min-height:32px}
  #progress,#museumBtn{height:22px;min-height:22px}
  #feedback{height:27px;font-size:9px}
  #left{top:48px}
  #controls{
    height:var(--mobileControls);
    grid-template-rows:24px 24px 24px 24px;
    padding:5px;
    gap:3px;
  }
  #controls button{font-size:10px}
  .klankCard{min-width:39px;height:45px}
  .cardLabel{min-width:29px;height:32px}
  .letterImg{height:25px;max-width:21px}
}


/* Update 1-13: herstel mobiele bediening. */
@media (max-width:760px){
  #controls{
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  body.settingsOpen #controls{
    visibility:visible!important;
    pointer-events:auto!important;
  }
  #stage,#cardArea{min-width:0}
}

@media (min-width:761px){
  #controls{display:grid}
}