/* Site shell: standardized header + footer for game pages
   Viewports: 768px breakpoint. body.viewport-mobile (<768) | body.viewport-desktop (>=768).
   Layout rules (site-wide): header line = bottom of .top-header; footer line = top of .footer-wrapper.
   Content band = between header line and footer line. Dropdowns align top with header line. */
:root {
    /* JS (setShellHeights in site-shell.js) updates --header-height/--footer-height dynamically.
       These are just safe fallbacks for first paint. */
    --header-height: 80px;
    --header-line: 80px;   /* content band starts here (y of line under header) */
    --footer-height: 120px;
    --footer-line: calc(100vh - 120px); /* content band ends here (y of line above footer) */
    --content-band-height: calc(100vh - var(--header-height) - var(--footer-height));
    
    /* Global z-index token system - deliberate stacking hierarchy */
    --z-base: 1;
    --z-header: 100;
    --z-popover: 300;
    --z-sitemap: 500;
    --z-modal: 900;
    --z-toast: 1200;
}
/* On mobile we no longer hard-code 156px/100px here – dynamic JS-driven values win. */
/* Game-themed arrow cursor – site-wide (including starfield/background) */
html, body, body * {
    cursor: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="black" stroke="white" stroke-width="1" d="M2 2 L2 18 L10 12 L14 22 L17 20 L13 10 L22 10 Z"/%3E%3C/svg%3E') 2 2, auto;
}
.library-starfield, .pub-starfield, #starfield-grab-zone {
    cursor: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="black" stroke="white" stroke-width="1" d="M2 2 L2 18 L10 12 L14 22 L17 20 L13 10 L22 10 Z"/%3E%3C/svg%3E') 2 2, grab !important;
}
.library-starfield:active, .pub-starfield:active, #starfield-grab-zone:active {
    cursor: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="black" stroke="white" stroke-width="1" d="M2 2 L2 18 L10 12 L14 22 L17 20 L13 10 L22 10 Z"/%3E%3C/svg%3E') 2 2, grabbing !important;
}
canvas.library-starfield,
canvas.pub-starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: auto;
}
a, button, [role="button"], input[type="submit"], input[type="button"], .btn-sfx-mute, .header-theme-toggle, .header-activity-btn, .header-nav a, .btn-login, .btn-account, .footer-calendar-btn, .footer-map-btn, .activity-feed-toggle, .activity-feed-close, .hub-card {
    cursor: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="black" stroke="white" stroke-width="1" d="M2 2 L2 18 L10 12 L14 22 L17 20 L13 10 L22 10 Z"/%3E%3C/svg%3E') 2 2, pointer;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
    min-height: 100vh;
    height: auto;
    width: 100%;
    overflow-x: hidden;
}
body {
    min-height: 100vh;
    height: auto;
    width: 100%;
    overflow-x: hidden;
}
.site-shell-content { position: relative; z-index: 1; margin-top: var(--header-height); padding-bottom: var(--footer-height); min-height: var(--content-band-height); }
.site-shell-content .game-wrap { padding-top: 12px !important; padding-bottom: 12px !important; }
/* Game wrap directly under header (e.g. template): push below fixed header, fill viewport */
.top-header ~ .game-wrap {
    margin-top: 80px;
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    padding-bottom: 80px;
}
.top-header ~ .game-wrap .game-container { flex: 1 1 auto; }

.top-header {
    position: fixed; top: 0; left: 0; right: 0; width: 100%;
    background: linear-gradient(180deg, #fff 0%, #e8e8e8 50%, #eee 100%) !important;
    border-bottom: 2px solid #000;
    padding: 20px 30px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 20px;
    z-index: var(--z-header);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1), 0 0 24px rgba(0,0,0,0.08), 0 0 48px rgba(0,0,0,0.04);
}
.header-brand-nav { display: flex; align-items: center; gap: 15px; flex-wrap: nowrap; }
.header-left { display: flex; align-items: center; gap: 15px; flex-wrap: nowrap; }
.header-left a { text-decoration: none; color: inherit; }
/* Volume button MUST match theme toggle: same size, black outline, boxed look – high specificity to override page styles */
.top-header .header-left .btn-sfx-mute,
.top-header .header-left #sfx-mute-btn,
.btn-sfx-mute, #sfx-mute-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 2px solid #000 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 20px !important;
    cursor: pointer;
    box-sizing: border-box !important;
}
.btn-sfx-mute:hover, #sfx-mute-btn:hover { background: #000 !important; color: #fff !important; border-color: #000 !important; }
/* Muted state: red X, inverted fill (black bg, red icon/border) */
.btn-sfx-mute.sfx-muted, #sfx-mute-btn.sfx-muted {
    background: #000 !important;
    color: #c00 !important;
    border-color: #c00 !important;
}
.btn-sfx-mute.sfx-muted:hover, #sfx-mute-btn.sfx-muted:hover {
    background: #c00 !important;
    color: #fff !important;
    border-color: #c00 !important;
}
.header-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 2px solid #000; border-radius: 8px; background: #fff; font-size: 20px; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; flex-shrink: 0; }
.header-theme-toggle:hover { background: #f0f0f0; }

@media (max-width: 768px) {
    #sfx-mute-btn,
    .btn-sfx-mute,
    #theme-toggle-btn,
    .header-theme-toggle {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}

/* Desktop: Activity immediately to the right of day/night toggle – keep together */
body.viewport-desktop .header-left .activity-controls-desktop,
body.viewport-desktop .header-left .activity-controls { display: flex !important; align-items: center; gap: 8px; flex-shrink: 0; }
@media (min-width: 768px) {
    .header-left .activity-controls-desktop { display: flex !important; align-items: center; gap: 8px; flex-shrink: 0; }
}
.site-brand { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0; }
.top-header h1 { color: #000; font-size: 28px; margin: 0; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.header-nav { display: flex; gap: 4px; align-items: center; }
.header-nav a { color: #000; text-decoration: none; padding: 8px 15px; padding-bottom: 10px; border-radius: 6px; border-bottom: 2px solid #000; transition: all 0.2s; font-size: 14px; font-weight: 500; }
.header-nav a:hover { background: #000; color: #fff; border-bottom-color: #000; }
.header-nav a:hover .nav-default, .header-nav a:hover .nav-hover { color: #fff !important; }
.header-nav .nav-hover { display: none; }
.header-nav a:hover .nav-default { display: none; }
.header-nav a:hover .nav-hover { display: inline; }
.header-nav a.active { background: #000; color: #fff !important; font-weight: 600; border-bottom: 2px solid #fff; }
#header-nav-bar { border: none; }
body.night-mode .top-header {
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 50%, #000 100%) !important;
    border-bottom: 2px solid rgba(255,255,255,0.6);
    box-shadow: 0 2px 0 0 rgba(255,255,255,0.2), 0 2px 16px rgba(255,255,255,0.08), 0 0 28px rgba(255,255,255,0.12);
}
body.night-mode .header-nav { border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 4px; }
body.night-mode .header-nav a { color: #fff; border-bottom: 2px solid #fff; background: transparent; }
body.night-mode .header-nav a:hover { background: #fff; color: #000 !important; border-bottom-color: #000; }
body.night-mode .header-nav a:hover .nav-default, body.night-mode .header-nav a:hover .nav-hover { color: #000 !important; }
body.night-mode .header-nav a.active { background: #fff; color: #000 !important; border-bottom: 2px solid #000; }
#header-nav-bar { border-bottom: none; }
#login-section { display: flex; gap: 10px; align-items: center; }
/* Login: day = white infill + black font; night = inverse; when auth popup open = inverted */
#login-section .btn-login,
.btn-login,
.footer-login-btn,
.btn-mobile-login { padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; border: 2px solid #000; background: #fff !important; color: #000 !important; }
#login-section .btn-login:hover,
.btn-login:hover,
.footer-login-btn:hover,
.btn-mobile-login:hover { background: #000 !important; color: #fff !important; border-color: #000; }
body.night-mode #login-section .btn-login,
body.night-mode .btn-login,
body.night-mode .footer-login-btn,
body.night-mode .btn-mobile-login { background: #000 !important; color: #fff !important; border-color: #fff !important; }
body.night-mode #login-section .btn-login:hover,
body.night-mode .btn-login:hover,
body.night-mode .footer-login-btn:hover,
body.night-mode .btn-mobile-login:hover { background: #fff !important; color: #000 !important; border-color: #fff !important; }
body.auth-popup-open #login-section .btn-login,
body.auth-popup-open .btn-login,
body.auth-popup-open .footer-login-btn,
body.auth-popup-open .btn-mobile-login { background: #fff !important; color: #000 !important; border-color: #000 !important; }
.header-account { display: flex; align-items: center; margin-left: auto; gap: 10px; flex-shrink: 0; }
.header-activity-btn { padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; border: 2px solid #000; background: #fff; color: #000; }
.header-activity-btn:hover { background: #000; color: #fff; }
body.activity-feed-open .header-activity-btn,
body.activity-feed-open #activity-feed-toggle { background: #000 !important; color: #fff !important; border-color: #000 !important; }
body.activity-feed-open .header-activity-btn:hover,
body.activity-feed-open #activity-feed-toggle:hover { background: #333 !important; color: #fff !important; }
.btn-account { padding: 8px 16px; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; border: 2px solid #000; background: #fff !important; color: #000 !important; text-transform: uppercase; letter-spacing: 0.05em; }
.btn-account:hover { background: #000 !important; color: #fff !important; border-color: #000; }
/* Account dropdown open: invert button like Activity / volume mute */
body.account-dropdown-open .btn-account,
body.account-dropdown-open #account-btn-header,
body.account-dropdown-open #account-btn-mobile,
body.account-dropdown-open #footer-account-btn {
    background: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}
body.account-dropdown-open .btn-account:hover,
body.account-dropdown-open #account-btn-header:hover,
body.account-dropdown-open #account-btn-mobile:hover,
body.account-dropdown-open #footer-account-btn:hover {
    background: #333 !important;
    color: #fff !important;
    border-color: #333 !important;
}
body.night-mode .btn-account { background: #000 !important; color: #fff !important; border-color: #fff !important; }
body.night-mode .btn-account:hover { background: #fff !important; color: #000 !important; border-color: #fff !important; }
body.night-mode.account-dropdown-open .btn-account,
body.night-mode.account-dropdown-open #account-btn-header,
body.night-mode.account-dropdown-open #account-btn-mobile,
body.night-mode.account-dropdown-open #footer-account-btn {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}
body.night-mode.account-dropdown-open .btn-account:hover,
body.night-mode.account-dropdown-open #account-btn-header:hover,
body.night-mode.account-dropdown-open #account-btn-mobile:hover,
body.night-mode.account-dropdown-open #footer-account-btn:hover {
    background: #e0e0e0 !important;
    color: #000 !important;
    border-color: #e0e0e0 !important;
}
.footer-account-btn { font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.header-avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: #fff; flex-shrink: 0; }

#activity-feed,
.activity-feed { z-index: var(--z-popover) !important; }
#account-popup,
.account-popup { display: none; position: fixed; right: 16px; left: auto; z-index: var(--z-popover) !important; min-width: 220px; max-width: 280px; padding: 0; background: #fff; border: 2px solid #000; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); flex-direction: column; }
.account-popup.open { display: flex !important; right: 16px !important; left: auto !important; }
.account-popup-user { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #eee; }
.account-popup-name { font-size: 14px; font-weight: 600; color: #000; }
.account-popup a, .account-popup button { display: block; padding: 10px 16px; text-align: left; background: none; border: none; font-size: 14px; color: #000; text-decoration: none; cursor: pointer; width: 100%; }
.account-popup a:hover, .account-popup button:hover { background: #000; color: #fff; }

.mobile-top-actions { display: none; position: fixed; top: 100px; left: 0; right: 0; z-index: var(--z-header); padding: 0 16px; box-sizing: border-box; flex-direction: row; align-items: center; justify-content: space-between; background: #fff; border-bottom: 2px solid #000; min-height: 52px; }
.mobile-top-actions .activity-feed-toggle, .mobile-top-actions .btn-mobile-activity, .mobile-top-actions .btn-mobile-account { padding: 10px 18px; border: 2px solid #000; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.mobile-top-actions .activity-feed-toggle, .mobile-top-actions .btn-mobile-activity { background: #fff; color: #000; }
.mobile-top-actions .activity-feed-toggle:hover, .mobile-top-actions .btn-mobile-activity:hover { background: #000; color: #fff; }
.mobile-top-actions .btn-mobile-account { background: #fff !important; color: #000 !important; border-color: #000; }
.mobile-top-actions .btn-mobile-account:hover { background: #000 !important; color: #fff !important; border-color: #000; }
.mobile-top-actions .btn-mobile-login { background: #fff; color: #000; }
.mobile-top-actions .btn-mobile-login:hover { background: #000; color: #fff; }
body.night-mode .mobile-top-actions { background: #000; border-bottom-color: #fff; border-top-color: #fff; }
/* Desktop: hide mobile-top-actions row (header has nav + activity + login) */
@media (min-width: 768px) {
    .mobile-top-actions, #mobile-top-actions { display: none !important; }
}
/* Mobile: show under-header row (Activity, nav, Login); hide from main header */
body.viewport-mobile .mobile-top-actions,
body.viewport-mobile #mobile-top-actions {
    display: flex !important;
    top: 56px;
    left: 0;
    right: 0;
    padding: 8px 12px;
    gap: 8px;
    border-top: 2px solid #000;
}
body.viewport-mobile .mobile-top-actions .activity-feed-toggle,
body.viewport-mobile .mobile-top-actions .btn-mobile-activity { display: inline-flex !important; }
body.viewport-mobile .mobile-top-actions .btn-mobile-account,
body.viewport-mobile .mobile-top-actions .btn-mobile-login { display: inline-flex; }
body.viewport-mobile .mobile-top-actions .btn-mobile-account[style*="display: none"] { display: none !important; }
body.viewport-mobile .mobile-top-actions .btn-mobile-login[style*="display: none"] { display: none !important; }
body.viewport-mobile .header-left .activity-controls-desktop,
body.viewport-mobile .header-left .activity-controls { display: none !important; }
body.viewport-mobile .top-header .header-account { display: none !important; }
body.viewport-mobile .header-left { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: 6px; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.viewport-mobile .header-left .site-brand { order: 0; flex-shrink: 0; }
body.viewport-mobile .header-left .header-nav { order: 1; flex-shrink: 0; display: flex !important; gap: 4px; }
body.viewport-mobile .header-left .header-theme-toggle { order: 2; flex-shrink: 0; }
body.viewport-mobile .header-left .btn-sfx-mute { order: 3; flex-shrink: 0; }
body.viewport-mobile .header-nav a { padding: 6px 10px; font-size: 13px; }
body.viewport-mobile .top-header { padding: 12px 12px; gap: 8px; justify-content: flex-start; flex-wrap: nowrap; }
/* Desktop: Activity in header (between nav and Login). Footer account box hidden on desktop. */
@media (min-width: 768px) {
    .footer-account-box { display: none !important; }
}

.footer-wrapper { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-header); display: flex !important; flex-direction: column; align-items: stretch; visibility: visible; }
.footer-status-row { display: none; padding: 6px 16px; text-align: center; font-size: 12px; color: #000; }
.footer-toggle-bar {
    background: linear-gradient(180deg, #f8f8f8 0%, #fff 100%);
    border-top: 2px solid #000;
    padding: 4px 12px;
    display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; color: #000;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.05), 0 0 20px rgba(0,0,0,0.06);
}
.footer-content {
    background: linear-gradient(180deg, #fff 0%, #f5f5f5 100%);
    border-top: 1px solid #ccc;
    max-height: 160px;
    transition: max-height 0.25s;
    overflow: hidden;
    box-shadow: 0 -2px 16px rgba(0,0,0,0.06), 0 0 24px rgba(0,0,0,0.05);
}
.footer-main-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 20px; gap: 16px; flex-wrap: wrap; border-top: 2px solid #000; }
.footer-left-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.footer-activity-btn { padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: 2px solid #000; background: #fff; color: #000; }
.footer-activity-btn:hover { background: #000; color: #fff; }
/* Activity strip: button + x (x only visible when popup open) */
.activity-above-footer { position: fixed; bottom: 102px; left: 10px; z-index: var(--z-popover); display: none !important; align-items: center; gap: 6px; }
.activity-feed-close-footer { display: none; width: 36px; height: 36px; min-width: 36px; padding: 0; border: 2px solid #000; border-radius: 6px; background: #fff; color: #000; font-size: 20px; font-weight: bold; cursor: pointer; align-items: center; justify-content: center; }
body.activity-feed-open .activity-feed-close-footer { display: inline-flex !important; }
.activity-feed-close-footer:hover { background: #000; color: #fff; }
.footer-datetime-box {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 6px 10px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.timezone-dropup {
    position: fixed;
    bottom: 73px;
    left: 10px; /* Above date/time on the left where user clicks */
    right: auto;
    background: #fff;
    color: #000;
    border: 2px solid #000;
    border-radius: 10px;
    padding: 18px 20px;
    min-width: 200px;
    max-width: 300px;
    width: max-content;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
    z-index: var(--z-popover);
}
.timezone-dropup h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.timezone-dropup-hint { color: #888; font-size: 12px; margin: 0 0 14px; line-height: 1.4; }
.timezone-select { width: 100%; padding: 10px 12px; border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; font-size: 14px; margin-bottom: 12px; background: #fafafa; }
.timezone-select:focus { outline: none; border-color: #000; background-color: #fff; }
.timezone-apply { width: 100%; padding: 10px 16px; border: 2px solid #000; border-radius: 8px; background: #000; color: #fff; font-weight: 600; cursor: pointer; font-size: 14px; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.timezone-apply:hover { background: #222; border-color: #000; }
body.night-mode .timezone-dropup { background: #000; color: #fff; border-color: #fff; box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
body.night-mode .timezone-dropup-hint { color: #999; }
body.night-mode .timezone-select { background: #111; color: #fff; border-color: rgba(255,255,255,0.2); }
body.night-mode .timezone-select:focus { border-color: #fff; background-color: #1a1a1a; }
body.night-mode .timezone-apply { background: #000; color: #fff; border-color: #fff; }
body.night-mode .timezone-apply:hover { background: #fff; color: #000; border-color: #fff; }
.footer-calendar-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: #fff !important; color: #000 !important; border: 2px solid #000 !important; border-radius: 6px; cursor: pointer; font-size: 16px; flex-shrink: 0; }
.footer-calendar-btn:hover { background: #e8e8e8 !important; border-color: #333; }
body.reminders-open .footer-calendar-btn,
body.timezone-open .footer-calendar-btn { background: #000 !important; color: #fff !important; border-color: #000 !important; }
body.reminders-open .footer-calendar-btn:hover,
body.timezone-open .footer-calendar-btn:hover { background: #333 !important; color: #fff !important; }
.footer-datetime-btn {
    background: #fff;
    color: #000;
    border: 2px solid #000;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    padding: 6px 12px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.footer-datetime-btn:hover { background: #000; color: #fff; border-color: #000; }
.footer-center-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.footer-account-box { display: none; align-items: center; gap: 8px; }
.footer-account-btn, .footer-login-btn { padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: 2px solid #000; }
.footer-account-btn { background: #fff !important; color: #000 !important; }
.footer-account-btn:hover { background: #000; color: #fff; border-color: #000; }
.footer-login-btn { background: #fff; color: #000; }
.footer-login-btn:hover { background: #000; color: #fff; }
.footer-center-status {
    flex: 1;
    min-height: 28px;
    padding: 4px 12px;
    text-align: center;
    font-size: 12px;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    background: transparent;
    border: 2px solid #000;
    border-radius: 8px;
    cursor: default;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.footer-center-status:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}
.footer-center-status:hover .status-message,
.footer-center-status:hover #status-message { color: #fff !important; }
.footer-center-status .status-message, #status-message, #status-message-mobile { color: #000; }
.footer-credit-box {
    flex: 0 0 auto;
    text-align: right;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: 600;
    font-size: 12px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.footer-credit-box:hover { background: #000; color: #fff; border-color: #000; }
.footer-credit-box:hover a { color: #fff; }
.footer-credit-box:hover .footer-map-btn { background: #000 !important; color: #fff !important; border-color: #fff !important; }
.game-activity-btn-wrap { display: none; }
.footer-map-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #fff !important; color: #000 !important; border: 2px solid #000 !important; border-radius: 6px; cursor: pointer; font-size: 18px; }
.footer-map-btn:hover { background: #e8e8e8 !important; border-color: #333; }
.footer-credit-box a { color: #000; font-weight: 700; text-decoration: none; }
body.night-mode .site-brand { border-color: rgba(255,255,255,0.5); }
body.night-mode .btn-sfx-mute,
body.night-mode #sfx-mute-btn,
body.night-mode .header-theme-toggle,
body.night-mode #theme-toggle-btn,
body.night-mode .top-header .btn-sfx-mute,
body.night-mode .top-header #sfx-mute-btn,
body.night-mode #site-header-placeholder .btn-sfx-mute,
body.night-mode #site-header-placeholder #sfx-mute-btn {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}
body.night-mode .btn-sfx-mute:hover,
body.night-mode #sfx-mute-btn:hover,
body.night-mode .header-theme-toggle:hover,
body.night-mode #theme-toggle-btn:hover,
body.night-mode .top-header .btn-sfx-mute:hover,
body.night-mode .top-header #sfx-mute-btn:hover,
body.night-mode #site-header-placeholder .btn-sfx-mute:hover,
body.night-mode #site-header-placeholder #sfx-mute-btn:hover {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}
/* Night: muted = black bg, red X, red border; hover red bg white */
body.night-mode .btn-sfx-mute.sfx-muted,
body.night-mode #sfx-mute-btn.sfx-muted {
    background: #000 !important;
    color: #c00 !important;
    border-color: #c00 !important;
}
body.night-mode .btn-sfx-mute.sfx-muted:hover,
body.night-mode #sfx-mute-btn.sfx-muted:hover {
    background: #c00 !important;
    color: #fff !important;
    border-color: #c00 !important;
}
body.night-mode .footer-account-btn { background: #000 !important; color: #fff !important; border-color: #fff !important; }
body.night-mode .footer-account-btn:hover { background: #fff !important; color: #000 !important; border-color: #fff !important; }
body.night-mode .mobile-top-actions .btn-mobile-account { background: #000 !important; color: #fff !important; border-color: #fff !important; }
body.night-mode .mobile-top-actions .btn-mobile-account:hover { background: #fff !important; color: #000 !important; border-color: #fff !important; }
body.night-mode .mobile-top-actions .activity-feed-toggle,
body.night-mode .mobile-top-actions .btn-mobile-activity,
body.night-mode .mobile-top-actions .btn-mobile-login { background: #000 !important; color: #fff !important; border-color: #fff !important; }
body.night-mode .mobile-top-actions .activity-feed-toggle:hover,
body.night-mode .mobile-top-actions .btn-mobile-activity:hover,
body.night-mode .mobile-top-actions .btn-mobile-login:hover { background: #fff !important; color: #000 !important; border-color: #fff !important; }
body.night-mode .footer-calendar-btn,
body.night-mode .footer-map-btn { background: #000 !important; color: #fff !important; border-color: #fff !important; }
body.night-mode .footer-calendar-btn:hover,
body.night-mode .footer-map-btn:hover { background: #fff !important; color: #000 !important; border-color: #fff !important; }
body.night-mode .footer-datetime-btn {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}
body.night-mode .footer-datetime-btn:hover {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}
body.night-mode.reminders-open .footer-calendar-btn,
body.night-mode.reminders-open #footerCalendarBtn { background: #fff !important; color: #000 !important; border-color: #fff !important; }
body.night-mode.timezone-open .footer-datetime-btn,
body.night-mode.timezone-open #footerDateTime { background: #fff !important; color: #000 !important; border-color: #fff !important; }
body.night-mode .footer-datetime-btn:focus, body.night-mode .footer-datetime-btn:active { border-color: #fff; }
body.night-mode .footer-datetime-box {
    background: #000 !important;
    border-color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}
body.night-mode .footer-credit-box {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}
body.night-mode .footer-credit-box a { color: #fff; }
body.night-mode .footer-credit-box:hover {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
}
body.night-mode .footer-credit-box:hover a { color: #000; }
body.night-mode .footer-credit-box:hover .footer-map-btn { background: #fff !important; color: #000 !important; border-color: #fff !important; }
body.night-mode .footer-center-status {
    color: #fff;
    border-color: rgba(255,255,255,0.25);
}
body.night-mode .footer-center-status:hover {
    background: #fff !important;
    border-color: #fff !important;
    color: #000 !important;
}
body.night-mode .footer-center-status:hover .status-message,
body.night-mode .footer-center-status:hover #status-message,
body.night-mode .footer-center-status:hover #status-message-mobile { color: #000 !important; }
body.night-mode .footer-center-status .status-message,
body.night-mode #status-message,
body.night-mode #status-message-mobile { color: #fff !important; }
/* Home page (page-3d): volume icon MUST match sun button – same size, black outline, button look */
body.page-3d .btn-sfx-mute, body.page-3d #sfx-mute-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 40px !important; min-height: 40px !important; width: 40px !important; height: 40px !important; padding: 0 !important; border: 2px solid #000 !important; border-radius: 8px !important; background: #fff !important; font-size: 20px !important; box-sizing: border-box !important; outline: none !important; }
body.page-3d.night-mode .btn-sfx-mute,
body.page-3d.night-mode #sfx-mute-btn {
    border: 2px solid #fff !important;
    background: #000 !important;
    color: #fff !important;
}
/* Mobile home: volume MUST keep outline (overrides any page/centering) */
body.viewport-mobile.page-3d .btn-sfx-mute,
body.viewport-mobile.page-3d #sfx-mute-btn,
body.viewport-mobile .top-header .btn-sfx-mute,
body.viewport-mobile .top-header #sfx-mute-btn { border: 2px solid #000 !important; border-radius: 8px !important; min-width: 40px !important; min-height: 40px !important; }
body.viewport-mobile.page-3d.night-mode .btn-sfx-mute,
body.viewport-mobile.page-3d.night-mode #sfx-mute-btn,
body.viewport-mobile.night-mode .top-header .btn-sfx-mute,
body.viewport-mobile.night-mode .top-header #sfx-mute-btn { border-color: #fff !important; }
.footer-wrapper.footer-collapsed .footer-content { max-height: 0; opacity: 0; border-top-width: 0; }

#site-header-placeholder { overflow: visible; }
/* Sitemap overlay: full-screen flex container for true vertical centering */
.sitemap-overlay { 
    position: fixed !important; 
    inset: 0 !important; /* Full viewport coverage */
    background: transparent !important; /* NO blackening/dimming behind sitemap */
    z-index: var(--z-sitemap); 
    display: none; 
    align-items: center; /* Vertical center */
    justify-content: center; /* Horizontal center */
    padding: 20px; 
    box-sizing: border-box; 
}
.sitemap-overlay.page-overlay { 
    /* Remove top/bottom constraints - use full viewport for true centering */
    position: fixed !important;
    background: transparent !important; /* Force transparent - no blackening */
}
.sitemap-overlay.open { 
    display: flex !important;
    background: transparent !important; /* Force transparent when open */
}
/* Override any page-level sitemap styles */
#sitemap-overlay,
div#sitemap-overlay,
.sitemap-overlay,
.sitemap-overlay.page-overlay,
.sitemap-overlay.open {
    background: transparent !important; /* NO blackening/dimming behind sitemap */
}
/* Sitemap popup: relative positioning within centered flex container */
#sitemap-popup {
    position: relative !important; /* NOT fixed - stays within centered overlay */
    max-height: min(70dvh, 560px);
    overflow: auto;
}
.sitemap-icon { display: inline-block; margin-right: 8px; }
#logout-confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: 20px; }
#logout-confirm-overlay.open { display: flex; }
#logout-confirm-popup { background: #fff; color: #000; border-radius: 12px; padding: 24px; max-width: 360px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,0.3); border: 2px solid #000; }
#logout-confirm-popup .logout-confirm-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
#logout-confirm-popup .btn-logout-confirm { padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 6px; border: 2px solid #000; background: #000; color: #fff; }
#logout-confirm-popup .btn-logout-cancel { padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 6px; border: 2px solid #000; background: #fff; color: #000; }

/* Activity feed – clean like reminders; top set by JS (header + 150px). Fallback so never at 0. */
.activity-feed { display: none; position: fixed; top: 200px; left: 16px; width: 320px; max-height: 320px; overflow-y: auto; background: #fff; border: 2px solid #000; border-radius: 12px; padding: 24px; z-index: var(--z-popover) !important; font-size: 14px; color: #000; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.activity-feed.open { display: flex; }
.activity-feed.activity-feed-popup { max-height: 360px; }
body:has(.activity-above-footer) .activity-feed.open { left: 10px; right: auto; bottom: 148px; top: auto !important; max-height: 320px; }
.activity-feed-header { display: flex; justify-content: space-between; align-items: center; padding: 0 0 12px; border-bottom: 1px solid #eee; margin-bottom: 12px; }
.activity-feed-header h4 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #000; }
.activity-feed-header .activity-feed-title-link { color: #000; text-decoration: none; }
.activity-feed-header .activity-feed-title-link:hover { text-decoration: underline; }
.activity-feed-close { background: none; border: none; font-size: 20px; cursor: pointer; color: #666; }
.activity-feed .activity-feed-close { display: none !important; }
.activity-feed-close-header { display: none !important; }
.activity-feed ul { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; }
.activity-feed li { padding: 10px 12px; border-bottom: 1px solid #eee; color: #000; cursor: pointer; font-size: 14px; }
.activity-feed li:last-child { border-bottom: none; }
.activity-username { font-weight: 700; color: #000; text-decoration: none; }
.activity-username:hover { text-decoration: underline; }
.activity-username.anon { cursor: default; }
/* Day: black text, black border. Hover: invert */
.activity-feed li:hover { background: #000; color: #fff; }
.activity-feed li:hover .activity-username,
.activity-feed li:hover .event-time { color: #fff; }
.activity-feed li:hover .activity-username:hover { color: #e0e0e0; }
body.night-mode .activity-feed { background: #000 !important; border: 2px solid #fff !important; color: #fff !important; }
body.night-mode .activity-feed-header h4,
body.night-mode .activity-feed-header .activity-feed-title-link,
body.night-mode .activity-feed li,
body.night-mode .activity-feed .activity-username { color: #fff !important; }
body.night-mode .activity-feed li { border-bottom-color: #333 !important; }
body.night-mode .activity-feed li:hover { background: #fff !important; color: #000 !important; }
body.night-mode .activity-feed li:hover .activity-username,
body.night-mode .activity-feed li:hover .event-time { color: #000 !important; }
body.night-mode .activity-feed .event-time { color: #aaa !important; }
body.night-mode .activity-username { color: #fff; }

/* ========== Desktop viewport standardization (>=768px): header, footer, Activity, Account same on every page ========== */
@media (min-width: 768px) {
    .top-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: linear-gradient(180deg, #fff 0%, #e8e8e8 50%, #eee 100%) !important;
        border-bottom: 2px solid #000 !important;
        padding: 20px 30px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 20px !important;
        z-index: var(--z-header) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1), 0 0 24px rgba(0,0,0,0.08), 0 0 48px rgba(0,0,0,0.04) !important;
    }
    .top-header .header-brand-nav { display: flex !important; align-items: center !important; gap: 15px !important; flex-wrap: nowrap !important; }
    .top-header .header-left { display: flex !important; align-items: center !important; gap: 15px !important; flex-wrap: nowrap !important; }
    .top-header .header-nav { display: flex !important; gap: 4px !important; align-items: center !important; }
    .top-header .header-account { display: flex !important; align-items: center !important; margin-left: auto !important; gap: 10px !important; flex-shrink: 0 !important; }
    .header-activity-btn,
    .top-header .header-activity-btn {
        padding: 8px 16px !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        border: 2px solid #000 !important;
        background: #fff !important;
        color: #000 !important;
        min-height: 40px !important;
        align-items: center !important;
        display: inline-flex !important;
    }
    .header-activity-btn:hover,
    .top-header .header-activity-btn:hover { background: #000 !important; color: #fff !important; }
    body.activity-feed-open .header-activity-btn,
    body.activity-feed-open .top-header .header-activity-btn,
    body.activity-feed-open #activity-feed-toggle { background: #000 !important; color: #fff !important; border-color: #000 !important; }
    .btn-account,
    .top-header .btn-account {
        padding: 8px 16px !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        border: 2px solid #000 !important;
        background: #fff !important;
        color: #000 !important;
        min-height: 40px !important;
        align-items: center !important;
        display: inline-flex !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
    }
    .btn-account:hover,
    .top-header .btn-account:hover { background: #000 !important; color: #fff !important; border-color: #000 !important; }
    .footer-wrapper {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: var(--z-header) !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
    }
    .footer-toggle-bar { background: linear-gradient(180deg, #f8f8f8 0%, #fff 100%) !important; border-top: 2px solid #000 !important; padding: 4px 12px !important; box-shadow: 0 -2px 12px rgba(0,0,0,0.05), 0 0 20px rgba(0,0,0,0.06); }
    .footer-content { background: linear-gradient(180deg, #fff 0%, #f5f5f5 100%) !important; border-top: 1px solid #ccc !important; box-shadow: 0 -2px 16px rgba(0,0,0,0.06), 0 0 24px rgba(0,0,0,0.05); }
    .footer-main-row { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; padding: 8px 20px !important; gap: 16px !important; flex-wrap: wrap !important; }
    body.viewport-desktop .header-activity-btn { display: inline-flex !important; }
    /* Desktop: no X next to Activity – click Activity again to close (same as home) */
    body.viewport-desktop .activity-feed-close-header,
    body.viewport-desktop.activity-feed-open .activity-feed-close-header { display: none !important; }
    /* Desktop: position set by JS (header + 150px). Do not set top/left here so JS wins on every page. */
    body.viewport-desktop .activity-feed.activity-feed-popup.open {
        bottom: auto !important;
        right: auto !important;
    }
}
body.night-mode .top-header h1,
body.night-mode .top-header h1 .icon,
body.night-mode .top-header h1 .site-brand-text { color: #fff !important; }
body.night-mode .header-activity-btn,
body.night-mode .top-header .header-activity-btn { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; outline: 1px solid rgba(255,255,255,0.7); outline-offset: 2px; }
body.night-mode .header-activity-btn:hover,
body.night-mode .top-header .header-activity-btn:hover { background: #fff !important; color: #000 !important; border-color: #fff !important; outline-color: rgba(0,0,0,0.3); }
body.night-mode.activity-feed-open .header-activity-btn,
body.night-mode.activity-feed-open .top-header .header-activity-btn { background: #fff !important; color: #000 !important; border-color: #fff !important; }
body.night-mode .btn-account,
body.night-mode .top-header .btn-account { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; outline: 1px solid rgba(255,255,255,0.7); outline-offset: 2px; }
body.night-mode .btn-account:hover,
body.night-mode .top-header .btn-account:hover { background: #fff !important; color: #000 !important; border-color: #fff !important; outline-color: rgba(0,0,0,0.3); }
body.night-mode .footer-wrapper .footer-toggle-bar,
body.night-mode .footer-wrapper .footer-content {
    background: linear-gradient(180deg, #111 0%, #000 100%) !important;
    border-color: #fff !important;
    box-shadow: 0 -2px 20px rgba(0,0,0,0.4), 0 0 32px rgba(255,255,255,0.08), 0 0 64px rgba(255,255,255,0.04);
}
body.night-mode .top-header { border-bottom-color: #fff !important; }
body.night-mode .footer-center-status { border-color: #fff !important; }

/* Standardized game band: all /play/* pages use this template */
body.page-game .game-band {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--header-height, 72px) + 5px);
    bottom: calc(var(--footer-height, 80px) + 5px);
    overflow: auto;
    padding: 12px;
    box-sizing: border-box;
}

/* Standardized game stage width: wider but responsive on all games */
body.page-game .game-stage {
    width: clamp(320px, 92vw, 1100px);
    margin: 0 auto;
}
body.page-game .game-stage > * {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 767px) {
    /* Mobile header: deterministic structure - no wrapping chaos */
    body.viewport-mobile .top-header { 
        flex-wrap: nowrap !important; 
        padding: 12px 12px !important; 
        gap: 8px !important;
        overflow-x: hidden;
    }
    body.viewport-mobile .site-brand-text { display: none !important; }
    body.viewport-mobile .header-brand-nav { 
        justify-content: flex-start; 
        flex: 1; 
        min-width: 0; 
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.viewport-mobile .header-left { 
        flex: 1 1 auto; 
        justify-content: flex-start; 
        flex-wrap: nowrap !important; 
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        min-width: 0;
    }
    body.viewport-mobile .header-left .site-brand { order: 0; flex-shrink: 0; }
    body.viewport-mobile .header-left .header-nav { order: 1; flex-shrink: 0; display: flex !important; gap: 4px; }
    body.viewport-mobile .header-left .header-theme-toggle { order: 2; flex-shrink: 0; }
    body.viewport-mobile .header-left .btn-sfx-mute { order: 3; flex-shrink: 0; }
    /* Force mute + theme to same 32px size on mobile (override any 40px rules) */
    body.viewport-mobile .top-header #sfx-mute-btn,
    body.viewport-mobile .top-header .btn-sfx-mute,
    body.viewport-mobile .top-header #theme-toggle-btn,
    body.viewport-mobile .top-header .header-theme-toggle {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    body.viewport-mobile .site-shell-content { margin-top: 156px; }
    /* Game pages: status bar below header, content below status */
    body.viewport-mobile.site-shell-game .site-shell-content { margin-top: 72px; }
    body.viewport-mobile .site-shell-content .game-wrap { padding-top: 12px !important; padding-bottom: 12px !important; }
    body.viewport-mobile.site-shell-game .site-shell-content .game-wrap { padding-top: 0 !important; }
    /* Mobile: game band accounts for mobile top actions bar height */
    body.page-game .game-band {
        top: calc(var(--header-height, 72px) + var(--mobile-actions-height, 0px) + 5px);
    }
    /* Mobile: Account/Login in footer; Activity above footer bottom-left; hide from top bar */
    body.viewport-mobile .footer-account-box { display: none !important; }
    body.viewport-mobile .game-activity-btn-wrap { bottom: 120px; left: 16px; }
    /* Mobile: position by JS below header (top = header.bottom). Don't force bottom so feed goes under header. */
    body.viewport-mobile .activity-feed.activity-feed-popup { left: 16px; right: 16px; width: auto; max-width: 360px; max-height: 200px; bottom: auto; }
    body.viewport-mobile:has(.activity-above-footer) .activity-feed.open { left: 16px; right: 16px; width: auto; max-width: 360px; bottom: 148px; max-height: 200px; }
    body.viewport-mobile .timezone-dropup { left: 16px; right: auto; bottom: 73px; width: max-content; min-width: 200px; max-width: 300px; }
    body.viewport-mobile .activity-feed ul { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    /* Mobile game pages: "How to play" stays in footer only; no fixed bar to avoid gap above game */
    body.viewport-mobile.site-shell-game .footer-status-row { display: none !important; }

    /* Mobile footer: 3 stacked rows – status, date/time, credits */
    .footer-wrapper {
        display: flex !important;
        flex-direction: column !important;
    }
    .footer-status-row {
        display: flex !important;
        justify-content: center;
        padding: 6px 12px;
    }
    .footer-main-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 8px 5px; /* ~5px margin on left/right of full-width plates */
    }
    /* Show date/time (it lives in left-col); only hide center col (duplicate status + account) */
    .footer-center-col { display: none !important; }
    .footer-left-col {
        display: flex !important;
        order: 1 !important;
        width: 100%;
        justify-content: center;
    }
    .footer-datetime-box {
        order: 1 !important;
        justify-content: center;
        width: 100%;
        max-width: 100%;
    }
    .footer-credit-box {
        order: 2 !important;
        min-width: 0 !important;
        width: 100%;
        max-width: 100%;
        justify-content: center !important;
        padding: 8px 14px !important;
        margin: 0 auto !important;
        text-align: center !important;
        border-radius: 10px !important;
    }
}

/* Notion/toast stack: sit above footer using dynamic height (no hardcoded bottom) */
.notion-container {
    bottom: calc(var(--footer-height, 120px) + 10px) !important;
}