@font-face {
  font-family: "Noto Sans KR";
  src: url("assets/fonts/noto-sans-kr-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Black Han Sans";
  src: url("assets/fonts/black-han-sans-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --bg: #070a10;
  --panel: #0e151f;
  --panel2: #15202d;
  --line: rgba(244, 231, 202, 0.12);
  --text: #f4e7ca;
  --muted: rgba(244, 231, 202, 0.66);
  --faint: rgba(244, 231, 202, 0.42);
  --gold: #d8a64a;
  --gold-hi: #f4e7ca;
  --red: #ff5a68;
  --steel: #15202d;
  --ok: #63d9f2;
  --spectral: #63d9f2;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

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

html, body { margin: 0; height: 100%; }

body {
  font-family: "Noto Sans KR", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(120% 75% at 50% -12%, #1a2130, var(--bg) 68%);
  color: var(--text);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* 게임필 배경: 저택 벽 텍스처를 아주 어둡게 + 비네트. 웹페이지가 아니라 밤의 현장 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  /* 배치 아트(homebg)가 도착하면 JS가 --homebg 변수로 교체 */
  background: var(--homebg, url(assets/wall.jpg)) center/cover;
  opacity: 0.07;
  filter: blur(1.5px) saturate(0.6);
  pointer-events: none;
}
body.artbg::before { opacity: 0.2; filter: saturate(0.85); }
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 30%, transparent 40%, rgba(4, 6, 10, 0.55) 100%);
  pointer-events: none;
}
.screen { z-index: 1; }

.screen {
  position: fixed;
  inset: 0;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* P0-9: Android 15 엣지투엣지에서 env()가 0으로 떨어져도 최소 여백 보장 */
  padding:
    max(calc(env(safe-area-inset-top, 0px) + 16px), 30px) 18px
    max(calc(env(safe-area-inset-bottom, 0px) + 16px), 20px);
}

.hidden { display: none !important; }

/* ============ 홈 ============ */
/* 카드 스택이 아니라 밤의 현장: 로고는 위, 금고문 씬이 숨 쉬고, 행동은 아래에 모인다 */
#home { justify-content: flex-start; gap: 14px; }

/* 홈 히어로: 금고문 아트를 화면 위 절반에 크게 (아래로 페이드해 콘텐츠 가독 확보) */
body.artbg #home::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 60%;
  background: var(--homebg) center top / cover;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 35%, transparent 97%);
  pointer-events: none;
  z-index: -1;
}

.brand { text-align: center; margin-bottom: auto; }

.brand-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 5px;
  color: rgba(232, 180, 76, 0.8);
  margin-bottom: 7px;
}

.brand-title {
  font-family: "Black Han Sans", "Noto Sans KR", sans-serif;
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: 1px;
  /* 한글 타이틀이 좁은 열에서 하이스/트처럼 단어 중간에 꺾이지 않게 어절 단위 줄바꿈 */
  word-break: keep-all;
  /* 그라디언트 클리핑 대신 상아 단색 + 황동 프레스 새김(물성) */
  color: #ffefcc;
  text-shadow:
    0 3px 0 #a67723,
    0 10px 28px rgba(0, 0, 0, 0.65);
}

.brand-sub { margin-top: 8px; font-size: 13px; color: var(--muted); letter-spacing: 0.5px; }
/* 타이틀 아래 황동 장식선 */
.brand::after {
  content: '◆';
  display: block;
  margin-top: 10px;
  font-size: 9px;
  color: var(--gold);
  background:
    linear-gradient(90deg, transparent, rgba(232, 180, 76, 0.55) 20%, rgba(232, 180, 76, 0.55) 80%, transparent) center / 62% 1px no-repeat;
}

/* 괴도의 예고장: 크림 종이 + 잉크 괘선 + 봉랍 씰. 이 화면의 시그니처 */
.daily-card {
  position: relative;
  background: linear-gradient(180deg, var(--paper-hi), #ece0c2);
  border: none;
  border-radius: 2px;
  padding: 16px 18px 14px;
  margin: 0 4px;
  transform: rotate(-2.2deg);
  color: var(--ink);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.5),
    inset 0 -3px 8px rgba(140, 117, 76, 0.3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
/* 잉크 이중 괘선(인쇄물) */
.daily-card::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(42, 31, 21, 0.42);
  border-radius: 2px;
  pointer-events: none;
}
/* 봉랍 씰 */
.daily-card::after {
  content: 'P';
  position: absolute;
  right: 17px;
  bottom: 15px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c2453c, var(--wax) 62%, #661c17);
  color: rgba(246, 238, 214, 0.92);
  font-family: "Black Han Sans", sans-serif;
  font-size: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

.daily-head { display: flex; align-items: baseline; gap: 10px; }
.daily-title {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--wax);
}
.daily-streak { font-size: 11.5px; color: rgba(42, 31, 21, 0.6); font-weight: 500; }
.daily-status {
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink);
  padding-right: 60px; /* 봉랍 자리 */
}

/* 도전 = 잉크 스탬프(종이 위 골드 3D는 어색하다) */
.daily-btn {
  border: 1.5px solid rgba(140, 43, 38, 0.85);
  border-radius: 2px;
  padding: 7px 16px;
  margin-top: 2px;
  font-family: "Noto Sans KR", system-ui, sans-serif;
  font-size: 14px;
  color: var(--wax);
  background: rgba(140, 43, 38, 0.07);
  cursor: pointer;
  transition: transform 0.06s, background 0.1s;
}
.daily-btn:active { transform: scale(0.96); background: rgba(140, 43, 38, 0.16); }
.daily-btn.done {
  border-color: rgba(42, 31, 21, 0.35);
  color: rgba(42, 31, 21, 0.55);
  background: transparent;
}

/* 적응형 금고: 캠페인과 분리된 대표 재플레이 모드. 보안 단말처럼 짧고 날카롭게 보인다. */
.adaptive-cta {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 10px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 9px 13px 9px 11px;
  overflow: hidden;
  border: 1px solid rgba(127, 231, 255, 0.46);
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(32, 124, 145, 0.18), transparent 48%),
    linear-gradient(180deg, #202a37, #111720);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 24px rgba(38, 194, 224, 0.05),
    0 6px 18px rgba(0, 0, 0, 0.38);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.08s, border-color 0.12s, box-shadow 0.12s;
}
.adaptive-cta::after {
  content: '';
  position: absolute;
  left: 58px;
  right: 13px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--spectral), transparent 78%);
  opacity: 0.6;
}
.adaptive-cta:hover {
  border-color: rgba(127, 231, 255, 0.76);
  box-shadow: inset 0 0 28px rgba(38, 194, 224, 0.09), 0 7px 22px rgba(0, 0, 0, 0.42);
}
.adaptive-cta:active { transform: scale(0.975); }
.adaptive-mark {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(127, 231, 255, 0.62);
  border-radius: 2px;
  background:
    linear-gradient(45deg, transparent 46%, var(--spectral) 47%, var(--spectral) 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, rgba(255, 84, 100, 0.9) 47%, rgba(255, 84, 100, 0.9) 53%, transparent 54%),
    #111a24;
  box-shadow: inset 0 0 12px rgba(127, 231, 255, 0.12), 0 0 10px rgba(127, 231, 255, 0.08);
}
.adaptive-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.adaptive-eyebrow {
  color: var(--spectral);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1.2;
}
.adaptive-title { font-size: 14px; line-height: 1.25; letter-spacing: 0.2px; }
.adaptive-meta { color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.adaptive-go { color: var(--spectral); font-size: 20px; line-height: 1; }

/* 게임 버튼 공통 문법: 3D 베벨(위 하이라이트 + 아래 립) + 꾹 눌리는 낙차 */
.cta {
  border: 1px solid #7a5514;
  border-radius: 2px;
  padding: 18px;
  font-family: "Black Han Sans", "Noto Sans KR", sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #2b1e04;
  text-shadow: 0 1px 0 rgba(255, 245, 214, 0.5);
  background: linear-gradient(180deg, #ffe9b0, var(--gold-hi) 30%, var(--gold) 75%, #c8922e);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 0 rgba(90, 58, 8, 0.45),
    0 5px 0 #6e4c10,
    0 14px 30px rgba(232, 180, 76, 0.25);
  cursor: pointer;
  transition: transform 0.06s, box-shadow 0.06s;
}
.cta:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(90, 58, 8, 0.4),
    0 1px 0 #6e4c10,
    0 6px 14px rgba(232, 180, 76, 0.2);
}

/* 거리 스트립: 타일 카드 대신 점선 침입 루트 위에 건물이 서 있다(진행 = 지도) */
.buildings {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  position: relative;
  padding: 6px 2px 0;
}
.buildings::before {
  content: '';
  position: absolute;
  left: 9%;
  right: 9%;
  top: 29px; /* 아이콘 중심 높이 */
  border-top: 2px dotted rgba(232, 180, 76, 0.32);
  pointer-events: none;
}

.bld {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  text-align: center;
  position: relative; /* 루트 점선 위로 */
}
.bld .ico { font-size: 27px; line-height: 46px; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.6)); }
.bld .ico img { width: 46px; height: 46px; object-fit: contain; vertical-align: middle; }
.bld .nm { font-size: 10.5px; color: var(--faint); margin-top: 3px; }
.bld .pg { font-size: 10px; color: var(--gold); margin-top: 1px; font-weight: 700; opacity: 0.85; }
.bld.locked { opacity: 0.35; filter: saturate(0.25) brightness(0.8); }
.bld.done .nm { color: var(--muted); }
/* 현재 침입 중인 건물: 불이 켜져 있다 */
.bld.tappable:not(.done) .ico { filter: drop-shadow(0 0 14px rgba(232, 180, 76, 0.6)) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.6)); }
.bld.tappable:not(.done) .nm { color: var(--gold-hi); font-weight: 700; }
.bld.tappable { cursor: pointer; transition: transform 0.08s; }
.bld.tappable:active { transform: scale(0.92); }
.bld.tappable:hover .ico { filter: drop-shadow(0 0 16px rgba(232, 180, 76, 0.7)) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.6)); }

/* ---------- 스테이지 선택 그리드 (한 줄 = 구역) ---------- */
.lv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.lvbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px 8px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #232b3a, #181e29);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 3px 0 #0b0e14;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.lvbtn:active { transform: scale(0.94); }
.lvbtn .gim { font-size: 10px; min-height: 13px; letter-spacing: 1px; }
.lvbtn.cleared { border-color: rgba(232, 180, 76, 0.4); }
.lvbtn.cleared .no { color: var(--gold); }
/* 팬텀(원샷) 등급: 유령빛 테두리 + 모자 배지. .cleared보다 뒤에 둬서 테두리가 이긴다 */
.lvbtn { position: relative; }
.lvbtn.ph { border-color: rgba(185, 166, 255, 0.55); box-shadow: 0 0 10px rgba(150, 120, 255, 0.22); }
.lvbtn.ph::after {
  content: '';
  position: absolute;
  top: -6px;
  right: -4px;
  font-size: 12px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
.lvbtn.current {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  border-color: transparent;
  color: #241a05;
  box-shadow: 0 0 14px rgba(232, 180, 76, 0.35);
}
.lvbtn.locked { opacity: 0.35; cursor: default; }

/* ---------- 내 금고: 서랍 바(황동 손잡이가 달린 강철 서랍) ---------- */
.vault-card {
  display: flex;
  align-items: center;
  gap: 13px;
  background: linear-gradient(180deg, #232b3d, #151a26);
  border: 1px solid rgba(232, 180, 76, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 18px rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  padding: 10px 16px;
  cursor: pointer;
  transition: transform 0.08s, border-color 0.12s;
}
.vault-card::before {
  content: '';
  flex: none;
  width: 32px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(180deg, #c5a260, #7a5c26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(0, 0, 0, 0.5);
}
.vault-card:active { transform: scale(0.97); }
.vault-card:hover { border-color: rgba(232, 180, 76, 0.45); }
.vault-card .v-ico { display: none; }
.vault-card .v-mid { flex: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.vault-card .v-title { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.vault-card .v-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vault-card .v-go { font-size: 13px; color: var(--gold); font-weight: 700; white-space: nowrap; }

.home-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}

@media (max-height: 760px) {
  #home { gap: 9px; }
  .brand-title { font-size: 39px; }
  .brand-sub { margin-top: 5px; }
  .brand::after { margin-top: 6px; }
  .daily-card { padding-top: 12px; padding-bottom: 11px; }
  .adaptive-cta { min-height: 50px; padding-top: 6px; padding-bottom: 6px; }
  .cta { padding: 14px; }
  .vault-card { padding-top: 8px; padding-bottom: 8px; }
}
.home-tools { display: flex; align-items: center; gap: 8px; }
.ver { font-size: 11px; color: var(--faint); }

.mini-btn {
  width: 40px;
  height: 40px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, #222937, #161b26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 3px 0 #0b0e14;
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.06s, box-shadow 0.06s;
}
.mini-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 0 #0b0e14; }

/* ============ 게임 ============ */
#game { gap: 10px; }

.gtop { display: flex; align-items: center; gap: 10px; }

/* 레벨 명판: 황동 플레이트에 새긴 현재 위치 */
.lv-label {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: #ffe199;
  background: linear-gradient(180deg, #4a3f26, #332b19 55%, #251e0f);
  border: 1px solid rgba(232, 180, 76, 0.5);
  border-radius: 2px;
  padding: 8px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 224, 150, 0.28), 0 3px 7px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);
  /* 명판은 자르지 않고 접는다. 말줄임은 끝의 위치 정보(LOCK n/n)부터 삼켰다
     (320w EN·568x320 실측, R32). 폭이 충분하면 한 줄 유지라 평시 외형 불변.
     줄 전진은 글리프 상자(Noto Sans KR 약 1.46em) 이상이어야 접힌 줄의 텍스트
     렉트가 교차하지 않는다(1.3에서 인접 줄 2.1px 교차 실측). */
  white-space: normal;
  line-height: 1.5;
  /* 한글은 기본 줄바꿈이 음절 단위라 '하이스트'가 중간에서 끊긴다(568x320 실측,
     교차 검토 확인). keep-all로 어절 단위 접힘을 강제하고, 한 단어가 줄을 넘는
     극단(200% EN 실측 126>92)만 break-word가 비상 분절한다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}
.lv-label .pos { color: #d5bd86; font-weight: 500; font-size: 12px; white-space: nowrap; }

/* 경보: 강철 하우징에 박힌 보안 램프 3등 */
.alarm {
  display: flex;
  gap: 7px;
  background: #10141d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  padding: 7px 9px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}
.alarm i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2b3342, #151a24 70%);
  border: 1px solid #3a4356;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.06);
}
.alarm i.on {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 10px rgba(255, 84, 100, 0.7);
  animation: blink 0.9s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: 0.45; } }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* 알약 칩 대신 리벳 박힌 금속 태그(하드웨어 언어) */
.chip {
  position: relative;
  background: linear-gradient(180deg, #212836, #141924);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 3px 6px rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  padding: 6px 12px 6px 22px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  transition: border-color 0.12s, box-shadow 0.12s, color 0.12s;
}
.chip::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(180deg, #6b7a90, #252c39);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.chip b { color: var(--text); font-family: "Black Han Sans", "Noto Sans KR", sans-serif; font-weight: 400; font-size: 14.5px; letter-spacing: 0.5px; }
.chip.gold b { color: var(--gold); }
.chip.red b { color: var(--red); }
.chip.ready {
  border-color: rgba(232, 180, 76, 0.7);
  box-shadow: 0 0 14px rgba(232, 180, 76, 0.3);
  color: var(--gold);
}
.chip.ready b { color: var(--gold); }
.chip.over b { color: var(--red); }

/* ---------- 상단 씬(경비 기믹 레이어) ---------- */
.scene {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 9px 14px;
  min-height: 50px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.scene.hiddenmode { visibility: hidden; }

.door-slot { position: relative; width: 40px; text-align: center; }
.door { font-size: 26px; display: inline-block; transition: transform 0.25s; }
.guard {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  font-size: 24px;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}

.scene.warn .door { transform: rotate(-8deg); }
.scene.warn { border-color: rgba(255, 180, 84, 0.5); }
.scene.warn .guard { opacity: 0.55; transform: translate(-50%, -50%) scale(0.8); }

.scene.watch { border-color: rgba(255, 84, 100, 0.7); box-shadow: 0 0 16px rgba(255, 84, 100, 0.3); }
.scene.watch .door { transform: rotate(-16deg); }
.scene.watch .guard {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.15);
  animation: peer 0.8s ease-in-out infinite;
}
@keyframes peer { 50% { transform: translate(-50%, -50%) scale(1.15) rotate(6deg); } }

/* ---------- 금고 전실 컷아웃 애니메이션 ---------- */
.scene-bg, .scene-open-bg, .scene-guard-bg { display: none; }
.scene {
  --guard-watch-ms: 1800ms;
  --guard-sweep-ms: calc(var(--guard-watch-ms) / 1.55);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.scene.art { min-height: 118px; padding: 8px 14px; }
.scene.art .door, .scene.art .guard { display: none; }

.scene.art .scene-bg,
.scene.art .scene-open-bg,
.scene.art .scene-guard-bg {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}
.scene.art .scene-bg {
  opacity: 0;
  filter: brightness(0.5) saturate(0.52) contrast(1.15);
}
.scene.art .scene-open-bg {
  opacity: 0.36;
  filter: brightness(0.5) saturate(0.54) contrast(1.15);
}
.scene.art .scene-guard-bg { opacity: 0; }
.scene.art::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 6, 10, 0.04) 0 22%, rgba(3, 8, 14, 0.12) 30%, rgba(3, 8, 14, 0.5) 58% 77%, rgba(3, 8, 14, 0.22)),
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 35%, rgba(0,0,0,0.38));
}

.scene-cinema {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}
.scene-cinema *,
.scene-cinema *::before,
.scene-cinema *::after { pointer-events: none; }

.scene-chamber {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(109, 143, 164, 0.14), transparent 22%),
    repeating-linear-gradient(90deg, transparent 0 72px, rgba(113, 145, 163, 0.08) 73px, transparent 75px),
    linear-gradient(180deg, rgba(16,29,39,.76) 0 17%, rgba(8,18,26,.7) 18% 74%, rgba(5,10,16,.82) 75%);
  box-shadow: inset 0 -20px 34px rgba(0,0,0,0.66), inset 0 1px rgba(197,231,246,0.08);
}
.scene-chamber::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  height: 2px;
  background: linear-gradient(90deg, #253848, #0b1821 38%, #243a49 68%, #0a141c);
  box-shadow: 0 8px 0 rgba(83,111,130,0.16), 0 16px 14px rgba(0,0,0,0.72);
}
.scene-chamber::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.018) 4px);
}
.chamber-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(90deg, #05090d, #304555 46%, #0a1118 56%);
  box-shadow: 9px 0 18px rgba(0,0,0,0.45);
}
.rail-a { left: 33%; }
.rail-b { left: 72%; }
.chamber-depth {
  position: absolute;
  left: 24%;
  top: 16%;
  width: 42%;
  height: 60%;
  border: 1px solid rgba(102,144,168,0.14);
  background: radial-gradient(ellipse at 20% 50%, rgba(75,120,143,0.1), transparent 58%);
  box-shadow: inset 0 0 28px rgba(0,0,0,0.68);
}

.vault-rig,
.guard-rig,
.phantom-rig {
  position: absolute;
  bottom: -9px;
  overflow: visible;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,0.72));
}
.vault-rig { z-index: 6; left: -8px; height: 128%; width: auto; }
.guard-rig {
  z-index: 5;
  left: 16px;
  height: 110%;
  width: auto;
  opacity: 0;
  transform: translate3d(-47px, 0, 0) rotate(-1deg);
  transform-origin: 48% 100%;
  will-change: transform, opacity;
}
.phantom-rig {
  z-index: 5;
  right: 13px;
  height: 108%;
  width: auto;
  opacity: 0.94;
  transform: translate3d(0, 2px, 0);
  transform-origin: 55% 100%;
  will-change: transform, opacity;
  animation: phantom-ready 3.8s cubic-bezier(.32,.01,.24,1) infinite;
}

.vault-recess { fill: #05090e; stroke: #334858; stroke-width: 3; }
.vault-jamb { fill: url(#vault-jamb-grad); stroke: #6a8190; stroke-width: 2; }
.vault-opening { fill: #010407; stroke: #09131b; stroke-width: 2; }
.vault-depth { fill: #071119; opacity: 0.9; }
.vault-threshold { fill: #263947; stroke: #0a1016; }
.vault-rivet { fill: #8ba0ad; stroke: #05090d; }
.vault-door-leaf {
  transform-origin: 28px 80px;
  transform-box: view-box;
  will-change: transform;
}
.door-leaf { fill: url(#vault-door-grad); stroke: #7e929e; stroke-width: 2; }
.door-edge { fill: #0b151d; }
.door-panel { fill: #172833; stroke: rgba(126,155,172,0.62); stroke-width: 2; }
.door-wheel-ring { fill: #111d26; stroke: #c08b32; stroke-width: 3; }
.door-wheel-hub { fill: url(#vault-brass-grad); stroke: #33230c; stroke-width: 2; }
.door-wheel { fill: none; stroke: #aebbc1; stroke-width: 3; stroke-linecap: round; }
.door-hinge { fill: #a57b37; stroke: #171006; }
.vault-bolts { fill: none; stroke: #b99451; stroke-width: 4; stroke-linecap: square; }
.vault-bolts { transform-origin: 54px 76px; transform-box: view-box; }

.actor-shadow { fill: rgba(0,0,0,0.58); }
.guard-coat-back { fill: #0b1116; }
.guard-coat { fill: url(#guard-coat-grad); stroke: #6c8290; stroke-width: 1.4; }
.guard-lapel { fill: #16232d; stroke: #778894; stroke-width: 1; }
.guard-belt { fill: #10171d; }
.guard-buckle { fill: #aa7f35; stroke: #1c1307; }
.guard-leg { fill: #1a2730; stroke: #40525e; }
.guard-boot { fill: #080c10; }
.guard-neck, .guard-face, .guard-ear { fill: url(#guard-face-grad); stroke: #54382b; stroke-width: 1; }
.guard-hat { fill: url(#guard-hat-grad); stroke: #718592; stroke-width: 1.4; }
.guard-hat-band { fill: #101820; }
.guard-hat-visor { fill: #0a1015; }
.guard-eye { fill: #ffd98a; }
.guard-sleeve { fill: #2a3a45; stroke: #526572; stroke-width: 1; }
.guard-glove { fill: #11191f; stroke: #566976; }
.flashlight-body { fill: #202c34; stroke: #95a8b3; }
.flashlight-head { fill: #394b55; stroke: #aebbca; }
.flashlight-lens { fill: #fff2bb; stroke: #d7b764; stroke-width: 2; }
.guard-head,
.guard-arm-front,
.guard-arm-back { transform-box: view-box; will-change: transform; }
.guard-head { transform-origin: 62px 61px; }
.guard-arm-front { transform-origin: 76px 75px; }
.guard-arm-back { transform-origin: 47px 76px; }

.phantom-shadow { fill: rgba(0,0,0,0.66); }
.phantom-trouser { fill: #101923; stroke: #2c3e4c; }
.phantom-boot { fill: #05090d; }
.phantom-coat-back { fill: #071018; }
.phantom-coat { fill: url(#phantom-coat-grad); stroke: #568096; stroke-width: 1.4; }
.phantom-lapel { fill: #091722; stroke: #4b8295; }
.phantom-belt { fill: #071017; }
.phantom-clasp { fill: #69e2ff; stroke: #0f5462; }
.phantom-neck, .phantom-face { fill: url(#phantom-face-grad); stroke: #422c27; }
.phantom-mask { fill: #071019; stroke: #2d5666; }
.phantom-eye { fill: #9df0ff; }
.phantom-hat { fill: url(#phantom-hat-grad); stroke: #527788; stroke-width: 1.3; }
.phantom-brim { fill: #071019; stroke: #365868; }
.phantom-sleeve { fill: #162b38; stroke: #426476; }
.phantom-glove { fill: #071116; stroke: #477285; }
.phantom-cable { fill: none; stroke: #69e2ff; stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.scarf-tail { fill: #154759; stroke: #4bb7cf; stroke-width: 1; }
.bag-strap { fill: none; stroke: #7d5a27; stroke-width: 4; }
.bag-body { fill: url(#phantom-bag-grad); stroke: #c3944c; stroke-width: 1.5; }
.bag-clasp { fill: #d6a851; stroke: #4a310d; }
.phantom-head,
.phantom-arm-front,
.phantom-arm-back,
.phantom-leg-front,
.phantom-leg-back,
.phantom-scarf,
.phantom-bag { transform-box: view-box; will-change: transform; }
.phantom-head { transform-origin: 64px 64px; }
.phantom-arm-front { transform-origin: 81px 76px; }
.phantom-arm-back { transform-origin: 46px 77px; }
.phantom-leg-front { transform-origin: 59px 112px; }
.phantom-leg-back { transform-origin: 71px 113px; }
.phantom-scarf { transform-origin: 48px 58px; }
.phantom-bag { transform-origin: 48px 112px; }

.guard-beam {
  position: absolute;
  z-index: 4;
  left: 24%;
  top: 28%;
  width: 78%;
  height: 86%;
  opacity: 0;
  transform: rotate(-7deg) scaleX(0.12);
  transform-origin: 0 18%;
  clip-path: polygon(0 43%, 100% 0, 100% 100%, 0 57%);
  background: linear-gradient(90deg, rgba(255,243,188,0.42), rgba(255,240,174,0.16) 55%, rgba(255,237,167,0));
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.guard-beam::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 43%, rgba(255,249,216,0.34) 49%, transparent 55%);
}
.scene-scan {
  position: absolute;
  z-index: 7;
  left: 18%;
  top: 0;
  bottom: 0;
  width: 2px;
  opacity: 0;
  background: #8eeaff;
  box-shadow: 0 0 7px #69e2ff, 0 0 22px rgba(105,226,255,0.72);
}
.scene-scan::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 52px;
  background: linear-gradient(90deg, transparent, rgba(105,226,255,0.13));
}
.scene-alarm-wash {
  position: absolute;
  z-index: 8;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 28% 38%, rgba(255,84,100,0.34), transparent 56%);
  mix-blend-mode: screen;
}

.scene.art .door-slot,
.scene.art .scene-msg,
.scene.art .bag { position: relative; z-index: 10; }
.scene.art .scene-msg {
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid rgba(244, 231, 202, 0.15);
  background: linear-gradient(180deg, rgba(23, 35, 49, 0.9), rgba(8, 12, 18, 0.86));
  box-shadow: inset 0 1px 0 rgba(244, 231, 202, 0.07), 0 2px 7px rgba(0, 0, 0, 0.5);
  font-size: 14.5px;
  font-weight: 500;
  color: #d3ddee;
  text-shadow: 0 1px 3px #000, 0 0 10px rgba(0,0,0,0.98);
}
.scene.art .bag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid rgba(232,180,76,0.34);
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(3,8,14,0.64), rgba(3,8,14,0.9));
  box-shadow: inset 0 1px rgba(255,255,255,0.06), 0 3px 10px rgba(0,0,0,0.42);
  text-shadow: 0 1px 5px rgba(0,0,0,0.98);
  transform: translateY(28px);
}
.scene.art .door-slot {
  flex: 0 0 88px;
  width: 88px;
  height: 100px;
}

/* 경비: 예고 → 진입/주시 → 퇴장. 문과 관절이 같은 박자로 맞물린다. */
.scene.warn .vault-door-leaf,
.scene[data-motion="guard-warn"] .vault-door-leaf {
  animation: vault-warn 520ms cubic-bezier(.2,.78,.2,1) both;
}
.scene.warn .vault-bolts,
.scene[data-motion="guard-warn"] .vault-bolts { animation: bolts-release 360ms steps(3, end) both; }
.scene.warn .guard-rig,
.scene[data-motion="guard-warn"] .guard-rig { animation: guard-warn-in 560ms cubic-bezier(.18,.8,.2,1) both; }
.scene.warn .phantom-rig,
.scene[data-motion="guard-warn"] .phantom-rig { animation: phantom-cover 420ms cubic-bezier(.2,.75,.18,1) both; }
.scene.warn .scene-alarm-wash,
.scene[data-motion="guard-warn"] .scene-alarm-wash { animation: alarm-prime 520ms steps(2, end) both; }

.scene.watch .vault-door-leaf,
.scene[data-motion="guard-watch"] .vault-door-leaf,
.scene[data-motion="guard-caught"] .vault-door-leaf {
  animation: vault-open 460ms cubic-bezier(.16,.82,.2,1) both;
}
.scene.watch .vault-bolts,
.scene[data-motion="guard-watch"] .vault-bolts,
.scene[data-motion="guard-caught"] .vault-bolts { transform: translateX(-5px); }
.scene.watch .guard-rig,
.scene[data-motion="guard-watch"] .guard-rig { animation: guard-enter-watch 520ms cubic-bezier(.16,.86,.22,1) both; }
.scene.watch .guard-head,
.scene[data-motion="guard-watch"] .guard-head { animation: guard-head-scan var(--guard-sweep-ms) 460ms cubic-bezier(.32,0,.22,1) infinite; }
.scene.watch .guard-arm-front,
.scene[data-motion="guard-watch"] .guard-arm-front { animation: guard-arm-scan var(--guard-sweep-ms) 460ms cubic-bezier(.32,0,.22,1) infinite; }
.scene.watch .guard-beam,
.scene[data-motion="guard-watch"] .guard-beam { animation: flashlight-sweep var(--guard-sweep-ms) 430ms cubic-bezier(.32,0,.22,1) infinite; }
.scene.watch .phantom-rig,
.scene[data-motion="guard-watch"] .phantom-rig { animation: phantom-freeze 240ms steps(2, end) both; }
.scene.watch .phantom-head,
.scene[data-motion="guard-watch"] .phantom-head { transform: rotate(-7deg) translate(-1px, 1px); }

.scene[data-motion="guard-leave"] .vault-door-leaf { animation: vault-close 660ms cubic-bezier(.32,0,.2,1) both; }
.scene[data-motion="guard-leave"] .vault-bolts { animation: bolts-set 660ms 180ms steps(3, end) both; }
.scene[data-motion="guard-leave"] .guard-rig { animation: guard-exit 620ms cubic-bezier(.42,0,.3,1) both; }
.scene[data-motion="guard-leave"] .phantom-rig { animation: phantom-release 720ms 160ms cubic-bezier(.18,.85,.2,1) both; }

.scene[data-motion="guard-caught"] .guard-rig { animation: guard-lunge 430ms cubic-bezier(.12,.9,.2,1) both; }
.scene[data-motion="guard-caught"] .guard-head { animation: guard-caught-head 430ms steps(3, end) both; }
.scene[data-motion="guard-caught"] .guard-arm-front { animation: guard-caught-arm 430ms cubic-bezier(.12,.9,.2,1) both; }
.scene[data-motion="guard-caught"] .guard-beam { animation: flashlight-blast 430ms steps(2, end) both; }
.scene[data-motion="guard-caught"] .phantom-rig { animation: phantom-caught 480ms cubic-bezier(.2,.8,.3,1) both; }
.scene[data-motion="guard-caught"] .scene-alarm-wash { animation: alarm-caught 430ms steps(3, end) both; }

/* 적응형 금고: 읽기 → 봉쇄 → 선택 → 실행. */
.scene[data-motion="adaptive-read"] .phantom-rig { animation: phantom-read 700ms cubic-bezier(.18,.82,.2,1) both; }
.scene[data-motion="adaptive-read"] .phantom-arm-front { animation: phantom-probe 700ms cubic-bezier(.18,.82,.2,1) both; }
.scene[data-motion="adaptive-read"] .phantom-cable { opacity: 1; stroke-dasharray: 28; animation: cable-deploy 700ms ease-out both; }
.scene[data-motion="adaptive-read"] .scene-scan { animation: scene-scan-read 980ms 100ms cubic-bezier(.2,.72,.2,1) both; }
.scene[data-motion="adaptive-read"] .door-wheel { animation: wheel-index 720ms steps(6, end) both; }

.scene[data-motion="adaptive-seal"] .vault-door-leaf { animation: vault-seal-hit 720ms cubic-bezier(.2,.8,.2,1) both; }
.scene[data-motion="adaptive-seal"] .vault-bolts { animation: bolts-clamp 720ms steps(4, end) both; }
.scene[data-motion="adaptive-seal"] .phantom-rig { animation: phantom-recoil 620ms cubic-bezier(.2,.8,.25,1) both; }
.scene[data-motion="adaptive-seal"] .phantom-arm-front { animation: phantom-yank 620ms cubic-bezier(.2,.8,.25,1) both; }
.scene[data-motion="adaptive-seal"] .scene-scan { animation: scene-scan-seal 720ms cubic-bezier(.2,.75,.2,1) both; }
.scene[data-motion="adaptive-seal"] .scene-alarm-wash { animation: seal-warning 720ms steps(3, end) both; }

.scene[data-motion="adaptive-choice"] .phantom-rig { animation: phantom-choice 640ms cubic-bezier(.18,.84,.2,1) both; }
.scene[data-motion="adaptive-choice"] .phantom-head { transform: rotate(-9deg) translateY(1px); }
.scene[data-motion="adaptive-choice"] .phantom-arm-back { transform: rotate(-18deg) translate(5px, -3px); }
.scene[data-motion="adaptive-choice"] .phantom-cable { opacity: 0.62; stroke-dasharray: 3 4; }

.scene[data-motion="adaptive-route"] .phantom-rig { animation: phantom-route-ready 560ms cubic-bezier(.16,.86,.2,1) both; }
.scene[data-motion="adaptive-route"] .phantom-head { transform: rotate(7deg) translate(2px, -1px); }
.scene[data-motion="adaptive-route"] .phantom-arm-front { transform: rotate(-29deg) translate(7px, -5px); }
.scene[data-motion="adaptive-route"] .phantom-scarf { animation: scarf-snap 560ms cubic-bezier(.18,.84,.2,1) both; }

.scene[data-motion="imprint"] .phantom-rig { animation: phantom-imprint 760ms cubic-bezier(.18,.84,.2,1) both; }
.scene[data-motion="imprint"] .phantom-arm-front { animation: imprint-arm 760ms cubic-bezier(.18,.84,.2,1) both; }
.scene[data-motion="imprint"] .phantom-cable { opacity: 1; animation: cable-strike 760ms ease-out both; }
.scene[data-motion="imprint"] .door-wheel { animation: wheel-catch 760ms steps(5, end) both; }

.scene[data-motion="escape"] .phantom-rig { animation: phantom-escape 900ms cubic-bezier(.3,0,.18,1) both; }
.scene[data-motion="escape"] .phantom-leg-front { animation: phantom-run-front 260ms steps(2, end) 3; }
.scene[data-motion="escape"] .phantom-leg-back { animation: phantom-run-back 260ms steps(2, end) 3; }
.scene[data-motion="escape"] .phantom-scarf { animation: scarf-escape 900ms cubic-bezier(.2,.8,.2,1) both; }
.scene[data-motion="escape"] .phantom-bag { animation: bag-run 260ms steps(2, end) 3; }

.scene[data-motion="success"] .phantom-rig { animation: phantom-success 720ms cubic-bezier(.14,.9,.2,1) both; }
.scene[data-motion="success"] .phantom-arm-front { animation: success-arm 720ms cubic-bezier(.14,.9,.2,1) both; }
.scene[data-motion="success"] .phantom-bag { animation: success-bag 720ms cubic-bezier(.14,.9,.2,1) both; }
.scene[data-motion="success"] .phantom-clasp { filter: drop-shadow(0 0 4px #69e2ff); }

/* 런타임의 세부 단계는 같은 컷아웃 연기로 수렴한다. */
.scene[data-guard-phase="warn"] .vault-door-leaf { animation: vault-warn 520ms cubic-bezier(.2,.78,.2,1) both; }
.scene[data-guard-phase="warn"] .vault-bolts { animation: bolts-release 360ms steps(3, end) both; }
.scene[data-guard-phase="warn"] .guard-rig { animation: guard-warn-in 560ms cubic-bezier(.18,.8,.2,1) both; }
.scene[data-guard-phase="warn"] .phantom-rig { animation: phantom-cover 420ms cubic-bezier(.2,.75,.18,1) both; }
.scene[data-guard-phase="warn"] .scene-alarm-wash { animation: alarm-prime 520ms steps(2, end) both; }

.scene[data-guard-phase="watch"] .vault-door-leaf,
.scene[data-motion="adaptive-guard"] .vault-door-leaf { animation: vault-open 460ms cubic-bezier(.16,.82,.2,1) both; }
.scene[data-guard-phase="watch"] .guard-rig,
.scene[data-motion="adaptive-guard"] .guard-rig { animation: guard-enter-watch 520ms cubic-bezier(.16,.86,.22,1) both; }
.scene[data-guard-phase="watch"] .guard-head,
.scene[data-motion="adaptive-guard"] .guard-head { animation: guard-head-scan var(--guard-sweep-ms) 460ms cubic-bezier(.32,0,.22,1) infinite; }
.scene[data-guard-phase="watch"] .guard-arm-front,
.scene[data-motion="adaptive-guard"] .guard-arm-front { animation: guard-arm-scan var(--guard-sweep-ms) 460ms cubic-bezier(.32,0,.22,1) infinite; }
.scene[data-guard-phase="watch"] .guard-beam,
.scene[data-motion="adaptive-guard"] .guard-beam { animation: flashlight-sweep var(--guard-sweep-ms) 430ms cubic-bezier(.32,0,.22,1) infinite; }
.scene[data-guard-phase="watch"] .phantom-rig,
.scene[data-motion="adaptive-guard"] .phantom-rig { animation: phantom-freeze 240ms steps(2, end) both; }

.scene[data-guard-phase="leave"] .vault-door-leaf { animation: vault-close 660ms cubic-bezier(.32,0,.2,1) both; }
.scene[data-guard-phase="leave"] .vault-bolts { animation: bolts-set 660ms 180ms steps(3, end) both; }
.scene[data-guard-phase="leave"] .guard-rig { animation: guard-exit 620ms cubic-bezier(.42,0,.3,1) both; }
.scene[data-guard-phase="leave"] .phantom-rig { animation: phantom-release 720ms 160ms cubic-bezier(.18,.85,.2,1) both; }

.scene[data-guard-phase="caught"] .guard-rig,
.scene[data-motion="caught"] .guard-rig,
.scene[data-motion="escape-fail"] .guard-rig { animation: guard-lunge 430ms cubic-bezier(.12,.9,.2,1) both; }
.scene[data-guard-phase="caught"] .guard-head,
.scene[data-motion="caught"] .guard-head,
.scene[data-motion="escape-fail"] .guard-head { animation: guard-caught-head 430ms steps(3, end) both; }
.scene[data-guard-phase="caught"] .guard-arm-front,
.scene[data-motion="caught"] .guard-arm-front,
.scene[data-motion="escape-fail"] .guard-arm-front { animation: guard-caught-arm 430ms cubic-bezier(.12,.9,.2,1) both; }
.scene[data-guard-phase="caught"] .guard-beam,
.scene[data-motion="caught"] .guard-beam,
.scene[data-motion="escape-fail"] .guard-beam { animation: flashlight-blast 430ms steps(2, end) both; }
.scene[data-guard-phase="caught"] .phantom-rig,
.scene[data-motion="caught"] .phantom-rig,
.scene[data-motion="fail"] .phantom-rig,
.scene[data-motion="escape-fail"] .phantom-rig { animation: phantom-caught 480ms cubic-bezier(.2,.8,.3,1) both; }
.scene[data-motion="caught"] .scene-alarm-wash,
.scene[data-motion="fail"] .scene-alarm-wash,
.scene[data-motion="escape-fail"] .scene-alarm-wash { animation: alarm-caught 430ms steps(3,end) both; }

.scene[data-motion="trace"] .phantom-rig { animation: phantom-route-ready 560ms cubic-bezier(.16,.86,.2,1) both; }
.scene[data-motion="trace"] .phantom-head { transform: rotate(7deg) translate(2px,-1px); }
.scene[data-motion="trace"] .phantom-arm-front { transform: rotate(-29deg) translate(7px,-5px); }
.scene[data-motion="dial"] .phantom-rig { animation: phantom-imprint 760ms cubic-bezier(.18,.84,.2,1) both; }
.scene[data-motion="dial"] .phantom-arm-front { animation: imprint-arm 760ms cubic-bezier(.18,.84,.2,1) both; }
.scene[data-motion="dial"] .door-wheel { animation: wheel-catch 760ms steps(5,end) both; }
.scene[data-motion="breach"] .phantom-rig { animation: phantom-success 720ms cubic-bezier(.14,.9,.2,1) both; }
.scene[data-motion="breach"] .phantom-arm-front { animation: success-arm 720ms cubic-bezier(.14,.9,.2,1) both; }
.scene[data-motion="escape-clear"] .phantom-rig { animation: phantom-escape 900ms cubic-bezier(.3,0,.18,1) both; }
.scene[data-motion="escape-clear"] .phantom-leg-front { animation: phantom-run-front 260ms steps(2,end) 3; }
.scene[data-motion="escape-clear"] .phantom-leg-back { animation: phantom-run-back 260ms steps(2,end) 3; }
.scene[data-motion="escape-clear"] .phantom-scarf { animation: scarf-escape 900ms cubic-bezier(.2,.8,.2,1) both; }
.scene[data-motion="escape-clear"] .phantom-bag { animation: bag-run 260ms steps(2,end) 3; }

@keyframes phantom-ready {
  0%, 73%, 100% { transform: translate3d(0,2px,0); }
  78% { transform: translate3d(-2px,1px,0) rotate(-0.6deg); }
  84% { transform: translate3d(1px,2px,0) rotate(0.25deg); }
  90% { transform: translate3d(0,2px,0); }
}
@keyframes vault-warn { 0% { transform: scaleX(1); } 28% { transform: translateX(1px) scaleX(.98); } 45% { transform: translateX(-1px) scaleX(.98); } 100% { transform: scaleX(.82); } }
@keyframes vault-open { 0% { transform: scaleX(.82); } 18% { transform: scaleX(.86); } 70% { transform: scaleX(.11); } 84% { transform: scaleX(.17); } 100% { transform: scaleX(.14); } }
@keyframes vault-close { 0% { transform: scaleX(.14); } 58% { transform: scaleX(1.04); } 76% { transform: scaleX(.97); } 100% { transform: scaleX(1); } }
@keyframes vault-seal-hit { 0% { transform: scaleX(1); } 32% { transform: scaleX(.94); } 48% { transform: translateX(-2px) scaleX(1.02); } 62% { transform: translateX(2px) scaleX(.98); } 100% { transform: scaleX(1); } }
@keyframes bolts-release { from { transform: translateX(0); } to { transform: translateX(-5px); } }
@keyframes bolts-set { from { transform: translateX(-5px); } to { transform: translateX(0); } }
@keyframes bolts-clamp { 0%, 28% { transform: translateX(-6px); } 48% { transform: translateX(3px); } 64% { transform: translateX(-2px); } 100% { transform: translateX(0); } }
@keyframes guard-warn-in { 0% { opacity: 0; transform: translate3d(-47px,0,0); } 55% { opacity: .42; } 100% { opacity: .72; transform: translate3d(-16px,0,0) rotate(-2deg); } }
@keyframes guard-enter-watch { 0% { opacity: .7; transform: translate3d(-16px,0,0) rotate(-2deg); } 58% { opacity: 1; transform: translate3d(47px,-1px,0) rotate(2deg); } 76% { transform: translate3d(41px,0,0) rotate(-.5deg); } 100% { opacity: 1; transform: translate3d(43px,0,0); } }
@keyframes guard-head-scan { 0%, 12% { transform: rotate(-8deg); } 43%, 58% { transform: rotate(9deg); } 86%, 100% { transform: rotate(-8deg); } }
@keyframes guard-arm-scan { 0%, 12% { transform: rotate(-11deg); } 43%, 58% { transform: rotate(13deg); } 86%, 100% { transform: rotate(-11deg); } }
@keyframes flashlight-sweep { 0%, 12% { opacity: .26; transform: rotate(-9deg) scaleX(.88); } 43%, 58% { opacity: .38; transform: rotate(7deg) scaleX(1.02); } 86%, 100% { opacity: .26; transform: rotate(-9deg) scaleX(.88); } }
@keyframes guard-exit { 0% { opacity: 1; transform: translate3d(43px,0,0); } 30% { transform: translate3d(48px,0,0) rotate(1deg); } 100% { opacity: 0; transform: translate3d(-47px,0,0); } }
@keyframes guard-lunge { 0% { opacity: .8; transform: translate3d(-4px,0,0); } 45% { opacity: 1; transform: translate3d(61px,-2px,0) rotate(4deg) scale(1.04); } 64% { transform: translate3d(55px,0,0) rotate(1deg); } 100% { opacity: 1; transform: translate3d(58px,0,0) scale(1.02); } }
@keyframes guard-caught-head { 0% { transform: rotate(-8deg); } 100% { transform: rotate(14deg); } }
@keyframes guard-caught-arm { 0% { transform: rotate(-8deg); } 100% { transform: rotate(24deg) translate(3px,-1px); } }
@keyframes flashlight-blast { 0% { opacity: 0; transform: rotate(0) scaleX(.2); } 46%, 100% { opacity: .72; transform: rotate(4deg) scaleX(1.18); } }
@keyframes phantom-cover { 0% { transform: translate3d(0,2px,0); } 65% { transform: translate3d(12px,9px,0) rotate(5deg) scaleY(.93); } 100% { transform: translate3d(10px,7px,0) rotate(3deg) scaleY(.95); } }
@keyframes phantom-freeze { 0% { transform: translate3d(10px,7px,0) rotate(3deg); } 45% { transform: translate3d(12px,8px,0) rotate(4deg); } 100% { transform: translate3d(11px,8px,0) rotate(3deg); } }
@keyframes phantom-release { 0% { transform: translate3d(11px,8px,0) rotate(3deg); } 48% { transform: translate3d(-3px,0,0) rotate(-2deg); } 70% { transform: translate3d(1px,2px,0) rotate(.5deg); } 100% { transform: translate3d(0,2px,0); } }
@keyframes phantom-caught { 0% { opacity: .95; transform: translate3d(8px,5px,0); } 38% { transform: translate3d(21px,-2px,0) rotate(9deg); } 60% { transform: translate3d(15px,7px,0) rotate(-6deg); } 100% { opacity: .45; transform: translate3d(24px,14px,0) rotate(10deg); } }
@keyframes alarm-prime { 0% { opacity: 0; } 50% { opacity: .22; } 100% { opacity: .1; } }
@keyframes alarm-caught { 0% { opacity: 0; } 38% { opacity: .72; } 62% { opacity: .2; } 100% { opacity: .5; } }
@keyframes phantom-read { 0% { transform: translate3d(0,2px,0); } 48% { transform: translate3d(-8px,0,0) rotate(-3deg); } 68% { transform: translate3d(-5px,1px,0) rotate(-1deg); } 100% { transform: translate3d(-6px,1px,0) rotate(-2deg); } }
@keyframes phantom-probe { 0% { transform: rotate(0); } 58% { transform: rotate(-37deg) translate(8px,-6px); } 75% { transform: rotate(-31deg) translate(7px,-5px); } 100% { transform: rotate(-33deg) translate(7px,-5px); } }
@keyframes cable-deploy { from { stroke-dashoffset: 28; } to { stroke-dashoffset: 0; } }
@keyframes scene-scan-read { 0% { opacity: 0; transform: translateX(0); } 14% { opacity: .8; } 78% { opacity: .78; transform: translateX(270px); } 100% { opacity: 0; transform: translateX(294px); } }
@keyframes phantom-recoil { 0% { transform: translate3d(-6px,1px,0) rotate(-2deg); } 28% { transform: translate3d(8px,-1px,0) rotate(5deg); } 48% { transform: translate3d(2px,3px,0) rotate(-2deg); } 100% { transform: translate3d(5px,2px,0) rotate(1deg); } }
@keyframes phantom-yank { 0% { transform: rotate(-33deg) translate(7px,-5px); } 35% { transform: rotate(18deg) translate(-4px,3px); } 56% { transform: rotate(-8deg); } 100% { transform: rotate(0); } }
@keyframes scene-scan-seal { 0% { opacity: .7; transform: translateX(286px); background: #8eeaff; } 38% { opacity: 1; transform: translateX(170px); } 48% { background: #ff5464; box-shadow: 0 0 8px #ff5464, 0 0 26px rgba(255,84,100,.7); } 100% { opacity: 0; transform: translateX(24px); } }
@keyframes seal-warning { 0%, 40% { opacity: 0; } 48% { opacity: .62; } 68% { opacity: .16; } 100% { opacity: 0; } }
@keyframes phantom-choice { 0% { transform: translate3d(5px,2px,0) rotate(1deg); } 45% { transform: translate3d(-2px,0,0) rotate(-2deg); } 68% { transform: translate3d(1px,2px,0) rotate(.5deg); } 100% { transform: translate3d(0,2px,0); } }
@keyframes phantom-route-ready { 0% { transform: translate3d(0,2px,0); } 52% { transform: translate3d(-9px,5px,0) rotate(-5deg) scaleY(.95); } 74% { transform: translate3d(-5px,3px,0) rotate(-2deg); } 100% { transform: translate3d(-7px,4px,0) rotate(-3deg); } }
@keyframes scarf-snap { 0% { transform: rotate(0); } 54% { transform: rotate(13deg) scaleX(1.16); } 74% { transform: rotate(-4deg) scaleX(.98); } 100% { transform: rotate(3deg); } }
@keyframes phantom-imprint { 0% { transform: translate3d(0,2px,0); } 38% { transform: translate3d(-11px,-1px,0) rotate(-5deg); } 55% { transform: translate3d(-4px,3px,0) rotate(3deg); } 74% { transform: translate3d(-7px,1px,0) rotate(-2deg); } 100% { transform: translate3d(-6px,2px,0); } }
@keyframes imprint-arm { 0% { transform: rotate(0); } 38% { transform: rotate(-48deg) translate(9px,-8px); } 55% { transform: rotate(-28deg) translate(5px,-3px); } 100% { transform: rotate(-34deg) translate(7px,-5px); } }
@keyframes cable-strike { 0% { stroke-dasharray: 3 30; stroke-dashoffset: 30; } 46% { stroke-dasharray: 30 0; stroke-dashoffset: 0; } 100% { stroke-dasharray: 4 3; stroke-dashoffset: -8; } }
@keyframes wheel-index { to { transform: rotate(60deg); transform-origin: 53px 76px; } }
@keyframes wheel-catch { 0% { transform: rotate(0); transform-origin: 53px 76px; } 60% { transform: rotate(84deg); transform-origin: 53px 76px; } 100% { transform: rotate(74deg); transform-origin: 53px 76px; } }
@keyframes phantom-escape { 0% { opacity: 1; transform: translate3d(-7px,4px,0) rotate(-3deg); } 18% { transform: translate3d(-18px,9px,0) rotate(-9deg) scaleY(.92); } 35% { opacity: 1; transform: translate3d(8px,0,0) rotate(8deg); } 100% { opacity: 0; transform: translate3d(142px,-4px,0) rotate(12deg); } }
@keyframes phantom-run-front { from { transform: rotate(22deg); } to { transform: rotate(-28deg); } }
@keyframes phantom-run-back { from { transform: rotate(-24deg); } to { transform: rotate(26deg); } }
@keyframes scarf-escape { 0% { transform: rotate(3deg) scaleX(1); } 18% { transform: rotate(-10deg) scaleX(.86); } 42%, 100% { transform: rotate(-18deg) scaleX(1.4); } }
@keyframes bag-run { from { transform: rotate(-7deg); } to { transform: rotate(9deg); } }
@keyframes phantom-success { 0% { transform: translate3d(-4px,4px,0) scaleY(.96); } 42% { transform: translate3d(0,-5px,0) rotate(-2deg); } 64% { transform: translate3d(0,1px,0) rotate(1deg); } 100% { transform: translate3d(0,0,0); } }
@keyframes success-arm { 0% { transform: rotate(0); } 48% { transform: rotate(-76deg) translate(10px,-8px); } 68% { transform: rotate(-66deg) translate(9px,-6px); } 100% { transform: rotate(-70deg) translate(9px,-7px); } }
@keyframes success-bag { 0% { transform: rotate(0) translateY(0); } 48% { transform: rotate(-9deg) translateY(-12px); } 68% { transform: rotate(4deg) translateY(-8px); } 100% { transform: rotate(0) translateY(-9px); } }

.scene-msg { flex: 1; font-size: 13px; color: var(--muted); }
.scene.warn .scene-msg { color: var(--warn, #ffb454); }
.scene.watch .scene-msg { color: var(--red); font-weight: 700; }

.challenge-hold { display: grid; gap: 7px; width: 100%; }
.challenge-hold strong {
  color: #ffe8a8;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.25px;
}
.challenge-hold-track {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
}
.challenge-hold-track i {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left;
  background: linear-gradient(90deg, #69e2ff, #ffe09a);
  animation: challengeHoldProgress var(--hold-ms, 1900ms) linear both;
}
@keyframes challengeHoldProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.adaptive-choice > span.goal:not(.chosen)::after {
  content: 'TARGET';
  position: absolute;
  right: 6px;
  top: 5px;
  color: #ffe099;
  font-size: 7px;
  letter-spacing: 0.8px;
}

.adaptive-choice-title {
  margin-bottom: 6px;
  color: #d8f7ff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.35px;
}
.adaptive-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.adaptive-choice > span {
  position: relative;
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(105, 226, 255, 0.48);
  background: rgba(4, 20, 28, 0.76);
}
.adaptive-choice .jackpot { border-color: rgba(255, 211, 112, 0.56); background: rgba(43, 29, 5, 0.72); }
.adaptive-choice b { color: #8eeaff; font-size: 11.5px; line-height: 1.05; letter-spacing: 0.45px; }
.adaptive-choice .jackpot b { color: #ffe09a; }
.adaptive-choice .route-vibe {
  display: block;
  margin: 1px 0 2px;
  color: #7ddcff;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.adaptive-choice .jackpot .route-vibe { color: #ffd97e; }
.adaptive-choice small { color: #d3dde2; font-size: 10.25px; line-height: 1.28; }
.adaptive-choice small em {
  display: block;
  margin-top: 3px;
  color: #9eb1ba;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.1px;
}
.adaptive-choice .jackpot small em { color: #ffe09a; }
.adaptive-choice .chosen { box-shadow: 0 0 14px rgba(105, 226, 255, 0.28); }
.adaptive-choice .jackpot.chosen { box-shadow: 0 0 14px rgba(232, 180, 76, 0.32); }
.adaptive-choice .muted { opacity: 0.28; }

/* 적응형 안내 씬은 선택 카드 높이를 레이아웃에 포함한다. 표시 전용이므로
   포인터만 통과시키고 보드의 시각·입력 영역과 분리한다. */
#game.adaptive-vault > .scene {
  z-index: 3;
  pointer-events: none;
}

.bag { font-size: 14px; color: var(--muted); white-space: nowrap; }
.bag b { color: var(--gold); }
.bag-mark {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  transform: rotate(45deg);
  border: 1px solid #ffe2a0;
  border-radius: 2px;
  background: linear-gradient(135deg, #ffe5a8, #d69a34 58%, #6e430f);
  box-shadow: 0 0 7px rgba(232,180,76,0.55);
}

/* 경비 주시 중 보드 위축 */
#game.watch #board {
  box-shadow: 0 0 0 3px rgba(255, 84, 100, 0.45), 0 16px 50px rgba(0, 0, 0, 0.4);
  filter: brightness(0.86);
}

.boardwrap {
  position: relative;
  flex: 1;
  display: flex;
  /* P1.3: 보드는 씬 바로 아래에서 시작한다. 하단 고정은 씬과 보드 사이에 죽은 밴드를
     만들었다(실측 300px+). 남는 높이는 보드 아래로 가라앉는다 */
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
  padding-bottom: 6px;
}
.boardwrap::before,
.boardwrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.boardwrap::before {
  left: -22%;
  right: -12%;
  top: -5%;
  bottom: -5%;
  transform: translate3d(-20%, -8%, 0) rotate(-14deg);
  transform-origin: 8% 0;
  clip-path: polygon(0 0, 42% 0, 88% 100%, 24% 100%);
  /* 2026-08-26: 강판 보드 위에서 최대 0.30 앰버가 거의 안 보였다(소유자: "없어졌다"). 빔 코어와 키프레임 투명도를 올린다. */
  background:
    linear-gradient(100deg, transparent 0 16%, rgba(255,244,196,0.08) 28%, rgba(255,240,178,0.36) 53%, rgba(255,244,197,0.07) 74%, transparent 86%);
  mix-blend-mode: screen;
}
.boardwrap::after {
  left: 8%;
  right: 8%;
  width: auto;
  height: 3px;
  top: 8%;
  bottom: auto;
  background: linear-gradient(90deg, transparent, #69e2ff 18% 82%, transparent);
  box-shadow: 0 0 10px rgba(105,226,255,0.88), 0 8px 22px rgba(105,226,255,0.16);
}
#game.watch .boardwrap::before,
.boardwrap[data-motion="guard-watch"]::before,
.boardwrap[data-motion="adaptive-guard"]::before {
  animation: board-flashlight-sweep var(--guard-sweep-ms, 1160ms) 510ms cubic-bezier(.32,0,.22,1) infinite;
}
.boardwrap[data-motion="guard-caught"]::before,
.boardwrap[data-motion="caught"]::before,
.boardwrap[data-motion="escape-fail"]::before {
  animation: board-flashlight-caught 430ms steps(2, end) both;
}
#game.adaptive-shift .boardwrap::after,
.boardwrap[data-motion="adaptive-seal"]::after {
  animation: board-security-scan 720ms cubic-bezier(.18,.82,.2,1) both;
}
@keyframes board-flashlight-sweep {
  0%, 12% { opacity: .38; transform: translate3d(-18%,-7%,0) rotate(-14deg); }
  43%, 58% { opacity: .62; transform: translate3d(36%,2%,0) rotate(9deg); }
  86%, 100% { opacity: .38; transform: translate3d(-18%,-7%,0) rotate(-14deg); }
}
@keyframes board-flashlight-caught {
  0% { opacity: 0; transform: translate3d(-8%,-3%,0) rotate(-5deg) scaleX(.5); }
  44%, 100% { opacity: .54; transform: translate3d(18%,0,0) rotate(3deg) scaleX(1.15); }
}
@keyframes board-security-scan {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: .95; }
  68% { opacity: .88; background: linear-gradient(90deg, transparent, #69e2ff 18% 82%, transparent); transform: translateY(58vh); }
  76% { background: linear-gradient(90deg, transparent, #ff5464 18% 82%, transparent); box-shadow: 0 0 10px rgba(255,84,100,.9), 0 8px 22px rgba(255,84,100,.18); }
  100% { opacity: 0; transform: translateY(66vh); }
}

/* 금고 문짝 베젤: 두꺼운 금속 프레임 + 안쪽 깊이 */
#board {
  position: relative;
  z-index: 1;
  touch-action: none;
  border-radius: 2px;
  background: var(--panel);
  border: 7px solid #2b3342;
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.55),
    0 0 0 1px #0a0d13,
    0 0 0 2px rgba(232, 180, 76, 0.14),
    0 1px 0 3px rgba(255, 255, 255, 0.04),
    0 22px 60px rgba(0, 0, 0, 0.55);
}

.signature-vault #board {
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.55),
    0 0 0 1px #0a0d13,
    0 0 0 2px rgba(127, 231, 255, 0.22),
    0 0 28px rgba(127, 231, 255, 0.12),
    0 22px 60px rgba(0, 0, 0, 0.55);
}
.signature-vault .chip.ready {
  border-color: rgba(127, 231, 255, 0.72);
  box-shadow: 0 0 14px rgba(127, 231, 255, 0.26);
  color: var(--spectral);
}
.signature-vault .chip.ready b { color: var(--spectral); }

.toast {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  background: rgba(20, 24, 33, 0.92);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  width: max-content;
  max-width: calc(100% - 28px);
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
  z-index: 4;
}
.toast.show { animation: toastIn 1.5s ease forwards; }
.toast.bad { border-color: rgba(255, 84, 100, 0.5); color: #ffb9c0; }
@keyframes toastIn {
  0% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  12% { opacity: 1; transform: translateX(-50%) translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.gfoot { display: flex; justify-content: center; }

/* 힌트 = 절취선 티켓(광고 시청권) */
.ad-btn {
  border: 1px dashed rgba(232, 180, 76, 0.55);
  background: rgba(232, 180, 76, 0.08);
  color: var(--gold);
  border-radius: 2px;
  padding: 11px 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.ad-btn:active { transform: scale(0.96); }
.ad-btn:disabled { opacity: 0.35; }

/* ============ 오버레이 ============ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 15, 0.78);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 60;
  padding: max(16px, env(safe-area-inset-top, 0px)) 24px max(16px, env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.panel {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  background: linear-gradient(180deg, #1e2532, #141924);
  border: 1px solid rgba(232, 180, 76, 0.4);
  border-radius: 2px;
  padding: 26px 24px;
  --panel-px: 24px;
  width: min(330px, 92vw);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto 0;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px #0a0d13,
    0 0 24px rgba(232, 180, 76, 0.1),
    0 26px 80px rgba(0, 0, 0, 0.6);
  animation: panelIn 0.32s cubic-bezier(0.34, 1.4, 0.5, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 231, 255, 0.35) transparent;
}
/* 패널 상단 황동 헤어라인 */
.panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232, 180, 76, 0.7), transparent);
}
@keyframes panelIn {
  0% { opacity: 0; transform: translateY(24px) scale(0.88); }
  60% { opacity: 1; transform: translateY(-4px) scale(1.03); }
  100% { opacity: 1; transform: none; }
}

/* ---------- 주스: 플래시, 보드 킥, 가방 범프, 장물 비행, 컨페티 ---------- */
.flash {
  position: absolute;
  border-radius: 2px;
  background: radial-gradient(circle, rgba(255, 236, 180, 0.55), rgba(255, 236, 180, 0) 72%);
  pointer-events: none;
  z-index: 5;
  animation: flashFade 0.28s ease-out forwards;
}
.flash.red { background: radial-gradient(circle, rgba(255, 84, 100, 0.5), rgba(255, 84, 100, 0) 72%); }
@keyframes flashFade { from { opacity: 1; } to { opacity: 0; } }

.board-pop { animation: boardPopA 0.18s ease-out; }
@keyframes boardPopA { 40% { transform: scale(1.02); } }

.bump { animation: bumpA 0.3s cubic-bezier(0.3, 1.8, 0.5, 1); }
@keyframes bumpA { 40% { transform: scale(1.4); } }

/* 패턴 관상: 그은 선이 닮은꼴로 변하는 순간 */
.shape-pop {
  position: absolute; /* left/top은 JS가 보드 중심으로 지정 */
  transform: translate(-50%, -50%);
  font-size: 96px;
  z-index: 8;
  pointer-events: none;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.6));
  animation: shapePop 1.25s cubic-bezier(0.3, 1.6, 0.5, 1) forwards;
}
.shape-pop.shape-img { width: 170px; height: auto; font-size: 0; }

/* 적응형 금고 피날레: 경로를 억지로 사물 모양에 맞추지 않고 침투 균열로 각인한다. */
.shape-pop.breach-pop {
  width: 264px;
  height: 264px;
  font-size: 0;
  filter: drop-shadow(0 0 12px rgba(69, 222, 239, 0.78)) drop-shadow(0 10px 28px rgba(0, 0, 0, 0.72));
  mix-blend-mode: screen;
  animation: breachPop 1.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.breach-pop svg { width: 100%; height: 100%; overflow: visible; }
.breach-halo {
  fill: rgba(4, 16, 29, 0.12);
  stroke: rgba(70, 216, 232, 0.58);
  stroke-width: 2;
  stroke-dasharray: 5 8;
  transform-origin: 120px 120px;
  animation: breachRing 0.72s ease-out forwards;
}
.breach-seal,
.breach-cut {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: miter;
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  animation: breachDraw 0.48s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}
.breach-seal { stroke: #f5bf4e; stroke-width: 4; filter: drop-shadow(0 0 8px #f5bf4e); }
.breach-seal-a,
.breach-seal-b { transform-origin: 120px 120px; }
.breach-seal-a { animation: breachDraw 0.38s cubic-bezier(0.1, 0.8, 0.2, 1) forwards, breachSealA 0.72s 0.3s ease-out forwards; }
.breach-seal-b { animation: breachDraw 0.38s cubic-bezier(0.1, 0.8, 0.2, 1) forwards, breachSealB 0.72s 0.3s ease-out forwards; }
.breach-cut { stroke-width: 8; }
.breach-cut.cut-cyan { stroke: #46d8e8; filter: drop-shadow(0 0 9px #46d8e8); animation-delay: 0.12s; }
.breach-keyhole {
  fill: #fff6cf;
  stroke: #f5bf4e;
  stroke-width: 3;
  transform-origin: 120px 120px;
  animation: breachCore 0.72s ease-out forwards;
}

/* 팬텀(원샷) 모자 팝: 짧고 가볍게, 성공 서지를 방해하지 않는 크기 */
.hat-pop {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 46px;
  z-index: 8;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(150, 120, 255, 0.55));
  animation: hatPopA 0.9s cubic-bezier(0.3, 1.5, 0.5, 1) forwards;
}
@keyframes hatPopA {
  0% { transform: translate(-50%, -20%) scale(0.3) rotate(-20deg); opacity: 0; }
  25% { transform: translate(-50%, -70%) scale(1.15) rotate(8deg); opacity: 1; }
  55% { transform: translate(-50%, -90%) scale(1) rotate(-4deg); opacity: 1; }
  100% { transform: translate(-50%, -140%) scale(0.9) rotate(2deg); opacity: 0; }
}
@keyframes shapePop {
  0% { transform: translate(-50%, -50%) scale(0.2) rotate(-14deg); opacity: 0; }
  18% { transform: translate(-50%, -50%) scale(1.25) rotate(6deg); opacity: 1; }
  32% { transform: translate(-50%, -50%) scale(0.95) rotate(-4deg); }
  46% { transform: translate(-50%, -50%) scale(1.08) rotate(2deg); }
  78% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -55%) scale(0.9); opacity: 0; }
}
@keyframes breachPop {
  0% { transform: translate(-50%, -50%) scale(0.32); opacity: 0; }
  14% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
  28% { transform: translate(-50%, -50%) scale(0.98); }
  72% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.08); opacity: 0; }
}
@keyframes breachDraw { to { stroke-dashoffset: 0; } }
@keyframes breachSealA { to { transform: translate(7px, -5px) rotate(5deg); } }
@keyframes breachSealB { to { transform: translate(-7px, 5px) rotate(-5deg); } }
@keyframes breachRing {
  0% { transform: scale(0.4) rotate(-18deg); opacity: 0; }
  45% { transform: scale(1.12) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 0.82; }
}
@keyframes breachCore {
  0% { transform: scale(0); opacity: 0; }
  35% { transform: scale(1.8); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 한 줄 촌평은 종이 쪽지 톤(예고장과 같은 세계) */
.quip { font-family: "Noto Sans KR", system-ui, sans-serif; color: #b3a586; font-size: 12px; font-style: normal; }

.loot-fly {
  position: fixed;
  z-index: 75;
  font-size: 32px;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

.p-emoji { font-size: 48px; line-height: 1; }
.p-title {
  font-family: "Black Han Sans", "Noto Sans KR", sans-serif;
  font-size: 25px;
  margin: 12px 0 4px;
}
.p-title.gold { color: var(--gold); }
.p-title.red { color: var(--red); }
.p-desc { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.p-desc b { color: var(--text); }

/* 90초 하이스트: 예고장 안의 네 비트를 금고 텀블러처럼 한 줄로 고정한다. */
.challenge-kicker {
  color: #b99a58;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
}
.challenge-route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 20px 0 16px;
}
.challenge-seed {
  display: block;
  margin: 2px auto 0;
  border: 1px solid rgba(216, 166, 74, 0.38);
  border-radius: 2px;
  padding: 7px 11px;
  background: rgba(11, 25, 34, 0.72);
  color: #8eeaff;
  font: 700 10px/1 "Noto Sans KR", sans-serif;
  letter-spacing: 1.2px;
  cursor: pointer;
}
.challenge-protocol-preview {
  margin: 6px 0 2px;
  color: #9fdff0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.45px;
  line-height: 1.35;
  text-align: center;
}
.challenge-seed:focus-visible { outline: 2px solid #8eeaff; outline-offset: 3px; }
.challenge-target {
  margin-top: 8px;
  color: #d7eff5;
  font-size: 10px;
  letter-spacing: 0.8px;
}
.challenge-route::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: rgba(232, 180, 76, 0.36);
}
.challenge-route span {
  position: relative;
  color: #9d927d;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
}
.challenge-route b {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin: 0 auto 6px;
  border: 1px solid rgba(232, 180, 76, 0.65);
  border-radius: 50%;
  background: #171b24;
  color: #ffd77e;
  font-family: "Black Han Sans", "Noto Sans KR", sans-serif;
  font-size: 12px;
  font-weight: 400;
  box-shadow: inset 0 0 0 3px rgba(232, 180, 76, 0.08), 0 0 12px rgba(232, 180, 76, 0.1);
}
.challenge-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 13px;
}
.challenge-facts span,
.challenge-proof {
  border: 1px solid rgba(232, 180, 76, 0.22);
  background: rgba(10, 13, 19, 0.42);
  color: #c8b17c;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  padding: 5px 7px;
}
.challenge-proof {
  margin-top: 14px;
  line-height: 1.55;
  letter-spacing: 0.15px;
}
.chip.challenge-clock b { color: #ffd77e; }
.chip.challenge-clock.over b { color: var(--red); }
.chip.challenge-seed-chip {
  border-color: rgba(216, 166, 74, 0.3);
  color: #8eeaff;
}
.chip.challenge-target-chip { color: #d7eff5; }

.adaptive-vault .boardwrap {
  box-shadow: inset 0 0 0 1px rgba(105, 226, 255, 0.2), 0 0 28px rgba(33, 174, 208, 0.12);
}
.adaptive-vault .scene-msg { color: #a8ebfa; }
.blackout-live .scene.art .scene-bg,
.blackout-live .scene.art .scene-open-bg,
.blackout-live .scene.art .scene-guard-bg {
  filter: brightness(0.2) saturate(0.4) contrast(1.12);
}
.blackout-live .scene.art::after {
  background:
    radial-gradient(circle at 18% 52%, rgba(14, 64, 76, 0.2), transparent 24%),
    linear-gradient(90deg, rgba(0, 3, 8, 0.46), rgba(0, 3, 8, 0.82));
}
.blackout-live .scene-msg {
  color: #8eeaff;
  text-shadow: 0 0 12px rgba(62, 220, 242, 0.32), 0 1px 8px rgba(0, 0, 0, 0.98);
}
.blackout-live #board {
  background: #01040a;
  box-shadow:
    inset 0 0 46px rgba(0, 0, 0, 0.92),
    0 0 0 1px #02050a,
    0 0 0 2px rgba(82, 220, 238, 0.2),
    0 0 30px rgba(20, 156, 180, 0.16),
    0 22px 60px rgba(0, 0, 0, 0.7);
}
.adaptive-shift .boardwrap {
  animation: adaptive-lock 0.78s cubic-bezier(.2,.7,.2,1);
}
@keyframes adaptive-lock {
  0%, 100% { filter: none; }
  24% { filter: saturate(1.5) contrast(1.08); box-shadow: inset 0 0 0 2px rgba(255,84,100,0.5), 0 0 34px rgba(255,60,80,0.24); }
  52% { transform: translateX(-2px); }
  62% { transform: translateX(2px); }
}

.challenge-score {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1px 12px;
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid rgba(232, 180, 76, 0.34);
  background: linear-gradient(135deg, rgba(232, 180, 76, 0.11), rgba(216, 166, 74, 0.05));
  text-align: left;
}
.challenge-recap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 14px;
}
.challenge-recap span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 7px 4px;
  border: 1px solid rgba(216, 166, 74, 0.24);
  background: rgba(7, 18, 26, 0.58);
}
.challenge-recap i { color: #7fdae9; font-size: 10px; font-style: normal; font-weight: 800; }
.challenge-recap b { color: #e7edf0; font-size: 10px; line-height: 1.2; }
.challenge-score span {
  color: #a99c82;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.3px;
}
.challenge-score b {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: #ffe09a;
  font-family: "Black Han Sans", "Noto Sans KR", sans-serif;
  font-size: 33px;
  font-weight: 400;
  line-height: 0.9;
}
.challenge-score em {
  color: #8eeaff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 1.5px;
}
.challenge-result-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  color: #bfc8ce;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
}
.challenge-choice {
  margin-top: 7px;
  padding: 6px 8px;
  border: 1px solid rgba(127, 231, 255, 0.28);
  background: rgba(127, 231, 255, 0.06);
  color: #9cecff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-align: left;
}
.challenge-choice.jackpot {
  border-color: rgba(232, 180, 76, 0.38);
  background: rgba(232, 180, 76, 0.08);
  color: #ffe09a;
}
.challenge-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
.challenge-compare span,
.challenge-compare.reset {
  padding: 7px 8px;
  border: 1px solid rgba(123, 226, 255, 0.2);
  background: rgba(5, 14, 22, 0.72);
  color: #b8c8d8;
  font-size: 9px;
  line-height: 1.25;
}
.challenge-compare b { color: #ffe09a; }
.challenge-compare.reset { display: block; color: #ffb16a; }
.challenge-pb,
.challenge-delta {
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(244, 231, 202, 0.16);
  background: rgba(216, 166, 74, 0.06);
  color: #bdeefa;
  font-size: 10px;
  text-align: left;
}
.challenge-pb.new,
.challenge-delta.win { border-left-color: #e8b44c; color: #ffe09a; }
.challenge-delta.lose,
.challenge-pb.unranked { border-left-color: #ff6574; color: #ff9aa5; }
.challenge-result-actions { gap: 7px; }

.p-btns { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }

.p-btn {
  border: 1px solid #7a5514;
  border-radius: 2px;
  padding: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  color: #2b1e04;
  background: linear-gradient(180deg, #ffe9b0, var(--gold-hi) 30%, var(--gold) 75%, #c8922e);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(90, 58, 8, 0.4), 0 3px 0 #6e4c10;
  transition: transform 0.06s, box-shadow 0.06s;
}
.p-btn.ghost {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: 0 3px 0 #0b0e14;
}
.p-btn.adface {
  background: rgba(232, 180, 76, 0.1);
  border: 1px solid rgba(232, 180, 76, 0.45);
  color: var(--gold);
  box-shadow: 0 3px 0 rgba(90, 58, 8, 0.55);
}
.p-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 #6e4c10; }
.p-btn.ghost:active, .p-btn.adface:active { box-shadow: 0 1px 0 #0b0e14; }

/* 가짜 광고(SDK 연결 전 자리) */
.fake-ad {
  height: 150px;
  border-radius: 2px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  background: repeating-linear-gradient(45deg, #1c212c, #1c212c 12px, #181d27 12px, #181d27 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  margin: 14px 0 4px;
}
.fake-ad .cnt {
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
}

/* ---------- 등급 행(구역/건물 패널) + 도감 ---------- */
.grade-row {
  font-size: 21px;
  letter-spacing: 6px;
  margin: 8px 0 6px;
}

.grade-cap { font-size: 11px; color: var(--faint); margin-top: 10px; }

.vault-scroll {
  max-height: 46vh;
  overflow-y: auto;
  /* 6열 팬텀 배지(right:-4px)가 스크롤포트를 넘어 가로 지터를 만들지 않게:
     x축은 잠그고 배지가 앉을 여백을 padding으로 확보 */
  overflow-x: hidden;
  padding-right: 6px;
  margin-top: 12px;
  text-align: left;
  overscroll-behavior: contain;
}
.v-bld {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  margin: 12px 0 6px;
}
.v-bld:first-child { margin-top: 0; }
.v-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.v-slot {
  position: relative;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 17px;
  line-height: 1;
  padding: 8px 0;
  text-align: center;
  color: var(--faint);
}
.v-slot.got { border-color: rgba(232, 180, 76, 0.45); color: inherit; }
.v-slot[data-i] { cursor: pointer; transition: transform 0.07s; }
.v-slot[data-i]:active { transform: scale(0.9); }
.v-slot.ph {
  border-color: rgba(185, 166, 255, 0.55);
  box-shadow: 0 0 8px rgba(150, 120, 255, 0.28);
  color: inherit;
}
.v-slot.ph::after {
  content: '';
  position: absolute;
  top: -6px;
  right: -4px;
  font-size: 10px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}
/* 관통 정복 마크: 청록 테두리와 코드-native 배지 */
.v-slot.thru { border-color: rgba(150, 230, 255, 0.6); box-shadow: 0 0 8px rgba(120, 210, 255, 0.3); }
.v-slot.thru::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -4px;
  font-size: 10px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}

.share-box {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 12px;
  font-size: 15px;
  letter-spacing: 2px;
  margin-top: 12px;
  white-space: pre-line;
}

@supports not (transform-box: fill-box) {
  .scene.art .scene-cinema,
  .scene.art .scene-open-bg { display: none; }
  .scene.art .scene-bg { opacity: 1; filter: none; }
  .scene.art .scene-guard-bg { opacity: 0; }
  .scene.art.watch .scene-bg { opacity: 0; }
  .scene.art.watch .scene-guard-bg { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .alarm i.on,
  .panel,
  .scene-cinema,
  .scene-cinema *,
  .boardwrap::before,
  .boardwrap::after,
  .challenge-hold-track i,
  .breach-pop,
  .breach-pop * { animation: none !important; transition: none !important; }
  .shape-pop, .hat-pop, .board-pop, .bump { animation: none !important; }
  .adaptive-shift .boardwrap { animation: none !important; }
  /* P0-11: 토스트는 실패 원인 전달 수단이라 모션 없이도 보여야 한다 (해제는 JS 타이머) */
  .toast.show { animation: none; opacity: 1; }
  .challenge-hold-track i { transform: scaleX(1); }
  .breach-cut, .breach-seal { stroke-dashoffset: 0; }
  .breach-halo, .breach-keyhole { opacity: 1; }

  .phantom-rig { opacity: .94; transform: translate3d(0,2px,0); }
  .scene.warn .vault-door-leaf,
  .scene[data-motion="guard-warn"] .vault-door-leaf,
  .scene[data-guard-phase="warn"] .vault-door-leaf { transform: scaleX(.82); }
  .scene.warn .guard-rig,
  .scene[data-motion="guard-warn"] .guard-rig,
  .scene[data-guard-phase="warn"] .guard-rig { opacity: .72; transform: translate3d(-16px,0,0) rotate(-2deg); }
  .scene.warn .phantom-rig,
  .scene[data-motion="guard-warn"] .phantom-rig { transform: translate3d(10px,7px,0) rotate(3deg) scaleY(.95); }

  .scene.watch .vault-door-leaf,
  .scene[data-motion="guard-watch"] .vault-door-leaf,
  .scene[data-guard-phase="watch"] .vault-door-leaf,
  .scene[data-motion="adaptive-guard"] .vault-door-leaf,
  .scene[data-motion="guard-caught"] .vault-door-leaf { transform: scaleX(.14); }
  .scene.watch .guard-rig,
  .scene[data-motion="guard-watch"] .guard-rig,
  .scene[data-guard-phase="watch"] .guard-rig,
  .scene[data-motion="adaptive-guard"] .guard-rig { opacity: 1; transform: translate3d(43px,0,0); }
  .scene.watch .guard-head,
  .scene[data-motion="guard-watch"] .guard-head,
  .scene[data-guard-phase="watch"] .guard-head,
  .scene[data-motion="adaptive-guard"] .guard-head { transform: rotate(-8deg); }
  .scene.watch .guard-arm-front,
  .scene[data-motion="guard-watch"] .guard-arm-front,
  .scene[data-guard-phase="watch"] .guard-arm-front,
  .scene[data-motion="adaptive-guard"] .guard-arm-front { transform: rotate(-11deg); }
  .scene.watch .guard-beam,
  .scene[data-motion="guard-watch"] .guard-beam,
  .scene[data-guard-phase="watch"] .guard-beam,
  .scene[data-motion="adaptive-guard"] .guard-beam { opacity: .28; transform: rotate(-5deg) scaleX(.92); }
  .scene.watch .phantom-rig,
  .scene[data-motion="guard-watch"] .phantom-rig { transform: translate3d(11px,8px,0) rotate(3deg); }

  .scene[data-motion="guard-leave"] .vault-door-leaf { transform: scaleX(1); }
  .scene[data-motion="guard-leave"] .guard-rig,
  .scene[data-guard-phase="leave"] .guard-rig { opacity: 0; transform: translate3d(-47px,0,0); }
  .scene[data-motion="guard-caught"] .guard-rig,
  .scene[data-motion="caught"] .guard-rig,
  .scene[data-motion="escape-fail"] .guard-rig,
  .scene[data-guard-phase="caught"] .guard-rig { opacity: 1; transform: translate3d(58px,0,0) scale(1.02); }
  .scene[data-motion="guard-caught"] .guard-head,
  .scene[data-motion="caught"] .guard-head,
  .scene[data-motion="escape-fail"] .guard-head { transform: rotate(14deg); }
  .scene[data-motion="guard-caught"] .guard-arm-front,
  .scene[data-motion="caught"] .guard-arm-front,
  .scene[data-motion="escape-fail"] .guard-arm-front { transform: rotate(24deg) translate(3px,-1px); }
  .scene[data-motion="guard-caught"] .guard-beam,
  .scene[data-motion="caught"] .guard-beam,
  .scene[data-motion="escape-fail"] .guard-beam { opacity: .62; transform: rotate(4deg) scaleX(1.18); }
  .scene[data-motion="guard-caught"] .phantom-rig,
  .scene[data-motion="caught"] .phantom-rig,
  .scene[data-motion="fail"] .phantom-rig,
  .scene[data-motion="escape-fail"] .phantom-rig { opacity: .45; transform: translate3d(24px,14px,0) rotate(10deg); }

  .scene[data-motion="adaptive-read"] .phantom-rig { transform: translate3d(-6px,1px,0) rotate(-2deg); }
  .scene[data-motion="adaptive-read"] .phantom-arm-front { transform: rotate(-33deg) translate(7px,-5px); }
  .scene[data-motion="adaptive-read"] .phantom-cable { opacity: 1; stroke-dasharray: none; }
  .scene[data-motion="adaptive-seal"] .phantom-rig { transform: translate3d(5px,2px,0) rotate(1deg); }
  .scene[data-motion="adaptive-choice"] .phantom-rig { transform: translate3d(0,2px,0); }
  .scene[data-motion="adaptive-route"] .phantom-rig { transform: translate3d(-7px,4px,0) rotate(-3deg); }
  .scene[data-motion="trace"] .phantom-rig { transform: translate3d(-7px,4px,0) rotate(-3deg); }
  .scene[data-motion="adaptive-route"] .phantom-scarf { transform: rotate(3deg); }
  .scene[data-motion="imprint"] .phantom-rig { transform: translate3d(-6px,2px,0); }
  .scene[data-motion="imprint"] .phantom-arm-front { transform: rotate(-34deg) translate(7px,-5px); }
  .scene[data-motion="imprint"] .phantom-cable { opacity: 1; stroke-dasharray: 4 3; }
  .scene[data-motion="escape"] .phantom-rig,
  .scene[data-motion="escape-clear"] .phantom-rig { opacity: .18; transform: translate3d(34px,0,0) rotate(8deg); }
  .scene[data-motion="success"] .phantom-rig,
  .scene[data-motion="breach"] .phantom-rig { transform: translate3d(0,0,0); }
  .scene[data-motion="success"] .phantom-arm-front { transform: rotate(-70deg) translate(9px,-7px); }
  .scene[data-motion="success"] .phantom-bag { transform: translateY(-9px); }

  #game.watch .boardwrap::before,
  .boardwrap[data-motion="guard-watch"]::before,
  .boardwrap[data-motion="adaptive-guard"]::before { opacity: .32; transform: translate3d(5%,0,0) rotate(-2deg); }
  .boardwrap[data-motion="guard-caught"]::before,
  .boardwrap[data-motion="caught"]::before,
  .boardwrap[data-motion="escape-fail"]::before { opacity: .42; transform: translate3d(18%,0,0) rotate(3deg); }
  #game.adaptive-shift .boardwrap::after,
  .boardwrap[data-motion="adaptive-seal"]::after { top: 50%; opacity: .72; }
}

@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 { width: 32px; height: 32px; border-radius: 2px; font-size: 14px; }
  .lv-label { padding: 5px 7px; font-size: 11.5px; }
  .lv-label .pos { font-size: 10px; }
  .alarm { gap: 4px; padding: 5px 7px; }
  .alarm i { width: 9px; height: 9px; }
  .chips { gap: 3px; flex-wrap: nowrap; }
  .chip.challenge-seed-chip { display: none; }
  .chip { padding: 4px 6px 4px 14px; font-size: 9.5px; white-space: nowrap; }
  .chip::before { left: 5px; width: 4px; height: 4px; }
  .chip b { font-size: 11px; }
  .scene.art { min-height: 66px; padding: 4px 8px; gap: 6px; }
  .scene.art .door-slot { flex-basis: 46px; width: 46px; height: 56px; }
  .vault-rig { left: -6px; bottom: -6px; height: 124%; }
  .guard-rig { left: 8px; bottom: -5px; height: 108%; }
  .phantom-rig { right: 7px; bottom: -5px; height: 106%; }
  .guard-beam { left: 21%; top: 24%; height: 94%; }
  .scene.art::after { background: linear-gradient(90deg, transparent 0 18%, rgba(3,8,14,.28) 29%, rgba(3,8,14,.58) 54% 81%, rgba(3,8,14,.25)); }
  .scene.art .scene-msg { font-size: 11px; line-height: 1.2; }
  .challenge-hold strong { font-size: 10px; }
  .adaptive-choice-title { font-size: 9.5px; margin-bottom: 3px; }
  .adaptive-choice > span { padding: 4px 5px; }
  .adaptive-choice b { font-size: 9.5px; }
  .adaptive-choice .route-vibe { font-size: 7.6px; }
  .adaptive-choice small { font-size: 8.3px; }
  .adaptive-choice small em { margin-top: 1px; font-size: 7.6px; }
  .scene.art .bag { font-size: 10px; }
  .scene.art .bag { transform: translateY(16px); }
  .boardwrap { padding-bottom: 0; }
  .panel { padding: 20px 18px; --panel-px: 18px; }
  .p-btns { margin-top: 12px; gap: 7px; }
  .p-btn { padding: 11px; }
}