/* ════════════════════════════════════════════════════════════════════
   premium-hud.css — 씬 화면들이 함께 쓰는 상단 HUD 한 벌
   ────────────────────────────────────────────────────────────────────
   2026-08-27 사람 지시(놀이터 · 타로 상담 두 번에 걸쳐 같은 조문이 나왔다):
     · [‹ 마을] 작고 단정한 캡슐 · 반투명 글래스 · 번쩍이는 보라 그라데이션 금지
     · 상단 중앙에 그 화면의 주인공 이름 · 우상단 ⓘ
     · 음악은 얇은 미니 플레이어 — 주인공보다 강하면 안 된다
     · 샴페인 골드는 화면의 5% 이하

   ★ 쓰는 법: <body class="… premium-hud"> 를 붙이고 이 파일을 읽는다.
     화면마다 다른 것(제목 자리·본문 여백·그 화면 고유 UI)은 각자 파일에서 정한다.
   ★ 이 파일이 생긴 이유: 같은 값을 playground-ui.css 와 reading-ui.css 에
     두 벌로 두면 한쪽만 고쳐졌을 때 두 화면이 서로 달라진다(§15).
   ════════════════════════════════════════════════════════════════════ */

body.premium-hud{
  /* 색 규칙 — 역할별로 하나씩만 */
  --pg-glass:rgba(38,28,56,.70);        /* 배경 UI · 딥 플럼 반투명 */
  --pg-glass-soft:rgba(38,28,56,.56);
  --pg-line:rgba(255,255,255,.24);      /* 얇고 은은한 1px 테두리 */
  --pg-hi:rgba(255,255,255,.10);        /* 아주 약한 내부 하이라이트 */
  --pg-ink:#f6efe3;                     /* 아이보리 · 크림 글자 */
  --pg-sub:#c9bcd6;                     /* 보조 문구 · 저채도 라벤더 */
  --pg-gold:#c9a961;                    /* 저채도 샴페인 골드 — 포인트만 */
  --pg-sh:0 6px 22px rgba(18,11,32,.26);/* 넓고 흐리게 */
  --pg-row1:calc(12px + env(safe-area-inset-top, 0px));
  --pg-row2:calc(var(--pg-row1) + 36px + 8px);
}

/* ── ① ‹ 마을 ────────────────────────────────────────────────────
   화면에 놓인 <a class="back|village-back"> 는 back-home.js 가 숨기고(.backhome-원본)
   자기 버튼(.backhome)을 심는다. 그래서 **심어지는 쪽**을 고쳐야 화면이 바뀐다.
   .ui-topbar 는 [뒤로 + 음악칩]을 한 줄로 묶는 flex 바다 — display:contents 로
   레이아웃에서 비켜 세워 둘이 각자 자리를 잡게 한다(요소는 지우지 않는다). */
body.premium-hud .ui-topbar{ display:contents; }

/* 2026-09-07 사람 지시 — 마을 복귀 버튼 공통 규격(40~44px · 14~15px · 600).
   높이(36px)는 이 값 그대로 둔다: --pg-row2 와 saju-ui.css·reading-ui.css·
   playground-ui.css·shop-tarojip.css·cards-ui.css 여러 곳이 "이 줄은 36px"
   라고 못박아 둘째 줄(제목·코인 배지)을 그 아래에 겹치지 않게 세운다 — 여기서만
   키우면 그 계산들이 전부 어긋나 다른 화면 헤더가 겹친다. 대신 글자·그림자를
   공통 규격에 맞춰 가볍게 한다(높이는 이미 40 미만이라 [메인 CTA처럼 크다]는
   지적과는 반대 방향이었다). */
body.premium-hud .backhome,
body.premium-hud .backhome.jelly{
  position:fixed; z-index:22;
  top:var(--pg-row1); left:12px; right:auto;
  min-height:36px; height:36px; padding:0 14px;
  display:inline-flex; align-items:center;
  border-image:none;                    /* 젤리(webp border-image)를 끈다 */
  border:1px solid var(--pg-line); border-radius:999px;
  background:linear-gradient(180deg, var(--pg-hi), transparent 42%), var(--pg-glass);
  color:var(--pg-ink);
  font:600 .875rem/1 var(--font-ui,"Malgun Gothic",sans-serif); letter-spacing:.02em;
  text-decoration:none; box-shadow:0 2px 8px rgba(18,11,32,.22);
  transition:transform .16s ease;
}
/* 보이는 크기 36px, 누를 수 있는 자리는 44px */
body.premium-hud .backhome::after{
  content:""; position:absolute; inset:-5px -6px; border-radius:inherit; background:none;
}
body.premium-hud .backhome.jelly::before{ background:none; }
body.premium-hud .backhome:active{ transform:scale(.97); }

/* ── ② ⓘ ────────────────────────────────────────────────────────── */
body.premium-hud .hud-info{
  position:fixed; z-index:22;
  top:var(--pg-row1); right:12px;
  width:36px; height:36px; min-height:36px; padding:0;
  border:1px solid var(--pg-line); border-radius:50%;
  background:linear-gradient(180deg, var(--pg-hi), transparent 42%), var(--pg-glass);
  color:var(--pg-ink); font-size:.94rem; line-height:1; cursor:pointer;
  box-shadow:var(--pg-sh); transition:transform .16s ease;
}
body.premium-hud .hud-info:active{ transform:scale(.94); }
body.premium-hud .hud-note{
  position:fixed; z-index:23;
  left:12px; right:12px; top:calc(var(--pg-row1) + 36px + 8px);
  margin:0; width:auto; max-width:none;
  padding:9px 14px; border-radius:14px;
  border:1px solid var(--pg-line);
  background:var(--pg-glass); color:var(--pg-ink);
  font-size:.68rem; line-height:1.45; text-align:center;
  box-shadow:var(--pg-sh);
}

/* ── ③ 음악 미니 플레이어 ───────────────────────────────────────
   ★ bgm-player.css:60 의 [.ui-topbar .bgm-chip{position:static}] 이 먼저 걸린다 —
     position 을 다시 적지 않으면 top/left 가 통째로 무시돼 칩이 화면 아래로 흐른다
     (2026-08-27 실측 top=813). 자리를 옮길 땐 position 부터 되돌린다. */
body.premium-hud .bgm-chip,
body.premium-hud.bgm-chip-on .bgm-chip{
  position:fixed; z-index:21;
  top:var(--pg-row2); left:12px; right:188px;   /* 오른쪽은 은화 pill(실측 163px) 자리 */
  width:auto; min-width:0; height:34px; min-height:34px;
  padding:0 12px; gap:9px; justify-content:flex-start;
  border:1px solid var(--pg-line); border-radius:999px;
  background:var(--pg-glass-soft); color:var(--pg-ink);
  box-shadow:none;                               /* [강한 그림자 없음] */
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:.72rem;
}
body.premium-hud .bgm-chip .bgm-chip-title{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:none; flex:1 1 auto; text-align:left; color:var(--pg-ink);
}
/* ♫ 는 샴페인 골드 포인트. 재생 중에만 미세하게 — 음표가 날아다니지 않는다. */
body.premium-hud .bgm-chip .bgm-eq{ height:10px; flex:0 0 auto; }
body.premium-hud .bgm-chip .bgm-eq i{ background:var(--pg-gold); }

/* ── ④ 은화 · 🔥 (기존 기능 그대로, 모양만 같은 규격으로) ───────── */
body.premium-hud .tarot-coin-widget{
  top:var(--pg-row2); right:12px;
  height:34px; min-height:34px; padding:0 10px; gap:6px;
  border:1px solid var(--pg-line); border-radius:999px;
  background:var(--pg-glass-soft); color:var(--pg-ink);
  box-shadow:none; font-size:.7rem;
}
body.premium-hud #tarot-coin-countdown{ display:none; }