/* Shared site chrome. The header and its drawer use the home page's own classes (app-header, logo-*, btn-icon, app-menu),
   so every page looks like the home header. Markup comes from scripts/site-nav.js; behavior from shared/js/site-header.js. */
.site-header { position: relative; z-index: 30; margin-bottom: 14px; }
.site-header .logo-container { color: inherit; text-decoration: none; }
.site-header .logo-container:hover .logo-icon { transform: rotate(-8deg) scale(1.08); }
.site-header .logo-container:focus-visible, .site-header .btn-icon:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 2px; border-radius: var(--radius-md); }
.site-header .site-brand-text { min-width: 0; display: block; }
.site-header .logo-title, .site-header .subtitle { display: block; }
.site-header a.btn-icon { color: var(--text-secondary); text-decoration: none; }
.site-header a.btn-icon:hover { color: var(--text-primary); }
.site-header a.btn-icon[aria-current="page"] { color: var(--accent-blue); border-color: color-mix(in srgb, var(--accent-blue) 55%, transparent); }
.site-header .app-menu > a[aria-current="page"], .site-header .app-menu > a[aria-current="location"] { color: var(--accent-blue); background: color-mix(in srgb, var(--accent-blue) 11%, transparent); }
body[data-theme="light"] .site-header .app-menu { background: #fff; }
.site-h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Board and kit apps keep their height: no subtitle, tighter spacing. */
.board-app .site-header { margin-bottom: 8px; }
.board-app .site-header .subtitle { display: none; }
.kit-page > .site-header { margin-bottom: 8px; }
.kit-page .site-header .app-menu { background: #fff; }
@media (max-width: 480px) { .site-header .subtitle { max-width: 100%; } }
@media print { .site-header, .footer-groups { display: none !important; } }

/* App drawer (same as the home menu) */
.app-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    width: 224px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .24);
    backdrop-filter: blur(24px) saturate(180%);
}
.app-menu.hidden { display: none; }
.app-menu-header { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 2px 4px 4px 12px; color: var(--text-muted); font-size: .82rem; font-weight: 800; }
.app-menu button,
.app-menu > a { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); font: inherit; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.app-menu button:hover,
.app-menu button:focus-visible,

.app-menu > a:hover,
.app-menu > a:focus-visible { background: color-mix(in srgb, var(--accent-blue) 11%, var(--color-surface-hover)); color: var(--accent-blue); outline: none; }
.app-menu-header #btn-menu-close { width: 34px; min-height: 34px; padding: 0; justify-content: center; color: var(--text-muted); }
.app-menu .material-symbols-outlined { display: inline-block; width: 21px; height: 21px; flex: 0 0 21px; overflow: hidden; white-space: nowrap; font-size: 21px; line-height: 21px; }

@media (max-width: 640px), (max-width: 960px) and (max-height: 480px) {
    /* Keep every menu action in view on small phones, including longer
       English labels. Row-major order also matches keyboard navigation. */
    .app-menu {
        position: fixed;
        top: max(12px, env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right));
        width: min(400px, calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right))));
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px;
        max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
        overflow-y: auto;
    }
    .app-menu-header { grid-column: 1 / -1; min-height: 44px; padding: 0 0 2px 8px; }
    .app-menu-header #btn-menu-close { width: 44px; min-height: 44px; }
    .app-menu > a,
    .app-menu > button { min-width: 0; min-height: 48px; padding: 8px; gap: 7px; font-size: .8rem; line-height: 1.3; }
    .app-menu > a > .material-symbols-outlined,
    .app-menu > button > .material-symbols-outlined { flex: 0 0 21px; }
    .app-menu > a > span:last-child,
    .app-menu > button > span:last-child { min-width: 0; overflow-wrap: anywhere; }
}

@media (min-width: 480px) and (max-width: 960px) and (max-height: 480px) {
    .app-menu { width: min(800px, calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right)))); grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .app-menu-header { padding-bottom: 0; }
    .app-menu > a,
    .app-menu > button { min-height: 44px; padding: 6px 8px; }
}

@media (min-width: 720px) and (max-width: 960px) and (max-height: 480px) {
    .app-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Footer groups: three labelled columns, shared by the home page and every content/game page. */
.footer-groups, .site-static-footer .footer-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; max-width: 960px; margin-inline: auto; text-align: left; justify-content: stretch; }
.footer-group-title { margin: 0 0 6px; padding-bottom: 8px; border-bottom: 2px solid color-mix(in srgb, var(--accent-blue) 45%, transparent); color: var(--text-primary); font-family: var(--font-display); font-size: .92rem; font-weight: 800; letter-spacing: -.01em; }
.footer-group ul { display: grid; margin: 0; padding: 0; list-style: none; }
.footer-group a { display: inline-flex; align-items: center; min-height: 38px; color: var(--text-secondary); font-size: .9rem; font-weight: 600; text-decoration: none; }
.footer-group a:hover { color: var(--accent-blue); text-decoration: underline; }
.site-static-footer { text-align: left; padding: 28px 0 0; }
.site-static-footer .footer-groups a { min-height: 38px; color: var(--text-secondary); }
.site-static-footer > p { max-width: 960px; margin: 22px auto 0; padding-top: 14px; border-top: 1px solid var(--color-border-subtle, #e2e8f0); text-align: center; }
.hub-footer .footer-groups { margin-bottom: 18px; }
@media (pointer: coarse) { .footer-group a, .site-static-footer .footer-groups a { min-height: 44px; } }
@media (max-width: 640px) {
    .footer-groups, .site-static-footer .footer-groups { grid-template-columns: 1fr; gap: 20px; }
    .footer-group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
}