/* Basisstructuur (uit de starter, gekoppeld aan tokens uit theme.css). Kleur/glans staat in royal.css. */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font); font-size: 18px; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
#app { max-width: 560px; margin: 0 auto; min-height: 100dvh; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); position: relative; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.screen { display: flex; flex-direction: column; gap: var(--gap); }
h1 { margin: 8px 0 0; font-size: 2rem; } h2 { margin: 8px 0 0; font-size: 1.25rem; }
.lead { margin: 0; color: var(--color-muted); }
.muted { color: var(--color-muted); margin: 0; font-size: .9rem; }
.notice { margin: 0; padding: 10px 12px; border: 2px solid var(--color-accent-shadow); border-radius: 12px; background: var(--color-surface); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap-min); padding: 10px 18px; font: inherit; font-weight: 600; color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-line); border-radius: var(--radius); cursor: pointer; touch-action: manipulation; }
.btn:hover:not(:disabled) { border-color: var(--color-accent); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent-shadow); box-shadow: 0 3px 0 var(--color-accent-shadow); }
.btn-danger { color: var(--color-danger); border-color: var(--color-danger); }
.btn-icon { min-width: var(--tap-min); padding: 8px; }
.toggle[aria-checked="false"] { opacity: .75; text-decoration: line-through; }
.icon { width: 24px; height: 24px; display: block; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.levels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--gap); }
.levels .btn { width: 100%; flex-direction: column; gap: 2px; }
.level-stars { letter-spacing: 2px; font-size: .95rem; }

.hud { display: flex; align-items: center; gap: var(--gap); }
.hud-info { flex: 1; display: flex; flex-direction: column; text-align: center; font-weight: 600; font-size: .95rem; }

.overlay { overflow-y: auto; position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--overlay-bg); z-index: 10; }
.card { width: min(100%, 360px); display: flex; flex-direction: column; gap: var(--gap); padding: 20px; background: var(--color-surface); border-radius: 20px; text-align: center; }
.card h2, .card p { margin: 0; }

/* Scrollbalken in spelthema: dikke mintgroene duim met crème rand. Chromium/Safari via ::-webkit-scrollbar;
   scrollbar-color alleen voor Firefox, want in Chromium 121+ schakelt die de webkit-stijl uit. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--scroll-track); border-radius: 999px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 3px solid var(--scroll-border); border-radius: 999px; }
::-webkit-scrollbar-thumb:active { background: var(--scroll-thumb-active); }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-corner { background: transparent; }
@supports (-moz-appearance: none) { * { scrollbar-color: var(--scroll-thumb-solid) var(--scroll-track); } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (max-height: 520px) { .hud-info { flex-direction: row; justify-content: center; gap: 12px; } }