/* 냥이 원정대 프로토타입 — 판지/테이프 무드, 카드 배틀 레이아웃 */
:root {
  --paper: #F2E9D6; --paper-2: #E7D9BE; --card: #FDFAF3;
  --ink: #33261B; --ink-soft: #6E5B49;
  --kraft: #B98A5C; --kraft-line: #D9C3A5;
  --accent: #E07B2E; --accent-ink: #fff;
  --atk: #D95F57; --def: #5CA8CE; --heal: #7FAE5C; --churu: #E0A94A;
  --shadow: 0 3px 10px rgba(70,45,20,.15);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  overflow: hidden;
  user-select: none;
}
img { -webkit-user-drag: none; }

#app { display: flex; flex-direction: column; height: 100vh; max-width: 1100px; margin: 0 auto; }

/* 상단바 */
#topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 20px; background: var(--paper-2); border-bottom: 2px dashed var(--kraft);
}
.brand { font-weight: 900; font-size: 18px; letter-spacing: -.02em; }
.brand .tag { font-size: 11px; font-weight: 700; color: var(--ink-soft); background: var(--card);
  border: 1px solid var(--kraft-line); border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
#turn-info { display: flex; align-items: center; gap: 16px; font-weight: 800; }
.pip { width: 13px; height: 13px; border-radius: 50%; background: #cbb48f; display: inline-block; }
.pip.on { background: var(--churu); box-shadow: 0 0 6px rgba(224,169,74,.7); }
#turn-label { padding: 6px 16px; border-radius: 999px; font-size: 14px; }

/* 츄르 표시 — 보드 좌하단(점선 위)에 크게 */
#churu-display {
  position: absolute; left: 8px; bottom: 6px; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 2px solid var(--kraft-line); border-radius: 18px;
  padding: 10px 20px 10px 14px; box-shadow: var(--shadow);
}
#churu-display .fish { font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.15)); }
.churu-meter { display: flex; flex-direction: column; gap: 5px; }
#churu-display .pips { display: flex; gap: 5px; }
#churu-display .pip { width: 17px; height: 17px; }
#churu-display .amount { font-weight: 900; font-size: 30px; line-height: 1; color: var(--churu); }
#churu-display .amount .max { font-size: 17px; color: var(--ink-soft); font-weight: 800; }
#churu-display .amount .lbl { font-size: 14px; color: var(--ink-soft); font-weight: 800; margin-left: 2px; }
#turn-label.player { background: var(--accent); color: #fff; }
#turn-label.enemy { background: var(--atk); color: #fff; }

/* 보드 */
#board { flex: 1; display: flex; flex-direction: column; position: relative; padding: 12px 20px; min-height: 0; }
#enemies { flex: 1; display: flex; justify-content: center; align-items: flex-start; gap: 34px; padding-top: 8px; }
#party { display: flex; justify-content: center; align-items: flex-end; gap: 28px; padding-bottom: 6px; }

.enemy, .cat { position: relative; width: 130px; text-align: center; transition: transform .12s; }
.enemy { cursor: default; }
.sprite-wrap { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 120px; }
.enemy .sprite-wrap img { max-height: 108px; max-width: 108px; }
.cat .sprite-wrap img { max-height: 118px; max-width: 108px; }
.enemy.dead { opacity: .25; filter: grayscale(1); }
.cat.captured { opacity: .5; filter: grayscale(.7); }
.cage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; }
.taunt-badge { position: absolute; top: 0; right: 6px; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; }

.nm { font-size: 13px; font-weight: 800; margin-top: 2px; }
.nm .role { font-size: 10px; font-weight: 700; color: var(--ink-soft); }
.nm .str { color: var(--atk); font-size: 11px; }

.bar { position: relative; height: 15px; background: #d8c39f; border-radius: 999px; overflow: hidden; margin: 4px auto 0; width: 96px; border: 1px solid rgba(0,0,0,.08); }
.bar .fill { height: 100%; background: linear-gradient(var(--heal), #6b9c48); transition: width .35s; }
.cat-bar .fill { background: linear-gradient(#e0894a, #cf6a2a); }
.bar span { position: absolute; inset: 0; font-size: 10px; font-weight: 800; color: #33261b;
  display: flex; align-items: center; justify-content: center; text-shadow: 0 1px 0 rgba(255,255,255,.4); }

.block-badge { position: absolute; top: 74px; left: 50%; transform: translateX(-50%);
  background: var(--def); color: #fff; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; box-shadow: var(--shadow); }

/* 의도 */
.intent { height: 24px; font-weight: 900; font-size: 15px; margin-bottom: 2px; }
.i-atk { color: var(--atk); } .i-def { color: var(--def); } .i-buf { color: var(--accent); }

/* 타게팅 모드: 적 강조 */
body.targeting .enemy:not(.dead) { cursor: crosshair; }
body.targeting .enemy:not(.dead):hover { transform: translateY(-6px) scale(1.05); }
body.targeting .enemy:not(.dead)::after { content: "🎯"; position: absolute; top: 26px; left: 50%; transform: translateX(-50%); font-size: 22px; animation: bob .5s infinite alternate; }
@keyframes bob { to { transform: translateX(-50%) translateY(-5px); } }

/* 피격 반응: 흔들림 + 붉은 플래시 */
@keyframes hitShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-7px) rotate(-4deg); }
  35% { transform: translateX(6px) rotate(3deg); }
  55% { transform: translateX(-5px) rotate(-2deg); }
  75% { transform: translateX(3px) rotate(1deg); }
}
@keyframes hitFlash {
  0%, 100% { filter: none; }
  30% { filter: brightness(1.5) sepia(1) saturate(6) hue-rotate(-25deg); }
}
.hit .sprite-wrap { animation: hitShake .3s ease-in-out; }
.hit .sprite-wrap img { animation: hitFlash .3s ease-in-out; }

/* 충격 버스트 */
.impact-burst { position: absolute; top: 42%; left: 50%; font-size: 40px; pointer-events: none; z-index: 25;
  animation: burst .4s ease-out forwards; }
@keyframes burst {
  0% { transform: translate(-50%, -50%) scale(.3) rotate(-15deg); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.5) rotate(10deg); opacity: 0; }
}

/* 플로팅 데미지 */
.float { position: absolute; top: 30px; left: 50%; transform: translateX(-50%);
  font-weight: 900; font-size: 22px; pointer-events: none; animation: floatUp .85s ease-out forwards; z-index: 20; text-shadow: 0 2px 3px rgba(0,0,0,.3); }
.float.dmg { color: #fff; background: var(--atk); padding: 1px 10px; border-radius: 999px; }
.float.block { color: #fff; background: var(--def); padding: 1px 10px; border-radius: 999px; font-size: 16px; }
.float.heal { color: #fff; background: var(--heal); padding: 1px 10px; border-radius: 999px; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 10px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -34px); } }

/* 배틀 로그 */
#battle-log { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 13px; font-weight: 700; color: var(--ink-soft); background: rgba(253,250,243,.85);
  border: 1px solid var(--kraft-line); border-radius: 999px; padding: 5px 16px; white-space: nowrap; pointer-events: none; }
#battle-log.pulse { animation: pulse .4s; }
@keyframes pulse { 0% { transform: translate(-50%,-50%) scale(1.12); } 100% { transform: translate(-50%,-50%) scale(1); } }

/* 손패 영역 */
#hand-area { display: flex; align-items: flex-end; gap: 14px; padding: 12px 20px 16px; background: var(--paper-2); border-top: 2px dashed var(--kraft); }
.pile { width: 54px; height: 74px; border-radius: 8px; background: var(--card); border: 2px solid var(--kraft-line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.pile-count { font-weight: 900; font-size: 18px; } .pile-label { font-size: 10px; color: var(--ink-soft); }

#hand { flex: 1; display: flex; justify-content: center; align-items: flex-end; gap: 10px; min-height: 150px; flex-wrap: wrap; }

.card {
  width: 108px; height: 150px; background: var(--card); border-radius: 12px;
  border: 2px solid var(--kraft-line); box-shadow: var(--shadow);
  padding: 10px 9px; display: flex; flex-direction: column; cursor: pointer;
  transition: transform .12s, box-shadow .12s; position: relative;
}
.card:hover { transform: translateY(-12px); box-shadow: 0 10px 22px rgba(70,45,20,.28); }
.card.selected { transform: translateY(-16px); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent); }
.card.unplayable { opacity: .5; cursor: not-allowed; filter: grayscale(.5); }
.card.unplayable:hover { transform: none; box-shadow: var(--shadow); }
.card.signature { background: linear-gradient(180deg, #fff6e8, #fdf3e0); border-color: var(--kraft); }
.card-cost { position: absolute; top: -9px; left: -9px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--churu); color: #4a2f10; font-weight: 900; font-size: 17px; line-height: 30px; text-align: center;
  border: 2px solid #fff; box-shadow: var(--shadow); font-variant-numeric: tabular-nums; }
.card-name { font-weight: 900; font-size: 14px; text-align: center; margin-bottom: 4px; padding-top: 3px; word-break: keep-all; }
.card-body { flex: 1; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); text-align: center;
  display: grid; align-content: center; gap: 1px;
  word-break: keep-all; overflow-wrap: break-word; padding: 0 2px; }
.card-body .l { display: block; white-space: nowrap; }
.card-body b { color: var(--ink); font-weight: 900; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.type-attack .card-body b { color: var(--atk); }
.type-skill .card-body b { color: var(--def); }
.card-owner { font-size: 10px; font-weight: 800; text-align: center; color: var(--ink-soft); border-top: 1px dashed var(--kraft-line); padding-top: 4px; margin-top: 4px; }
.type-attack .card-name { color: var(--atk); }
.type-skill .card-name { color: var(--def); }

/* 집중 강조: 2배 적용될 공격 카드 */
.card.boosted { border-color: var(--churu); box-shadow: 0 0 0 2px var(--churu), 0 6px 16px rgba(224,169,74,.45); }
.boost-badge { position: absolute; top: -9px; right: -9px; background: var(--churu); color: #4a2f10;
  font-weight: 900; font-size: 14px; padding: 2px 8px; border-radius: 999px; border: 2px solid #fff;
  box-shadow: var(--shadow); animation: boostPulse 1s infinite; }
@keyframes boostPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* 상태 효과 칩 (집중 등) */
.status-chip { font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 999px; }
.status-chip.focus { background: var(--churu); color: #4a2f10; box-shadow: 0 0 10px rgba(224,169,74,.6); }

#end-turn { flex-shrink: 0; align-self: center; padding: 16px 20px; border: none; border-radius: 12px;
  background: var(--accent); color: #fff; font-weight: 900; font-size: 15px; font-family: inherit;
  cursor: pointer; box-shadow: var(--shadow); transition: transform .1s, filter .1s; }
#end-turn:hover { filter: brightness(1.08); transform: translateY(-2px); }
#end-turn:active { transform: translateY(0); }

/* 오버레이 */
#overlay { position: fixed; inset: 0; background: rgba(40,28,16,.6); display: flex; align-items: center; justify-content: center; z-index: 100; }
#overlay.hidden, .hidden { display: none; }
.overlay-card { background: var(--card); border-radius: 18px; padding: 36px 48px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4); border: 2px solid var(--kraft-line); }
.overlay-card h1 { font-size: 44px; margin-bottom: 8px; }
.overlay-card h1.win { color: var(--accent); }
.overlay-card h1.lose { color: var(--atk); }
.overlay-card p { color: var(--ink-soft); margin-bottom: 22px; }
#restart { padding: 12px 28px; border: none; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 900; font-size: 16px; font-family: inherit; cursor: pointer; }

/* 구조 3택 */
#overlay-body { display: flex; gap: 16px; justify-content: center; margin: 8px 0 18px; flex-wrap: wrap; }
.rescue-choice { width: 150px; background: var(--paper-2); border: 2px solid var(--kraft-line); border-radius: 14px;
  padding: 14px 10px; cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.rescue-choice:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 10px 22px rgba(70,45,20,.28); }
.rescue-choice img { width: 84px; height: 84px; object-fit: contain; }
.rc-name { font-weight: 900; font-size: 15px; margin-top: 4px; }
.rc-name .role { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.rc-hp { font-size: 13px; font-weight: 800; color: var(--atk); margin: 3px 0; }
.rc-cards { font-size: 11.5px; color: var(--ink-soft); line-height: 1.4; word-break: keep-all; }

/* 취약 배지 */
.vuln-badge { position: absolute; top: 2px; right: 2px; background: #9B5BB8; color: #fff;
  font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 999px; box-shadow: var(--shadow); }

/* 노드 진행 */
#node-progress { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; vertical-align: middle; }
.node-dot { width: 10px; height: 10px; border-radius: 50%; background: #cbb48f; display: inline-block; }
.node-dot.done { background: var(--heal); }
.node-dot.now { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.node-txt { font-size: 11px; font-weight: 800; color: var(--ink-soft); }

#targeting-hint { position: fixed; bottom: 190px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 700; padding: 8px 18px; border-radius: 999px; box-shadow: var(--shadow); }
#targeting-hint span { opacity: .7; }

@media (max-width: 720px) {
  .card { width: 92px; height: 132px; }
  .enemy, .cat { width: 104px; }
  #hand-area { gap: 8px; padding: 8px 10px 12px; }
}