/* 심해 탐험 HUD · 결과 — js/sea.js 가 #seaUi 안을 채운다. 글자는 Galmuri 격자(10/20 · 12/24 · 15/30)만. */
#seaUi { position: absolute; inset: 0; pointer-events: none; z-index: 6; }

/* 위: 최고 기록 · 지금 깊이 · 이번 판 보석 (코인·음소거 줄 아래) */
.sa-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;
}
.sa-stat span { display: block; font: var(--t-small); color: #d3dce8; text-shadow: var(--pxo1); }
.sa-stat b {
  display: flex; align-items: center; gap: 2px; margin-top: 2px;
  font: var(--t-btn); font-weight: 400; color: #f5f8fc; text-shadow: var(--pxo); font-variant-numeric: tabular-nums;
}
.sa-stat b em { font-style: normal; color: #a8f0ff; }
.sa-stat.r { text-align: right; }
.sa-stat.r b { justify-content: flex-end; }
.sa-depth { text-align: center; min-width: 96px; }
.sa-depth b { font: var(--t-display); font-weight: 400; color: #f5f8fc; text-shadow: var(--pxo); font-variant-numeric: tabular-nums; }
.sa-depth span { font: var(--t-btn); color: #a8f0ff; text-shadow: var(--pxo); margin-left: 2px; }

/* 보석 아이콘 (ui_gem, 없으면 하늘색 마름모) */
.sa-gi {
  display: inline-block; width: 24px; height: 24px; flex: none;
  background: var(--ui-gem, linear-gradient(135deg, transparent 30%, #46c8e8 30% 70%, transparent 70%)) 0 0 / 100% 100% no-repeat;
}
.sa-stat .sa-gi { width: 20px; height: 20px; }

/* 아래: 숨 게이지 + 하트 (비행 HUD 의 .gauge · .hearts 모양을 그대로 쓴다) */
.sa-bottom {
  position: absolute; left: 16px; right: 16px; bottom: calc(var(--sb) + 20px);
  display: flex; align-items: flex-end; pointer-events: none;
}
.sa-bottom .gauge-lbl > span:first-child { color: #a8f0ff; }

/* 결과 */
#seaUi .sa-result { pointer-events: auto; }
.sa-result .card { max-width: 340px; }
.sa-result .card-head { justify-content: space-between; }
.sa-result .big-num { margin-top: 0; }
.sa-result .big-num span { color: #a8f0ff; }
.sa-stats { grid-template-columns: repeat(2, 1fr); }
.sa-earn { color: #a8f0ff; gap: 4px; }
.sa-why { font: var(--t-small); color: #a5b2c7; margin: 0 0 8px; }
.sa-tomorrow { font: var(--t-body); color: #ff7e56; margin: 0 0 8px; }
.sa-result .row .btn { flex: 1; }