/* Keep the minimap corner the same width; the identity sits below it. */
.hud .tr{display:grid;grid-template-columns:54px var(--map);width:calc(var(--map) + 60px);gap:var(--s2) 6px}
.profile-chip{grid-column:1/-1;display:flex;align-items:center;gap:var(--s2);width:100%;min-width:0;min-height:52px;padding:var(--s1) var(--s2);border:1px solid var(--trim);border-radius:4px;background:var(--teakbg);color:var(--text);text-align:left;cursor:pointer;box-shadow:0 2px 8px #120c0766}
.profile-chip:hover{border-color:var(--accent);background:var(--raised)}
.profile-chip:active{transform:translateY(1px)}
.profile-avatar{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--paper);color:var(--ink);font:700 22px/1 var(--display)}
.profile-avatar canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.profile-avatar canvas[data-preview-state="ready"]{opacity:1}
.profile-chip-copy{display:flex;flex-direction:column;min-width:0}
.profile-chip-copy strong{font:700 var(--text-body)/1.2 var(--prose);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-chip-copy>span{font:var(--text-small)/1.3 var(--prose);color:var(--muted)}
.profile-dialog{width:min(440px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:var(--s5);border:2px solid var(--trim);border-radius:6px;background:var(--teakbg);color:var(--text);font:var(--text-body)/1.4 var(--prose);overflow:auto;box-shadow:0 16px 64px #120c0799}
.profile-dialog::backdrop{background:#120c07aa}
.profile-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.profile-heading>div{min-width:0}
.profile-eyebrow{margin:0 0 var(--s1);color:var(--muted);font-size:var(--text-small)}
.profile-heading h2{margin:0;font:700 28px/1.1 var(--display);overflow-wrap:anywhere}
.profile-dialog .btn{min-width:var(--target);min-height:var(--target);font:700 var(--text-body)/1.2 var(--prose)}
#profileClose{flex:none;padding:var(--s2);background:var(--well)}
.profile-character{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--s4);margin:var(--s4) 0}
.profile-portrait{position:relative;min-width:0;aspect-ratio:320/352;display:grid;place-items:center}
.profile-portrait canvas{display:block;width:100%;height:auto}
.profile-portrait canvas[data-preview-state="unavailable"]{visibility:hidden}
.profile-portrait-note{position:absolute;inset:auto var(--s2);text-align:center;color:var(--muted)}
.profile-facts{margin:0;display:grid;gap:var(--s3)}
.profile-facts dt{font-size:var(--text-small);color:var(--muted)}
.profile-facts dd{margin:0;font-weight:700;overflow-wrap:anywhere}
#profileOverallLevel{font:700 28px/1.1 var(--display);color:var(--accent)}
.profile-level-note{margin:0 0 var(--s4);color:var(--muted);font-size:var(--text-small)}
.profile-progress{border-top:1px solid var(--brass-700);padding-top:var(--s4)}
#profileSaveStatus{margin:0 0 var(--s3);min-height:1.4em;overflow-wrap:anywhere}
.profile-actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
.profile-actions .btn{flex:1 1 auto}
.profile-account{display:flex;align-items:center;justify-content:space-between;min-height:var(--target);padding:var(--s2) 0;margin-top:var(--s2);color:var(--accent);text-underline-offset:3px}
.profile-chip:focus-visible,.profile-dialog :focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* Reserve the top corner when the bottom dock needs to scroll. */
@media(min-width:761px){
  .hud .dock{max-height:calc(100dvh - var(--map) - 148px - var(--st) - var(--sb))}
  .hud .mbar{flex-shrink:0}
  .hud .panel{min-height:0;max-height:none}
}
@media(min-width:761px) and (max-height:500px){
  .hud .tr{--map:100px;grid-template-columns:44px var(--map);width:calc(var(--map) + 50px)}
  .tr .orb{width:44px;height:44px}
  .tr .orbs{padding:0}
  .tr .chips{display:none}
  .hud .dock{max-height:calc(100dvh - 248px - var(--st) - var(--sb))}
}
@media(max-width:760px){
  .hud .tr{display:flex;flex-direction:column;align-items:flex-end;width:var(--map)}
  .online-players{order:1}
  .profile-chip{order:3;width:var(--map);gap:6px;padding:var(--s1)}
  .profile-avatar{width:28px;height:28px;font-size:18px}
  .profile-chip-copy strong{font-size:var(--text-small)}
  .profile-chip-copy>span{font-size:12px}
  .profile-dialog{padding:var(--s4)}
}
/* In short phone viewports, keep the collapsed ticker beside the status
   column so it cannot cover the profile action. Expanded chat remains a sheet. */
@media(max-width:760px) and (max-height:500px){
  .hud .chat.min{max-width:calc(100% - var(--map) - var(--gap))}
}
@media(prefers-reduced-motion:reduce){.profile-chip,.profile-dialog,.profile-dialog .btn{transition:none;animation:none}}