/* =========================================================
   hud.css —— 右上角功能按钮、左下角适龄提示、右下角版本号
   这些元素贴住屏幕四角（不跟随中央舞台），尺寸仍按 --u 缩放
   ========================================================= */

.hud-top-right {
  position: absolute;
  top: calc(30 * var(--u));
  right: calc(12 * var(--u));
  width: calc(104 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--u));
}

.hud-btn {
  display: block;
  transition: transform .15s ease, filter .15s ease;
}

.hud-btn img { width: 100%; height: auto; }

.hud-btn--service { width: calc(104 * var(--u)); }
.hud-btn--notice  { width: calc(93 * var(--u)); }

.hud-btn:hover  { transform: scale(1.06); filter: brightness(1.1); }
.hud-btn:active { transform: scale(.92); }

/* 适龄提示：左下角 */
.age-tip {
  position: absolute;
  left: calc(26 * var(--u));
  bottom: calc(33 * var(--u));
  width: calc(93 * var(--u));
  height: auto;
  filter: drop-shadow(0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.3));
}

/* 版本号：右下角 */
.version {
  position: absolute;
  right: calc(22 * var(--u));
  bottom: calc(28 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  text-shadow:
    0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(10, 40, 30, 0.9),
    0 0 calc(4 * var(--u)) rgba(10, 40, 30, 0.6);
}