/* Năm ô dùng nhanh. Không có khung lớn; từng ô bo góc, giống mẫu tham khảo.
   PC: dưới giữa. Bố cục mobile mới được joystick.css điều chỉnh để chừa cần tròn. */
.quickbar{--slot-size:68px;--slot-gap:10px;position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);display:grid;grid-template-columns:repeat(5,var(--slot-size));gap:var(--slot-gap);z-index:14;pointer-events:auto;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.hotbar-slot{position:relative;box-sizing:border-box;width:var(--slot-size);height:var(--slot-size);padding:8px 8px 16px;display:flex;align-items:center;justify-content:center;border:1px solid #9bbaca6b;border-radius:16px;background:#142a3bd1;color:#fff;box-shadow:0 3px 12px #07152444;backdrop-filter:blur(6px);cursor:pointer;touch-action:manipulation;font:inherit;transition:border-color .15s,background-color .15s,box-shadow .15s}
.hotbar-slot:hover{background:#27465be6;border-color:#b4e6dd}.hotbar-slot:focus-visible{outline:2px solid #acf3df;outline-offset:2px}.hotbar-slot:active,.hotbar-slot.just-used{background:#255a57e6;border-color:#9ef0c5;box-shadow:0 0 0 2px #a2ebcd55}
.hotbar-key{position:absolute;bottom:5px;right:9px;font-size:15px;line-height:18px;font-weight:750;text-shadow:0 1px 3px #0007}
.hotbar-item{display:grid;place-items:center;width:43px;height:43px;pointer-events:none}.hotbar-item svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 1px #07152444)}
.hotbar-quantity{position:absolute;right:5px;top:4px;min-width:17px;padding:1px 4px;border-radius:5px;background:#0a1b2dc9;color:#e7fbf3;font-size:10px;font-weight:700;line-height:14px;pointer-events:none}
.hotbar-slot.is-empty{background:#1e2b3bad;border-color:#a4bfcb55}.hotbar-slot.is-depleted .hotbar-item{opacity:.35}.hotbar-slot.is-depleted .hotbar-quantity{color:#ffd0cd}
body:not(.in-game) .quickbar,.keyboard-open .quickbar{display:none}.transaction-busy .hotbar-slot{opacity:.65;cursor:wait}
@media(max-width:1050px) and (min-width:801px){.quickbar{--slot-size:58px;--slot-gap:7px}}
@media(max-width:800px),(pointer:coarse){
 .quickbar{--slot-size:clamp(44px,12vw,56px);--slot-gap:6px;bottom:max(12px,env(safe-area-inset-bottom))}
 .hotbar-slot{border-radius:12px;padding:5px 5px 14px}.hotbar-key{font-size:12px;line-height:14px;bottom:3px;right:6px}.hotbar-item{width:32px;height:32px}.hotbar-quantity{font-size:9px;line-height:11px;right:3px;top:3px;padding:1px 3px}
 .left-status-stack{bottom:210px}.actions{bottom:210px}
 .mobile-controls [data-key="arrowup"]{bottom:128px}
 .mobile-controls [data-key="arrowleft"],.mobile-controls [data-key="arrowdown"],.mobile-controls [data-key="arrowright"]{bottom:78px}
 .mobile-controls #interact{bottom:78px}.mobile-controls .sprint-button{bottom:143px}
 .hud-tools{max-height:calc(100% - 370px)}
}
@media(orientation:landscape) and (max-height:550px){
 .quickbar{--slot-size:48px;--slot-gap:6px;bottom:126px}
 .left-status-stack{bottom:12px}.actions{bottom:12px}
 .mobile-controls [data-key="arrowup"]{bottom:62px}
 .mobile-controls [data-key="arrowleft"],.mobile-controls [data-key="arrowdown"],.mobile-controls [data-key="arrowright"]{bottom:12px}
 .mobile-controls #interact{bottom:18px}.mobile-controls .sprint-button{bottom:83px}
 .hud-tools{max-height:calc(100% - 208px)}
}
@media(prefers-reduced-motion:reduce){.hotbar-slot{transition:none}}

/* Thông báo dùng đồ không chặn chạm hoặc phủ lên phím di chuyển. */
#toast.toast{pointer-events:none}
@media(max-width:800px),(pointer:coarse){#toast.toast{top:calc(50% - 90px);bottom:auto;left:60px;right:60px;max-width:none}}
@media(orientation:landscape) and (max-height:550px){#toast.toast{top:calc(50% - 80px);left:180px;right:170px;max-width:none}}

/* UI thanh 5 ô hình thoi viền bạc: chỉ thay đổi giao diện, không thay logic. */
.quickbar{--slot-size:74px;--slot-gap:10px;align-items:center}
.hotbar-slot,
.hotbar-slot.is-empty{
  isolation:isolate;overflow:visible;
  border:0!important;border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;backdrop-filter:none!important;
  padding:8px 8px 14px;
}
.hotbar-slot::before{
  content:"";position:absolute;inset:15%;z-index:-1;
  transform:rotate(45deg);transform-origin:center;
  border:2px solid #cbd2d9;border-radius:2px;
  background:linear-gradient(145deg,rgba(35,42,49,.97) 0%,rgba(8,11,15,.97) 52%,rgba(21,25,30,.96) 100%);
  box-shadow:0 2px 0 #242d36,0 0 0 1px #0a131b,0 6px 12px #02070bc4,
             inset 0 0 0 2px #283139,inset 0 1px 10px #ffffff09;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.hotbar-slot:hover::before,.hotbar-slot:focus-visible::before{
  border-color:#fff;box-shadow:0 0 0 1px #0a131b,0 0 14px #d6f3fa77,inset 0 0 0 2px #46525d;
}
.hotbar-slot:active::before,.hotbar-slot.just-used::before{
  background:linear-gradient(145deg,#21564b,#0c2428);
  border-color:#9ff4d5;
}
.hotbar-slot.is-depleted::before{border-color:#828c95}
.hotbar-key{
  bottom:-1px;right:2px;z-index:2;font-size:19px;font-weight:800;
  line-height:22px;color:#fff;text-shadow:1px 2px 1px #000, -1px -1px 1px #000,0 0 5px #000;
}
.hotbar-item{position:relative;z-index:1;width:37px;height:37px}
.hotbar-quantity{z-index:3;top:6px;right:4px}
.hotbar-slot:focus-visible{outline:none}
@media(max-width:1050px) and (min-width:801px){.quickbar{--slot-size:64px;--slot-gap:8px}}
@media(max-width:800px),(pointer:coarse){
  .quickbar{--slot-size:clamp(41px,11.8vw,55px);--slot-gap:clamp(2px,1.5vw,7px)}
  .hotbar-slot{padding:4px 4px 12px}
  .hotbar-slot::before{inset:17%;border-width:1.5px}
  .hotbar-key{font-size:13px;line-height:16px;right:0;bottom:-1px}
  .hotbar-item{width:28px;height:28px}
  .hotbar-quantity{right:1px;top:2px}
}
@media(orientation:landscape) and (max-height:550px){
  .quickbar{--slot-size:45px;--slot-gap:5px}
  .hotbar-slot::before{inset:17%}
}

/* Thanh xăng của ghế lái luôn đi cùng vị trí thanh 1–5 khi đổi hướng màn hình. */
.vehicle-fuel-hud{--fuel-color:#80dca5;position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);width:min(244px,calc(100% - 12px));box-sizing:border-box;padding:7px 10px 8px;border:1px solid #bac9d0;border-radius:7px;background:linear-gradient(145deg,#202b33ed,#080e15f2);box-shadow:0 2px 8px #0009,inset 0 0 0 2px #ffffff09;color:#f1f7fa;pointer-events:none;font-family:system-ui,sans-serif}
.vehicle-fuel-hud[hidden]{display:none!important}
#vehicle-seat-toggle{position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%);display:grid;place-items:center;width:40px;height:40px;min-width:0;min-height:0;margin:0;padding:7px;pointer-events:auto;touch-action:manipulation;cursor:pointer}
#vehicle-seat-toggle[hidden]{display:none!important}
.vehicle-seat-icon{display:block;width:24px;height:24px;pointer-events:none}
.vehicle-seat-lock{position:absolute;right:2px;bottom:2px;width:12px;height:12px;pointer-events:none}
#vehicle-seat-toggle .seat-unlocked,#vehicle-seat-toggle[aria-pressed="true"] .seat-locked{display:none}
#vehicle-seat-toggle[aria-pressed="true"] .seat-unlocked{display:block}

.vehicle-fuel-heading{display:flex;align-items:center;gap:6px;line-height:16px;margin-bottom:5px;white-space:nowrap}
.vehicle-fuel-heading svg{flex:none;width:16px;height:16px;color:var(--fuel-color)}
#vehicle-fuel-label{font-size:10px;font-weight:750;letter-spacing:.4px;overflow:hidden;text-overflow:ellipsis}
#vehicle-fuel-value{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums;color:var(--fuel-color)}
.vehicle-fuel-track{height:6px;overflow:hidden;border-radius:3px;background:#050a0f;box-shadow:inset 0 0 0 1px #ffffff24}
#vehicle-fuel-fill{display:block;width:100%;height:100%;border-radius:inherit;background:var(--fuel-color);box-shadow:0 0 6px var(--fuel-color);transition:width .15s linear}
.vehicle-fuel-hud.is-low{--fuel-color:#ffd16f}.vehicle-fuel-hud.is-empty{--fuel-color:#ff8084}
@media(max-width:800px),(pointer:coarse){.vehicle-fuel-hud{width:min(222px,calc(100% - 8px));bottom:calc(100% + 8px);padding:6px 9px 7px}.vehicle-fuel-heading{margin-bottom:4px}#vehicle-fuel-label{font-size:9px;letter-spacing:.25px}}
@media(prefers-reduced-motion:reduce){#vehicle-fuel-fill{transition:none}}

@media(orientation:portrait) and (max-width:800px),(orientation:portrait) and (pointer:coarse){body.vehicle-fuel-visible .canvas-wrap .left-status-stack,body.vehicle-fuel-visible .canvas-wrap .actions{bottom:calc(128px + env(safe-area-inset-bottom))!important}}

/* Owned inventory and personal garage share one compact, responsive grid. */
#panel.owned-grid-panel .panel-card{width:100%;max-width:620px;box-sizing:border-box}
.owned-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:3px}
#panel .owned-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;min-width:0;min-height:174px;padding:12px 9px;white-space:normal;overflow-wrap:anywhere;text-align:center;cursor:pointer;touch-action:manipulation}
#panel .owned-tile-art{display:flex;flex:none;align-items:center;justify-content:center;width:100%;height:90px;pointer-events:none}
#panel .owned-tile-art .shop-item-image{width:76px;height:76px;object-fit:contain;margin:0}
#panel .owned-tile-art .vehicle-shop-preview{width:100%;max-width:150px;height:90px;object-fit:contain;margin:0}
.owned-tile>strong{font-size:14px;line-height:1.3}.owned-tile>small{display:block;font-size:12px;line-height:1.35;margin:0}
.owned-tile-action{display:block;margin-top:auto;padding-top:5px;font-size:12px;font-weight:700}
.owned-quantity,.owned-slot-badge{position:absolute;padding:3px 6px;border:1px solid;border-radius:6px;font-size:11px;line-height:1.2;font-weight:700}
.owned-quantity{right:6px;top:6px}.owned-slot-badge{left:6px;top:6px}
.inventory-slot-picker{display:flex;flex-direction:column;gap:14px}.inventory-back{align-self:flex-start;min-height:40px;padding:8px 12px}
#panel .inventory-selected{display:flex;align-items:center;gap:14px;min-width:0}.inventory-selected .shop-item-image{width:72px;height:72px;object-fit:contain;flex:none}
.inventory-selected strong{display:block;font-size:17px}.inventory-selected small{display:block;margin-top:5px;font-size:13px}
.inventory-slot-picker h3{font-size:17px;line-height:1.4;margin:0}.inventory-slot-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:3px}
#panel .inventory-slot-choice{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-width:0;min-height:116px;padding:9px 4px;white-space:normal;overflow-wrap:anywhere;font-size:11px;line-height:1.3}
.inventory-slot-choice b{font-size:14px}.inventory-slot-icon{width:32px;height:32px;display:grid;place-items:center}.inventory-slot-icon svg{width:100%;height:100%}
.inventory-clear{align-self:center;min-height:40px;padding:8px 14px}
.transaction-busy #panel .owned-tile,.transaction-busy #panel .inventory-slot-choice,.transaction-busy #panel .inventory-clear{pointer-events:none}
@layer rp-theme{
 #panel.owned-grid-panel .owned-tile,#panel .inventory-slot-choice{background:var(--ui-raised)!important;color:var(--ui-text)!important;box-shadow:none!important}
 #panel.owned-grid-panel .owned-tile:hover:not(:disabled),#panel .inventory-slot-choice:hover:not(:disabled){background:#30291f!important}
 #panel .inventory-slot-choice[aria-pressed="true"]{background:#554329!important;box-shadow:inset 0 0 0 1px var(--ui-gold-soft)!important}
 #panel .owned-tile-art :is(.shop-item-image,.vehicle-shop-preview){background:transparent!important;border:0!important}
 #panel .owned-quantity,#panel .owned-slot-badge{background:#101114!important;color:var(--ui-gold-soft)!important}
 #panel .owned-tile-action{color:var(--ui-gold-soft)!important}
}
@media(max-width:520px){
 #panel.owned-grid-panel .panel-card{padding:16px;max-width:380px}
 .owned-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 #panel .owned-tile{min-height:156px;padding:10px 6px}.owned-tile-art{height:76px}
 #panel .owned-tile-art .vehicle-shop-preview{height:76px}.owned-tile>strong{font-size:13px}
 .inventory-slot-grid{gap:5px}#panel .inventory-slot-choice{min-height:112px;font-size:10px;padding:8px 2px}
 .inventory-slot-choice b{font-size:12px}.inventory-slot-picker h3{font-size:16px}
}