/* 용암 괴수 방어전 — 화면 모양
   밤의 화산 해안. 어두운 남색 바탕에 용암 주황으로 강조한다.
   모든 판(계기판·버튼·패널)은 "모서리 둘을 깎아 낸 현무암 판" 하나의 모양을 같이 쓴다.

   차례
   1. 색과 치수      2. 바탕           3. 전체 틀         4. 깎인 판
   5. 겉 정보(HUD)   6. 아래 패널      7. 화면 공통·배경  8. 불러오는 중
   9. 타이틀         10. 큰 버튼       11. 대화 상자      12. 결과·오류
   13. 움직임        14. 화면 크기별   15. 입력 장치별·움직임 줄이기 */

/* ───────────────────────── 1. 색과 치수 ───────────────────────── */
:root {
  --night-950: #04060d;   /* 가장 깊은 밤 */
  --night-900: #070b18;
  --night-800: #0b1226;
  --night-700: #111a36;   /* 판의 바탕 */
  --night-600: #1a2648;
  --night-500: #283866;   /* 꺼진 눈금, 테두리 */
  --haze-400: #6f7fa8;    /* 흐린 글자 */
  --haze-300: #97a6cc;    /* 이름표 글자 */
  --foam-200: #c8d2ee;    /* 본문 글자 */
  --foam-100: #eaf0ff;    /* 밝은 글자 */
  --lava-100: #ffe7b8;    /* 가장 뜨거운 곳 */
  --lava-300: #ffb443;
  --lava-500: #ff6b1a;    /* 용암 주황 */
  --lava-700: #d23a0b;
  --lava-900: #5a1505;
  --char: #2a0d02;        /* 용암 위에 얹는 글자 */
  --ember: #ff4338;       /* 위험 */
  --brass: #ffd166;       /* 금, 기관포 */
  --frost: #7fdcff;       /* 냉각포 */
  --volt: #b9a2ff;        /* 레일건 */

  --font: "Pretendard", "Malgun Gothic", system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --pad: 12px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  --lava-fill: linear-gradient(180deg, #ffc65e 0%, var(--lava-500) 58%, #e2480f 100%);
  --slab-fill: linear-gradient(180deg, rgba(17, 26, 54, 0.93), rgba(7, 11, 24, 0.95));
  --slab-edge: rgba(151, 166, 204, 0.36);

  /* 그림은 전부 마스크로 그린다(색은 글자색을 따른다) */
  --icon-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4.5v16H6zM13.5 4H18v16h-4.5z'/%3E%3C/svg%3E");
  --icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3.5l13.5 8.5L7 20.5z'/%3E%3C/svg%3E");
  --icon-sound-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4.5v-15L7 9z'/%3E%3Cpath d='M15.5 8.6a5 5 0 010 6.8M18.2 5.8a9 9 0 010 12.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-sound-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4.5v-15L7 9z'/%3E%3Cpath d='M16 9.2l5.6 5.6M21.6 9.2L16 14.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-strike: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 1.5v5M12 17.5v5M1.5 12h5M17.5 12h5' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3C/svg%3E");
  --icon-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5l7 7-7 7M13 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-coin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l8.1 4.7v9.4L12 21.4l-8.1-4.7V7.3z'/%3E%3C/svg%3E");
}

/* 포탑별 강조색. 카드·패널·조작법 목록이 같이 쓴다 */
[data-tower="gatling"] { --accent: var(--brass); }
[data-tower="missile"] { --accent: var(--lava-500); }
[data-tower="cryo"] { --accent: var(--frost); }
[data-tower="rail"] { --accent: var(--volt); }

/* ───────────────────────── 2. 바탕 ───────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;          /* 당겨서 새로고침 막기 */
  background: var(--night-950);
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.4;
  color: var(--foam-100);
  word-break: keep-all;               /* 한글은 낱말 단위로 줄을 바꾼다 */
  overflow-wrap: break-word;
  -webkit-user-select: none;
  user-select: none;                  /* 글자 선택 막기 */
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

button:focus {
  outline: none;
}

[hidden] {
  display: none !important;
}

/* 스크롤되는 곳의 막대는 어둡고 가늘게 */
#panel,
.dialog,
.help-body,
.fatal-message {
  scrollbar-width: thin;
  scrollbar-color: var(--night-500) transparent;
}

/* ───────────────────────── 3. 전체 틀 ─────────────────────────
   #app 은 격자다. 캔버스와 화면들은 격자 밖(절대 위치)에서 전체를 덮고,
   HUD 조각과 패널만 격자 칸에 앉는다. 그래서 패널이 열리면 아래 버튼이 저절로 밀려 올라가고
   어느 화면 크기에서도 서로 겹치지 않는다.
   가운데 줄은 안내 글(#hud-hint)이 보일 때 그 높이만큼은 꼭 차지하고(min-content),
   패널은 자기 칸 높이에 맞춰 늘어나므로(stretch) 자리가 모자라면 넘치지 않고 안에서 스크롤된다. */
#app {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(min-content, 1fr) auto;
  grid-template-areas:
    "top    top   top"
    "hint   hint  hint"
    "strike panel next";
  padding:
    calc(var(--pad) + var(--safe-t))
    calc(var(--pad) + var(--safe-r))
    calc(var(--pad) + var(--safe-b))
    calc(var(--pad) + var(--safe-l));
  overflow: hidden;
  touch-action: none;                 /* 두 손가락 확대·두 번 누름 확대 막기 */
  background:
    radial-gradient(120% 80% at 50% 112%, #1d1230 0%, var(--night-900) 55%, var(--night-950) 100%);
}

#game-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  outline: none;
}

/* #hud 는 자기 상자 없이 자식들을 #app 격자에 바로 올린다 */
#hud {
  display: contents;
}

#app:not([data-screen="game"]) > #hud,
#app:not([data-screen="game"]) > #panel {
  display: none;
}

/* ───────────────────────── 4. 깎인 판 ─────────────────────────
   왼쪽 위와 오른쪽 아래 모서리를 --cut 만큼 깎는다.
   --fill(그라디언트)과 --edge(색)만 바꿔서 종류를 나눈다. background 를 직접 덮어쓰지 않는다. */
.hud-stats,
.hud-tool,
.hud-action,
#panel,
.panel-card,
.panel-btn,
.btn,
.dialog {
  --cut: 10px;
  --fill: var(--slab-fill);
  --edge: var(--slab-edge);
  border: 1px solid var(--edge);
  background:
    linear-gradient(135deg, var(--edge) 0 calc(var(--cut) * 0.7071 + 1px), transparent 0) border-box,
    linear-gradient(315deg, var(--edge) 0 calc(var(--cut) * 0.7071 + 1px), transparent 0) border-box,
    var(--fill) border-box;
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
}

.hud-tool:focus-visible,
.hud-action:focus-visible,
.panel-card:focus-visible,
.panel-btn:focus-visible,
.panel-close:focus-visible,
.btn:focus-visible {
  box-shadow: inset 0 0 0 2px var(--foam-100), inset 0 0 0 4px rgba(4, 6, 13, 0.6);
}

/* ───────────────────────── 5. 겉 정보(HUD) ───────────────────────── */
.hud-top {
  grid-area: top;
  z-index: 2;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;                    /* 좁으면 도구 버튼이 아랫줄로 내려간다 */
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px 8px;
  pointer-events: none;               /* 빈 틈은 캔버스로 누름을 보낸다 */
}

.hud-top > * {
  pointer-events: auto;
}

/* 금 · 도시 내구도 · 웨이브 */
.hud-stats {
  --cut: 12px;
  position: relative;
  flex: 1 1 320px;                    /* 이보다 좁아질 것 같으면 도구 버튼을 아랫줄로 보낸다(금 네 자리 "9,999"가 칸을 넘지 않는 폭) */
  min-width: 0;
  max-width: 430px;
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr) minmax(0, 1fr);
}

.hud-stats::after {                   /* 판 아래를 흐르는 용암 틈 */
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  height: 2px;
  background: linear-gradient(90deg, var(--lava-500), rgba(255, 107, 26, 0));
  pointer-events: none;
}

.hud-stat {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value";
  column-gap: 8px;
  align-content: center;
  align-items: center;
  padding: 7px 8px 9px 12px;
}

.hud-stat + .hud-stat::before {       /* 칸 사이의 비스듬한 금 */
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: rgba(151, 166, 204, 0.28);
  transform: skewX(-16deg);
}

.hud-icon {
  grid-area: icon;
  width: 20px;
  height: 20px;
}

.hud-stat--gold .hud-icon { color: var(--brass); }
.hud-stat--city .hud-icon { color: #9fc4ff; }
.hud-stat--wave .hud-icon { color: var(--lava-500); }

.hud-label {
  grid-area: label;
  overflow: hidden;
  font-size: 10.5px;
  line-height: 1.15;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--haze-300);
}

.hud-value {
  grid-area: value;
  justify-self: start;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform-origin: left center;
}

#hud-gold {
  color: var(--brass);
}

/* 도시 내구도 막대: 숫자 바로 아래. --hp(0~1)로 길이를 정한다 */
#hud-city {
  position: relative;
}

#hud-city::before,
#hud-city::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(100% + 2px);
  width: 56px;
  height: 2px;
}

#hud-city::before {
  background: rgba(151, 166, 204, 0.26);
}

#hud-city::after {
  background: linear-gradient(90deg, var(--lava-500), var(--lava-300));
  transform-origin: left center;
  transform: scaleX(clamp(0, var(--hp, 1), 1));
  transition: transform 0.25s ease-out;
}

#hud-city.is-danger {
  color: var(--ember);
  animation: danger-blink 0.9s ease-in-out infinite;
}

#hud-city.is-danger::after {
  background: var(--ember);
}

.hud-value.is-bump {
  animation: hud-bump 0.3s ease-out;
}

#hud-gold.is-short {
  animation: hud-short 0.35s linear;
}

/* 속도 · 일시정지 · 소리 */
.hud-tools {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.hud-tool {
  --cut: 7px;
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--foam-100);
}

.hud-tool--speed[aria-pressed="true"] {
  --fill: linear-gradient(180deg, rgba(210, 58, 11, 0.92), rgba(90, 21, 5, 0.95));
  --edge: var(--lava-300);
  color: var(--lava-100);
}

/* 글자는 화면 낭독용으로만 남기고 그림을 보여준다 */
.hud-tool--pause,
.hud-tool--sound {
  font-size: 0;
}

.hud-tool--pause::before,
.hud-tool--sound::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.hud-tool--pause { --icon: var(--icon-pause); }
.hud-tool--pause[aria-pressed="true"] { --icon: var(--icon-play); --edge: var(--lava-300); color: var(--lava-300); }
.hud-tool--sound { --icon: var(--icon-sound-on); }
.hud-tool--sound[aria-pressed="false"] { --icon: var(--icon-sound-off); color: var(--haze-400); }

/* 가운데 아래 한 줄 안내 */
.hud-hint {
  grid-area: hint;
  z-index: 2;
  align-self: end;
  justify-self: center;
  max-width: 100%;
  margin-bottom: 8px;
  padding: 7px 14px;
  border-left: 2px solid var(--lava-500);
  background: rgba(7, 11, 24, 0.88);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: var(--lava-100);
  pointer-events: none;
}

/* 공습 · 다음 웨이브 */
.hud-action {
  position: relative;
  z-index: 2;
  align-self: end;
  min-height: 52px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hud-action--strike {
  --fill: linear-gradient(180deg, rgba(104, 26, 8, 0.95), rgba(34, 10, 8, 0.97));
  --edge: rgba(255, 107, 26, 0.8);
  grid-area: strike;
  justify-self: start;
  min-width: 100px;
  color: var(--lava-100);
}

.hud-action--strike::before {         /* 조준경 */
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--icon-strike) center / contain no-repeat;
  mask: var(--icon-strike) center / contain no-repeat;
}

.hud-action--strike::after {          /* 재사용 대기: 어두운 막이 오른쪽으로 걷힌다 */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 13, 0.5);
  transform-origin: right center;
  transform: scaleX(clamp(0, var(--cooldown, 0), 1));
  pointer-events: none;
}

.hud-action--strike.is-cooling {
  --edge: var(--slab-edge);
  color: var(--foam-200);
}

.hud-action--strike.is-armed {
  --fill: var(--lava-fill);
  --edge: var(--lava-100);
  color: var(--char);
  animation: armed-pulse 0.6s ease-in-out infinite alternate;
}

.hud-action--next {
  --fill: var(--lava-fill);
  --edge: var(--lava-100);
  grid-area: next;
  justify-self: end;
  min-width: 168px;
  max-width: calc(100% - 8px);
  margin-left: 8px;
  padding: 0 12px 0 18px;
  color: var(--char);
}

.hud-action--next::after {            /* 앞으로 감기 */
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--icon-next) center / contain no-repeat;
  mask: var(--icon-next) center / contain no-repeat;
}

.hud-action--next.is-counting {
  animation: counting-pulse 1s ease-in-out infinite;
}

.hud-action:disabled,
.hud-action.is-disabled {
  --fill: var(--slab-fill);
  --edge: rgba(151, 166, 204, 0.22);
  color: var(--haze-400);
  cursor: default;
  animation: none;
}

.hud-action--next:disabled::after,
.hud-action--next.is-disabled::after {
  display: none;                      /* 누를 수 없을 때는 앞으로 감기 그림을 뺀다 */
}

/* ───────────────────────── 6. 아래 패널 ───────────────────────── */
#panel {
  --cut: 14px;
  --fill: linear-gradient(180deg, rgba(17, 26, 54, 0.96), rgba(7, 11, 24, 0.97));
  grid-area: panel;
  position: relative;
  z-index: 3;
  align-self: stretch;                /* 칸 높이에 맞춘다. 칸은 내용만큼만 커지고, 자리가 모자라면 줄어든다 */
  justify-self: center;
  width: calc(100% - 20px);           /* 양옆 버튼과의 틈 */
  max-width: 720px;
  min-width: 0;
  min-height: 0;
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  container: panel / inline-size;     /* 카드 열 수를 화면 폭이 아니라 패널 폭으로 정한다(14번 끝) */
  padding: 10px 12px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  animation: panel-rise 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

#panel::before {                      /* 위쪽 강조선. 포탑 색을 따른다 */
  content: "";
  position: absolute;
  left: 14px;
  top: 0;
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent, var(--lava-500)), transparent);
  pointer-events: none;
}

.panel-head {
  min-height: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding-right: 34px;                /* 닫기 버튼 자리 */
}

.panel-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.panel-sub {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--haze-300);
}

.panel-level {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.panel-pip {
  width: 14px;
  height: 5px;
  background: var(--night-500);
  transform: skewX(-22deg);
}

.panel-pip.is-on {
  background: var(--accent, var(--lava-300));
}

.panel-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 0;
  color: var(--haze-300);
}

.panel-close::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--icon-close) center / contain no-repeat;
  mask: var(--icon-close) center / contain no-repeat;
}

.panel-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.panel-card {
  --cut: 9px;
  --fill: linear-gradient(180deg, rgba(26, 38, 72, 0.92), rgba(11, 18, 38, 0.95));
  --edge: rgba(151, 166, 204, 0.3);
  position: relative;
  min-width: 0;
  min-height: 62px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "key  name cost"
    "desc desc desc";
  align-content: start;
  align-items: center;
  row-gap: 3px;
  padding: 9px 10px 9px 13px;
  text-align: left;
  color: var(--foam-100);
}

.panel-card::before {                 /* 왼쪽의 포탑 색 띠 */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent, var(--lava-500));
}

.panel-card-key {                      /* span 이든 kbd 든 같은 모양 */
  grid-area: key;
  display: inline-block;
  min-width: 17px;
  margin-right: 6px;
  padding: 0 4px;
  border: 1px solid rgba(151, 166, 204, 0.4);
  background: transparent;
  font: 700 10.5px/15px var(--font);
  text-align: center;
  color: var(--haze-300);
}

.panel-card-name {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.panel-card-cost {
  grid-area: cost;
  margin-left: 6px;
  font-size: 13.5px;
}

.panel-card-desc {
  grid-area: desc;
  display: -webkit-box;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--haze-300);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.panel-card.is-selected {
  --fill: linear-gradient(180deg, rgba(40, 56, 102, 0.95), rgba(17, 26, 54, 0.96));
  --edge: var(--accent, var(--lava-300));
}

.panel-card.is-disabled,
.panel-card:disabled {
  --edge: rgba(151, 166, 204, 0.16);
  color: var(--haze-400);
  cursor: default;
}

.panel-card.is-disabled::before,
.panel-card:disabled::before {
  background: var(--night-500);
}

.panel-card.is-disabled .panel-card-cost,
.panel-card:disabled .panel-card-cost {
  color: var(--ember);
}

.panel-card.is-disabled .panel-card-desc,
.panel-card:disabled .panel-card-desc {
  color: var(--haze-400);
}

/* 금액. 앞에 금 동전이 붙는다 */
.cost,
.panel-card-cost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--brass);
}

.cost::before,
.panel-card-cost::before {
  content: "";
  flex: none;
  width: 0.82em;
  height: 0.82em;
  background: currentColor;
  -webkit-mask: var(--icon-coin) center / contain no-repeat;
  mask: var(--icon-coin) center / contain no-repeat;
}

.panel-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.panel-stat {
  min-width: 0;
  margin: 0;
  padding: 6px 9px 7px;
  border-left: 2px solid var(--accent, var(--lava-500));
  background: rgba(151, 166, 204, 0.07);
}

.panel-stat-label {
  display: block;
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--haze-300);
}

.panel-stat-value {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.panel-stat-next {                    /* 강화 뒤 수치. 화살표는 여기서 붙인다. 좁으면 통째로 다음 줄로 */
  display: inline-block;
  margin-left: 5px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--lava-300);
}

.panel-stat-next::before {
  content: "\2192\00a0";
}

.panel-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.panel-btn {
  --cut: 9px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--foam-100);
}

.panel-btn--primary {
  --fill: var(--lava-fill);
  --edge: var(--lava-100);
  color: var(--char);
}

.panel-btn--primary .cost {
  color: inherit;
}

.panel-btn--danger {
  --edge: rgba(255, 67, 56, 0.7);
  color: #ffc9c4;
}

.panel-btn.is-disabled,
.panel-btn:disabled {
  --fill: var(--slab-fill);
  --edge: rgba(151, 166, 204, 0.2);
  color: var(--haze-400);
  cursor: default;
}

.panel-btn.is-disabled .cost,
.panel-btn:disabled .cost {
  color: var(--ember);
}

.panel-note {
  margin: 7px 0 0;
  min-height: 1.4em;
  font-size: 12px;
  line-height: 1.4;
  color: var(--haze-300);
}

/* 안내가 없을 때도 한 줄 자리는 남겨 둔다. 금이 모자라다가 채워지는 순간(웨이브 중에 자주 온다)이나
   터치로 카드를 처음 고른 순간에 패널 높이가 바뀌면, 누르려던 버튼과 카드가 손가락 밑에서 달아난다. */
.panel-note[hidden] {
  display: block !important;
  visibility: hidden;
}

/* ───────────────────────── 7. 화면 공통 · 배경 ───────────────────────── */
.screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding:
    calc(16px + var(--safe-t))
    calc(16px + var(--safe-r))
    calc(16px + var(--safe-b))
    calc(16px + var(--safe-l));
  overflow: hidden;
  animation: screen-in 0.3s ease-out both;
}

.screen--result { z-index: 24; }
.screen--pause { z-index: 26; background: rgba(4, 6, 13, 0.74); }
.screen--title { z-index: 28; background: var(--night-950); }
.screen--loading { z-index: 30; background: var(--night-950); }
.screen--fatal { z-index: 40; background: rgba(4, 6, 13, 0.95); }

/* CSS만으로 그린 밤의 화산 해안. 영상과 포스터가 없어도 이 그림이 남는다 */
.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    /* 별 몇 개 */
    radial-gradient(1.2px 1.2px at 12% 9%, rgba(234, 240, 255, 0.8), transparent 100%),
    radial-gradient(1px 1px at 31% 21%, rgba(234, 240, 255, 0.55), transparent 100%),
    radial-gradient(1.4px 1.4px at 47% 6%, rgba(234, 240, 255, 0.7), transparent 100%),
    radial-gradient(1px 1px at 58% 27%, rgba(234, 240, 255, 0.45), transparent 100%),
    radial-gradient(1.2px 1.2px at 79% 13%, rgba(234, 240, 255, 0.75), transparent 100%),
    radial-gradient(1px 1px at 91% 31%, rgba(234, 240, 255, 0.5), transparent 100%),
    radial-gradient(1px 1px at 22% 36%, rgba(234, 240, 255, 0.4), transparent 100%),
    radial-gradient(1.2px 1.2px at 6% 28%, rgba(234, 240, 255, 0.5), transparent 100%),
    /* 분화구 불빛, 수평선의 용암빛, 밤하늘 */
    radial-gradient(22% 16% at 66% 45%, rgba(255, 180, 67, 0.44), transparent 72%),
    radial-gradient(95% 60% at 66% 74%, rgba(255, 107, 26, 0.36), rgba(210, 58, 11, 0.12) 40%, transparent 66%),
    linear-gradient(180deg, #04060d 0%, #080d1f 34%, #121338 58%, #251338 70%, #3d1726 76%, #070b18 76.2%, #04060d 100%);
}

.scene::before {                      /* 화산 능선 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24%;
  height: 36%;
  background: linear-gradient(180deg, #0d0e1d 0%, #05070f 55%);
  clip-path: polygon(
    0 100%, 0 82%, 9% 74%, 17% 79%, 28% 66%, 38% 70%, 52% 34%, 59% 14%, 63% 18%,
    66% 11%, 70% 17%, 73% 15%, 81% 44%, 90% 60%, 96% 56%, 100% 64%, 100% 100%
  );
}

.scene::after {                       /* 용암빛이 비치는 바다 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24.2%;
  background:
    linear-gradient(180deg, rgba(255, 107, 26, 0.3), transparent 30%),
    repeating-linear-gradient(180deg, rgba(255, 180, 67, 0.07) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #0b1124, #04060d);
}

.scene-embers {                       /* 떠오르는 불티 */
  position: absolute;
  inset: 0;
}

.scene-embers::before,
.scene-embers::after {
  content: "";
  position: absolute;
  left: 0;
  top: 78%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  box-shadow:
    52vw -3vh 0 0 var(--lava-300),
    58vw -11vh 0 0 var(--lava-500),
    63vw -1vh 0 -0.5px var(--lava-100),
    67vw -17vh 0 0 var(--lava-500),
    71vw -7vh 0 0 var(--lava-300),
    76vw -22vh 0 -0.5px var(--lava-500),
    82vw -13vh 0 0 var(--lava-300),
    46vw -19vh 0 -0.5px var(--lava-500);
  opacity: 0;
  animation: ember-rise 9s linear infinite;
}

.scene-embers::after {
  left: 5vw;
  top: 84%;
  animation-duration: 13s;
  animation-delay: -5s;
}

/* 불러오는 중 · 타이틀이 같이 쓰는 머리말 */
.brand-line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--lava-300);
}

.brand-line::before {                 /* 깜박이는 경보등 */
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--ember);
  transform: rotate(45deg);
  animation: alert-blink 1.2s linear infinite;
}

/* ───────────────────────── 8. 불러오는 중 ───────────────────────── */
.screen--loading,
.screen--title {
  place-items: end start;
}

.loading-box,
.title-body {
  --inset: clamp(0px, 3vw, 44px);     /* 넓은 화면에서 왼쪽으로 조금 들여 쓴다 */
  position: relative;
  margin: 0 0 clamp(8px, 6vh, 56px) var(--inset);
}

.loading-box {
  width: min(420px, calc(100% - var(--inset)));
}

.brand-mark {
  margin: 0 0 20px;
  font-size: clamp(26px, 4.6vw, 40px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.loading-bar {
  position: relative;
  height: 6px;
  overflow: hidden;
  background: rgba(151, 166, 204, 0.18);
  transform: skewX(-24deg);
}

.loading-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--lava-700), var(--lava-500) 55%, var(--lava-100));
  transform-origin: left center;
  transform: scaleX(var(--progress, 0));
  transition: transform 0.25s ease-out;
}

.loading-bar.is-indeterminate .loading-fill {
  width: 36%;
  transform: none;
  transition: none;
  animation: loading-slide 1.1s ease-in-out infinite;
}

.loading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--haze-300);
}

.loading-percent {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--foam-100);
}

/* ───────────────────────── 9. 타이틀 ─────────────────────────
   넓은 화면: 글은 왼쪽 아래, 괴수 영상은 오른쪽. 세로 화면: 영상은 위, 글은 아래.
   영상은 정사각형(1080x1080)이라 어느 쪽이든 가운데가 잘려 들어온다. */
.title-video {
  position: absolute;
  top: 0;
  right: 0;
  width: max(100vh, 62vw);
  width: max(100dvh, 62vw);
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32%);
  mask-image: linear-gradient(90deg, transparent 0, #000 32%);
}

/* 자동 재생이 막힌 아이폰(저전력 모드 등)은 영상 위에 재생 단추를 그린다.
   영상은 누를 수 없는 배경이므로 그 단추를 지우고 포스터만 남긴다 */
.title-video::-webkit-media-controls,
.title-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

.title-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 6, 13, 0.9) 0%, rgba(4, 6, 13, 0.55) 34%, rgba(4, 6, 13, 0) 60%),
    linear-gradient(0deg, rgba(4, 6, 13, 0.8) 0%, rgba(4, 6, 13, 0) 34%);
}

.title-body {
  width: min(540px, calc(100% - var(--inset)));
}

.title-logo {
  margin: 0 0 16px;
  font-size: clamp(46px, 8.2vw, 104px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
}

.title-logo span {
  display: block;
}

.title-logo::after {                  /* 제목 아래의 용암 틈 */
  content: "";
  display: block;
  width: 1.5em;
  height: 3px;
  margin-top: 0.22em;
  background: linear-gradient(90deg, var(--lava-500), rgba(255, 107, 26, 0));
  transform: skewX(-24deg);
  transform-origin: left center;
}

.title-logo-a {
  padding-bottom: 0.04em;
  color: var(--lava-300);
}

.title-logo-b {
  margin-top: 0.12em;
  font-size: 0.56em;
  letter-spacing: 0.36em;
  color: var(--lava-300);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .title-logo-a {
    background: linear-gradient(180deg, #fff4dc 4%, var(--lava-300) 36%, var(--lava-500) 64%, var(--lava-700) 96%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

@supports (-webkit-text-stroke: 1px #000) {
  .title-logo-b {                     /* 속이 빈 글자 */
    -webkit-text-stroke: 1.4px var(--lava-300);
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.title-lead {
  max-width: 27em;
  margin: 0 0 20px;
  font-size: clamp(14px, 1.45vw, 17px);
  line-height: 1.55;
  color: var(--foam-200);
}

.title-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.title-best {
  margin: 16px 0 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--haze-300);
}

.title-best.has-record {
  color: var(--lava-100);
}

/* 조작법 */
.help {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding: inherit;
  background: rgba(4, 6, 13, 0.82);
  animation: screen-in 0.2s ease-out both;
}

/* 머리말과 닫기 버튼은 제자리에 있고 가운데 몸통만 스크롤된다 */
.help .help-dialog {
  width: min(760px, 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.help-body {
  flex: 1 1 auto;
  min-height: 0;
  margin: 14px calc(var(--pad-x) * -1) 0;   /* 스크롤 막대가 판 가장자리에 붙게 */
  padding: 0 var(--pad-x);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.help-foot {
  flex: none;
  padding-top: 14px;
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 0 0 2px;
}

.help-block h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--lava-300);
}

.help-block ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--foam-200);
}

.help-block li {
  position: relative;
  padding-left: 13px;
}

.help-block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 2px;
  background: var(--accent, var(--lava-500));
}

.help-block b {
  font-weight: 800;
  color: var(--foam-100);
}

.help-towers b {
  color: var(--accent, var(--foam-100));
}

.help-keys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
  margin: 0;
  font-size: 13px;
}

.help-keys div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.help-keys dt {
  flex: none;
  color: var(--haze-300);
}

.help-keys dd {
  margin: 0;
  color: var(--foam-200);
}

kbd {
  display: inline-block;
  min-width: 22px;
  padding: 0 6px;
  border: 1px solid var(--night-500);
  border-bottom-width: 2px;
  background: var(--night-600);
  font: 700 12px/18px var(--font);
  text-align: center;
  color: var(--foam-100);
}

/* ───────────────────────── 10. 큰 버튼 ───────────────────────── */
.btn {
  --cut: 11px;
  --fill: linear-gradient(180deg, rgba(17, 26, 54, 0.84), rgba(7, 11, 24, 0.88));
  --edge: rgba(151, 166, 204, 0.5);
  min-width: 132px;
  min-height: 50px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--foam-100);
}

.btn--lava {
  --fill: var(--lava-fill);
  --edge: var(--lava-100);
  color: var(--char);
}

.btn:disabled,
.btn.is-disabled {
  --fill: var(--slab-fill);
  --edge: rgba(151, 166, 204, 0.2);
  color: var(--haze-400);
  cursor: default;
}

.hud-tool:active,
.hud-action:active,
.panel-card:active,
.panel-btn:active,
.btn:active {
  filter: brightness(0.9);
  transform: translateY(1px);
}

/* ───────────────────────── 11. 대화 상자 ───────────────────────── */
.dialog {
  --cut: 18px;
  --fill: linear-gradient(180deg, rgba(17, 26, 54, 0.97), rgba(7, 11, 24, 0.98));
  --edge: rgba(151, 166, 204, 0.42);
  --pad-x: 22px;
  --pad-b: 20px;
  position: relative;
  width: min(430px, 100%);
  max-height: 100%;
  padding: 22px var(--pad-x) var(--pad-b);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.dialog::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 0;
  width: 38%;
  height: 2px;
  background: linear-gradient(90deg, var(--lava-500), rgba(255, 107, 26, 0));
  pointer-events: none;
}

.dialog-kicker {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--lava-300);
}

.dialog-title {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.dialog-text {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--foam-200);
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.dialog-actions .btn {
  flex: 1 1 132px;
}

/* ───────────────────────── 12. 결과 · 오류 ───────────────────────── */
.screen--result {
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(210, 58, 11, 0.3), rgba(210, 58, 11, 0) 60%),
    rgba(4, 6, 13, 0.78);
}

.screen--result[data-outcome="lost"] {
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(255, 67, 56, 0.2), rgba(255, 67, 56, 0) 60%),
    rgba(4, 6, 13, 0.86);
}

.result {
  width: min(440px, 100%);
  display: grid;
  gap: 16px;
}

.result-title {
  margin: 0;
  font-size: clamp(28px, 7vw, 36px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--lava-100);
}

.result-stars {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.result-star {
  width: 38px;
  height: 38px;
  fill: var(--night-600);
  stroke: var(--night-500);
  stroke-width: 1;
  stroke-linejoin: round;
}

.result-star.is-lit {
  fill: var(--lava-300);
  stroke: var(--lava-100);
  animation: star-pop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.result-star.is-lit:nth-child(2) { animation-delay: 0.12s; }
.result-star.is-lit:nth-child(3) { animation-delay: 0.24s; }

.result-figures {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 8px;
  margin: 0;
}

.result-figure {
  min-width: 0;
  margin: 0;
  padding: 9px 12px 10px;
  border-left: 2px solid var(--night-500);
  background: rgba(151, 166, 204, 0.07);
}

.result-figure dt {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--haze-300);
}

.result-figure dd {
  margin: 2px 0 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  color: var(--foam-200);
}

.result-figure--score {
  border-left-color: var(--lava-500);
}

.result-figure--score dd {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--lava-100);
}

.result-record {
  display: inline-block;
  margin: 10px 0 0;
  padding: 3px 12px;
  background: var(--lava-300);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--char);
  transform: skewX(-12deg);
}

/* 졌을 때: 식은 재의 색 */
.screen--result[data-outcome="lost"] .dialog {
  --edge: rgba(255, 67, 56, 0.5);
}

.screen--result[data-outcome="lost"] .dialog::before {
  background: linear-gradient(90deg, var(--ember), rgba(255, 67, 56, 0));
}

.screen--result[data-outcome="lost"] .dialog-kicker {
  color: var(--ember);
}

.screen--result[data-outcome="lost"] .result-title {
  color: #ffd9d4;
}

.screen--result[data-outcome="lost"] .result-stars {
  display: none;
}

.screen--result[data-outcome="lost"] .result-figure--score {
  border-left-color: var(--ember);
}

.screen--result[data-outcome="lost"] .result-figure--score dd {
  color: var(--foam-100);
}

/* 오류 */
.screen--fatal .dialog {
  --edge: rgba(255, 67, 56, 0.6);
  width: min(520px, 100%);
}

.screen--fatal .dialog::before {
  background: linear-gradient(90deg, var(--ember), rgba(255, 67, 56, 0));
}

.screen--fatal .dialog-kicker {
  color: var(--ember);
}

.fatal-message {
  max-height: 40vh;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 2px solid var(--ember);
  background: rgba(4, 6, 13, 0.6);
  overflow: auto;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;            /* 긴 주소·영문 오류도 상자 안에서 꺾인다 */
  color: #dfe6fb;
  -webkit-user-select: text;
  user-select: text;                  /* 오류 글은 복사할 수 있게 */
}

/* ───────────────────────── 13. 움직임 ───────────────────────── */
@keyframes screen-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes panel-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hud-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.16); color: #fff; }
  100% { transform: scale(1); }
}

@keyframes hud-short {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); color: var(--ember); }
  40% { transform: translateX(3px); color: var(--ember); }
  60% { transform: translateX(-2px); color: var(--ember); }
  80% { transform: translateX(2px); color: var(--ember); }
}

@keyframes danger-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@keyframes armed-pulse {
  from { filter: brightness(0.92); }
  to { filter: brightness(1.22); }
}

@keyframes counting-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}

@keyframes alert-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.25; }
}

@keyframes ember-rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: 0.9; }
  70% { opacity: 0.5; }
  100% { transform: translate3d(3vw, -44vh, 0); opacity: 0; }
}

@keyframes loading-slide {
  0% { left: -36%; }
  100% { left: 100%; }
}

@keyframes star-pop {
  from { opacity: 0; transform: scale(0.3) rotate(-24deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

/* ───────────────────────── 14. 화면 크기별 ───────────────────────── */

/* 세로 화면 · 좁은 화면 (기준: 375x812)
   위: 계기판 한 줄 + 도구 버튼 한 줄.  아래: 공습 | 다음 웨이브, 그 밑에 패널
   셋째 조건은 가로지만 좁고 높은 창(폭 561~619px, 높이 481px 이상)이다. 양옆 버튼 사이에 패널이
   들어갈 폭(카드 두 장 232px)이 안 나와서 세로 화면처럼 패널을 아랫줄로 내린다. */
@media (orientation: portrait), (max-width: 560px), (max-width: 619px) and (min-height: 481px) {
  #app {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(min-content, 1fr) auto minmax(0, auto);
    grid-template-areas:
      "top    top"
      "hint   hint"
      "strike next"
      "panel  panel";
  }

  .hud-stats {
    max-width: 520px;
  }

  #panel {
    width: 100%;
    max-width: none;
    margin-top: 8px;
    max-height: min(46vh, 330px);
    max-height: min(46dvh, 330px);
  }

  .panel-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 타이틀: 영상은 위, 글은 아래 */
  .screen--loading,
  .screen--title {
    place-items: end stretch;
  }

  .loading-box,
  .title-body {
    width: 100%;
    margin: 0 0 clamp(8px, 4vh, 40px);
  }

  .title-video {
    right: auto;
    left: 0;
    width: 100%;
    height: max(100vw, 62vh);
    height: max(100vw, 62dvh);
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  }

  .title-scrim {
    background: linear-gradient(0deg, rgba(4, 6, 13, 0.96) 0%, rgba(4, 6, 13, 0.72) 36%, rgba(4, 6, 13, 0) 62%);
  }

  .title-logo {
    font-size: clamp(46px, 15vw, 96px);
  }

  .title-cta .btn {
    flex: 1 1 0;
  }

  .help-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

/* 세로로 세운 태블릿: 패널이 넓으니 카드를 한 줄로 */
@media (orientation: portrait) and (min-width: 640px) {
  .panel-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .help-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
  }
}

/* 아주 좁은 화면 (360px 미만) */
@media (max-width: 359px) {
  .hud-stat {
    column-gap: 6px;
    padding-left: 9px;
    padding-right: 5px;
  }

  .hud-label {
    letter-spacing: 0;
  }

  .hud-value {
    font-size: 17px;
  }

  .hud-action--next {
    min-width: 146px;
  }

  .hud-action--strike {
    min-width: 88px;
  }

  .panel-card-key {
    display: none;                    /* 카드가 좁아 이름이 잘린다 */
  }

  .help-keys {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 가로로 누운 휴대폰 (기준: 812x375) — 높이가 모자라니 모든 것을 낮춘다.
   위: 계기판(왼쪽) · 도구(오른쪽) 한 줄.  아래: 공습 | 패널 | 다음 웨이브 한 줄 */
@media (orientation: landscape) and (max-height: 480px) {
  :root {
    --pad: 8px;
  }

  .hud-stats {
    max-width: 400px;
    min-height: 46px;
  }

  .hud-stat {
    padding-top: 5px;
    padding-bottom: 8px;
  }

  .hud-value {
    font-size: 17px;
  }

  .hud-action {
    min-height: 46px;
    font-size: 14px;
  }

  .hud-action--strike {
    min-width: 88px;
    padding: 0 12px;
  }

  .hud-action--next {
    min-width: 146px;
    padding: 0 10px 0 14px;
  }

  .hud-hint {
    margin-bottom: 6px;
    padding: 5px 12px;
    font-size: 12.5px;
  }

  #panel {
    width: calc(100% - 16px);
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    padding: 10px 10px 6px;           /* 위 10px + 머리줄 26px + 틈 8px = 닫기 버튼 44px. 아래는 안내 줄이 여백을 겸한다 */
  }

  .panel-note {                       /* 늘 자리를 차지하는 줄이라 높이가 모자란 화면에서는 바짝 붙인다 */
    margin-top: 3px;
    font-size: 11px;
  }

  .panel-cards {
    gap: 6px;
  }

  .panel-card {
    min-height: 54px;
    padding: 7px 8px 7px 11px;
  }

  .panel-card-key {
    display: none;                    /* 카드가 좁아 이름이 잘린다. 단축키 표시는 뺀다 */
  }

  .panel-card-name {
    font-size: 13px;
  }

  .panel-card-cost {
    font-size: 12.5px;
  }

  .panel-card-desc {
    font-size: 11px;
  }

  .panel-stat {
    padding: 4px 8px 5px;
  }

  .panel-actions {
    margin-top: 6px;
  }

  .screen {
    padding:
      calc(10px + var(--safe-t))
      calc(14px + var(--safe-r))
      calc(10px + var(--safe-b))
      calc(14px + var(--safe-l));
  }

  .loading-box,
  .title-body {
    margin-bottom: 4px;
  }

  .brand-line {
    margin-bottom: 4px;
    font-size: 11px;
  }

  .title-logo {
    margin-bottom: 8px;
    font-size: clamp(38px, 15vh, 68px);
  }

  .title-lead {
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.45;
  }

  .title-best {
    margin-top: 8px;
    font-size: 12px;
  }

  .btn {
    min-height: 46px;
  }

  .dialog {
    --pad-x: 18px;
    --pad-b: 14px;
    padding-top: 16px;
  }

  .dialog-title {
    font-size: 22px;
  }

  .dialog-actions {
    margin-top: 12px;
  }

  /* 결과는 좌우 두 칸으로 */
  .result {
    width: min(640px, 100%);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 18px;
  }

  .result-title {
    font-size: 28px;
  }

  /* 조작법: 닫기 버튼을 오른쪽 위로 올려 한 화면에 다 들어오게 한다 */
  .help-foot {
    position: absolute;
    top: 12px;
    right: 16px;
    padding: 0;
  }

  .help-body {
    margin-top: 10px;
  }

  .help-foot .btn {
    min-width: 112px;
    min-height: 44px;
  }

  .help-grid {
    gap: 8px 20px;
  }

  .help-block ul {
    gap: 3px;
    font-size: 12.5px;
  }
}

/* 가로지만 폭이 좁은 화면(720px 미만): 가운데 패널에 카드 네 장이 안 들어간다 */
@media (orientation: landscape) and (min-width: 561px) and (max-width: 719px) {
  .panel-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 넓은 화면 (기준: 1280x800) */
@media (min-width: 1024px) and (min-height: 640px) {
  :root {
    --pad: 18px;
  }

  .hud-stats {
    max-width: 500px;
    min-height: 60px;
  }

  .hud-stat {
    column-gap: 11px;
    padding: 9px 12px 12px 17px;
  }

  .hud-icon {
    width: 24px;
    height: 24px;
  }

  .hud-label {
    font-size: 11.5px;
  }

  .hud-value {
    font-size: 23px;
  }

  #hud-city::before,
  #hud-city::after {
    width: 72px;
  }

  .hud-tool {
    width: 48px;
    height: 48px;
    font-size: 14px;
  }

  .hud-tool--pause,
  .hud-tool--sound {
    font-size: 0;
  }

  .hud-action {
    min-height: 58px;
    padding-left: 22px;
    padding-right: 22px;
    font-size: 16px;
  }

  .hud-action--strike {
    min-width: 124px;
  }

  .hud-action--next {
    min-width: 200px;
    padding-right: 16px;
  }

  .hud-hint {
    font-size: 14px;
  }

  #panel {
    padding: 12px 14px 14px;
  }

  .panel-card {
    min-height: 72px;
    padding: 11px 12px 11px 16px;
  }

  .panel-card-name {
    font-size: 15px;
  }

  .panel-card-desc {
    font-size: 12.5px;
  }

  .screen {
    padding:
      calc(28px + var(--safe-t))
      calc(28px + var(--safe-r))
      calc(28px + var(--safe-b))
      calc(28px + var(--safe-l));
  }
}

/* 패널 폭에 따른 카드 열 수 (컨테이너 질의)
   위의 화면 크기별 규칙은 컨테이너 질의를 모르는 브라우저를 위한 기본값이고, 아는 브라우저에서는 여기가 이긴다.
   가로 화면에서는 패널이 양옆 버튼 사이에 끼어 있어, 화면 폭만 보고 열 수를 정하면
   창 폭 600~1000px 근처에서 카드 네 장이 들어가지 않아 이름이 잘린다. 그래서 패널 안쪽 폭을 직접 잰다.
   기준 치수: 카드 한 장 = 이름 42 + 값 45 + 안쪽 여백 25 = 112px, 단축키 표시를 넣으면 +23px */
@container panel (max-width: 495.98px) {
  .panel-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container panel (min-width: 496px) {
  .panel-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 네 장이 겨우 들어가는 폭(496~584px)과 두 장이 겨우 들어가는 폭(288px 미만)에서는
   단축키 표시를 빼서 이름 자리를 낸다 */
@container panel (min-width: 496px) and (max-width: 583.98px) {
  .panel-card-key {
    display: none;
  }
}

@container panel (max-width: 287.98px) {
  .panel-card-key {
    display: none;
  }
}

/* 가로로 누운 휴대폰: 글자와 여백이 작고 단축키 표시가 없어 카드 한 장이 104px 이면 된다 */
@media (orientation: landscape) and (max-height: 480px) {
  @container panel (min-width: 444px) {
    .panel-cards {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
}

/* ───────────────────────── 15. 입력 장치별 · 움직임 줄이기 ───────────────────────── */

/* 마우스가 있을 때만 올려놓기 효과를 준다(터치에서는 눌린 채 남는다) */
@media (hover: hover) and (pointer: fine) {
  .hud-tool:hover,
  .hud-action:not(:disabled):not(.is-disabled):hover,
  .panel-card:not(:disabled):not(.is-disabled):hover,
  .panel-btn:not(:disabled):not(.is-disabled):hover,
  .btn:not(:disabled):not(.is-disabled):hover {
    filter: brightness(1.14);
  }

  .panel-close:hover {
    color: var(--foam-100);
  }
}

/* 터치 기기에서는 단축키 안내를 숨긴다 */
@media (hover: none) and (pointer: coarse) {
  .kbd-only,
  .panel-card-key {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .scene-embers {
    display: none;
  }
}

/* ---- 결과 화면의 말씀 카드 ---- */
.result-verse { display: flex; gap: 14px; align-items: center; margin: 14px 0 4px; padding: 12px; border: 1px solid rgba(236, 196, 120, 0.35); border-radius: 10px; background: rgba(10, 12, 22, 0.6); text-align: left; }
.result-verse[hidden] { display: none; }
.result-verse img { width: clamp(84px, 22vw, 132px); height: auto; border-radius: 6px; flex: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); }
.result-verse figcaption { min-width: 0; }
.result-verse-text { margin: 0 0 6px; font-family: "Nanum Myeongjo", "Batang", serif; font-size: clamp(13px, 1.9vh, 16px); line-height: 1.6; color: #f4eee2; word-break: keep-all; }
.result-verse-ref { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: #ecc478; }
.result-verse-save { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; text-decoration: none; }
@media (max-height: 520px) { .result-verse-text { display: none; } .result-verse img { width: 64px; } }

.help-credits { margin: 14px 0 0; font-size: 11px; line-height: 1.5; opacity: 0.65; }

#link-find { text-decoration: none; display: inline-flex; align-items: center; }
#link-find[hidden] { display: none; }

/* 타이틀 화면 광고 */
.title-ad { margin-top: 14px; width: 320px; max-width: 100%; min-height: 100px; position: relative; z-index: 2; }
@media (max-height: 560px) { .title-ad { display: none; } }

/* 결과 화면 광고 */
.result-ad { display: flex; justify-content: center; margin: 10px auto 4px; width: 320px; max-width: 100%; min-height: 100px; }
@media (max-height: 600px) { .result-ad { display: none; } }
#screen-result .dialog { max-height: calc(100dvh - 24px); overflow-y: auto; }

/* 언어 선택(타이틀) · 중국어·일본어 줄바꿈 */
.title-lang { display: flex; justify-content: center; margin-top: 10px; }
.lang-picker { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #f4eee2; }
.lang-picker select { min-height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(236, 196, 120, 0.5); background: rgba(10, 12, 22, 0.75); color: #f4eee2; font: inherit; }
:lang(zh) .result-verse-text, :lang(ja) .result-verse-text, :lang(zh) body, :lang(ja) body { word-break: normal; }
.result-verse-save[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }