/* Totale kaart (alle hoofdstukken). Liggende tekening (assets/worlds/overview/map.jpg, 1672x941) met de
   nummers en namen al in de tekening; hier komen alleen onzichtbare tikvlakken + statusbadges overheen.
   Op een smal scherm kan de kaart zijwaarts schuiven. */
.ov-wrap { max-width: none; margin: 0 auto; padding: 0; }
.ov-scroll { display: flex; overflow: auto; scrollbar-width: none; margin-top: 6px; -webkit-overflow-scrolling: touch; background: #11164a; }
.ov-scene { position: relative; overflow: hidden; flex: none; margin: auto;
  background: #11164a; box-shadow: 0 10px 26px rgba(20, 20, 70, .3); }
.ov-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ov-node { position: absolute; transform: translate(-50%, -50%); width: 17%; aspect-ratio: 1.3; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; font-family: inherit; }
.ov-node.st-soon, .ov-node.st-locked { cursor: default; }
.ov-node.st-soon::before, .ov-node.st-locked::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: rgba(12, 16, 60, .38); }
.ov-node.st-open:hover::before, .ov-node.st-done:hover::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.ov-node.is-here::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; border: 5px solid #ffe27a; box-shadow: 0 0 22px 6px rgba(255, 226, 122, .7); animation: ovPulse 1.8s ease-in-out infinite; }
.ov-badge { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); min-width: 34px; height: 34px; padding: 0 10px; border-radius: 999px; background: #fff; display: grid; place-items: center; font-style: normal; font-size: 16px; font-weight: 900; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); color: #5a3d10; white-space: nowrap; z-index: 2; }
.ov-badge.ok { background: #58cc02; color: #fff; }
.ov-badge.soon { background: #ffe9a8; font-size: 13px; }
.ov-badge.prog { background: rgba(60, 40, 10, .8); color: #fff; font-size: 13px; }
@keyframes ovPulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
.ov-toast { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(60, 39, 18, .92); color: #fff; font-weight: 800; padding: 10px 16px; border-radius: 999px; font-size: 14px; max-width: 90%; text-align: center; z-index: 6; }
@media (prefers-reduced-motion: reduce) { .ov-node.is-here::after { animation: none; } }

/* Niveau-keuze: leerquizje + spellen per niveau */
.lh-wrap { max-width: 640px; margin: 0 auto; padding: 0 16px 90px; }
.lh-letters { text-align: center; font-family: "Amiri", serif; font-size: 54px; line-height: 1.5; margin: 14px 0; color: #3a2410; }
.lh-quiz { width: 100%; display: flex; align-items: center; gap: 14px; text-align: start; padding: 16px 18px; border: 3px solid #fff; border-radius: 22px; background: linear-gradient(180deg, #ffe08a, #f2b84a); box-shadow: 0 6px 0 #c48a1c, 0 14px 24px rgba(90, 60, 10, .2); font-family: inherit; color: #4a2f08; cursor: pointer; }
.lh-quiz:active { transform: translateY(3px); box-shadow: 0 2px 0 #c48a1c; }
.lh-quiz b { display: block; font-size: 19px; }
.lh-quiz small { display: block; font-weight: 700; opacity: .8; }
.lh-quiz .lh-icon { font-size: 38px; }
.lh-stars { margin-inline-start: auto; color: #fff; font-size: 20px; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.lh-title { margin: 22px 0 10px; font-weight: 900; color: #5a4020; text-align: center; }
.lh-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.lh-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 10px; border-radius: 20px; border: 3px solid #fff; background: rgba(255, 255, 255, .92); box-shadow: 0 5px 0 #d9b25a, 0 12px 20px rgba(90, 60, 10, .15); font-family: inherit; color: #3a2410; cursor: pointer; }
.lh-card .lh-icon { font-size: 36px; }
.lh-card b { font-size: 16px; }
.lh-card small { font-weight: 700; font-size: 12px; opacity: .8; }
.lh-card.is-locked { filter: grayscale(.8); opacity: .65; cursor: default; box-shadow: none; }
@media (max-width: 640px) {
  .ov-soon-t { display: none; }
  .ov-badge { min-width: 28px; height: 28px; font-size: 14px; }
}
.ov-scroll::-webkit-scrollbar { display: none; }

/* Wereldkaart verschuiven met slepen */
#gMap .g-world-viewport { touch-action: none; cursor: grab; }
#gMap .g-world-viewport.is-panning { cursor: grabbing; }
.ov-soon-t { display: none; }

/* Liggend scherm: de hele kaart past; de ruimte ernaast wordt gevuld met een wazige versie van dezelfde tekening. */
.ov-scroll { position: relative; }
.ov-backdrop { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px) brightness(.85); transform: scale(1.12); pointer-events: none; }
.ov-scene { z-index: 1; }

/* Wereldkaart: precies tot aan het onderste menu, geen strookje ertussen */
#gMap.g-screen { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }

/* Inloggen met schoolaccount (profielkeuze) */
.g-login-form { display: flex; flex-direction: column; gap: 10px; align-items: stretch; max-width: 320px; margin: 10px auto; }
.g-login-form input { font: inherit; padding: 12px 14px; border-radius: 14px; border: 2px solid #e8dcc0; }
.g-login-msg { min-height: 1.2em; color: #c0392b; font-weight: 800; text-align: center; font-size: 14px; }

/* Inlogformulier in de app: doorschijnende "glaskaart" boven de achtergrond */
.g-login-form { display: flex; flex-direction: column; gap: 12px; max-width: 360px; width: calc(100% - 32px); margin: 14px auto; padding: 20px 20px 14px; border-radius: 26px;
  background: linear-gradient(160deg, rgba(255, 252, 242, .8), rgba(255, 246, 222, .62)); -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
  border: 1.5px solid rgba(255, 255, 255, .75); box-shadow: 0 18px 40px rgba(60, 35, 5, .28), inset 0 1px 0 rgba(255, 255, 255, .8); animation: loginIn .35s ease; }
.g-login-form[hidden] { display: none; }
@keyframes loginIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.g-login-head { display: flex; gap: 12px; align-items: center; text-align: start; }
.g-login-ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; font-size: 24px; border-radius: 50%; background: linear-gradient(160deg, #ffe08a, #f2b84a); box-shadow: 0 3px 0 #c48a1c; }
.g-login-head b { display: block; font-size: 18px; line-height: 1.2; color: #4a2f08; }
.g-login-head small { color: #6f5a3a; font-weight: 700; }
.g-login-form input { background: rgba(255, 255, 255, .88); border: 2px solid rgba(232, 220, 192, .95); border-radius: 16px; padding: 13px 16px; font: inherit; font-size: 17px; color: #3a2410; transition: border-color .15s, box-shadow .15s; }
.g-login-form input:focus { outline: none; border-color: #e0a52a; box-shadow: 0 0 0 4px rgba(242, 184, 74, .3); }
.g-login-form .g-cta { width: 100%; }
.g-login-cancel { background: none; border: 0; color: #6b5535; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; padding: 4px; align-self: center; }
.g-login-msg:empty { display: none; }
form.g-login-form .g-login-msg { background: rgba(253, 236, 235, .9); border-radius: 12px; padding: 8px 12px; }
@media (prefers-reduced-motion: reduce) { .g-login-form { animation: none; } }

/* Niveau-scherm: wat er in het niveau zit staat klein onderaan */
.lh-content { margin: 22px 0 0; text-align: center; color: #8a7655; font-size: 13px; font-weight: 700; }
.lh-content .lh-ar { font-family: "Amiri", serif; font-size: 20px; color: #6b5535; letter-spacing: .08em; margin-inline-start: 4px; }
.lh-wrap .g-profile-head { margin-bottom: 6px; }

.g-admin-link { text-align: center; margin: 18px 0 0; font-size: 15px; font-weight: 800; }
.g-admin-link a { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); text-decoration: underline; }
.g-logo { display: block; width: 104px; height: 104px; margin: 4px auto 6px; border-radius: 26px; box-shadow: 0 10px 26px rgba(0,0,0,.35); }