/* Avatar and navigation share a column; the information panel aligns with the main screen. */
body.pc{--shell-column-gap:16px}
body.pc .phone{column-gap:var(--shell-column-gap)}
body.pc .top{gap:12px;align-items:center}
body.pc .top .center.hud-unified{
  position:relative;display:grid;grid-template-columns:var(--shell-nav-width) minmax(0,1fr);
  align-items:center;gap:var(--shell-column-gap);flex:1 1 auto;min-width:0;height:var(--shell-nav-width);margin:0;padding:0;
  border:0;background:none;box-shadow:none;
}
.hud-panel{display:contents}
body.pc .hud-panel{
  display:grid;grid-template-columns:minmax(240px,1fr) minmax(420px,1.3fr);gap:22px;align-items:center;
  height:100%;min-width:0;padding:0 22px;
  border:0;border-radius:5px;background:linear-gradient(115deg,#243146f5,#131f30f5);
  box-shadow:inset 0 0 0 1px #b3a4855e,inset 0 1px #e8d6b61a,0 5px 14px #080e1b55;
}
body.pc .hud-unified .shell-avatar{position:relative;left:auto;top:auto;grid-column:1;grid-row:1;width:var(--shell-nav-width);height:var(--shell-nav-width);align-self:center}
body.pc .hud-unified .shell-profile-details{
  display:grid;grid-template-columns:70px minmax(0,1fr);grid-template-rows:27px 7px 22px;gap:8px 16px;align-items:center;
  padding:0;width:auto;height:auto;min-width:0;background:none;border:0;border-image:none;border-radius:0;box-shadow:none;
}
body.pc .hud-unified .shell-profile-name{grid-column:2;grid-row:1;min-width:0;height:auto;max-width:none;font-size:20px;line-height:1.3;text-shadow:none;white-space:nowrap}
body.pc .hud-unified .lvl{display:contents}
body.pc .hud-unified #tb-lvl{
  position:static;grid-column:1;grid-row:1/4;display:grid;place-items:center;width:70px;height:70px;
  background:url('illustrated/level-medallion.webp') center/contain no-repeat;
  color:#f6ecd9;font:600 23px/1 var(--font-ui);letter-spacing:-.03em;text-shadow:0 1px 3px #07101c;
}
body.pc .hud-unified .xp{grid-column:2;grid-row:2;width:100%;height:7px;margin:0;border:0;border-radius:2px;background:#080f1d;box-shadow:inset 0 1px 3px #0008}
body.pc .hud-unified .xp i{background:linear-gradient(90deg,#85724e,#d5b982);box-shadow:inset 0 1px #f4deb966}
body.pc .hud-unified .shell-xp{grid-column:2;grid-row:3;display:block;margin:0;color:#d1d8e0;font-size:15px;line-height:1.4;font-weight:500;white-space:nowrap;text-shadow:none}
body.pc .hud-unified .cons{position:static;transform:none;display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin:0;min-width:0}
body.pc .hud-unified .wallet{display:contents;margin:0;min-width:0}
body.pc .hud-unified .cons .c,body.pc .hud-unified .wallet .w{
  position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:20px 25px 4px;gap:4px 8px;
  min-width:0;width:auto;height:auto;padding:0 0 0 18px;border:0;border-left:1px solid #8b98a433;border-radius:0;
  background:none;box-shadow:none;color:#edf0f5;align-items:center;justify-content:initial;
}
body.pc .hud-unified .cons .res-ic{grid-column:1;grid-row:1/3;width:32px;height:36px;margin:0;object-fit:contain}
.hud-resource-label{grid-column:2;grid-row:1;color:#aebdcb;font:500 15px/1.3 var(--font-ui);letter-spacing:.02em}
.hud-resource-value{grid-column:2;grid-row:2;display:flex;align-items:baseline;gap:4px;white-space:nowrap;font:600 19px/1.3 var(--font-ui);font-variant-numeric:tabular-nums}
.hud-resource-value #tb-enmax,.hud-resource-value #tb-manamax{color:#9eafc1;font-size:max(15px,.8em);font-weight:400}
.hud-resource-meter{grid-column:1/-1;grid-row:3;display:block;height:3px;background:#080f1d;border-radius:2px;overflow:hidden}
.hud-resource-meter i{display:block;height:100%;background:linear-gradient(90deg,#b98433,#f2cc75)}
[data-resource="mana"] .hud-resource-meter i{background:linear-gradient(90deg,#287bab,#81c9ef)}
body.pc .hud-unified .cons .vialn{position:absolute;right:0;top:0;left:auto;margin:0;min-width:14px;padding:0 3px;background:#152638;border:1px solid #74849866;border-radius:3px;font:10px/1.3 var(--font-ui);color:#c1d0dc}
.hud-unified .vialn[hidden]{display:none!important}
body.pc .top .ico-btn{flex:none;order:2}
body.pc .top .center.hud-unified:focus-visible{outline:2px solid #d8bd85;outline-offset:4px}
@media(min-width:1000px) and (max-width:1199px){
  body.pc .top{gap:6px}
  body.pc{--shell-column-gap:12px}
  body.pc .hud-panel{grid-template-columns:minmax(210px,1fr) minmax(350px,1.2fr);gap:12px;padding:0 14px}
  body.pc .hud-unified .shell-profile-details{grid-template-columns:54px minmax(0,1fr);column-gap:10px;row-gap:5px}
  body.pc .hud-unified #tb-lvl{width:54px;height:54px;font-size:20px}
  body.pc .hud-unified .shell-profile-name{font-size:18px}
  body.pc .hud-unified .shell-xp{font-size:15px}
  body.pc .hud-unified .cons{gap:10px}
  body.pc .hud-unified .cons .c,body.pc .hud-unified .wallet .w{grid-template-columns:24px minmax(0,1fr);column-gap:5px;padding-left:10px}
  body.pc .hud-unified .cons .res-ic{width:24px;height:30px}
  body.pc .hud-unified .hud-resource-value{font-size:17px;gap:2px}
}
@media(max-width:999px),(max-height:559px){
  body .top{position:relative;display:grid;grid-template-columns:minmax(0,1fr);padding:8px 10px;align-items:start}
  body .top .center.hud-unified{position:relative;grid-column:1/-1;grid-row:1;display:grid;grid-template-rows:auto auto;gap:11px;min-width:0;margin:0;padding:10px 12px;background:linear-gradient(125deg,#223044,#141e30);border:1px solid #8e927e55;border-radius:5px;box-shadow:none}
  .hud-unified .shell-avatar{display:none}
  .hud-unified .shell-profile-details{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:20px 4px 22px;gap:4px 10px;padding-right:0;min-width:0}
  .hud-unified .shell-profile-name{display:block;grid-column:2;grid-row:1;min-width:0;max-width:none;font:600 15px/1.3 var(--font-ui);color:#e9edf1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hud-unified .lvl{display:contents}
  .hud-unified .lvl .star{display:none}
  .hud-unified #tb-lvl{grid-column:1;grid-row:1/4;width:44px;height:44px;display:grid;place-items:center;background:url('illustrated/level-medallion.webp') center/contain no-repeat;font:600 15px/1 var(--font-ui);color:#f6ecd9}
  .hud-unified .xp{grid-column:2;grid-row:2;width:100%;height:4px;margin:0;border:0;background:#080f1d}
  .hud-unified .xp i{background:linear-gradient(90deg,#85724e,#d5b982)}
  .hud-unified .shell-xp{display:block;grid-column:2;grid-row:3;margin:0;font:500 15px/1.4 var(--font-ui);color:#becad7;white-space:nowrap}
  .hud-unified .cons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;min-width:0}
  .hud-unified .wallet{display:contents}
  .hud-unified .cons .c,.hud-unified .wallet .w{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr);grid-template-rows:20px 20px 3px;gap:2px 4px;min-width:0;width:auto;height:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;align-items:center}
  .hud-unified .cons .res-ic{grid-column:1;grid-row:1/3;width:18px;height:24px;margin:0;object-fit:contain}
  .hud-unified .hud-resource-label{font-size:15px}
  .hud-unified .hud-resource-value{font-size:15px;gap:2px}
  .hud-unified .cons .vialn{position:absolute;right:0;top:0;font-size:8px;padding:0 2px;border:1px solid #78899966;border-radius:3px;color:#c1d0dc;min-width:0;line-height:1.2}
}
/* A separate help action below the desktop menu, beside the compact phone menu. */
.shell-sidebar{display:flex;flex:none;align-items:center;min-width:0}
body:not(.pc) .shell-sidebar{order:2}
.shell-sidebar .nav{flex:1;min-width:0}
#helpbtn{display:flex;align-items:center;justify-content:center;gap:6px;flex:none;width:42px;height:42px;padding:5px;border:1px solid #8090a655;border-radius:5px;background:#162438;color:#d5dbe8;font:500 15px var(--font-ui)}
#helpbtn::before{content:'';flex:none;width:28px;height:28px;background:url('illustrated/help.webp') center/contain no-repeat}
#helpbtn span{display:none}
#helpbtn:disabled{opacity:.55;cursor:default}
body.pc .shell-sidebar{grid-area:nav;flex-direction:column;align-items:stretch;gap:12px;min-height:0}
body.pc .shell-sidebar .nav{flex:0 1 auto;max-height:calc(100% - 60px);min-height:0}
body.pc .shell-sidebar .nav button{flex:0 1 auto;min-height:0}
body.pc .shell-sidebar #helpbtn{width:100%;height:48px;background:linear-gradient(#253449ed,#142033f5);border:1px solid #8090a655;font-size:15px}
body.pc #helpbtn span{display:inline}
@media(min-width:1000px) and (max-height:680px){
  body.pc .shell-sidebar .nav button[data-go] img.ng{width:48px;height:48px}
}