.topbar{position:sticky;top:0;z-index:40;min-height:84px;padding:17px 3%;gap:22px}
.topbar .brand img{width:190px;height:auto}
.main-nav{display:flex;align-items:center;gap:2px;margin-inline:auto}
.main-nav>a,.nav-about>summary{display:flex;align-items:center;gap:7px;padding:11px 12px;font:700 13px Arial,sans-serif;text-transform:uppercase;text-decoration:none;border:1px solid transparent;border-radius:5px;white-space:nowrap}
.main-nav>a:hover,.nav-about>summary:hover,.main-nav>[aria-current]{background:#292a2c;border-color:#505153;color:white}
.main-nav>[aria-current]{text-decoration:underline 2px #ed3e32;text-underline-offset:9px}
.header-actions{gap:12px}
.header-gameplay{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:5px;background:#c92e25;color:white;font:700 13px Arial,sans-serif;white-space:nowrap}
.header-gameplay .icon{width:18px;height:18px}
.header-gameplay:hover{background:#aa251e}
.header-sign-in{background:none;font-size:13px;font-weight:700;white-space:nowrap}
.nav-about,.nav-account{position:relative}
.nav-about>summary,.nav-account>summary{list-style:none;cursor:pointer}
.nav-about>summary::-webkit-details-marker,.nav-account>summary::-webkit-details-marker{display:none}
.nav-account>summary{display:flex;align-items:center;gap:7px;min-height:44px;font-size:13px;font-weight:700}
.nav-avatar{position:relative;display:grid;place-items:center;overflow:hidden;flex:none;width:34px;height:34px;border-radius:50%;background:#343638;color:white}
.nav-avatar img{position:absolute;width:100%;height:100%;object-fit:cover}
.nav-user-name{max-width:85px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-submenu{position:absolute;top:calc(100% + 8px);right:0;width:230px;padding:8px;border:1px solid #505153;border-radius:6px;background:#191a1c;box-shadow:0 16px 32px #0006}
.nav-submenu>a,.nav-submenu>button,.site-menu>a,.site-menu>button,.nav-mobile-account>a,.nav-mobile-account>button{display:block;width:100%;padding:12px 14px;border:0;border-radius:4px;background:none;color:#eee;text-decoration:none;text-align:left;font:400 14px Arial,sans-serif;cursor:pointer}
.nav-submenu>a:hover,.nav-submenu>button:hover,.site-menu a:hover,.site-menu button:hover{background:#303234}
.site-menu{position:absolute;top:100%;left:0;right:0;padding:16px 24px;background:#171819;border-bottom:1px solid #555;max-height:calc(100dvh - 150px);overflow:auto}
.site-menu>a,.site-menu .nav-about>summary{font:700 15px Arial,sans-serif;text-transform:uppercase;line-height:1.5;padding:12px 14px}
.site-menu .nav-about>summary{justify-content:space-between}
.site-menu .nav-submenu{position:static;width:auto;margin-left:14px;border:0;box-shadow:none;background:#222426}
.nav-mobile-account{border-top:1px solid #404244;margin-top:8px;padding-top:8px}
.member-bottom-nav{display:none;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;z-index:40;bottom:0;inset-inline:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:#151617;border-top:1px solid #454749}
.member-bottom-nav>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:50px;border:0;border-radius:5px;background:none;color:#b9bdc0;font-size:11px}
.member-bottom-nav [aria-current],.member-bottom-nav [aria-expanded=true]{color:white;background:#303234;box-shadow:inset 0 -2px #ed3e32}
.topbar .mobile-menu{border:1px solid #595b56;border-radius:5px;width:42px;height:44px;font-size:20px}
/* The school entrance is a focused landing page until account setup is complete. */
body.signed-out>.topbar,body.signed-out>.member-bottom-nav{display:none}
@media(max-width:1150px){.topbar{gap:14px}.topbar .brand img{width:160px}.main-nav>a,.nav-about>summary{font-size:12px;padding-inline:8px}.nav-user-name{display:none}}
@media(max-width:1000px){
  .topbar{min-height:72px;padding:12px 20px}.main-nav,.nav-account{display:none}.topbar .mobile-menu{display:flex}.header-actions{margin-left:auto}
  .member-bottom-nav{display:grid}
  body:not(.signed-out){padding-bottom:calc(68px + env(safe-area-inset-bottom))}
}
@media(max-width:560px){.topbar{padding-inline:12px;gap:8px}.topbar .brand img{width:135px}.header-actions{gap:8px}.header-gameplay{padding:10px;font-size:12px}.header-gameplay .icon{display:none}.header-sign-in{display:none}.topbar .button.small{font-size:12px;min-height:44px;padding:10px 12px}}