/* Denkplein menu (assets/nav.js): on small screens the header keeps the brand and
   a menu button; the games, topscores, account and Dag/Nacht fold out below it. */
.dp-nav-host { position: relative; }
.top .dp-nav-btn { display: none; }
.dp-nav-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dp-nav-btn .dp-nav-x { display: none; }
.dp-nav-btn[aria-expanded="true"] .dp-nav-bars { display: none; }
.dp-nav-btn[aria-expanded="true"] .dp-nav-x { display: block; }
.dp-nav-btn.dp-btn[aria-expanded="true"] { background: var(--surface-sunken); }

.dp-nav { position: absolute; z-index: 60; top: calc(100% + var(--space-2)); left: 0; right: 0; padding: var(--space-3); border: var(--border-hair) solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-float); opacity: 0; transform: translateY(-6px); transition: opacity 140ms ease, transform 140ms ease; }
.dp-nav[hidden] { display: none; }
.dp-nav.dp-nav-open { opacity: 1; transform: none; }
.dp-nav-host.top-portal .dp-nav { top: calc(100% - var(--space-3)); }
.dp-nav-label { margin: var(--space-1) var(--space-3) var(--space-2); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.dp-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dp-nav-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 48px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); font: inherit; font-size: 16px; line-height: 24px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: transform 120ms ease, background-color 120ms ease; }
.dp-nav-item:hover { background: var(--surface-sunken); }
.dp-nav-item:active { transform: scale(.98); }
.dp-nav-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dp-nav-item[aria-current="page"] { background: var(--kobalt-soft); color: var(--kobalt); }
.dp-nav-item svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dp-nav-dot { width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
.dp-nav-dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
.dp-nav-hr { height: 0; margin: var(--space-2) var(--space-3); border-top: var(--border-hair) solid var(--line); }
/* The account link is filled in by account.js: avatar + name, or the user icon + Inloggen */
.dp-nav-item .dp-avatar { width: 24px; height: 24px; margin: 0 -2px; flex: none; }
.dp-nav-item[data-dp-account][hidden] { display: none; }

@media (max-width: 640px) {
  .top .dp-nav-btn { display: inline-flex; }
  .top .dp-nav-btn.icon { display: grid; }
  .dp-nav-ready .top .top-link,
  .dp-nav-ready .top .theme-btn,
  .dp-nav-ready .top #btnTheme,
  .dp-nav-ready .top > * > [data-dp-account] { display: none; }
}
@media (min-width: 641px) { .dp-nav { display: none; } }
@media (prefers-reduced-motion: reduce) { .dp-nav, .dp-nav-item { transition: none; } }

/* Site footer: pages without their own footer style use .dp-footer; the credit keeps
   "Ontwikkeld door Ardee BV" on one line when the footer wraps on a phone. */
.dp-footer { margin-top: var(--space-12); padding-top: var(--space-6); border-top: var(--border-hair) solid var(--line); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.dp-footer a { color: inherit; }
.game-info + .dp-footer { max-width: 1400px; margin: 0 auto; padding-bottom: var(--space-8); }
.dp-credit { white-space: nowrap; }