/* Flow-based HUD: profile, map/tools and chat each keep their own space. */
:root{--hud-gap:12px;--hud-map-width:184px;--hud-profile-width:340px;--hud-stick-space:0px}
#hud{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#hud .hud-profile{position:absolute;top:calc(env(safe-area-inset-top) + var(--hud-gap));left:calc(env(safe-area-inset-left) + var(--hud-gap));width:min(var(--hud-profile-width),calc(100vw - var(--hud-map-width) - var(--hud-gap)*3 - env(safe-area-inset-left) - env(safe-area-inset-right)));padding:10px 12px;display:grid;gap:8px;border-radius:18px;background:rgba(255,250,240,.95);pointer-events:none}
#hud .hud-profile > *{pointer-events:auto}
#hud .hud-profile .clock,#hud .hud-profile .userbar{position:static;width:100%;max-width:none;margin:0;padding:0;border:0;box-shadow:none;background:transparent;backdrop-filter:none;border-radius:0}
#hud .clock-time{font-size:25px;letter-spacing:.02em}
#hud .clock-sub{margin-top:4px;font-size:11px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hud .userbar{display:flex;gap:7px;padding-top:8px!important;border-top:1px solid var(--line)!important}
#hud .avatar{width:28px;height:28px;flex:0 0 auto}
#hud .uname{flex:1;min-width:0;max-width:none;font-size:14px}
#hud .userbar .btn-mini{flex:0 0 auto;padding:6px 8px;font-size:12px;min-height:30px}
.hud-metrics{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:stretch;gap:6px;pointer-events:none!important}
#hud .hud-metrics > *{position:static;min-width:0;width:auto;height:34px;margin:0;padding:5px 7px;gap:5px;border:1px solid #e7d5a9;border-radius:10px;box-shadow:none;background:#f8efd6;backdrop-filter:none;pointer-events:auto}
#hud .hud-metrics .wallet{display:flex;background:#fff2c7;border-color:#e5cb78;overflow:hidden}
#hud .wallet b{font-size:19px;min-width:0;white-space:nowrap}
#hud .coin-ico{width:19px;height:19px;flex:0 0 auto}
#hud .coin-unit{font-size:11px}
#hud .hud-metrics .hud-action{display:flex;justify-content:center;font-size:12px}
#hud .hud-metrics img{width:20px;height:20px;flex:0 0 auto}
#hud .stomach-action.low{background:#ffe5d8;border-color:#db896b;color:#a33a24}
#hud .map-hud{display:flex;position:absolute;top:calc(env(safe-area-inset-top) + var(--hud-gap));right:calc(env(safe-area-inset-right) + var(--hud-gap));width:var(--hud-map-width);max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--hud-gap)*2 - var(--hud-stick-space));gap:7px;flex-direction:column;align-items:stretch;overflow:visible;pointer-events:none!important}
#hud .map-hud > *{position:static;flex:0 0 auto;width:100%;margin:0;pointer-events:auto}
#hud .map-hud .mini{padding:6px;border-radius:16px}
#hud #minimap{width:100%;height:auto;aspect-ratio:1;border-radius:10px}
#hud .mini-foot{gap:4px;flex-wrap:wrap;padding:5px 1px 0;font-size:10px;line-height:1.3;justify-content:space-between}
#hud .patrol-map-notice{max-width:none;font-size:10px;margin-top:4px;padding:4px 5px}
#hud .zoomctl{display:flex;align-items:center;gap:5px;padding:4px;border-radius:12px}
#hud .zoomctl input{flex:1;min-width:0;width:0;height:20px;margin:0;cursor:pointer}
#hud .zoomctl .btn-mini{flex:0 0 30px;width:30px;height:27px;font-size:16px;border-radius:8px;line-height:1}
#hud .functions-toggle{height:32px;min-height:32px;border-radius:11px;background:rgba(255,250,240,.97);font-size:11px;letter-spacing:.02em}
#hud #hudFunctions{display:grid;position:static;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:5px;padding:5px;max-height:none;min-height:0;flex:0 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;border:1px solid var(--line);border-radius:15px;background:rgba(255,250,240,.88);box-shadow:0 6px 18px #3c281028;pointer-events:auto}
#hud #hudFunctions.collapsed{display:none!important}
#hud #hudFunctions > .hud-action{display:flex;position:static!important;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;height:62px;min-height:62px;padding:5px 2px;border:1px solid transparent;border-radius:10px;background:rgba(248,238,214,.8);box-shadow:none;font-size:25px;line-height:1;transition:background .15s,border-color .15s,transform .15s}
#hud #hudFunctions > .hud-action::after{content:attr(data-short-label);display:block;width:100%;font:800 9px/1.15 'Nunito',sans-serif;white-space:nowrap;text-align:center;color:var(--ink2)}
#hud #hudFunctions > .hud-action:hover{background:#fff4d4;border-color:#d4b16b;transform:translateY(-1px)}
#hud #hudFunctions > .hud-action:active{transform:translateY(0);background:#f0dfb3}
#hud #hudFunctions > .hud-action:focus-visible,#hud .btn-mini:focus-visible,#hud .functions-toggle:focus-visible{outline:3px solid #2782a7;outline-offset:2px}
#hud #hudFunctions > .hud-action img{display:block;width:29px;height:29px;object-fit:contain;pointer-events:none}
#hud #hudFunctions > .hud-action canvas{width:34px;height:29px;pointer-events:none}
#hud #hudFunctions .hud-emoji{height:29px;line-height:29px;font-size:26px;pointer-events:none}
#hud #hudFunctions .housing-hud::after{content:'Nhà đất'}
#hud #hudFunctions .town-notice-hud::after{content:'Bảng tin'}
#hud #hudFunctions .pet-action[aria-expanded="true"]{background:#ffe3c3;border-color:#c8553d}
#hud #chatWrap{left:calc(env(safe-area-inset-left) + var(--hud-gap));bottom:calc(env(safe-area-inset-bottom) + var(--hud-gap));width:min(420px,calc(100vw - var(--hud-map-width) - var(--hud-gap)*3 - env(safe-area-inset-left) - env(safe-area-inset-right)));gap:5px;isolation:isolate}
#hud .chat-toggle{padding:6px 10px;min-height:28px;background:rgba(255,250,240,.97);border:1px solid var(--line);box-shadow:0 2px 8px #3c281022;font-size:11px;border-radius:10px}
#hud #chatLog{max-height:min(220px,28dvh);padding-right:3px;scrollbar-color:#bdab83 transparent;mask-image:none}
#hud #chatLog .msgline{max-width:100%;line-height:1.4}
#hud #chatForm{gap:4px;min-width:0}
#hud #chatInput{min-width:0;padding:9px 10px;font-size:12px;border-radius:11px}
#hud #chatForm .btn-mini{flex:0 0 auto;padding:7px 9px;font-size:12px}
#hud #chatForm .chat-mode{min-width:52px}
#mapPreviewHud{left:calc(env(safe-area-inset-left) + var(--hud-gap));right:auto;bottom:var(--chat-clearance,100px);transform:none;width:min(600px,calc(100vw - var(--hud-map-width) - var(--hud-gap)*3 - env(safe-area-inset-left) - env(safe-area-inset-right)));max-width:none;justify-content:flex-start;flex-wrap:wrap;gap:5px;padding:7px 8px;border-radius:12px}
#mapPreviewHud b{min-width:0;flex:1 1 100%;width:100%;max-width:none;text-align:left;font-size:12px;line-height:1.35}
#mapPreviewHud .btn-mini{font-size:11px;padding:5px 8px;min-height:28px;flex:0 0 auto}
#goldenBar{position:static;transform:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap;width:100%;padding:6px 8px;white-space:normal;border-radius:10px;font-size:11px;line-height:1.3;box-shadow:none}
#goldenBar b{flex:1;min-width:0}
#goldenTime{font-variant-numeric:tabular-nums}
#tutorialPanel{left:calc(env(safe-area-inset-left) + var(--hud-gap));top:calc(env(safe-area-inset-top) + 184px);transform:none;width:min(300px,calc(100vw - var(--hud-map-width) - var(--hud-gap)*3 - env(safe-area-inset-left) - env(safe-area-inset-right)));padding:9px;max-height:max(90px,min(190px,calc(100dvh - var(--chat-clearance,180px) - 280px)));border-radius:13px;overscroll-behavior:contain;scrollbar-width:thin}
body:has(#goldenBar:not(.hidden)) #tutorialPanel{top:calc(env(safe-area-inset-top) + 238px);max-height:max(74px,min(150px,calc(100dvh - var(--chat-clearance,180px) - 334px)))}
#hud .hint{left:calc(50% + 130px);bottom:calc(env(safe-area-inset-bottom) + var(--hud-gap));max-width:calc(100vw - 700px);font-size:11px;line-height:1.35}
@media(pointer:coarse),(max-width:700px){
  :root{--hud-gap:8px;--hud-map-width:120px;--hud-profile-width:320px;--hud-stick-space:108px}
  #hud .hud-profile{padding:8px;gap:6px;border-radius:14px}
  #hud .clock-time{font-size:21px}
  #hud .clock-sub{font-size:9px;margin-top:3px}
  #hud .userbar{gap:5px;padding-top:6px!important}
  #hud .avatar{width:24px;height:24px}
  #hud .uname{font-size:12px}
  #hud .userbar .btn-mini{min-height:28px;padding:5px 6px;font-size:10px}
  .hud-metrics{gap:4px}
  #hud .hud-metrics > *{height:30px;padding:4px 5px;gap:4px;font-size:10px;border-radius:8px}
  #hud .wallet b{font-size:15px}
  #hud .wallet .coin-ico{width:15px;height:15px}
  #hud .coin-unit{font-size:9px}
  #hud .hud-metrics img{width:17px;height:17px}
  #hud .hud-metrics .hud-action{font-size:10px}
  #hud .map-hud{gap:5px}
  #hud .map-hud .mini{padding:5px;border-radius:13px}
  #hud .mini-foot{font-size:8px;padding-top:4px;gap:2px 3px;justify-content:center}
  #hud .zoomctl{padding:3px;gap:3px}
  #hud .zoomctl .btn-mini{width:25px;height:25px;flex-basis:25px;font-size:15px}
  #hud .functions-toggle{font-size:10px;min-height:29px;height:29px}
  #hud #hudFunctions{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;border-radius:12px}
  #hud #hudFunctions > .hud-action{min-height:51px;height:51px;gap:2px;padding:4px 1px;border-radius:8px}
  #hud #hudFunctions > .hud-action::after{font-size:8px;line-height:1.2}
  #hud #hudFunctions > .hud-action img{width:25px;height:25px}
  #hud #hudFunctions > .hud-action canvas{width:30px;height:25px}
  #hud #hudFunctions .hud-emoji{font-size:23px;height:25px;line-height:25px}
  #hud #chatWrap{width:min(420px,calc(100vw - 116px - env(safe-area-inset-left) - env(safe-area-inset-right)));gap:4px}
  #hud #chatLog{display:block;max-height:88px!important;line-height:18px;padding-right:2px}
  #hud #chatLog .msgline{font-size:11px;line-height:18px;padding:1px 6px;margin:0 0 2px;border-radius:8px}
  #hud #chatInput{font-size:11px;padding:7px;min-height:34px}
  #hud #chatForm .btn-mini{font-size:10px;padding:6px;min-height:34px}
  #hud #chatForm .chat-mode{min-width:42px}
  #hud .chat-toggle{min-height:28px;padding:5px 8px;font-size:10px}
  #hud .stick{right:calc(env(safe-area-inset-right) + 12px);bottom:calc(env(safe-area-inset-bottom) + 12px);width:84px;height:84px}
  #hud #stickKnob{width:36px;height:36px;left:22px;top:22px}
  #mapPreviewHud{width:calc(100vw - 116px - env(safe-area-inset-left) - env(safe-area-inset-right));padding:5px 6px;gap:4px;border-radius:11px}
  #mapPreviewHud b{font-size:10px;line-height:1.3}
  #mapPreviewHud .btn-mini{padding:4px 6px;min-height:25px;font-size:10px}
  #goldenBar{font-size:9px;gap:4px;padding:5px 6px}
  #tutorialPanel{top:calc(env(safe-area-inset-top) + 158px);width:calc(100vw - var(--hud-map-width) - var(--hud-gap)*3 - env(safe-area-inset-left) - env(safe-area-inset-right));padding:7px;max-height:max(70px,min(156px,calc(100dvh - var(--chat-clearance,174px) - 244px)))}
  body:has(#goldenBar:not(.hidden)) #tutorialPanel{top:calc(env(safe-area-inset-top) + 204px);max-height:max(60px,min(130px,calc(100dvh - var(--chat-clearance,174px) - 290px)))}
  #tutorialPanel .tutorial-head{font-size:11px}
  #tutorialPanel p{font-size:11px;line-height:1.4;margin:5px 0}
  #tutorialPanel #btnTutorialRoute{font-size:10px;padding:4px 7px}
  #tutorialPanel .tutorial-help{font-size:10px}
  #hud .hint{display:none}
}
@media(max-width:360px){
  :root{--hud-map-width:108px;--hud-gap:6px}
  #hud .hud-profile{padding:6px;gap:5px}
  #hud .clock-time{font-size:19px}
  #hud .userbar{gap:4px}
  #hud .userbar .btn-mini{padding:4px;font-size:9px}
  #hud .avatar{width:21px;height:21px}
  #hud .uname{font-size:10px}
  #hud .wallet b{font-size:13px}
  #hud .coin-unit{display:none}
  #hud .wallet .coin-ico{width:12px;height:12px}
  #hud .hud-metrics > *{padding:3px;gap:2px}
  #hud .hud-metrics img{width:14px;height:14px}
  #hud #hudFunctions > .hud-action::after{font-size:7.5px}
  #hud #chatWrap,#mapPreviewHud{width:calc(100vw - 106px - env(safe-area-inset-left) - env(safe-area-inset-right))}
  #hud #chatForm .chat-mode{min-width:36px}
  #hud .stick{right:calc(env(safe-area-inset-right) + 8px);width:78px;height:78px}
  #hud #stickKnob{left:19px;top:19px}
}
@media(max-height:500px) and (min-width:600px){
  :root{--hud-gap:6px;--hud-map-width:126px;--hud-profile-width:270px;--hud-stick-space:94px}
  #hud .hud-profile{padding:6px 8px;gap:5px}
  #hud .clock-time{font-size:18px}
  #hud .clock-sub{font-size:9px;margin-top:2px}
  #hud .userbar{padding-top:5px!important}
  #hud .avatar{width:22px;height:22px}
  #hud .userbar .btn-mini{min-height:24px;padding:4px 6px;font-size:10px}
  #hud .hud-metrics > *{height:27px;padding:3px 5px}
  #hud .wallet b{font-size:15px}
  #hud .map-hud .mini{padding:4px}
  #hud #minimap{max-height:96px;aspect-ratio:1;object-fit:contain}
  #hud .map-hud{gap:4px}
  #hud .mini-foot{font-size:8px;padding-top:2px}
  #hud .zoomctl{padding:2px}
  #hud .zoomctl .btn-mini{height:22px;width:24px;flex-basis:24px}
  #hud .functions-toggle{min-height:25px;height:25px;font-size:9px}
  #hud #hudFunctions{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;padding:3px}
  #hud #hudFunctions > .hud-action{min-height:44px;height:44px;padding:2px}
  #hud #hudFunctions > .hud-action img{width:22px;height:22px}
  #hud #hudFunctions > .hud-action canvas{width:26px;height:22px}
  #hud #hudFunctions > .hud-action::after{font-size:8px}
  #hud #chatWrap{width:270px}
  #hud #chatLog{display:block;max-height:88px!important;line-height:18px}
  #hud #chatLog .msgline{font-size:11px;line-height:18px;padding:1px 6px;margin:0 0 2px}
  #mapPreviewHud{left:calc(env(safe-area-inset-left) + 286px);bottom:calc(env(safe-area-inset-bottom) + 106px);width:calc(100vw - 434px - env(safe-area-inset-left) - env(safe-area-inset-right));max-height:140px;overflow:auto}
  #tutorialPanel,body:has(#goldenBar:not(.hidden)) #tutorialPanel{left:calc(env(safe-area-inset-left) + 286px);top:calc(env(safe-area-inset-top) + 6px);width:calc(100vw - 434px - env(safe-area-inset-left) - env(safe-area-inset-right));max-height:116px}
  #hud .stick{width:78px;height:78px}
  #hud #stickKnob{left:19px;top:19px}
}
.home-chooser{width:min(420px,calc(100% - 24px));max-height:80dvh;overflow:auto;border:2px solid #d6bc80;border-radius:18px;background:#fff9ee;color:#463621;padding:18px;box-shadow:0 12px 50px #20181066}
.home-chooser::backdrop{background:#221b1788}
.home-chooser h2{font:600 20px Fredoka,system-ui;margin:0 0 14px}
.home-chooser .btn-mini{display:block;width:100%;margin-top:8px;min-height:40px;text-align:left}

/* Requested profile compact mode: never touches map, chat or other HUD controls. */
#hud .hud-profile{position:absolute}
#hud .profile-toggle{position:absolute;right:8px;top:5px;z-index:2;font:800 10px 'Nunito',sans-serif;background:rgba(255,244,218,.96);border:1px solid #d1b37b;border-radius:8px;color:#644523;padding:3px 7px;white-space:nowrap;cursor:pointer}
#hud .hud-profile:not(.profile-collapsed) #clockPanel{padding-right:66px!important}
#hud .hud-profile.profile-collapsed{width:min(260px,calc(100vw - var(--hud-map-width) - 24px))!important;min-width:0!important;padding:32px 8px 7px!important;gap:5px!important}
#hud .hud-profile.profile-collapsed #clockPanel,
#hud .hud-profile.profile-collapsed .userbar,
#hud .hud-profile.profile-collapsed #wallet{display:none!important}
#hud .hud-profile.profile-collapsed .hud-metrics{display:grid!important;grid-template-columns:1fr 1fr!important;gap:5px!important}
#hud .hud-profile.profile-collapsed .hud-metrics #btnBag,
#hud .hud-profile.profile-collapsed .hud-metrics #btnStomach{width:100%!important;min-width:0!important}
#hud .hud-profile.profile-collapsed #goldenBar:not(.hidden){display:flex!important;max-width:100%;font-size:10px}
@media(max-width:640px){
 #hud .hud-profile.profile-collapsed{width:min(188px,calc(100vw - var(--hud-map-width) - 18px))!important}
 #hud .hud-profile.profile-collapsed .hud-metrics #btnBag,
 #hud .hud-profile.profile-collapsed .hud-metrics #btnStomach{font-size:9px!important}
}

/* 2026-10-29: mobile profile fits its own card; other HUD panels are unchanged.
   Restrict the grid's intrinsic column sizes so Settings and Stomach never overflow. */
@media (pointer:coarse), (max-width:700px) {
  #hud .hud-profile:not(.profile-collapsed) {
    width:min(238px,calc(100vw - var(--hud-map-width) - var(--hud-gap)*3 - env(safe-area-inset-left) - env(safe-area-inset-right)))!important;
    min-width:0;
    padding:6px 7px!important;
    gap:4px!important;
    border-radius:12px;
  }
  #hud .hud-profile .clock,
  #hud .hud-profile .userbar,
  #hud .hud-profile .hud-metrics {
    box-sizing:border-box;
    width:100%;
    min-width:0;
    max-width:100%;
  }
  #hud .hud-profile .clock-time {font-size:18px;line-height:1}
  #hud .hud-profile .clock-sub {margin-top:2px;font-size:9px;line-height:1.15}
  #hud .hud-profile .profile-toggle {
    right:5px;top:5px;padding:2px 5px;
    min-height:22px;font-size:9px;border-radius:7px;
  }
  #hud .hud-profile:not(.profile-collapsed) #clockPanel {padding-right:65px!important}
  #hud .hud-profile:not(.profile-collapsed) .userbar {
    display:grid;
    grid-template-columns:20px minmax(0,1fr) auto 26px;
    align-items:center;
    gap:3px;
    padding-top:4px!important;
  }
  #hud .hud-profile:not(.profile-collapsed) .userbar .avatar {width:20px;height:20px}
  #hud .hud-profile:not(.profile-collapsed) .userbar .uname {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
  }
  #hud .hud-profile:not(.profile-collapsed) #btnFriends {
    min-width:0;min-height:23px;
    padding:3px 4px;font-size:9px;
    white-space:nowrap;
  }
  #hud .hud-profile:not(.profile-collapsed) #btnMenu {
    display:grid;place-items:center;
    box-sizing:border-box;
    width:26px;min-width:0;min-height:23px;
    padding:0;font-size:16px;line-height:1;
  }
  #hud .hud-profile:not(.profile-collapsed) .hud-metrics {
    display:grid;
    grid-template-columns:minmax(0,1fr) 39px 60px;
    gap:3px;
    align-items:stretch;
  }
  #hud .hud-profile:not(.profile-collapsed) .hud-metrics > * {
    box-sizing:border-box;
    width:100%;min-width:0;height:27px;
    margin:0;padding:3px 4px;gap:3px;
    border-radius:8px;
    overflow:hidden;
  }
  #hud .hud-profile:not(.profile-collapsed) .wallet b {
    min-width:0;
    overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
  }
  #hud .hud-profile:not(.profile-collapsed) .coin-ico {width:13px;height:13px;flex-shrink:0}
  #hud .hud-profile:not(.profile-collapsed) .coin-unit {display:none}
  #hud .hud-profile:not(.profile-collapsed) .hud-metrics img {width:15px;height:15px;flex-shrink:0}
  #hud .hud-profile:not(.profile-collapsed) .hud-metrics #bagCount,
  #hud .hud-profile:not(.profile-collapsed) .hud-metrics #stomachPct {
    font-size:10px;white-space:nowrap;
  }
}

/* Mobile profile: compact, overflow-safe; leave other HUD and desktop untouched. */
@media (pointer:coarse), (max-width:700px) {
  #hud .hud-profile:not(.profile-collapsed) {
    box-sizing:border-box;
    width:min(208px,calc(100vw - var(--hud-map-width) - var(--hud-gap)*3 - env(safe-area-inset-left) - env(safe-area-inset-right)))!important;
    padding:5px 6px!important;
    gap:3px!important;
    border-radius:11px;
  }
  #hud .hud-profile:not(.profile-collapsed) .clock-time {font-size:17px;line-height:1}
  #hud .hud-profile:not(.profile-collapsed) .clock-sub {font-size:8px;margin-top:2px;line-height:1.1}
  #hud .hud-profile:not(.profile-collapsed) #clockPanel {padding-right:61px!important}
  #hud .hud-profile:not(.profile-collapsed) .userbar {
    box-sizing:border-box;
    display:grid!important;
    grid-template-columns:18px minmax(0,1fr) minmax(0,45px) 23px!important;
    width:100%;min-width:0;max-width:100%;
    gap:2px!important;padding-top:3px!important;
    overflow:hidden;
  }
  #hud .hud-profile:not(.profile-collapsed) .userbar .avatar {width:18px;height:18px}
  #hud .hud-profile:not(.profile-collapsed) .userbar .uname {font-size:10px;min-width:0}
  #hud .hud-profile:not(.profile-collapsed) #btnFriends {
    box-sizing:border-box;max-width:100%;min-width:0;
    font-size:8px;padding:2px!important;min-height:21px;
    overflow:hidden;text-overflow:ellipsis;
  }
  #hud .hud-profile:not(.profile-collapsed) #btnMenu {
    box-sizing:border-box;width:23px;min-width:0;max-width:23px;
    min-height:21px;padding:0!important;font-size:14px;
    display:grid;place-items:center;
  }
  #hud .hud-profile:not(.profile-collapsed) .hud-metrics {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 33px 51px!important;
    box-sizing:border-box;width:100%;max-width:100%;min-width:0;
    gap:3px!important;
  }
  #hud .hud-profile:not(.profile-collapsed) .hud-metrics > * {
    box-sizing:border-box;width:100%;max-width:100%;min-width:0;
    height:25px!important;margin:0!important;padding:2px 3px!important;
    gap:2px!important;overflow:hidden;
  }
  #hud .hud-profile:not(.profile-collapsed) .wallet b {font-size:12px;min-width:0}
  #hud .hud-profile:not(.profile-collapsed) .coin-ico {width:12px;height:12px}
  #hud .hud-profile:not(.profile-collapsed) .hud-metrics img {width:13px;height:13px}
  #hud .hud-profile:not(.profile-collapsed) #bagCount,
  #hud .hud-profile:not(.profile-collapsed) #stomachPct {font-size:9px}
  #hud .hud-profile:not(.profile-collapsed) .profile-toggle {
    top:4px;right:4px;font-size:8px;padding:2px 4px;min-height:20px;
  }
}

/* Hide legacy background-music control if cached/older UI still injects it. */
#hud #hudFunctions > #btnMusic,
#hud #hudFunctions > #btnToggleMusic,
#hud #hudFunctions > button[title*="nhạc" i],
#hud #hudFunctions > button[aria-label*="nhạc" i] {display:none!important}

/* Mobile compact mode is one row: bag, stomach, golden countdown and expand. */
@media (pointer:coarse), (max-width:700px) {
  #hud .hud-profile.profile-collapsed {
    box-sizing:border-box;display:flex!important;align-items:center;flex-wrap:nowrap;
    width:max-content!important;max-width:calc(100vw - var(--hud-map-width) - var(--hud-gap)*3 - env(safe-area-inset-left) - env(safe-area-inset-right));
    min-width:0!important;min-height:32px;padding:3px!important;gap:3px!important;border-radius:11px;
  }
  #hud .hud-profile.profile-collapsed #clockPanel,
  #hud .hud-profile.profile-collapsed .userbar,
  #hud .hud-profile.profile-collapsed #redAlert {display:none!important}
  #hud .hud-profile.profile-collapsed .hud-metrics {
    display:flex!important;flex:0 1 auto;order:1;width:auto!important;min-width:0;gap:3px!important;
  }
  #hud .hud-profile.profile-collapsed .hud-metrics #btnBag,
  #hud .hud-profile.profile-collapsed .hud-metrics #btnStomach {
    flex:0 1 auto;width:auto!important;min-width:0!important;min-height:26px;height:26px;
    padding:3px 4px!important;gap:2px;font-size:10px!important;border-radius:7px;
  }
  #hud .hud-profile.profile-collapsed .hud-metrics img {width:14px;height:14px}
  #hud .hud-profile.profile-collapsed #bagCount {max-width:22px;overflow:hidden;text-overflow:ellipsis;font-size:10px}
  #hud .hud-profile.profile-collapsed #stomachPct {font-size:10px}
  #hud .hud-profile.profile-collapsed #goldenBar:not(.hidden) {
    display:flex!important;order:2;flex:0 0 auto;width:auto!important;min-width:37px;height:26px;
    box-sizing:border-box;padding:3px 4px!important;margin:0;gap:0;flex-wrap:nowrap;border-radius:7px;
  }
  #hud .hud-profile.profile-collapsed #goldenBar > :not(#goldenTime) {display:none!important}
  #hud .hud-profile.profile-collapsed #goldenTime {display:block;font-size:10px;font-weight:800;line-height:18px}
  #hud .hud-profile.profile-collapsed .profile-toggle {
    position:static!important;order:3;flex:0 0 24px;width:24px;min-width:24px;height:26px;
    min-height:26px;font-size:0;padding:0;border-radius:7px;
  }
  #hud .hud-profile.profile-collapsed .profile-toggle::after {content:'⌄';font:800 17px/1 system-ui}
}