#app {
  /* iOS 사파리는 100vh 를 '툴바가 없을 때' 높이로 잡아 아래가 주소창·하단바에 가린다.
     dvh 는 지금 실제로 보이는 높이라 주소창 아래에 딱 맞는다(iOS 15.4+·안드로이드 크롬).
     dvh 를 모르는 브라우저는 위의 100vh 를 쓴다. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background: #f4f1ee;
}

.hud {
  position: absolute;
  top: 1.6%; left: 1.6%; right: 1.6%;
  /* 크기 확대(발주처 요청 2026-09-08 슬라이드 13, 2026-09-09 사용자 지시로 1.5배) */
  /* 아바타 93 + 위아래 여백 14 = 121. 좌측 패널이 이 값을 기준으로 아래에 붙는다. */
  min-height: 121px;
  z-index: 10;
  display: grid;
  /* 스테이지 칸은 발주처 요청(2026-08-28)으로, 전체화면 버튼은 2026-09-08 요청으로 뺐다.
     남은 칸: 프로필 · 제한시간 · 누적 달성 · 버튼 2개. */
  grid-template-columns: minmax(315px,1.1fr) minmax(225px,.9fr) minmax(180px,.75fr) 300px;
  align-items: center; gap: 21px;
  border-radius: 20px; padding: 14px 24px;
  background: linear-gradient(145deg, #ffffffe6, #fffffff2);
  border: 1px solid var(--gs-line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px #2a232033;
  pointer-events: auto;
}
.hud small { display: block; color: #6f757c; font-size: 21px; }
/* 값(이름·진행도·누적)은 어두운 HUD 배경 위에 올라가므로 밝은 글자여야 읽힌다.
   색을 지정하지 않으면 body 의 --c-ink(남색)를 물려받아 배경에 묻힌다. */
.hud b { display: block; font-size: 33px; font-weight: 800; letter-spacing: -.01em; color: var(--gs-text); }

.hud-user { display: flex; align-items: center; gap: 18px; }
.hud-avatar {
  flex: none; width: 93px; height: 93px;
  overflow: hidden; border: 3px solid rgba(31,36,41,.14);
  border-radius: 50%; background-color: #faf7f5;
}
.hud-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.hud-user small { color: var(--gs-cyan-soft); }

/* 60초 경고(발주처 0910 S3): 오버레이 대신 제한시간 셀 바로 아래에 인라인. */
.hud-timer { position: relative; }
.hud-timer__warn {
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
  z-index: 12; white-space: nowrap; pointer-events: none;
  padding: 8px 18px; border-radius: 12px;
  background: #ffe4e9; border: 1px solid #e9002d; color: #e9002d;
  font-weight: 800; font-size: 18px; box-shadow: 0 10px 24px #2a232026;
}
.hud-timer__warn small { display: block; color: var(--gs-muted); font-weight: 600; font-size: 14px; margin-top: 2px; }
.hud-timer, .hud-total {
  min-height: 69px; padding: 6px 18px;
  border-left: 1px solid #d3c8c15c;
}
.hud-timer b { color: var(--gs-cyan-soft); font-size: 39px; font-variant-numeric: tabular-nums; }
.hud-timer.danger {
  background: #ffe4e9; border: 1px solid #e9002d; border-radius: 15px;
  animation: gs-danger-pulse 1s infinite alternate;
}
.hud-timer.danger b { color: #e9002d; }


.hud-actions { height: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.hud-actions button {
  border: 1px solid #d3c8c1; border-radius: 16px;
  color: #1f2429; background: #ffffffc0; cursor: pointer;
  font-family: inherit; font-size: 33px; font-weight: 700;
  transition: transform .15s, background .18s;
  pointer-events: auto;
}
.hud-actions button:hover:not(:disabled) { background: #f0ebe7; transform: translateY(-1px); }
.hud-actions button:active { transform: translateY(1px); }
.hud-actions button:disabled { opacity: .5; cursor: not-allowed; }
/* 홈·설정 버튼 아이콘 이미지(발주처 0910 S2 기타 자산). 원본 컬러 그대로, 크기만 맞춘다. */
.hud-actions__icon { display: block; width: 34px; height: 34px; margin: 0 auto 2px; object-fit: contain; }
.hud-actions button span { display: block; font-size: 19px; color: #6f757c; margin-top: 3px; font-weight: 600; }

/* ── 전체화면 토글(#app 밖 고정 버튼) ─────────────────────────
   메인·로그인·결과 등 HUD 가 없는 화면에서 쓰는 버튼이다.
   z-index 15 는 맵(6)보다 위, 미션 패널(20)·팝업(30)보다 아래다.
   "미션창·팝업을 가리지 않는다"를 위치가 아니라 순서로 보장하려고 일부러 아래에 뒀다. */
.fs-toggle {
  position: fixed; right: 14px; bottom: 12px; z-index: 15;
  display: flex; align-items: center; gap: 7px;
  /* 크기 확대(발주처 요청 2026-09-08 슬라이드 1·13) */
  padding: 12px 20px; border-radius: 13px;
  border: 1px solid #d3c8c1; background: #ffffffd9; color: #1f2429;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--font); font-size: 16px; font-weight: 700; letter-spacing: -.02em;
  cursor: pointer; box-shadow: 0 10px 24px #2a23202d;
  transition: transform .15s, background .18s;
}
.fs-toggle > span:first-child { font-size: 20px; line-height: 1; }
/* 글자만 '전체화면' ↔ '창 모드' 로 바뀌고 버튼 모양·크기는 그대로여야 한다
   (사용자 지적 2026-09-09: 두 상태의 디자인이 다르다).
   글자 수가 달라 폭이 흔들리므로 자리를 고정한다. */
.fs-toggle > span:last-child { min-width: 4.4em; text-align: center; }
.fs-toggle:hover { background: #f0ebe7; transform: translateY(-1px); }
.fs-toggle:active { transform: translateY(1px); }
/* 전체화면일 때도 테두리·글자색을 그대로 둔다. 예전에는 붉은 테두리로 바뀌어
   같은 버튼이 상태에 따라 다른 버튼처럼 보였다. */
.fs-toggle.is-on { border-color: #d3c8c1; color: #1f2429; }
/* 팝업이 떠 있으면 감춘다(발주처 요청 2026-09-08 슬라이드 5:
   "팝업이 떠있는 상태에서는 전체화면 버튼이 레이어 최상위로 올라오지 않도록").
   z-index 15 는 이미 팝업(20~40)보다 낮지만, 배경막이 반투명한 팝업에서는
   버튼이 비쳐 보여 누를 수 있는 것처럼 읽힌다. 아예 감춘다.
   :has 는 Chrome·Edge 만 지원하면 되는 배포 조건이라 그대로 쓴다.
   지원하지 않는 브라우저에서는 규칙만 무시되어 버튼이 겹쳐 보일 뿐 동작은 같다. */
#app:has(.howto-back, .bg-back, .dlg-back, .charsel-back, .panel-back) ~ .fs-toggle {
  display: none;
}

/* 10분이 끝난 결과 화면은 HUD 를 지우지 않은 채 그 위에 팝업만 덮는다.
   결과 화면에서는 전체화면을 끄고 나갈 수 있어야 하므로 버튼을 팝업 위로 올린다.
   (상단 바의 전체화면 버튼은 발주처 요청 0908 슬라이드 13 으로 없어졌다.) */
#app:has(.result-screen) ~ .fs-toggle { display: flex; z-index: 500001; }

/* 게임 화면(HUD·가이드·미션창·오버레이)이 모두 이 안이라 여기서 한 번에 오뮤로 바꾼다. */
.stage-wrap {
  font-family: var(--font-game);
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 30%, #1f2429 0%, #6f757c 60%, #6f757c 100%);
}

@media (max-width: 980px) {
  .hud { left: 7px; right: 7px; gap: 12px; grid-template-columns: 1.2fr .8fr 1fr 240px; padding: 12px 18px; }
  .hud small { font-size: 19px; }
  .hud b { font-size: 30px; }
  .hud-timer b { font-size: 34px; }
  .hud-avatar { width: 81px; height: 81px; }
  .hud-timer, .hud-total { padding: 6px 13px; }
  .hud-actions button { font-size: 30px; }
  .hud-actions button span { font-size: 18px; }
}