/* 잿길 오버레이 UI 부품. 모든 길이는 게임 도트(--px) 배수.
   --px는 캔버스 확대 배율(1280×720 창이면 2px). 오버레이 뿌리(#stage 등)에 인라인으로 준다.
   글꼴은 style.css의 Galmuri11 @font-face를 쓴다. Galmuri11 도트 격자는 12px라서
   --fs(6도트)는 배율이 짝수일 때 가장 또렷하다. 큰 글(12·24도트)은 어느 배율이든 또렷하다. */

:root {
  --px: 2px;

  --ui-ink: #0d0b0a;
  --ui-out: #171311;
  --ui-panel: #1b1816;
  --ui-panel2: #221e1b;
  --ui-rule: #2e2824;
  --ui-dim: #4a4038;
  --ui-ash: #857666;
  --ui-ash-hi: #c2b3a1;
  --ui-text: #e6dac8;
  --ui-bone: #f4e9da;
  --ui-ember: #ff8a3d;
  --ui-ember-hi: #ffc070;
  --ui-ember-lo: #7a4424;
  --ui-gold: #ffd36b;
  --ui-gold-hi: #fff2c2;
  --ui-red: #c43e33;
}

.ui-layer {
  /* var(--px)는 선언한 요소에서 풀리므로 글자 크기는 레이어에서 계산한다 */
  --fs: calc(6 * var(--px));
  --fs2: calc(12 * var(--px));
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: auto;
  font-family: "Galmuri11", monospace;
  font-size: var(--fs);
  line-height: 1.5;
  color: var(--ui-text);
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
  z-index: 10;
}
.ui-layer * { box-sizing: border-box; }
.ui-layer button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
}

.ui-icon {
  display: block;
  width: calc(var(--w) * var(--s, 1) * var(--px));
  height: calc(var(--h) * var(--s, 1) * var(--px));
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex: none;
}

/* 1도트 모서리를 깎은 도트 틀. 바깥 요소 배경 = 테두리색, 안쪽은 --n 두께만큼 들어간다. */
.ui-notch {
  clip-path: polygon(
    var(--px) 0, calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%,
    var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)), 0 var(--px), var(--px) var(--px)
  );
}

/* 딤: 바둑판 도트로 한 겹 덮는다 */
.ui-dim {
  position: absolute;
  inset: 0;
  background-color: rgba(13, 11, 10, 0.62);
  background-image:
    linear-gradient(45deg, rgba(13, 11, 10, 0.35) 25%, transparent 25%, transparent 75%, rgba(13, 11, 10, 0.35) 75%),
    linear-gradient(45deg, rgba(13, 11, 10, 0.35) 25%, transparent 25%, transparent 75%, rgba(13, 11, 10, 0.35) 75%);
  background-size: calc(2 * var(--px)) calc(2 * var(--px));
  background-position: 0 0, var(--px) var(--px);
  animation: ui-fade 0.12s steps(3) both;
}
@keyframes ui-fade { from { opacity: 0; } }

/* ── 버튼 (재 비용 버튼, 타이틀 버튼 공용) */
.ui-layer .ui-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--px));
  height: calc(16 * var(--px));
  padding: 0 calc(6 * var(--px));
  background: var(--ui-ash) !important;
  white-space: nowrap;
}
.ui-btn::before {
  content: "";
  position: absolute;
  inset: var(--px) var(--px) calc(2 * var(--px));
  background: var(--ui-panel2);
  z-index: -1;
}
.ui-btn { isolation: isolate; }
.ui-btn .ui-cost { display: inline-flex; align-items: center; gap: var(--px); color: var(--ui-ash-hi); }
.ui-btn:hover:not(:disabled)::before,
.ui-btn.on::before { background: #2e2622; }
.ui-btn:hover:not(:disabled) { background: var(--ui-ember) !important; }
.ui-btn:active:not(:disabled) { transform: translateY(var(--px)); }
.ui-btn:disabled { cursor: default; background: var(--ui-dim) !important; color: var(--ui-dim); }
.ui-btn:disabled .ui-icon { opacity: 0.35; }
.ui-btn:disabled .ui-cost { color: var(--ui-dim); }
.ui-btn.on { background: var(--ui-red) !important; color: var(--ui-bone); }
.ui-btn.primary { background: var(--ui-ember) !important; color: var(--ui-ink); }
.ui-btn.primary::before { background: var(--ui-ember); inset: var(--px) var(--px) calc(2 * var(--px)); }
.ui-btn.primary { box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--ui-ember-lo); }
.ui-btn.primary:hover:not(:disabled)::before { background: var(--ui-ember-hi); }
.ui-btn.primary:hover:not(:disabled) { background: var(--ui-ember-hi) !important; }

/* ═════════════ 레벨업 ═════════════ */
.lu-head {
  position: absolute;
  top: calc(18 * var(--px));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: calc(4 * var(--px));
  animation: lu-drop 0.22s steps(4) both;
}
.lu-head .lu-lvword { color: var(--ui-ash-hi); }
.lu-head .lu-lv {
  font-size: var(--fs2);
  font-weight: 700;
  color: var(--ui-ember);
  text-shadow: var(--px) var(--px) 0 var(--ui-out);
  line-height: 1;
}
@keyframes lu-drop { from { transform: translateY(calc(-10 * var(--px))); opacity: 0; } }

.lu-row {
  position: absolute;
  top: calc(48 * var(--px));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: calc(10 * var(--px));
}

.lu-card {
  --edge: var(--ui-ash);
  --face: var(--ui-panel);
  position: relative;
  width: calc(112 * var(--px));
  height: calc(136 * var(--px));
  padding: var(--px) !important;
  background: var(--edge) !important;
  animation: lu-flip 0.3s steps(6) both;
  animation-delay: calc(var(--i) * 0.08s + 0.06s);
}
.lu-card::after {
  /* 카드 뒷면: 뒤집히는 전반부에만 보인다 */
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, var(--ui-ember-lo) 0 var(--px), transparent var(--px) calc(4 * var(--px))),
    var(--ui-panel2);
  box-shadow: inset 0 0 0 var(--px) var(--ui-ash), inset 0 0 0 calc(3 * var(--px)) var(--ui-panel2), inset 0 0 0 calc(4 * var(--px)) var(--ui-ember-lo);
  animation: lu-back 0.3s steps(1) both;
  animation-delay: calc(var(--i) * 0.08s + 0.06s);
  pointer-events: none;
}
@keyframes lu-flip {
  0% { transform: scaleX(1) translateY(calc(6 * var(--px))); }
  50% { transform: scaleX(0) translateY(calc(-4 * var(--px))); }
  100% { transform: scaleX(1) translateY(0); }
}
@keyframes lu-back {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 0; }
}

.lu-face {
  position: relative;
  height: 100%;
  background: var(--face);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(8 * var(--px)) calc(6 * var(--px)) calc(6 * var(--px));
  gap: calc(4 * var(--px));
  text-align: center;
}
.lu-art {
  position: relative;
  width: calc(48 * var(--px));
  height: calc(44 * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-ink);
  box-shadow: inset 0 0 0 var(--px) var(--ui-rule);
  flex: none;
}
.lu-name {
  font-weight: 700;
  color: var(--ui-bone);
  line-height: 1.3;
}
.lu-desc {
  color: var(--ui-ash-hi);
  line-height: 1.5;
  word-break: keep-all;
  flex: 1;
}
.lu-key {
  position: absolute;
  top: calc(3 * var(--px));
  left: calc(3 * var(--px));
  opacity: 0.75;
}
.lu-new {
  position: absolute;
  top: calc(3 * var(--px));
  right: calc(3 * var(--px));
  padding: 0 calc(3 * var(--px));
  background: var(--ui-ember);
  color: var(--ui-ink);
  font-weight: 700;
  line-height: calc(10 * var(--px));
  animation: lu-blink 0.5s steps(1) infinite;
}
@keyframes lu-blink { 50% { background: var(--ui-ember-hi); } }

/* 레벨 점 줄 */
.lu-dots { display: flex; gap: calc(2 * var(--px)); flex: none; }
.lu-dots i {
  width: calc(4 * var(--px));
  height: calc(4 * var(--px));
  box-shadow: inset 0 0 0 var(--px) var(--ui-dim);
}
.lu-dots i.on { background: var(--ui-ash-hi); box-shadow: none; }
.lu-dots i.up { background: var(--ui-ember); box-shadow: none; animation: lu-up 0.4s steps(1) infinite; animation-delay: calc(var(--k, 0) * 0.1s); }
@keyframes lu-up { 50% { background: var(--ui-ember-hi); } }
/* 두세 칸 오르는 카드(희귀·전설): 오를 칸이 차례로 타오른다 */
.lu-card.r-rare .lu-dots i.up, .lu-card.r-legend .lu-dots i.up { animation: lu-up 0.4s steps(1) infinite, lu-kindle 0.5s steps(3) both; animation-delay: calc(var(--k, 0) * 0.1s), calc(0.4s + var(--k, 0) * 0.12s); }
.lu-card.r-legend.late .lu-dots i.up { animation-delay: calc(var(--k, 0) * 0.1s), calc(0.95s + var(--k, 0) * 0.12s); }
@keyframes lu-kindle { 0% { transform: scale(0.25); background: var(--ui-ash); } 60% { transform: scale(1.5); background: #fff6e0; } }

/* 등급 */
.lu-card.r-common { --edge: var(--ui-ash); }
.lu-card.r-rare { --edge: var(--ui-ember); }
.lu-card.r-rare .lu-face { box-shadow: inset 0 0 0 var(--px) var(--ui-ember-lo); }
.lu-card.r-legend {
  /* 전설 = 가장 밝은 불빛: 흰 불심에서 주황 불꽃으로 흐르는 테 */
  padding: calc(2 * var(--px)) !important;
  background: linear-gradient(180deg, #fff6e0 0 18%, var(--ui-ember-hi) 18% 46%, var(--ui-ember) 46% 78%, var(--ui-ember-lo) 78% 100%) !important;
  background-size: 100% 300% !important;
  animation: lu-flip 0.3s steps(6) both, lu-flame 0.9s steps(9) infinite;
  animation-delay: calc(var(--i) * 0.08s + 0.06s), calc(var(--i) * 0.08s + 0.4s);
}
.lu-card.r-legend .lu-face { box-shadow: inset 0 0 0 var(--px) var(--ui-ember-lo); background: linear-gradient(transparent 60%, rgba(255, 138, 61, 0.12)), #231a14; }
.lu-card.r-legend .lu-name { color: #fff6e0; text-shadow: 0 0 0 transparent, var(--px) var(--px) 0 var(--ui-ember-lo); }
@keyframes lu-flame { from { background-position: 0 100%; } to { background-position: 0 0; } }
/* 전설 불티: 카드 아래 가장자리에서 떠올라 희게 사그라든다 */
.lu-spark {
  position: absolute;
  bottom: 0;
  left: calc(8 * var(--px) + var(--s) * 19 * var(--px));
  width: calc(2 * var(--px));
  height: calc(2 * var(--px));
  background: var(--ui-ember-hi);
  animation: lu-rise 1.1s steps(11) infinite;
  animation-delay: calc(var(--s) * 0.17s + 0.3s);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}
@keyframes lu-rise {
  0% { transform: translateY(0); opacity: 1; background: var(--ui-ember); }
  50% { background: var(--ui-ember-hi); opacity: 1; }
  100% { transform: translate(calc((var(--s) - 2.5) * 2 * var(--px)), calc(-40 * var(--px))); background: #fff6e0; opacity: 0; }
}

/* 등장 의식: 등불 빛이 번지는 원 + 재가 불티로 바뀌며 떠오름 */
.lu-layer.lu-wait .lu-bar { visibility: hidden; }
.lu-glow { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; }
.lu-ring {
  position: absolute;
  left: calc(-120 * var(--px));
  top: calc(-120 * var(--px));
  width: calc(240 * var(--px));
  height: calc(240 * var(--px));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 224, 0.85) 0 12%, rgba(255, 192, 112, 0.55) 12% 26%, rgba(255, 138, 61, 0.28) 26% 44%, rgba(122, 68, 36, 0.14) 44% 62%, transparent 62%);
  animation: lu-bloom 0.5s steps(6) both;
}
.lu-ring2 { animation: lu-bloom2 1s steps(10) 0.08s both; background: radial-gradient(circle, transparent 55%, rgba(255, 138, 61, 0.35) 55% 58%, transparent 58%); }
@keyframes lu-bloom { 0% { transform: scale(0.05); opacity: 1; } 55% { opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes lu-bloom2 { 0% { transform: scale(0.1); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.lu-ash {
  position: absolute;
  width: calc(2 * var(--px));
  height: calc(2 * var(--px));
  background: var(--ui-ash);
  animation: lu-ash 0.9s steps(9) both;
  animation-delay: var(--d);
}
@keyframes lu-ash {
  0% { transform: translate(0, 0); background: var(--ui-ash); opacity: 1; }
  35% { background: var(--ui-ember); }
  70% { background: var(--ui-ember-hi); opacity: 1; }
  100% { transform: translate(calc(var(--x) * var(--px)), calc((var(--y) - 30) * var(--px))); background: #fff6e0; opacity: 0; }
}
/* 전설 카드는 한 박자 늦게 뒤집힌다. 그동안 뒷면이 달아오른다. */
.lu-card.late, .lu-card.late::after { animation-delay: calc(var(--i) * 0.08s + 0.61s); }
.lu-card.r-legend.late { animation-delay: calc(var(--i) * 0.08s + 0.61s), calc(var(--i) * 0.08s + 0.95s); }
.lu-card.late::after { animation: lu-back 0.3s steps(1) both, lu-heat 0.55s steps(5) both; animation-delay: calc(var(--i) * 0.08s + 0.61s), 0s; }
@keyframes lu-heat { 0% { filter: none; } 100% { filter: brightness(1.8) sepia(0.6); } }
.lu-card.late { transform-origin: 50% 60%; }
/* 전설이 뒤집히는 순간: 화면이 한 번 환해진다 */
.lu-layer.lu-blaze::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255, 246, 224, 0.5), rgba(255, 138, 61, 0.18) 40%, transparent 70%);
  animation: lu-blaze 0.6s steps(6) both;
  pointer-events: none;
}
@keyframes lu-blaze { from { opacity: 1; } to { opacity: 0; } }

/* 갈래 카드: 깃발 모양(아래가 V자로 파임), 위에 차수 */
.lu-card.k-branch {
  --face: #1f1a16;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 12 * var(--px)), 0 100%);
}
.lu-card.k-branch .lu-face {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 12 * var(--px)), 0 100%);
  padding-bottom: calc(16 * var(--px));
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(7 * var(--px)), rgba(255, 138, 61, 0.06) calc(7 * var(--px)) calc(8 * var(--px))),
    var(--face);
}
.lu-card.k-branch .lu-art { width: calc(96 * var(--px)); background: none; box-shadow: none; gap: 0; justify-content: flex-start; }
.lu-card.k-branch .lu-fork { margin-left: calc(-1 * var(--px)); }
.lu-card.k-branch .lu-bicon {
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-ink);
  box-shadow: inset 0 0 0 var(--px) var(--ui-ember);
}
.lu-tier {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 calc(5 * var(--px));
  line-height: calc(10 * var(--px));
  background: var(--edge);
  color: var(--ui-ink);
  font-weight: 700;
}

/* 공명 카드: 모서리를 크게 깎은 팔각 + 두 아이콘이 이어진 고리 */
.lu-card.k-resonance {
  --cut: calc(8 * var(--px));
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.lu-card.k-resonance .lu-face {
  --cut: calc(7 * var(--px));
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  background:
    linear-gradient(transparent calc(22 * var(--px)), rgba(255, 138, 61, 0.1) calc(22 * var(--px)) calc(30 * var(--px)), transparent calc(30 * var(--px))),
    var(--face);
}
.lu-card.k-resonance .lu-art { width: calc(84 * var(--px)); background: none; box-shadow: none; }
.lu-link { display: flex; align-items: center; }
.lu-link .lu-well {
  width: calc(28 * var(--px));
  height: calc(28 * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-ink);
  box-shadow: inset 0 0 0 var(--px) var(--edge);
}
.lu-link .lu-bridge {
  width: calc(16 * var(--px));
  height: calc(6 * var(--px));
  background:
    linear-gradient(var(--ui-ember-hi), var(--ui-ember-hi)) 0 50% / 100% calc(2 * var(--px)) no-repeat,
    repeating-linear-gradient(90deg, var(--ui-ember) 0 calc(2 * var(--px)), transparent calc(2 * var(--px)) calc(4 * var(--px)));
  animation: lu-bridge 0.4s steps(2) infinite;
}
@keyframes lu-bridge { 50% { background-position: 0 50%, calc(2 * var(--px)) 0; } }
.lu-card.k-resonance .lu-name { color: var(--ui-ember-hi); }

/* 대체 보상 */
.lu-card.k-fallback { --face: #181513; }
.lu-card.k-fallback .lu-art { background: none; box-shadow: none; }

/* 손 댈 때 */
.lu-card:not(.gone):hover .lu-face,
.lu-card.hot .lu-face { filter: brightness(1.18); }
.lu-card:not(.gone):hover,
.lu-card.hot { transform: translateY(calc(-3 * var(--px))); }

/* 고른 카드는 튀고, 나머지는 흩어진다 */
.lu-card.picked { animation: lu-pick 0.36s steps(8) both !important; z-index: 3; }
.lu-card.picked .lu-face { animation: lu-flash 0.36s steps(1) both; }
@keyframes lu-pick {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(calc(-14 * var(--px))) scale(1.14); }
  60% { transform: translateY(calc(-8 * var(--px))) scale(1.08); opacity: 1; }
  100% { transform: translateY(calc(-10 * var(--px))) scale(1.1); opacity: 0; }
}
@keyframes lu-flash { 0% { filter: brightness(2.4); } 25% { filter: brightness(1.4); } 50% { filter: none; } }
.lu-card.scatter { animation: lu-scatter 0.3s steps(6) both !important; pointer-events: none; }
@keyframes lu-scatter {
  to { transform: translate(calc(var(--dx) * var(--px)), calc(90 * var(--px))) rotate(var(--rot)); opacity: 0; }
}

/* 봉인 고르는 중 */
.lu-layer.banishing .lu-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(45deg, transparent calc(50% - var(--px)), var(--ui-red) calc(50% - var(--px)) calc(50% + var(--px)), transparent calc(50% + var(--px))),
    linear-gradient(-45deg, transparent calc(50% - var(--px)), var(--ui-red) calc(50% - var(--px)) calc(50% + var(--px)), transparent calc(50% + var(--px)));
  opacity: 0;
}
.lu-layer.banishing .lu-card:hover::before { opacity: 0.9; }
.lu-layer.banishing .lu-card { --edge: var(--ui-red); }
.lu-layer.banishing .lu-card.r-legend { background: var(--ui-red) !important; }
.lu-card.burn { animation: lu-burn 0.42s steps(7) both !important; pointer-events: none; }
@keyframes lu-burn {
  0% { filter: none; clip-path: inset(0 0 0 0); }
  30% { filter: sepia(1) saturate(4) hue-rotate(-20deg) brightness(0.9); }
  100% { filter: brightness(0.3); clip-path: inset(100% 0 0 0); }
}
.lu-card.fold { animation: lu-fold 0.16s steps(3) both !important; }
@keyframes lu-fold { to { transform: scaleX(0); } }

/* 아래 줄: 가진 재 + 다시 뽑기 + 봉인 */
.lu-bar {
  position: absolute;
  top: calc(212 * var(--px));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(8 * var(--px));
  animation: ui-fade 0.2s steps(3) 0.3s both;
}
.lu-purse {
  display: inline-flex;
  align-items: center;
  gap: calc(2 * var(--px));
  color: var(--ui-ash-hi);
  margin-right: calc(6 * var(--px));
}
.lu-purse b { color: var(--ui-bone); font-weight: 700; }

/* ═════════════ 상자 ═════════════ */
.ch-box {
  position: absolute;
  left: 50%;
  top: calc(56 * var(--px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--px));
  animation: ch-in 0.24s steps(4) both;
}
@keyframes ch-in { from { transform: translateX(-50%) translateY(calc(20 * var(--px))); opacity: 0; } }
.ch-lid { animation: ch-shake 0.12s steps(2) 3; }
@keyframes ch-shake { 50% { transform: translateX(var(--px)); } }
.ch-frame {
  padding: calc(2 * var(--px));
  background: var(--ui-ember-lo);
}
.ch-frame > .ch-reels {
  display: flex;
  gap: calc(4 * var(--px));
  padding: calc(5 * var(--px));
  background: var(--ui-panel);
  box-shadow: inset 0 0 0 var(--px) #3b2718;
}
.ch-jack .ch-frame { background: var(--ui-ember-hi); }
.ch-reel { display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--px)); width: calc(52 * var(--px)); }
.ch-win {
  position: relative;
  width: calc(32 * var(--px));
  height: calc(32 * var(--px));
  overflow: hidden;
  background: var(--ui-ink);
  box-shadow: inset 0 0 0 var(--px) var(--ui-rule);
}
.ch-win::after {
  /* 위아래 그늘 */
  content: "";
  position: absolute;
  inset: var(--px);
  background: linear-gradient(var(--ui-ink) 0 calc(3 * var(--px)), transparent calc(3 * var(--px)) calc(100% - 3 * var(--px)), var(--ui-ink) calc(100% - 3 * var(--px)));
  pointer-events: none;
}
.ch-strip { position: absolute; left: 0; top: 0; width: 100%; }
.ch-strip .ch-cell { width: calc(32 * var(--px)); height: calc(32 * var(--px)); display: flex; align-items: center; justify-content: center; }
.ch-reel.spin .ch-strip { animation: ch-spin var(--spd, 0.24s) linear infinite; filter: brightness(0.8); }
@keyframes ch-spin { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.ch-reel.slow .ch-strip { animation-duration: 0.7s; filter: brightness(0.95); }
/* 거의: 제 무늬를 한 칸 지나쳐 다른 무늬가 창에 걸린 채 머물다가, 딸깍 되돌아온다 */
.ch-reel.near .ch-strip { animation: ch-near 0.64s steps(16) both; }
@keyframes ch-near {
  0% { transform: translateY(calc(8 * var(--px))); }
  30% { transform: translateY(calc(-32 * var(--px))); }
  75% { transform: translateY(calc(-30 * var(--px))); }
  100% { transform: translateY(0); }
}
.ch-reel.done .ch-strip { animation: ch-land 0.22s steps(4) both; }
@keyframes ch-land {
  0% { transform: translateY(calc(-10 * var(--px))); }
  60% { transform: translateY(calc(2 * var(--px))); }
  100% { transform: translateY(0); }
}
.ch-reel.done .ch-win { box-shadow: inset 0 0 0 var(--px) var(--ui-ember); animation: ch-pop 0.3s steps(1) both; }
.ch-jack .ch-reel.done .ch-win { box-shadow: inset 0 0 0 var(--px) #fff6e0; }
@keyframes ch-pop { 0% { background: var(--ui-ember-hi); } 34% { background: var(--ui-ember-lo); } 67% { background: var(--ui-ink); } }
.ch-name { min-height: calc(9 * var(--px)); font-weight: 700; color: var(--ui-bone); text-align: center; white-space: nowrap; }
.ch-lv { min-height: calc(9 * var(--px)); color: var(--ui-ash-hi); display: flex; gap: calc(2 * var(--px)); align-items: center; }
.ch-lv b { color: var(--ui-ember); }
.ch-jack .ch-lv b { color: #fff6e0; }
.ch-reel.spin .ch-name, .ch-reel.spin .ch-lv { visibility: hidden; }
.ch-reel.done .ch-name, .ch-reel.done .ch-lv { animation: ui-fade 0.15s steps(2) both; }

.ch-burst { position: absolute; inset: 0; pointer-events: none; }
.ch-rays {
  position: absolute;
  left: 50%;
  top: calc(90 * var(--px));
  width: calc(520 * var(--px));
  height: calc(520 * var(--px));
  margin: calc(-260 * var(--px)) 0 0 calc(-260 * var(--px));
  background: repeating-conic-gradient(rgba(255, 138, 61, 0.2) 0 8deg, transparent 8deg 22deg);
  animation: ch-rays 3.2s steps(24) infinite, ui-fade 0.2s steps(2) both;
}
@keyframes ch-rays { to { transform: rotate(90deg); } }
.ch-flash { position: absolute; inset: 0; background: #fff6e0; animation: ch-flash 0.36s steps(3) both; }
@keyframes ch-flash { from { opacity: 0.9; } to { opacity: 0; } }
.ch-bit {
  position: absolute;
  left: 50%;
  top: calc(90 * var(--px));
  width: calc(var(--sz) * var(--px));
  height: calc(var(--sz) * var(--px));
  background: var(--c);
  animation: ch-bit var(--t) steps(10) both;
  animation-delay: var(--dl, 0s);
}
@keyframes ch-bit {
  0% { transform: translate(0, 0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(var(--dx) * var(--px)), calc(var(--dy) * var(--px))); opacity: 0; }
}
.ch-big {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(18 * var(--px));
  text-align: center;
  font-size: calc(24 * var(--px));
  font-weight: 700;
  line-height: 1;
  color: var(--ui-ember-hi);
  text-shadow: var(--px) 0 0 var(--ui-out), calc(-1 * var(--px)) 0 0 var(--ui-out), 0 var(--px) 0 var(--ui-out), 0 calc(-1 * var(--px)) 0 var(--ui-out), calc(2 * var(--px)) calc(2 * var(--px)) 0 var(--ui-ember-lo);
  animation: ch-big 0.4s steps(5) both, ch-glint 0.3s steps(1) 0.4s infinite;
}
@keyframes ch-big { 0% { transform: scale(2.4); opacity: 0; } 50% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); } }
@keyframes ch-glint { 50% { color: #fff6e0; } }
.ch-next {
  position: absolute;
  bottom: calc(22 * var(--px));
  left: 50%;
  margin-left: calc(-3 * var(--px));
  width: calc(6 * var(--px));
  height: calc(4 * var(--px));
  background: var(--ui-ash-hi);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  animation: ch-bob 0.5s steps(1) infinite;
}
@keyframes ch-bob { 50% { transform: translateY(var(--px)); } }
.ch-layer.out, .lu-layer.out, .ti-layer.out { animation: ui-out 0.14s steps(3) both; }
@keyframes ui-out { to { opacity: 0; } }

/* ═════════════ 공명 컷인 ═════════════ */
.ci-layer { pointer-events: none; }
.ci-band {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(96 * var(--px));
  height: calc(72 * var(--px));
  background:
    repeating-linear-gradient(0deg, transparent 0 calc(5 * var(--px)), rgba(255, 138, 61, 0.1) calc(5 * var(--px)) calc(6 * var(--px))),
    var(--ui-ink);
  box-shadow: 0 calc(-1 * var(--px)) 0 var(--ui-ember), 0 var(--px) 0 var(--ui-ember), 0 calc(-3 * var(--px)) 0 var(--ui-ember-lo), 0 calc(3 * var(--px)) 0 var(--ui-ember-lo);
  animation: ci-band 1s steps(20) both;
}
@keyframes ci-band {
  0% { transform: scaleY(0); }
  8% { transform: scaleY(1.1); }
  12% { transform: scaleY(1); }
  86% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}
.ci-lines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(14 * var(--px)), rgba(255, 192, 112, 0.35) calc(14 * var(--px)) calc(22 * var(--px)), transparent calc(22 * var(--px)) calc(37 * var(--px)));
  background-size: calc(37 * var(--px)) calc(2 * var(--px));
  background-repeat: repeat;
  mask: repeating-linear-gradient(0deg, #000 0 var(--px), transparent var(--px) calc(7 * var(--px)));
  -webkit-mask: repeating-linear-gradient(0deg, #000 0 var(--px), transparent var(--px) calc(7 * var(--px)));
  animation: ci-lines 0.2s steps(4) infinite;
}
@keyframes ci-lines { to { background-position: calc(-37 * var(--px)) 0; } }
.ci-a, .ci-b, .ci-core {
  position: absolute;
  top: calc(106 * var(--px));
  left: 50%;
  width: calc(36 * var(--px));
  height: calc(36 * var(--px));
  margin-left: calc(-18 * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-panel);
  box-shadow: inset 0 0 0 var(--px) var(--ui-ember);
}
.ci-a { animation: ci-a 1s steps(20) both; }
.ci-b { animation: ci-b 1s steps(20) both; }
@keyframes ci-a {
  0% { transform: translateX(calc(-280 * var(--px))); }
  30% { transform: translateX(calc(-22 * var(--px))); }
  36% { transform: translateX(calc(-30 * var(--px))); }
  44%, 86% { transform: translateX(calc(-24 * var(--px))); opacity: 1; }
  100% { transform: translateX(calc(-24 * var(--px))); opacity: 0; }
}
@keyframes ci-b {
  0% { transform: translateX(calc(280 * var(--px))); }
  30% { transform: translateX(calc(22 * var(--px))); }
  36% { transform: translateX(calc(30 * var(--px))); }
  44%, 86% { transform: translateX(calc(24 * var(--px))); opacity: 1; }
  100% { transform: translateX(calc(24 * var(--px))); opacity: 0; }
}
.ci-core {
  background: none;
  box-shadow: none;
  width: calc(12 * var(--px));
  margin-left: calc(-6 * var(--px));
  animation: ci-core 1s steps(20) both;
}
.ci-core::before {
  content: "";
  width: calc(12 * var(--px));
  height: calc(4 * var(--px));
  background: repeating-linear-gradient(90deg, var(--ui-ember-hi) 0 calc(2 * var(--px)), var(--ui-ember) calc(2 * var(--px)) calc(4 * var(--px)));
}
@keyframes ci-core { 0%, 30% { opacity: 0; } 31%, 88% { opacity: 1; } 100% { opacity: 0; } }
.ci-hit {
  position: absolute;
  left: 50%;
  top: calc(124 * var(--px));
  width: calc(80 * var(--px));
  height: calc(80 * var(--px));
  margin: calc(-40 * var(--px)) 0 0 calc(-40 * var(--px));
  background:
    linear-gradient(var(--ui-bone), var(--ui-bone)) center / calc(80 * var(--px)) calc(2 * var(--px)) no-repeat,
    linear-gradient(var(--ui-bone), var(--ui-bone)) center / calc(2 * var(--px)) calc(80 * var(--px)) no-repeat,
    radial-gradient(circle, var(--ui-bone) 0 18%, var(--ui-ember-hi) 18% 30%, transparent 30%);
  animation: ci-hit 1s steps(20) both;
}
@keyframes ci-hit {
  0%, 29% { transform: scale(0); opacity: 0; }
  30% { transform: scale(0.6); opacity: 1; }
  40% { transform: scale(1.5); opacity: 0.8; }
  50%, 100% { transform: scale(2); opacity: 0; }
}
.ci-flash { position: absolute; inset: 0; background: var(--ui-bone); animation: ci-flash 1s steps(20) both; }
@keyframes ci-flash { 0%, 29% { opacity: 0; } 30% { opacity: 0.55; } 40%, 100% { opacity: 0; } }
.ci-name {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(146 * var(--px));
  text-align: center;
  font-size: var(--fs2);
  font-weight: 700;
  line-height: 1;
  color: var(--ui-ember-hi);
  text-shadow: calc(2 * var(--px)) calc(2 * var(--px)) 0 var(--ui-ember-lo);
  animation: ci-name 1s steps(20) both;
}
@keyframes ci-name {
  0%, 38% { transform: scale(2); opacity: 0; }
  46% { transform: scale(0.94); opacity: 1; }
  52%, 86% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
.ci-pair {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(119 * var(--px));
  display: flex;
  justify-content: center;
  gap: calc(96 * var(--px));
  color: var(--ui-ash-hi);
  animation: ci-pair 1s steps(20) both;
}
.ci-pair span { width: calc(90 * var(--px)); }
.ci-pair span:first-child { text-align: right; }
@keyframes ci-pair { 0%, 40% { opacity: 0; } 48%, 86% { opacity: 1; } 100% { opacity: 0; } }

/* ═════════════ 타이틀 ═════════════ */
.ti-layer { background: rgba(13, 11, 10, 0.45); }
.ti-title {
  position: absolute;
  left: 50%;
  top: calc(26 * var(--px));
  transform: translateX(-50%);
  animation: ti-rise 0.5s steps(8) both;
}
.ti-title canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
@keyframes ti-rise { from { transform: translateX(-50%) translateY(calc(12 * var(--px))); opacity: 0; } }
.ti-lamp {
  position: absolute;
  width: calc(2 * var(--px));
  height: calc(2 * var(--px));
  background: var(--ui-ember-hi);
  animation: ti-lamp 1.4s steps(1) infinite;
}
@keyframes ti-lamp { 0% { opacity: 1; } 60% { opacity: 0.3; } 80% { opacity: 1; } }

.ti-ships {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(120 * var(--px));
  display: flex;
  justify-content: center;
  gap: calc(6 * var(--px));
  animation: ui-fade 0.3s steps(3) 0.2s both;
}
.ti-ship {
  width: calc(46 * var(--px));
  height: calc(32 * var(--px));
  padding: var(--px) !important;
  background: var(--ui-rule) !important;
}
.ti-ship > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--ui-panel);
  position: relative;
}
.ti-ship:hover:not(.locked) { background: var(--ui-ash) !important; }
.ti-ship.sel { background: var(--ui-ember) !important; }
.ti-ship.sel > span { background: #261d17; }
.ti-ship.sel .ui-icon { animation: ti-bob 0.6s steps(1) infinite; }
@keyframes ti-bob { 50% { transform: translateY(calc(-1 * var(--px))); } }
.ti-ship.locked { cursor: default; }
.ti-ship .ti-lock { position: absolute; right: calc(3 * var(--px)); bottom: calc(3 * var(--px)); }
.ti-ship.nope { animation: ti-nope 0.18s steps(3); }
@keyframes ti-nope { 33% { transform: translateX(calc(-2 * var(--px))); } 66% { transform: translateX(calc(2 * var(--px))); } }
.ti-shipname {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(156 * var(--px));
  text-align: center;
  color: var(--ui-bone);
  font-weight: 700;
  animation: ui-fade 0.3s steps(3) 0.2s both;
}
.ti-btns {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(176 * var(--px));
  display: flex;
  justify-content: center;
  gap: calc(8 * var(--px));
  animation: ui-fade 0.3s steps(3) 0.3s both;
}
.ui-layer .ti-btns .ui-btn { height: calc(20 * var(--px)); padding: 0 calc(10 * var(--px)); }
.ti-btns .ui-btn.primary { font-weight: 700; }
.ti-rec {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(206 * var(--px));
  text-align: center;
  color: var(--ui-ash);
  animation: ui-fade 0.3s steps(3) 0.4s both;
}
.ti-rec b { color: var(--ui-ash-hi); font-weight: 400; }
.ti-rec i { font-style: normal; color: var(--ui-dim); padding: 0 calc(4 * var(--px)); }
.ti-keys {
  position: absolute;
  right: calc(10 * var(--px));
  bottom: calc(8 * var(--px));
  display: flex;
  align-items: flex-end;
  gap: calc(6 * var(--px));
  opacity: 0.7;
}
.ti-wasd { display: grid; grid-template-columns: repeat(3, auto); gap: var(--px); }
.ti-wasd .ui-icon:nth-child(1) { grid-area: 1 / 2; }
.ti-wasd .ui-icon:nth-child(2) { grid-area: 2 / 1; }
.ti-wasd .ui-icon:nth-child(3) { grid-area: 2 / 2; }
.ti-wasd .ui-icon:nth-child(4) { grid-area: 2 / 3; }
.ti-layer.go .ti-title { animation: ti-go 0.28s steps(4) both; }
.ti-layer.go .ti-ship.sel { animation: ti-go-ship 0.28s steps(5) both; }
@keyframes ti-go { to { filter: brightness(2.2); } }
@keyframes ti-go-ship { to { transform: translateX(calc(40 * var(--px))); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ui-layer *, .ui-layer *::before, .ui-layer *::after { animation-iteration-count: 1 !important; }
}

/* ═════════════ 구역·보스 띠 (src/ui/banner.js) ═════════════ */
.bn-layer { pointer-events: none; background: none; z-index: 5; }
.bn-band {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(96 * var(--px));
  height: calc(34 * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--px));
  background: rgba(13, 11, 10, 0.72);
  border-top: var(--px) solid var(--ui-dim);
  border-bottom: var(--px) solid var(--ui-dim);
  animation: bn-band var(--ms, 1500ms) steps(30) both;
}
@keyframes bn-band {
  0% { clip-path: inset(50% 0 50% 0); opacity: 0; }
  12% { clip-path: inset(0 0 0 0); opacity: 1; }
  82% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
.bn-band .bn-num { font-size: var(--fs2); font-weight: 700; color: var(--ui-ember); }
.bn-band .bn-name { font-size: var(--fs2); font-weight: 700; color: var(--ui-bone); letter-spacing: 0.08em; }
.bn-band .bn-cycle { font-style: normal; color: var(--ui-ash); }
.bn-boss { border-color: var(--ui-red); background: rgba(40, 10, 8, 0.78); }
.bn-boss .bn-name { color: var(--ui-bone); text-shadow: calc(1 * var(--px)) calc(1 * var(--px)) 0 var(--ui-red); }
.bn-label {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(22 * var(--px));
  text-align: center;
  color: var(--ui-ash-hi);
  text-shadow: var(--px) var(--px) 0 var(--ui-out);
}

/* ═════════════ 결과 화면의 빌드 줄 (src/overlay.js) ═════════════ */
#overlay .build {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(2 * var(--px));
  max-width: calc(180 * var(--px));
  margin: 0 auto 1.2em;
}
#overlay .build .gap { width: calc(4 * var(--px)); }

/* ═════════════ 음악 켜고 끄기 표시(M) ═════════════ */
/* 도트 음표 하나. 켜고 끌 때 잠깐 보이고, 꺼져 있는 동안은 흐리게 빗금이 그어진 채 남는다. */
.mu-icon {
  position: absolute;
  right: calc(6 * var(--px));
  bottom: calc(6 * var(--px));
  width: calc(9 * var(--px));
  height: calc(10 * var(--px));
  pointer-events: none;
  opacity: 0;
  z-index: 30;
}
.mu-icon.show { opacity: 0.85; }
.mu-icon.off.show { opacity: 0.45; }
.mu-icon.pop { animation: mu-pop 1.4s steps(7) both; }
.mu-icon.off.pop { animation: mu-pop-off 1.4s steps(7) both; }
@keyframes mu-pop { 0% { opacity: 1; transform: translateY(calc(-2 * var(--px))); } 20% { transform: none; } 70% { opacity: 0.85; } 100% { opacity: 0; } }
@keyframes mu-pop-off { 0% { opacity: 1; } 100% { opacity: 0.45; } }
.mu-icon i {
  /* 기둥 + 깃발 + 머리(도트) */
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#e6dac8, #e6dac8) calc(5 * var(--px)) 0 / var(--px) calc(8 * var(--px)) no-repeat,
    linear-gradient(#e6dac8, #e6dac8) calc(6 * var(--px)) var(--px) / var(--px) var(--px) no-repeat,
    linear-gradient(#e6dac8, #e6dac8) calc(7 * var(--px)) calc(2 * var(--px)) / var(--px) calc(2 * var(--px)) no-repeat,
    linear-gradient(#e6dac8, #e6dac8) calc(2 * var(--px)) calc(7 * var(--px)) / calc(4 * var(--px)) calc(2 * var(--px)) no-repeat,
    linear-gradient(#e6dac8, #e6dac8) calc(3 * var(--px)) calc(6 * var(--px)) / calc(2 * var(--px)) calc(4 * var(--px)) no-repeat;
}
.mu-icon.off::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(4 * var(--px));
  width: calc(10 * var(--px));
  height: var(--px);
  background: #c43e33;
  transform: rotate(-40deg);
}

/* ═════════════ 세계의 글: 순환 첫 정거장 한 줄, 비행 시작 「불을 받았다」 ═════════════ */
.bn-band.has-word { height: calc(48 * var(--px)); flex-wrap: wrap; align-content: center; row-gap: calc(3 * var(--px)); }
.bn-band .bn-word { flex-basis: 100%; text-align: center; font-style: normal; color: var(--ui-ash-hi); }
.bn-lit { border-color: var(--ui-ember-lo); background: rgba(13, 11, 10, 0.5); }
.bn-lit .bn-name { color: var(--ui-ember-hi); letter-spacing: 0.2em; }

/* ═════════════ 시작 글 (src/ui/intro.js) ═════════════ */
.in-layer { background: #0d0909; z-index: 20; cursor: default; }
.in-layer.out { animation: ui-out 0.26s steps(4) both; }
.in-sigil {
  position: absolute;
  left: 50%;
  top: calc(84 * var(--px));
  margin-left: calc(-13 * var(--px));
  opacity: 0;
  animation: in-sigil var(--total, 3s) steps(24) both;
  filter: drop-shadow(0 0 calc(3 * var(--px)) rgba(255, 138, 61, 0.6));
}
@keyframes in-sigil { 0% { opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0.4; } }
.in-line {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(128 * var(--px));
  margin: 0;
  text-align: center;
  font-size: var(--fs2);
  color: var(--ui-bone);
  letter-spacing: 0.06em;
  opacity: 0;
  animation: in-line var(--ms, 1s) steps(12) var(--d, 0s) both;
}
.in-line:last-child { color: var(--ui-ember-hi); }
@keyframes in-line { 0% { opacity: 0; } 25%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* 타이틀 제목 위 표식(13×13) */
.ui-layer.mt-title .ti-title { top: calc(20 * var(--px)); }
.ti-sigil {
  position: absolute;
  left: 50%;
  top: calc(-17 * var(--px));
  margin-left: calc(-6.5 * var(--px));
  filter: drop-shadow(0 0 calc(2 * var(--px)) rgba(255, 138, 61, 0.55));
}

/* ═════════════ 레벨업 4·5장(길잡이 등), 각성 카드 ═════════════ */
.lu-row.n4 { gap: calc(6 * var(--px)); }
.lu-row.n4 .lu-card { width: calc(106 * var(--px)); }
.lu-row.n5 { gap: calc(4 * var(--px)); }
.lu-row.n5 .lu-card { width: calc(88 * var(--px)); }
.lu-row.n5 .lu-face { padding-left: calc(4 * var(--px)); padding-right: calc(4 * var(--px)); }
.lu-row.n5 .lu-card.k-resonance .lu-art, .lu-row.n5 .lu-card.k-awaken .lu-art { width: calc(78 * var(--px)); }
.lu-row.n5 .lu-link .lu-bridge { width: calc(10 * var(--px)); }
/* 각성: 그릇과 짝 유물을 잇는 가장 밝은 불. 모서리를 깎은 팔각은 공명과 같고, 다리는 흰 불심 */
.lu-card.k-awaken {
  --cut: calc(8 * var(--px));
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.lu-card.k-awaken .lu-face {
  --cut: calc(7 * var(--px));
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.lu-card.k-awaken .lu-art { width: calc(84 * var(--px)); background: none; box-shadow: none; }
.lu-card.k-awaken .lu-well { box-shadow: inset 0 0 0 var(--px) var(--ui-ember-hi), 0 0 calc(3 * var(--px)) rgba(255, 192, 112, 0.6); }
.lu-awlink .lu-bridge {
  height: calc(8 * var(--px));
  background:
    linear-gradient(#fff6e0, #fff6e0) 0 50% / 100% calc(2 * var(--px)) no-repeat,
    repeating-linear-gradient(90deg, var(--ui-ember-hi) 0 calc(2 * var(--px)), var(--ui-ember) calc(2 * var(--px)) calc(4 * var(--px)));
}
.lu-card.k-awaken .lu-name { color: #fff6e0; }

/* 각성 컷인: 공명 컷인과 같은 모양, 더 밝게 + 띠 위 한 줄 */
.ci-awaken .ci-band { box-shadow: 0 calc(-1 * var(--px)) 0 var(--ui-ember-hi), 0 var(--px) 0 var(--ui-ember-hi), 0 calc(-3 * var(--px)) 0 var(--ui-ember), 0 calc(3 * var(--px)) 0 var(--ui-ember); }
.ci-awaken .ci-a, .ci-awaken .ci-b { box-shadow: inset 0 0 0 var(--px) var(--ui-ember-hi), 0 0 calc(4 * var(--px)) rgba(255, 192, 112, 0.5); }
.ci-awaken .ci-name { color: #fff6e0; }
.ci-head {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(84 * var(--px));
  text-align: center;
  color: var(--ui-ember-hi);
  letter-spacing: 0.2em;
  animation: ci-name 1s steps(20) both;
}

/* ═════════════ 새벽의 끝 (src/ui/ending.js) ═════════════ */
/* 색이 돌아온 세계(캔버스) 위로 세 줄이 한 줄씩. 바탕은 비워 둔다. */
.en-layer { background: none; z-index: 20; cursor: default; }
.en-layer.out { animation: ui-out 0.4s steps(6) both; }
.en-line {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(60 * var(--px));
  margin: 0;
  text-align: center;
  font-size: var(--fs2);
  color: #fffbe9;
  letter-spacing: 0.08em;
  text-shadow: var(--px) var(--px) 0 rgba(29, 74, 130, 0.8);
  opacity: 0;
  animation: en-line var(--ms, 2.6s) steps(16) var(--d, 0s) both;
}
@keyframes en-line { 0% { opacity: 0; } 22%, 78% { opacity: 1; } 100% { opacity: 0; } }

/* 처음 삼킬 때 화면 가장자리에 스치는 한 구절 (src/ui/banner.js showEdgeVerse) */
.bn-verse {
  position: absolute;
  right: calc(10 * var(--px));
  bottom: calc(40 * var(--px));
  color: var(--ui-ember-hi);
  text-shadow: var(--px) var(--px) 0 var(--ui-out);
  letter-spacing: 0.06em;
  opacity: 0;
  animation: bn-verse var(--ms, 3200ms) steps(24) both;
}
@keyframes bn-verse { 0% { opacity: 0; transform: translateX(calc(6 * var(--px))); } 20%, 70% { opacity: 0.9; transform: none; } 100% { opacity: 0; } }

/* 새벽의 끝 결과 화면: 머리글이 흰 불 */
#overlay .panel.dawn h1 { color: #fffbe9; }

/* ═════════════ 채비(설정) ═════════════ */
.st-layer {
  z-index: 14;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 11, 10, 0.8);
  animation: ui-fade 0.12s steps(3) both;
}
.st-panel {
  width: calc(236 * var(--px));
  padding: calc(8 * var(--px)) calc(12 * var(--px)) calc(9 * var(--px));
  background: var(--ui-panel);
  box-shadow: 0 0 0 var(--px) var(--ui-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(7 * var(--px));
}
.st-head { display: flex; align-items: center; gap: calc(4 * var(--px)); font-size: var(--fs2); color: var(--ui-ember-hi); line-height: 1; }
.st-head b { font-weight: 700; }
.st-grid {
  display: grid;
  grid-template-columns: calc(34 * var(--px)) 1fr;
  row-gap: calc(5 * var(--px));
  align-items: center;
  width: 100%;
}
.st-label { color: var(--ui-ash-hi); }
.st-ctl { display: flex; align-items: center; gap: calc(5 * var(--px)); min-height: calc(12 * var(--px)); }

/* 음량: 도트 열 칸 */
.ui-layer .st-vol {
  display: flex;
  gap: var(--px);
  padding: calc(2 * var(--px));
  background: var(--ui-rule);
}
.st-cell {
  display: block;
  width: calc(8 * var(--px));
  height: calc(7 * var(--px));
  background: var(--ui-panel);
  cursor: pointer;
}
.st-cell:hover { background: var(--ui-dim); }
.st-cell.on { background: var(--ui-ember-lo); box-shadow: inset 0 var(--px) 0 var(--ui-ember); }
.st-vol:focus-visible .st-cell.on, .st-vol:hover .st-cell.on { background: var(--ui-ember); box-shadow: inset 0 var(--px) 0 var(--ui-ember-hi); }
.st-vol:focus-visible { box-shadow: 0 0 0 var(--px) var(--ui-ember); }
.st-num { min-width: calc(10 * var(--px)); color: var(--ui-bone); font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; }

/* 고르기 */
.st-seg { display: flex; background: var(--ui-rule); padding: var(--px); gap: var(--px); }
.ui-layer .st-seg-b { padding: 0 calc(5 * var(--px)); height: calc(11 * var(--px)); color: var(--ui-ash); background: var(--ui-panel); }
.ui-layer .st-seg-b:hover, .ui-layer .st-seg-b:focus-visible { color: var(--ui-text); background: #2a2420; }
.ui-layer .st-seg-b.on { background: #2e2622; color: var(--ui-ember-hi); box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--ui-ember); }

/* 키 */
.st-keys { display: flex; gap: calc(3 * var(--px)); }
.st-key { display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.3; }
.st-key small { font-size: var(--fs); color: var(--ui-ash); }
.ui-layer .st-key-b {
  min-width: calc(20 * var(--px));
  height: calc(12 * var(--px));
  padding: 0 calc(3 * var(--px));
  background: var(--ui-panel2);
  color: var(--ui-bone);
  box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--ui-dim), 0 0 0 var(--px) var(--ui-rule);
}
.ui-layer .st-key-b.moved { color: var(--ui-ember-hi); }
.ui-layer .st-key-b:hover, .ui-layer .st-key-b:focus-visible { box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--ui-ember-lo), 0 0 0 var(--px) var(--ui-ember); }
.ui-layer .st-key-b.wait { color: var(--ui-ink); background: var(--ui-ember); animation: st-wait 0.8s steps(2) infinite; }
@keyframes st-wait { 50% { background: var(--ui-ember-lo); color: var(--ui-ember-hi); } }
.ui-layer .st-reset { margin-left: auto; align-self: flex-end; height: calc(12 * var(--px)); padding: 0 calc(4 * var(--px)); color: var(--ui-ash); }
.ui-layer .st-reset:hover:not(:disabled), .ui-layer .st-reset:focus-visible { color: var(--ui-ember-hi); }
.ui-layer .st-reset:disabled { color: var(--ui-dim); cursor: default; }
.ui-layer .st-back { height: calc(16 * var(--px)); padding: 0 calc(10 * var(--px)); }
.ui-layer .st-back:focus-visible { background: var(--ui-ember) !important; }
@media (prefers-reduced-motion: reduce) {
  .ui-layer .st-key-b.wait { animation: none; }
}

/* ═════════════ 협동: 레벨업을 화면 절반씩(1P 왼쪽·2P 오른쪽) ═════════════ */
.lu-layer.lu-half.lu-l { right: 50%; }
.lu-layer.lu-half.lu-r { left: 50%; }
.lu-layer.lu-half .lu-row { transform: scale(0.62); transform-origin: 50% 0; }
.lu-layer.lu-half .lu-row.n4, .lu-layer.lu-half .lu-row.n5 { transform: scale(0.5); }
.lu-layer.lu-half .lu-bar { top: calc(146 * var(--px)); gap: calc(4 * var(--px)); }
.lu-layer.lu-half.lu-l::after { content: ''; position: absolute; top: calc(12 * var(--px)); bottom: calc(12 * var(--px)); right: 0; width: var(--px); background: var(--ui-ember-lo); opacity: 0.6; }
/* 2P는 한 단계 밝은 결(같은 주황 계열) */
.lu-layer.lu-r .lu-head .lu-lv { color: var(--ui-ember-hi); }
/* 장치 커서: 밝힌 카드 */
.lu-card.cur { box-shadow: 0 0 0 var(--px) var(--ui-gold-hi), 0 0 0 calc(2 * var(--px)) var(--ui-ember); }

/* ── 터치 조작(src/platform/touch-ui.js): 떠 있는 스틱, 조준 끌기, 사름 등불, 멈춤 표식. --tu = 도트 한 칸.
   카드·메뉴(.ui-layer z 10)보다 아래, 캔버스보다 위. 판을 조작하는 동안에만(.on) 보인다. */
#touch {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  visibility: hidden;
  --tu: 3px;
}
#touch.on { visibility: visible; }
#touch img { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; -webkit-user-drag: none; }
#touch .tc-base { width: calc(32 * var(--tu)); height: calc(32 * var(--tu)); opacity: 0.22; transition: opacity 0.12s steps(2); }
#touch .tc-knob { width: calc(12 * var(--tu)); height: calc(12 * var(--tu)); opacity: 0.3; transition: opacity 0.12s steps(2); }
#touch.stick-on .tc-base { opacity: 0.7; }
#touch.stick-on .tc-knob { opacity: 0.95; }
#touch .tc-aim { width: calc(16 * var(--tu)); height: calc(16 * var(--tu)); opacity: 0; }
#touch .tc-aimdot { width: calc(6 * var(--tu)); height: calc(6 * var(--tu)); opacity: 0; }
#touch.aim-on .tc-aim { opacity: 0.55; }
#touch.aim-on .tc-aimdot { opacity: 0.9; }
#touch .tc-btn {
  position: absolute;
  left: 0; top: 0;
  padding: 0; margin: 0; border: 0;
  background: none;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
#touch .tc-btn img { position: absolute; inset: 0; width: 100%; height: 100%; }
#touch .tc-burn { width: calc(20 * var(--tu)); height: calc(20 * var(--tu)); opacity: 0.45; }
#touch .tc-burn .tc-lit { opacity: 0; }
#touch .tc-burn.lit { opacity: 1; }
#touch .tc-burn.lit .tc-lit { opacity: 1; animation: tc-flick 0.5s steps(2) infinite; }
#touch .tc-burn.hit { transform-origin: center; filter: brightness(1.4); }
#touch .tc-pause { width: calc(16 * var(--tu)); height: calc(16 * var(--tu)); opacity: 0.45; }
#touch .tc-pause img { inset: calc(3 * var(--tu)); width: calc(10 * var(--tu)); height: calc(10 * var(--tu)); }
#touch .tc-pause.hit { opacity: 0.9; }
@keyframes tc-flick { 50% { opacity: 0.72; } }
@media (prefers-reduced-motion: reduce) {
  #touch .tc-burn.lit .tc-lit { animation: none; }
}
/* 도감 설명처럼 스스로 넘기는 칸은 손가락으로 위아래 밀 수 있게(body는 touch-action: none) */
.cx-info { touch-action: pan-y; }

/* ═════════════ 레벨업 카드 수치 줄(data/describe.js cardRows) ═════════════
   설명 한 줄 아래 두 칸 표: 왼쪽 이름, 오른쪽 「지금 → 다음」(docs/DECISIONS.md 카드 수치 줄 시안 3). */
.lu-card { height: calc(150 * var(--px)); width: calc(120 * var(--px)); }
.lu-row { top: calc(42 * var(--px)); }
.lu-nums {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: none;
  padding: var(--px) calc(3 * var(--px));
  background: var(--ui-ink);
  box-shadow: inset 0 0 0 var(--px) var(--ui-rule);
  line-height: 1.35;
}
.lu-n { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: calc(3 * var(--px)); padding: var(--px) 0; }
.lu-n + .lu-n { box-shadow: 0 calc(-1 * var(--px)) 0 var(--ui-panel2); }
.lu-nk { color: var(--ui-ash); text-align: left; white-space: nowrap; }
.lu-nv { white-space: nowrap; margin-left: auto; } /* 좁으면 이름 아래 줄로 내려가 오른쪽에 붙는다 */
.lu-nv s { text-decoration: none; color: var(--ui-ash-hi); }
.lu-nv i { font-style: normal; color: var(--ui-ember-lo); margin: 0 var(--px); }
.lu-nv b { font-weight: 700; color: var(--ui-ember-hi); }
.lu-row.n5 .lu-nums { padding: var(--px) calc(2 * var(--px)); }
.lu-row.n5 .lu-n { column-gap: var(--px); }

/* 작은 화면(캔버스 배율이 2보다 작다 — 휴대폰 가로 등): 카드 글이 6도트면 8px 안팎이라 읽기 어렵다.
   카드 글자를 11px 아래로 내리지 않고, 그만큼 카드를 넓고 길게 편다(480도트 폭 안에 세 장). */
@media (max-width: 959px), (max-height: 539px) {
  .lu-layer { --fs: max(calc(6 * var(--px)), 11px); }
  .lu-head { top: calc(10 * var(--px)); }
  .lu-row { top: calc(32 * var(--px)); gap: calc(8 * var(--px)); }
  .lu-card { width: calc(146 * var(--px)); height: calc(178 * var(--px)); }
  .lu-face { padding: calc(6 * var(--px)) calc(5 * var(--px)) calc(5 * var(--px)); gap: calc(3 * var(--px)); }
  .lu-art { height: calc(38 * var(--px)); }
  .lu-row.n4 { gap: calc(4 * var(--px)); }
  .lu-row.n4 .lu-card { width: calc(114 * var(--px)); }
  .lu-row.n5 { gap: calc(3 * var(--px)); }
  .lu-row.n5 .lu-card { width: calc(92 * var(--px)); }
  .lu-bar { top: calc(218 * var(--px)); }
  .lu-layer.lu-half .lu-row { transform: scale(0.5); }
}
.lu-face { overflow: hidden; }
@media (max-width: 959px), (max-height: 539px) {
  .lu-row.n5 .lu-card { font-size: max(calc(6 * var(--px)), 10px); }
}