/*
 * PHANTOM HEIST / premium neo-noir caper UI
 * Code-native materials only: no raster nine-slice skins, parchment,
 * casino bevels, or platform emoji belong to the interface layer.
 */

:root {
  color-scheme: dark;
  --vault-black: #070a10;
  --midnight-steel: #15202d;
  --warm-ivory: #f4e7ca;
  --brushed-brass: #d8a64a;
  --electric-cyan: #63d9f2;
  --alarm-coral: #ff5a68;
  --surface-0: #0b1018;
  --surface-1: #101823;
  --surface-2: #172331;
  --ivory-72: rgba(244, 231, 202, 0.72);
  --ivory-56: rgba(244, 231, 202, 0.56); /* 패널 표면(7,10,16) 위 보조 글줄 하한: 0.48은 4.3으로 4.5에 못 미친다(2026-08-26 실측) */
  --ivory-48: rgba(244, 231, 202, 0.48);
  --ivory-16: rgba(244, 231, 202, 0.16);
  --ivory-09: rgba(244, 231, 202, 0.09);
  --brass-42: rgba(216, 166, 74, 0.42);
  --cyan-42: rgba(99, 217, 242, 0.42);
  --coral-42: rgba(255, 90, 104, 0.42);
  --bg: var(--vault-black);
  --panel: var(--surface-1);
  --panel2: var(--midnight-steel);
  --line: var(--ivory-09);
  --text: var(--warm-ivory);
  --muted: var(--ivory-72);
  --faint: var(--ivory-48);
  --gold: var(--brushed-brass);
  --gold-hi: var(--warm-ivory);
  --red: var(--alarm-coral);
  --spectral: var(--electric-cyan);
}

html {
  background: var(--vault-black);
  color-scheme: dark;
}

body,
button,
input,
textarea,
select {
  font-family: "Noto Sans KR", system-ui, -apple-system, sans-serif;
  font-synthesis: none;
}

body {
  background:
    radial-gradient(ellipse at 50% -18%, rgba(244, 231, 202, 0.06), transparent 42%),
    linear-gradient(180deg, #0b111a 0%, var(--vault-black) 62%);
}

body::before,
body.artbg::before {
  background:
    linear-gradient(rgba(244, 231, 202, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 231, 202, 0.014) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 1;
  filter: none;
}

body::after {
  background:
    linear-gradient(90deg, rgba(7, 10, 16, 0.68), transparent 24%, transparent 76%, rgba(7, 10, 16, 0.68)),
    radial-gradient(ellipse at 50% 34%, transparent 35%, rgba(7, 10, 16, 0.7) 100%);
}

button {
  min-height: 48px;
  border: 0;
  color: inherit;
  touch-action: manipulation;
}

button:focus-visible,
[tabindex]:focus-visible,
#board:focus-visible {
  outline: 2px solid var(--warm-ivory);
  outline-offset: 3px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.screen {
  max-width: 480px;
  padding:
    max(calc(env(safe-area-inset-top, 0px) + 14px), 26px) 18px
    max(calc(env(safe-area-inset-bottom, 0px) + 14px), 18px);
}

.chip b,
.lv-label,
.daily-streak,
.daily-status,
.adaptive-meta,
.v-sub,
.ver,
.challenge-score,
.challenge-result-row,
.challenge-compare,
.challenge-pb,
.challenge-delta,
.bag,
.grade-cap {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- Home / campaign hierarchy ---------- */

#home {
  justify-content: flex-end;
  gap: 10px;
  isolation: isolate;
  overflow: hidden;
}

#home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(244, 231, 202, 0.05) 50%, transparent 50.2%),
    linear-gradient(180deg, transparent 64%, rgba(216, 166, 74, 0.06) 64.2%, transparent 64.4%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%);
  mask-image: linear-gradient(180deg, #000, transparent 78%);
}

body.artbg #home::before {
  left: -7%;
  right: -7%;
  top: 0;
  height: 73%;
  z-index: -3;
  background:
    linear-gradient(180deg, rgba(7, 10, 16, 0.1), rgba(7, 10, 16, 0.18) 48%, var(--vault-black) 94%),
    linear-gradient(90deg, rgba(7, 10, 16, 0.38), transparent 50%, rgba(7, 10, 16, 0.38)),
    var(--homebg) center 38% / cover no-repeat;
  opacity: 0.72;
  filter: saturate(0.78) contrast(1.08);
  -webkit-mask-image: linear-gradient(180deg, #000 0 63%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0 63%, transparent 100%);
}

.brand {
  position: relative;
  width: 100%;
  margin: 0 0 auto;
  padding: 4px 70px 0 14px;
  text-align: left;
}

.brand::before {
  content: "";
  position: absolute;
  top: 3px;
  right: 4px;
  width: 54px;
  height: 54px;
  border: 1px solid var(--brass-42);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, var(--brushed-brass) 0 3px, transparent 3.5px),
    linear-gradient(var(--brushed-brass), var(--brushed-brass)) 50% 67% / 2px 19px no-repeat,
    conic-gradient(from 45deg, transparent 0 12%, rgba(216, 166, 74, 0.22) 12% 13%, transparent 13% 37%, rgba(216, 166, 74, 0.22) 37% 38%, transparent 38% 62%, rgba(216, 166, 74, 0.22) 62% 63%, transparent 63% 87%, rgba(216, 166, 74, 0.22) 87% 88%, transparent 88%);
  box-shadow:
    inset 0 0 0 7px rgba(7, 10, 16, 0.66),
    0 0 22px rgba(216, 166, 74, 0.12);
}

.brand-eyebrow {
  margin: 0 0 5px;
  color: var(--brushed-brass);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3em;
  line-height: 1.2;
}

.brand-title {
  color: var(--warm-ivory);
  font-family: "Black Han Sans", "Noto Sans KR", sans-serif;
  font-size: clamp(40px, 11vw, 52px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-shadow: 0 12px 30px rgba(0, 0, 0, 0.72);
}

.brand-sub {
  max-width: 29em;
  margin-top: 9px;
  color: var(--ivory-72);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
  word-break: keep-all;
}

.brand::after {
  content: "";
  width: min(220px, 62%);
  height: 1px;
  margin-top: 12px;
  background: linear-gradient(90deg, var(--brushed-brass), rgba(216, 166, 74, 0));
}

.cta,
.p-btn {
  border-image: none;
  filter: none;
  text-shadow: none;
}

.cta {
  position: relative;
  width: 100%;
  min-height: 62px;
  padding: 14px 48px 14px 20px;
  overflow: hidden;
  border: 1px solid var(--warm-ivory);
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(244, 231, 202, 0.055) 0 1px, transparent 1px 5px),
    var(--brushed-brass);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
  color: var(--vault-black);
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

/* CTA 우측 존: 용도 불명 사선 대신 게임의 핵심 모티프인 키홀 — '이 문을 딴다' */
.cta::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 39px;
  border-left: 1px solid rgba(7, 10, 16, 0.28);
  background:
    radial-gradient(circle 4px at center calc(50% - 4px), var(--vault-black) 0 3.2px, transparent 3.9px) no-repeat,
    linear-gradient(var(--vault-black), var(--vault-black)) center calc(50% + 4px) / 3px 8px no-repeat,
    rgba(7, 10, 16, 0.08);
}

.cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 39px;
  bottom: 0;
  height: 3px;
  background: var(--brushed-brass);
  /* 휴면 0.24는 진행 바로 오독됐다(실검수). 언더라인은 순수 인터랙션 어포던스다 */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.cta:hover::after,
.cta:focus-visible::after {
  transform: scaleX(1);
}

.cta:active {
  transform: translateY(2px);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.36);
}

/* D3: CTA 위계 — 주행(건물 침입 계속) + 보조행(다음 잠금 번호·이름).
   홈은 고정 뷰포트 플렉스라 shrink가 걸리면 2행 CTA가 잘린다 → 내용 높이 고정 */
#home .cta { flex-shrink: 0; }
.cta .cta-main { display: block; line-height: 1.45; }
.cta .cta-sub {
  display: block;
  margin-top: 3px;
  color: rgba(7, 10, 16, 0.72);
  /* 접근성 배율이 .cta 폰트를 calc(20px*scale)!important로 관리한다.
     고정 px는 배율 연동(비율 게이트)을 끊으므로 em으로만 지정한다 */
  font-size: 0.6em;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

/* 전 구간 1열. 주간 카드 한 줄 구성(아이브로 93px+제목+진입 라벨+meta 열)은 카드
   폭 378px 아래에서 성립하지 않는데, 2열이 주는 열 폭은 최대 케이스(700px 세로모드,
   홈 상한 600px)에서도 278px에 그친다는 실측에 따른다. 구형 2열은 430px에서 글자
   세로 쌓임, 가로모드에서 제목 폭 0을 만들었다 */
.mode-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
}

.daily-card,
.adaptive-cta {
  min-width: 0;
  min-height: 80px;
  margin: 0;
  transform: none;
  border: 1px solid var(--ivory-16);
  border-image: none;
  border-radius: 2px;
  background: rgba(11, 16, 24, 0.93);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26);
  filter: none;
  color: var(--warm-ivory);
}

.daily-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 9px 9px 12px;
}

.daily-card::before { display: none; }

.daily-card::after {
  display: none;
}

.daily-copy {
  min-width: 0;
}

.daily-head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.daily-title {
  min-width: 0;
  overflow: hidden;
  color: var(--brushed-brass);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-streak {
  flex: 0 0 auto;
  color: var(--ivory-48);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.daily-status {
  min-width: 0;
  margin-top: 5px;
  padding: 0;
  overflow: hidden;
  color: var(--ivory-72);
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-btn {
  min-width: 62px;
  min-height: 48px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--brass-42);
  border-radius: 2px;
  background: rgba(216, 166, 74, 0.1);
  color: var(--brushed-brass);
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.daily-btn:hover,
.daily-btn:focus-visible {
  background: rgba(216, 166, 74, 0.18);
}

.daily-btn:active {
  transform: translateY(1px);
  background: rgba(216, 166, 74, 0.22);
}

.daily-btn.done {
  border-color: var(--ivory-16);
  background: transparent;
  color: var(--ivory-48);
}

.adaptive-cta {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
}

.adaptive-cta::after {
  left: 0;
  right: auto;
  bottom: 0;
  width: 2px;
  height: 100%;
  background: var(--brushed-brass);
  opacity: 1;
}

.adaptive-cta:hover,
.adaptive-cta:focus-visible {
  border-color: var(--ivory-48);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3), inset 0 0 24px rgba(244, 231, 202, 0.05);
}

.adaptive-cta:active {
  transform: translateY(1px);
}

.adaptive-mark {
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid var(--brass-42);
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 5px rgba(216, 166, 74, 0.05);
}

.adaptive-mark::before,
.adaptive-mark::after {
  content: "";
  position: absolute;
  background: var(--electric-cyan);
}

.adaptive-mark::before {
  top: 3px;
  bottom: 3px;
  left: 50%;
  width: 1px;
}

.adaptive-mark::after {
  top: 50%;
  left: 3px;
  right: 3px;
  height: 1px;
}

.adaptive-copy {
  gap: 1px;
}

.adaptive-eyebrow {
  color: var(--brushed-brass);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
}

.adaptive-title {
  color: var(--warm-ivory);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  word-break: keep-all;
}

.adaptive-meta {
  overflow: hidden;
  color: var(--ivory-48);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adaptive-go {
  position: relative;
  width: 12px;
  height: 12px;
  color: transparent;
}

.adaptive-go::before {
  content: "";
  position: absolute;
  inset: 2px 3px 2px 1px;
  border-top: 1px solid var(--brushed-brass);
  border-right: 1px solid var(--brushed-brass);
  transform: rotate(45deg);
}

/* Authored CSS silhouettes replace the glossy casual building renders. */
.buildings {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 4px 0 0;
}

.buildings::before {
  left: 8%;
  right: 8%;
  top: 25px;
  border: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--brass-42) 0 6px, transparent 6px 11px);
}

.bld,
.bld.tappable {
  min-width: 0;
  min-height: 68px;
  color: var(--warm-ivory);
  font-family: "Noto Sans KR", system-ui, sans-serif;
}

/* 건물 아이콘(2026-08-25 소유자 지시): CSS 실루엣을 걷어내고 노어 톤 3D 그림 에셋을 쓴다.
   assets/bld_1~5.png = 편의점·전당포·은행·미술관·카지노(캠페인 순서), 256px 알파 컷아웃. */

/* 잠긴 건물은 진행도 글줄 대신 낮은 자물쇠 마크가 들어가 내용 높이가 줄고, 버튼 기본 세로
   중앙정렬 때문에 아이콘이 이웃보다 아래로 처졌다(실측 2x 스트립에서 약 15px). 위 기준으로 쌓는다. */
.bld {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.bld .ico {
  position: relative;
  display: block;
  width: 54px;
  height: 50px;
  margin: 0 auto;
  color: transparent;
  font-size: 0;
  line-height: 1;
  background: center bottom / contain no-repeat;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55));
}

.bld .ico img,
.bld .ico .status-mark { display: none; }

.bld .ico::before,
.bld .ico::after { content: none; }

.bld:nth-child(1) .ico { background-image: url(assets/bld_1.png); }
.bld:nth-child(2) .ico { background-image: url(assets/bld_2.png); }
.bld:nth-child(3) .ico { background-image: url(assets/bld_3.png); }
.bld:nth-child(4) .ico { background-image: url(assets/bld_4.png); }
.bld:nth-child(5) .ico { background-image: url(assets/bld_5.png); }

.bld .nm,
.bld .pg {
  min-width: 0;
  margin-top: 2px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bld .nm { color: var(--ivory-56); }
.bld .pg { color: var(--brushed-brass); }
/* 접힘이 불가피한 폭(320)에서는 "12/12 해/제"처럼 단어 중간이 아니라 공백에서만 접는다.
   접근성 시트의 overflow-wrap: anywhere(배율 적층용)보다 특이도가 높아 이 둘에만 우선한다. */
.bld .nm,
.bld .pg { word-break: keep-all; overflow-wrap: normal; }

/* EN 최장 건물명 Pawn Shop이 12px에서 65.7px로 360px 폭 슬롯(64px)을 1.7px 초과해
   줄바꿈되고, 만재 홈 높이를 밀었다(실측 브랜드 -10px). 12px 하한은 지키고 EN만
   자간을 죈다(-0.03em ≈ 3px 회수). */
html[lang="en"] .bld .nm { letter-spacing: -0.03em; }
/* 진행도 "12/12 done"도 360폭 슬롯(64px)을 1~2px 넘겨 공백에서 접혔다(2026-08-26 실측). 같은 자간으로 회수. */
html[lang="en"] .bld .pg { letter-spacing: -0.03em; }


.bld.tappable:not(.done) .ico {
  filter: drop-shadow(0 0 8px rgba(216, 166, 74, 0.2));
}

.bld.tappable:not(.done) .nm { color: var(--warm-ivory); }
/* 잠금은 투명도가 아니라 밝기·채도 감산으로 표현한다. 투명하면 뒤의 점선 루트가 건물을 통과해 비친다(8/26 소유자 지적). */
.bld.locked { opacity: 1; }
.bld.locked .ico { filter: saturate(0.2) brightness(0.5) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55)); }
.bld.locked .nm { color: rgba(244, 231, 202, 0.34); }

.vault-card {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 50px;
  padding: 8px 13px;
  border: 1px solid var(--ivory-16);
  border-image: none;
  border-radius: 2px;
  background: var(--surface-0);
  box-shadow: none;
  filter: none;
  color: var(--warm-ivory);
  font: inherit;
  text-align: left;
}

.vault-card::before { display: none; }

.vault-card:hover,
.vault-card:focus-visible {
  border-color: var(--brass-42);
  background: var(--surface-1);
}

.vault-card:active { transform: translateY(1px); }
.vault-card .v-ico { display: inline-grid; }

.vault-card .v-mid {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.vault-card .v-title,
.vault-card .v-sub,
.vault-card .v-go {
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.25;
}

.vault-card .v-title { color: var(--warm-ivory); font-weight: 900; }
.vault-card .v-sub { color: var(--ivory-48); }
.vault-card .v-go { color: var(--brushed-brass); font-weight: 800; }

.training-replay {
  display: inline-flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid var(--brass-42);
  border-radius: 2px;
  background: rgba(216, 166, 74, 0.06);
  color: var(--brushed-brass);
  font: 800 13px/1.25 "Noto Sans KR", system-ui, sans-serif;
  cursor: pointer;
}

.training-replay:hover,
.training-replay:focus-visible {
  border-color: var(--ivory-72);
  background: rgba(216, 166, 74, 0.1);
}

.ftue-home .mode-grid,
.ftue-home .buildings,
.ftue-home .vault-card {
  display: none;
}

.home-foot { min-height: 48px; margin-top: 0; }
.home-tools { gap: 8px; }

.mini-btn {
  position: relative;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid var(--ivory-16);
  border-image: none;
  border-radius: 2px;
  background: var(--surface-0);
  box-shadow: none;
  filter: none;
  color: var(--warm-ivory);
  font-size: 0;
}

.mini-btn:hover,
.mini-btn:focus-visible {
  border-color: var(--ivory-48);
  background: var(--surface-2);
}

.mini-btn:active { transform: translateY(1px); filter: none; }

.ver {
  color: var(--ivory-48);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ---------- Authored UI marks ---------- */

.status-mark,
.sound-icon,
.tool-icon,
.loot-token,
.grade-token {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  box-sizing: border-box;
}

.status-mark {
  --mark-color: var(--brushed-brass);
  width: 20px;
  height: 20px;
  color: var(--mark-color);
}

.panel > .status-mark {
  width: 48px;
  height: 48px;
  margin: 6px 0 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 166, 74, 0.1) 0 52%, transparent 53%);
  box-shadow: inset 0 0 0 6px rgba(7, 10, 16, 0.74), 0 0 18px rgba(216, 166, 74, 0.16);
}

.status-mark::before,
.status-mark::after,
#soundBtn::before,
#soundBtn::after,
.sound-icon::before,
.sound-icon::after,
.tool-icon::before,
.tool-icon::after,
.loot-token::before,
.loot-token::after,
.grade-token::before,
.grade-token::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.status-mark.loot::before,
.status-mark[data-kind="loot"]::before {
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  border: 1px solid var(--mark-color);
  background: rgba(216, 166, 74, 0.08);
}

/* 플레이스홀더 격자 인상 제거: 어닝 띠 + 중앙 문의 스토어프론트 실루엣 */
.status-mark.building::before,
.status-mark[data-kind="building"]::before {
  left: 3px;
  right: 3px;
  bottom: 2px;
  height: 13px;
  border: 1px solid var(--mark-color);
  background:
    repeating-linear-gradient(90deg, rgba(216, 166, 74, 0.4) 0 2px, transparent 2px 4px) top / 100% 4px no-repeat,
    linear-gradient(var(--mark-color), var(--mark-color)) bottom center / 4px 6px no-repeat,
    rgba(216, 166, 74, 0.06);
}

.status-mark.alarm,
.status-mark[data-kind="alarm"] { --mark-color: var(--alarm-coral); }

.status-mark.alarm::before,
.status-mark[data-kind="alarm"]::before {
  width: 14px;
  height: 14px;
  border: 1px solid var(--mark-color);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 90, 104, 0.24);
}

.status-mark.alarm::after,
.status-mark[data-kind="alarm"]::after {
  top: 4px;
  width: 2px;
  height: 6px;
  background: var(--mark-color);
  box-shadow: 0 8px 0 -0.25px var(--mark-color);
}

.status-mark.vault::before,
.status-mark[data-kind="vault"]::before {
  width: 16px;
  height: 16px;
  border: 1px solid var(--mark-color);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(216, 166, 74, 0.08);
}

/* 가로줄은 ⊖(제외 기호)로 오독됐다. 키홀로 바꿔 금고 문으로 읽히게 한다 */
.status-mark.vault::after,
.status-mark[data-kind="vault"]::after {
  width: 4px;
  height: 8px;
  background:
    radial-gradient(circle 2.2px at center 2.2px, var(--mark-color) 0 2px, transparent 2.4px),
    linear-gradient(var(--mark-color), var(--mark-color)) center bottom / 2px 4px no-repeat;
  box-shadow: 0 0 6px rgba(216, 166, 74, 0.22);
}

.status-mark.bag::before,
.status-mark[data-kind="bag"]::before {
  bottom: 2px;
  width: 15px;
  height: 12px;
  border: 1px solid var(--mark-color);
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
}

.status-mark.bag::after,
.status-mark[data-kind="bag"]::after {
  top: 1px;
  width: 8px;
  height: 6px;
  border: 1px solid var(--mark-color);
  border-bottom: 0;
  border-radius: 2px 0 0;
}

.status-mark.ad,
.status-mark[data-kind="ad"] { --mark-color: var(--brushed-brass); }

.status-mark.ad::before,
.status-mark[data-kind="ad"]::before {
  width: 18px;
  height: 13px;
  border: 1px solid var(--mark-color);
  border-radius: 2px;
}

.status-mark.ad::after,
.status-mark[data-kind="ad"]::after {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--mark-color);
}

#soundBtn::before,
.sound-icon::before {
  left: 12px;
  top: 17px;
  width: 10px;
  height: 14px;
  background: var(--warm-ivory);
  clip-path: polygon(0 32%, 38% 32%, 100% 0, 100% 100%, 38% 68%, 0 68%);
}

#soundBtn::after,
.sound-icon::after {
  left: 23px;
  top: 17px;
  width: 10px;
  height: 14px;
  border: 1px solid var(--ivory-72);
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left: 0;
  border-radius: 0 50% 50% 0;
}

#soundBtn > .sound-icon { display: none; }

#soundBtn.is-muted::after,
#soundBtn[aria-pressed="false"]::after {
  width: 12px;
  height: 1px;
  top: 23px;
  left: 23px;
  border: 0;
  border-radius: 0;
  background: var(--alarm-coral);
  transform: rotate(-45deg);
}

.tool-icon { width: 20px; height: 20px; }

.back-icon::before {
  left: 3px;
  top: 9px;
  width: 14px;
  height: 1px;
  background: var(--warm-ivory);
}

.back-icon::after {
  left: 3px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-left: 1px solid var(--warm-ivory);
  border-bottom: 1px solid var(--warm-ivory);
  transform: rotate(45deg);
}

.info-icon::before {
  inset: 2px;
  border: 1px solid var(--warm-ivory);
  border-radius: 50%;
}

.info-icon::after {
  left: 9px;
  top: 7px;
  width: 2px;
  height: 8px;
  background: var(--warm-ivory);
  box-shadow: 0 -3px 0 -0.25px var(--warm-ivory);
}

.privacy-icon::before {
  left: 4px;
  right: 4px;
  bottom: 3px;
  height: 10px;
  border: 1px solid var(--warm-ivory);
  border-radius: 2px;
  /* 몸통 안 키홀 점 — 자물쇠로 읽히게 */
  background: radial-gradient(circle at center 45%, var(--warm-ivory) 0 1.4px, transparent 2px);
}

.privacy-icon::after {
  left: 7px;
  top: 2px;
  width: 7px;
  height: 8px;
  /* 시안 반호는 전원 기호로 오독됐다. 몸통과 같은 색의 걸쇠로 통일 */
  border: 1px solid var(--warm-ivory);
  border-bottom: 0;
  border-radius: 2px 0 0;
}

.loot-token {
  --token-color: var(--brushed-brass);
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.loot-token::before {
  width: 15px;
  height: 15px;
  border: 1px solid var(--token-color);
  background: rgba(216, 166, 74, 0.08);
  transform: rotate(45deg);
}

.loot-token::after {
  width: 5px;
  height: 5px;
  border: 1px solid var(--warm-ivory);
  border-radius: 50%;
  background: var(--surface-0);
}

.loot-token[data-loot^="pawn"] { --token-color: var(--electric-cyan); }
.loot-token[data-loot^="pawn"]::before { border-radius: 50%; transform: none; }

.loot-token[data-loot^="bank"]::before {
  clip-path: polygon(50% 0, 100% 28%, 86% 28%, 86% 100%, 14% 100%, 14% 28%, 0 28%);
  transform: none;
}

.loot-token[data-loot^="gallery"] { --token-color: var(--warm-ivory); }
.loot-token[data-loot^="gallery"]::before { width: 16px; height: 12px; transform: none; }
.loot-token[data-loot^="casino"] { --token-color: var(--alarm-coral); }

.loot-token[data-loot^="casino"]::before {
  border-radius: 50%;
  transform: none;
  box-shadow: inset 0 0 0 3px rgba(255, 90, 104, 0.08);
}

.loot-fly.loot-token,
.loot-fly .loot-token { width: 32px; height: 32px; }

.grade-token { width: 20px; height: 20px; }

.grade-token.clear::before,
.grade-token[data-grade="clear"]::before {
  left: 3px;
  top: 9px;
  width: 7px;
  height: 4px;
  border-left: 2px solid var(--brushed-brass);
  border-bottom: 2px solid var(--brushed-brass);
  transform: rotate(-45deg);
}

.grade-token.phantom::before,
.grade-token[data-grade="phantom"]::before,
.lvbtn.ph::after,
.v-slot.ph::after {
  border: 1px solid var(--electric-cyan);
  background: var(--surface-0);
  clip-path: polygon(18% 30%, 38% 30%, 44% 4%, 70% 4%, 82% 30%, 100% 40%, 82% 55%, 20% 55%, 0 42%);
}

.grade-token.phantom::before,
.grade-token[data-grade="phantom"]::before { inset: 2px; }

/* ---------- In-game chrome ---------- */

#game { gap: 8px; }
.gtop { gap: 8px; }

#game .mini-btn {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  border-radius: 2px;
  font-size: 0;
}

.lv-label {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--brass-42);
  border-image: none;
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(216, 166, 74, 0.08), transparent 58%),
    var(--surface-0);
  box-shadow: none;
  filter: none;
  color: var(--warm-ivory);
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 900;
  text-shadow: none;
}

.lv-label .pos {
  /* 구분은 마크업의 실제 ' · ' 텍스트가 담당한다(D9). 마진을 겹치면 폭만 는다 */
  color: var(--ivory-48);
  font-size: 12px;
  font-weight: 700;
}

/* 320급 폭에서 EN 챌린지 명판은 2줄이 불가피하다(박스 169px, 12px 최소 폰트 계약상
   한 줄 수납 불가 실측). 세로 패딩을 줄여 2줄 콘텐츠(13px×1.5×2=39px)를 min-height
   48 안에 수납하면 헤더가 자라지 않아 적응형 보드가 230px 바닥을 지킨다(-6px 실측). */
@media (max-width: 344px) {
  .lv-label {
    padding-top: 3px;
    padding-bottom: 3px;
  }
}


.alarm {
  min-width: 60px;
  min-height: 48px;
  padding: 0 10px;
  gap: 6px;
  /* 점 세 개가 48px 상자 위쪽 가장자리에 붙어 있었다(세로 정렬 누락, 소유자 지적 2026-08-26). 가운데로. */
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ivory-16);
  border-radius: 2px;
  background: var(--surface-0);
  box-shadow: none;
}

.alarm i {
  width: 9px;
  height: 9px;
  border: 1px solid var(--ivory-16);
  background: transparent;
  box-shadow: none;
}

.alarm i.on {
  border-color: var(--alarm-coral);
  background: var(--alarm-coral);
  box-shadow: 0 0 9px rgba(255, 90, 104, 0.6);
}

.chips {
  gap: 5px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.chip {
  min-width: 0;
  padding: 6px 8px;
  overflow: hidden;
  border: 1px solid var(--ivory-09);
  border-radius: 2px;
  background: var(--surface-0);
  box-shadow: none;
  color: var(--ivory-48);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip::before { display: none; }

.chip b {
  color: var(--warm-ivory);
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.chip.gold b,
.chip.ready b { color: var(--brushed-brass); }

.chip.red b,
.chip.over b { color: var(--alarm-coral); }

.chip.ready {
  border-color: var(--brass-42);
  box-shadow: inset 0 -2px var(--brushed-brass);
}

/* Daily status uses multiple rows when all five readouts do not fit. */
#game.daily-live .alarm { display: none; }

#game.daily-live > .scene.hiddenmode { display: none; }

#game.daily-live .chips {
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  overflow: visible;
}

#game.daily-live .chip {
  flex: 0 0 auto;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

/* P1.3: 데일리도 캠페인과 같은 상단 시작 — 씬이 없으니 칩 바로 아래가 보드다 */
#game.daily-live > .boardwrap { align-items: flex-start; }

/* Keep the focus ring inside the width-bound canvas. */
#game.daily-live #board:focus-visible {
  outline-width: 3px;
  outline-offset: -7px;
}

.scene {
  border: 1px solid var(--ivory-09);
  border-radius: 2px;
  background: var(--surface-0);
  box-shadow: none;
}

.scene.art {
  min-height: 104px;
  padding: 7px 11px;
  border-color: var(--ivory-16);
}

/* P1.3: 라운드 중 씬 높이 불변. 보드가 씬 아래에서 시작하므로, 아트 플레이트가 늦게
   로드되며 씬이 자라면(프리아트 55px → 아트 115px 실측) 드래그 도중 보드가 61px
   밀려 입력이 어긋난다. 고정 높이로 클래스 전환·지연 로드와 무관하게 잠근다.
   적응형 확장은 min-height가 이 값을 이기므로 라운드 경계 확장은 유지된다. */
html:not([data-board-mode="text"]) #game:not(.adaptive-vault) > .scene {
  height: 116px;
  /* 고정은 shrink 0까지가 계약이다 — 컬럼이 넘치면 flex가 지정 높이를 깎는다 */
  flex: 0 0 auto;
}
/* 세로가 넉넉한 기기는 보드 아래가 비어 있었다(390x844 실측 약 200px 공백). 그만큼을
   씬에 주어 인물이 보이게 한다. 고정 높이 계약은 값만 커질 뿐 라운드 중 불변은 그대로다. */
@media (orientation: portrait) and (min-height: 760px) {
  html:not([data-board-mode="text"]) #game:not(.adaptive-vault) > .scene {
    height: 168px;
  }
}

/* 적응형은 홀드 중 씬이 확장되는 모드다. 보드가 씬 아래에 있으면 확장이 잡은 경로를
   밀어내므로, 적응형만 하단 고정을 유지한다(씬은 위쪽 여백으로 자란다) */
#game.adaptive-vault > .boardwrap {
  align-items: flex-end;
}

.scene.art .scene-bg,
.scene.art .scene-open-bg,
.scene.art .scene-guard-bg {
  border-radius: 2px;
  filter: brightness(0.46) saturate(0.58) contrast(1.2);
}

.scene.art .scene-open-bg { opacity: 0.34; }

/* Production scene plates: the raster carries the chamber/character art while
   the beam, scan, and alarm wash remain live state layers. */
.scene.art-v2 .scene-chamber,
.scene.art-v2 .vault-rig,
.scene.art-v2 .guard-rig,
.scene.art-v2 .phantom-rig {
  display: none;
}

.scene.art-v2 .scene-bg,
.scene.art-v2 .scene-open-bg,
.scene.art-v2 .scene-guard-bg {
  opacity: 0;
  transition: opacity 280ms ease;
}

.scene.art-v2 .scene-bg { opacity: 1; }

.scene.art-v2[data-motion="guard-warn"] .scene-bg,
.scene.art-v2[data-motion="guard-watch"] .scene-bg,
.scene.art-v2[data-motion="adaptive-guard"] .scene-bg,
.scene.art-v2[data-motion="guard-caught"] .scene-bg,
.scene.art-v2[data-motion="caught"] .scene-bg,
.scene.art-v2[data-motion="escape-fail"] .scene-bg,
.scene.art-v2[data-motion="breach"] .scene-bg,
.scene.art-v2[data-motion="success"] .scene-bg,
.scene.art-v2[data-motion="escape-clear"] .scene-bg {
  opacity: 0;
}

.scene.art-v2[data-motion="guard-warn"] .scene-guard-bg,
.scene.art-v2[data-motion="guard-watch"] .scene-guard-bg,
.scene.art-v2[data-motion="adaptive-guard"] .scene-guard-bg,
.scene.art-v2[data-motion="guard-caught"] .scene-guard-bg,
.scene.art-v2[data-motion="caught"] .scene-guard-bg,
.scene.art-v2[data-motion="escape-fail"] .scene-guard-bg {
  opacity: 1;
}

.scene.art-v2[data-motion="breach"] .scene-open-bg,
.scene.art-v2[data-motion="success"] .scene-open-bg,
.scene.art-v2[data-motion="escape-clear"] .scene-open-bg {
  opacity: 1;
}

/* 좌우 배치(left/right)는 scene-art.css가 상태·화면별로 단독 소유한다. 여기 값을 두면 같은 특이도의 후행
   시트에 가려 죽은 값이 되고, 로드 순서가 바뀌는 순간 되살아난다(8/26 교차 검토 지적: 31%/30% 잔존). */
.scene.art-v2 .scene-msg {
  position: absolute;
  top: 50%;
  width: auto;
  max-width: none;
  min-width: 0;
  transform: translateY(-50%);
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

.scene.art::after {
  background:
    linear-gradient(90deg, rgba(7, 10, 16, 0.08) 0 22%, rgba(7, 10, 16, 0.22) 34%, rgba(7, 10, 16, 0.78) 67% 84%, rgba(7, 10, 16, 0.38)),
    linear-gradient(180deg, transparent 45%, rgba(7, 10, 16, 0.5));
}

.scene.art .scene-msg {
  padding: 7px 9px;
  border-left: 0;
  background: rgba(7, 10, 16, 0.78);
  color: var(--warm-ivory);
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.82);
  word-break: keep-all;
}

.scene.art .bag {
  min-height: 28px;
  padding: 4px 7px;
  border: 1px solid var(--brass-42);
  border-radius: 2px;
  background: rgba(7, 10, 16, 0.84);
  box-shadow: none;
  color: var(--ivory-72);
  font-size: 12px;
  text-shadow: none;
}

#game > .scene.art-v2 .bag {
  position: absolute;
  left: 10px;
  top: 7px;
  bottom: auto;
  z-index: 11;
  transform: none;
}

.scene[data-adaptive-phase="choice"] .bag,
.scene[data-adaptive-phase="route"] .bag {
  display: none;
}

/* FTUE 중에는 아트 로딩 여부와 무관하게 가방을 숨긴다. art-v2 한정이면 플레이트가
   붙기 전 짧은 창에 가방이 비쳐, 라이브 클록 캡처가 실상태를 그대로 적발했다(8/24). */
#game.ftue-live .bag {
  display: none;
}

.bag-mark {
  width: 9px;
  height: 9px;
  border: 1px solid var(--brushed-brass);
  border-radius: 1px;
  background: transparent;
  box-shadow: none;
}

.bag b { color: var(--brushed-brass); }

.door {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 30px;
  border: 1px solid var(--brass-42);
  background: var(--midnight-steel);
}

.door::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 14px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--brushed-brass);
}

.guard {
  width: 18px;
  height: 28px;
  border: 1px solid var(--alarm-coral);
  border-radius: 2px;
  background: var(--midnight-steel);
}

/* The route card enters the scene flow while the player is holding a path.
   Reserve its compact-phone height from stage entry so the board never moves
   away from the held pointer when read, seal, choice, and guard states swap. */
#game.adaptive-vault > .scene.art-v2 {
  min-height: 171px;
}

/* :has는 :where로 감싼다 — 이 컨테이너 규칙의 특이도가 (1,4,1)인 접근성 배율 플로어
   (data-text-scale 130/200의 min-height 250/465px)보다 낮게 유지되어야 보드가 핀된다.
   맨 :has는 (1,5,0)이 되어 플로어를 이겼고 원격 모션·접근성 게이트가 보드 이동을 적발했다. */
#game.adaptive-vault > .scene[data-adaptive-phase="choice"]:where(:has(.scene-msg .adaptive-choice)),
#game.adaptive-vault > .scene[data-adaptive-phase="route"]:where(:has(.scene-msg .adaptive-choice)) {
  min-height: 171px;
  margin-bottom: 0;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
}

.scene.art-v2[data-adaptive-phase="choice"]:has(.scene-msg .adaptive-choice) .door-slot,
.scene.art-v2[data-adaptive-phase="route"]:has(.scene-msg .adaptive-choice) .door-slot {
  display: none;
}

.scene[data-adaptive-phase="choice"] .scene-msg:has(.adaptive-choice),
.scene[data-adaptive-phase="route"] .scene-msg:has(.adaptive-choice) {
  position: relative;
  inset: auto;
  z-index: 12;
  display: block;
  width: 100%;
  flex: 1 1 auto;
  padding: 9px;
  border: 1px solid var(--ivory-16);
  border-radius: 2px;
  background: rgba(7, 10, 16, 0.97);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.52);
  text-shadow: none;
}

.adaptive-choice-title {
  margin: 0 0 6px;
  color: var(--warm-ivory);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: normal;
}

.adaptive-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
}

.adaptive-choice > span {
  position: relative;
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px 8px;
  border: 1px solid var(--cyan-42);
  border-radius: 2px;
  background: rgba(99, 217, 242, 0.045);
}

.adaptive-choice .jackpot {
  border-color: var(--brass-42);
  background: rgba(216, 166, 74, 0.055);
}

.adaptive-choice b,
.adaptive-choice .route-vibe,
.adaptive-choice small,
.adaptive-choice small em {
  min-width: 0;
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.28;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

.adaptive-choice b {
  padding-right: 28px;
  color: var(--electric-cyan);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.adaptive-choice .jackpot b { color: var(--brushed-brass); }

.adaptive-choice .route-vibe {
  margin: 0;
  color: rgba(99, 217, 242, 0.8);
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0;
}

.adaptive-choice .jackpot .route-vibe { color: rgba(216, 166, 74, 0.86); }

.adaptive-choice small {
  display: grid;
  color: var(--ivory-72);
  font-weight: 650;
}

.adaptive-choice small em {
  display: block;
  margin-top: 2px;
  color: var(--ivory-48);
  font-style: normal;
  font-weight: 800;
}

.adaptive-choice .jackpot small em { color: rgba(216, 166, 74, 0.82); }

.adaptive-choice > span.goal:not(.chosen)::after {
  content: "TARGET";
  top: 7px;
  right: 7px;
  color: var(--brushed-brass);
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.adaptive-choice .chosen { box-shadow: inset 0 -2px var(--electric-cyan); }
.adaptive-choice .jackpot.chosen { box-shadow: inset 0 -2px var(--brushed-brass); }
.adaptive-choice .muted { opacity: 0.42; }

.challenge-hold strong {
  color: var(--warm-ivory);
  font-size: 12px;
  line-height: 1.35;
  word-break: keep-all;
}

.challenge-hold-track {
  height: 3px;
  border-radius: 0;
  background: var(--ivory-09);
}

.challenge-hold-track i { background: var(--electric-cyan); }
.boardwrap { padding-bottom: 4px; }

#board {
  border: 4px solid var(--midnight-steel);
  border-radius: 2px;
  background: var(--surface-0);
  box-shadow:
    inset 0 0 0 1px rgba(244, 231, 202, 0.05),
    0 0 0 1px var(--vault-black),
    0 18px 42px rgba(0, 0, 0, 0.48);
}

.signature-vault #board,
.adaptive-vault .boardwrap {
  box-shadow:
    inset 0 0 0 1px rgba(99, 217, 242, 0.16),
    0 0 22px rgba(99, 217, 242, 0.08);
}

.toast {
  top: 10px;
  padding: 10px 14px;
  border: 1px solid var(--ivory-16);
  border-radius: 2px;
  background: rgba(7, 10, 16, 0.96);
  color: var(--warm-ivory);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
  word-break: keep-all;
}

.toast.bad { border-color: var(--coral-42); color: var(--alarm-coral); }
.gfoot {
  min-height: 48px;
  align-items: center;
  gap: 8px;
}

.ftue-skip {
  display: inline-flex;
  min-width: 168px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1px solid var(--ivory-16);
  border-radius: 2px;
  background: var(--surface-0);
  color: var(--ivory-72);
  font: 800 13px/1.25 "Noto Sans KR", system-ui, sans-serif;
  cursor: pointer;
}

.ftue-skip:hover,
.ftue-skip:focus-visible {
  border-color: var(--ivory-48);
  color: var(--warm-ivory);
}

.ad-btn {
  display: inline-flex;
  min-width: 156px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--brass-42);
  border-radius: 2px;
  background: rgba(216, 166, 74, 0.06);
  color: var(--brushed-brass);
  font-size: 13px;
  font-weight: 850;
}

.ad-btn:active { transform: translateY(1px); }

/* ---------- Overlay / results ---------- */

.overlay {
  align-items: center;
  padding:
    max(12px, env(safe-area-inset-top, 0px)) 12px
    max(12px, env(safe-area-inset-bottom, 0px));
  background: rgba(7, 10, 16, 0.86);
  -webkit-backdrop-filter: blur(10px) saturate(0.7);
  backdrop-filter: blur(10px) saturate(0.7);
}

.panel {
  position: relative;
  width: min(390px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  margin: auto 0;
  padding: 24px 22px 22px;
  --panel-px: 22px; /* 가로 패딩과 같은 값. 패딩을 바꾸는 규칙마다 함께 바꾼다(허브 스트립이 이만큼 되찾는다) */
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--brass-42);
  border-image: none;
  border-radius: 1px;
  /* 금고 금속 표면(2026-08-26 소유자 채택안 B): 낮은 대비의 단방향 가공선을 얹고 대형 그림자를 줄인다.
     크롬 명암이나 무작위 노이즈는 넣지 않는다(기성 템플릿 인상). */
  background:
    repeating-linear-gradient(90deg, rgba(244, 231, 202, 0.025) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(216, 166, 74, 0.04), transparent 34%),
    var(--surface-0);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.44);
  filter: none;
  text-align: left;
  animation: panelIn 220ms cubic-bezier(0.2, 0.82, 0.2, 1);
  scrollbar-color: var(--brass-42) transparent;
}

.panel::before { display: none; }

@keyframes panelIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.result-lead {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: 112px;
  align-items: center;
  gap: 15px;
  margin: 0 0 12px;
}

.result-copy { min-width: 0; }

.result-copy .challenge-kicker {
  margin-bottom: 5px;
  font-size: 11px;
  line-height: 1.3;
}

.result-copy .p-title {
  margin: 0 0 6px;
  font-size: 27px;
}

.result-copy .p-desc {
  font-size: 13px;
  line-height: 1.45;
}

.result-artifact {
  position: relative;
  width: 112px;
  height: 112px;
  place-self: center;
  isolation: isolate;
}

.result-artifact img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.54)) drop-shadow(0 0 10px rgba(99, 217, 242, 0.12));
}

.result-artifact i {
  position: absolute;
  left: 49%;
  top: 21%;
  z-index: 1;
  width: 2px;
  height: 60%;
  border-radius: 1px;
  background: linear-gradient(180deg, transparent, var(--electric-cyan) 24% 72%, transparent);
  box-shadow: 0 0 7px rgba(99, 217, 242, 0.9);
  opacity: 0;
  transform: rotate(39deg) scaleY(0.2);
  transform-origin: 50% 100%;
  animation: resultTrace 620ms 100ms cubic-bezier(0.16, 0.82, 0.24, 1) forwards;
}

@keyframes resultTrace {
  0% { opacity: 0; transform: rotate(39deg) scaleY(0.2); }
  38% { opacity: 0.92; }
  100% { opacity: 0; transform: rotate(39deg) scaleY(1); }
}

.result-fail-plate {
  position: relative;
  width: 92px;
  height: 92px;
  place-self: center;
  border: 1px solid var(--coral-42);
  border-radius: 2px;
  background:
    radial-gradient(circle at 10px 10px, var(--alarm-coral) 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 10px) 10px, var(--alarm-coral) 0 2px, transparent 2.5px),
    radial-gradient(circle at 10px calc(100% - 10px), var(--alarm-coral) 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), var(--alarm-coral) 0 2px, transparent 2.5px),
    repeating-linear-gradient(135deg, rgba(255, 90, 104, 0.08) 0 5px, transparent 5px 11px),
    var(--surface-1);
  box-shadow: inset 0 0 0 7px rgba(7, 10, 16, 0.64), 0 10px 18px rgba(0, 0, 0, 0.4);
}

.result-fail-plate::before,
.result-fail-plate::after,
.result-fail-plate i,
.result-fail-plate i::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.result-fail-plate::before {
  inset: 21px;
  border: 1px solid var(--alarm-coral);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 90, 104, 0.18);
}

.result-fail-plate::after {
  left: 23px;
  top: 44px;
  width: 46px;
  height: 2px;
  background: var(--alarm-coral);
  box-shadow: 0 0 8px rgba(255, 90, 104, 0.54);
  transform: rotate(-45deg);
}

.result-fail-plate i {
  left: 42px;
  top: 31px;
  width: 8px;
  height: 24px;
  border: 1px solid var(--alarm-coral);
  border-top: 0;
  clip-path: polygon(0 38%, 28% 38%, 28% 0, 72% 0, 72% 38%, 100% 38%, 100% 100%, 0 100%);
}

.reward-shard {
  position: absolute;
  z-index: 5;
  display: block;
  pointer-events: none;
  will-change: transform, opacity;
}

.reward-shard.latch {
  width: 10px;
  height: 7px;
  border: 2px solid var(--brushed-brass);
  border-right: 0;
  border-radius: 2px 0 0 4px;
  filter: drop-shadow(0 0 3px rgba(216, 166, 74, 0.5));
}

.reward-shard.trace {
  width: 15px;
  height: 2px;
  background: var(--electric-cyan);
  box-shadow: 0 0 5px rgba(99, 217, 242, 0.72);
}

/* P0.3: 결과 패널 독립 보상 행 — 본문 문장에 묻혀 있던 수치를 원장 형태로 */
.reward-rows {
  display: grid;
  gap: 4px;
  width: min(100%, 236px);
  margin: 12px auto 4px;
}

.reward-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  margin: 0;
}

/* 핵심 보상 수치는 접근성 배율을 따라야 한다 — 루트 폰트가 배율을 실어 나르므로 rem */
.reward-row dt {
  color: var(--ivory-72);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.reward-row dd {
  margin: 0;
  color: var(--warm-ivory);
  font-size: 0.875rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.reward-row.total {
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--ivory-16);
}

.reward-row.total dd { color: var(--warm-ivory); }

.loot-showcase {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  margin: 2px 0 0;
}

.loot-showcase .loot-strip {
  display: inline-flex;
  gap: 3px;
}

.shape-pop.case-file-pop {
  position: absolute;
  z-index: 9;
  width: min(252px, 76vw);
  aspect-ratio: 1;
  pointer-events: none;
  filter: drop-shadow(0 15px 24px rgba(0, 0, 0, 0.68));
  font-size: 0;
  transform: translate(-50%, -50%);
  animation: caseFileReveal 1040ms cubic-bezier(0.16, 0.82, 0.24, 1) forwards;
}

.case-file-pop svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.case-file-sheet {
  fill: rgba(11, 16, 24, 0.96);
  stroke: var(--brushed-brass);
  stroke-width: 2;
}

.case-file-fold {
  fill: rgba(216, 166, 74, 0.08);
  stroke: var(--brass-42);
  stroke-width: 1.5;
}

.case-file-rule {
  fill: none;
  stroke: rgba(244, 231, 202, 0.22);
  stroke-width: 1;
}

.case-file-halo {
  fill: rgba(99, 217, 242, 0.025);
  stroke: rgba(99, 217, 242, 0.38);
  stroke-width: 1.5;
  stroke-dasharray: 3 7;
}

.case-file-seal,
.case-file-trace {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.case-file-seal {
  stroke: var(--brushed-brass);
  stroke-width: 3;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: caseFileSeal 420ms 80ms ease-out forwards;
}

.case-file-trace {
  stroke: var(--electric-cyan);
  stroke-width: 6;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 5px rgba(99, 217, 242, 0.92));
  animation: caseFileTrace 520ms 170ms cubic-bezier(0.16, 0.82, 0.24, 1) forwards;
}

.case-file-keyhole {
  fill: var(--vault-black);
  stroke: var(--brushed-brass);
  stroke-width: 2;
}

.case-file-caption {
  position: absolute;
  left: 19%;
  right: 19%;
  bottom: 13%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--ivory-72);
  font: 850 11px/1.2 "Noto Sans KR", sans-serif;
  letter-spacing: 0.08em;
}

.case-file-caption b { color: var(--warm-ivory); font-weight: 800; }
.case-file-caption em { color: var(--brushed-brass); font-style: normal; }

@keyframes caseFileReveal {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.76); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.025); }
  28%, 76% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.035); }
}

@keyframes caseFileSeal { to { stroke-dashoffset: 0; } }
@keyframes caseFileTrace { to { stroke-dashoffset: 0; } }

.case-file-pop.no-motion {
  opacity: 1;
  animation: none;
}

.case-file-pop.no-motion .case-file-seal,
.case-file-pop.no-motion .case-file-trace {
  stroke-dashoffset: 0;
  animation: none;
}

.p-emoji {
  min-height: 28px;
  color: var(--brushed-brass);
  font-size: 28px;
  line-height: 1;
}

.p-title {
  margin: 10px 0 5px;
  color: var(--warm-ivory);
  font-family: "Black Han Sans", "Noto Sans KR", sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.p-title.gold { color: var(--brushed-brass); }
.p-title.red { color: var(--alarm-coral); }

/* 패널 직계 제목 밑의 황동 바(채택안 B). 도시에 카드 안에 든 제목(.chapter-dossier .p-title)은 제외. */
.panel > .p-title {
  padding-bottom: 9px;
  border-bottom: 4px solid var(--brushed-brass);
}

.p-desc {
  color: var(--ivory-72);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  word-break: keep-all;
}

.p-desc b { color: var(--warm-ivory); }

.quip {
  color: var(--ivory-48);
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 12px;
  font-style: normal;
}

.challenge-kicker,
.challenge-protocol-preview,
.challenge-target,
.challenge-facts span,
.challenge-proof,
.challenge-route span,
.challenge-score span,
.challenge-result-row,
.challenge-choice,
.challenge-compare span,
.challenge-compare.reset,
.challenge-pb,
.challenge-delta,
.challenge-recap i,
.challenge-recap b,
.grade-cap {
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 12px;
}

.challenge-kicker {
  color: var(--brushed-brass);
  font-weight: 900;
  letter-spacing: 0.14em;
}

.challenge-route { margin: 16px 0 12px; }
.challenge-route::before { background: var(--brass-42); }

.challenge-route span {
  color: var(--ivory-48);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.challenge-route b {
  width: 30px;
  height: 30px;
  border-color: var(--brass-42);
  border-radius: 50%;
  background: var(--surface-1);
  box-shadow: none;
  color: var(--brushed-brass);
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 900;
}

.challenge-seed {
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid var(--brass-42);
  border-radius: 2px;
  background: rgba(216, 166, 74, 0.06);
  color: var(--brushed-brass);
  font: 800 12px/1.2 "Noto Sans KR", sans-serif;
}

.challenge-protocol-preview,
.challenge-target {
  color: var(--ivory-72);
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.challenge-facts { gap: 6px; margin-top: 10px; }

.challenge-facts span,
.challenge-proof {
  border-color: var(--ivory-16);
  background: rgba(244, 231, 202, 0.025);
  color: var(--ivory-72);
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.4;
}

.challenge-score {
  margin-top: 12px;
  padding: 12px 13px;
  border: 1px solid var(--brass-42);
  background: rgba(216, 166, 74, 0.045);
}

.challenge-score span {
  color: var(--ivory-48);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.challenge-score b {
  color: var(--warm-ivory);
  font-family: "Black Han Sans", "Noto Sans KR", sans-serif;
  font-size: 38px;
  font-weight: 400;
}

.challenge-score em {
  color: var(--warm-ivory);
  font-size: 12px;
  font-weight: 900;
}

.challenge-recap { gap: 5px; margin-top: 10px; }

.challenge-recap span {
  gap: 3px;
  padding: 7px 5px;
  border-color: var(--ivory-09);
  background: rgba(244, 231, 202, 0.025);
}

.challenge-recap i { color: var(--warm-ivory); font-weight: 800; font-style: normal; }
.challenge-recap b { color: var(--warm-ivory); line-height: 1.3; }

.challenge-result-row {
  color: var(--ivory-48);
  font-weight: 750;
  letter-spacing: 0;
}

.challenge-choice,
.challenge-compare span,
.challenge-compare.reset,
.challenge-pb,
.challenge-delta {
  padding: 8px 9px;
  border-color: var(--brass-42);
  background: rgba(216, 166, 74, 0.05);
  color: var(--ivory-72);
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
}

.challenge-choice.jackpot,
.challenge-pb.new,
.challenge-delta.win {
  border-color: var(--brass-42);
  background: rgba(216, 166, 74, 0.05);
  color: var(--brushed-brass);
}

.challenge-delta.lose,
.challenge-pb.unranked { border-color: var(--coral-42); color: var(--alarm-coral); }

/* Dense run evidence is available without occupying the first result viewport. */
.challenge-details {
  margin-top: 10px;
  border-top: 1px solid var(--ivory-09);
  border-bottom: 1px solid var(--ivory-09);
  background: rgba(244, 231, 202, 0.015);
}

.challenge-details > summary {
  position: relative;
  min-height: 48px;
  padding: 14px 32px 12px 2px;
  color: var(--ivory-72);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.challenge-details > summary::-webkit-details-marker { display: none; }

.challenge-details > summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 17px;
  width: 9px;
  height: 9px;
  border-right: 1px solid var(--brushed-brass);
  border-bottom: 1px solid var(--brushed-brass);
  transform: rotate(45deg);
  transition: transform 140ms ease, top 140ms ease;
}

.challenge-details[open] > summary::after {
  top: 22px;
  transform: rotate(225deg);
}

.challenge-details[open] {
  padding-bottom: 10px;
}

.challenge-detail-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.challenge-detail-actions .p-btn {
  min-height: 48px;
}

.p-btns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 16px;
}

.p-btn {
  width: 100%;
  min-height: 50px;
  padding: 11px 14px;
  border: 1px solid var(--brushed-brass);
  border-radius: 1px;
  background: var(--brushed-brass);
  box-shadow: none;
  color: var(--vault-black);
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.3;
}

.p-btn.ghost {
  border: 1px solid var(--ivory-16);
  border-image: none;
  background: var(--midnight-steel);
  box-shadow: none;
  color: var(--warm-ivory);
  text-shadow: none;
}

.p-btn.adface {
  border: 1px solid var(--brass-42);
  border-image: none;
  background: rgba(216, 166, 74, 0.06);
  box-shadow: none;
  color: var(--brushed-brass);
}

.p-btn:hover,
.p-btn:focus-visible { filter: brightness(1.08); }

.p-btn:active,
.p-btn.ghost:active,
.p-btn.adface:active { transform: translateY(1px); box-shadow: none; }

.challenge-result-actions {
  grid-template-columns: 1fr;
}

.challenge-result-actions .p-btn:first-child { grid-column: auto; }

.fake-ad {
  border: 1px solid var(--brass-42);
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(216, 166, 74, 0.05) 25%, transparent 25%) 0 0 / 14px 14px,
    var(--surface-0);
  color: var(--ivory-72);
  font-size: 13px;
}

.fake-ad .cnt {
  color: var(--warm-ivory);
  font-size: 30px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Level select / vault collection ---------- */

.lv-grid { gap: 8px; }

.lvbtn {
  min-height: 58px;
  border: 1px solid var(--ivory-09);
  border-radius: 2px;
  background: var(--surface-1);
  box-shadow: none;
  color: var(--warm-ivory);
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 14px;
}

.lvbtn .gim { min-height: 14px; font-size: 12px; }

.lvbtn.current {
  border-color: var(--brushed-brass);
  background: rgba(216, 166, 74, 0.12);
  box-shadow: inset 0 -2px var(--brushed-brass);
  color: var(--warm-ivory);
}

.lvbtn.ph {
  border-color: var(--cyan-42);
  box-shadow: inset 0 -2px var(--electric-cyan);
}

.lvbtn.ph::after {
  content: "";
  top: -5px;
  right: 3px;
  width: 18px;
  height: 15px;
  font-size: 0;
  filter: none;
}

.vault-scroll {
  max-height: 48vh;
  margin-top: 10px;
  padding-right: 4px;
}

.v-bld {
  margin: 14px 0 7px;
  color: var(--ivory-72);
  font-size: 13px;
  font-weight: 850;
}

.v-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.v-slot {
  display: grid;
  min-width: 0;
  min-height: 48px;
  place-items: center;
  padding: 7px 0;
  border: 1px solid var(--ivory-09);
  border-radius: 2px;
  background: var(--surface-1);
  color: var(--ivory-48);
  font-size: 0;
}

/* ---------- 작전 파일 허브(홈 단순화: 부가 작전은 팝업으로) ---------- */
/* 원본 카드·버튼은 로직 유지를 위해 DOM에 남기고 홈에서만 접는다 */
#home > .mode-grid,
#home > .training-replay,
#home > .vault-card,
#home > .buildings {
  display: none !important;
}

/* 첫 화면 정리(2026-08-25 소유자 지시): 첫 화면은 브랜드·히어로·CTA만 본다.
   건물 진행은 작전 파일 패널 안 '현장' 절로 옮기고(노드 이동, 렌더러 불변),
   소리·접근성·라이선스·버전은 우상단 메뉴 버튼 뒤로 접는다. */
#home:not(.menu-open) .home-tools { display: none; }
#home > .home-foot { justify-content: flex-end; }
#home.menu-open > .home-foot { justify-content: space-between; }
.home-menu-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 48px;
  height: 48px;
  padding: 0;
  /* 글자 없는 아이콘 버튼이지만 접근성 게이트가 컨트롤 글자 크기 12px 이상을 요구한다 */
  font-size: 14px;
}
.home-menu-btn::before {
  content: "";
  display: block;
  width: 18px;
  height: 12px;
  margin: 0 auto;
  background:
    linear-gradient(var(--warm-ivory), var(--warm-ivory)) 0 0 / 100% 2px no-repeat,
    linear-gradient(var(--warm-ivory), var(--warm-ivory)) 0 5px / 100% 2px no-repeat,
    linear-gradient(var(--warm-ivory), var(--warm-ivory)) 0 10px / 100% 2px no-repeat;
}
#home.menu-open .home-menu-btn { border-color: var(--brushed-brass); }
.brand::before { display: none; }
/* 메뉴 버튼(우상단 48px)과 브랜드 블록 박스가 겹치지 않게 우측 패딩을 전 폭에서 확보한다.
   컴팩트 규칙이 14px로 줄이던 값(320·360 실측)을 덮는다. */
/* 가로 모드는 접근성 시트가 홈을 2열 그리드로 바꾸고 브랜드가 좁은 좌열(190px~)에 놓여
   메뉴 버튼(우상단)과 만나지 않는다. 패딩 확보는 세로 모드에만 건다(568×320 EN 제목 잘림 실측). */
@media (orientation: portrait) {
  #home > .brand { padding-right: 64px; }
}
/* 좁은 폭(≤360)에서는 메뉴 버튼 몫을 뺀 박스에 EN 제목 PHANTOM HEIST(실측 251px)가 한 줄로
   안 들어간다. 이때는 패딩을 되돌리고 브랜드 블록을 버튼 아래(y≥56)로 내려 박스가 세로로
   겹치지 않게 한다. */
@media (max-width: 360px) {
  #home > .brand { padding-right: 14px; margin-top: 52px; }
}
/* 가로 모드의 배율 130/200은 접근성 시트가 2열 그리드를 1열로 접어 브랜드가 전폭이 된다
   (568×320 실측: 제목 박스 26→542, 버튼 512→560). 이때도 브랜드를 버튼 아래로 내린다. */
@media (orientation: landscape) {
  html[data-text-scale="130"] #home > .brand,
  html[data-text-scale="200"] #home > .brand { margin-top: 52px; }
}
/* 스트립은 패널 좌우 여백(22px)을 되찾아 홈에 있을 때와 같은 슬롯 폭을 갖는다(실측 2026-08-26:
   여백 안에 두면 슬롯이 320/360/390폭에서 50/55/61px로 줄어 KO 진행도가 360 이하에서, EN 이름·진행도가
   390에서도 두 줄로 접혔다. 되찾으면 360폭 64px로 홈과 같다). */
/* 블록이 패널 여백을 되찾고 소제목은 같은 값만큼 안으로 들여 정렬선에 둔다(8/26 소유자 지적: 소제목이
   튀어나옴). 스트립에만 음수 여백을 걸면 블록의 scrollWidth가 폭을 넘어 접근성 게이트의 화면 넘침 검사에
   걸린다(360폭 실측 317/300). */
.hub-targets { margin: 6px calc(-1 * var(--panel-px, 22px)) 2px; }
.hub-targets-title {
  margin: 0 var(--panel-px, 22px) 6px;
  color: var(--ivory-72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.hub-targets .buildings { display: grid !important; }

.ops-hub-btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 6px 12px;
  border: 1px solid var(--ivory-09);
  border-radius: 1px;
  background: var(--surface-0);
  color: var(--warm-ivory);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.ops-hub-btn:hover,
.ops-hub-btn:focus-visible {
  border-color: var(--ivory-48);
  background: var(--surface-2, var(--surface-1));
}

.ftue-home .ops-hub-btn { display: none; }

.ops-hub-mark {
  width: 22px;
  height: 26px;
  background:
    linear-gradient(180deg, transparent 5px, var(--brass-42) 5px 6px, transparent 6px),
    linear-gradient(180deg, transparent 11px, var(--brass-42) 11px 12px, transparent 12px),
    linear-gradient(180deg, transparent 17px, var(--brass-42) 17px 18px, transparent 18px);
  border: 1px solid var(--brass-42);
  border-radius: 2px 6px 2px 2px;
}

.ops-hub-copy { display: grid; gap: 1px; min-width: 0; }
.ops-hub-copy b { font-size: 14px; font-weight: 850; }
.ops-hub-copy small { overflow: hidden; color: var(--ivory-48); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ops-hub-go { color: var(--brushed-brass); font-size: 19px; line-height: 1; }

.hub-rows { display: grid; gap: 7px; margin: 4px 0 2px; }

.hub-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 8px 14px;
  border: 1px solid var(--ivory-16);
  border-radius: 1px;
  /* 행 모서리의 리벳 점 두 개(채택안 B) */
  background:
    radial-gradient(circle at 8px 8px, var(--brass-42) 0 1px, transparent 1.5px),
    radial-gradient(circle at calc(100% - 8px) 8px, var(--brass-42) 0 1px, transparent 1.5px),
    var(--surface-1);
  color: var(--warm-ivory);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.hub-row:hover,
.hub-row:focus-visible {
  border-color: var(--ivory-48);
  background: var(--surface-2, var(--surface-1));
}

.hub-row-copy { display: grid; gap: 2px; min-width: 0; }
.hub-row-copy b { overflow: hidden; font-size: 13.5px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.hub-row-copy small { overflow: hidden; color: var(--ivory-72); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.hub-row-act { color: var(--brushed-brass); font-size: 12px; font-weight: 800; white-space: nowrap; }
.hub-row-go { color: var(--brushed-brass); font-size: 18px; line-height: 1; }

.v-slot.got { border-color: var(--brass-42); }

/* PH-LOOT-R1 실물 장물 아트. 건물별 4x3 아틀라스(128px 셀)를 배경 시트로 얹고,
   로드 전 프레임은 뒤의 기존 토큰이 정체성을 유지한다. v-slot은 이미 relative이고
   팬텀 배지가 슬롯 밖으로 돌출하므로 overflow는 건드리지 않는다. */
.v-slot .loot-art {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(86%, 44px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-size: 400% 300%;
  pointer-events: none;
}

.loot-art-b1 { background-image: url("assets/loot/loot_c01.png"); }
.loot-art-b2 { background-image: url("assets/loot/loot_c02.png"); }
.loot-art-b3 { background-image: url("assets/loot/loot_c03.png"); }
.loot-art-b4 { background-image: url("assets/loot/loot_c04.png"); }
.loot-art-b5 { background-image: url("assets/loot/loot_c05.png"); }

/* 아트가 붙은 칸에서는 기존 토큰을 접는다. 반투명 컷아웃 사이로 토큰이 비치는
   이중 노출 방지. 아틀라스 파일 자체가 없으면 게이트(자산 계약)가 잡는다. */
.v-slot:has(.loot-art) .loot-token { visibility: hidden; }

.v-slot.ph {
  border-color: var(--cyan-42);
  box-shadow: inset 0 -2px var(--electric-cyan);
}

.v-slot.ph::after {
  content: "";
  top: -5px;
  right: -3px;
  width: 17px;
  height: 14px;
  font-size: 0;
  filter: none;
}

.v-slot.thru::before {
  content: "";
  top: -3px;
  left: 1px;
  width: 10px;
  height: 14px;
  background: var(--brushed-brass);
  clip-path: polygon(58% 0, 100% 0, 70% 42%, 100% 42%, 28% 100%, 46% 56%, 13% 56%);
  filter: none;
}

.grade-row {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 8px 0 6px;
  font-size: 0;
  letter-spacing: 0;
}

.grade-cap { color: var(--ivory-48); line-height: 1.4; }

.share-box {
  border: 1px solid var(--ivory-16);
  border-radius: 2px;
  background: var(--surface-1);
  color: var(--warm-ivory);
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
}

/* P1.2b 데일리 결과 레일: 9칸 고정. 텍스트 입력창처럼 보이던 share-box를 대체한다.
   실패 = 코랄 각인, 개방 = 시안 발광, 빈 칸 = 얇은 각인, 오버플로 = +N */
.daily-rail {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin: 12px 0 4px;
}

.dr-slot {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 18px;
  border: 1px solid var(--ivory-16);
  border-radius: 2px;
  background: var(--surface-0);
  color: var(--warm-ivory);
  font-size: 10px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.dr-slot.fail {
  border-color: var(--coral-42);
  background:
    linear-gradient(135deg, transparent 44%, var(--coral-42) 45% 55%, transparent 56%),
    var(--surface-0);
}

.dr-slot.open {
  border-color: var(--brushed-brass);
  background: rgba(216, 166, 74, 0.18);
  box-shadow: 0 0 7px rgba(216, 166, 74, 0.5), inset 0 -3px var(--brushed-brass);
}

.dr-slot.empty { opacity: 0.45; }

.dr-slot.overflow {
  border-color: var(--brass-42);
  color: var(--brass-42);
}

/* 리빌 2박자용 퀴프 토스트: #toast(role=status)와 분리된 시각 전용 채널 */
.quip-toast {
  font-style: normal;
  border-color: var(--brass-42);
}

.daily-next {
  margin: 2px 0 6px;
  color: var(--ivory-72);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
}

/* ---------- Compact devices ---------- */

@media (max-width: 419px) {
  .daily-card,
  .adaptive-cta { min-height: 62px; }

  .adaptive-eyebrow { display: none; }
  .adaptive-copy { gap: 2px; }
}

@media (max-width: 439px) {
  .result-lead {
    grid-template-columns: 86px minmax(0, 1fr);
    min-height: 86px;
    gap: 10px;
  }

  .result-artifact { width: 86px; height: 86px; }
  .result-fail-plate { width: 74px; height: 74px; }
  .result-fail-plate::before { inset: 17px; }
  .result-fail-plate::after { left: 18px; top: 35px; width: 38px; }
  .result-fail-plate i { left: 33px; top: 24px; }
  .result-copy .challenge-kicker { font-size: 10px; }
  .result-copy .p-title { font-size: 22px; }
  .result-copy .p-desc { font-size: 12px; line-height: 1.38; }
}

@media (max-height: 760px) {
  #home { gap: 8px; }
  .brand-title { font-size: 38px; }
  .brand-sub { margin-top: 5px; font-size: 12px; }
  .brand::after { margin-top: 7px; }

  .cta {
    min-height: 56px;
    padding-top: 11px;
    padding-bottom: 11px;
  }

  /* 2행 CTA는 만재 홈에서 1행 높이 예산(56px) 안에 들어가야 한다 */
  .cta.two-line {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .cta.two-line .cta-main { font-size: 0.75em; }

  .cta.two-line .cta-sub { margin-top: 0.15em; }

  .daily-card,
  .adaptive-cta { min-height: 62px; }

  .buildings { padding-top: 0; }

  .bld,
  .bld.tappable { min-height: 64px; }

  .bld .ico { height: 38px; }
}

@media (max-height: 680px) and (max-width: 480px) {
  #game.screen {
    padding:
      max(calc(env(safe-area-inset-top, 0px) + 6px), 12px) 12px
      max(calc(env(safe-area-inset-bottom, 0px) + 6px), 10px);
  }

  #game { gap: 5px; }

  #game.adaptive-vault > .scene[data-adaptive-phase="choice"]:where(:has(.scene-msg .adaptive-choice)),
  #game.adaptive-vault > .scene[data-adaptive-phase="route"]:where(:has(.scene-msg .adaptive-choice)) {
    padding: 4px 8px;
  }

  .scene[data-adaptive-phase="choice"] .scene-msg:has(.adaptive-choice),
  .scene[data-adaptive-phase="route"] .scene-msg:has(.adaptive-choice) {
    padding: 7px;
  }

  .adaptive-choice-title { margin-bottom: 4px; }
  .adaptive-choice { gap: 5px; }
  .adaptive-choice > span { padding: 5px 6px 6px; }

  .adaptive-choice b,
  .adaptive-choice .route-vibe,
  .adaptive-choice small,
  .adaptive-choice small em,
  .adaptive-choice > span.goal:not(.chosen)::after {
    line-height: 1.22;
  }
}

@media (max-height: 620px) {
  .screen {
    padding:
      max(calc(env(safe-area-inset-top, 0px) + 6px), 10px) 12px
      max(calc(env(safe-area-inset-bottom, 0px) + 6px), 8px);
  }

  #game { gap: 5px; }

  #game .mini-btn,
  .alarm {
    min-height: 48px;
    height: 48px;
  }

  /* 명판은 좁은 열에서 2~3줄로 접힌다. 높이를 48로 못박으면 접힌 줄이 잘린다
     (568x320 EN 실측 58>48, R32). 최소만 지키고 내용 따라 성장. */
  /* 세로 패딩 3px: 2줄 콘텐츠(39px)+6px+테두리 2px = 47 ≤ 48이라 헤더가 안 자란다.
     4px는 49px가 되어 보드가 바닥(230)에 소수점 미달했다(모션 게이트 실측). */
  .lv-label { min-height: 48px; height: auto; padding: 3px 9px; font-size: 12px; }

  .lv-label .pos,
  .chip,
  .chip b { font-size: 12px; }

  .chips { gap: 3px; }
  .chip { padding: 4px 6px; }

  .scene.art {
    min-height: 72px;
    padding: 4px 8px;
  }

  /* P1.3 고정 높이의 컴팩트 값 */
  html:not([data-board-mode="text"]) #game:not(.adaptive-vault) > .scene {
    height: 76px;
    flex: 0 0 auto;
  }

  /* FTUE는 아트 클래스가 늦게 붙어도 높이가 변하면 안 된다(76→104 이동 회귀).
     art-v2 조건 없이 ftue-live 진입 시점부터 104를 예약한다 */
  html:not([data-board-mode="text"]) #game.ftue-live:not(.adaptive-vault) > .scene {
    height: 104px;
  }

  .scene.art-v2 .scene-msg {
    padding: 5px 6px;
    font-size: 11.5px;
    line-height: 1.28;
  }

  .scene.art .scene-msg,
  .scene.art .bag,
  .challenge-hold strong { font-size: 12px; }

  .scene[data-adaptive-phase="choice"] .scene-msg:has(.adaptive-choice),
  .scene[data-adaptive-phase="route"] .scene-msg:has(.adaptive-choice) {
    padding: 7px;
  }

  .adaptive-choice-title { margin-bottom: 4px; font-size: 12px; }
  .adaptive-choice { gap: 5px; }
  .adaptive-choice > span { padding: 5px 6px 6px; }

  .adaptive-choice b,
  .adaptive-choice .route-vibe,
  .adaptive-choice small,
  .adaptive-choice small em,
  .adaptive-choice > span.goal:not(.chosen)::after {
    font-size: 12px;
    line-height: 1.22;
  }

  .scene.art .bag { transform: translateY(10px); }
  .panel { padding: 18px 17px 16px; --panel-px: 17px; }
  .p-title { font-size: 25px; }
  .result-lead {
    grid-template-columns: 86px minmax(0, 1fr);
    min-height: 86px;
    gap: 10px;
    margin-bottom: 8px;
  }
  .result-artifact { width: 86px; height: 86px; }
  .result-fail-plate { width: 74px; height: 74px; }
  .result-fail-plate::before { inset: 17px; }
  .result-fail-plate::after { left: 18px; top: 35px; width: 38px; }
  .result-fail-plate i { left: 33px; top: 24px; }
  .result-copy .challenge-kicker { margin-bottom: 3px; font-size: 10px; }
  .result-copy .p-title { margin-bottom: 4px; font-size: 22px; }
  .result-copy .p-desc { font-size: 12px; line-height: 1.38; }
  .challenge-score { margin-top: 8px; padding: 9px 11px; }
  .challenge-score b { font-size: 32px; }
  .challenge-choice,
  .challenge-details { margin-top: 6px; }
  .p-btns { margin-top: 12px; gap: 6px; }
  .p-btn { min-height: 48px; padding: 9px 11px; }
}

/* A 320px-wide route card already states the exact dial angle and reward.
   Remove the duplicate qualitative label so the held board stays fixed while
   preserving the decision title and its measurable trade-off. */
@media (max-width: 340px) and (max-height: 600px) {
  .adaptive-choice .route-vibe {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta,
  .cta::after,
  .adaptive-cta,
  .daily-btn,
  .vault-card,
  .mini-btn,
  .p-btn,
  .challenge-details > summary::after {
    transition: none;
  }

  .scene.art-v2 .scene-bg,
  .scene.art-v2 .scene-open-bg,
  .scene.art-v2 .scene-guard-bg {
    transition: none;
  }

  .panel { animation: none; }
  .result-artifact i,
  .case-file-pop,
  .case-file-pop .case-file-seal,
  .case-file-pop .case-file-trace { animation: none; }
  .case-file-pop { opacity: 1; }
  .case-file-pop .case-file-seal,
  .case-file-pop .case-file-trace { stroke-dashoffset: 0; }
  .reward-shard { display: none; }
}