/* Schatkamers op de telefoon (2026-10-11, Siri; docs/site.md "Mobiel"). Alleen geladen op een telefoon: index.html linkt dit
   bestand met media="(pointer: coarse) and (max-width: 560px), (pointer: coarse) and (max-height: 500px)" (= TELEFOON in
   js/mobiel.js; houd ze gelijk). Desktop en tablet laden het niet eens. Regels beginnen met :root, zodat ze winnen van de
   stylesheets die de verzamelingen pas later inladen (zelfde specificiteit + later = wint anders). Alleen thema-tokens. */

/* ---------- hele site: topbalk en hoofdpagina (melding gebruiker 2026-10-11, iPhone: "past net niet, balk rare opmaak") ---------- */
/* De pagina mag nooit opzij schuiven (iOS schoof ± 12 px: alles leek links afgeknipt). html: hidden gaat naar het venster;
   body: clip maakt géén scrollcontainer, zodat de sticky topbalk blijft werken. */
html { overflow-x: hidden; }
body { overflow-x: clip; }
/* Topbalk: de HUD liep over drie regels (level + held alleen op de derde). Nu: rij 1 Malachai + EXAMNIË + level + held,
   rij 2 de chips rechts van Malachai, rij 3 de navigatie. #hud doet niet meer mee als doos (display: contents), zodat zijn
   kinderen zelf in de topbalk staan en met order verdeeld kunnen worden; ::after is de regelafbreking tussen rij 1 en 2. */
:root .topbar { flex-wrap: wrap; gap: 6px 6px; }
:root .topbar .brand { order: 1; }
:root #hud { display: contents; }
:root #hud .hud-xp { order: 2; margin-left: auto; }
:root #hud .hud-avatar { order: 3; }
:root .topbar::after { content: ""; order: 4; flex-basis: 100%; height: 0; }
:root #hud > :not(.hud-xp):not(.hud-avatar) { order: 5; }
:root #hud > .hud-music-wrap { margin-left: calc(var(--vex) - 14px); }
:root #hud .hud-streak { padding: 4px 8px; font-size: .95rem; }
:root .topbar .topnav { order: 6; }
@media (max-width: 384px) {   /* smalle Android (360): alle chips nog op één regel */
  :root .topbar { column-gap: 4px; }
  :root #hud > .hud-music-wrap { margin-left: calc(var(--vex) - 22px); }
  :root #hud .hud-streak { padding: 4px 6px; font-size: .9rem; }
  :root #hud .hud-music { padding: 4px 6px; }
}
/* Liggende telefoon (melding gebruiker, iPhone ± 930 × 430): hoogte is schaars, dus alles op één rij:
   Malachai (kleiner) · EXAMNIË · chips · navigatie · level + held rechts. Geen regelafbreking. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --vex: 58px; --vex-ruimte: 44px; }
  /* wrap: nooit buiten beeld lopen (webapp liggend: notch links/rechts kost ± 50 px elk), dan liever een tweede rij */
  :root .topbar { flex-wrap: wrap; gap: 4px 6px; padding-block: 6px; min-height: 58px; }
  :root #hud .hud-streak, :root #hud .hud-music { padding: 4px 7px; }
  :root .topbar::after { display: none; }
  :root .topbar .brand-name { font-size: 1.05rem; letter-spacing: .08em; }
  :root .gids-knop { top: 2px; }
  :root #hud > .hud-music-wrap { margin-left: 4px; }
  :root #hud > :not(.hud-xp):not(.hud-avatar) { order: 2; }
  :root .topbar .topnav { order: 3; width: auto; flex: none; gap: 0; justify-content: flex-start; }
  :root .topbar .topnav a { font-size: 1.15rem; padding: 4px 6px; }
  :root.app-modus .topbar .brand-name { display: none; }   /* webapp: de notch-randen kosten de ruimte van de naam */
  :root .topbar .topnav a span, :root #hud .xp-meta { display: none; }   /* ook boven 900 px breed (iPhone Pro Max liggend 932) */
  :root #hud .hud-xp { order: 4; margin-left: auto; flex: none; min-width: 0; }
  :root #hud .hud-avatar { order: 5; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {   /* de meeste telefoons liggend (852, 844, 740): naam weg, ✦ blijft */
  :root .topbar .brand-name { display: none; }
}
/* Balk verbergen (wens gebruiker): klepje onder de balk rechts (js/mobiel.js balkKlep); weg = vast bovenin, uit beeld geschoven,
   alleen het klepje (▼) blijft zichtbaar. Raakvlak 44 px hoog via ::after. */
:root .topbar { transition: transform .25s ease; }
:root .balk-klep { position: absolute; right: 12px; top: 100%; z-index: 2; width: 52px; height: 22px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; background: rgba(var(--bg-rgb), .92); color: var(--gold);
  font-size: .72rem; line-height: 1; cursor: var(--wijs, pointer); }
:root .balk-klep::before { content: "▲"; }
:root .balk-klep::after { content: ""; position: absolute; inset: -14px -6px -10px; }
html.balk-weg .topbar { position: fixed; left: 0; right: 0; top: 0; transform: translateY(-100%); }
html.balk-weg .balk-klep::before { content: "▼"; }
/* Questkop "Jouw quests 0 / 3": de teller brak over twee regels */
:root .hub-kop h2 { font-size: 1.2rem; gap: 8px; }
:root .hub-kop h2 small { white-space: nowrap; }
:root .hub-kop h2::after { min-width: 0; }

/* ---------- algemeen ---------- */
/* Geen inzoomen bij snel tikken (iOS); knijpen blijft werken. :where = specificiteit 0, dus een verzameling die zelf
   touch-action zet (sleepvlakken: none) wint altijd. */
:where(#vak-body, .wb-vol, .apo-vol, .upt-vol, .ge-vol, .mu-vol) :where(button, a, label, summary, [role="button"], input[type="range"]),
:where(.nest-scene, .kp-plank, .mp-podium, .cp-podium, .vw-lucht, .ft-tuin, .bv-zaal, .tm-stage) { touch-action: manipulation; }

/* Paneeltitels: "Vuurwerkfabriek" duwde de pagina 31 px te breed (Cinzel Decorative 25,5 px + sierlijn + ⓘ) */
:root #vak-body .panel > h2.display { font-size: 1.22rem; letter-spacing: .02em; gap: 8px; overflow-wrap: anywhere; }
:root #vak-body .panel > h2.display::after { min-width: 0; }

/* Tikdoelen ≥ 44 px. Waar de opmaak krap is een onzichtbaar groter raakvlak (::after), het beeld blijft gelijk. */
:root .rl-i { position: relative; }
:root .rl-i::after { content: ""; position: absolute; inset: -4px; }
:root .rl-voet button { height: 40px; }
:root .km-zoom .btn { min-width: 44px; min-height: 44px; }
:root #vak-body .btn-sm { min-height: 44px; }
:root .ft-palet { position: relative; height: 26px; }
:root .ft-palet::after { content: ""; position: absolute; inset: -9px -3px; }
:root .tc-pijl::after { content: ""; position: absolute; inset: -8px 0; }
:root .gp-tabs button { position: relative; }
:root .gp-tabs button::after { content: ""; position: absolute; inset: -5px -2px; }
:root .gp-k { min-height: 44px; }
:root .kp-vlag::after { content: ""; position: absolute; inset: -6px; }
:root .upt-mini { width: 44px; height: 44px; }
:root .mu .btn-sm { min-width: 44px; }
:root .bv-slot { min-height: 40px; }
:root .upt-tegel { min-height: 44px; }
:root .ge-optie { min-height: 40px; }
:root .ge-zoom .rondknop, :root .apo-knop, :root .wb-balk .rondknop { width: 44px; height: 44px; }

/* Kleine letters (< 11 px) iets groter */
:root .vw-nr { font-size: .7rem; }
:root .vw-massa { font-size: .66rem; }
:root .tk-klein .tk-plaat small { font-size: 10.5px; }

/* ---------- per verzameling ---------- */
/* The Pixel Pit (keuze gebruiker: kiezen via de mengtafel). Knoppen 44 px, labels leesbaar; podiumplekken iets ruimer. */
:root .cp-knop { min-height: 44px; min-width: 44px; font-size: .74rem; }
:root .cp-strip .cp-knop { font-size: .7rem; }
:root .cp-scribble { font-size: .74rem; }
:root .cp-vlak::before { content: ""; position: absolute; inset: -6px; }

/* Vensters: 90vh is op iOS langer dan het zichtbare deel (adresbalk); dvh = wat je echt ziet */
:root .modal { max-height: 92dvh; }
/* De Fractaltuin, detailvenster (melding gebruiker): beeld + tekst + knoppen pasten niet. Beeld kleiner, tekst compacter,
   Opnieuw/Sluiten plakken onderin het venster. Liggend: beeld zo hoog als het scherm toelaat. */
:root .ft-detail { gap: 10px; }
:root .ft-vel { width: min(100%, 38dvh); margin-inline: auto; }
:root .ft-info h2 { font-size: 1.3rem; }
:root .ft-info p { margin: .3em 0; }
:root .ft-schuif { margin: 6px 0 2px; }
:root .ft-teller { min-height: 0; margin: .2em 0 .4em; }
:root .ft-detail .btn-row { position: sticky; bottom: -14px; margin: 6px -14px -14px; padding: 8px 14px 12px; background: var(--panel-solid); }
@media (orientation: landscape) and (max-height: 500px) { :root .ft-vel { width: min(100%, 78dvh); } }

/* De Beursvloer: zes tellers in 3 × 2 i.p.v. één te smalle rij */
:root .bv-kas > .bv-chip { flex: 1 1 30%; }

/* Het museum (melding gebruiker, iOS schermvullend): de omschrijving van een werk/voorwerp stond onderin het midden, over de
   knoppenbalk en de joystick. Op de telefoon bovenin, onder de plattegrond; de toets-hint (Enter) is daar zinloos. */
:root .mu-hud { top: 70px; bottom: auto; left: 12px; right: 12px; width: fit-content; max-width: none; margin-inline: auto; transform: translateY(8px); }
:root .mu-hud.aan { transform: none; }
:root .mu-hud kbd { display: none; }

/* Het biljart, schermvullend liggend (wens gebruiker, webapp): de tafel bovenaan over de volle breedte (tussen de notch-randen),
   scorebord en info eronder, desnoods buiten beeld. De tafel is dan iets hoger dan het scherm: vegen in de randen naast de
   tafel of op het scorebord scrolt de laag (op de tafel zelf niet: daar richt je). */
@media (orientation: landscape) and (max-height: 500px) {
  :root .apo.apo-vol { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: min-content;
    align-content: start; align-items: start; justify-items: stretch; gap: 6px; overflow-y: auto;
    padding: 0 env(safe-area-inset-right) max(8px, env(safe-area-inset-bottom)) env(safe-area-inset-left); }
  :root .apo.apo-vol .apo-scherm { order: -1; grid-column: 1; grid-row: auto; position: static; width: 100%; border-radius: 0; }
  :root .apo.apo-vol .apo-bord, :root .apo.apo-vol .apo-paneel { grid-column: 1; width: auto; min-width: 0; margin-inline: 8px; }
}

/* Germania Express: "Los geht's!" blijft onderin het startscherm staan (het bord scrolt eronder) */
:root .ge-start:not(.ge-regels) .ge-start-knoppen { position: sticky; bottom: -12px; margin: 0 -12px -12px; padding: 10px 12px 12px;
  background: #f4ecd0; box-shadow: 0 -10px 12px -6px #f4ecd0; }   /* kaartkleur van germania.css (.ge-start-kaart) */

/* Het biljart (keuze gebruiker: ballon onder de tafel + draai-tip). Schermvullend blijft de ballon in beeld zoals nu. */
:root .apo:not(.apo-vol) .apo-ballon { position: static; max-width: none; margin: 6px 8px 8px; min-height: 52px; }
:root .apo:not(.apo-vol) .apo-ballon p { margin-bottom: 0; }

/* ---------- staande telefoon ---------- */
@media (max-width: 560px) {
  /* De Kaart (keuze gebruiker): vierkant venster, meer kaart per keer */
  :root .km-venster { aspect-ratio: 1; }
  /* De Fractaltuin (keuze gebruiker): hogere tuin met drie rijen grote bollen (plekken: PLEK_STAAND in js/fractaltuin.js) */
  :root .ft-tuin { aspect-ratio: 5 / 6; }
  :root .ft-naam { font-size: .7rem; white-space: normal; text-align: center; line-height: 1.15; max-width: 25vw; hyphens: auto; }
  /* De Grenspost: loket boven, bureau eronder. grenspost.css heeft wel een 1-koloms @container-regel (≤ 760 px), maar een latere
     regel (.gp-werk 1fr 1.3fr) overschrijft die, waardoor loket en bureau elk ± 170 px kregen en het paspoort buiten beeld viel. */
  :root .gp:not(.gp-vol) .gp-werk { grid-template-columns: minmax(0, 1fr); }
  /* rode alarmknop vast rechtsboven op het bureau (js/grenspost.js zet hem inline op het bureaubeeld, dat schuift mee met de
     hoogte), de papieren eronder; op een pas staat het label boven de waarde (anders braken "De Toren van Pythagoras" e.d. per woord) */
  :root .gp:not(.gp-vol) .gp-alarm { top: 8px !important; left: auto !important; right: 10px; width: 58px !important; height: 62px !important; }
  :root .gp:not(.gp-vol) .gp-tafel.is-stapel { padding-top: 78px; }
  :root .gp:not(.gp-vol) .gp-tafel.is-stapel .gp-doc dl { grid-template-columns: minmax(0, 1fr); }
  :root .gp:not(.gp-vol) .gp-tafel.is-stapel .gp-doc dd + dt { margin-top: 4px; }
  /* biljart: tip onder de tafel */
  :root .apo:not(.apo-vol) .apo-scherm::after { content: "📱↻ Draai je telefoon of tik ⛶ voor een grotere tafel"; display: block; padding: 4px 10px 8px;
    font-size: .78rem; color: var(--muted); text-align: center; }
}

/* ---------- liggende telefoon: de hele scène past in de schermhoogte ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  :root .nest-scene, :root .kp-plank, :root .cp-podium { width: min(100%, calc((100dvh - 24px) * 688 / 384)); margin-inline: auto; }
  :root .mp-podium { width: min(100%, calc((100dvh - 24px) * 16 / 9)); margin-inline: auto; }
  :root .km-venster { width: min(100%, calc((100dvh - 24px) * 4 / 3)); }
  :root .vw-lucht { height: calc(100dvh - 24px); }
}

/* ---------- schermvullend op de telefoon ---------- */
/* Staand op een iPhone (die kan niet zelf draaien): even een draai-tip bovenin */
@keyframes mb-tip { 0%, 80% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@media (orientation: portrait) {
  :root .wb-vol::before, :root .apo-vol::before, :root .upt-vol::before, :root .mu-vol::before, :root .vs-aan::before {
    content: "📱↻ Draai je telefoon voor een groter beeld"; position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 10px); transform: translateX(-50%);
    z-index: 10001; padding: 6px 14px; border-radius: 999px; background: var(--panel-solid); color: var(--text); font-size: .85rem; font-weight: 800;
    white-space: nowrap; box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .6), var(--shadow); pointer-events: none; animation: mb-tip 5s ease-out forwards; }
}

/* De Werkbank: schermvullend bouwen staat sinds ⛶-overal in css/volscherm.css (alle apparaten). */
/* Tot in de hoeken (viewport-fit=cover, js/mobiel.js dekkend()): knoppen van museum en Grenspost vrij van notch en thuisstreep */
:root .mu.mu-vol .mu-knoppen { left: calc(10px + env(safe-area-inset-left)); bottom: calc(10px + env(safe-area-inset-bottom)); }
:root .mu.mu-vol .mu-stick { left: calc(14px + env(safe-area-inset-left)); bottom: calc(58px + env(safe-area-inset-bottom)); }
:root .mu.mu-vol .mu-zaal { top: calc(10px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); }
:root .mu.mu-vol .mu-kaart { top: calc(10px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); }
:root .mu.mu-vol .mu-hud { top: calc(70px + env(safe-area-inset-top)); }
/* iOS: een vaste laag reikt liggend soms niet tot onder de ingeklapte adresbalk (strook website onderin, melding gebruiker):
   de achtergrond rondom doortrekken */
:root .mu.mu-vol, :root .upt.upt-vol { box-shadow: 0 0 0 100vmax #000; }   /* in de achtergrondkleur van elke laag */
:root .apo.apo-vol { box-shadow: 0 0 0 100vmax #07070e; }
:root .gp.gp-vol { box-shadow: 0 0 0 100vmax #0b0705; }
:root .ge.ge-vol { box-shadow: 0 0 0 100vmax #1a110a; }
:root .gp.gp-vol { padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }