/* Clean HUD: world first. Minimap + menu top-right, hotbar above EXP, edge HP/MP bars, glass chat. */
:root{--hotbar-slot:46px;--hotbar-gap:4px}

/* Minimap top-right, menu row beside it */
.map-card{top:14px;right:22px;bottom:auto;width:180px;padding:8px;border-radius:0;background:transparent;border:0;box-shadow:none;backdrop-filter:none}
.map-card::before{display:none}
.map-card canvas{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:50%;border:0;background:transparent}
.map-card .section-title{margin-bottom:6px;padding:4px 6px;border-radius:6px;background:#0b1513b8;color:#f0e2c0;text-shadow:0 1px 2px #000;font-size:10px}
.hud-menu{position:absolute;top:14px;right:212px;display:flex;flex-direction:row;gap:6px;z-index:var(--z-menu)}
.hud-menu button,.hud-menu #travel-btn{min-width:0;width:34px;height:34px;padding:0;display:grid;place-items:center;font:16px Georgia,"Noto Sans Thai",serif;color:#e6d3a6;border:1px solid #c8ae7240;border-radius:8px;background:#0b1513b8;backdrop-filter:blur(8px)}
.hud-menu button:hover{background:#26362ccc;border-color:#d7b980aa}

/* Cards that only appear when relevant move up into the freed space */
.party-card{top:14px;left:22px}
.target-card,#boss-bar{top:14px}

/* Glass chat */
#game .chat-panel{background:#050c0b73;border:1px solid #ffffff0d;box-shadow:none;backdrop-filter:none;border-radius:8px}
#game .chat-panel .chat-tabs button{background:transparent;border-color:transparent;color:#cfc6b2}
#game .chat-panel .chat-tabs button[aria-selected=true]{background:#ffffff12;border-color:transparent;color:#ecd39c}
#game .chat-panel input{background:#00000040;border-color:#ffffff1a}
#game .chat-panel .chat-toggle,#game .chat-panel .chat-form button{background:#00000040;border-color:#ffffff1a}
#game .chat-panel .chat-list{text-shadow:0 1px 2px #000}

/* Hotbar: 12 slots mapped to 1 … = sitting on the EXP bar */
.hotbar{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:var(--z-control);display:grid;grid-template-columns:repeat(12,var(--hotbar-slot));gap:var(--hotbar-gap);padding:4px;border-radius:10px;background:#050c0b8c;border:1px solid #ffffff10;backdrop-filter:blur(6px)}
.hotbar .slot{position:relative;width:var(--hotbar-slot);height:var(--hotbar-slot);padding:0;overflow:hidden;border-radius:7px;border:1px solid #c8ae7238;background:linear-gradient(#22322acc,#0c1714e6)}
.hotbar .slot:hover:not(:disabled){border-color:#e3c78baa;background:linear-gradient(#34483bcc,#13221ce6)}
.hotbar .slot:disabled{opacity:1}
.hotbar .slot.empty{background:#0a121066;border-style:dashed;border-color:#ffffff14}
.hotbar .slot.skill:disabled .slot-icon,.hotbar .slot.item:disabled .slot-icon{opacity:.45}
.hotbar kbd{position:absolute;left:4px;bottom:2px;z-index:var(--z-local-label);font:600 9px "Noto Sans Thai",Tahoma,system-ui;color:#d9c9a3;text-shadow:0 1px 2px #000}
.hotbar .slot.empty kbd{color:#ffffff40}
.hotbar .slot-icon{display:grid;place-items:center;height:100%;font:22px Georgia,"Noto Sans Thai",serif;color:#e6cf9b}
.hotbar .cost{position:absolute;top:2px;right:4px;font-size:8px;color:#8fc4dc;text-shadow:0 1px 2px #000}
.hotbar .count{position:absolute;right:4px;bottom:2px;font-size:9px;color:#f3e6c8;text-shadow:0 1px 2px #000}
.hotbar .cooldown{position:absolute;inset:0;z-index:var(--z-local-overlay);display:grid;place-items:center;background:#050c0bb8;color:var(--gold);font-size:13px}
.hotbar .skill-lock{position:absolute;inset:0;z-index:var(--z-local-overlay);display:grid;place-items:center;background:#050c0be0;color:#bfae88;font-size:10px}
.hotbar .interrupt-badge{position:absolute;top:2px;left:3px;font-size:10px}

/* Contextual E prompt: only exists while something is interactable */
.interact-prompt{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);z-index:var(--z-control);display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;font-size:11px;color:#f0e2c0;border:1px solid #d7b98055;border-radius:999px;background:#07100ecc;backdrop-filter:blur(6px)}
.interact-prompt kbd{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:#d7b980;color:#1a1408;font:700 10px "Noto Sans Thai",Tahoma,system-ui}

.cast-panel{bottom:136px}
#zone-banner{top:30%}

@media(max-width:1100px){:root{--hotbar-slot:40px}.interact-prompt{bottom:90px}.cast-panel{bottom:130px}}
@media(max-width:750px){
  :root{--hotbar-slot:min(46px,calc((100vw - 60px) / 6))}
  .hotbar{grid-template-columns:repeat(6,var(--hotbar-slot));bottom:26px}
  .map-card{top:10px;right:12px;width:120px;padding:6px}
  .hud-menu{top:10px;right:138px;gap:5px}
  .hud-menu button,.hud-menu #travel-btn{width:30px;height:30px;font-size:14px}
  .party-card{top:10px;left:20px}
  .target-card{top:auto;bottom:calc(2 * var(--hotbar-slot) + 90px)}
  .interact-prompt{bottom:calc(2 * var(--hotbar-slot) + 46px)}
  .cast-panel{bottom:calc(2 * var(--hotbar-slot) + 84px)}
  #joystick{bottom:calc(2 * var(--hotbar-slot) + 50px);left:24px}
  #boss-bar{top:150px}
  #game .chat-panel[data-compact=true]{left:22px}
  #game .chat-panel[data-compact=true].chat-collapsed{left:auto;right:22px}
}
@media(max-height:550px) and (min-width:751px){.map-card{top:10px;width:150px}.hud-menu{top:10px;right:180px}}
@media(max-height:510px) and (max-width:750px){.hotbar{grid-template-columns:repeat(12,var(--hotbar-slot));--hotbar-slot:min(34px,calc((100vw - 90px) / 12))}#joystick{bottom:76px}.interact-prompt{bottom:70px}.cast-panel{bottom:110px}.target-card{bottom:auto;top:10px}}

/* Compact EXP rail and cursor-local world information. */
#game .experience-card{height:12px}
#game .experience-card #xp-text{line-height:11px;font-size:8px;letter-spacing:.3px}
#game .resource-card{bottom:12px}
#game .target-card{display:none}
#world-hover{position:absolute;z-index:var(--z-tooltip);max-width:calc(100% - 8px);padding:6px 9px;border:1px solid #d7b98066;border-radius:6px;background:#0b1513ed;color:#f0e2c0;font-size:11px;pointer-events:none}

.hotbar .slot.ready{border-color:#a5dcaf;box-shadow:0 0 9px #a5dcaf66}

/* Keep the controls required for the equipment/profession/war loop visible. */
#game .hud-menu button:not(#settings-btn):not(#character-btn):not(#bag-btn):not(#catalog-btn):not(#war-btn):not(#skills-btn):not(#feedback-btn):not(#fullscreen-btn):not(#friends-btn),
#game #gold-text{display:none !important}