.top-nav-bar{position:fixed;top:0;left:0;right:0;height:60px;background:var(--BACKGROUND_HEX_COLOR);border-bottom:1px solid rgba(255,255,255,.1);z-index:30000;display:flex;align-items:center;padding:0 16px;box-shadow:0 2px 8px #0003}.top-nav-container{width:100%;max-width:100%;display:flex;align-items:center;gap:16px;height:100%}.top-nav-logo{flex-shrink:0;height:100%;display:flex;align-items:center}.top-nav-logo-link{display:flex;align-items:center;height:100%;text-decoration:none}.top-nav-logo-img{height:46px;width:auto;-o-object-fit:contain;object-fit:contain}.top-nav-logo .glitch-container{display:inline-block;position:relative;height:46px;line-height:0}.top-nav-logo .glitch-container img{display:block}.top-nav-strapline{font-family:IBM Plex Mono,monospace;font-size:clamp(12px,1.6vw,20px);font-weight:700;white-space:nowrap;letter-spacing:0;flex:1;text-align:center;padding:0 16px;overflow:hidden;text-overflow:ellipsis;text-rendering:optimizeSpeed;-webkit-font-smoothing:none;-moz-osx-font-smoothing:grayscale;image-rendering:pixelated}.top-nav-strapline span{display:inline-block;margin:0;padding:0;transition:color .05s ease,transform .1s ease}.strapline-char{color:inherit;transform:translateY(0)}.top-nav-profile{flex-shrink:0;display:flex;align-items:center;margin-left:auto;position:relative;height:100%;z-index:1}.top-nav-profile:hover{z-index:10}.top-nav-profile-button{display:flex;align-items:center;gap:6px;background:silver;border:2px outset #C0C0C0;border-top-color:#fff;border-left-color:#fff;border-right-color:gray;border-bottom-color:gray;border-radius:0;padding:4px 12px;color:#000;font-family:"MS Sans Serif",Segoe UI,sans-serif;font-size:11px;font-weight:400;cursor:pointer;transition:none;box-shadow:inset 1px 1px #ffffff80;height:46px}.top-nav-login-button{display:flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(180deg,gold,orange,#ff8c00);border:3px outset #FFD700;border-top-color:#fff8dc;border-left-color:#fff8dc;border-right-color:#c80;border-bottom-color:#c80;border-radius:0;padding:6px 16px;color:#000;font-family:"MS Sans Serif",Segoe UI,sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:none;box-shadow:inset 1px 1px #fff9,0 2px 4px #0000004d,0 0 8px #ffd70066;height:46px;text-shadow:1px 1px 0 rgba(255,255,255,.3);letter-spacing:.5px;position:relative;min-width:120px}.top-nav-login-button:after{content:"🎮";margin-left:4px;font-size:14px;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.3))}.top-nav-login-button:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.05) 2px,rgba(255,255,255,.05) 4px);pointer-events:none;opacity:.3}.top-nav-profile-button:hover{background:#d4d0c8}.top-nav-login-button:hover{background:linear-gradient(180deg,#ffe44d,#ffb84d,#ff9f33);border-top-color:#fff;border-left-color:#fff;border-right-color:#c80;border-bottom-color:#c80;box-shadow:inset 1px 1px #ffffffb3,0 3px 6px #0006,0 0 12px #ffd70099,0 0 16px #ffa5004d;transform:translateY(-1px)}.top-nav-login-button:hover:after{transform:scale(1.1);filter:drop-shadow(1px 1px 0 rgba(0,0,0,.3)) drop-shadow(0 0 4px rgba(255,215,0,.6))}.top-nav-profile-button:active{border:2px inset #C0C0C0;border-top-color:gray;border-left-color:gray;border-right-color:#fff;border-bottom-color:#fff;background:silver}.top-nav-login-button:active{border:3px inset #FFD700;border-top-color:#c80;border-left-color:#c80;border-right-color:#fff8dc;border-bottom-color:#fff8dc;background:linear-gradient(180deg,#ff8c00,orange,gold);box-shadow:inset 2px 2px 4px #0000004d,0 1px 2px #0003;transform:translateY(0)}.top-nav-profile-button-avatar{width:165px!important;padding:0!important;background-color:transparent!important;position:relative;display:flex;align-items:center;justify-content:center}.top-nav-profile-button-avatar .top-nav-profile-name-overlay{color:#fff;font-family:"MS Sans Serif",Segoe UI,sans-serif;font-size:14px;font-weight:700;text-shadow:1px 1px 3px rgba(0,0,0,.9),-1px -1px 3px rgba(0,0,0,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;z-index:1;pointer-events:none;text-align:center}.top-nav-profile-button-avatar:hover{opacity:.9;background-color:transparent!important}.top-nav-profile-button-avatar:active{opacity:.8}.top-nav-notification-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;background:#e52521;color:#fff;font-family:IBM Plex Mono,monospace;font-size:11px;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--BACKGROUND_HEX_COLOR);box-shadow:0 2px 4px #0000004d;z-index:10}.top-nav-profile-icon{font-size:18px}.top-nav-profile-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-nav-profile-dropdown{position:absolute;top:100%;right:0;min-width:200px;max-width:300px;background:linear-gradient(180deg,#1a1a2e,#16213e);border:3px solid #049CD8;border-radius:0;box-shadow:4px 4px #0006;z-index:30002;overflow:hidden;display:none;pointer-events:auto;margin-top:4px}.top-nav-profile-dropdown.show{display:block!important}.top-nav-profile-dropdown-item{display:flex;align-items:center;padding:12px 16px;color:#fff;text-decoration:none;font-family:IBM Plex Mono,monospace;font-size:14px;transition:background-color .15s ease,transform .1s ease;border:none;border-bottom:1px solid rgba(255,255,255,.1);cursor:pointer;width:100%;text-align:left;background:transparent;gap:10px}.top-nav-profile-dropdown-item:last-child{border-bottom:none}.top-nav-profile-dropdown-item:hover{background:#049cd84d!important;color:#fbd000!important;transform:translate(4px)}.top-nav-profile-dropdown-item:active{background:#049cd880!important;transform:translate(2px)}.top-nav-profile-dropdown-item-icon{font-size:18px;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.3))}.top-nav-profile-dropdown-item-text{text-shadow:1px 1px 0 rgba(0,0,0,.3)}.top-nav-profile-dropdown-item-badge{margin-left:auto;width:22px;height:22px;min-width:22px;background:#e52521;color:#fff;font-family:Arial,sans-serif;font-size:12px;font-weight:700;line-height:22px;text-align:center;border-radius:50%;box-shadow:0 2px 4px #0000004d;flex-shrink:0}@media (max-width: 768px){.top-nav-bar{height:60px;padding:0 12px}.top-nav-container{gap:8px}.top-nav-logo-img,.top-nav-logo .glitch-container{height:32px}.top-nav-strapline,.top-nav-profile-name{display:none}.top-nav-profile-button,.top-nav-login-button{padding:6px 10px;font-size:13px}}@media (max-width: 1024px){.top-nav-bar{display:none!important}}@media (min-width: 1025px){.top-nav-bar{display:flex!important}}@media (min-width: 1025px){body{padding-top:110px}}