:root {
  --hg-iron-950: #0c0a07;
  --hg-iron-900: #15130f;
  --hg-iron-800: #24211b;
  --hg-bronze-500: #a8783e;
  --hg-bronze-300: #d4b16d;
  --hg-blue-400: #57bce9;
  --hg-red-400: #ef625c;
  --hg-gold-400: #f0c45e;
  --hg-panel: linear-gradient(180deg, rgba(40, 36, 29, .96), rgba(14, 13, 10, .96));
  --hg-panel-border: 1px solid rgba(212, 177, 109, .48);
  --hg-panel-shadow: 0 -8px 24px rgba(0, 0, 0, .34), inset 0 1px rgba(255,255,255,.06);
}

/* 실제 기능 UI가 들어올 때 재사용할 웹 경량형 스킨. 별도 래스터 프레임을 쓰지 않는다. */
.hg-panel {
  border: var(--hg-panel-border);
  border-radius: 10px;
  background: var(--hg-panel);
  box-shadow: var(--hg-panel-shadow);
}

.hg-button {
  min-width: 56px;
  min-height: 56px;
  border: 1px solid rgba(212, 177, 109, .55);
  border-radius: 9px;
  background: linear-gradient(180deg, #302b22, #14120e);
  color: #e8e0d2;
  box-shadow: inset 0 1px rgba(255,255,255,.11), inset 0 0 0 1px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.4);
}

.hg-button:active { transform: translateY(1px); filter: brightness(1.12); }
.hg-button[disabled] { filter: grayscale(.7) brightness(.6); }

.hg-recharge-ring {
  border-radius: 50%;
  background: conic-gradient(var(--hg-blue-400) var(--progress, 0%), #070807 0);
  -webkit-mask: radial-gradient(circle, transparent 53%, #000 55%);
  mask: radial-gradient(circle, transparent 53%, #000 55%);
}