/* Grouped main navigation; panels are independent of the old scrolling strip. */
.site-header:has(.grouped-navigation){position:relative;z-index:40;overflow:visible}.site-header .grouped-navigation{display:block;order:3;width:100%;padding:8px 0 0}.site-header .grouped-navigation nav{display:flex;align-items:center;gap:8px;overflow:visible;width:100%;padding:0;white-space:normal}.nav-group{position:relative}.nav-group>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:12px 16px;border:1px solid transparent;border-radius:10px;color:#c8bcd5;font-size:14px;cursor:pointer;user-select:none}.nav-group>summary::-webkit-details-marker{display:none}.nav-group>summary:hover,.nav-group[open]>summary{background:#32203e;border-color:#7a5298;color:#fff}.nav-group.current-group>summary{color:#e9ceff;background:#9d66cc15}.group-chevron{color:#ba91d6;margin-left:auto}.nav-group[open] .group-chevron{transform:rotate(180deg)}.group-badges{display:flex;gap:4px}.nav-panel{position:absolute;top:calc(100% + 9px);left:0;z-index:60;width:260px;padding:16px;background:linear-gradient(140deg,#2b1e36,#16101f);border:1px solid #76518c;border-radius:15px;box-shadow:0 20px 60px #0009}.nav-panel>small{display:block;font-size:10px;letter-spacing:.14em;color:#bfa2cd;margin:2px 10px 12px}.site-header .grouped-navigation nav .nav-panel a,.site-header .grouped-navigation nav .nav-panel>button{display:flex;align-items:center;gap:10px;min-height:44px;width:100%;padding:11px 12px;border:0;border-radius:8px;background:transparent;color:#e7ddeb;text-decoration:none;font:14px 'Segoe UI',sans-serif;white-space:normal;text-align:left;cursor:pointer}.site-header .grouped-navigation nav .nav-panel a:hover,.site-header .grouped-navigation nav .nav-panel>button:hover{background:#ae75e21a;color:#fff}.site-header .grouped-navigation nav a::after,.site-header .grouped-navigation nav a::before{display:none}.site-header .grouped-navigation nav .nav-panel a.active{background:#9f6ed926;color:#efdaff}.games-panel{width:590px}.game-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.site-header .grouped-navigation nav .game-menu-grid a{padding:14px;align-items:flex-start;gap:13px;min-height:88px;border:1px solid #b07bdd20;background:#0d091421}.game-menu-grid i{font-style:normal;font-size:28px;line-height:1.2;color:#dab47c;width:33px;flex-shrink:0;text-align:center}.game-menu-grid strong{display:block;font-size:14px;color:#f0dffb;margin-bottom:5px}.game-menu-grid small{font-size:12px;line-height:1.5;color:#bcaac9;display:block}.navigation-backdrop,.mobile-nav-heading{display:none}.site-header .grouped-navigation .mobile-menu-toggle{display:none}.nav-group summary:focus-visible,.nav-panel a:focus-visible,.nav-panel button:focus-visible{outline:0;box-shadow:inset 0 0 0 2px #c794f0}.site-header .grouped-navigation nav [hidden]{display:none!important}
@media(max-width:800px){.site-header .grouped-navigation{padding:10px 0}.site-header .grouped-navigation .mobile-menu-toggle{display:flex;width:100%;padding:12px 15px;border:1px solid #63437a;border-radius:10px;background:#251a30;color:#f0e6f6;gap:10px;align-items:center;font:600 14px 'Segoe UI',sans-serif}.site-header .grouped-navigation nav,.site-header .grouped-navigation:defined:not([data-open]) nav{display:none}.site-header .grouped-navigation[data-open] nav{display:flex;flex-direction:column;align-items:stretch;position:fixed;inset:0 0 0 auto;width:min(380px,92vw);height:100dvh;overflow-y:auto;overscroll-behavior:contain;background:#17101ffb;padding:20px;gap:10px;z-index:101;box-shadow:-20px 0 80px #0008}.grouped-navigation[data-open] .navigation-backdrop{display:block;position:fixed;inset:0;background:#090610b3;border:0;z-index:100;width:100%;height:100dvh}.mobile-nav-heading{display:flex;justify-content:space-between;align-items:center;color:#f1e1ff;font-size:22px;margin-bottom:14px}.navigation-close{border:1px solid #856398;border-radius:9px;background:#38253f;color:#e9daef;font-size:25px;width:40px;height:40px}.nav-group>summary{padding:15px 12px;background:#241a2e;border-color:#4c365e}.nav-panel,.games-panel{position:static;width:100%;box-shadow:none;padding:12px 0 0;border:0;border-radius:0;background:transparent}.game-menu-grid{grid-template-columns:1fr}.site-header .grouped-navigation nav .nav-panel a{min-height:46px}.nav-panel>small{margin-top:10px}}

.nav-group:last-child .nav-panel{left:auto;right:0}@media(max-width:800px){.nav-group:last-child .nav-panel{left:auto;right:auto}}

.nav-group>summary .group-chevron{display:block;width:16px;height:16px;flex:0 0 16px;margin-left:4px;color:#c4a3df;transition:transform .18s ease;transform-origin:center}.nav-group[open]>summary .group-chevron{transform:rotate(180deg)}.group-badges:empty{display:none}@media(prefers-reduced-motion:reduce){.nav-group>summary .group-chevron{transition:none}}

.game-menu-grid .game-menu-icon{display:block;width:48px;height:48px;flex:0 0 48px;object-fit:contain;filter:drop-shadow(0 3px 6px #0005)}.site-header .grouped-navigation nav .game-menu-grid a{align-items:center}.game-menu-grid a:hover .game-menu-icon{filter:drop-shadow(0 0 8px #bf86df55)}

/* A full-width mobile menu cannot extend beyond the portrait viewport. */
@media(max-width:800px){.site-header .grouped-navigation[data-open] nav{inset:0;left:0;right:0;width:100%;max-width:100vw;min-width:0;height:100dvh;margin:0;box-sizing:border-box;overflow-x:hidden;padding:20px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left))}.mobile-nav-heading,.nav-group,.nav-panel,.game-menu-grid{min-width:0;max-width:100%}.mobile-nav-heading{flex-shrink:0}.navigation-close{flex:0 0 40px}.nav-group>summary{white-space:normal}.game-menu-grid a>span{min-width:0;overflow-wrap:anywhere}}

/* Main-site navigation follows the home page's ink, violet and gold palette. */
.site-header{--accent:#b7a2ff;--muted:#afb2ca;background:#141624;border-bottom:1px solid #353950;border-radius:0;padding:18px 24px 0;column-gap:24px;box-shadow:0 8px 26px #080a121a}
.site-header .wordmark{font-family:'Segoe UI',sans-serif;font-weight:900;letter-spacing:-.7px;color:#f4f1ff;font-size:22px}
.site-header .wordmark>span{color:#b7a2ff}
.site-header .brand-card{background:transparent;filter:drop-shadow(0 3px 5px #0005)}
.site-header .account-profile-link{background:#202238;border:1px solid #393d57;border-radius:6px;padding:8px 12px;color:#f4f1ff}
.site-header .account-profile-link:hover{background:#2a2943;border-color:#8b79bb}
.site-header .account-profile-arrow{color:#b7a2ff}
.site-header .grouped-navigation{padding-top:12px}
.site-header .grouped-navigation nav{gap:6px;height:auto;min-height:54px}
.site-header .nav-group>summary{padding:12px 17px;border-radius:5px;font-weight:600;color:#bbc0d7;transition:background .15s,border-color .15s}
.site-header .nav-group>summary:hover,.site-header .nav-group[open]>summary{background:#29263f;border-color:#746194;color:#f4f1ff}
.site-header .nav-group.current-group>summary{background:#b7a2ff12;color:#d8caff;border-bottom-color:#b7a2ff}
.site-header .nav-panel{background:#1b1e32;border:1px solid #46405c;border-top:2px solid #b7a2ff;border-radius:6px;box-shadow:0 18px 45px #0008;padding:16px}
.site-header .nav-panel>small{color:#aaa7c5;letter-spacing:.1em;margin-bottom:14px}
.site-header .grouped-navigation nav .nav-panel a{border-radius:5px;color:#edeafa}
.site-header .grouped-navigation nav .nav-panel a:hover{background:#b7a2ff16;color:white}
.site-header .grouped-navigation nav .nav-panel a.active{background:#b7a2ff20;color:#dacfff;box-shadow:inset 3px 0 #b7a2ff}
.site-header .game-menu-grid{gap:10px}
.site-header .grouped-navigation nav .game-menu-grid a{padding:14px;background:linear-gradient(120deg,#23263d,#1a1d30);border:1px solid #353950;min-height:94px}
.site-header .grouped-navigation nav .game-menu-grid a:hover{border-color:#8b79bb;background:#292940}
.site-header .game-menu-grid strong{color:#f4f1ff}.site-header .game-menu-grid small{color:#afb2ca}
.site-header :is(a,button,summary):focus-visible{outline:2px solid #f4ce86;outline-offset:3px;box-shadow:none}
.site-header .profile-menu-popup{background:#1b1e32;border:1px solid #46405c;border-top:2px solid #b7a2ff;border-radius:6px;box-shadow:0 18px 45px #0008}
@media(min-width:801px){.site-header .games-panel{width:min(590px,calc(100vw - 120px))}}
@media(max-width:800px){
 .site-header{padding:14px 12px 0;gap:12px}.site-header .wordmark{font-size:18px}
 .site-header .grouped-navigation{padding:0 0 12px}
 .site-header .grouped-navigation .mobile-menu-toggle{border-radius:5px;background:#202238;border-color:#46405c;color:#edeafa}
 .site-header .grouped-navigation[data-open] nav{background:#141624;min-height:0}
 .site-header .nav-group>summary{background:#202238;border-color:#393d57;padding:15px 14px}
 .site-header .nav-panel{background:transparent;border:0;padding:12px 0;box-shadow:none}
 .site-header .mobile-nav-heading{color:#f4f1ff}.site-header .navigation-close{background:#29263f;border-color:#746194;border-radius:5px}
 .site-header .grouped-navigation nav .game-menu-grid a{min-height:86px}
}
@media(prefers-reduced-motion:reduce){.site-header .nav-group>summary{transition:none}}
/* Full-bleed header surface with centered navigation content. */
.site-header{width:100%;padding-inline:max(24px,calc((100% - 1232px)/2));box-sizing:border-box}
.site-footer{width:100%;padding-inline:max(24px,calc((100% - 1232px)/2));box-sizing:border-box;border-top:1px solid #353950;background:#141624}
html{background:#111321}body:has(.site-header){background:#111321}
*{scrollbar-color:#746b91 #141624}
::-webkit-scrollbar-track{background:#141624}
::-webkit-scrollbar-thumb{background:#746b91;border-color:#141624}
::-webkit-scrollbar-thumb:hover{background:#b7a2ff}
::-webkit-scrollbar-corner{background:#141624}
:is(.friends-panel,.friends-list,.friend-chat-window,.chat-log,.chat-settings,.chat-ban-form){scrollbar-color:#746b91 #141624}
:is(.friends-panel,.friends-list,.friend-chat-window,.chat-log)::-webkit-scrollbar-track{background:#141624}
:is(.friends-panel,.friends-list,.friend-chat-window,.chat-log)::-webkit-scrollbar-thumb{background:#746b91;border-color:#141624}
:is(.friends-dock,.chat-window,.friend-chat){--accent:#b7a2ff;--muted:#afb2ca;--border:#353950;color:#f4f1ff}
:is(.friends-panel,.chat-window,.friend-chat-window){border-top:2px solid #b7a2ff}
:is(.friends-panel,.chat-window,.friend-chat) .button{background:#b7a2ff;color:#181328;border:1px solid #b7a2ff;border-radius:5px;font-weight:700;box-shadow:none}
:is(.friends-panel,.chat-window,.friend-chat) .button-quiet{background:#202438;color:#d9cfff;border-color:#46405c}
:is(.friends-panel,.chat-window,.friend-chat) :is(input:not([type=checkbox]),select,textarea){background:#111321;color:#f4f1ff;border-color:#46405c;border-radius:5px;accent-color:#b7a2ff}
:is(.friends-panel,.chat-window,.friend-chat) input[type=checkbox]{accent-color:#b7a2ff}
:is(.friends-panel,.chat-window,.friend-chat) :is(button,a,input,select,textarea):focus-visible{outline:2px solid #f4ce86;outline-offset:2px}
:is(.friends-toggle,.chat-dock){background:#202438;border-color:#746b91;border-radius:6px;color:#f4f1ff}
:is(.friends-toggle,.chat-dock):hover{background:#292940;border-color:#b7a2ff}
@media(max-width:800px){.site-header{padding-inline:18px}.site-footer{padding-inline:18px}}
/* Footer matches the main header, with enough room above floating social controls. */
.site-footer{--accent:#b7a2ff;color:#afb2ca;padding-top:12px;padding-bottom:12px}
.site-footer>div{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-width:0}
.site-footer .wordmark{font-family:'Segoe UI',sans-serif;font-size:20px;font-weight:900;letter-spacing:-.7px;color:#f4f1ff;text-decoration:none}
.site-footer .wordmark>span{color:#b7a2ff}
.site-footer .footer-links{margin:0;gap:8px 24px;align-items:center}
.site-footer .footer-links .changelog-link{display:inline-flex;align-items:center;min-height:44px;color:#afb2ca;font-weight:500;text-decoration:none;font-size:13px}
.site-footer .footer-links .changelog-link:hover{color:#f4ce86;text-decoration:underline;text-underline-offset:5px}
.site-footer a:focus-visible{outline:2px solid #f4ce86;outline-offset:4px}
@media(max-width:640px){.site-footer>div{align-items:flex-start;flex-direction:column;gap:4px}.site-footer .footer-links{gap:4px 20px}.site-footer{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}}

/* Settings follow the shared ink and lavender interface palette. */
.account-menu duel-music .duel-music-button{width:42px;height:42px;border:1px solid #46405c;border-radius:8px;background:#202438;color:#c7bbec;box-shadow:none}
.account-menu duel-music .duel-music-button:hover{background:#2b2d45;border-color:#b7a2ff;color:#f4f1ff}
.game-settings-dialog{border:1px solid #46405c;border-top:2px solid #b7a2ff;border-radius:8px;background:#1b1e32;color:#f4f1ff;box-shadow:0 20px 70px #0008}
.game-settings-dialog::backdrop{background:#080b16b8}
.game-settings-heading h2{font-family:'Segoe UI',sans-serif;font-weight:800;letter-spacing:-.4px}
.game-settings-close{border-color:#46405c;border-radius:6px;background:#202438;color:#c7bbec}
.game-settings-close:hover{background:#2b2d45;color:#f4f1ff;border-color:#b7a2ff}
.game-settings-tabs{gap:8px;border:0;margin-bottom:24px}
.game-settings-tabs [role=tab]{min-height:44px;padding:10px 16px;border:1px solid #46405c;border-radius:6px;background:#2b2d45;color:#f4f1ff;box-shadow:inset 0 -2px #b7a2ff}
.game-settings-tabs [role=tab][aria-selected=false]{border-color:#353950;background:#202438;color:#afb2ca;box-shadow:none}
.game-settings-tabs [role=tab]:hover{background:#2b2d45;color:#f4f1ff}
.game-settings-dialog .duel-music-panel label{color:#f4f1ff;border-color:#353950}
.game-settings-dialog output{color:#c7bbec;font-weight:600}
.game-settings-hint{color:#afb2ca}
.game-settings-dialog .game-ui-option{border-color:#353950;color:#f4f1ff;justify-content:flex-start;flex-wrap:nowrap}
.game-settings-dialog input[type=checkbox]{accent-color:#b7a2ff}
.game-settings-dialog input[type=checkbox]:checked{background-color:#b7a2ff;border-color:#b7a2ff}
.game-settings-dialog input[type=range]{height:6px;background:linear-gradient(to right,#b7a2ff 0%,#b7a2ff var(--music-volume,50%),#353950 var(--music-volume,50%),#353950 100%);box-shadow:none}
.game-settings-dialog input[type=range]::-webkit-slider-thumb{width:18px;height:18px;background:#c7bbec;border:2px solid #f4f1ff;box-shadow:0 2px 5px #0005}
.game-settings-dialog input[type=range]::-moz-range-thumb{width:14px;height:14px;background:#c7bbec;border:2px solid #f4f1ff;box-shadow:0 2px 5px #0005}
.game-settings-dialog input[type=range]:hover::-webkit-slider-thumb{background:#f4f1ff;box-shadow:0 0 0 4px #b7a2ff25}
.game-settings-dialog :is(button,input):focus-visible,.account-menu duel-music .duel-music-button:focus-visible{outline:2px solid #f4ce86;outline-offset:3px}
.game-settings-scroll{scrollbar-color:#746b91 #141624}
@media(max-width:540px){.game-settings-scroll{padding:20px}.game-settings-heading{margin-bottom:16px}}

/* Compact, persistent primary navigation. */
.site-header{position:sticky;top:0;z-index:90;min-height:76px;flex-wrap:nowrap;gap:16px;padding-top:12px;padding-bottom:12px;background:#141624}.site-header .grouped-navigation{order:0;display:block;width:auto;min-width:0;flex:1;padding:0}.site-header .grouped-navigation nav{min-height:44px;height:auto;gap:4px;overflow:visible}.site-header .nav-group>summary{padding:12px 10px}.site-header .account-menu{gap:10px;margin-left:auto}.site-header .grouped-navigation nav>a.nav-home{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 12px;box-sizing:border-box;border:1px solid transparent;border-radius:5px;color:#bbc0d7;font-weight:600;text-decoration:none}.site-header .grouped-navigation nav>a.nav-home:hover,.site-header .grouped-navigation nav>a.nav-home.active{background:#2b2d45;border-color:#46405c;color:#f4f1ff}.site-header .grouped-navigation nav>a.nav-home:after{display:none}html{scroll-padding-top:90px}@media(min-width:801px) and (max-width:1150px){.site-header{flex-wrap:wrap;gap:8px}.site-header .grouped-navigation{flex-basis:100%;order:1}.site-header .account-menu{order:0}.site-header .grouped-navigation nav{justify-content:flex-start}}@media(max-width:800px){.site-header{min-height:68px;gap:8px;padding-top:10px;padding-bottom:10px}.site-header .grouped-navigation{flex:0 0 auto;order:0;width:auto;padding:0}.site-header .grouped-navigation .mobile-menu-toggle{width:auto;padding:10px}.site-header .account-menu{gap:6px;min-width:0}.site-header .grouped-navigation nav>a.nav-home{justify-content:flex-start;padding:14px;background:#202438}.site-header .nav-group>summary{padding:15px 14px}}
.site-header:has(.grouped-navigation){position:sticky;top:0;z-index:90}