/* Giao diện chung: HUD, thanh chỉ số, nhật ký và nút điều khiển. */
#hud {
  background: linear-gradient(#241d16ee, #171310ee);
  box-shadow: inset 0 0 0 1px #2a231d, 0 4px 14px #000a;
}

.bar {
  border: 1px solid #0008;
  box-shadow: inset 0 1px 2px #0008;
}

.bar i {
  box-shadow: inset 0 1px 0 #fff4;
  transition: width .15s;
}

#hp i {
  background: linear-gradient(#e0603f, #9a3322);
}

#mp i {
  background: linear-gradient(#7fd8c4, #3f8f80);
}

#xp i {
  background: linear-gradient(#f0c866, #b88a2e);
}

.v {
  background: radial-gradient(ellipse at center, transparent 48%, rgba(12, 8, 6, .72));
}

#hud {
  border: 1px solid #9a7a42;
  border-radius: 8px;
  backdrop-filter: blur(3px);
  box-shadow: 0 6px 18px #000a, inset 0 0 22px #5fb3a122, inset 0 0 0 1px #0007;
}

#hud b {
  letter-spacing: .04em;
  text-shadow: 0 0 8px #d9a44166;
}

.bar {
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
}

#log {
  font-size: 15px;
  letter-spacing: .02em;
  text-shadow: 0 1px 3px #000, 0 0 12px #d9a44155;
}

button {
  border-radius: 8px;
  background: linear-gradient(#2d241a, #171310);
  box-shadow: inset 0 1px 0 #ffffff12, 0 2px 6px #0008;
  transition: transform .12s, box-shadow .12s;
}

button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 0 14px #d9a44155, 0 4px 8px #0008;
}

button:active:not(:disabled) {
  transform: translateY(0);
}

.sk {
  border-radius: 12px;
}

.sk .ic {
  text-shadow: 0 0 8px currentColor;
}

#bt .go:not(:disabled) {
  animation: gl 1.6s ease-in-out infinite;
}

@keyframes gl {
  50% {
    box-shadow: 0 0 16px #d9a441aa;
  }
}

/* P0 mobile dock: phân tầng rõ để skill / nút / interact không đè nhau. */
#sb { z-index: 4; }
#bt { z-index: 4; }
#world-interact { z-index: 5; }
#aim-cancel { z-index: 6; }
#arena-status { z-index: 3; }
#log { z-index: 3; }

@media(max-width:700px){
  /* Hàng skill luôn trên cùng, giữa màn hình. */
  #sb{
    bottom: calc(76px + env(safe-area-inset-bottom,0px)) !important;
    gap: 8px !important;
  }
  #sb .sk{ width: 48px !important; height: 48px !important; }
  /* Cụm nút hành động thành 1 hàng cuộn ngang dưới cùng. */
  #bt{
    left: 8px !important; right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom,0px)) !important;
    display: flex !important; flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important; gap: 6px !important;
    max-width: none !important;
  }
  #bt button{ flex: 0 0 auto !important; min-height: 40px !important; font-size: 12px !important; padding: 6px 10px !important; }
  /* Nút tương tác E nằm trên hàng skill. */
  #world-interact{
    bottom: calc(140px + env(safe-area-inset-bottom,0px)) !important;
    font-size: 12px !important;
  }
  #aim-cancel{
    bottom: calc(198px + env(safe-area-inset-bottom,0px)) !important;
  }
  #log{
    top: auto !important;
    bottom: calc(238px + env(safe-area-inset-bottom,0px)) !important;
    font-size: 12px !important; padding: 0 90px 0 10px !important;
    text-align: left !important;
  }
  #arena-status{
    top: 96px !important; left: auto !important; right: 8px !important; transform: none !important;
    max-width: calc(100vw - 110px) !important;
    font-size: 11px !important; padding: 8px 10px !important;
  }
  #world-guide{ top: 184px !important; width: 150px !important; }
}