/* Shared header design tokens. Scoped to the header so other pages are unaffected. */
#topbar{
  --op-header-ink:#D9E8FC;
  --op-header-border:#394550;
  --op-header-hover:#4DCAF3;
  --op-header-danger:#F701DF;
}
/* ONE shared header markup and layout across all OLDPLAY pages. */
#topbar{height:80px!important;min-height:80px;display:flex!important;align-items:center!important;gap:34px!important;padding:0 3.3%!important;z-index:90!important;background:transparent!important;box-sizing:border-box}
#topbar>a:first-child{display:flex!important;align-items:center!important;flex:0 0 225px!important;width:225px!important;height:60px!important}
#topbar>a:first-child .logo{width:225px!important;max-width:100%!important;height:auto!important}
#topbar nav{display:flex!important;align-items:center!important;gap:26px!important;flex:0 0 auto!important;margin:0!important}
#topbar .account{display:flex!important;align-items:center!important;gap:30px!important;margin-left:auto!important;height:60px!important}
#topbar .account .op-editor-button{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;height:36px!important;white-space:nowrap!important;border:1px solid var(--op-header-border)!important;border-radius:30px!important;padding:0 16px!important;font:500 16px Unbounded,sans-serif!important;background:transparent!important;color:var(--op-header-ink)!important}
#topbar .account .op-editor-button:not(:disabled):hover{border-color:var(--op-header-ink)!important;color:var(--op-header-ink)!important;background:transparent!important}
#topbar .account .op-editor-button img{width:20px!important;height:18px!important;object-fit:contain}
#topbar .account .op-account-wrap{position:relative!important;display:flex!important;align-items:center!important;flex:0 0 48px!important;width:48px!important}
#topbar .account .op-avatar-button{width:46px!important;height:46px!important;border:2px solid transparent!important;border-radius:50%!important;padding:0!important;overflow:hidden!important;background:transparent!important;display:grid!important;place-items:center!important;cursor:pointer}
#topbar .account .op-avatar-button:not(:disabled):hover,#topbar .account .op-avatar-button[aria-expanded=true]{border-color:var(--op-header-ink)!important}
#topbar .account .op-avatar-button img{width:100%!important;height:100%!important;object-fit:cover!important}
#topbar .account .op-account-menu{position:absolute!important;right:0!important;top:calc(100% + 10px)!important;min-width:170px!important;background:#000!important;border:1px solid var(--op-header-border)!important;border-radius:12px!important;padding:10px 12px!important;box-shadow:-18px 18px 25px #0008!important;z-index:100!important}
#topbar .account .op-account-menu.hidden{display:none!important}
#topbar .account .op-account-menu button{display:block!important;width:100%!important;text-align:left!important;background:transparent!important;border:0!important;border-radius:0!important;color:var(--op-header-ink)!important;font:400 14px/26px Inter,sans-serif!important;padding:3px 4px!important;white-space:nowrap!important;cursor:pointer!important}
#topbar .account .op-account-menu button:not(:disabled):hover{color:var(--op-header-hover)!important}
#topbar .account .op-account-menu button.op-account-danger{color:var(--op-header-danger)!important}
#topbar .account .op-account-menu .op-account-divider{height:1px;background:#394550;margin:6px 4px;pointer-events:none}
#topbar .account .op-account-menu button.op-account-danger:not(:disabled):hover,#topbar .account .op-account-menu button.op-account-danger:not(:disabled):focus-visible{color:#FF57EF!important}

body.op-unified-editor-header #topbar{position:fixed!important;top:0!important;left:0!important;right:0!important;pointer-events:auto!important}
body.op-unified-editor-header #topbar .account a:not(.filled){text-decoration:none}
html.op-public-renderer #topbar{display:none!important}


/* Shared header positioning: transparent/non-sticky by default.
   Only long legal/help documents retain the opaque sticky header. */
body:not(.op-legal-page):not(.op-support-page):not(.op-about-page):not(.op-unified-editor-header) #topbar{position:relative!important;top:auto!important;background:transparent!important}
body.op-legal-page #topbar,body.op-support-page #topbar,body.op-about-page #topbar{position:sticky!important;top:0!important;background:#000!important}
body.op-unified-editor-header #topbar{background:transparent!important}

/* Guest outline actions: keep text at the standard ink color; brighten only the border. */
#topbar .account a:not(.filled):hover,#topbar .account a:not(.filled):focus-visible{color:var(--op-header-ink)!important;border-color:var(--op-header-ink)!important;background:transparent!important}


/* Mobile navigation: same breakpoint and layout on all shared-header pages. */
#opMobileToggle,#opMobileMenu{display:none}
@media(max-width:768px){
  #topbar{height:56px!important;min-height:56px!important;padding:0 16px!important;gap:0!important;justify-content:space-between!important;z-index:1000!important}
  #topbar>a:first-child{flex:0 0 auto!important;width:auto!important;height:auto!important;position:relative!important;z-index:1002!important}
  #topbar>a:first-child .logo{width:auto!important;height:24px!important;max-width:none!important;display:block!important}
  #topbar nav,#topbar .account{display:none!important}
  #opMobileToggle{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:40px;height:40px;padding:0;border:0;background:transparent;color:#D9E8FC;position:relative;z-index:1002;cursor:pointer}
  #opMobileToggle span{display:block;width:40px;height:2px;flex:none;background:currentColor;transform-origin:center;transition:transform .2s ease}
  #opMobileToggle.is-open span:first-child{transform:translateY(6px) rotate(45deg)}
  #opMobileToggle.is-open span:last-child{transform:translateY(-6px) rotate(-45deg)}
  #opMobileMenu{display:none;position:fixed;inset:0;background:#000;z-index:1001;overflow-y:auto;box-sizing:border-box;padding:64px 16px 36px}
  body.op-mobile-menu-open #opMobileMenu{display:block}
  body.op-mobile-menu-open{overflow:hidden}
  #opMobileMenu .op-mobile-menu-links{display:flex;flex-direction:column;align-items:stretch;gap:24px}
  #opMobileMenu .op-mobile-primary,#opMobileMenu .op-mobile-account,#opMobileMenu .op-mobile-secondary{display:flex;flex-direction:column;align-items:flex-start}
  #opMobileMenu a,#opMobileMenu button{box-sizing:border-box;text-decoration:none;cursor:pointer}
  #opMobileMenu .op-mobile-primary a{display:block;color:#D9E8FC;font:500 20px/40px Unbounded,sans-serif}
  #opMobileMenu .op-mobile-primary a:hover{color:#57D2FF}
  #opMobileMenu .op-mobile-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  #opMobileMenu .op-mobile-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:54px;border-radius:32px;padding:0 20px;font:500 20px/1.2 Unbounded,sans-serif;white-space:nowrap}
  #opMobileMenu .op-mobile-filled{background:#D9E8FC;color:#000;border:1px solid #D9E8FC}
  #opMobileMenu .op-mobile-filled:hover{background:#57D2FF;border-color:#57D2FF}
  #opMobileMenu .op-mobile-outline{background:transparent;color:#D9E8FC;border:1px solid #394550}
  #opMobileMenu .op-mobile-outline:hover{border-color:#D9E8FC}
  #opMobileMenu .op-mobile-divider{height:1px;width:100%;background:#29323B}
  #opMobileMenu .op-mobile-account a,#opMobileMenu .op-mobile-account button{display:block;padding:0;border:0;background:transparent;text-align:left;color:#D9E8FC;font:200 20px/40px Unbounded,sans-serif}
  #opMobileMenu .op-mobile-account a:hover,#opMobileMenu .op-mobile-account button:hover{color:#57D2FF}
  #opMobileMenu .op-mobile-account button.op-mobile-logout{color:#F701DF}
  #opMobileMenu .op-mobile-account button.op-mobile-logout:hover{color:#FF57EF}
  #opMobileMenu .op-mobile-account-grid{display:flex;align-items:flex-start;justify-content:space-between;width:100%;gap:12px}
  #opMobileMenu .op-mobile-account-links{display:flex;flex-direction:column;align-items:flex-start}
  #opMobileMenu .op-mobile-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none}
  #opMobileMenu .op-mobile-secondary a{display:block;color:#575F68;font:200 20px/40px Unbounded,sans-serif}
  #opMobileMenu .op-mobile-secondary a:hover{color:#D9E8FC}
  body.op-unified-editor-header #topbar{background:transparent!important}
}