*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Arial,sans-serif;background:#eef6ff;color:#111}
button{font-family:inherit}
:root{
  --yellow:#fff6ad;--green:#a9ef93;--blue:#dceeff;--orange:#ffd9a3;--grey:#e8e8e8;--purple:#e7c7ff;
}
.app{height:100dvh;width:100vw;display:grid;grid-template-rows:minmax(112px,24dvh) 1fr minmax(58px,10dvh);overflow:hidden}
.top{min-height:0;display:grid;grid-template-columns:clamp(66px,9.5vw,140px) minmax(0,1fr) clamp(102px,15vw,210px);gap:clamp(3px,.5vw,9px);padding:clamp(3px,.55dvh,8px) clamp(4px,.55vw,9px);background:#f8fbff;border-bottom:2px solid #b8c7d8;overflow:hidden}
.rightActions{min-height:0;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:clamp(3px,.5dvh,7px);overflow:hidden}
.topBtn{min-width:0;min-height:0;border:0;border-radius:clamp(7px,.9vw,16px);color:white;font-size:clamp(8px,1vw,20px);font-weight:bold;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.02;overflow:hidden;padding:clamp(2px,.35dvh,6px) clamp(2px,.4vw,7px)}
.speak{background:#25b85f}.clear{background:#e53935}.back{background:#f39c12}.undo{background:#2f79b9}
.bigIcon{display:block;font-size:clamp(16px,2.2vw,44px);line-height:.9;max-height:58%}
.message{min-width:0;min-height:0;background:white;border:2px solid #999;border-radius:clamp(8px,.9vw,16px);padding:clamp(4px,.6dvh,8px) clamp(6px,.7vw,11px);display:grid;grid-template-rows:minmax(0,1fr) minmax(20px,4dvh);overflow:hidden}
#chosen{min-width:0;min-height:0;display:flex;gap:clamp(3px,.4vw,7px);overflow:hidden;align-items:stretch;border-bottom:2px solid #ccc;padding-bottom:clamp(2px,.35dvh,5px)}
.chosenCard{width:clamp(50px,6vw,108px);min-width:clamp(50px,6vw,108px);height:100%;border:2px solid #ccc;border-radius:clamp(6px,.75vw,13px);background:white;display:grid;grid-template-rows:auto minmax(24px,1fr) auto;align-items:center;justify-items:center;overflow:hidden;position:relative;padding:2px}
.chosenCard .remove{position:absolute;top:2px;right:2px;width:clamp(14px,1.35vw,23px);height:clamp(14px,1.35vw,23px);border:0;border-radius:50%;background:#888;color:white;font-weight:bold;cursor:pointer;font-size:clamp(9px,.9vw,15px);padding:0}
.chosenCard .word{font-size:clamp(9px,.9vw,17px);font-weight:bold;line-height:1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chosenCard img{max-width:92%;max-height:100%;min-height:18px;object-fit:contain}
.moveBtns{display:flex;gap:clamp(2px,.4vw,6px)}
.moveBtns button{width:clamp(18px,1.8vw,32px);height:clamp(15px,1.65vw,26px);border:2px solid #ddd;background:white;border-radius:5px;cursor:pointer;font-size:clamp(9px,.8vw,15px);padding:0}
#textline{min-width:0;font-size:clamp(16px,2vw,38px);font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:center}
.board{min-height:0;padding:clamp(3px,.45dvh,7px) clamp(4px,.5vw,9px);display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-auto-rows:1fr;gap:clamp(3px,.45dvh,7px) clamp(3px,.5vw,8px);overflow:hidden}
.tile{min-width:0;min-height:0;border:2px solid #a7bfd6;border-radius:clamp(6px,.8vw,14px);display:grid;grid-template-rows:minmax(13px,18%) minmax(22px,1fr);align-items:center;justify-items:center;padding:clamp(1px,.25dvh,4px) clamp(1px,.25vw,4px);cursor:pointer;box-shadow:0 1px 3px #0002;overflow:hidden}
.tile .label{min-width:0;max-width:100%;font-size:clamp(8px,.95vw,19px);font-weight:700;text-align:center;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile img{display:block;width:100%;height:100%;max-width:96%;max-height:96%;min-height:20px;object-fit:contain}
.tile:active{transform:scale(.97)}
.person{background:var(--yellow);border-color:#e3b600}.verb{background:var(--green);border-color:#62c04f}.feel{background:var(--blue);border-color:#6eaee8}.place{background:var(--orange);border-color:#ef9c32}.function{background:var(--grey);border-color:#aaa}.question{background:var(--purple);border-color:#b471e2}
.nav{min-height:0;background:linear-gradient(#3b86c4,#1d5f9d);display:grid;grid-template-columns:clamp(44px,6.5vw,86px) repeat(7,minmax(0,1fr));gap:clamp(3px,.45vw,7px);padding:clamp(3px,.6dvh,7px) clamp(4px,.7vw,10px);overflow:hidden}
.nav button{min-width:0;min-height:0;border:2px solid #88bce8;border-radius:clamp(6px,.75vw,13px);color:#111;font-size:clamp(8px,.9vw,17px);font-weight:bold;cursor:pointer;overflow:hidden;display:grid;grid-template-rows:minmax(22px,1fr) auto;align-items:center;justify-items:center;line-height:1;padding:2px 3px}
.nav button.current{box-shadow:none;outline:none}
.nav img{display:block;max-width:88%;max-height:92%;min-height:18px;object-fit:contain}
.nav span{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nav .eten{background:var(--green)}.nav .gevoelens{background:var(--blue)}.nav .school{background:var(--orange)}.nav .activiteiten{background:var(--green)}.nav .plaatsen{background:var(--orange)}.nav .vragen{background:var(--purple)}.nav .tijd{background:var(--grey)}.nav .basis{background:white}
.missingPicto{font-size:clamp(16px,2vw,30px);color:#777}
@media(max-width:900px){
  .app{grid-template-rows:minmax(100px,22dvh) 1fr minmax(52px,9.5dvh)}
  .top{grid-template-columns:clamp(58px,8.8vw,98px) minmax(0,1fr) clamp(88px,13.5vw,150px);gap:3px;padding:3px}
  .topBtn{font-size:clamp(7px,.85vw,13px);border-radius:7px}.bigIcon{font-size:clamp(15px,1.8vw,30px)}
  .message{grid-template-rows:minmax(0,1fr) minmax(18px,3.6dvh)}
  .tile{grid-template-rows:minmax(11px,16%) minmax(24px,1fr);border-width:2px}.tile .label{font-size:clamp(7px,.85vw,14px)}.tile img{min-height:24px;max-height:98%}
  .nav button{font-size:clamp(7px,.8vw,13px)}
}
@media(max-width:680px){
  .app{grid-template-rows:minmax(88px,21dvh) 1fr minmax(46px,8.5dvh)}
  .top{grid-template-columns:52px minmax(0,1fr) 78px;gap:3px;padding:3px}.topBtn{font-size:7px;border-radius:6px}.bigIcon{font-size:15px}
  .message{padding:3px 5px;grid-template-rows:minmax(0,1fr) 18px}.chosenCard{width:46px;min-width:46px}
  .board{gap:2px;padding:3px}.tile{grid-template-rows:11px minmax(26px,1fr);border-width:1.5px;border-radius:6px;padding:1px}.tile .label{font-size:7px;line-height:1}.tile img{min-height:26px;max-height:100%;max-width:100%}
  .nav{gap:3px;padding:3px}.nav button{font-size:7px;border-radius:6px;grid-template-rows:minmax(18px,1fr) auto}.nav img{min-height:16px}
}