.j-header{min-height:84px;padding-block:8px}
.j-header .header-social{display:flex;align-items:center;gap:2px;flex:none}
.j-header .header-social>a,.j-header .header-social>button{display:grid;place-items:center;width:34px;height:40px;padding:8px;border:0;border-radius:7px;background:transparent;color:#fff;text-decoration:none;cursor:pointer}
.j-header .header-social>a:hover,.j-header .header-social>button:hover{background:#ffffff18}
.j-header .header-social>a:focus-visible,.j-header .header-social>button:focus-visible{outline:3px solid #ffe39d;outline-offset:3px}
.j-header .header-social svg{display:block;width:18px;height:18px}
.j-header .j-header-right{gap:12px}
.j-header .j-header-right .j-header-actions{display:flex;align-items:center;gap:12px;flex:none}
.j-header .header-tool-group{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid #ffffff2e;border-radius:11px;background:#8e20341f;box-shadow:inset 0 1px 0 #ffffff0a}
.j-header .header-tool-group>button{display:grid;place-items:center;width:34px;height:36px;padding:0;border:0;border-radius:7px;color:#ffeef0;background:transparent;box-shadow:none;cursor:pointer}
.j-header .header-tool-group>button:hover{background:#ffffff18;color:#fff}
.j-header .header-tool-group>button[aria-pressed=true]{background:#ffffff15;color:#fff}
.j-header .header-tool-group .icon{width:18px;height:18px}
.j-header .j-header-actions>.header-profile-button{display:flex;align-items:center;justify-content:center;gap:9px;flex:none;width:auto;min-width:103px;height:44px;padding:6px 13px 6px 8px;border:1px solid #fff4e6;border-radius:11px;background:linear-gradient(#fffaf1,#fff0df);color:#8b2940;box-shadow:0 3px 0 #9e203534,inset 0 1px 0 #fff;font-size:12px;font-weight:800;cursor:pointer}
.j-header .j-header-actions>.header-profile-button:hover{background:#fffaf2;color:#6d1d32;border-color:#fff}
.j-header .j-header-actions>.header-profile-button.is-active{background:#fff;border-color:#fff;box-shadow:0 0 0 3px #ffffff26,0 3px 0 #9e203534}
.j-header .header-profile-icon{display:grid;place-items:center;flex:none;width:29px;height:29px;border-radius:50%;background:#f6dfe1;color:#a33049}
.j-header .header-profile-icon .icon{width:20px;height:20px;stroke-width:1.8}
.j-header .header-profile-label{line-height:1.2;white-space:nowrap}
.j-header .header-tool-group>button:focus-visible,.j-header .header-profile-button:focus-visible{outline:3px solid #ffe39d;outline-offset:4px}
.j-header .j-header-right .account-status{display:flex;align-items:center;flex-wrap:nowrap;flex:0 1 auto;gap:7px;min-width:0;max-width:185px;margin:0;padding:7px 9px;border:1px solid #ffffff24;border-radius:8px;background:#a0223612;color:#fff1ef;font-size:10px;line-height:1.4}
.j-header .j-header-right .account-status:empty{display:none}
.j-header .j-header-right .account-status>span:nth-child(2){position:static;flex:0 1 auto;width:auto;height:auto;min-width:0;margin:0;overflow:hidden;clip-path:none;text-overflow:ellipsis;white-space:nowrap}
.j-header .j-header-right .account-status strong{color:#fff;font-size:10px}
.j-header .j-header-right .account-status-divider{margin-inline:4px;color:#ffffff90}
.j-header .j-header-right .account-status-link{display:inline-flex;flex:none;align-items:center;min-height:22px;margin:-2px 0 -2px 2px;padding:2px 0 2px 7px;border-left:1px solid #ffffff35;color:#fff4d9;font-size:10px;font-weight:750;text-decoration:none}
.j-header .j-header-right .account-status-link:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.j-header .account-save-indicator{width:6px;height:6px;box-shadow:0 0 0 3px #ffffff0d}
@media(max-width:1100px){
  .j-header .j-header-right{gap:8px}
  .j-header .j-header-right .j-header-actions{gap:8px}
  .j-header .header-profile-label{display:none}
  .j-header .j-header-actions>.header-profile-button{width:44px;min-width:44px;padding:0}
  .j-header .j-header-right .account-status-link{display:none}
  .j-header .j-header-right .account-status{max-width:130px}
}
@media(min-width:721px) and (max-width:1000px){
  .j-header .j-header-right .account-status>span:nth-child(2)>strong,.j-header .j-header-right .account-status-divider{display:none}
}
@media(min-width:721px) and (max-width:800px){
  .j-header .j-header-right,.j-header .j-header-right .j-header-actions{gap:4px}
  .j-header .header-social>a,.j-header .header-social>button{width:30px}
  .j-header .header-tool-group>button{width:30px}
}
@media(max-width:720px){
  .j-header .header-social{grid-column:1/-1;grid-row:2;justify-self:start}
  .j-header .header-social>a,.j-header .header-social>button{width:30px;height:36px;padding:6px}
  .j-header{min-height:0;padding:9px 10px;row-gap:9px}
  .j-header .j-header-right{display:contents}
  .j-header .j-header-right .j-header-actions{grid-column:2;grid-row:1;gap:6px}
  .j-header .header-tool-group{gap:1px;padding:3px;border-radius:9px}
  .j-header .header-tool-group>button{width:28px;height:30px;border-radius:5px}
  .j-header .header-tool-group .icon{width:16px;height:16px}
  .j-header .j-header-actions>.header-profile-button{width:40px;min-width:40px;height:40px;border-radius:10px}
  .j-header .header-profile-icon{width:28px;height:28px}
  .j-header .j-header-right .account-status{grid-column:1/-1;grid-row:2;justify-self:end;flex:none;order:0;max-width:calc((100vw - 190px)/2);padding:6px 7px;margin:0;font-size:9px;min-height:24px}
  .j-header .game-mode-switch{grid-column:1/-1;grid-row:2;justify-self:center}
}
@media(max-width:420px){
  .j-header .j-header-right .account-status{justify-content:center;width:25px;padding:6px}
  .j-header .j-header-right .account-status>span:nth-child(2){position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}