.site-menu-toggle { position: fixed; z-index: 55; top: calc(10px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; border: 1px solid var(--yap-border, #494268); border-radius: 10px; background: var(--yap-surface, #24263e); padding: 10px; cursor: pointer; }
.site-menu-toggle span { height: 2px; width: 100%; background: var(--yap-muted, #dce0f1); border-radius: 2px; }
.site-navigation-ready .back-button, .site-navigation-ready .profile-back { left: calc(62px + env(safe-area-inset-left)); }
.site-navigation-ready .sound-control { left: calc(62px + env(safe-area-inset-left)); }
.site-navigation-ready:has(.back-button, .profile-back) .sound-control { left: calc(162px + env(safe-area-inset-left)); }
.site-menu { inset: 0 auto 0 0; margin: 0; width: min(380px,100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw; padding: 20px; border: 0; border-right: 1px solid var(--yap-border, #494268); box-sizing: border-box; background: var(--yap-bg, #1e2035); color: #fff; overflow-y: auto; }
.site-menu[open] { animation: site-menu-in .2s ease-out; }
.site-menu::backdrop { background: #080a15aa; }
.site-menu:focus { outline: none; }
.site-menu header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.site-menu-brand { font-size: 1.25rem; font-weight: 900; color: var(--yap-primary, #34d399); text-decoration: none; letter-spacing: .2em; }
.site-menu-brand.logo { display:inline-flex; font-size:2.4rem; line-height:1; letter-spacing:-2px; margin:0; }
.site-menu-close { border: 0; background: var(--yap-raised, #2e314b); color: #fff; border-radius: 8px; width: 40px; height: 40px; font-size: 1.6rem; cursor: pointer; }
.site-menu-section { border-bottom: 1px solid var(--yap-border, #393d58); padding: 12px 0; }
.site-menu-section summary { cursor: pointer; font-weight: 900; padding: 8px 0; }
.site-play-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 10px 0; }
.site-play-options button, .site-mode-list button { border: 1px solid var(--yap-border, #494268); background: var(--yap-raised, #292c45); color: white; border-radius: 10px; font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer; padding: 10px; min-height: 44px; }
.site-play-options button[aria-pressed=true] { border-color: var(--yap-primary, #34d399); background: var(--yap-primary-soft, #29413e); }
.site-mode-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.site-mode-list button { display: flex; align-items: center; gap: 8px; text-align: left; border-left: 3px solid var(--menu-mode-colour); }
.site-mode-list img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
#menuModes h3 { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; margin: 16px 0 8px; color: var(--yap-muted, #a9b0ce); }
.site-menu label, .site-icon-label { display: block; font-size: .7rem; letter-spacing: .1em; font-weight: 800; color: var(--yap-muted, #b6bdd6); margin: 12px 0 6px; }
.site-menu input { width: 100%; min-height: 44px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--yap-border, #494268); border-radius: 10px; background: var(--yap-raised, #292c45); color: white; font: inherit; font-size: 1rem; }
.site-icon-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(40px,1fr)); gap: 5px; max-height: 140px; overflow-y: auto; padding: 2px; }
.site-icon-grid button { height: 42px; display: grid; place-items: center; border: 2px solid transparent; border-radius: 8px; background: var(--yap-raised, #30344f); cursor: pointer; }
.site-icon-grid img { width: 26px; height: 26px; object-fit: contain; }
.site-icon-grid button[aria-pressed=true] { border-color: var(--yap-primary, #34d399); }
.site-menu-error { color: #ff94a2; font-size: .8rem; margin: 8px 0; }
.site-menu-error:empty { display: none; }
.site-menu-join { background: var(--yap-primary, #34d399); color: var(--yap-bg, #17182b); padding: 12px; width: 100%; min-height: 44px; border: 0; border-radius: 10px; font: inherit; font-weight: 900; cursor: pointer; margin: 12px 0; }
.site-menu-join:disabled { opacity: .5; }
.site-menu-section > a, .site-menu-section > button, .site-menu-link { display: block; padding: 12px; color: var(--yap-muted, #dce0f1); font: inherit; font-size: .9rem; text-decoration: none; background: none; border: 0; cursor: pointer; }
.site-menu button:hover, .site-menu a:hover { filter: brightness(1.15); }
.site-menu :focus-visible { outline: 2px solid var(--yap-primary, #34d399); outline-offset: 2px; }
@keyframes site-menu-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media(prefers-reduced-motion:reduce) { .site-menu[open] { animation: none; } }

/* Drawer hierarchy and compact controls. */
.site-menu { width: min(360px,100vw); padding: 16px; background: var(--yap-bg, #191b2d); scrollbar-width: thin; scrollbar-color: var(--yap-border, #494268) transparent; }
.site-menu header { padding-bottom: 16px; margin-bottom: 10px; border-bottom: 1px solid var(--yap-border, #34364e); }
.site-menu-section { padding: 0; margin-bottom: 10px; background: var(--yap-surface, #23263b); border: 1px solid var(--yap-border, #373a54); border-radius: 12px; overflow: hidden; }
.site-menu-section > summary { list-style: none; padding: 14px; font-size: .95rem; display: flex; align-items: center; justify-content: space-between; }
.site-menu-section > summary::-webkit-details-marker { display: none; }
.site-menu-section > summary::after { content: '+'; color: var(--yap-muted, #aeb6d1); font-size: 1.2rem; }
.site-menu-section[open] > summary::after { content: '-'; color: var(--yap-primary, #34d399); }
.site-menu-section[open] > summary { border-bottom: 1px solid var(--yap-border, #373a54); }
.site-play-options { margin: 12px; gap: 4px; padding: 4px; border-radius: 10px; background: var(--yap-bg, #171a2b); }
.site-play-options button { min-height: 38px; padding: 8px 4px; font-size: .78rem; border-color: transparent; background: transparent; border-radius: 7px; }
.site-play-options button[aria-pressed=true] { border-color: var(--yap-primary, #34d399); background: var(--yap-primary-soft, #28423d); }
#menuModes { padding: 0 12px 12px; }
.site-mode-list { grid-template-columns: 1fr; gap: 4px; }
.site-mode-list button { min-height: 40px; padding: 8px 10px; gap: 12px; font-size: .82rem; background: var(--yap-raised, #2a2d44); border: 1px solid transparent; border-left: 3px solid var(--menu-mode-colour); border-radius: 7px; }
.site-mode-list button:hover { border-color: var(--menu-mode-colour); }
.site-mode-list img { width: 22px; height: 22px; }
.site-featured-list { padding-bottom: 10px; margin-bottom: 2px; border-bottom: 1px solid var(--yap-border, #393c55); }
#menuModes h3 { margin: 12px 0 7px; font-size: .65rem; letter-spacing: .14em; }
#menuHostIdentity { margin: 0 12px 12px; padding: 10px; border: 1px solid var(--yap-border, #393c55); border-radius: 10px; background: var(--yap-bg, #1c1f32); }
#menuHostIdentity label { margin-top: 0; }
#menuJoinForm { padding: 0 12px 2px; }
.site-menu input { font-size: .9rem; background: var(--yap-bg, #1c1f32); }
.site-icon-picker { margin-top: 10px; border: 1px solid var(--yap-border, #3a3e59); border-radius: 9px; }
.site-icon-picker > summary { padding: 10px; font-size: .75rem; color: var(--yap-muted, #bfc7df); }
.site-icon-grid { margin: 0 8px 8px; }
#menuHostError { margin: 8px 12px; }
.site-menu-section > a, .site-menu-section > button { width: 100%; box-sizing: border-box; padding: 11px 16px; font-size: .82rem; text-align: left; }
.site-menu-section > a:hover, .site-menu-section > button:hover { background: var(--yap-raised, #2c3047); }
.site-menu-link { padding: 14px; border: 1px solid var(--yap-border, #373a54); border-radius: 12px; background: var(--yap-surface, #23263b); font-size: .9rem; font-weight: 800; }
.site-profile-card, .site-guest-account { display:block; padding:16px; margin-bottom:12px; border:1px solid var(--yap-border, #494568); border-radius:14px; background:linear-gradient(135deg,var(--yap-raised, #2d2f49),var(--yap-surface, #24263c)); color:#fff; text-decoration:none; }
.site-profile-identity { display:flex; align-items:center; gap:12px; }
.site-profile-avatar { display:grid; place-items:center; flex:none; width:54px; height:54px; border-radius:14px; background:var(--yap-bg, #17192d); }
.site-profile-avatar .player-avatar-image { width:40px; height:40px; object-fit:contain; }
.site-profile-name { display:grid; gap:5px; min-width:0; }
#menuAccountName { font-size:1.1rem; overflow-wrap:anywhere; }
#menuAccountTitle { text-align:left; font-size:.75rem; line-height:1.35; overflow-wrap:anywhere; }
#menuAccountTitle .title-word { display:inline; white-space:normal; }
#menuAccountJoined { color:var(--yap-muted, #aeb6d1); font-size:.65rem; line-height:1.4; }
.site-profile-level { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:16px 0 8px; font-size:.65rem; font-weight:900; letter-spacing:.03em; }
#menuAccountXp { color:var(--yap-muted, #ccd3e8); }
.site-profile-progress { height:6px; overflow:hidden; border-radius:99px; background:var(--yap-bg, #17192d); border:1px solid var(--yap-border, #4d506b); }
.site-profile-progress span { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--yap-primary, #55dbb1),#ffdb79); }
.site-account-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:14px; }
.site-account-actions button { border:1px solid var(--yap-border, #655298); border-radius:9px; padding:10px; background:var(--yap-secondary, #7657ff); color:#fff; font:inherit; font-size:.8rem; font-weight:900; cursor:pointer; }
.site-account-actions button:first-child { background:var(--yap-raised, #34324f); }
.site-profile-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 16px; }
.site-profile-actions a, .site-profile-actions button { display:flex; align-items:center; justify-content:center; min-height:40px; padding:10px 8px; border:1px solid var(--yap-border, #655298); border-radius:9px; background:var(--yap-secondary-soft, #393054); color:#e6deff; font:inherit; font-size:.75rem; font-weight:800; text-decoration:none; cursor:pointer; }
.site-profile-actions #menuSignOut { border-color:#824957; background:#392a38; color:#ffb4c1; }
.site-profile-actions button:disabled { opacity:.6; cursor:default; }
.site-menu[open] { display:flex; flex-direction:column; }
.site-menu > * { flex-shrink:0; }
.site-menu-credit { margin-top:auto; padding:24px 0 4px; text-align:center; color:var(--yap-muted, #919ab8); font-size:.7rem; }
.site-menu-credit strong { color:#ffd84d; font-weight:800; }

.site-guest-account .site-account-actions { margin-top:0; }

.site-menu > .site-menu-link{margin-bottom:10px;}
.site-menu > .site-menu-link:hover{background:var(--yap-raised, #2c3047);border-color:var(--yap-border, #666084);}

.site-menu-section > .site-menu-browse-lobbies{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:calc(100% - 24px);min-height:46px;margin:0 12px 12px;padding:12px;border:1px solid var(--yap-secondary, #8c72f8);border-radius:10px;background:var(--yap-secondary, #7051ed);color:#fff;font:inherit;font-weight:900;text-align:center;text-decoration:none;cursor:pointer;}
.site-menu-section > .site-menu-browse-lobbies:hover{background:var(--yap-secondary, #8264fa);border-color:var(--yap-secondary, #b39aff);}
.site-menu-section > .site-menu-browse-lobbies:focus-visible{outline:2px solid #c2b2ff;outline-offset:3px;}

#menuCustomPacks.requires-sign-in{opacity:.5;color:var(--yap-muted,#bac1da)}#menuCustomPacks.requires-sign-in:hover{opacity:.8}
.home-packs-prompt{width:min(420px,calc(100% - 32px));margin:auto;padding:28px;border:1px solid var(--yap-border,#494268);border-radius:18px;background:var(--yap-surface,#24263e);color:var(--yap-text,#fff);text-align:center}.home-packs-prompt::backdrop{background:#0009}.home-packs-prompt h2{font-size:24px;margin-bottom:12px}.home-packs-prompt p{font-size:15px;line-height:1.5;color:var(--yap-muted,#bac1da)}.home-packs-prompt>div{display:flex;gap:12px;margin-top:22px}.home-packs-prompt button{flex:1;padding:12px 16px;border:0;border-radius:10px;background:var(--yap-secondary,#7657ff);color:#fff;font:700 14px Arial;cursor:pointer}.home-packs-prompt button[data-action="signup"]{background:var(--yap-primary,#34d399);color:var(--yap-bg,#17182b)}.home-packs-prompt .packs-prompt-close{margin-top:14px;background:transparent;color:var(--yap-muted,#bac1da)}