:root{--side-width:64px}
body{padding-left:var(--side-width)}
header{width:calc(100% - var(--side-width));left:var(--side-width)}
#menu-toggle{display:none}
#side-menu.bottom{position:fixed;inset:0 auto 0 0;transform:none;width:64px;height:100dvh;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:5px;padding:15px 8px;border:0;border-right:1px solid #ffffff20;border-radius:0;background:#0b0b0bf5;backdrop-filter:blur(18px);overflow:hidden;z-index:25;transition:width .2s ease;box-shadow:8px 0 30px #0003}
#side-menu:hover,#side-menu:focus-within{width:250px}
#side-menu .side-brand{display:flex;align-items:center;gap:15px;min-height:64px;margin-bottom:15px;white-space:nowrap}
.side-brand>svg{width:40px;min-width:40px;fill:none;stroke:#edc367;stroke-width:2}
.side-brand>span{font-size:23px;color:#edc367;font-weight:700;opacity:0;transition:opacity .15s}
#side-menu button{display:flex;align-items:center;gap:15px;flex:none;min-width:0;min-height:49px;width:100%;padding:10px 11px;border-radius:6px;text-align:left;color:#ddd;font-size:14px;position:relative}
#side-menu button>span:first-child{height:24px;width:24px;min-width:24px;margin:0;display:flex;align-items:center;justify-content:center}
#side-menu button .nav-label{display:block;height:auto;width:165px;min-width:165px;margin:0;font-size:14px;line-height:1.35;opacity:0;transition:opacity .15s;white-space:normal}
#side-menu button.active{color:#edc367;background:#edc36712}
#side-menu button.active:before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;background:#edc367;border-radius:3px}
#side-menu button:hover{background:#ffffff09}
#side-menu:hover .nav-label,#side-menu:focus-within .nav-label,#side-menu:hover .side-brand>span,#side-menu:focus-within .side-brand>span{opacity:1}
#side-menu .nav-group-label{border-top:1px solid #ffffff20;padding-top:19px;margin-top:14px;height:42px;min-height:42px;font-size:10px;letter-spacing:1px;color:#aaa;white-space:nowrap;text-indent:-999px}
#side-menu:hover .nav-group-label,#side-menu:focus-within .nav-group-label{text-indent:10px}
#side-menu .side-account{margin-top:auto}
#side-menu #menu-close{display:none}
#menu-backdrop{position:fixed;inset:0;z-index:24;background:#0009;border:0}
#menu-backdrop[hidden]{display:none}
.warfield-page #side-menu{--gold:#edc367}
@media(max-width:760px){
 body{padding-left:0}header{left:0;width:100%;padding:15px 16px;gap:12px}
 #menu-toggle{display:inline-flex;align-items:center;justify-content:center;padding:8px;width:36px;min-width:36px;color:#edc367}
 header .brand{margin-right:auto}header .brand span{font-size:23px}header .brand small{font-size:7px}header .head-actions{gap:7px}header #share-app{display:none}
 #side-menu.bottom,#side-menu:hover,#side-menu:focus-within{width:min(280px,85vw);transform:translateX(-100%);visibility:hidden;transition:transform .2s ease,visibility .2s}
 .menu-open{overflow:hidden}
 .menu-open #side-menu.bottom{transform:translateX(0);visibility:visible}
 #side-menu .nav-label,#side-menu .side-brand>span{opacity:1!important}#side-menu .nav-group-label{text-indent:10px}
 #side-menu #menu-close{display:flex;width:32px;min-height:32px;padding:5px;margin-left:auto}
 .side-brand{padding-right:4px}
 #watch.mini{bottom:20px}
}
@media(prefers-reduced-motion:reduce){#side-menu.bottom,#side-menu *{transition:none!important}}