/* ============================================================
   황혼의 용사 — Korean Dark Fantasy Manuscript
   ============================================================ */

/* Galmuri (CDN, 한글 픽셀 - body) — 기존 유지 */
@font-face {
  font-family: 'Galmuri';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/Galmuri11.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* === 색상 팔레트: 황혼의 양피지 === */
  --ink-black:    #0a0608;
  --ink-deep:     #0d0a14;
  --midnight:     #1a1428;
  --dusk:         #2d1f3d;
  --dusk-light:   #3d2c4e;

  --ember:        #d4793c;
  --ember-glow:   #ff9b4f;
  --ember-deep:   #8a4520;

  --blood:        #8b1538;
  --blood-bright: #c41f4a;
  --blood-dark:   #4d0c1f;

  --gold:         #c9a961;
  --gold-bright:  #e8c878;
  --gold-deep:    #8a7235;
  --gold-pale:    #d4be8a;

  --bone:         #f0e6d2;
  --bone-shadow:  #d4c8a8;
  --parchment:    #ebdcc0;
  --parchment-dark: #c4b292;

  --ash:          #6b6259;
  --ash-light:    #8a7e72;

  --moss:         #7a8e5a;
  --moss-deep:    #4a5a32;

  --frost:        #6a8eba;
  --frost-deep:   #3a5e8a;

  /* 시맨틱 */
  --bg-deepest: var(--ink-black);
  --bg-panel:   var(--midnight);
  --bg-elevated: var(--dusk);
  --text-primary: var(--bone);
  --text-muted:   var(--bone-shadow);
  --accent:       var(--gold);
  --danger:       var(--blood-bright);
  --highlight:    var(--ember);

  /* 타이포그래피 */
  --font-display: 'Black Han Sans', 'Gowun Batang', serif;
  --font-serif:   'Gowun Batang', 'Galmuri', serif;
  --font-body:    'Galmuri', 'Gowun Batang', monospace;
  --font-mono:    'JetBrains Mono', 'Galmuri', monospace;

  /* 간격/리듬 */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body {
  width: 100%;
  height: 100%;
  background: var(--ink-black);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-primary);
  overflow: hidden;
  /* 텍스트 드래그/선택 금지 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 입력창은 예외 (이름 입력 시 필요) */
input[type="text"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* 모든 이미지 드래그 금지 */
img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

body {
  /* 양피지 grain + 황혼 조명 */
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 121, 60, 0.06), transparent 70%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(139, 21, 56, 0.05), transparent 60%),
    radial-gradient(ellipse 60% 80% at 0% 100%, rgba(74, 110, 138, 0.04), transparent 60%),
    var(--ink-black);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* 화면 전체에 노이즈 grain */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='5'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 100;
}

/* ============================================================
   GAME FRAME — 고대 책 같은 외곽
   ============================================================ */
#game {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  max-height: 100%;
  background:
    linear-gradient(180deg, rgba(45, 31, 61, 0.4), rgba(13, 10, 20, 0.6)),
    var(--ink-deep);
  border: 1px solid var(--gold-deep);
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(201, 169, 97, 0.15),
    inset 0 0 80px rgba(13, 6, 8, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.8);
}

/* 코너 장식 (사방신 모티프) */
.frame-orn {
  position: absolute;
  width: 28px;
  height: 28px;
  color: var(--gold);
  opacity: 0.55;
  z-index: 5;
  pointer-events: none;
}
.frame-tl { top: 6px; left: 6px; }
.frame-tr { top: 6px; right: 6px; transform: scaleX(-1); }
.frame-bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.frame-br { bottom: 6px; right: 6px; transform: scale(-1, -1); }

/* BGM 토글 버튼 (우상단) */
#bgm-toggle,
#dialogue-toggle {
  position: absolute;
  top: 8px;
  z-index: 7;
  background: rgba(13, 10, 20, 0.85);
  border: 1px solid var(--gold-deep);
  color: var(--bone-shadow);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  cursor: pointer;
  display: flex;
  gap: 6px;
  align-items: center;
  transition: all 0.2s ease;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
}
#bgm-toggle { right: 36px; }
#dialogue-toggle { right: 112px; }

#bgm-toggle:hover,
#dialogue-toggle:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6), 0 0 12px rgba(201, 169, 97, 0.25);
}
#dialogue-toggle .dialogue-icon { color: var(--gold); font-size: 9px; }
#dialogue-toggle .dialogue-label { min-width: 24px; }
#bgm-toggle .bgm-icon {
  font-size: 13px;
  color: var(--ash);
  transition: color 0.2s;
}
#bgm-toggle.on .bgm-icon {
  color: var(--ember-glow);
  text-shadow: 0 0 8px rgba(255, 155, 79, 0.5);
}
#bgm-toggle.on .bgm-label { color: var(--ember-glow); }
#bgm-toggle .bgm-label { display: inline; }

/* 게임 타이틀 — 한자 + 한글 조합 */
.game-title {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: baseline;
  gap: 10px;
  pointer-events: none;
}
.title-han {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--gold);
  letter-spacing: 0.2em;
  text-shadow: 0 0 12px rgba(201, 169, 97, 0.3);
  opacity: 0.75;
}
.title-kor {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 11px;
  color: var(--bone-shadow);
  letter-spacing: 0.3em;
  opacity: 0.5;
  text-transform: none;
}

/* ============================================================
   SCREEN LAYOUT
   ============================================================ */
#screen {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-rows: 1fr 260px;
  grid-template-areas:
    "stage status"
    "menu  status";
  gap: 14px;
  padding: 40px 18px 18px;
}

/* ============================================================
   STAGE — 무대 (말풍선 + 적 + 초상)
   ============================================================ */
#stage {
  grid-area: stage;
  position: relative;
  background:
    radial-gradient(ellipse 80% 100% at 50% 30%, rgba(45, 31, 61, 0.7), transparent 75%),
    linear-gradient(180deg, rgba(26, 20, 40, 0.95) 0%, rgba(10, 6, 8, 0.95) 100%);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(201, 169, 97, 0.08);
}

#stage::before {
  /* 격자 무늬 오버레이 */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 20 L40 20 M20 0 L20 40' stroke='%23c9a961' stroke-width='0.3' stroke-opacity='0.06'/></svg>");
  pointer-events: none;
  z-index: 0;
}

/* === 풍경 (장면별 배경 SVG) === */
#stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 0;
}
#stage[class*="scene-"]::after { opacity: 0.55; }

/* === 풍경 이미지 === */
#stage[class*="scene-"]::after { opacity: 0.85; filter: brightness(0.8); }

#stage.scene-village::after  { background-image: url("assets/img/village.jpg"); }
#stage.scene-intro::after    { background-image: url("assets/img/intro_house.jpg"); opacity: 0.95; filter: brightness(0.9); }
#stage.scene-hunt::after     { background-image: url("assets/img/hunt_forest.jpg"); }
#stage.scene-plain::after    { background-image: url("assets/img/hunt_plain.jpg"); }
#stage.scene-graveyard::after { background-image: url("assets/img/hunt_graveyard.jpg"); }
#stage.scene-canyon::after   { background-image: url("assets/img/hunt_canyon.jpg"); }
#stage.scene-skyland::after  { background-image: url("assets/img/hunt_skyland.jpg"); }
#stage.scene-chaos::after    { background-image: url("assets/img/hunt_chaos.jpg"); }
#stage.scene-undead::after   { background-image: url("assets/img/hunt_undead.jpg"); }
#stage.scene-dragon::after   { background-image: url("assets/img/dragon_lair.jpg"); }
#stage.scene-dungeonpath::after { background-image: url("assets/img/dungeon_path.jpg"); filter: brightness(0.65); }
#stage.scene-dungeon::after  { background-image: url("assets/img/dungeon.jpg"); filter: brightness(0.6); }
#stage.scene-throne::after   { background-image: url("assets/img/final_throne.jpg"); filter: brightness(0.55); }
#stage.scene-weapon::after   { background-image: url("assets/img/shop_weapon.jpg"); }
#stage.scene-armor::after    { background-image: url("assets/img/shop_armor.jpg"); }
#stage.scene-inn::after      { background-image: url("assets/img/shop_inn.jpg"); }
#stage.scene-forge::after    { background-image: url("assets/img/shop_forge.jpg"); }
#stage.scene-mana::after     { background-image: url("assets/img/shop_mana.jpg"); filter: brightness(0.75); }
#stage.scene-magic::after    { background-image: url("assets/img/shop_magic.jpg"); }
#stage.scene-rune::after     { background-image: url("assets/img/shop_rune.jpg"); filter: brightness(0.65); }
#stage.scene-bed::after      { background-image: url("assets/img/shop_bed.jpg"); }

#scene-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  filter: blur(8px) saturate(0.5) brightness(0.4);
  transition: opacity 0.8s ease;
  mix-blend-mode: overlay;
}
#scene-bg.active { opacity: 0.55; }

.stage-grain {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence baseFrequency='1.2' numOctaves='3' seed='8'/></filter><rect width='150' height='150' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.08;
  pointer-events: none;
  mix-blend-mode: soft-light;
  z-index: 1;
}

/* ============================================================
   COMBAT HUD — 마법진 + 적
   ============================================================ */
#combat-hud {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 24px;
  z-index: 3;
}

.magic-circle-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 480px;
  height: 480px;
  transform: translate(-50%, -45%);
  color: var(--gold);
  opacity: 0.18;
  animation: rotate-circle 90s linear infinite;
  pointer-events: none;
}
@keyframes rotate-circle {
  to { transform: translate(-50%, -45%) rotate(360deg); }
}

.combat-name-plate {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  z-index: 2;
}
.combat-marker {
  color: var(--blood-bright);
  font-size: 14px;
  text-shadow: 0 0 12px rgba(196, 31, 74, 0.7);
  animation: pulse-marker 2.4s ease-in-out infinite;
}
@keyframes pulse-marker {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
.combat-name {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--bone);
  letter-spacing: 0.18em;
  text-shadow:
    0 0 1px var(--ink-black),
    0 0 24px rgba(196, 31, 74, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.9);
  filter: drop-shadow(0 0 0.4px var(--gold-deep));
}

.combat-hp-wrap {
  position: relative;
  width: 56%;
  max-width: 460px;
  margin-bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
}
.combat-hp-rune {
  font-size: 18px;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(201, 169, 97, 0.5);
  flex-shrink: 0;
}

.combat-hp-bar {
  flex: 1;
  height: 14px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(20, 10, 14, 0.9));
  border: 1px solid var(--gold-deep);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.9),
    inset 0 -1px 0 rgba(201, 169, 97, 0.15),
    0 0 16px rgba(196, 31, 74, 0.18);
}
.combat-hp-bar .fill.enemy {
  height: 100%;
  background:
    linear-gradient(180deg,
      var(--blood-bright) 0%,
      var(--blood) 50%,
      var(--blood-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 100, 130, 0.4),
    inset 0 -2px 0 rgba(0, 0, 0, 0.4);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.15, 1);
  width: 100%;
}
.hp-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 230, 210, 0.18) 50%,
    transparent 100%);
  animation: hp-shimmer 3s ease-in-out infinite;
}
@keyframes hp-shimmer {
  0%   { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

.combat-img-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  /* 위쪽으로 정렬해 큰 이미지도 아래가 잘리지 않게 */
  align-items: flex-start;
  flex: 1 1 auto;
  /* 말풍선 영역(하단 ~32%)을 침범하지 않도록 마진 확보 */
  min-height: 0;
  width: 100%;
  padding: 4px 0 18px;
  z-index: 2;
  overflow: hidden;
}
#combat-enemy-img {
  max-width: min(78%, 620px);
  /* 부모 높이에 비례 + 화면 높이 절대치 모두 적용 — 둘 중 작은 값 */
  max-height: min(100%, 62vh);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 12px 24px rgba(0, 0, 0, 0.95))
    drop-shadow(0 0 36px rgba(196, 31, 74, 0.18));
  transform-origin: 50% 72%;
  will-change: transform, filter, opacity;
}
#combat-enemy-img[data-pose="idle"] {
  animation: enemy-idle 3.8s ease-in-out infinite;
}
#combat-enemy-img[data-pose="hit"].pose-anim {
  animation: enemy-hit 0.52s cubic-bezier(.2,.8,.25,1) both;
}
#combat-enemy-img[data-pose="attack"].pose-anim {
  animation: enemy-attack 0.76s cubic-bezier(.2,.75,.15,1) both;
}
#combat-enemy-img[data-pose="special"].pose-anim {
  animation: enemy-special 0.9s cubic-bezier(.2,.8,.2,1) both;
}
#combat-enemy-img[data-pose="death"][data-death-severity="normal"].pose-anim {
  animation: enemy-death-normal .85s cubic-bezier(.2,.72,.2,1) both;
}
#combat-enemy-img[data-pose="death"][data-death-severity="heavy"].pose-anim {
  animation: enemy-death-heavy .9s cubic-bezier(.16,.76,.16,1) both;
}
#combat-enemy-img[data-pose="death"][data-death-severity="explode"].pose-anim {
  animation: enemy-death-explode .92s cubic-bezier(.14,.8,.12,1) both;
}
#combat-enemy-img[data-pose="idle"].motion-v2 {
  animation: enemy-idle-side 4.4s ease-in-out infinite;
}
#combat-enemy-img[data-pose="idle"].motion-v3 {
  animation: enemy-idle-weight 3.2s ease-in-out infinite;
}
#combat-enemy-img[data-pose="hit"].pose-anim.motion-v2 {
  animation: enemy-hit-right .58s cubic-bezier(.18,.82,.22,1) both;
}
#combat-enemy-img[data-pose="hit"].pose-anim.motion-v3 {
  animation: enemy-hit-heavy .7s cubic-bezier(.16,.78,.2,1) both;
}
#combat-enemy-img[data-pose="attack"].pose-anim.motion-v2 {
  animation: enemy-attack-sweep .86s cubic-bezier(.18,.74,.12,1) both;
}
#combat-enemy-img[data-pose="attack"].pose-anim.motion-v3 {
  animation: enemy-attack-rush .68s cubic-bezier(.14,.82,.12,1) both;
}
#combat-enemy-img[data-pose="special"].pose-anim.motion-v2 {
  animation: enemy-special-wave 1.02s cubic-bezier(.18,.76,.18,1) both;
}
#combat-enemy-img[data-pose="special"].pose-anim.motion-v3 {
  animation: enemy-special-burst .82s cubic-bezier(.16,.84,.12,1) both;
}
@keyframes enemy-idle {
  0%, 100% { transform: translateY(1px) scale(1) rotate(-0.25deg); }
  25%      { transform: translateY(-3px) scale(1.008, .996) rotate(0.2deg); }
  50%      { transform: translateY(-7px) scale(.998, 1.012) rotate(0.35deg); }
  75%      { transform: translateY(-2px) scale(1.006, .998) rotate(-0.1deg); }
}
@keyframes enemy-idle-side {
  0%, 100% { transform: translate(-2px, 0) scale(1) rotate(-.2deg); }
  30%      { transform: translate(4px, -3px) scale(1.006) rotate(.35deg); }
  62%      { transform: translate(-1px, -6px) scale(.996, 1.01) rotate(.1deg); }
  82%      { transform: translate(-5px, -2px) scale(1.004) rotate(-.35deg); }
}
@keyframes enemy-idle-weight {
  0%, 100% { transform: translateY(1px) scale(1.008, .994); }
  38%      { transform: translate(-3px, -5px) scale(.996, 1.012) rotate(-.25deg); }
  70%      { transform: translate(3px, -2px) scale(1.006, .998) rotate(.3deg); }
}
@keyframes enemy-hit {
  0%   { transform: translate(0, 0) scale(1); filter: brightness(1); }
  16%  { transform: translate(-18px, 3px) rotate(-3deg) scale(.97, 1.03); filter: brightness(2.1) sepia(.4) saturate(2); }
  35%  { transform: translate(12px, -2px) rotate(2deg) scale(1.025, .98); }
  58%  { transform: translate(-7px, 1px) rotate(-1deg); filter: brightness(1.25); }
  100% { transform: translate(0, 0) scale(1); filter: brightness(1); }
}
@keyframes enemy-hit-right {
  0%   { transform: translate(0) scale(1); filter: brightness(1); }
  18%  { transform: translate(20px, -2px) rotate(3deg) scale(.965, 1.025); filter: brightness(2) sepia(.35) saturate(1.9); }
  42%  { transform: translate(-9px, 3px) rotate(-1.5deg) scale(1.018, .985); }
  68%  { transform: translate(5px, 0) rotate(.6deg); filter: brightness(1.2); }
  100% { transform: translate(0) scale(1); filter: brightness(1); }
}
@keyframes enemy-hit-heavy {
  0%   { transform: translateY(0) scale(1); filter: brightness(1); }
  15%  { transform: translate(-10px, 12px) rotate(-2deg) scale(1.04, .9); filter: brightness(2.25) contrast(1.2); }
  38%  { transform: translate(8px, 7px) rotate(1.2deg) scale(.98, 1.035); }
  72%  { transform: translate(-3px, 2px) rotate(-.4deg); filter: brightness(1.18); }
  100% { transform: translate(0) scale(1); filter: brightness(1); }
}
@keyframes enemy-death-normal {
  0%   { transform: translateY(0) scale(1); filter: brightness(1); }
  22%  { transform: translate(-5px, 5px) rotate(-1deg) scale(1.02, .96); filter: brightness(1.35) saturate(1.25); }
  100% { transform: translateY(6px) scale(.985); filter: brightness(.9) saturate(.92); }
}
@keyframes enemy-death-heavy {
  0%   { transform: translateY(0) scale(1); filter: brightness(1); }
  13%  { transform: translate(-13px, 3px) rotate(-2.4deg) scale(1.055, .93); filter: brightness(1.85) saturate(1.8) contrast(1.16); }
  34%  { transform: translate(8px, 8px) rotate(1.3deg) scale(.97, 1.03); }
  100% { transform: translateY(9px) scale(.975); filter: brightness(.84) saturate(.9); }
}
@keyframes enemy-death-explode {
  0%   { transform: scale(1); filter: brightness(1); }
  10%  { transform: translate(-8px, 1px) rotate(-1.5deg) scale(1.04, .96); filter: brightness(2.15) saturate(2.1) contrast(1.22); }
  22%  { transform: translate(9px, -5px) rotate(1.8deg) scale(1.09, .92); filter: brightness(1.7) saturate(1.8); }
  42%  { transform: translate(-5px, 5px) rotate(-.8deg) scale(.96, 1.045); }
  100% { transform: translateY(7px) scale(.98); filter: brightness(.8) saturate(.82); }
}
@keyframes enemy-attack {
  0%   { transform: translate(0, 0) scale(1); }
  20%  { transform: translate(-7px, 4px) scale(.96, 1.035) rotate(-1.5deg); }
  48%  { transform: translate(24px, -8px) scale(1.09, .96) rotate(2deg); filter: brightness(1.28) contrast(1.08); }
  67%  { transform: translate(8px, -2px) scale(1.025); }
  100% { transform: translate(0, 0) scale(1); filter: brightness(1); }
}
@keyframes enemy-attack-sweep {
  0%   { transform: translate(0) scale(1); }
  24%  { transform: translate(10px, 3px) rotate(2deg) scale(.965, 1.02); }
  53%  { transform: translate(-22px, -5px) rotate(-2.5deg) scale(1.075, .97); filter: brightness(1.25) contrast(1.08); }
  74%  { transform: translate(-6px, -1px) scale(1.02); }
  100% { transform: translate(0) scale(1); filter: brightness(1); }
}
@keyframes enemy-attack-rush {
  0%   { transform: translate(-5px, 5px) scale(.95, 1.035); }
  32%  { transform: translate(-10px, 2px) scale(.93, 1.05); }
  55%  { transform: translate(30px, -10px) scale(1.12, .94); filter: brightness(1.32) contrast(1.1); }
  78%  { transform: translate(6px, -2px) scale(1.018); }
  100% { transform: translate(0) scale(1); filter: brightness(1); }
}
@keyframes enemy-special {
  0%   { transform: scale(.96) translateY(4px); filter: brightness(.75) saturate(.8); }
  28%  { transform: scale(1.015) translateY(-3px); filter: brightness(1.35) saturate(1.35) drop-shadow(0 0 14px rgba(118, 198, 255, .7)); }
  58%  { transform: scale(1.09) translateY(-10px); filter: brightness(1.8) saturate(1.6) drop-shadow(0 0 32px rgba(173, 224, 255, .95)); }
  78%  { transform: scale(1.025) translateY(-3px); }
  100% { transform: scale(1) translateY(0); filter: brightness(1); }
}
@keyframes enemy-special-wave {
  0%   { transform: scale(.97) translate(-3px, 3px); filter: brightness(.82) saturate(.86); }
  30%  { transform: scale(1.025) translate(5px, -4px); filter: brightness(1.28) saturate(1.28); }
  55%  { transform: scale(1.075) translate(-4px, -9px); filter: brightness(1.65) saturate(1.5) drop-shadow(0 0 28px rgba(173,224,255,.88)); }
  78%  { transform: scale(1.018) translate(3px, -2px); }
  100% { transform: scale(1) translate(0); filter: brightness(1); }
}
@keyframes enemy-special-burst {
  0%   { transform: scale(.9, 1.06) translateY(7px); filter: brightness(.7) saturate(.78); }
  24%  { transform: scale(1.08, .94) translateY(-5px); filter: brightness(1.48) saturate(1.42); }
  48%  { transform: scale(1.12) translateY(-12px); filter: brightness(1.9) saturate(1.7) drop-shadow(0 0 34px rgba(173,224,255,.96)); }
  76%  { transform: scale(.99, 1.025) translateY(-2px); }
  100% { transform: scale(1) translateY(0); filter: brightness(1); }
}
.combat-img-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(54vw, 470px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(204,238,255,.58) 0%, rgba(92,148,255,.18) 42%, transparent 72%);
  mix-blend-mode: screen;
}
#combat-hud:has(#combat-enemy-img[data-pose="special"]) .combat-img-wrap::before {
  animation: enemy-special-aura .9s ease-out both;
}
#combat-hud:has(#combat-enemy-img[data-pose="death"][data-death-severity="heavy"]) .combat-img-wrap::before {
  background: radial-gradient(circle, rgba(190,20,35,.7) 0%, rgba(100,0,18,.28) 42%, transparent 74%);
  animation: enemy-death-burst .86s ease-out both;
}
#combat-hud:has(#combat-enemy-img[data-pose="death"][data-death-severity="explode"]) .combat-img-wrap::before {
  background: radial-gradient(circle, rgba(255,48,50,.9) 0%, rgba(120,0,18,.42) 38%, transparent 74%);
  animation: enemy-death-burst .92s ease-out both;
}
@keyframes enemy-special-aura {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  38%  { opacity: .95; transform: translate(-50%, -50%) scale(.82); }
  72%  { opacity: .45; transform: translate(-50%, -50%) scale(1.18); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.42); }
}
@keyframes enemy-death-burst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.08); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(.72); }
  46%  { opacity: .62; transform: translate(-50%, -50%) scale(1.18); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.58); }
}
.combat-img-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, transparent 40%, var(--ink-deep) 95%);
  pointer-events: none;
  opacity: 0.7;
}

#combat-hud.shake { animation: combat-shake 0.5s; }
@keyframes combat-shake {
  0%, 100% { transform: translate(0, 0); }
  15%  { transform: translate(-10px, 4px); }
  30%  { transform: translate(10px, -4px); }
  45%  { transform: translate(-7px, 2px); }
  60%  { transform: translate(7px, -2px); }
  80%  { transform: translate(-3px, 1px); }
}

/* ============================================================
   PORTRAIT (스토리)
   ============================================================ */
#portrait {
  position: absolute;
  /* 화면 우측 영역에 배치 — 좌측은 말풍선 공간 */
  right: 4%;
  bottom: 0;
  top: auto;
  left: auto;
  transform: none;
  z-index: 2;
  pointer-events: none;
}
#portrait.scene-mode {
  /* 일러스트(번호 png)는 기존 좌하단 액자 스타일 */
  left: 28px;
  right: auto;
  top: auto;
  bottom: 28px;
  transform: none;
}
.portrait-frame {
  /* 말풍선과 겹치지 않도록 슬림하게 */
  width: 300px;
  height: 420px;
  max-width: 36vw;
  max-height: 75%;
  background: transparent;
  border: none;
  position: relative;
}
#portrait.scene-mode .portrait-frame {
  width: 188px;
  height: 252px;
  background: var(--ink-black);
  border: 1px solid var(--gold-deep);
  box-shadow:
    inset 0 0 0 1px rgba(201, 169, 97, 0.15),
    inset 0 0 24px rgba(0, 0, 0, 0.8),
    0 16px 32px rgba(0, 0, 0, 0.7),
    0 0 60px rgba(212, 121, 60, 0.06);
}
#portrait.scene-mode .portrait-frame::before,
#portrait.scene-mode .portrait-frame::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--gold);
  opacity: 0.7;
}
#portrait.scene-mode .portrait-frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
#portrait.scene-mode .portrait-frame::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }
#portrait-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
  transition: transform 0.18s ease;
  transform-origin: center bottom;
}
#portrait.scene-mode #portrait-img {
  object-fit: cover;
  filter: contrast(1.05) brightness(0.92);
}

/* 캐릭터 등장 시 잔잔한 호흡 */
#portrait:not(.scene-mode) #portrait-img {
  animation: char-breathe 3.6s ease-in-out infinite;
}
@keyframes char-breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.012) translateY(-2px); }
}

/* 일반 발화: 살짝 튀어오름 */
#portrait.emote-talk #portrait-img {
  animation: emote-talk 0.32s ease;
}
@keyframes emote-talk {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.05) translateY(-6px); }
  100% { transform: scale(1) translateY(0); }
}

/* 화난 / 부정적 발화: 크게 커졌다가 흔들림 */
#portrait.emote-angry #portrait-img {
  animation: emote-angry 0.55s cubic-bezier(.36,.07,.19,.97);
  filter: drop-shadow(0 0 14px rgba(220, 60, 50, 0.55))
          drop-shadow(0 4px 12px rgba(0,0,0,0.6));
}
@keyframes emote-angry {
  0%   { transform: scale(1) translate(0,0); }
  20%  { transform: scale(1.18) translate(-6px, -8px); }
  35%  { transform: scale(1.18) translate(8px, -6px); }
  50%  { transform: scale(1.15) translate(-5px, -2px); }
  65%  { transform: scale(1.12) translate(5px, 0); }
  80%  { transform: scale(1.06) translate(-2px, 0); }
  100% { transform: scale(1) translate(0,0); }
}

/* 놀람: 크게 휙 튀어올랐다가 */
#portrait.emote-surprise #portrait-img {
  animation: emote-surprise 0.45s ease;
}
@keyframes emote-surprise {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.2) translateY(-12px); }
  60%  { transform: scale(1.05) translateY(-2px); }
  100% { transform: scale(1) translateY(0); }
}

/* 슬픔: 천천히 가라앉음 */
#portrait.emote-sad #portrait-img {
  animation: emote-sad 0.7s ease;
}
@keyframes emote-sad {
  0%   { transform: scale(1) translateY(0); }
  100% { transform: scale(0.95) translateY(6px); }
}

/* ============================================================
   SPEECH BUBBLES — 두루마리 / 양피지 스타일
   ============================================================ */
#bubble-area {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 18px;
  top: auto;
  /* 캐릭터/배경을 덜 가리도록 하단부만 차지 */
  max-height: 42%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding-right: 4px;
  z-index: 4;
  scroll-behavior: smooth;
  /* 좁은 우측 브라우저에서도 첫 대사 상단이 흐려지거나 잘리지 않게 한다. */
  -webkit-mask-image: none;
          mask-image: none;
  pointer-events: auto;
}
#bubble-area:empty { display: none; }

/* 캐릭터 초상이 우측에 떠 있을 때, 말풍선은 좌측 영역만 차지 */
#stage:has(#portrait:not([hidden]):not(.scene-mode)) #bubble-area {
  right: 38%;
}
/* 일러스트(좌하단 액자)일 때는 우측만 사용 */
#stage:has(#portrait.scene-mode:not([hidden])) #bubble-area {
  left: 240px;
}
#stage:has(#combat-hud:not([hidden])) #bubble-area {
  bottom: 18px;
  max-height: 32%;
  -webkit-mask-image: none;
          mask-image: none;
}

.bubble {
  /* 살짝 투명하게 — 캐릭터/배경이 어렴풋이 비치도록 */
  background:
    linear-gradient(180deg,
      rgba(235, 220, 192, 0.93) 0%,
      rgba(240, 230, 210, 0.93) 50%,
      rgba(212, 200, 168, 0.93) 100%);
  color: var(--ink-black);
  padding: 11px 20px 12px;
  position: relative;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  border: 1px solid var(--ink-deep);
  border-radius: 1px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow:
    inset 0 0 0 1px var(--gold-deep),
    inset 0 0 30px rgba(196, 178, 146, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(0, 0, 0, 0.7);
  animation: bubble-in 0.32s cubic-bezier(0.2, 0, 0.1, 1);
  word-break: keep-all;
  max-width: 100%;
}

/* 두루마리 모서리 장식 */
.bubble::before, .bubble::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
}
.bubble::before {
  top: 4px;
  left: 4px;
  border-top: 1px solid var(--gold-deep);
  border-left: 1px solid var(--gold-deep);
  opacity: 0.6;
}
.bubble::after {
  bottom: 4px;
  right: 4px;
  border-bottom: 1px solid var(--gold-deep);
  border-right: 1px solid var(--gold-deep);
  opacity: 0.6;
}

@keyframes bubble-in {
  0%   { transform: translateY(12px) scale(0.96); opacity: 0; filter: blur(2px); }
  60%  { filter: blur(0); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.bubble .speaker {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--blood);
  margin-bottom: 5px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: none;
  position: relative;
  padding-left: 14px;
}
.bubble .speaker::before {
  content: '◆';
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--ember);
  font-size: 9px;
}

/* 변종 — 내적 독백 (먹빛 석판) */
.bubble.narration {
  background:
    linear-gradient(180deg, rgba(20, 14, 28, 0.96), rgba(13, 10, 20, 0.98));
  color: var(--bone-shadow);
  font-style: italic;
  border-color: rgba(201, 169, 97, 0.35);
  box-shadow:
    inset 0 0 0 1px rgba(201, 169, 97, 0.1),
    inset 0 0 30px rgba(0, 0, 0, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.7);
}
.bubble.narration::before, .bubble.narration::after {
  border-color: rgba(201, 169, 97, 0.4);
  opacity: 0.7;
}

/* 시스템 알림 — 황금 인장 */
.bubble.system {
  background:
    linear-gradient(135deg, rgba(45, 31, 61, 0.95), rgba(26, 20, 40, 0.95));
  color: var(--gold-bright);
  border: 1px solid var(--gold);
  text-align: center;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.15em;
  box-shadow:
    inset 0 0 24px rgba(201, 169, 97, 0.2),
    0 0 40px rgba(201, 169, 97, 0.15);
  animation: bubble-in 0.32s cubic-bezier(0.2, 0, 0.1, 1), system-glow 3s ease-in-out infinite;
}
@keyframes system-glow {
  0%, 100% { box-shadow: inset 0 0 24px rgba(201, 169, 97, 0.2), 0 0 40px rgba(201, 169, 97, 0.15); }
  50%      { box-shadow: inset 0 0 32px rgba(201, 169, 97, 0.35), 0 0 60px rgba(201, 169, 97, 0.25); }
}

/* 전투 액션 — 핏자국 */
.bubble.combat-action {
  background:
    linear-gradient(180deg, rgba(91, 28, 44, 0.95), rgba(45, 12, 22, 0.96));
  color: var(--bone);
  border-color: var(--blood);
  box-shadow:
    inset 0 0 0 1px rgba(196, 31, 74, 0.3),
    inset 0 0 24px rgba(0, 0, 0, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.6),
    0 0 24px rgba(139, 21, 56, 0.25);
}
.bubble.combat-heal {
  background: linear-gradient(180deg, rgba(40, 60, 35, 0.95), rgba(20, 30, 18, 0.96));
  color: #d8e8c4;
  border-color: var(--moss);
  box-shadow:
    inset 0 0 0 1px rgba(122, 142, 90, 0.4),
    0 6px 16px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(122, 142, 90, 0.2);
}
.bubble.combat-magic {
  background: linear-gradient(180deg, rgba(28, 45, 78, 0.95), rgba(12, 20, 40, 0.96));
  color: #c8d8ee;
  border-color: var(--frost);
  box-shadow:
    inset 0 0 0 1px rgba(106, 142, 186, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.6),
    0 0 28px rgba(74, 110, 138, 0.25);
}

/* 진행 표시 (▼) */
.bubble.advance { cursor: pointer; }
.bubble.advance::after {
  content: '▾';
  position: absolute;
  right: 14px;
  bottom: 6px;
  border: none;
  width: auto;
  height: auto;
  color: var(--ember);
  font-size: 14px;
  animation: blink-advance 1.2s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(212, 121, 60, 0.6);
}
.bubble.narration.advance::after { color: var(--gold); }
.bubble.system.advance::after, .bubble.combat-action.advance::after,
.bubble.combat-heal.advance::after, .bubble.combat-magic.advance::after { color: var(--gold-bright); }

.dialogue-continue {
  float: right;
  margin: 2px 0 0 14px;
  padding: 5px 12px;
  border: 1px solid rgba(91, 28, 44, 0.7);
  background: rgba(20, 14, 28, 0.88);
  color: var(--gold-bright);
  font: 700 12px/1.2 var(--font-display);
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(201, 169, 97, 0.25);
}
.dialogue-continue:hover,
.dialogue-continue:focus-visible {
  border-color: var(--gold);
  outline: none;
  background: rgba(45, 31, 61, 0.96);
}

@keyframes blink-advance {
  0%, 50%   { opacity: 1; transform: translateY(0); }
  51%, 100% { opacity: 0.2; transform: translateY(2px); }
}

/* ============================================================
   STATUS PANEL — 인물 명부 (양피지 인물 정보)
   ============================================================ */
#status {
  grid-area: status;
  position: relative;
  background:
    linear-gradient(180deg, rgba(45, 31, 61, 0.65) 0%, rgba(13, 10, 20, 0.85) 100%);
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius);
  padding: 16px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-body);
  box-shadow:
    inset 0 0 0 1px rgba(201, 169, 97, 0.12),
    inset 0 0 50px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(201, 169, 97, 0.15);
  overflow-y: auto;
  z-index: 2;
}

#status::before {
  /* 격자 배경 */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><path d='M0 15 L30 15 M15 0 L15 30' stroke='%23c9a961' stroke-width='0.3' stroke-opacity='0.04'/></svg>");
  pointer-events: none;
  border-radius: var(--radius);
}

.status-grain {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence baseFrequency='1.4' numOctaves='2' seed='12'/></filter><rect width='100' height='100' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

/* 캐릭터 배너 — 인물 명패 */
#char-banner {
  background:
    linear-gradient(135deg, rgba(45, 31, 61, 0.7), rgba(13, 10, 20, 0.7));
  border: 1px solid var(--gold-deep);
  padding: 12px 12px 10px;
  text-align: center;
  position: relative;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.4);
}
#char-banner::before {
  /* 명패 외곽 굵은 모서리 */
  content: '';
  position: absolute;
  top: 4px; left: 4px; right: 4px; bottom: 4px;
  border: 1px solid rgba(201, 169, 97, 0.2);
  pointer-events: none;
}
.banner-seal {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  color: var(--blood-bright);
  filter: drop-shadow(0 0 6px rgba(196, 31, 74, 0.5));
  z-index: 1;
}
#char-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--gold-bright);
  margin-bottom: 7px;
  letter-spacing: 0.15em;
  text-shadow:
    0 0 1px var(--ink-black),
    0 0 16px rgba(232, 200, 120, 0.25),
    0 2px 0 rgba(0, 0, 0, 0.5);
}

#char-lvl-row {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.badge {
  background: rgba(13, 10, 20, 0.85);
  border: 1px solid;
  border-radius: 1px;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.badge.lvl {
  color: var(--ember-glow);
  border-color: var(--ember-deep);
  text-shadow: 0 0 8px rgba(255, 155, 79, 0.4);
}
.badge.gold {
  color: var(--gold-bright);
  border-color: var(--gold-deep);
}
.badge-icon {
  font-size: 9px;
  color: var(--gold);
}

/* 활력 블록 (HP/MP/EXP) */
.vital-block { display: flex; flex-direction: column; gap: 6px; }

.vital-row {
  display: grid;
  grid-template-columns: 32px 1fr 44px;
  align-items: center;
  gap: 8px;
}
.vital-label {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--bone-shadow);
  letter-spacing: 0.2em;
  text-align: center;
  opacity: 0.7;
}
.vital-row.hp .vital-label  { color: rgba(196, 31, 74, 0.85); }
.vital-row.mp .vital-label  { color: rgba(106, 142, 186, 0.85); }
.vital-row.exp .vital-label { color: rgba(201, 169, 97, 0.75); }

.vital-bar {
  height: 11px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(20, 10, 14, 0.8));
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.95),
    inset 0 -1px 0 rgba(201, 169, 97, 0.08),
    0 0 0 1px rgba(201, 169, 97, 0.18);
}
.vital-bar.slim { height: 7px; }

.vital-bar .fill {
  height: 100%;
  position: relative;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.15, 1);
}
.vital-bar .fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 50%);
}
.vital-bar .fill.hp {
  background: linear-gradient(180deg, var(--blood-bright), var(--blood) 60%, var(--blood-dark));
  box-shadow: 0 0 10px rgba(196, 31, 74, 0.4);
}
.vital-bar .fill.mp {
  background: linear-gradient(180deg, #6aa6f0, var(--frost) 60%, var(--frost-deep));
  box-shadow: 0 0 10px rgba(74, 110, 138, 0.4);
}
.vital-bar .fill.exp {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
  box-shadow: 0 0 8px rgba(201, 169, 97, 0.3);
}

.vital-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--bone);
  text-align: right;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* 화려한 구분선 */
.ornate-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 7px;
  margin: 2px 0;
}
.div-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
  opacity: 0.55;
}
.div-mark {
  font-size: 9px;
  color: var(--gold);
  opacity: 0.7;
}

/* 능력치 그리드 */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.stat-cell {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(13, 10, 20, 0.55);
  border: 1px solid rgba(201, 169, 97, 0.18);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--bone);
  letter-spacing: 0.02em;
  position: relative;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.stat-cell:hover {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(201, 169, 97, 0.18);
}
.stat-glyph {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 0.02em;
  opacity: 0.85;
}

/* 장비 블록 */
.equip-block { display: flex; flex-direction: column; gap: 4px; }
.equip-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 6px;
}
.equip-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.05em;
  opacity: 0.85;
  text-align: right;
}
.equip-name {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--bone);
  background:
    linear-gradient(180deg, rgba(45, 31, 61, 0.5), rgba(13, 10, 20, 0.7));
  border: 1px solid rgba(201, 169, 97, 0.2);
  padding: 4px 8px;
  letter-spacing: -0.01em;
}

/* 룬 블록 */
.rune-block { text-align: center; }
.rune-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.05em;
  opacity: 0.75;
  margin-bottom: 6px;
}
#rune-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 4px 0;
}
.rune {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  color: var(--bone);
  background:
    radial-gradient(circle at 30% 30%,
      var(--dusk-light) 0%,
      var(--dusk) 50%,
      var(--ink-deep) 100%);
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  position: relative;
  box-shadow:
    inset 0 0 6px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(201, 169, 97, 0.3),
    0 0 12px rgba(201, 169, 97, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.6);
  text-shadow:
    0 0 6px rgba(232, 200, 120, 0.7),
    0 0 12px rgba(212, 121, 60, 0.4);
  animation: rune-pulse 4s ease-in-out infinite;
}
.rune::before {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 50%;
  animation: rune-orbit 8s linear infinite;
  pointer-events: none;
}
@keyframes rune-pulse {
  0%, 100% { box-shadow: inset 0 0 6px rgba(0,0,0,0.7), inset 0 1px 0 rgba(201,169,97,0.3), 0 0 12px rgba(201,169,97,0.3); }
  50%      { box-shadow: inset 0 0 6px rgba(0,0,0,0.7), inset 0 1px 0 rgba(201,169,97,0.5), 0 0 22px rgba(232,200,120,0.55); }
}
@keyframes rune-orbit {
  to { transform: rotate(360deg); }
}

/* 포션 영역 */
#potion-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}
.potion {
  background:
    linear-gradient(180deg, rgba(45, 31, 61, 0.8), rgba(13, 10, 20, 0.9));
  border: 1px solid rgba(201, 169, 97, 0.3);
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--bone);
  display: flex;
  gap: 5px;
  align-items: center;
  box-shadow:
    inset 0 0 6px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.5);
}
.potion .ico {
  font-size: 14px;
  color: var(--ember-glow);
  text-shadow: 0 0 8px rgba(255, 155, 79, 0.5);
}
.potion.p-m .ico {
  color: var(--frost);
  text-shadow: 0 0 8px rgba(106, 142, 186, 0.6);
}

/* ============================================================
   MENU — 봉인 표찰 / 인장 버튼
   ============================================================ */
#menu {
  grid-area: menu;
  background:
    linear-gradient(180deg, rgba(26, 20, 40, 0.85) 0%, rgba(13, 10, 20, 0.95) 100%);
  border: 1px solid rgba(201, 169, 97, 0.3);
  border-radius: var(--radius);
  padding: 14px 14px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(50px, 1fr);
  gap: 8px;
  overflow: visible;
  box-shadow:
    inset 0 0 0 1px rgba(201, 169, 97, 0.1),
    inset 0 0 50px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(201, 169, 97, 0.1);
  position: relative;
}

#menu::before {
  /* 격자 무늬 */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><path d='M0 15 L30 15 M15 0 L15 30' stroke='%23c9a961' stroke-width='0.3' stroke-opacity='0.04'/></svg>");
  pointer-events: none;
  border-radius: var(--radius);
}

.btn {
  background:
    linear-gradient(180deg,
      var(--dusk-light) 0%,
      var(--dusk) 50%,
      var(--midnight) 100%);
  border: 1px solid var(--gold-deep);
  border-radius: 1px;
  color: var(--bone);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  outline: none;
  position: relative;
  min-height: 54px;
  letter-spacing: -0.005em;
  word-break: keep-all;
  transition:
    transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
  box-shadow:
    inset 0 0 0 1px rgba(201, 169, 97, 0.12),
    inset 0 1px 0 rgba(201, 169, 97, 0.18),
    inset 0 -1px 4px rgba(0, 0, 0, 0.5),
    0 4px 0 rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* 모서리 표시 (인장 느낌) */
.btn::before, .btn::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-color: var(--gold);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.btn::before {
  top: 4px; left: 4px;
  border-top: 1px solid;
  border-left: 1px solid;
}
.btn::after {
  bottom: 4px; right: 4px;
  border-bottom: 1px solid;
  border-right: 1px solid;
}

.btn:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  color: var(--gold-bright);
  box-shadow:
    inset 0 0 0 1px rgba(201, 169, 97, 0.3),
    inset 0 1px 0 rgba(232, 200, 120, 0.3),
    inset 0 -1px 4px rgba(0, 0, 0, 0.5),
    0 6px 0 rgba(0, 0, 0, 0.5),
    0 6px 18px rgba(212, 121, 60, 0.25),
    0 0 24px rgba(201, 169, 97, 0.18);
}
.btn:hover::before, .btn:hover::after { opacity: 0.85; }

.btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 0 0 1px rgba(201, 169, 97, 0.25),
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.3);
}

.btn:focus-visible {
  border-color: var(--ember-glow);
  box-shadow:
    inset 0 0 0 1px var(--ember),
    0 0 0 2px var(--ember-deep),
    0 0 24px rgba(212, 121, 60, 0.4);
}

.btn .ico {
  font-size: 18px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

/* 키보드 단축키 인디케이터 — 좌상단 양각 키캡 */
.btn .keycap {
  position: absolute;
  top: 4px;
  left: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  background:
    linear-gradient(180deg, rgba(13, 10, 20, 0.95), rgba(0, 0, 0, 0.95));
  border: 1px solid var(--gold-deep);
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 120, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.7),
    0 1px 2px rgba(0, 0, 0, 0.8);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
  pointer-events: none;
  z-index: 2;
  opacity: 0.92;
  transition: color 0.2s, border-color 0.2s, opacity 0.2s;
}
.btn:hover .keycap {
  color: var(--ember-glow);
  border-color: var(--gold);
  opacity: 1;
}
.btn:focus-visible .keycap {
  color: var(--ember-glow);
  border-color: var(--ember);
}
.btn .keycap:empty { display: none; }
/* 모서리 인장(::before)이 키캡과 겹치지 않도록 살짝 옮김 */
.btn:hover::before { left: 26px; }

/* 변종 — 위험/상점/마법/회복/도주/보스 */
.btn.danger {
  background: linear-gradient(180deg, #6a1f2c, var(--blood-dark) 60%, #2a0810 100%);
  border-color: var(--blood);
}
.btn.danger:hover {
  border-color: var(--blood-bright);
  color: #ffd0d0;
  box-shadow:
    inset 0 0 0 1px rgba(196, 31, 74, 0.4),
    0 6px 0 rgba(0, 0, 0, 0.5),
    0 6px 22px rgba(196, 31, 74, 0.4),
    0 0 32px rgba(139, 21, 56, 0.3);
}

.btn.boss {
  background: linear-gradient(180deg, #4a0a3a, #2a0420 60%, #14010c 100%);
  border-color: #aa2080;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.05em;
  position: relative;
  overflow: hidden;
}
.btn.boss::after {
  content: '王';
  position: absolute;
  bottom: 1px;
  right: 4px;
  font-size: 11px;
  color: var(--gold);
  opacity: 0.7;
  width: auto; height: auto;
  border: none;
  font-family: var(--font-display);
}
.btn.boss:hover {
  border-color: var(--ember-glow);
  color: var(--gold-bright);
  box-shadow:
    inset 0 0 0 1px rgba(232, 200, 120, 0.35),
    inset 0 0 20px rgba(196, 31, 74, 0.2),
    0 6px 0 rgba(0, 0, 0, 0.5),
    0 0 36px rgba(212, 121, 60, 0.4);
}

.btn.shop {
  background: linear-gradient(180deg, #4a3a14, #2a210a 60%, #14100a 100%);
  border-color: var(--gold-deep);
}
.btn.shop:hover {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  box-shadow:
    inset 0 0 0 1px rgba(232, 200, 120, 0.4),
    0 6px 0 rgba(0, 0, 0, 0.5),
    0 6px 18px rgba(201, 169, 97, 0.35);
}

.btn.magic {
  background: linear-gradient(180deg, #1c2a5a, #0a1230 60%, #06081a 100%);
  border-color: var(--frost);
}
.btn.magic:hover {
  border-color: #88aef0;
  color: #c8d8ee;
  box-shadow:
    inset 0 0 0 1px rgba(106, 142, 186, 0.5),
    0 6px 0 rgba(0, 0, 0, 0.5),
    0 0 28px rgba(74, 110, 138, 0.45);
}

.btn.heal {
  background: linear-gradient(180deg, #2a4a1f, #16280f 60%, #08120a 100%);
  border-color: var(--moss);
}
.btn.heal:hover {
  border-color: #a4c884;
  color: #d8e8c4;
  box-shadow:
    inset 0 0 0 1px rgba(122, 142, 90, 0.5),
    0 6px 0 rgba(0, 0, 0, 0.5),
    0 0 24px rgba(122, 142, 90, 0.4);
}

.btn.flee {
  background: linear-gradient(180deg, #3a3633, #1f1c1a 60%, #0e0c0a 100%);
  border-color: var(--ash);
  color: var(--ash-light);
}
.btn.flee:hover { border-color: var(--bone-shadow); color: var(--bone); }

.btn.disabled, .btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.6);
}

/* 입력창 */
#menu .input-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
}
#menu input[type="text"] {
  flex: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(13, 10, 20, 0.7));
  border: 1px solid var(--gold-deep);
  color: var(--bone);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 17px;
  padding: 10px 14px;
  outline: none;
  letter-spacing: 0.02em;
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(0, 0, 0, 0.5);
}
#menu input[type="text"]::placeholder {
  color: var(--ash);
  font-style: italic;
}
#menu input[type="text"]:focus {
  border-color: var(--gold-bright);
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.7),
    0 0 0 1px var(--gold-deep),
    0 0 16px rgba(201, 169, 97, 0.25);
}

#menu .full-width { grid-column: 1 / -1; }

#menu .menu-prompt {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--gold);
  text-align: center;
  letter-spacing: 0.25em;
  margin-bottom: 2px;
  position: relative;
  padding: 4px 0;
  text-shadow: 0 0 12px rgba(201, 169, 97, 0.3);
}
#menu .menu-prompt::before, #menu .menu-prompt::after {
  content: '✦';
  margin: 0 12px;
  font-size: 10px;
  color: var(--ember);
  vertical-align: middle;
  opacity: 0.7;
}

/* ============================================================
   DAMAGE POPUPS — 붓글씨 풍 임팩트
   ============================================================ */
.dmg-pop {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 900;
  pointer-events: none;
  z-index: 10;
  letter-spacing: 0.05em;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
}

.dmg-pop.enemy-target {
  max-width: min(28vw, 260px);
  white-space: nowrap;
}

.dmg-pop.enemy-target.compact-lane {
  font-size: clamp(24px, 7vw, 38px);
}

.dmg-pop.dmg {
  font-size: 36px;
  color: var(--blood-bright);
  text-shadow:
    0 0 1px var(--ink-black),
    0 0 12px rgba(196, 31, 74, 0.7),
    2px 3px 0 rgba(0, 0, 0, 0.95),
    -1px -1px 0 var(--ember);
  animation: dmg-strike 1s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

.dmg-pop.crit {
  font-size: 48px;
  color: var(--ember-glow);
  text-shadow:
    0 0 1px var(--ink-black),
    0 0 16px rgba(255, 155, 79, 0.85),
    0 0 28px rgba(212, 121, 60, 0.5),
    3px 4px 0 rgba(0, 0, 0, 0.95),
    -1px -1px 0 var(--blood-bright);
  animation: dmg-crit 1.2s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

.dmg-pop.heal {
  font-size: 32px;
  color: #c4e8a4;
  text-shadow:
    0 0 1px var(--ink-black),
    0 0 12px rgba(122, 142, 90, 0.7),
    0 0 22px rgba(168, 200, 132, 0.4),
    2px 3px 0 rgba(0, 0, 0, 0.95);
  animation: dmg-heal 1.1s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

.dmg-pop.miss {
  font-size: 28px;
  color: var(--ash-light);
  text-shadow:
    0 0 1px var(--ink-black),
    2px 3px 0 rgba(0, 0, 0, 0.9);
  animation: dmg-miss 0.9s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

@keyframes dmg-strike {
  0%   { transform: translate(-50%, 0) scale(0.4) rotate(-12deg); opacity: 0; }
  18%  { transform: translate(-50%, -16px) scale(1.5) rotate(8deg); opacity: 1; }
  35%  { transform: translate(-50%, -22px) scale(1) rotate(-3deg); opacity: 1; }
  100% { transform: translate(-50%, -90px) scale(0.95) rotate(-8deg); opacity: 0; }
}

@keyframes dmg-crit {
  0%   { transform: translate(-50%, 0) scale(0.3) rotate(-15deg); opacity: 0; }
  10%  { transform: translate(-50%, -12px) scale(1.85) rotate(6deg); opacity: 1; }
  25%  { transform: translate(-50%, -20px) scale(1.4) rotate(-4deg); opacity: 1; filter: drop-shadow(0 0 16px rgba(255,155,79,0.8)); }
  50%  { transform: translate(-50%, -30px) scale(1.1) rotate(2deg); opacity: 1; }
  100% { transform: translate(-50%, -110px) scale(1) rotate(-6deg); opacity: 0; }
}

@keyframes dmg-heal {
  0%   { transform: translate(-50%, 10px) scale(0.6); opacity: 0; }
  20%  { transform: translate(-50%, -10px) scale(1.3); opacity: 1; }
  100% { transform: translate(-50%, -100px) scale(1); opacity: 0; }
}

@keyframes dmg-miss {
  0%   { transform: translate(-50%, 0) scale(0.6) rotate(-8deg); opacity: 0; }
  25%  { transform: translate(-50%, -10px) scale(1) rotate(-4deg); opacity: 0.9; }
  100% { transform: translate(-50%, -50px) scale(0.95) rotate(0deg); opacity: 0; }
}

/* 적 숫자는 애니메이션 감상을 방해하지 않는 우측 전용 레인에서만 움직인다. */
.dmg-pop.enemy-target.dmg,
.dmg-pop.enemy-target.heal,
.dmg-pop.enemy-target.miss {
  font-size: clamp(24px, 2.4vw, 32px);
  animation: enemy-number-lane 1s cubic-bezier(.2,.8,.4,1) forwards;
}
.dmg-pop.enemy-target.crit {
  font-size: clamp(28px, 2.8vw, 38px);
  animation: enemy-number-lane 1.1s cubic-bezier(.2,.8,.4,1) forwards;
}
.dmg-pop.enemy-target.compact-lane {
  font-size: clamp(22px, 6vw, 30px);
  animation: enemy-number-compact 1s cubic-bezier(.2,.8,.4,1) forwards;
}
@keyframes enemy-number-lane {
  0%   { transform: translateY(8px) scale(.82); opacity: 0; }
  18%  { transform: translateY(0) scale(1.08); opacity: 1; }
  45%  { transform: translateY(-10px) scale(1); opacity: 1; }
  100% { transform: translateY(-52px) scale(.96); opacity: 0; }
}
@keyframes enemy-number-compact {
  0%   { transform: translate(-50%, 6px) scale(.88); opacity: 0; }
  20%  { transform: translate(-50%, 0) scale(1.04); opacity: 1; }
  55%  { transform: translate(-50%, -8px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -30px) scale(.96); opacity: 0; }
}

/* ============================================================
   END SCREEN
   ============================================================ */
#endscreen {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(45, 31, 61, 0.6), var(--ink-black) 80%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--gold-bright);
  z-index: 50;
  letter-spacing: 0.4em;
  text-shadow:
    0 0 1px var(--ink-black),
    0 0 24px rgba(232, 200, 120, 0.6),
    0 0 48px rgba(212, 121, 60, 0.3);
  animation: end-fade 2s ease-out;
}
@keyframes end-fade {
  0%   { opacity: 0; letter-spacing: 1em; filter: blur(8px); }
  100% { opacity: 1; letter-spacing: 0.4em; filter: blur(0); }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--ink-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-deep), var(--dusk));
  border: 1px solid var(--ink-black);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ============================================================
   RESPONSIVE — 작은 창/태블릿/모바일
   ============================================================ */
@media (max-width: 900px) {
  html, body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body { display: block; }

  #game {
    width: 100%;
    height: auto;
    min-height: 100dvh;
  }

  #screen {
    height: auto;
    min-height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(360px, 58vh) auto auto;
    grid-template-areas:
      "stage"
      "menu"
      "status";
    gap: 10px;
    padding: 40px 10px 10px;
  }

  #stage { min-height: 360px; }

  #menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 190px;
    overflow: visible;
  }

  #status {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    overflow: visible;
  }

  .rune-block,
  #potion-row {
    grid-column: 1 / -1;
  }

  #char-name { font-size: 19px; }
  .btn { min-height: 58px; }
}

@media (max-width: 560px) {
  #screen {
    grid-template-rows: minmax(320px, 52vh) auto auto;
    padding: 38px 7px 7px;
    gap: 7px;
  }

  #stage { min-height: 320px; }
  #menu { padding: 10px; gap: 8px; }
  #status { grid-template-columns: minmax(0, 1fr); padding: 12px 10px; }
  .rune-block,
  #potion-row { grid-column: auto; }

  .game-title { left: 12px; transform: none; gap: 6px; }
  .title-han { font-size: 16px; }
  .title-kor { display: none; }
  #bgm-toggle { right: 12px; }
  #dialogue-toggle { right: 82px; }

  #menu .menu-prompt { letter-spacing: 0.12em; }
  #menu .menu-prompt::before,
  #menu .menu-prompt::after { margin: 0 6px; }
  .btn { min-height: 54px; padding: 11px 8px; font-size: 13px; }
  .btn .ico { font-size: 18px; }
  .keycap { top: 4px; left: 5px; }

  #menu .input-row { flex-wrap: wrap; }
  #menu .input-row > span { width: 100%; }
  #menu input[type="text"] { min-width: 0; }
}

@media (max-width: 380px) {
  #menu { grid-template-columns: minmax(0, 1fr); }
  #menu .menu-prompt,
  #menu .full-width,
  #menu .input-row { grid-column: 1; }
}