/* 무한 벽 부수기 HUD · 결과 — js/wall.js 가 #wallUi 안을 채운다. 글자는 Galmuri 격자(10/20 · 12/24 · 15/30)만. */
#wallUi { position: absolute; inset: 0; pointer-events: none; z-index: 6; }

/* 위: 부순 벽 · 남은 시간 · 오늘 남은 횟수 (코인·음소거 줄 아래) */
.wl-hud {
  position: absolute; top: calc(var(--st) + 52px); left: 16px; right: 16px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  color: #f5f8fc; pointer-events: none;
}
.wl-stat span { display: block; font: var(--t-small); color: #d3dce8; text-shadow: var(--pxo1); }
.wl-stat b { display: block; font: var(--t-btn); font-weight: 400; color: #f5f8fc; text-shadow: var(--pxo); margin-top: 2px; font-variant-numeric: tabular-nums; }
.wl-stat.r { text-align: right; }
.wl-time { position: relative; text-align: center; min-width: 96px; }
.wl-time b { font: var(--t-display); font-weight: 400; color: #f5f8fc; text-shadow: var(--pxo); font-variant-numeric: tabular-nums; }
.wl-time span { font: var(--t-btn); color: #f5f8fc; text-shadow: var(--pxo); margin-left: 2px; }
.wl-time.low b, .wl-time.low span { color: #ff7e56; animation: pxblink .5s steps(2) infinite; }
.wl-bonus {
  position: absolute; left: 0; right: 0; top: 40px;
  font: var(--t-btn); font-style: normal; color: #7ccf5a; text-shadow: var(--pxo);
  opacity: 0;
}
.wl-bonus.show { animation: wlbonus .9s steps(1) forwards; }
@keyframes wlbonus {
  0% { opacity: 1; transform: translateY(8px); }
  12% { transform: translateY(4px); }
  24% { transform: translateY(0); }
  80% { opacity: 1; transform: translateY(-4px); }
  90% { opacity: .5; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(-8px); }
}

/* 벽 HP 막대: 벽 바로 위 (left/top/width 는 JS 가 벽 자리에 맞춘다) */
.wl-hp { position: absolute; pointer-events: none; }
.wl-hp-lbl {
  display: flex; justify-content: space-between; align-items: flex-end;
  font: var(--t-body); color: #f5f8fc; text-shadow: var(--pxo1); margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.wl-hp-lbl span:first-child { color: #f0c040; }
.wl-hp-bar {
  height: 12px; padding: 2px;
  background: #14152b;
  box-shadow: 0 2px 0 #14152b;
}
.wl-hp-bar i {
  display: block; height: 100%; width: 100%;
  background: #d1443a;
  box-shadow: inset 0 2px 0 #ff7e56;
}

/* 결과 */
#wallUi .wl-result { pointer-events: auto; }
.wl-result .card { max-width: 340px; }
.wl-result .card-head { justify-content: space-between; }
.wl-result .big-num { margin-top: 0; }
.wl-stats { grid-template-columns: repeat(2, 1fr); }
.wl-earn { color: #a8f0ff; gap: 4px; }
.wl-gi { display: inline-block; width: 24px; height: 24px; flex: none; background: var(--ui-gem) 0 0 / 100% 100% no-repeat; }
.wl-why { font: var(--t-small); color: #a5b2c7; margin: 0 0 8px; }
.wl-tomorrow { font: var(--t-body); color: #ff7e56; margin: 0 0 8px; }
.wl-result .row .btn { flex: 1; }