/* The HUD in the Player Card's language (QualityOverhaul.md §2.12; web/css/cards.css): your name plate a paper card with a green
   edge, your face on a stage in a frame, the level and its EXP bar, the wallet and the bank as two pockets; the buttons paper
   tiles with a pixel-weight icon over a small label, badges as counters; zoom a pair; the minimap a framed card under them. */

/* ---- your name plate ---------------------------------------------------------------------------- */
#hud .me { position: relative; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 18px; background: #fffdf8;
  border: 2px solid var(--green-deep); box-shadow: 0 3px 0 color-mix(in srgb, var(--green-deep) 35%, transparent), var(--shadow); }
#hud .me:has(.pocket-bank:not([hidden])) { border-radius: 18px; padding: 6px 14px 6px 6px; }
#hud .me-face { width: 52px; height: 52px; border-radius: 13px; background: color-mix(in srgb, var(--green-deep) 16%, #fbf6ea);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--green-deep) 45%, #fff); flex: none; }
#hud .me-name { font-size: 15.5px; font-weight: 900; line-height: 1.15; letter-spacing: .01em; }
#hud .me .level-chip { margin-top: 2px; }
#hud .me .level-chip .lvl { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 6px;
  background: var(--gold); color: var(--ink); font-size: 11px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
#hud .me .level-chip .exp-track { height: 6px; background: #ece4d2; box-shadow: inset 0 0 0 1px rgba(22, 21, 28, .08); }
#hud .money { margin-top: 5px; row-gap: 4px; }
#hud .pocket { height: 24px; background: #f6efdf; box-shadow: inset 0 0 0 1.5px #e6dcc6; font-weight: 800; font-size: 13px; }
#hud .pocket-bank { background: #e3f2e9; box-shadow: inset 0 0 0 1.5px #c3e2cf; }

/* ---- the buttons ---------------------------------------------------------------------------------- */
.hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none !important; margin-left: auto; }
.hud-right > * { pointer-events: auto; }
.hud-buttons .icon-btn { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 52px; height: 52px; padding: 4px 8px 3px; border-radius: 14px; background: #fffdf8; color: var(--ink);
  border: 2px solid #e6dcc6; box-shadow: 0 3px 0 rgba(22, 21, 28, .1), var(--shadow); font-size: 11px; font-weight: 800; line-height: 1;
  transition: transform .08s ease, border-color .15s ease, background .15s ease; }
.hud-buttons .icon-btn:hover { border-color: var(--green-deep); background: #fff; }
.hud-buttons .icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(22, 21, 28, .1), var(--shadow); }
.hud-buttons .icon-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--green-deep) 55%, transparent); outline-offset: 1px; }
.hud-buttons .hi { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hud-buttons .hl { font-size: 10.5px; letter-spacing: .02em; }
.hud-buttons .mail-btn { padding: 4px 8px; }
.hud-buttons .mail-icon { width: 30px; height: 30px; }
.hud-buttons .menu-btn { background: var(--ink); color: #fff; border-color: var(--ink); }
.hud-buttons .menu-btn:hover { background: #2a2933; border-color: #2a2933; }
.hud-buttons .mail-badge, .hud-buttons .friends-badge, .hud-buttons .staff-badge, .hud-buttons .tasks-badge { top: -7px; right: -7px; box-shadow: 0 0 0 2px #fffdf8; }
/* zoom: one pair, the two halves of one tile */
.zoom-pair { display: inline-flex; flex-direction: column; gap: 0; }
.hud-buttons .zoom-pair .zoom-btn { min-width: 40px; width: 40px; height: 26px; padding: 0; border-radius: 12px 12px 0 0; box-shadow: none; }
.hud-buttons .zoom-pair .zoom-btn + .zoom-btn { border-top: 0; border-radius: 0 0 12px 12px; box-shadow: 0 3px 0 rgba(22, 21, 28, .1), var(--shadow); }
.hud-buttons .zoom-pair .hi { width: 16px; height: 16px; }

/* ---- the place you're in, the sky, who's online --------------------------------------------------- */
#hud .sky-chip { border: 2px solid #e6dcc6; background: #fffdf8; box-shadow: 0 3px 0 rgba(22, 21, 28, .08), var(--shadow); }
#hud .place { display: inline-flex; align-items: center; gap: 6px; background: rgba(22, 21, 28, .78); padding: .38em 1em .38em .75em;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .2); letter-spacing: .02em; }
#hud .place::before { content: ""; width: 10px; height: 12px; flex: none; background: #f2c430;
  clip-path: polygon(50% 100%, 0 45%, 0 25%, 20% 0, 80% 0, 100% 25%, 100% 45%); }

/* ---- the minimap ------------------------------------------------------------------------------------ */
.minimap { position: relative; display: block; padding: 0; width: 172px; height: 116px; border-radius: 14px; overflow: hidden; cursor: pointer;
  border: 2px solid var(--ink); background: #2b3b2e; box-shadow: 0 3px 0 rgba(22, 21, 28, .18), var(--shadow); }
.minimap[hidden] { display: none; }
.minimap canvas { display: block; width: 168px; height: 112px; }
.minimap-tag { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 6px; background: rgba(22, 21, 28, .78); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.minimap:hover { border-color: var(--green-deep); }

/* ---- the full map (minimap.js open) ------------------------------------------------------------------ */
.fullmap-stage { border-radius: 16px; overflow: hidden; border: 2px solid color-mix(in srgb, var(--accent, #2f5fd0) 45%, #fff); background: #161a22; line-height: 0; }
.fullmap-canvas { width: 100%; height: auto; display: block; cursor: crosshair; }
.fullmap-key { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 10px 0 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.fullmap-k { display: inline-flex; align-items: center; gap: 6px; }
.fullmap-k i { width: 10px; height: 10px; border-radius: 2px; box-shadow: 0 0 0 1.5px rgba(22, 21, 28, .55); }
.k-me i { background: #17b566; } .k-friend i { background: #e0567a; } .k-citizen i { background: #4a8ae8; } .k-npc i { background: #b8b2a4; }
.k-door i { background: #f2c430; border-radius: 50%; box-shadow: 0 0 0 2px #16151c; }
.fullmap-doors { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.fullmap-doors li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #f6efdf; font-size: 13px; font-weight: 700; }
.fullmap-pin { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: #f2c430; color: #16151c;
  font-size: 11px; font-weight: 900; box-shadow: 0 0 0 2px #16151c; }
/* the map in the Bag: a folded map as its picture */
.bag-map-pic { display: block; width: 44px; height: 36px; border-radius: 4px; border: 2px solid #2f5fd0;
  background: linear-gradient(90deg, #e6f0fb 0 33%, #d4e4f7 33% 66%, #e6f0fb 66%); position: relative; }
.bag-map-pic::after { content: ""; position: absolute; left: 22px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: #17b566; box-shadow: 0 0 0 2px #fff; }

/* ---- a phone ---------------------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .minimap { width: 132px; height: 90px; }
  .minimap canvas { width: 128px; height: 86px; }
}
@media (max-width: 560px) {
  .hud-right { order: 3; flex: 1 0 100%; align-items: stretch; }
  .hud-buttons .icon-btn { height: 44px; min-width: 46px; padding: 3px 6px 2px; border-radius: 12px; }
  .hud-buttons .hi { width: 19px; height: 19px; }
  .hud-buttons .hl { font-size: 9.5px; }
  .minimap { position: fixed; right: calc(10px + var(--safe-right)); bottom: calc(176px + var(--safe-bottom)); width: 108px; height: 76px; }
  .hud-mid { top: calc(172px + var(--safe-top)) !important; }
  .minimap canvas { width: 104px; height: 72px; }
  #hud .me-face { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .hud-buttons .icon-btn { transition: none; } }