/* The status strip: portrait, resources, purse and map, in one quiet hierarchy. */
:root{--header-height:78px}
/* Reserve the whole left edge for the menu, independent of row padding. */
header.topbar:has(>.menu-toggle){--menu-corner-width:64px;padding-left:calc(var(--menu-corner-width) + 16px)}
header.topbar>.menu-toggle{position:absolute;inset:0 auto 0 0;align-self:stretch;width:var(--menu-corner-width);min-width:var(--menu-corner-width);height:100%;min-height:0;margin:0;padding:0;border:0;border-right:1px solid #79613a66;border-radius:0;background:#080c0738;color:#d5ba83}
header.topbar>.menu-toggle:hover,header.topbar>.menu-toggle[aria-expanded=true]{border-right-color:#b08a4c;background:#a77c2514;color:#f0d59c}
header.topbar>.menu-toggle:focus-visible{outline:2px solid #ddbc72;outline-offset:-5px}
@media(max-width:700px){header.topbar:has(>.menu-toggle){--menu-corner-width:50px;padding-left:calc(var(--menu-corner-width) + 11px)}}
.topbar{display:flex;align-items:center;height:var(--header-height);gap:10px;padding:9px 18px;background:linear-gradient(110deg,#12150f,#201e15 65%,#171910);border-bottom:1px solid #79613a;box-shadow:0 3px 14px #0004}
.topbar:after{content:'';position:absolute;inset:auto 0 -2px;height:1px;background:#0006;pointer-events:none}
.topbar .menu-toggle,.topbar .journey-back{display:grid;place-items:center;flex:none;width:36px;min-width:36px;height:44px;min-height:44px;margin:0;padding:7px;border:1px solid transparent;border-radius:3px;background:transparent;box-shadow:none;color:#c7b07e}
.topbar .menu-toggle svg,.topbar .journey-back svg{width:22px;height:22px}
.topbar .journey-back{width:28px;min-width:28px;padding:5px}
.topbar .journey-back:disabled{display:none}
.topbar .menu-toggle:hover,.topbar .journey-back:hover{background:#c6a3620b;border-color:#715a33}
.topbar .player-strip{display:grid;grid-template-columns:minmax(160px,220px) minmax(190px,1fr) auto auto;grid-template-rows:1fr;gap:20px;align-items:center;flex:1;min-width:0;position:static;margin:0;padding:0;border:0;box-shadow:none;background:none}
.topbar .hud-profile{display:flex;align-items:center;gap:11px;grid-column:1;grid-row:1;min-width:0;min-height:48px;width:100%;padding:0;margin:0;border:0;border-radius:2px;background:transparent;box-shadow:none;text-align:left;color:#e9dcb7;cursor:pointer}
.topbar .hud-profile:hover strong{color:#f5d58c}
.topbar .hud-profile>.avatar{display:grid;place-items:center;flex:none;width:42px;height:48px;padding:2px;border:1px solid #967442;border-radius:3px;background:linear-gradient(145deg,#393321,#11150e);box-shadow:inset 0 0 0 2px #0d100a}
.topbar .avatar img{display:block;width:100%;height:100%;object-fit:contain}
.topbar .hud-profile>div{display:block;min-width:0}
.topbar .identity strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:21px/1.25 Georgia,serif;letter-spacing:0;color:#ead8af}
.topbar .identity small{display:block;margin-top:4px;color:#b3a487;font:11px/1.3 Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .vitals{grid-column:2;grid-row:1;display:flex;align-items:center;gap:18px;width:100%;min-width:0;margin:0}
.topbar .vitals>div{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:14px 9px;gap:5px 5px;flex:1;min-width:0;padding:3px 0}
.topbar .vitals span{width:auto;font:600 9px/1.4 Arial,sans-serif;color:#cb9f89;letter-spacing:.5px}
.topbar .vitals>div:has(#sp)>span{color:#9cbdc7}
.topbar .vitals small{display:block;grid-column:2;grid-row:1;justify-self:end;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap;font:10px/1.4 Arial,sans-serif;color:#c9bfa5;font-variant-numeric:tabular-nums}
.topbar .vitals meter{display:block;grid-column:1/-1;grid-row:2;width:100%;height:9px;min-width:0;margin:0;border:1px solid #594b33;border-radius:2px;background:#090d08;overflow:hidden}
.topbar .vitals meter::-webkit-meter-bar{border:0;border-radius:0;background:#090d08}
.topbar #hp::-webkit-meter-optimum-value{background:linear-gradient(#aa5744,#793b2f)}
.topbar #sp::-webkit-meter-optimum-value{background:linear-gradient(#6097a4,#376579)}
.topbar #hp::-moz-meter-bar{background:#974b3c}.topbar #sp::-moz-meter-bar{background:#4d8194}
.topbar .currency{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:80px;margin:0;color:#dfb66a;white-space:nowrap}
.topbar .hud-yang-icon{display:block;width:23px;height:23px;object-fit:contain;flex:none}
.topbar .currency strong{font:600 14px/1.3 Arial,sans-serif;font-variant-numeric:tabular-nums;color:#e3bd76}
.topbar .exp-orbs{grid-column:4;grid-row:1;display:flex;align-items:center;gap:5px;width:auto;min-width:0;min-height:44px;height:44px;padding:0 3px;margin:0;border:0;background:none;box-shadow:none}
.topbar .exp-orbs i{width:14px;height:14px;flex:none;border-color:#9d7b42;box-shadow:inset 0 0 0 1px #0a0e09,0 1px 3px #0006}
.topbar .desktop-location{flex:0 1 195px;max-width:220px;min-width:0;gap:10px;padding:0 0 0 17px;margin-left:7px;border-left:1px solid #75603b66;min-height:48px}
.topbar .hud-location img{width:34px;height:42px;padding:1px;border-color:#7d653b;border-radius:2px}
.topbar .hud-location small{display:none}
.topbar .hud-location strong{font:17px/1.4 Georgia,serif;color:#decba2}
.topbar .hud-location em{margin-top:3px;font:10px/1.4 Arial,sans-serif;color:#aa9c7e}
.hud-location>svg{width:14px;height:14px;flex:none;margin-left:auto;color:#b6a078}
.topbar button:focus-visible{outline:2px solid #ddbc72;outline-offset:3px}
@media(min-width:1600px){.topbar .player-strip{grid-template-columns:minmax(160px,250px) minmax(190px,650px) auto auto}}
@media(max-width:1100px){.topbar{gap:7px;padding-inline:12px}.topbar .player-strip{grid-template-columns:minmax(140px,190px) minmax(170px,1fr) auto auto;gap:14px}.topbar .vitals{gap:12px}.topbar .desktop-location{flex-basis:150px;padding-left:12px;gap:8px}.topbar .hud-location img{display:none}.topbar .currency{min-width:66px}.topbar .identity strong{font-size:19px}}
@media(max-width:949px){.topbar .desktop-location{display:none}.topbar .player-strip{grid-template-columns:minmax(140px,200px) minmax(150px,1fr) auto auto}}
@media(max-width:700px){:root{--header-height:88px}.topbar{padding:7px 10px;gap:7px}.topbar .menu-toggle{width:30px;min-width:30px;padding:4px}.topbar .journey-back{width:24px;min-width:24px;padding:3px}.topbar .player-strip{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:40px 25px;gap:5px 12px}.topbar .hud-profile{min-height:40px;gap:8px}.topbar .hud-profile>.avatar{width:32px;height:38px;padding:1px}.topbar .identity strong{font-size:17px;line-height:1.25}.topbar .identity small{font-size:9px;margin-top:3px}.topbar .currency{grid-column:2;grid-row:1;align-self:start;min-width:72px;gap:5px;height:19px}.topbar .currency strong{font-size:12px}.topbar .hud-yang-icon{width:17px;height:17px}.topbar .exp-orbs{grid-column:2;grid-row:1;align-self:end;justify-self:end;justify-content:flex-end;gap:4px;height:21px;min-height:21px;padding:0}.topbar .exp-orbs i{width:11px;height:11px}.topbar .vitals{grid-column:1/-1;grid-row:2;gap:14px}.topbar .vitals>div{grid-template-rows:11px 7px;gap:4px 4px;padding:0}.topbar .vitals meter{height:7px}.topbar .vitals small{font-size:9px;line-height:1.3}.topbar .vitals span{font-size:8px;line-height:1.3}.topbar .menu-toggle,.topbar .journey-back{align-self:flex-start;margin-top:5px}}
@media(max-height:520px) and (orientation:landscape){:root{--header-height:58px}.topbar{padding-block:4px}.topbar .player-strip{grid-template-columns:minmax(120px,170px) minmax(150px,1fr) auto auto;grid-template-rows:1fr;gap:12px}.topbar .hud-profile>.avatar{width:30px;height:36px}.topbar .identity strong{font-size:17px}.topbar .identity small{font-size:9px}.topbar .currency{grid-column:3;grid-row:1;align-self:center;height:auto}.topbar .exp-orbs{grid-column:4;grid-row:1;align-self:center}.topbar .vitals{grid-column:2;grid-row:1}.topbar .menu-toggle,.topbar .journey-back{margin-top:0;align-self:center}}