.mobieleTools { display: none; }
#mobielVenster {
    box-sizing: border-box;
    width: min(440px, calc(100vw - 24px));
    max-height: calc(100dvh - 32px);
    padding: 16px;
    border: 1px solid #d9b990;
    border-radius: 20px;
    background: #fff4e4;
    color: #422b1d;
    overflow-y: auto;
    overscroll-behavior: contain;
}
#mobielVenster::backdrop { background: rgb(18 14 10 / 65%); }
body:has(#mobielVenster[open]) { overflow: hidden; }
#mobielSluiten { display: block; margin-left: auto; min-height: 44px; padding: 8px 14px; border: 1px solid #d9b990; border-radius: 10px; background: #f3ddbd; color: inherit; font: inherit; cursor: pointer; }
#mobielInhoud > :is(nav, fieldset) {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    max-height: none;
    padding: 16px 0 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    font-size: 16px;
    text-align: left;
}
#mobielInhoud .studiekeuze { min-height: 48px; box-sizing: border-box; }
#mobielInhoud audio { width: 100%; }
#mobielInhoud legend { float: none; font-size: 20px; padding: 0; }
#mobielVenster :focus-visible, .mobieleTools :focus-visible { outline: 3px solid #805631; outline-offset: 2px; }
@media (max-width: 1100px) and (pointer: coarse), (max-width: 700px) {
    body { display: block; padding-top: 155px; padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
    body .studiekamer { width: 100%; margin-inline: auto; }
    .studiekamer .welkom { top: -140px; left: 16px; right: 16px; max-width: 550px; padding: 12px 16px; }
    #begroetingTekst { font-size: 22px; }
    #naamWijzigen { width: 44px; height: 44px; }
    .welkom input, .welkom button { min-height: 44px; font-size: 16px; }
    #huidigUur { font-size: max(16px, 3.6cqw); }
    .studiekamer > :is(.tools, .studiehoekKeuze, .muziek, .uil, .kopje, .zon, .takenlijst, .raam) { visibility: hidden; }
    .studiekamer [role="tooltip"] { display: none; }
    .mobieleTools {
        position: fixed;
        z-index: 10;
        bottom: 0;
        left: 0;
        right: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 12px max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
        border-top: 1px solid #8b7056;
        background: rgb(36 24 16 / 96%);
        box-shadow: 0 -4px 20px #0003;
    }
    .mobieleTools button { min-height: 48px; border: 1px solid #b2916f; border-radius: 12px; padding: 8px; font: 15px "Segoe UI", sans-serif; background: #fff4e4; color: #422b1d; cursor: pointer; touch-action: manipulation; }
    .mobieleTools button:disabled { opacity: .5; cursor: default; }
    .mobieleTools button[hidden] { display: none; }
    #mobielVenster .studiekeuze input { position: static; width: 20px; height: 20px; margin: 0; clip-path: none; flex-shrink: 0; accent-color: #805631; }
}
@media (max-height: 500px) and (pointer: coarse) {
    .mobieleTools { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    body { padding-bottom: 90px; }
}