/* 전투 화면 (Claude-C). 모든 클래스는 bt- 로 시작해 다른 화면과 겹치지 않게 한다. */
.bt-root {
  position: absolute; left: 0; top: 0; width: 1280px; height: 720px;
  overflow: hidden; background: #10140f;
  user-select: none; -webkit-user-select: none; touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.bt-canvas {
  position: absolute; left: 0; top: 0; width: 1280px; height: 720px;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
.bt-hud {
  position: absolute; inset: 0; pointer-events: none;
  font-family: "Galmuri11", "DungGeunMo", "NeoDunggeunmo", "Malgun Gothic", system-ui, sans-serif;
  color: #fff;
}
.bt-hud button { pointer-events: auto; font-family: inherit; }
.bt-hud.ended button { pointer-events: none; }

/* 위 왼쪽 타이머 */
.bt-timer {
  position: absolute; left: 22px; top: 22px; height: 44px; padding: 0 16px 0 10px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(10, 12, 10, 0.55); border-radius: 22px;
  font-size: 28px; font-weight: bold; letter-spacing: 1px;
  text-shadow: 2px 2px 0 #000;
}
.bt-timer.warn .bt-timer-txt { color: #ff6a5a; }
.bt-clock {
  width: 26px; height: 26px; border: 3px solid #f2b54a; border-radius: 6px; position: relative;
  box-sizing: border-box; background: #2a1f12;
}
.bt-clock::before, .bt-clock::after {
  content: ""; position: absolute; background: #f2b54a; left: 9px; top: 4px; width: 3px; height: 9px;
}
.bt-clock::after { top: 10px; width: 8px; height: 3px; }

/* 위 가운데 스테이지 이름 */
.bt-title {
  position: absolute; left: 0; right: 0; top: 26px; text-align: center;
  font-size: 30px; font-weight: bold;
  text-shadow: 3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000, 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
}

/* 버튼 공통(나무틀) */
.bt-btn {
  border: 3px solid #1c140e; outline: 2px solid #8a6a44; outline-offset: -5px;
  background: linear-gradient(#5a4636, #3d2f24); color: #e8d9bf;
  border-radius: 6px; cursor: pointer; padding: 0;
  font-size: 20px; font-weight: bold; text-shadow: 2px 2px 0 #000;
  box-shadow: 0 3px 0 #0d0905;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.bt-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #0d0905; }
.bt-btn.on { color: #ffe36a; outline-color: #f2c14a; background: linear-gradient(#6e5537, #4a3720); }

.bt-topr { position: absolute; right: 14px; top: 12px; display: flex; gap: 8px; }
.bt-sq { width: 66px; height: 66px; flex-direction: column; gap: 0; position: relative; }
.bt-ico { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.bt-ico img { width: 36px; height: 36px; image-rendering: pixelated; }
.bt-ico.txt { font-size: 22px; letter-spacing: -1px; }
.bt-auto .bt-ico.txt { font-size: 17px; letter-spacing: 0; }
.bt-sub { font-size: 13px; margin-top: 2px; }

.bt-row2 { position: absolute; right: 14px; top: 88px; display: flex; gap: 8px; }
.bt-wide { width: 118px; height: 64px; font-size: 19px; }
.bt-wide.locked { color: #8d8172; position: relative; }
.bt-lock {
  position: absolute; right: 6px; top: 5px; width: 12px; height: 10px; background: #b8a27a; border-radius: 2px;
}
.bt-lock::before {
  content: ""; position: absolute; left: 2px; top: -7px; width: 4px; height: 6px;
  border: 2px solid #b8a27a; border-bottom: 0; border-radius: 4px 4px 0 0;
}

/* 휴대폰 가로(화면 높이가 낮음): 무대가 작게 줄어 버튼이 33px 정도로 작아짐 → 손가락으로 누를 수 있게 키움 (총괄 1110) */
@media (max-height: 500px) {
  .bt-topr { transform: scale(1.5); transform-origin: top right; }
  .bt-row2 { transform: scale(1.3); transform-origin: top right; top: 118px; }
  .bt-cards { transform: scale(1.45); transform-origin: bottom right; }
}

/* 오른쪽 아래 스킬 카드 */
.bt-cards { position: absolute; right: 14px; bottom: 12px; display: flex; gap: 16px; align-items: flex-end; }
.bt-card-col { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.bt-card {
  width: 104px; height: 104px; position: relative; overflow: hidden;
  border: 3px solid #1c140e; outline: 2px solid #7a6650; outline-offset: -5px; border-radius: 6px;
  background: linear-gradient(135deg, #4a4038 0%, #2e2822 55%, #3a322b 100%);
  cursor: pointer; padding: 0;
  box-shadow: 0 3px 0 #0d0905;
}
.bt-portrait {
  position: absolute; left: 1px; top: 1px; width: 96px; height: 96px; image-rendering: pixelated;
}
.bt-cd-shade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background: rgba(0, 0, 0, 0.55); pointer-events: none;
}
.bt-cd-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 46px; font-weight: bold; color: #ffe9a0; pointer-events: none;
  text-shadow: 3px 0 0 #1a1208, -3px 0 0 #1a1208, 0 3px 0 #1a1208, 0 -3px 0 #1a1208, 3px 3px 0 #1a1208;
}
.bt-card-name {
  position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-size: 13px; color: #e8d9bf;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; pointer-events: none;
}
.bt-card.ready { outline-color: #ffe36a; animation: bt-glow 0.9s ease-in-out infinite alternate; }
.bt-card.ready .bt-cd-num { color: #fff; }
.bt-card.dead { filter: grayscale(1) brightness(0.5); cursor: default; }
.bt-card.used { animation: bt-used 0.3s ease-out; }
.bt-card.deny { animation: bt-deny 0.25s linear; }
@keyframes bt-glow {
  from { box-shadow: 0 3px 0 #0d0905, 0 0 4px 2px rgba(255, 220, 90, 0.35); }
  to   { box-shadow: 0 3px 0 #0d0905, 0 0 14px 6px rgba(255, 220, 90, 0.85); }
}
@keyframes bt-used { 0% { transform: scale(1.12); filter: brightness(2); } 100% { transform: scale(1); } }
@keyframes bt-deny {
  0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); }
}
.bt-card-hp { height: 10px; border: 2px solid #111; background: #333; border-radius: 3px; overflow: hidden; }
.bt-card-hp-fill { height: 100%; width: 100%; background: linear-gradient(#8ef07f, #45b83c); }

/* 일시정지 팝업 */
.bt-pause {
  position: absolute; inset: 0; pointer-events: auto;
  background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center;
}
.bt-pause[hidden] { display: none; }
.bt-pause-box {
  width: 460px; padding: 28px 30px 22px; text-align: center;
  background: linear-gradient(#4d3c2e, #33271e); border: 4px solid #1c140e; outline: 3px solid #8a6a44; outline-offset: -8px;
  border-radius: 10px; box-shadow: 0 8px 0 #0d0905;
}
.bt-pause-title { font-size: 36px; font-weight: bold; margin-bottom: 22px; text-shadow: 3px 3px 0 #000; }
.bt-pause-btns { display: flex; gap: 18px; justify-content: center; }
.bt-big { width: 170px; height: 72px; font-size: 26px; }
.bt-big.primary { background: linear-gradient(#5f8f3a, #3d6524); color: #fff; outline-color: #a9d36a; }
.bt-big.danger { background: linear-gradient(#93412f, #66291c); color: #fff; outline-color: #e08a6a; }
.bt-pause-note { margin-top: 16px; font-size: 16px; color: #cdbb9c; }