header{align-items:center;background:transparent;border-bottom:1px solid hsla(0,0%,100%,.1);box-sizing:border-box;display:flex;font-family:Rubik,sans-serif;height:5rem;left:0;padding:0 var(--padding-horizontal);position:absolute;top:0;transition:.15s ease;width:100%;z-index:8}@media (max-width:600px),screen and (max-width:900px) and (max-aspect-ratio:8/5){header{align-items:center;height:auto;min-height:5rem;padding-bottom:.625rem;padding-top:.625rem}}header .logo{height:3.125rem;margin-right:auto}@media (max-width:600px),screen and (max-width:900px) and (max-aspect-ratio:8/5){header .logo{display:none}}header .logo img{height:100%;-o-object-fit:contain;object-fit:contain;width:100%}header .user{align-items:center;display:flex;gap:1.25rem}@media (max-width:600px),screen and (max-width:900px) and (max-aspect-ratio:8/5){header .user{align-items:center;-moz-column-gap:.75rem;column-gap:.75rem;display:grid;flex:1 1 auto;gap:0;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto auto;padding-right:0;row-gap:.25rem;width:100%}header .user .currency{grid-column:1/3;grid-row:2}header .user .user-rubies{grid-column:1;grid-row:1;margin-right:1rem}header .user .energy-wrapper{grid-column:2;grid-row:1}header .user .name{border-left:none;grid-row:1;padding-left:0;white-space:nowrap}header .user .logout-button,header .user .name{align-self:start;grid-column:4;justify-self:end}header .user .logout-button{grid-row:2;min-width:unset;width:auto}header .user .currency,header .user .energy,header .user .energy-wrapper,header .user .user-rubies{white-space:nowrap}}header .currency{align-items:center;color:#fff;display:inline-flex;font-size:1rem;font-weight:500}header .currency:before{background-image:url(/images/blockopolis/currency.svg);background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";height:1rem;margin-right:.35rem;width:1rem}header .user-rubies{align-items:center;color:#f66;display:inline-flex;font-size:1rem;font-weight:500}header .user-rubies:before{background-image:url(/images/id/ruby.svg);background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";height:1rem;margin-right:.35rem;width:1rem}header .energy-wrapper{align-items:center;display:flex;gap:.25rem}header .energy{align-items:center;color:#ffbc09;display:flex;font-size:1rem;font-weight:500;padding-right:.75rem}header .energy:before{background-image:url(/images/sea-battle/energy.svg);background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";height:1rem;margin-right:.35rem;width:1rem}header .name{border-left:1px solid rgba(191,212,255,.3);color:#fff;font-size:1rem;font-weight:500!important;letter-spacing:0;line-height:1rem;padding-left:1.25rem}header .logout-button{align-items:center;border:none;display:flex;font-family:Rubik,sans-serif;font-size:.875rem;height:2.5rem;justify-content:center;line-height:1rem;min-width:6.25rem;outline:none;padding:.9375rem 1.25rem}header .login-popup-button,header .logout-button{background:var(--green);border-radius:.5rem;color:var(--dark-blue);cursor:pointer;font-weight:500;text-transform:uppercase}header .login-popup-button{margin-left:auto;padding:1rem 1.25rem}header:after{background:linear-gradient(180deg,rgba(9,24,37,.2),rgba(9,24,37,0));bottom:0;content:"";height:2.25rem;left:0;opacity:0;pointer-events:none;position:absolute;transform:translateY(100%);transition:.15s ease;width:100%}header.active{background:rgba(9,24,37,.9);position:fixed}header.active:after{opacity:1}