/* Xcess Origins mobile: tap/click-to-move, no virtual joystick.
   Desktop keeps the original lower HUD and two HP/MP orbs. */
#mobile-vitals { display: none; }
#mobile-journal-btn { display: none; }

/* Objective chip: a small, expandable prompt rather than a second HUD. */
#game-ui #quest-tracker { pointer-events: auto; overflow: hidden; }
#game-ui #quest-tracker .quest-expand {
  position: absolute; inset: 0 auto auto 0; width: 100%; height: 32px;
  opacity: 0; cursor: pointer; pointer-events: auto;
}
#game-ui #quest-tracker .quest-expand:focus-visible {
  opacity: 1; outline: 2px solid #ffe2a2; outline-offset: -3px;
  background: rgba(240,202,129,.12);
}
#game-ui #quest-tracker.is-collapsed .tracker-objective { display: none; }
#game-ui #quest-tracker.is-collapsed .tracker-progress { height: 2px; }
#game-ui #quest-tracker #quest-title { padding-right: 22px; }
#game-ui #quest-tracker #quest-title::after {
  content: "⌄"; position: absolute; right: 9px; top: 7px;
  color: #ead5a4; font-size: 15px;
}
#game-ui #quest-tracker.is-collapsed #quest-title::after { content: "›"; }

@media (max-width: 760px) {
  html,body { overscroll-behavior: none; }
  #game-container canvas { touch-action: none; }
  #game-ui { font-family: Arial,sans-serif; }
  #game-ui #brand-chip, #game-ui #asset-status { display: none !important; }

  /* Top bar: identity, visible HP and MP, and direct action icons. */
  #game-ui #hud {
    position: absolute; top: 0; bottom: auto; left: 0; right: 0;
    z-index: 120; box-sizing: border-box;
    height: calc(98px + env(safe-area-inset-top));
    padding: calc(5px + env(safe-area-inset-top)) 7px 4px;
    display: grid; grid-template-columns: minmax(82px, 33%) minmax(0, 1fr);
    grid-template-rows: 42px 42px; gap: 3px 7px;
    border-top: 0; border-bottom: 1px solid rgba(214,173,85,.58);
    background: linear-gradient(180deg,rgba(3,8,14,.97),rgba(12,20,30,.96));
    box-shadow: 0 8px 22px rgba(0,0,0,.66);
    pointer-events: auto;
  }
  #game-ui #hud .orb { display: none !important; }
  #game-ui #hud-center {
    position: relative; top: auto; left: auto; bottom: auto; right: auto;
    transform: none; grid-column: 1; grid-row: 1; min-width: 0;
    width: 100%; max-width: none; text-align: left; align-self: center;
    overflow: hidden;
  }
  #game-ui #hud-name {
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #game-ui #hud-meta { margin-top: 2px; font-size: 9px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #game-ui #hud-gold { margin-top: 2px; font: 9px Arial,sans-serif; }

  #game-ui #mobile-vitals {
    display: grid; grid-column: 2; grid-row: 1; gap: 3px;
    min-width: 0; align-self: center;
  }
  #game-ui .mobile-vital {
    display: flex; align-items: center; gap: 5px; min-width: 0; height: 17px;
  }
  #game-ui .mobile-vital-icon { flex: 0 0 15px; text-align: center; font-size: 14px; }
  #game-ui .mobile-vital.hp .mobile-vital-icon { color: #f77881; }
  #game-ui .mobile-vital.mp .mobile-vital-icon { color: #81aaff; }
  #game-ui .mobile-vital-track {
    height: 9px; min-width: 0; flex: 1 1 auto; overflow: hidden;
    border: 1px solid #343d4a; border-radius: 3px; background: #080d14;
  }
  #game-ui .mobile-vital-fill { height: 100%; width: 100%; transition: width .2s; }
  #game-ui .mobile-vital.hp .mobile-vital-fill { background: linear-gradient(90deg,#8f202a,#ed5662); }
  #game-ui .mobile-vital.mp .mobile-vital-fill { background: linear-gradient(90deg,#2451a8,#6d9df2); }
  #game-ui .mobile-vital-value {
    flex: 0 0 58px; min-width: 0; text-align: right; color: #d8e0eb;
    font: 10px Arial,sans-serif; font-variant-numeric: tabular-nums;
  }

  #game-ui #exp-track { top: auto; bottom: 0; height: 3px; }
  #game-ui #hud-actions {
    display: flex !important; position: relative; grid-column: 1 / -1;
    grid-row: 2; top: auto; left: auto; right: auto; bottom: auto;
    width: 100%; height: 42px; margin: 0; padding: 0;
    gap: 4px; align-items: stretch; justify-content: space-between;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; white-space: nowrap;
  }
  #game-ui #hud-actions::-webkit-scrollbar { display: none; }
  #game-ui #hud-actions .hud-group { display: contents !important; }
  #game-ui #hud-actions .hud-btn {
    position: relative; display: flex; flex-direction: column;
    justify-content: center; align-items: center; gap: 0;
    flex: 1 0 38px; min-width: 38px; max-width: 54px; height: 42px;
    min-height: 42px; padding: 2px 3px; margin: 0;
    border: 1px solid rgba(215,182,110,.48); border-radius: 6px;
    background: linear-gradient(180deg,#213140,#0b141e);
    color: #e5d4a7; font-size: 0 !important; line-height: 1;
    letter-spacing: 0; text-transform: none; touch-action: manipulation;
  }
  #game-ui #hud-actions .hud-btn::before {
    content: attr(data-mobile-icon); display: block; font: 21px/1 Arial,sans-serif;
    min-height: 22px;
  }
  #game-ui #hud-actions .hud-btn::after {
    content: attr(data-mobile-label); display: block;
    font: 8px/1.2 Arial,sans-serif; color: #c3cfdb;
    white-space: nowrap;
  }
  #game-ui #hud-actions .hud-btn:focus-visible {
    outline: 2px solid #e8ca79; outline-offset: -2px;
  }
  #game-ui #hud-actions #mobile-journal-btn { display: flex; }
  #game-ui #hud-actions #auto-attack-btn.enabled {
    border-color: #8de0aa; background: linear-gradient(180deg,#1d4a3a,#0b241d);
  }
  #field-journal-trigger { display: none !important; }

  /* The radar and objective move below the status/action bar. */
  #game-ui #quest-tracker {
    top: calc(106px + env(safe-area-inset-top)) !important;
    left: max(7px, env(safe-area-inset-left)); width: min(184px, 49vw);
    padding: 0; border: 1px solid rgba(205,176,108,.37);
    border-radius: 5px; background: rgba(5,11,18,.84);
  }
  #game-ui #quest-title { padding: 7px 21px 7px 8px; margin: 0; font-size: 10px; line-height: 1.25; }
  #game-ui #quest-tracker .tracker-objective { margin: 0; padding: 0 8px 7px; font-size: 10px; }
  #game-ui #quest-tracker .tracker-progress { margin: 0; }
  #game-ui #minimap-wrap {
    top: calc(105px + env(safe-area-inset-top));
    right: max(7px, env(safe-area-inset-right)); width: 99px; padding: 5px;
    transform: none; background: rgba(5,12,16,.83);
  }
  #game-ui #minimap { width: 87px; height: 87px; }
  #game-ui #minimap-title { font-size: 8px; margin-bottom: 3px; }
  #game-ui #target-panel { top: calc(206px + env(safe-area-inset-top)); width: min(180px, 51vw); }
  #game-ui #system-log { display: none !important; }
  #game-ui #region-banner { top: calc(103px + env(safe-area-inset-top)); min-width: 0; padding: 6px 11px; }
  #game-ui #region-banner strong { font-size: 10px; }

  .side-panel {
    position: fixed !important; z-index: 215;
    top: calc(104px + env(safe-area-inset-top)) !important;
    bottom: auto !important; left: 50% !important; right: auto !important;
    transform: translateX(-50%) !important;
    width: min(95vw,390px) !important;
    max-height: calc(100dvh - 118px - env(safe-area-inset-top)) !important;
    padding: 12px !important; overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  .dialog-card { max-width: calc(100vw - 20px); max-height: 78dvh; overflow: auto; }
  .inventory-tooltip { right: auto; left: 0; top: auto; bottom: 100%; }
}
@media (max-width: 360px) {
  #game-ui #hud { grid-template-columns: minmax(73px,29%) minmax(0,1fr); gap: 2px 5px; padding-left: 5px; padding-right: 5px; }
  #game-ui #hud-actions { gap: 3px; }
  #game-ui #hud-actions .hud-btn { min-width: 36px; flex-basis: 36px; }
  #game-ui .mobile-vital-value { flex-basis: 52px; font-size: 9px; }
  #game-ui #minimap-wrap { width: 88px; }
  #game-ui #minimap { width: 76px; height: 76px; }
}
@media (max-width: 760px) and (orientation: landscape) and (max-height: 480px) {
  #game-ui #hud {
    height: calc(74px + env(safe-area-inset-top));
    grid-template-rows: 29px 34px; gap: 2px 6px; padding-top: calc(3px + env(safe-area-inset-top));
  }
  #game-ui #hud-actions { height: 34px; }
  #game-ui #hud-actions .hud-btn { height: 33px; min-height: 33px; }
  #game-ui #hud-actions .hud-btn::before { font-size: 17px; min-height: 18px; }
  #game-ui #hud-actions .hud-btn::after { font-size: 7px; }
  #game-ui #hud-name { font-size: 10px; }
  #game-ui #hud-meta,#game-ui #hud-gold { font-size: 8px; }
  #game-ui #mobile-vitals { gap: 1px; }
  #game-ui .mobile-vital { height: 13px; }
  #game-ui .mobile-vital-track { height: 7px; }
  #game-ui #quest-tracker { top: calc(78px + env(safe-area-inset-top)) !important; }
  #game-ui #minimap-wrap { top: calc(78px + env(safe-area-inset-top)); width: 86px; }
  #game-ui #minimap { width: 74px; height: 74px; }
  #game-ui #target-panel { top: calc(162px + env(safe-area-inset-top)); }
  .side-panel { top: calc(77px + env(safe-area-inset-top)) !important; max-height: calc(100dvh - 84px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  #game-ui .mobile-vital-fill { transition: none; }
}