.hub-panel{padding:28px;max-width:1000px;margin:auto}.hub-panel h2{font:32px var(--serif);margin-bottom:16px}.hub-panel p{line-height:1.6;margin:12px 0}.hub-panel button{margin:8px 8px 8px 0}.dashboard-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0}.dashboard-cards>div{background:#edf1df;border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:8px}.dashboard-cards strong{font:36px var(--serif)}.dashboard-cards span,.fine{font-size:12px;color:#61705b}.history{list-style:none;padding:0}.history li{display:flex;justify-content:space-between;border-bottom:1px solid #dce3d1;padding:12px;gap:20px}table{width:100%;border-collapse:collapse;text-align:left}td,th{padding:10px;border-bottom:1px solid #dce3d1}.hub-panel a{text-decoration:underline}#message:empty{display:none}#message,#storage-warning{padding:8px 16px;color:#854b23;font-size:12px}.avatar{max-width:220px;font-size:11px}.app{margin-top:18px}dialog{max-height:90svh;overflow:auto}.rotate-notice p{line-height:1.6}.course-caption{font-size:8px}
@media(orientation:landscape) and (max-height:600px){.app{margin:0}.hub-panel{padding:18px}.hub-panel h2{font-size:26px}.dashboard-cards{margin:12px 0}.dashboard-cards>div{padding:12px}.dashboard-cards strong{font-size:28px}.game-grid .result-box h3{font-size:25px}.game-grid .result-box p{font-size:12px;margin:6px 0}}
.world-3d>.world-image,.world-3d>.course-landmarks,.world-3d>.course-courier,.world-3d>.course-start,.world-3d>.course-destination{display:none}.three-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;z-index:1}.camera-toggle{position:absolute;right:10px;bottom:10px;z-index:5;border:1px solid #fff8;background:#faf5e9e8;color:#345b4a;padding:10px 14px;border-radius:20px;font-size:11px;min-height:40px}.world-3d .course-reward{z-index:4;bottom:auto;top:10px}

#message:not(:empty){position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:20;background:#fff8e5;box-shadow:0 3px 15px #20332633;border-radius:14px;max-width:90vw;text-align:center}

/* Settings are grouped per subject; a checkbox and its label share one optical centre. */
#settings[open]{display:flex;flex-direction:column;padding:0;overflow:hidden}
.dialog-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:22px 22px 14px}
.dialog-body>h2{margin:0 0 18px}
.avatar{flex-wrap:wrap}
.avatar-label{font-weight:750;line-height:1.2}
.avatar-meta{flex-basis:100%;font-size:11px;font-weight:500;color:var(--muted);line-height:1.2}
.form-actions{display:flex;align-items:stretch;gap:10px;margin-top:20px}
.form-actions>button{margin:0;min-height:52px}
.form-actions .primary{flex:3;width:auto}
.form-actions .secondary{flex:2;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.2}
.panel-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin:18px 0 0;max-width:640px}
.panel-actions>button{margin:0;min-height:52px}
.panel-actions .primary{flex:3;width:auto;min-width:220px}
.panel-actions .secondary{flex:2;display:flex;align-items:center;justify-content:center;min-width:180px}

.travel-note{display:none;position:absolute;left:10px;bottom:10px;z-index:4;background:#fff9e8e8;color:#345b4a;border-radius:16px;padding:8px 10px;font-size:10px}.app[data-travelling=true] .travel-note{display:block}

.strength-block{display:inline-block;width:15px;height:11px;border:1px solid #867343;border-radius:2px;background:#d6b76b}.strength-block.empty{background:transparent;border-style:dashed;opacity:.5}.shields small{font-size:9px;margin-right:3px}

.chapter-selects{display:flex;gap:16px}.chapter-selects label{flex:1;min-width:0}#chapter-dialog{width:min(560px,92vw);max-height:90dvh;overflow:auto}
#chapter-dialog[open]{display:flex;flex-direction:column;padding:0;overflow:hidden}
#chapter-form{display:flex;flex-direction:column;min-height:0;width:100%}
#chapter-dialog .dialog-body{padding:20px 24px 10px}
#chapter-form>.form-actions{flex-shrink:0;margin:0;padding:12px 24px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper)}#chapter-dialog select{width:100%;padding:12px;border:1px solid #c9d4bc;border-radius:10px;background:#fffdf3;color:#315b4d;font:inherit}#chapter-dialog h2{margin:10px 0}#chapter-summary{padding:12px;background:#eef3e3;border-radius:10px}#chapter-error{color:#9b3b27}#chapter-dialog .fine{font-size:12px}@media(max-height:500px){#chapter-dialog .dialog-body{padding:14px 24px 8px}#chapter-dialog p{margin:8px 0}#chapter-dialog h2{font-size:24px}}

@media(orientation:landscape) and (max-height:500px){
  #chapter-dialog{width:min(760px,94vw);max-width:94vw;max-height:calc(100dvh - 20px)}
  #chapter-dialog .dialog-body{display:grid;grid-template-columns:1fr 1fr;gap:5px 20px;align-items:center;padding:10px 22px 6px}
  #chapter-dialog .weg{margin:2px 0 0}
  #chapter-dialog .dialog-body>.eyebrow,#chapter-weg,#chapter-error{grid-column:1/-1}
  #chapter-title,#chapter-current{align-self:baseline}
  #chapter-current{margin:0}
  #chapter-summary{margin:0}
  #chapter-dialog .dialog-body>.fine{align-self:center}
  #chapter-dialog label{margin:0;gap:5px}
  #chapter-dialog select{padding:9px 12px;min-height:44px;margin:0}
  #chapter-dialog .fine{font-size:11px;line-height:1.4}
  #chapter-summary{font-size:12px;padding:8px 12px;line-height:1.4}
  #chapter-error:empty{display:none}
  #chapter-form .form-actions{margin-top:4px}
  #chapter-form .form-actions>button{margin:0;min-height:44px}
}
/* Reserve the iPhone's system areas and size the course from its actual slot. */
@media(orientation:landscape) and (max-height:600px){
 :root{--via-safe-top:max(8px,env(safe-area-inset-top));--via-safe-bottom:max(8px,env(safe-area-inset-bottom))}
 .app{height:100dvh;display:flex;flex-direction:column;padding-top:var(--via-safe-top);padding-bottom:var(--via-safe-bottom);padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
 .app-nav{flex-shrink:0}
 #screen{flex:1;min-height:0;overflow:auto;container-type:size}
 .game-grid{height:100%;min-height:0}
 .course-shell{width:min(100%,calc((100cqh - 66px)*1.5))}
 .game-grid>.question{max-height:100%;overflow:auto}
 #message:not(:empty){bottom:calc(var(--via-safe-bottom) + 4px)}
}
/* A mission owns the viewport. Navigation is available from one modal menu. */
#game-menu-open{display:none}
#app[data-immersive=true] .app-nav{display:none}
@media(orientation:landscape){
 #app[data-immersive=true]{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;margin:0;border:0;border-radius:0;padding:0;display:block;overflow:hidden}
 #app[data-immersive=true] #screen{height:100%;padding:0;container-type:normal;overflow:hidden}
 #app[data-immersive=true] .game-grid{width:100%;height:100%;min-height:0;border:0;border-radius:0;gap:0;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);align-items:stretch}
 #app[data-immersive=true] .course-shell{position:relative;justify-self:stretch;width:100%;height:100%;border:0;border-radius:0;overflow:hidden}
 #app[data-immersive=true] .course-world{position:absolute;inset:0;height:100%;width:100%;aspect-ratio:auto}
 #app[data-immersive=true] .course-status{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:10px;z-index:6;background:#fffceddf;border:1px solid #fff8;border-radius:12px;padding:8px 10px;font-size:11px;pointer-events:none}
 #app[data-immersive=true] .course-caption{display:none}
 #app[data-immersive=true] .question{padding:calc(max(8px,env(safe-area-inset-top)) + 48px) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) 20px;margin:0;max-height:100%;overflow:auto;gap:14px}
 #app[data-immersive=true] .choices{grid-template-columns:1fr 1fr}
 #app[data-immersive=true] .camera-toggle{bottom:max(12px,env(safe-area-inset-bottom))}
 #app[data-immersive=true] .course-reward{top:64px}
 #app[data-immersive=true] #game-menu-open{display:flex;gap:7px;align-items:center;position:fixed;right:max(12px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));z-index:10;min-height:44px;padding:8px 13px;border:1px solid #d4dfc9;border-radius:24px;background:#fbfcf7ed;font-size:13px}
}

/* iOS zooms focused controls below 16px; keep forms readable without zoom locking. */
#chapter-dialog input,#chapter-dialog select{font-size:16px;min-width:0;max-width:100%;width:100%;box-sizing:border-box}
#chapter-form,#chapter-form>*{min-width:0}
@media(orientation:portrait){
 #chapter-dialog,#settings{box-sizing:border-box;width:calc(100vw - 32px);max-width:calc(100vw - 32px);max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)));padding:20px;overflow:auto;overflow-wrap:anywhere}
 #settings,#chapter-dialog{padding:0}
 #chapter-dialog .dialog-body{padding:18px 20px 8px}
 #chapter-form>.form-actions{padding:10px 20px max(10px,env(safe-area-inset-bottom))}
 #settings .dialog-body{padding:20px 20px 10px}
 #chapter-dialog h2{font-size:27px;line-height:1.15}
 .chapter-selects{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
}
#app[data-view=intro] .course-status,#app[data-view=intro] .camera-toggle,#app[data-view=intro] .course-reward,#app[data-view=intro] #game-menu-open{display:none}
#app[data-view=intro] .intro-copy{padding-top:max(20px,env(safe-area-inset-top));gap:18px}
.intro-copy h2{font-size:34px;line-height:1.12}
.intro-copy>p{font-size:16px;line-height:1.6}

@media(orientation:landscape) and (max-height:500px){
 #app[data-view=intro] .intro-copy{gap:10px;padding-left:18px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
 .intro-copy h2{font-size:26px}.intro-copy>p{font-size:14px;line-height:1.45}
 .intro-copy .primary{min-height:44px;padding:8px 12px;font-size:13px}.intro-copy .text-button{min-height:36px;padding:4px}
}
#pwa-update[hidden]{display:none}
#pwa-update{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:center;gap:14px;padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));background:#1f4034;color:#fff;font-size:14px;border-bottom:4px solid #e9b949;box-shadow:0 6px 24px #16291f66}
#pwa-update button{min-height:44px;padding:8px 22px;border-radius:12px;background:#e9b949;color:#25301a;font-weight:750;font-size:15px;box-shadow:0 3px 0 #b78f2c;flex-shrink:0}
.update-teken{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;border-radius:50%;background:#e9b949;color:#25301a;font-size:17px;font-weight:800;line-height:1}
.update-tekst{display:flex;flex-direction:column;gap:1px;min-width:0}
.update-tekst strong{font-weight:750;line-height:1.2}
.update-tekst small{font-size:11.5px;color:#c6ddcf;line-height:1.2}
@media(max-width:420px){.update-tekst small{display:none}#pwa-update{gap:10px;font-size:13px}}
@media(prefers-reduced-motion:no-preference){
 #pwa-update:not([hidden]){animation:update-binnen .35s ease-out}
 #pwa-update:not([hidden]) .update-teken{animation:update-klop 1.6s ease-in-out 3}
 @keyframes update-binnen{from{transform:translateY(-100%)}to{transform:translateY(0)}}
 @keyframes update-klop{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.18)}90%{transform:scale(1)}}
}
body:has(#pwa-update:not([hidden])){padding-top:var(--via-update-height,0px)}
@media(orientation:landscape){
 body:has(#pwa-update:not([hidden])) #app[data-immersive=true]{top:var(--via-update-height,0px);height:calc(100dvh - var(--via-update-height,0px))}
 body:has(#pwa-update:not([hidden])) #game-menu-open{top:calc(var(--via-update-height,0px) + max(8px,env(safe-area-inset-top)))}
}
@media(orientation:landscape) and (max-height:600px){body:has(#pwa-update:not([hidden])) #app:not([data-immersive=true]){height:calc(100dvh - var(--via-update-height,0px))}}

/* In-game overviews stay above the live world, with a permanently reachable exit. */

#study-check{box-sizing:border-box;width:min(480px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:24px;overflow:auto}
#study-check h2{font:28px var(--serif);margin:0 0 12px}
#study-check p{line-height:1.5;margin:0 0 16px}
.study-check-actions{display:flex;flex-wrap:wrap;gap:10px}
.study-check-actions button{min-height:44px;font-size:16px;margin:0}

#practice-check{box-sizing:border-box;width:min(520px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:20px 22px}
#practice-check h2{font:26px var(--serif);margin:0 0 10px}

#practice-check .fine{margin:8px 0 0}
#practice-check .form-actions{margin-top:14px}
#practice-check select{box-sizing:border-box;width:100%;min-width:0;min-height:44px;font-size:16px;margin:0}
#practice-check button{min-height:44px;font-size:16px}

/* A landscape phone is ~400px tall: the settings groups sit two across instead of stacking. */
@media(orientation:landscape) and (max-height:500px){
 #settings{width:min(780px,94vw);max-width:94vw}
 .dialog-body{padding:14px 20px 8px}
 .dialog-body>h2{font-size:22px;margin:0 0 10px}
 #settings .dialog-body{column-count:2;column-gap:18px}
 #settings .dialog-body>h2{column-span:all}
 #settings input:not([type=checkbox]):not([type=radio]),#settings select{min-height:44px;padding:8px 12px;margin-top:4px}

 #settings .form-actions>button{min-height:44px}
}

/* Right and wrong have to read across the room, not from the wording. The old
   .feedback.wrong rules never matched: the section carried no state class at all,
   so a wrong answer rendered in the green correct-answer box. */
.feedback.goed{background:#f2f8e8}
.feedback.fout{background:#fdefe6}
.feedback-mark{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-weight:750;letter-spacing:1.6px;text-transform:uppercase;font-size:12px}
.mark-teken{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:19px;line-height:1;color:#fff}
.feedback.goed .mark-teken{background:#2f7a52}
.feedback.fout .mark-teken{background:#b8462a}
.feedback.goed .mark-woord{color:#2f7a52}
.feedback.fout .mark-woord{color:#b8462a}
.feedback.fout h3{color:#8f3a22}
.gekozen-antwoord{margin:0 0 10px;font-size:14px;color:#8f3a22}
.gekozen-antwoord s{font-weight:650;text-decoration-thickness:2px}
.juist-label{display:block;font-size:10px;font-weight:750;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.feedback.fout .word-answer{background:#fff;border-color:#e9d3c2}
.feedback.fout .word-answer strong{color:#2c4f3f}
.feedback.fout .primary{background:#b8462a;box-shadow:0 3px 0 #8f3320}
/* The world half answers too, so the signal is not confined to one column. */
#app[data-view=wrong] .course-shell:after,#app[data-view=lose] .course-shell:after{content:'';position:absolute;inset:0;z-index:7;pointer-events:none;border:5px solid #b8462acc;box-shadow:inset 0 0 70px #b8462a5c}
@media(prefers-reduced-motion:no-preference){
 #app[data-view=wrong] .feedback-mark .mark-teken{animation:fout-stoot .45s ease-out}
 @keyframes fout-stoot{0%{transform:scale(.6) rotate(-12deg)}55%{transform:scale(1.14) rotate(4deg)}100%{transform:scale(1)}}
}

/* A native select hands iOS a black sheet whose labels wrap over three lines, and you
   cannot compare the three levels until you have picked one. Three cards instead. */
.keuzekaarten{display:grid;gap:8px;margin:0}
.keuzekaart{display:flex;align-items:center;gap:12px;margin:0;padding:8px 12px;min-height:52px;border:1.5px solid var(--line);border-radius:13px;background:#fff;cursor:pointer}
.keuzekaart input{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none}
.kaart-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.kaart-naam{font-size:15px;font-weight:700;line-height:1.2}
.kaart-uitleg{font-size:11.5px;line-height:1.3;color:var(--muted)}
.kaart-vorm{flex:0 0 auto;display:flex;gap:3px}
.kaart-vorm i{width:13px;height:19px;border-radius:3px;background:#dfe6d5}
.keuzekaart.lastig .kaart-vorm i{background:#e8d9bd}
.keuzekaart:has(input:checked){border-color:var(--green);border-width:2px;padding:8px 11px;background:#eef5e4}
.keuzekaart:has(input:checked) .kaart-naam{color:var(--green)}
.keuzekaart:has(input:checked) .kaart-uitleg{color:#4d6350}
.keuzekaart:has(input:checked) .kaart-vorm i{background:var(--green)}
.keuzekaart.lastig:has(input:checked) .kaart-vorm i{background:#a97b2d}
.keuzekaart:has(input:focus-visible){outline:3px solid #358dca;outline-offset:3px}
.keuze-inleiding{margin:0 0 10px;font-size:13px;color:var(--muted)}
@media(hover:hover) and (pointer:fine){.keuzekaart:hover{background:#f5f8ee}}

/* Hoofdstuk kiezen is een weg met een halte per hoofdstuk: tik de halte, daarna het stuk. */
.weg{margin:14px 0 0}
.weg-rit{overflow-x:auto;overscroll-behavior-x:contain;padding:4px 0 2px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
.weg-rit::-webkit-scrollbar{display:none}
.weg-stops{position:relative;display:flex;align-items:flex-start;width:max-content;padding-top:4px}
.weg-stops:before{content:'';position:absolute;left:26px;right:26px;top:23px;height:6px;border-radius:3px;background:#e2e8db}
.weg-stop{position:relative;flex:0 0 52px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;min-height:44px;background:none;border:0}
.weg-bol{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid #d7e0d2;font-weight:750;font-size:15px;color:var(--muted);box-shadow:0 2px 0 #cdd7c8}
.weg-naam{font-size:11px;line-height:14px;min-height:14px;color:var(--muted)}
.weg-stop.klaar .weg-bol{background:#e8efd0;border-color:#cfdcae;color:#4d6538}
.weg-stop[aria-checked=true] .weg-bol{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 3px 0 #164c40;transform:scale(1.12)}
.weg-stop[aria-checked=true] .weg-naam{color:var(--ink);font-weight:750}
.weg-stop[disabled]{opacity:.45;cursor:default}
.weg-stukken{display:flex;align-items:center;gap:12px;margin-top:6px}
.weg-stukken .label{flex:0 0 auto;font-size:10px;font-weight:750;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.weg-chips{display:flex;gap:8px;flex-wrap:wrap}
.weg-chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:6px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;font-weight:650;font-size:14px}
.weg-chip[aria-checked=true]{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 3px 0 #164c40}
#chapter-dialog .weg{margin:10px 0 0}
#chapter-dialog .weg-rit{margin:0 -4px;padding-left:4px;padding-right:4px}
@media(orientation:landscape) and (max-height:500px){
 #chapter-form>.weg{grid-column:1/-1;margin:4px 0 0}
 #chapter-dialog .weg-stukken{margin-top:4px}
}
/* De keuzeknop blijft staan terwijl de weg eronder doorloopt. */
/* Liggend is hoogte schaars: titel, tabs en de uitknop delen één balk. */
@media(orientation:landscape) and (max-height:500px){
 /* Breedte is er wel: de stukken en de laatste ritten delen één rij. */
}
/* Onder 380px hoogte wint de kiezer het van de uitleg erboven. */

/* Een dubbele tik is in dit spel een tweede antwoord, nooit een zoom. Pinch blijft wel
   werken: dat is de zoom die iemand bewust doet. */
html,body{touch-action:manipulation}
button,a,label,summary,input,select,[data-choice],.weg-stop,.weg-chip{touch-action:manipulation}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
input,textarea,[contenteditable]{-webkit-user-select:auto;user-select:auto;-webkit-touch-callout:default}

/* Instellingen is één scherm: de weg links, de moeilijkheid rechts. Liggend is er 402px en
   die is helemaal op, dus de kop en de voet staan vast en alleen het midden mag bewegen. */
/* Geen vaste hoogte: het scherm is zo hoog als het nodig heeft en niet hoger, anders staat
   er een lege band onder de voet. De kolommen strekken zich naar de langste, dus de drie
   moeilijkheidskaarten vullen hun kolom nog steeds helemaal. */
#settings{box-sizing:border-box;width:min(960px,calc(100vw - 24px));max-width:none;
 max-height:calc(100dvh - var(--via-update-height,0px) - 24px);padding:0;overflow:hidden}
#settings[open]{display:flex}
.inst{display:flex;flex-direction:column;width:100%;min-height:0;
 padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.inst-midden{flex:1;min-height:0;display:flex;gap:0;padding:10px 0}
.inst-leerstof{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.inst-leerstof h3{font:21px var(--serif);margin:0}
.inst-leerstof>.fine{margin:5px 0 0}
.inst-leerstof[hidden]{display:none}
.inst-wegkop{display:flex;align-items:center;gap:10px;margin-top:9px}
.inst-wegkop .label,.inst-voorkeuren>.label{font-size:10px;font-weight:750;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.inst-pijlen{margin-left:auto;display:flex;gap:6px}
.inst-pijlen button{width:44px;height:44px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);font-size:15px;display:grid;place-items:center}
.inst-leerstof .weg{margin:5px 0 0}

/* De naam is er niet meer, dus de drie kaarten verdelen de volle hoogte van hun kolom. */
/* Een streep tussen de twee kolommen in plaats van alleen lucht. */
.inst-leerstof{padding-right:20px}
.inst-voorkeuren{flex:0 0 306px;display:flex;flex-direction:column;min-height:0;
 border-left:1px solid var(--line);padding-left:20px}
.inst-niveaus{flex:1;min-height:0;margin-top:7px;display:flex;flex-direction:column;gap:8px}
/* De gekozen kaart krijgt rechts een vinkje bovenop het groen. */
.inst-niveau{flex:1;min-height:52px;display:flex;flex-direction:row;align-items:center;gap:10px;
 border:1.5px solid var(--line);border-radius:14px;background:#fff;padding:9px 14px;text-align:left}
.inst-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.inst-vink{flex:0 0 auto;font-size:21px;line-height:1;color:var(--lime);visibility:hidden}
.inst-niveau[aria-checked=true] .inst-vink{visibility:visible}
.inst-naam{font-size:15px;font-weight:750;color:var(--ink)}
.inst-uitleg{font-size:11.5px;color:var(--muted);line-height:1.3}
.inst-niveau[aria-checked=true]{background:var(--green);border-color:var(--green);box-shadow:0 3px 0 #164c40}
.inst-niveau[aria-checked=true] .inst-naam{color:#fff}
.inst-niveau[aria-checked=true] .inst-uitleg{color:#d7e7d4}

.inst-voet{flex:0 0 auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
 padding:10px 0 max(10px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}
#settings-error{flex-basis:100%;order:4;margin:0;color:#854b23}
#settings-error:empty{display:none}
/* Annuleren en Opslaan delen één doos: zelfde hoogte, padding, radius en lip eronder. */
.inst-voet .secondary,.inst-voet .primary{flex:0 0 auto;width:auto;margin:0;
 display:inline-flex;align-items:center;justify-content:center;gap:8px;
 min-height:46px;padding:11px 22px;border:1.5px solid transparent;border-radius:13px;
 font-size:15px;font-weight:700;line-height:1.2}
.inst-voet .secondary{background:#fff;border-color:#cfd9c9;color:var(--ink);box-shadow:0 3px 0 #dde5d6}
.inst-voet .primary{background:var(--green);color:#fff;box-shadow:0 3px 0 #164c40}
.inst-voet .secondary:active,.inst-voet .primary:active{transform:translateY(3px);box-shadow:none}
/* De twee stille acties links, de twee knoppen rechts; staand krijgen ze elk een regel. */
.inst-voetlinks{display:flex;align-items:center;gap:2px;margin-right:auto}

/* Een liggende telefoon is ~390px hoog en dat is de maat waar dit scherm voor is gemaakt.
   Alles wordt strakker, niets verdwijnt: browser-weg.cjs eist scroll 0 op 874x402 tot 768x360. */
@media(orientation:landscape) and (max-height:430px){
 #settings{max-height:calc(100dvh - var(--via-update-height,0px) - 16px)}
 .inst-midden{padding:7px 0;gap:16px}
 .inst-leerstof h3{font-size:18px}
 .inst-leerstof>.fine{margin-top:4px}
 .inst-wegkop{margin-top:6px}
 .inst-voorkeuren{flex-basis:258px}
 .inst-niveau{min-height:44px;padding:6px 12px;gap:1px}
 .inst-naam{font-size:14px}
 .inst-uitleg{font-size:11px}
 .inst-voet{padding-top:7px;gap:10px}
 .inst-voet .secondary,.inst-voet .primary{min-height:44px;padding:9px 16px;font-size:14px}
 #settings .weg{margin-top:3px}
 #settings .weg-rit{padding:2px 0 1px}
 #settings .weg-naam{min-height:12px;line-height:12px;font-size:10px}
 #settings .weg-stukken{margin-top:4px}
}

@media(orientation:portrait){
 .inst-midden{flex-direction:column;gap:12px;overflow:auto;overscroll-behavior:contain}
 /* Gestapeld is de scheiding tussen de kolommen een streep erboven, geen streep ernaast. */
 .inst-leerstof{padding-right:0}
 .inst-voorkeuren{flex:0 0 auto;border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:12px}
 .inst-niveau{flex:0 0 auto}
 /* Staand passen vier knoppen niet op één regel: de stille acties krijgen de hunne. */
 .inst-voet{justify-content:flex-end}
 .inst-voetlinks{flex:0 0 100%;margin:0 0 6px}
}

/* Wat in het spelmenu stond staat nu hier: de twee kleine acties in de kop, de staat van de
   offline-bundel onder de samenvatting. Allebei op plekken die al hoogte hadden. */
.inst-klein{min-height:44px;padding:8px 10px;border-radius:10px;background:none;border:0;
 font-size:12px;font-weight:650;color:var(--muted);white-space:nowrap}
@media(hover:hover) and (pointer:fine){.inst-klein:hover{background:#eef2e6;color:var(--ink)}}

@media(orientation:landscape) and (max-height:430px){
 .inst-klein{min-height:44px;padding:6px 8px;font-size:11px}
}
/* Onder de 380px is er voor de twee kopknoppen geen ruimte meer bij; de rest schuift op. */
@media(orientation:landscape) and (max-height:380px){
 .inst-midden{padding:4px 0}
 .inst-leerstof h3{font-size:17px}
 .inst-leerstof>.fine{margin-top:3px}
 .inst-voet{padding-top:5px}
}


/* De dialoog krijgt zelf de focus bij het openen (zie openDialoog): de omlijsting die de
   browser daarbij tekent hoort bij een bedienbaar element, en een modale doos is dat niet.
   Knoppen en velden erin houden hun focusring. */
dialog:focus,dialog:focus-visible{outline:none}