:root{
  --ink:#2b2620; --ink-soft:#5a5245;
  --paper:#e4dac2; --paper-deep:#d3c7a8; --panel:#f1e9d4; --panel-border:#c9bb95;
  --accent:#a97a2e; --accent-strong:#8a5f1f;
  --good:#3f7a4a; --bad:#a5432f;
}
*{ box-sizing:border-box; }
/* 모바일에서 화면을 아래로 당기면 브라우저/웹뷰의 당겨서 새로고침 제스처가
   발동해 게임이 초기화되는 문제가 있었다. overscroll-behavior로 이 제스처
   자체를 막는다 (내부 패널의 overflow-y:auto 스크롤은 그대로 동작한다). */
html,body{ height:100%; margin:0; overscroll-behavior:none; }
body{
  background:var(--paper-deep); color:var(--ink);
  font-family:"Noto Sans KR",sans-serif;
  overflow:hidden;
}
h1,h2{ font-family:"Song Myung",serif; margin:0 0 8px; }

.screen{ display:none; width:100vw; height:100vh; }
.screen.active{ display:flex; }

/* 불러오는 중 화면 - 지도 배경/삽화 같은 큰 그림들을 미리 받아둔 뒤에
   타이틀 화면을 보여줘서, 게임 중간에 그림이 하나씩 늦게 뜨는 것을 막는다. */
#preload-screen{
  position:fixed; inset:0; z-index:200; background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
#preload-screen.hidden{ display:none; }
#preload-title{ font-family:"Song Myung",serif; font-size:28px; color:var(--ink); letter-spacing:.04em; }
#preload-bar-track{ width:min(280px,60vw); height:10px; border-radius:6px; background:var(--panel); border:1px solid var(--panel-border); overflow:hidden; }
#preload-bar-fill{ width:0%; height:100%; background:var(--accent); transition:width .15s ease; }
#preload-percent{ font-size:13px; color:var(--ink-soft); }

/* 세로로 든 모바일/작은 화면에서는 안내문구 없이 body 자체를 90도 회전시켜
   처음부터 가로 게임 화면으로 보여준다 - 사용자가 화면을 보고 자연스럽게
   기기를 돌리면(실제 방향이 landscape가 되면) 이 규칙이 해제되어 정방향으로 보인다. */
@media (orientation:portrait) and (max-width:1024px){
  html, body{ width:100%; height:100%; }
  body{
    position:absolute; top:0; left:100%;
    width:100vh; height:100vw;
    transform-origin:top left;
    transform:rotate(90deg);
    /* 90도 회전 때문에 물리적 화면의 위/오른쪽/아래/왼쪽 가장자리가
       각각 회전 전 좌표의 왼쪽/위/오른쪽/아래로 자리가 바뀐다(rotate(90deg)
       기준). 특히 안드로이드 제스처/내비게이션 바가 있는 물리적 하단은
       회전 전 좌표로는 "오른쪽"이 되므로, 그쪽에 안전영역만큼 여백을 둬서
       버튼이 시스템 내비게이션 바 위에 겹쳐 눌리지 않게 한다. 일부 웹뷰는
       safe-area-inset은 실제 그 값이 0이면 env()의 두번째 인자(대체값)를
       쓰지 않고 그냥 0을 반환한다(대체값은 env() 자체를 모르는 아주 오래된
       엔진에서만 쓰인다) - 그래서 "혹시 웹뷰가 실제 겹치는 영역을 알려주지
       않더라도 최소한 이만큼은 비워두자"는 값은 max()로 따로 보장한다. */
    padding-left: env(safe-area-inset-top, 0px);
    padding-top: env(safe-area-inset-right, 0px);
    padding-right: max(14px, env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-left, 0px);
  }
  .screen{ width:100%; height:100%; }
  /* 실제 표시 크기는 mapview.js가 window.innerWidth/innerHeight를 직접 읽어
     #explore-viewport에 인라인 스타일로 적용한다 (vw/vh는 회전 트랜스폼 아래에서
     실기기 브라우저마다 다르게 계산되는 경우가 있어 신뢰하지 않는다).
     여기서는 여백만 최소화해 화면을 최대한 채운다. */
  #explore-viewport{ margin:2px auto 0; }
  #map-hint{ margin-top:2px; }

  /* 세력설명 화면 카드가 늘어나면(챕터2는 7개) 세로로 든 모바일의 빠듯한
     세로 예산(물리적 화면 가로폭 정도) 안에서 맨 아래 "다음" 버튼까지
     스크롤 없이 한 화면에 들어오지 않는 경우가 있었다. 열을 더 촘촘히
     나누고 카드 여백/글자 크기를 줄여 전체 세로 길이를 압축한다. */
  .pick-wrap h2{ margin-bottom:2px; }
  .pick-wrap .subtitle{ margin-bottom:5px; }
  .faction-scroll{
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:5px;
    max-height:min(58vh,320px); margin-top:5px;
  }
  .faction-row{ padding:4px 8px; }
  .fname{ font-size:11.5px; }
  .floc{ font-size:9px; margin:0 0 2px; }
  .fdetail{ font-size:9.5px; line-height:1.28; }
  .note-box{ margin-top:6px; padding:5px 10px; font-size:10px; }
  .step-nav{ margin-top:8px; }
}

/* 타이틀 */
#screen-title{ align-items:center; justify-content:center; background:
  radial-gradient(ellipse at 50% 20%, rgba(255,255,255,0.08), transparent 60%), var(--paper); }
.title-wrap{ text-align:center; width:100%; min-width:0; box-sizing:border-box; padding:20px; }
.title-wrap h1{ font-size:48px; letter-spacing:.03em; margin-bottom:28px; }
.subtitle{ color:var(--ink-soft); margin-bottom:26px; font-size:13px; letter-spacing:.03em; }

.big-btn{
  font-family:"Noto Sans KR",sans-serif; font-weight:700; font-size:16px;
  background:var(--accent); color:#fff8ea; border:none; border-radius:10px;
  padding:14px 34px; cursor:pointer; box-shadow:0 6px 18px rgba(138,95,31,0.35);
}
.big-btn:hover{ background:var(--accent-strong); }
.title-actions{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.big-btn.outline{ background:transparent; color:var(--ink); border:1px solid var(--accent); box-shadow:none; }
.big-btn.outline:hover{ background:rgba(138,95,31,0.08); }

/* 챕터 선택 / 세력 설명 */
#screen-chapter, #screen-factions, #screen-factions-2{ align-items:center; justify-content:center; background:var(--paper); overflow-y:auto; }
/* flex 항목은 기본적으로 내용물 크기 아래로 줄어들지 않는다(min-width:auto) - 세로로 든
   모바일처럼 실제 화면 폭이 좁을 때 이 박스가 화면보다 넓게 그려져 잘려버리는 원인이었다.
   min-width:0으로 강제로 줄어들 수 있게 하고, width:100%로 항상 화면 폭 안에 맞춘다. */
.pick-wrap{ text-align:center; width:100%; max-width:720px; min-width:0; box-sizing:border-box; padding:12px; }
/* 챕터/세력설명 화면은 타이틀 화면보다 다뤄야 할 내용이 많은데, 세로로 든 모바일에서는
   실제 사용 가능한 세로 공간이 물리적 화면 가로폭 정도로 빠듯하다. 제목/부제 여백을
   빡빡하게 줄여 그 예산을 아낀다. */
.pick-wrap h2{ font-size:19px; margin-bottom:4px; }
.pick-wrap .subtitle{ margin-bottom:8px; font-size:11px; line-height:1.4; }
.pick-grid{ display:flex; gap:14px; margin-top:12px; flex-wrap:wrap; justify-content:center; }
.pick-card{
  width:170px; background:var(--panel); border:1px solid var(--panel-border);
  border-radius:14px; padding:16px 14px; cursor:pointer; font-family:inherit;
  transition:transform .12s ease; position:relative; text-align:center;
}
.pick-card:hover{ transform:translateY(-4px); border-color:var(--accent); }
.pick-card h3{ font-size:15px; margin-bottom:5px; }
.pick-card p{ font-size:11.5px; color:var(--ink-soft); margin:0; }

.factions-wrap{ max-width:900px; }
/* 세로로 든 모바일(회전 프리젠테이션)에서는 실제로 화면에 남는 세로 여백이 아주
   좁다(물리적 화면 가로폭 정도). 항목을 위아래로 죽 쌓으면 그 좁은 폭을 금방
   넘어서 화면 밖으로 잘리므로, 여유로운 가로 폭을 활용하는 여러 열 그리드로
   배치해 세로 길이를 줄인다. */
.faction-scroll{
  max-height:min(70vh,460px); overflow-y:auto; margin-top:8px; text-align:left;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:6px; min-width:0;
}
.faction-row{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:8px;
  padding:6px 10px; min-width:0;
}
.fname{ font-weight:700; font-family:"Song Myung",serif; font-size:13px; }
.floc{ font-size:10px; color:var(--ink-soft); font-weight:400; margin:1px 0 3px; }
.fdetail{ font-size:11px; color:var(--ink-soft); line-height:1.42; text-align:left; min-width:0; }
.note-box{
  margin-top:10px; padding:7px 12px; background:#fbf3e2; border:1px solid #e6d5a8;
  border-radius:6px; font-size:11px; color:#5c4a1e; line-height:1.4;
}
.step-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; gap:12px; }
.step-nav .big-btn{ padding:9px 20px; font-size:14px; }
.btn-secondary{
  background:transparent; border:1px solid var(--ink-soft); color:var(--ink);
  padding:8px 16px; border-radius:8px; cursor:pointer; font-size:12.5px; font-family:inherit;
}

/* 캐릭터 선택 */
#screen-select, #screen-select-2{ align-items:center; justify-content:center; background:var(--paper); overflow-y:auto; }
.select-wrap{ text-align:center; width:100%; max-width:820px; min-width:0; box-sizing:border-box; padding:16px; }
.select-wrap h2{ font-size:19px; margin-bottom:10px; }
/* 세로로 든 모바일에서는 세력설명 화면과 마찬가지로 세로 공간이 빠듯하다. 카드를
   위아래로 감싸 여러 줄로 쌓는 대신, 넉넉한 가로 폭을 살려 5장 모두 한 줄 그리드로
   배치해 세로 길이를 줄인다. */
.hero-cards{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-top:0; }
.hero-card{
  min-width:0; background:var(--panel); border:1px solid var(--panel-border);
  border-radius:12px; padding:10px 6px; cursor:pointer; font-family:inherit;
  transition:transform .12s ease; position:relative;
}
.hero-card:hover{ transform:translateY(-4px); border-color:var(--accent); }
.hero-swatch{
  width:44px; height:44px; border-radius:50%; margin:0 auto 6px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:"Song Myung",serif; font-size:18px;
}
.hero-name{ font-weight:700; font-size:13px; }
.hero-sub{ font-size:9.5px; color:var(--ink-soft); margin-top:3px; line-height:1.32; }

/* 준비중 카드 (챕터/장수 공통) - 존재는 보여주되 고를 수는 없음을 나타낸다 */
.hero-card.disabled, .pick-card.disabled{ opacity:.5; }
.hero-card.disabled:hover, .pick-card.disabled:hover{ transform:none; border-color:var(--panel-border); }
.ready-badge{
  position:absolute; top:4px; right:4px; background:var(--ink-soft); color:#fff8ea;
  font-size:8px; padding:1px 5px; border-radius:8px; letter-spacing:.01em;
}
.ready-badge.chapter-open{ background:var(--accent); font-weight:700; }

/* 탐험 화면 — 오버레이 HUD 레이아웃 */
#screen-explore{ flex-direction:column; align-items:center; background:var(--paper-deep); }
#explore-viewport{
  position:relative; width:min(800px,96vw); margin:14px auto 0;
  border-radius:8px; overflow:hidden;
  box-shadow:0 10px 28px rgba(54,44,31,.22);
}
#game-canvas{
  display:block; image-rendering:pixelated;
  width:100%; height:auto; touch-action:none;
}
#map-hint{ font-size:11.5px; color:var(--ink-soft); margin-top:8px; text-align:center; }

/* 컷신 일러스트 - 특정 대사 구간 동안 지도 위를 덮어 그 장면의 삽화를 보여준다 */
#scene-illustration{ position:absolute; inset:0; z-index:2; background:#0d0b09; opacity:1; transition:opacity .5s ease; }
#scene-illustration.hidden{ display:none; }
#scene-illustration.fading{ opacity:0; }
#scene-illustration img{ width:100%; height:100%; object-fit:contain; display:block; }
/* 일러스트가 떠 있는 동안에는 지도 위 부가 패널들을 가려 화면을 깔끔하게 유지한다.
   #hud-top을 가리지 않으면, 세로로 긴 모바일 화면을 90도 돌려썼을 때
   object-fit:contain으로 확대된 삽화의 위쪽 가장자리(인물 얼굴이 있는 경우가
   많다)가 이 상단 바에 그대로 가려지는 문제가 있었다. */
#explore-viewport.scene-active #location-banner,
#explore-viewport.scene-active #minimap-panel,
#explore-viewport.scene-active #hud-army,
#explore-viewport.scene-active #player-panel,
#explore-viewport.scene-active #bottom-menu,
#explore-viewport.scene-active #hud-top,
#explore-viewport.scene-active #touchpad{ display:none; }

.hud-panel{
  position:absolute; background:rgba(16,13,10,1); color:#f5ecd6;
  border:1px solid rgba(233,214,168,.35); border-radius:8px;
  pointer-events:none; transition:opacity .15s ease;
}
/* 관우가 패널 바로 아래(뒤)로 지나갈 때 - 인물이 비쳐 보이게 낮춘다 */
.hud-panel.panel-fade{ opacity:.25; }

/* 상단 바: 좌측 자원/우측 행동버튼 */
#hud-top{
  position:absolute; top:0; left:0; right:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 12px; background:rgba(16,13,10,1); color:#f5ecd6;
  border-bottom:1px solid rgba(233,214,168,.35);
  font-size:12.5px; pointer-events:auto;
}
#hud-left{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
#hud-actions{ display:flex; gap:8px; flex-wrap:wrap; }
#hud-actions button{
  font-family:inherit; font-size:12px; background:var(--accent); color:#fff8ea;
  border:none; border-radius:6px; padding:6px 10px; cursor:pointer; white-space:nowrap;
}
#hud-actions button:hover{ background:var(--accent-strong); }
#hud-actions button.hidden{ display:none; }

/* 위치/현재 할 일 배너 (좌상단, 상단바 아래) */
#location-banner{
  top:46px; left:10px; z-index:4; padding:8px 12px; max-width:44%;
}
#location-name{ font-weight:700; font-size:13.5px; margin-bottom:3px; }
#location-task{ font-size:12px; color:#e6d9b8; }

/* 미니맵 (우상단, 상단바 아래) */
#minimap-panel{
  top:46px; right:10px; z-index:4; padding:6px 8px; text-align:center;
}
#minimap-title{ font-size:11px; margin-bottom:3px; }
#minimap-canvas{ display:block; border-radius:4px; background:#3a4a2f; }

/* 아군 군세 정보 (미니맵 바로 아래) - 미션/임무 배너(#location-banner)와
   같은 상단 줄에 있으면 문구가 길어 배너를 가리는 문제가 있어 분리했다. */
#hud-army{
  top:146px; right:10px; z-index:4; padding:6px 10px; font-size:12px;
  color:#e9dcae; font-weight:600; max-width:200px;
}
#hud-army.hidden{ display:none; }

/* 플레이어 초상화 + 스텟 패널 (좌하단) */
#player-panel{
  bottom:10px; left:10px; z-index:4; padding:8px; display:flex; gap:8px; align-items:flex-start;
}
#player-portrait{ width:52px; height:52px; border-radius:8px; overflow:hidden; border:2px solid rgba(233,214,168,.55); flex:none; }
#player-portrait img{ width:100%; height:100%; object-fit:cover; }
#player-portrait img.hidden{ display:none; }
#player-portrait-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:"Song Myung",serif; font-size:20px; color:#fff;
}
#player-name{ font-weight:700; font-size:12.5px; margin-bottom:4px; }
.stat-row{ display:flex; align-items:center; gap:5px; font-size:10.5px; margin-bottom:2px; }
.stat-label{ width:24px; color:#e6d9b8; }
.stat-bar{ width:74px; height:6px; background:rgba(255,255,255,.14); border-radius:4px; overflow:hidden; }
.stat-fill{ height:100%; }
.stat-fill.stat-atk{ background:#5fa8d3; } .stat-fill.stat-def{ background:#c98a4b; }
.stat-fill.stat-spd{ background:#8fbf6a; } .stat-fill.stat-int{ background:#8f7fd6; }
.stat-fill.stat-cha{ background:#dcb24a; }
.stat-fill.stat-lead{ background:#6a9e7f; }
.stat-fill.stat-hp{ background:linear-gradient(90deg,#8e2e25,#d26b45,#e0a95a); }
.stat-val{ width:20px; text-align:right; color:#f5ecd6; }
.hp-row{ margin-bottom:5px; padding-bottom:5px; border-bottom:1px solid rgba(233,214,168,.25); }
.stat-val.hp-val{ width:48px; }

/* 하단 중앙 메뉴 버튼 (준비중 스텁) */
#bottom-menu{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:4;
  display:flex; gap:6px; pointer-events:auto;
}
#bottom-menu button{
  font-family:inherit; font-size:10px; line-height:1.5; text-align:center;
  background:rgba(16,13,10,1); color:#f5ecd6; border:1px solid rgba(233,214,168,.35);
  border-radius:8px; padding:5px 10px; cursor:pointer;
}
#bottom-menu button:hover{ background:rgba(24,20,15,.9); }

/* 터치패드 (우하단 오버레이) */
#touchpad{
  position:absolute; bottom:10px; right:10px; z-index:5;
  display:grid;
  grid-template-columns:44px 44px 44px;
  grid-template-rows:40px 40px 40px;
  grid-template-areas:
    ".    up      ."
    "left action  right"
    ".    down    .";
  gap:4px;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:auto;
}
.tp-btn{
  font-family:inherit; font-size:15px; font-weight:700;
  background:rgba(241,233,212,.88); border:1px solid var(--panel-border); border-radius:8px;
  color:var(--ink); cursor:pointer; touch-action:manipulation;
}
.tp-btn:active{ background:var(--accent); color:#fff8ea; }
.tp-up{ grid-area:up; } .tp-down{ grid-area:down; }
.tp-left{ grid-area:left; } .tp-right{ grid-area:right; }
.tp-action{ grid-area:action; font-size:11px; background:var(--accent); color:#fff8ea; }

/* 대화창 */
#dialogue-box{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  width:min(680px,92vw); background:var(--panel); border:1px solid var(--panel-border);
  border-radius:12px; padding:16px 20px; box-shadow:0 12px 30px rgba(43,38,32,0.3);
  cursor:pointer; z-index:50; opacity:1; transition:opacity .5s ease;
}
#dialogue-box.hidden{ display:none; }
#dialogue-box.fading{ opacity:0; }
#dialogue-name{ font-weight:700; color:var(--accent-strong); margin-bottom:6px; font-size:13.5px; }
#dialogue-name[data-kind="narration"]{ color:var(--ink-soft); font-style:italic; }
#dialogue-text{ font-size:15px; line-height:1.6; }
#dialogue-next{ text-align:right; font-size:11px; color:var(--ink-soft); margin-top:8px; }

/* 선택지 */
#choice-box{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(420px,90vw); background:var(--panel); border:1px solid var(--panel-border);
  border-radius:12px; padding:20px; box-shadow:0 12px 30px rgba(43,38,32,0.35); z-index:60;
}
#choice-box.hidden{ display:none; }
#choice-text{ font-size:14px; margin-bottom:14px; line-height:1.6; }
#choice-buttons{ display:flex; flex-direction:column; gap:8px; }
#choice-buttons button{
  font-family:inherit; font-size:13.5px; padding:10px; border-radius:8px; border:1px solid var(--panel-border);
  background:#fff8ea; cursor:pointer;
}
#choice-buttons button:hover{ border-color:var(--accent); }

/* 타이밍 미니게임 */
#timing-minigame{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(420px,90vw); background:var(--panel); border:1px solid var(--panel-border);
  border-radius:12px; padding:20px; box-shadow:0 12px 30px rgba(43,38,32,0.35); z-index:70;
  text-align:center;
}
#timing-minigame.hidden{ display:none; }
#timing-title{ font-size:14px; margin-bottom:14px; }
#timing-track{
  position:relative; height:28px; border-radius:14px; background:#efe3cc;
  border:1px solid var(--panel-border); cursor:pointer; overflow:hidden;
}
#timing-zone-success{
  position:absolute; top:0; bottom:0; left:25%; width:50%; background:#c9dfae;
}
#timing-zone-critical{
  position:absolute; top:0; bottom:0; left:45%; width:10%; background:var(--accent);
}
#timing-marker{
  position:absolute; top:-3px; bottom:-3px; left:0; width:3px; background:#40372c;
  transform:translateX(-50%);
}
#timing-hint{ font-size:11px; color:var(--ink-soft); margin-top:10px; }

/* 가방 */
#bag-box{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(360px,90vw); max-height:80vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:12px; padding:20px; box-shadow:0 12px 30px rgba(43,38,32,0.35); z-index:60;
}
#bag-box.hidden{ display:none; }
#bag-close{
  position:absolute; top:12px; right:14px; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--panel-border); background:#fff8ea; color:var(--ink);
  font-size:14px; line-height:1; cursor:pointer;
}
#bag-close:hover{ background:var(--accent); color:#fff8ea; }
#bag-title{ font-family:"Song Myung",serif; font-size:18px; margin-bottom:14px; padding-right:24px; }
#bag-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.bag-slot{
  aspect-ratio:1; border-radius:8px; border:1px solid var(--panel-border); background:#fff8ea;
  display:flex; align-items:center; justify-content:center; font-size:22px; cursor:default; position:relative;
}
.bag-slot.filled{ cursor:pointer; border-color:var(--accent); }
.bag-slot.filled:hover{ background:#fff2d9; }
.bag-slot-name{
  position:absolute; bottom:2px; left:2px; right:2px; font-size:8.5px; color:var(--ink-soft);
  text-align:center; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 세로 모바일 회전 트랜스폼 아래에서는 width는 vh, max-height는 vw 기준이어야
   실제 화면 안에 들어온다 (군세 편성 창과 같은 이유). */
@media (orientation:portrait) and (max-width:1024px){
  #bag-box{ width:min(360px,80vh); max-height:min(86vw,480px); padding:16px; }
}

/* 장수탭 */
#roster-box{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(420px,90vw); max-height:80vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:12px; padding:20px; box-shadow:0 12px 30px rgba(43,38,32,0.35); z-index:60;
}
#roster-box.hidden{ display:none; }
/* 세로 모바일 회전 트랜스폼 아래에서는 width는 vh, max-height는 vw 기준이어야
   실제 화면 안에 들어온다 (가방/군세 편성 창과 같은 이유). */
@media (orientation:portrait) and (max-width:1024px){
  #roster-box{ width:min(420px,80vh); max-height:min(86vw,520px); padding:16px; }
}
#roster-title{ font-family:"Song Myung",serif; font-size:18px; margin-bottom:14px; }
#roster-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.roster-row{
  display:flex; flex-direction:column; gap:5px; padding:8px 10px; cursor:pointer;
  background:#fff8ea; border:1px solid var(--panel-border); border-radius:8px;
}
.roster-row:hover{ border-color:var(--accent); background:#fff2d9; }
.roster-row-main{ display:flex; align-items:center; gap:10px; }
.roster-role{
  font-size:11px; font-weight:700; color:#fff8ea; background:var(--accent);
  border-radius:5px; padding:3px 7px; flex:none; min-width:34px; text-align:center;
}
.roster-row.lord .roster-role{ background:#7a3a2b; }
.roster-role.scholar{ background:#3a6b7a; }
.roster-name{ font-size:14px; font-weight:600; }
.roster-sub{ font-size:11.5px; color:var(--ink-soft); margin-left:auto; }
.roster-stats{ font-size:11.5px; color:var(--ink-soft); padding-left:44px; }
.roster-strategy{ font-size:11.5px; color:var(--accent-strong); padding-left:44px; }

/* 장수 상세보기 */
#hero-detail-box{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(380px,90vw); max-height:80vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:12px; padding:20px; box-shadow:0 12px 30px rgba(43,38,32,0.35); z-index:70;
}
#hero-detail-box.hidden{ display:none; }
#hero-detail-close{
  position:absolute; top:12px; right:14px; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--panel-border); background:#fff8ea; color:var(--ink);
  font-size:14px; line-height:1; cursor:pointer;
}
#hero-detail-close:hover{ background:var(--accent); color:#fff8ea; }
#hero-detail-role{ display:inline-block; margin-bottom:8px; }
#hero-detail-name{ font-family:"Song Myung",serif; font-size:19px; margin-bottom:10px; padding-right:24px; }
#hero-detail-bio{ font-size:13.5px; line-height:1.6; color:var(--ink); margin-bottom:12px; }
#hero-detail-skills{ font-size:12.5px; line-height:1.7; color:var(--ink-soft); display:flex; flex-direction:column; gap:4px; }
@media (orientation:portrait) and (max-width:1024px){
  #hero-detail-box{ width:min(380px,80vh); max-height:min(86vw,480px); padding:16px; }
}

/* 군세 편성 */
#army-box{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(440px,92vw); max-height:85vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:12px; padding:22px; box-shadow:0 12px 30px rgba(43,38,32,0.35); z-index:65;
}
#army-box.hidden{ display:none; }
#army-close{
  position:absolute; top:12px; right:14px; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--panel-border); background:#fff8ea; color:var(--ink);
  font-size:14px; line-height:1; cursor:pointer;
}
#army-close:hover{ background:var(--accent); color:#fff8ea; }
#army-title{ font-family:"Song Myung",serif; font-size:18px; margin-bottom:6px; padding-right:24px; }
#army-desc{ font-size:13px; color:var(--ink-soft); margin:0 0 16px; line-height:1.5; }
/* 회남 벌판(관우군→유비군)처럼 두 군세를 연달아 편성할 때, 이미 확정한 앞
   군세를 여기 표시해둔다 - 잘못 짰으면 X로 취소하고 처음부터 다시 짤 수 있다. */
#army-prior{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:-4px 0 16px; padding:9px 12px; border-radius:8px;
  background:#fff2d9; border:1px solid var(--panel-border); font-size:12.5px; color:var(--ink);
}
#army-prior.hidden{ display:none; }
#army-prior-cancel{
  font-family:inherit; font-size:12px; width:24px; height:24px; flex:none; line-height:1;
  border-radius:50%; border:1px solid var(--bad); background:#fff8ea; color:var(--bad); cursor:pointer;
}
#army-prior-cancel:hover{ background:var(--bad); color:#fff8ea; }
.army-field{ margin-bottom:14px; }
.army-field label{ display:block; font-size:12.5px; margin-bottom:5px; color:var(--ink-soft); }
.army-field select{
  width:100%; font-family:inherit; font-size:14px; padding:9px 10px;
  border-radius:8px; border:1px solid var(--panel-border); background:#fff8ea;
}
#army-generals-list{ display:flex; flex-wrap:wrap; gap:6px; }
.army-general-chip{
  font-family:inherit; font-size:12.5px; padding:7px 12px; border-radius:20px;
  border:1px solid var(--panel-border); background:#fff8ea; color:var(--ink); cursor:pointer;
}
.army-general-chip.selected{ background:var(--accent); border-color:var(--accent-strong); color:#fff8ea; }
.army-empty-hint{ font-size:12px; color:var(--ink-soft); }
.stepper{ display:flex; align-items:center; gap:10px; }
.stepper-btn{
  font-family:inherit; font-size:16px; font-weight:700; width:42px; height:38px; flex:none;
  border-radius:8px; border:1px solid var(--panel-border); background:#fff8ea; color:var(--ink);
  cursor:pointer; touch-action:manipulation; user-select:none;
}
.stepper-btn:active{ background:var(--accent); color:#fff8ea; }
.stepper-value{
  flex:1; text-align:center; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums;
  padding:8px 10px; border-radius:8px; background:#fff8ea; border:1px solid var(--panel-border);
}
.army-field-hint{ font-size:12px; color:var(--ink-soft); margin-top:6px; }
#army-power{ font-size:13px; color:var(--ink-soft); margin-bottom:8px; }
#army-hint{ font-size:12px; color:var(--bad); min-height:18px; margin-bottom:10px; }

/* 세로로 든 모바일에서는 회전 트랜스폼 때문에 width는 vw(로컬 가로 = 회전 후
   화면 세로가 되는 넉넉한 축)를, max-height는 vh(로컬 세로 = 회전 후 화면
   가로가 되는 좁은 축)를 기준으로 계산돼, 이 창이 실제 화면 가로폭보다 훨씬
   넓게 그려져 출병 버튼이 화면 밖으로 밀려나 있었다. 두 기준을 맞바꿔 화면
   안에 들어오게 한다. */
@media (orientation:portrait) and (max-width:1024px){
  #army-box{ width:min(420px,80vh); max-height:min(86vw,520px); padding:16px; }
}

/* 상인 상점 */
#merchant-box{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(440px,92vw); max-height:85vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:12px; padding:22px; box-shadow:0 12px 30px rgba(43,38,32,0.35); z-index:65;
}
#merchant-box.hidden{ display:none; }
#merchant-close{
  position:absolute; top:12px; right:14px; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--panel-border); background:#fff8ea; color:var(--ink);
  font-size:14px; line-height:1; cursor:pointer;
}
#merchant-close:hover{ background:var(--accent); color:#fff8ea; }
#merchant-title{ font-family:"Song Myung",serif; font-size:18px; margin-bottom:6px; padding-right:24px; }
#merchant-desc{ font-size:13px; color:var(--ink-soft); margin:0 0 16px; line-height:1.5; }
.merchant-row-footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.merchant-row-footer .merchant-cost{ font-size:12.5px; color:var(--ink-soft); }
.big-btn.small-btn{ padding:8px 18px; font-size:13px; box-shadow:none; }
#merchant-hint{ font-size:12px; color:var(--bad); min-height:18px; margin-top:4px; }
@media (orientation:portrait) and (max-width:1024px){
  #merchant-box{ width:min(420px,80vh); max-height:min(86vw,520px); padding:16px; }
}

/* 대지도 */
#worldmap-box{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1260px,96vw); max-height:92vh; overflow:auto; text-align:center;
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:12px; padding:18px; box-shadow:0 12px 30px rgba(43,38,32,.35); z-index:59;
}
#worldmap-box.hidden{ display:none; }
#worldmap-close{
  position:absolute; top:12px; right:14px; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--panel-border); background:#fff8ea; color:var(--ink);
  font-size:14px; line-height:1; cursor:pointer; z-index:1;
}
#worldmap-close:hover{ background:var(--accent); color:#fff8ea; }
#worldmap-title{ font-family:"Song Myung",serif; font-size:18px; margin-bottom:8px; }
#worldmap-modes{ display:flex; justify-content:center; gap:8px; margin-bottom:12px; }
.wm-mode-btn{
  font-family:inherit; font-size:12.5px; padding:6px 16px; border-radius:14px;
  border:1px solid var(--panel-border); background:#fff8ea; color:var(--ink); cursor:pointer;
}
.wm-mode-btn:hover{ border-color:var(--accent); }
.wm-mode-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff8ea; }
#worldmap-body{ display:flex; align-items:flex-start; justify-content:center; gap:18px; }
#worldmap-frame{ position:relative; display:inline-block; max-width:100%; line-height:0; flex:0 1 auto; }
#worldmap-img{ display:block; width:auto; height:auto; max-width:100%; max-height:78vh; border-radius:6px; }
#worldmap-legend{
  flex:0 0 150px; width:150px; max-height:78vh; overflow-y:auto;
  text-align:left; font-size:11.5px; line-height:1.4; padding-top:2px;
}
.wm-legend-title{ font-weight:700; margin-bottom:6px; color:var(--ink); }
.wm-legend-row{ display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.wm-legend-swatch{
  flex:0 0 13px; width:13px; height:13px; border-radius:3px; border:1px solid rgba(43,38,32,.4);
}
.wm-legend-label{ color:var(--ink-soft); }
.wm-marker{ position:absolute; transform:translate(-50%,-50%); cursor:pointer; }
.wm-marker::before{ content:''; position:absolute; inset:-7px; }
.wm-marker.city{
  width:9px; height:9px; background:var(--wm-color);
  box-shadow:0 0 0 1.5px #2b2016, 0 0 0 3.5px var(--wm-color);
}
.wm-marker.fort{ width:9px; height:9px; background:var(--wm-color); border:1.5px solid #2b2016; }
.wm-marker.port{
  width:0; height:0; background:none;
  border-left:5.5px solid transparent; border-right:5.5px solid transparent;
  border-bottom:10px solid var(--wm-color);
  filter:drop-shadow(0 -1px 0 #2b2016) drop-shadow(0 0 1px #2b2016);
}
.wm-label{
  position:absolute; left:50%; bottom:100%; transform:translateX(-50%); margin-bottom:2px;
  background:rgba(31,27,22,.82); color:#f5e8c8; font-size:9px; font-weight:700;
  padding:2px 5px; border-radius:3px; white-space:nowrap; pointer-events:none;
}
.wm-flag{
  position:absolute; left:100%; bottom:100%; margin-left:1px; margin-bottom:1px;
  font-size:11px; line-height:1; pointer-events:none;
}
@media (orientation:portrait) and (max-width:1024px){
  #worldmap-box{ width:min(1100px,86vh); max-height:min(92vw,760px); padding:12px; }
  #worldmap-img{ max-height:min(70vw,600px); }
  #worldmap-body{ flex-direction:column; align-items:center; }
  #worldmap-legend{ flex:none; width:100%; max-height:none; margin-top:8px; }
  .wm-legend-row{ display:inline-flex; margin-right:12px; }
}
/* 휴대폰 화면에서는 성/요새/항구 마커가 지도에 비해 너무 커 보여서
   따로 확 줄인다 (실기기별로 지도 실제 렌더 크기가 달라질 수 있어,
   지도 크기 계산과 무관하게 마커 자체 크기를 줄이는 쪽을 택했다). */
@media (max-width:680px){
  .wm-marker::before{ inset:-5px; }
  .wm-marker.city{
    width:5px; height:5px;
    box-shadow:0 0 0 1px #2b2016, 0 0 0 2.2px var(--wm-color);
  }
  .wm-marker.fort{ width:5px; height:5px; border-width:1px; }
  .wm-marker.port{
    border-left-width:3.2px; border-right-width:3.2px; border-bottom-width:5.8px;
  }
  .wm-label{ font-size:6.5px; padding:1.2px 3px; margin-bottom:1px; }
  .wm-flag{ font-size:8px; }
}

/* 대지도 - 성 정보 카드 */
#citycard-box{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(300px,88vw);
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:12px; padding:18px; box-shadow:0 12px 30px rgba(43,38,32,.4); z-index:60;
}
#citycard-box.hidden{ display:none; }
#citycard-close{
  position:absolute; top:12px; right:14px; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--panel-border); background:#fff8ea; color:var(--ink);
  font-size:14px; line-height:1; cursor:pointer;
}
#citycard-close:hover{ background:var(--accent); color:#fff8ea; }
#citycard-title{ font-family:"Song Myung",serif; font-size:18px; margin-bottom:12px; padding-right:24px; }
.citycard-row{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:6px 0; border-bottom:1px solid var(--panel-border); font-size:13px;
}
.citycard-row:last-child{ border-bottom:none; }
.citycard-label{ color:var(--ink-soft); }
.citycard-faction{
  font-weight:700; padding:2px 8px; border-radius:10px;
  background:var(--wm-color,#8a8478); border:1px solid rgba(43,38,32,.3);
}

/* 설정 */
#settings-box{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(360px,92vw);
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:12px; padding:20px; box-shadow:0 12px 30px rgba(43,38,32,0.35); z-index:59;
}
#settings-box.hidden{ display:none; }
#settings-close{
  position:absolute; top:12px; right:14px; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--panel-border); background:#fff8ea; color:var(--ink);
  font-size:14px; line-height:1; cursor:pointer;
}
#settings-close:hover{ background:var(--accent); color:#fff8ea; }
#settings-title{ font-family:"Song Myung",serif; font-size:18px; margin-bottom:14px; padding-right:24px; }
#settings-menu-list{ display:flex; flex-direction:column; gap:8px; }
.settings-menu-btn{
  font-family:inherit; font-size:13.5px; padding:12px; border-radius:8px;
  border:1px solid var(--panel-border); background:#fff8ea; color:var(--ink); cursor:pointer;
}
.settings-menu-btn:hover{ border-color:var(--accent); }
@media (orientation:portrait) and (max-width:1024px){
  #settings-box{ width:min(360px,80vh); padding:16px; }
}

/* 저장/불러오기 */
#save-box{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(440px,92vw); max-height:85vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:12px; padding:22px; box-shadow:0 12px 30px rgba(43,38,32,0.35); z-index:59;
}
#save-box.hidden{ display:none; }
#save-close{
  position:absolute; top:12px; right:14px; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--panel-border); background:#fff8ea; color:var(--ink);
  font-size:14px; line-height:1; cursor:pointer;
}
#save-close:hover{ background:var(--accent); color:#fff8ea; }
#save-title{ font-family:"Song Myung",serif; font-size:18px; margin-bottom:6px; padding-right:24px; }
#save-desc{ font-size:12px; color:var(--ink-soft); margin:0 0 14px; line-height:1.5; }
#save-slots{ display:flex; flex-direction:column; gap:8px; }
.save-slot{
  display:flex; align-items:center; gap:8px; padding:9px 10px; flex-wrap:wrap;
  background:#fff8ea; border:1px solid var(--panel-border); border-radius:8px;
}
.save-slot-info{ flex:1 1 auto; min-width:120px; }
.save-slot-label{ font-size:13px; font-weight:600; }
.save-slot-sub{ font-size:11px; color:var(--ink-soft); margin-top:2px; }
.save-slot-empty{ font-size:12.5px; color:var(--ink-soft); }
.save-slot button{
  font-family:inherit; font-size:12px; padding:6px 10px; border-radius:6px;
  border:1px solid var(--panel-border); background:var(--accent); color:#fff8ea; cursor:pointer; white-space:nowrap;
}
.save-slot button.secondary{ background:#fff8ea; color:var(--ink); }
.save-slot button.danger{ background:#8a3b2a; color:#fff8ea; border-color:#8a3b2a; }
@media (orientation:portrait) and (max-width:1024px){
  #save-box{ width:min(440px,80vh); max-height:min(86vw,520px); padding:16px; }
}

/* 대화 기록 */
#log-box{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(460px,92vw); max-height:80vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:12px; padding:20px; box-shadow:0 12px 30px rgba(43,38,32,0.35); z-index:60;
}
#log-box.hidden{ display:none; }
#log-close{
  position:absolute; top:12px; right:14px; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--panel-border); background:#fff8ea; color:var(--ink);
  font-size:14px; line-height:1; cursor:pointer;
}
#log-close:hover{ background:var(--accent); color:#fff8ea; }
#log-title{ font-family:"Song Myung",serif; font-size:18px; margin-bottom:14px; padding-right:24px; }
#log-list{ display:flex; flex-direction:column; gap:8px; }
.log-entry{ padding:8px 10px; background:#fff8ea; border:1px solid var(--panel-border); border-radius:8px; }
.log-speaker{ font-size:12px; font-weight:700; color:var(--accent-strong); margin-bottom:2px; }
.log-speaker.narration{ color:var(--ink-soft); font-style:italic; font-weight:600; }
.log-text{ font-size:13px; line-height:1.5; }
.log-empty{ font-size:13px; color:var(--ink-soft); text-align:center; padding:20px 0; }
@media (orientation:portrait) and (max-width:1024px){
  #log-box{ width:min(460px,80vh); max-height:min(86vw,520px); padding:16px; }
}

/* 배틀 화면 */
#battle-screen{
  position:fixed; inset:0; background:linear-gradient(180deg,#e8ddc0,#c9b98d);
  z-index:40; display:flex; flex-direction:column; justify-content:space-between; padding:30px;
}
#battle-screen.hidden{ display:none; }
.battle-side{ display:flex; flex-direction:column; gap:6px; width:260px; }
#battle-side-e{ align-self:flex-start; }
#battle-side-p{ align-self:flex-end; }
.battle-portrait{
  width:76px; height:76px; border-radius:12px; border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:"Song Myung",serif; font-size:30px;
}
.battle-name{ font-weight:700; }
.bar{ width:100%; height:10px; background:rgba(0,0,0,0.15); border-radius:6px; overflow:hidden; }
.bar-fill{ height:100%; background:var(--good); transition:width .2s ease; }
.bar.gauge .bar-fill{ background:#3f6fa0; }
.bar-text{ font-size:11px; font-variant-numeric:tabular-nums; color:var(--ink-soft); }
.battle-log{
  align-self:center; width:min(560px,90vw); max-height:180px; overflow-y:auto;
  background:rgba(255,255,255,0.55); border-radius:10px; padding:10px 14px;
  font-size:12.5px; line-height:1.7;
}
#battle-actions{ display:flex; gap:10px; justify-content:center; }
#battle-actions button{
  font-family:inherit; font-size:13.5px; font-weight:600; padding:12px 18px;
  border-radius:10px; border:none; background:var(--accent); color:#fff8ea; cursor:pointer;
}
#battle-actions button:hover{ background:var(--accent-strong); }
#battle-actions button:disabled{ background:#9c9182; cursor:not-allowed; }

/* 엔딩 */
#screen-ending{ align-items:center; justify-content:center; background:var(--paper); }
.ending-wrap{ text-align:center; max-width:520px; }
#ending-summary{ margin:16px 0 26px; font-size:14px; line-height:1.8; color:var(--ink-soft); text-align:left;
  background:var(--panel); border:1px solid var(--panel-border); border-radius:10px; padding:16px 20px; }

/* 안내 메시지 - 화면 구석의 작은 토스트는 모바일에서 특히 잘 안 보여서,
   모든 안내를 화면 한가운데에 큼직하게 띄운다. top/left 50%는 회전
   트랜스폼 아래에서도(로컬 박스가 화면 전체에 정확히 겹쳐지므로) 항상
   실제 화면 정중앙으로 그려진다. */
#center-alert{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  background:rgba(28,22,15,0.92); color:#fff8ea; padding:18px 26px; border-radius:14px;
  font-size:17px; font-weight:700; text-align:center; line-height:1.5; max-width:min(78vw,420px);
  z-index:85; box-shadow:0 12px 30px rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.15);
  cursor:pointer;
}
#center-alert.hidden{ display:none; }

/* ===== Duel VFX layer (GPT visual vertical slice / BASE 3b3524f) ===== */
#battle-screen{overflow:hidden;background:#17140f;padding:18px 24px 20px;isolation:isolate;}
#duel-arena{position:absolute;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(#d8b875 0 44%,#9d7a45 45% 60%,#625238 61%);}
.duel-sky{position:absolute;inset:0 0 45%;background:linear-gradient(#8e9aa0,#d9c99e 70%,#d8b875);overflow:hidden;}
.duel-sky:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 25%,rgba(255,240,196,.22) 50%,transparent 72%);}
.duel-sky span{position:absolute;width:220px;height:34px;border-radius:50%;background:rgba(242,230,198,.38);filter:blur(10px);animation:duel-cloud 16s linear infinite;}
.duel-sky span:nth-child(1){top:18%;left:-10%;}.duel-sky span:nth-child(2){top:36%;left:38%;animation-duration:23s}.duel-sky span:nth-child(3){top:8%;left:72%;animation-duration:29s}
.duel-mountains{position:absolute;left:-5%;right:-5%;top:27%;height:30%;opacity:.58;background:linear-gradient(145deg,transparent 0 22%,#58645d 22% 35%,transparent 35% 41%,#4c5a52 41% 55%,transparent 55% 62%,#657066 62% 75%,transparent 75%);filter:drop-shadow(0 8px 0 rgba(38,38,31,.22));}
.duel-ground{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(rgba(86,69,45,.2),rgba(45,39,30,.65)),repeating-linear-gradient(8deg,transparent 0 30px,rgba(255,255,255,.025) 31px 32px);border-top:3px solid rgba(64,48,31,.4)}
.duel-ground:before{content:"";position:absolute;left:0;right:0;top:38%;height:2px;background:rgba(255,226,166,.13);box-shadow:0 20px rgba(255,226,166,.08),0 42px rgba(255,226,166,.05)}
.duel-versus-mark{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%) rotate(-7deg);font-family:"Song Myung",serif;font-size:clamp(28px,6vw,70px);font-weight:900;letter-spacing:.16em;color:rgba(52,38,27,.11);white-space:nowrap}
.duel-actor{position:absolute;width:170px;height:205px;bottom:25%;transition:filter .2s;transform-origin:50% 90%;}
.duel-actor.player{left:14%;}.duel-actor.enemy{right:14%;transform:scaleX(-1)}
.duel-shadow{position:absolute;width:130px;height:24px;left:18px;bottom:2px;border-radius:50%;background:rgba(20,17,13,.35);filter:blur(4px)}
.duel-horse{position:absolute;left:20px;bottom:22px;width:125px;height:64px;border-radius:58% 42% 42% 48%;background:#5b4431;box-shadow:inset 0 -12px rgba(30,22,17,.2),0 4px 0 rgba(0,0,0,.15)}
.duel-horse:before{content:"";position:absolute;width:43px;height:55px;right:-10px;top:-30px;border-radius:60% 45% 40% 50%;background:inherit;transform:rotate(18deg)}
.duel-horse:after{content:"";position:absolute;left:16px;bottom:-34px;width:9px;height:42px;background:#443426;box-shadow:32px 3px #443426,69px 0 #443426,92px 4px #443426;border-radius:0 0 5px 5px}
.duel-horse i{position:absolute;left:-27px;top:8px;width:38px;height:9px;border-radius:50%;background:#3d3025;transform:rotate(20deg)}
.duel-body{position:absolute;left:48px;bottom:70px;width:70px;height:112px;transform-origin:50% 90%}
.duel-torso{position:absolute;left:8px;top:39px;width:58px;height:67px;border-radius:18px 18px 9px 9px;background:#385f42;border:3px solid rgba(36,29,23,.8);box-shadow:inset 0 -15px rgba(0,0,0,.14)}
.duel-head{position:absolute;left:22px;top:15px;width:34px;height:34px;border-radius:46% 46% 52% 52%;background:#c99b70;border:3px solid #30251f;z-index:2}
.duel-head:after{content:"";position:absolute;left:12px;top:27px;width:11px;height:31px;background:#29221d;border-radius:2px 2px 8px 8px;transform:rotate(-5deg)}
.duel-plume{position:absolute;left:30px;top:-5px;width:7px;height:28px;background:#2f2923;border-radius:50% 50% 0 0;transform:rotate(-10deg)}
.duel-weapon{position:absolute;left:62px;top:0;width:7px;height:130px;background:#332c26;border-radius:3px;transform:rotate(55deg);transform-origin:50% 80%;z-index:3;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.duel-weapon:after{content:"";position:absolute;left:-9px;top:-24px;width:25px;height:34px;background:#c8c0aa;clip-path:polygon(50% 0,100% 48%,68% 100%,48% 72%,15% 100%,0 48%);filter:drop-shadow(0 0 1px #222)}
.duel-glyph{position:absolute;left:22px;top:56px;z-index:5;font-family:"Song Myung",serif;font-size:20px;color:#f3e5bd;text-shadow:0 2px 2px #222}
.duel-actor.enemy .duel-glyph,.duel-actor.enemy .duel-actor-label{transform:scaleX(-1)}
.duel-actor.enemy .duel-torso{background:#7a352b}.duel-actor.enemy .duel-horse{background:#4b3b31}
.duel-actor.raster-art .duel-horse{display:none}
.duel-actor.raster-art .duel-body{left:-28px;bottom:0;width:225px;height:225px;background-position:center bottom;background-repeat:no-repeat;background-size:contain}
.duel-actor.raster-art .duel-body>*{display:none}
.duel-actor.raster-art.player .duel-body{transform:scaleX(-1)}
.duel-actor-label{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);min-width:74px;text-align:center;padding:3px 8px;border:1px solid rgba(242,222,176,.55);border-radius:4px;background:rgba(31,27,22,.72);color:#f5e8c8;font-size:12px;font-weight:700;white-space:nowrap}
.duel-actor.enemy .duel-actor-label{left:auto;right:50%;}

/* 기존 정보 패널을 전장 HUD로 */
.battle-side{position:relative;z-index:4;width:min(290px,42vw);padding:10px 12px;background:rgba(31,27,22,.78);border:1px solid rgba(238,215,165,.55);box-shadow:0 6px 18px rgba(0,0,0,.22);backdrop-filter:blur(4px);color:#f6e9cb}
#battle-side-e{align-self:flex-start;border-radius:4px 16px 16px 4px} #battle-side-p{align-self:flex-end;border-radius:16px 4px 4px 16px}
.battle-portrait{width:42px;height:42px;border-radius:50%;font-size:19px;border-color:#e7d09c;box-shadow:0 0 0 2px rgba(0,0,0,.2)}
.battle-name{position:absolute;left:64px;top:10px;font-family:"Song Myung",serif;font-size:16px}.bar{margin-left:52px;width:calc(100% - 52px);height:9px;background:rgba(0,0,0,.35)}
.bar.hp .bar-fill{background:linear-gradient(90deg,#8e2e25,#d26b45,#e0a95a)}.bar.gauge .bar-fill{background:linear-gradient(90deg,#355f87,#6eb1d2,#d9f3ff);box-shadow:0 0 7px rgba(126,206,255,.5)}
.bar-text{margin-left:52px;color:#e7d8b8}
.battle-log{position:relative;z-index:5;width:min(540px,70vw);max-height:112px;background:rgba(25,22,18,.74);border:1px solid rgba(231,208,156,.4);color:#f0e4c8;box-shadow:0 8px 22px rgba(0,0,0,.25);backdrop-filter:blur(3px)}
#battle-actions{position:relative;z-index:6;display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));width:min(760px,96vw);align-self:center;gap:7px;padding:8px;background:rgba(25,22,18,.84);border:1px solid rgba(231,208,156,.45);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.28)}
#battle-actions button{font-size:13px;padding:11px 8px;border:1px solid rgba(255,236,195,.28);background:linear-gradient(#7b382d,#55271f);box-shadow:inset 0 1px rgba(255,255,255,.12)}
#battle-actions button:hover,#battle-actions button:focus{background:linear-gradient(#a64a37,#713126);outline:2px solid rgba(244,215,151,.65);outline-offset:1px}
#battle-actions button:disabled{background:#504b43;color:#918a7d}

/* 필살공격 스킬 선택 메뉴 */
#battle-skill-menu{
  position:fixed; inset:0; z-index:32; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:rgba(12,10,8,.72);
}
#battle-skill-menu.hidden{ display:none; }
#battle-skill-title{
  font-family:"Song Myung",serif; font-size:20px; color:#f5ecd6;
  text-shadow:0 2px 4px #000; margin-bottom:4px;
}
#battle-skill-list{ display:flex; flex-direction:column; gap:8px; width:min(420px,90vw); }
#battle-skill-list button{
  font-family:inherit; text-align:left; padding:12px 16px; border-radius:10px;
  border:1px solid rgba(231,208,156,.5); background:linear-gradient(#7b382d,#55271f);
  color:#f5ecd6; cursor:pointer; display:flex; flex-direction:column; gap:3px;
}
#battle-skill-list button strong{ font-size:15px; }
#battle-skill-list button span{ font-size:12px; color:#e7d8b8; }
#battle-skill-list button:hover, #battle-skill-list button:focus{
  background:linear-gradient(#a64a37,#713126); outline:2px solid rgba(244,215,151,.65);
}
#battle-skill-cancel{
  font-family:inherit; font-size:13px; padding:8px 18px; border-radius:8px;
  border:1px solid rgba(231,208,156,.4); background:rgba(25,22,18,.8); color:#e7d8b8; cursor:pointer;
}

#duel-fx-layer{position:absolute;inset:0;pointer-events:none;z-index:20}.duel-float{position:absolute;top:43%;font-family:"Song Myung",serif;font-weight:900;font-size:30px;color:white;text-shadow:0 3px 0 #402018,0 0 8px #000;animation:duel-float .9s ease-out forwards}.duel-float.player{left:28%}.duel-float.enemy{right:28%}.duel-float.heal{color:#aaf0b0}.duel-float.dodge-text{color:#e9f4ff;font-size:23px}.duel-float.guard-text{color:#c9e4ff;font-size:23px}.duel-float.ultimate{font-size:42px;color:#ffe68d}
.duel-slash{position:absolute;top:43%;width:150px;height:14px;background:linear-gradient(90deg,transparent,#fff7cf 35%,white 55%,transparent);filter:drop-shadow(0 0 7px #ffd36a);transform:rotate(-28deg);animation:duel-slash .38s ease-out forwards}.duel-slash.enemy{right:22%}.duel-slash.player{left:22%}.duel-slash.ultimate{width:240px;height:22px;filter:drop-shadow(0 0 14px #ffb52d)}
.duel-impact{position:absolute;top:43%;width:20px;height:20px}.duel-impact.player{left:28%}.duel-impact.enemy{right:28%}.duel-impact i{position:absolute;left:50%;top:50%;width:5px;height:70px;background:linear-gradient(#fff4bf,transparent);transform-origin:50% 0}.duel-impact i:nth-child(2){transform:rotate(90deg)}.duel-impact i:nth-child(3){transform:rotate(180deg)}.duel-impact i:nth-child(4){transform:rotate(270deg)}
#duel-cutin{position:absolute;z-index:30;left:0;right:0;top:32%;height:130px;background:linear-gradient(90deg,rgba(12,10,8,.05),rgba(96,24,17,.96) 15%,rgba(39,20,15,.97) 75%,rgba(12,10,8,.05));border-top:2px solid #e7bd65;border-bottom:2px solid #e7bd65;display:flex;align-items:center;justify-content:center;gap:26px;animation:cutin-in .7s ease both}#duel-cutin.hidden{display:none}.cutin-glyph{font-family:"Song Myung",serif;font-size:78px;font-weight:900;color:#f1d591;text-shadow:4px 4px #56261d}.cutin-copy{display:flex;flex-direction:column;color:#fff2ce}.cutin-copy small{font-size:15px;letter-spacing:.2em}.cutin-copy strong{font-family:"Song Myung",serif;font-size:38px;letter-spacing:.08em}
/* 대결 시작시 뜨는 "관우 VS 화웅" 문구는 체력바 두 개 사이(상단)에 두고,
   전투 종료시의 승패 배너(.duel-result)만 화면 중앙으로 되돌린다. */
#duel-banner{position:absolute;z-index:25;left:50%;top:60px;transform:translate(-50%,0);font-family:"Song Myung",serif;font-size:clamp(20px,4vw,38px);font-weight:900;color:#fff1c7;text-shadow:0 4px 0 #5b281f,0 0 14px #000;white-space:nowrap;animation:banner-in 1.05s ease both}#duel-banner.hidden{display:none}
.duel-actor.attack.player{animation:attack-p .43s ease}.duel-actor.attack.enemy{animation:attack-e .43s ease}.duel-actor.hit{animation:hit-jolt .38s ease}.duel-actor.dodge.player{animation:dodge-p .52s ease}.duel-actor.dodge.enemy{animation:dodge-e .52s ease}.duel-actor.guard .duel-body{filter:drop-shadow(0 0 9px #9ed8ff)}.duel-actor.special .duel-body{filter:drop-shadow(0 0 12px #a8e6ad)}.duel-actor.gauge-ready .duel-body{filter:drop-shadow(0 0 7px #f2cf69)}.duel-actor.charge .duel-body{animation:charge .7s ease}
.duel-shake{animation:screen-shake .32s linear}.duel-shake-heavy{animation:screen-shake-heavy .58s linear}.ultimate-dim #duel-arena:after{content:"";position:absolute;inset:0;background:rgba(18,12,9,.52);z-index:21;pointer-events:none}
@keyframes duel-cloud{to{transform:translateX(120vw)}}@keyframes duel-float{0%{opacity:0;transform:translateY(20px) scale(.7)}25%{opacity:1;transform:translateY(-10px) scale(1.2)}100%{opacity:0;transform:translateY(-70px) scale(.9)}}
@keyframes duel-slash{0%{opacity:0;transform:rotate(-28deg) scaleX(.15)}35%{opacity:1}100%{opacity:0;transform:rotate(-28deg) scaleX(1.35)}}
@keyframes attack-p{0%{transform:translateX(0)}45%{transform:translateX(18vw) rotate(-3deg)}100%{transform:translateX(0)}}@keyframes attack-e{0%{transform:scaleX(-1) translateX(0)}45%{transform:scaleX(-1) translateX(18vw) rotate(-3deg)}100%{transform:scaleX(-1) translateX(0)}}
@keyframes hit-jolt{0%,100%{filter:none}25%{filter:brightness(2);margin-left:-10px}50%{margin-left:9px}75%{margin-left:-5px}}@keyframes dodge-p{50%{transform:translateX(-75px)}}@keyframes dodge-e{50%{transform:scaleX(-1) translateX(-75px)}}
@keyframes charge{0%,100%{transform:scale(1)}45%{transform:scale(1.1);filter:brightness(1.8)}}@keyframes screen-shake{0%,100%{transform:none}25%{transform:translate(-5px,2px)}50%{transform:translate(5px,-2px)}75%{transform:translate(-3px,-1px)}}@keyframes screen-shake-heavy{0%,100%{transform:none}15%{transform:translate(-9px,4px)}30%{transform:translate(8px,-5px)}45%{transform:translate(-7px,-2px)}60%{transform:translate(6px,4px)}80%{transform:translate(-3px,2px)}}
@keyframes cutin-in{0%{opacity:0;transform:translateX(-100%)}20%,75%{opacity:1;transform:none}100%{opacity:0;transform:translateX(20%)}}@keyframes banner-in{0%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}20%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.92)}}
@media(max-width:680px){#battle-screen{padding:10px 10px 12px}.duel-actor{width:130px;height:175px;bottom:29%;transform:scale(.82);transform-origin:bottom center}.duel-actor.player{left:4%}.duel-actor.enemy{right:4%;transform:scaleX(-1) scale(.82)}#battle-actions{grid-template-columns:1fr 1fr}.battle-log{max-height:86px;font-size:11px}.battle-side{width:58vw}.duel-float.player{left:22%}.duel-float.enemy{right:22%}.cutin-glyph{font-size:56px}.cutin-copy strong{font-size:28px}}
@media(prefers-reduced-motion:reduce){#duel-arena *,#battle-screen{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* ===== Duel Visuals v2 — 승인 시안 기반 고해상도 일기토 ===== */
#battle-screen{
  padding:18px 22px 16px;
  background:#17110b;
}
#duel-arena{
  background-image:linear-gradient(rgba(20,12,6,.04),rgba(20,12,6,.16)),url("../assets/battle/duel_bg_hulao_v1.jpg");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.duel-sky,.duel-mountains,.duel-ground,.duel-versus-mark{display:none}
/* 두 캐릭터 다 같은 높이(vh) + 그 그림 고유의 가로세로비(aspect-ratio)로
   너비를 자동 계산한다 - 그림마다 원본 캔버스 여백 비율이 달라서(예:
   화웅은 관우보다 옆으로 넓은 캔버스라 예전엔 폭 기준으로 눌려 작아
   보였다) 실제 그림 비율을 그대로 알려줘야 둘 다 화면에 꽉 차는
   크기로 나온다. 창 가로세로 비율이 바뀌어도 높이 하나로만 크기가
   정해지니 두 캐릭터 크기가 항상 서로 같게 유지된다. */
.duel-actor{
  height:58vh;
  width:auto;
  bottom:15%;
  transform:none;
  transform-origin:50% 88%;
}
.duel-actor.player{left:4%}
.duel-actor.enemy{right:4%;transform:none}
.duel-actor.enemy.generic{right:9%}
.duel-actor.raster-art .duel-body{
  left:0;
  bottom:0;
  width:100%;
  height:100%;
  background-position:center bottom;
  background-repeat:no-repeat;
  background-size:contain;
  transform:none;
  filter:drop-shadow(0 9px 5px rgba(0,0,0,.55));
}
.duel-actor.raster-art.player .duel-body{transform:none}
.duel-actor.enemy .duel-glyph,.duel-actor.enemy .duel-actor-label{transform:none}
.duel-actor[data-id="gwanwoo"]{aspect-ratio:1312/1199}
.duel-actor[data-id="hwaung"],.duel-actor[data-id="yeopo"]{aspect-ratio:1536/1024}
/* 장비 그림은 캔버스 안에서 인물이 다른 캐릭터들보다 여백 없이 꽉 차게
   그려져 있어, 같은 기준 높이(58vh)를 쓰면 실제 실루엣이 상대보다
   눈에 띄게 커 보인다(실측 결과 약 23% 더 큼). 체급을 맞추려고 이
   캐릭터만 높이를 줄인다. */
/* 이 그림은 발밑에 여백이 거의 없어(다른 캐릭터는 2~21%), 공통 bottom:15%
   기준을 그대로 쓰면 다른 캐릭터보다 눈에 띄게 아래(발이 더 낮게)에 서
   보인다. 이미지에 여백을 추가하는 대신(그러면 47vh 안에서 실루엣이
   작아져 방금 맞춘 크기가 다시 틀어진다) bottom 값만 올려 발 위치를
   맞춘다. */
.duel-actor[data-id="jangbi"]{aspect-ratio:1355/959;height:47vh;bottom:27%}
/* 일반장수 그림은 세로로 좁고 긴 캔버스(2:3)라 다른 캐릭터들과 같은 높이로
   두면 실루엣이 좁아 보여 상대적으로 왜소해 보인다. contain으로 잘리는 부분
   없이 다 보여주면서도(잘림 방지) 체급을 맞추기 위해 박스 자체를 더 키운다 -
   bottom 위치는 그대로라 발밑은 고정된 채 위로만 커진다. */
.duel-actor.generic{aspect-ratio:2/3;height:72vh}
.duel-shadow{left:20%;bottom:3%;width:60%;height:7%;opacity:.56}
.duel-actor-label{display:none}
.duel-actor.enemy .duel-actor-label{left:50%;right:auto;transform:translateX(-50%)}

/* 승인 시안과 같은 검은 목재/금속 테두리 HUD */
.battle-side{
  position:absolute;
  z-index:24;
  width:min(310px,40vw);
  padding:12px 14px;
  border:2px solid #a77931;
  border-radius:8px!important;
  background:rgba(13,11,8,.91);
  box-shadow:inset 0 0 0 2px rgba(62,42,20,.9),0 7px 20px rgba(0,0,0,.38);
  backdrop-filter:none;
}
/* 관우(플레이어)는 화면 왼쪽에, 적장수는 오른쪽에 서므로 체력바도 같은
   쪽에 둔다 - 예전엔 이게 서로 뒤바뀌어 있어서 관우 머리 위에 적
   체력바가 뜨는 것처럼 보였다. */
#battle-side-e{right:18px;top:18px}
#battle-side-p{left:18px;top:18px}
.battle-portrait{border-color:#c99a44;background:rgba(77,49,23,.75)}
.battle-name{color:#fff2ce;font-size:18px}
.battle-side .bar{height:11px;border:1px solid #d0a951;border-radius:2px;padding:1px}
.battle-side .bar.hp .bar-fill{background:linear-gradient(90deg,#168b2f,#75db43)}
.battle-side .bar.gauge .bar-fill{background:linear-gradient(90deg,#1666a4,#4db9ea)}
.battle-log{
  position:absolute;
  z-index:23;
  left:50%;
  bottom:84px;
  transform:translateX(-50%);
  width:min(480px,48vw);
  max-height:76px;
  padding:7px 12px;
  border-color:rgba(201,154,68,.75);
  background:rgba(16,13,9,.78);
  font-size:11.5px;
}
#battle-actions{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  width:min(820px,96vw);
  border:2px solid #89652d;
  border-radius:8px;
  background:rgba(14,12,9,.93);
}
#battle-actions button{font-size:15px;border:2px solid #9f7130;background:linear-gradient(#704521,#3e2515);color:#fff0c8}
#battle-actions button:hover,#battle-actions button:focus{background:linear-gradient(#92602d,#57351b)}

/* PNG 베기 효과: 일반 공격은 짧고, 필살기만 청룡 효과를 크게 사용 */
.duel-slash{
  top:32%;
  width:min(330px,34vw);
  height:min(230px,34vh);
  background:url("../assets/battle/fx_slash_arc_v1.png") center/contain no-repeat;
  filter:none;
  transform:none;
  animation:duel-slash-image .43s ease-out forwards;
}
.duel-slash.player{left:36%}.duel-slash.enemy{right:36%;transform:scaleX(-1)}
.duel-slash.ultimate{
  top:23%;
  width:min(480px,49vw);
  height:min(350px,49vh);
  background-image:url("../assets/battle/fx_ultimate_dragon_v1.png");
  animation-duration:.68s;
}
.duel-slash.ultimate.enemy{transform:scaleX(-1);filter:hue-rotate(115deg) saturate(1.15)}
.duel-slash.ultimate.player:not([data-actor="gwanwoo"]){filter:hue-rotate(115deg) saturate(1.1)}
@keyframes duel-slash-image{
  0%{opacity:0;scale:.35}
  30%{opacity:1;scale:1}
  100%{opacity:0;scale:1.12}
}
@keyframes attack-p{0%,100%{transform:translateX(0)}45%{transform:translateX(15vw) rotate(-2deg)}}
@keyframes attack-e{0%,100%{transform:translateX(0)}45%{transform:translateX(-15vw) rotate(2deg)}}
@keyframes dodge-p{50%{transform:translateX(-65px)}}
@keyframes dodge-e{50%{transform:translateX(65px)}}

/* 이 미디어쿼리는 세로로 든 모바일(위 90도 회전 프리젠테이션) 기준이라, 여기서
   말하는 시각적 "너비"는 회전 때문에 실제로는 vh, "높이"는 vw로 계산해야 한다
   (body{width:100vh;height:100vw;rotate(90deg)} 참고). 지피티가 준 원래 코드는
   이걸 모르고 일반 vw/vh로 짜여있어 적장수가 화면 밖으로 밀려나거나 안 보였다. */
@media(max-width:680px){
  #battle-screen{padding:8px}
  .duel-actor{height:46vw;width:auto;bottom:20%;transform:none}
  .duel-actor.player{left:-1%}.duel-actor.enemy{right:-1%;transform:none}
  .duel-actor.generic{height:57vw}
  .duel-actor.enemy.generic{right:4%}
  /* 장비는 캔버스가 세로(vh)가 아니라 가로로 넓은 비율(1355/959)이라, 회전
     프리젠테이션에서는 세로 기준 height 값이 그대로 가로세로비만큼 곱해져
     시각적 높이가 되므로, 데스크톱용 47vh를 그대로 쓰면 실제 화면에서
     화면 밖으로 넘칠 만큼 커진다. 우금(generic)과 맞추면 반대로 너무
     작아지고, 49vw는 관우(기본 46vw, 세로로 좁은 그림이라 실제로는 더
     작게 나옴)보다도 살짝 커서 관우 체급에 맞춰 다시 소폭 낮춘다. */
  .duel-actor[data-id="jangbi"]{height:36vw}
  .battle-side{width:24vh;padding:4px 6px}
  #battle-side-e{right:6px;top:6px}#battle-side-p{left:6px;top:6px}
  .battle-name{left:30px;top:2px;font-size:10px}.battle-portrait{width:22px;height:22px;font-size:12px}
  .battle-side .bar{height:6px;margin-left:30px;width:calc(100% - 30px)}
  .battle-side .bar-text{font-size:9px;margin-left:30px;width:calc(100% - 30px)}
  .battle-log{left:6px;bottom:112px;transform:none;width:46vh;max-height:62px;font-size:10px}
  #battle-actions{bottom:6px;grid-template-columns:1fr 1fr;width:calc(100vh - 12px);gap:5px;padding:5px}
  #battle-actions button{font-size:12px;padding:8px 3px}
  .duel-slash.player{left:28%}.duel-slash.enemy{right:28%}
}


/* BattleVFX v1.1 — battleEnd hold 기반 승패 마무리 */
#duel-banner.duel-result{top:47%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:5px;animation:duel-result-in .45s ease both}
#duel-banner.duel-result .duel-result-main{font-size:clamp(30px,6vw,58px);letter-spacing:.08em}
#duel-banner.duel-result small{font-size:clamp(12px,2vw,17px);letter-spacing:.28em;color:#f2d793;text-shadow:0 2px 5px #000}
.duel-actor.duel-defeated{animation:duel-defeat .72s ease forwards!important;filter:grayscale(.35) brightness(.65)}
.duel-actor.duel-victor .duel-body{animation:duel-victor .85s ease both;filter:drop-shadow(0 0 13px rgba(255,220,130,.75))}
.duel-victory-quote{position:absolute;z-index:35;left:50%;top:67%;transform:translateX(-50%);padding:8px 18px;border-top:1px solid rgba(242,211,145,.8);border-bottom:1px solid rgba(242,211,145,.8);background:rgba(25,19,14,.82);font-family:"Song Myung",serif;font-size:clamp(15px,3vw,23px);font-weight:700;color:#fff0c8;text-shadow:0 2px 4px #000;white-space:nowrap;animation:duel-quote .9s ease both}
@keyframes duel-result-in{0%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}65%{opacity:1;transform:translate(-50%,-50%) scale(.96)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes duel-defeat{0%{opacity:1}35%{transform:translateY(8px) rotate(5deg);opacity:1}100%{transform:translateY(48px) rotate(11deg);opacity:.18}}
@keyframes duel-victor{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-8px) scale(1.05)}}
@keyframes duel-quote{0%{opacity:0;transform:translate(-50%,14px)}22%,78%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-8px)}}

/* Tak Market Vertical Slice v1 — 큰 월드맵을 카메라로 보는 탐험 화면 */
#game-canvas{ background:#8fa374; }
#map-hint{max-width:800px;padding:0 12px;}

/* ===== Field Art Pack v1 ===== */
#screen-explore{background:#c7b896;}
#game-canvas{ background:#87956f; }

/* ===== 오버레이 HUD 레이아웃 반응형 조정 =====
   창 너비가 아니라 mapview.js가 실제로 계산한 지도 폭(#explore-viewport의 실제
   렌더링 크기)을 기준으로 컴팩트 배치 여부를 정한다 - 창은 넓어도 세로 공간이
   부족해 지도가 좁게 그려지는 경우(가로로 든 폰 등)가 있어, 창 너비만 보는 media
   query로는 그런 경우를 놓쳐 컴팩트 배치를 안 하고 겹쳐버리는 문제가 있었다. */
/* 캔버스 세로폭이 크게 줄어들어 데스크톱 패널을 다 얹으면 겹침 →
   보조 패널(미니맵/임무 트래커)은 숨기고 필수 요소만 배치하되, 글자는 손에
   들고 보기 충분한 크기를 유지한다 (너무 작게 줄이면 안 보인다는 피드백 반영). */
#explore-viewport.compact #hud-top{
  padding:5px 8px; gap:6px; font-size:10.5px;
  flex-wrap:nowrap;
}
#explore-viewport.compact #hud-left{ gap:6px; overflow-x:auto; flex:1 1 auto; -webkit-overflow-scrolling:touch; }
#explore-viewport.compact #hud-left span{ white-space:nowrap; }
#explore-viewport.compact #hud-actions{ flex:none; gap:5px; }
#explore-viewport.compact #hud-actions button{ font-size:10.5px; padding:5px 8px; }

#explore-viewport.compact #location-banner{ top:38px; left:6px; padding:5px 8px; max-width:56%; }
#explore-viewport.compact #location-name{ font-size:11.5px; margin-bottom:1px; }
#explore-viewport.compact #location-task{ font-size:10px; }

/* 모바일(컴팩트)에서도 미니맵은 작게라도 계속 보여준다 - 화면이 좁아 한눈에
   지도가 안 보이는 모바일일수록 오히려 미니맵이 더 필요하다는 피드백 반영.
   위치 배너(좌측, 최대 56% 폭)와 겹치지 않게 우측에 작게 배치한다. */
#explore-viewport.compact #minimap-panel{ top:38px; right:6px; padding:3px 4px; }
#explore-viewport.compact #minimap-title{ font-size:8px; margin-bottom:1px; }
#explore-viewport.compact #minimap-canvas{ width:56px; height:40px; }
#explore-viewport.compact #hud-army{ top:98px; right:6px; padding:3px 7px; font-size:9.5px; max-width:130px; }

#explore-viewport.compact #player-panel,
#explore-viewport.player-compact #player-panel{
  bottom:6px; left:6px; padding:4px 6px; gap:5px; align-items:center;
}
#explore-viewport.compact #player-portrait,
#explore-viewport.player-compact #player-portrait{ width:32px; height:32px; border-radius:6px; }
#explore-viewport.compact #player-info,
#explore-viewport.player-compact #player-info{ display:flex; flex-direction:column; }
#explore-viewport.compact #player-name,
#explore-viewport.player-compact #player-name{ font-size:11px; margin-bottom:0; }
#explore-viewport.compact .stat-row,
#explore-viewport.player-compact .stat-row{ display:none; }
#explore-viewport.compact .hp-row,
#explore-viewport.player-compact .hp-row{ display:flex; margin-bottom:0; padding-bottom:0; border-bottom:none; }
#explore-viewport.compact .hp-row .stat-bar,
#explore-viewport.player-compact .hp-row .stat-bar{ width:44px; }
#explore-viewport.compact .hp-row .stat-val,
#explore-viewport.player-compact .hp-row .stat-val{ width:38px; font-size:9.5px; }

#explore-viewport.compact #bottom-menu{
  /* 세로로 든 상태(회전 프리젠테이션)에서는 화면 중앙이 아니라 터치패드 쪽에
     가깝게 배치해야 실제로 보이는 화면에서 인물 초상화 패널과 겹치지 않는다. */
  left:auto; right:140px; bottom:8px; gap:5px; transform:scale(.92);
  transform-origin:bottom right;
}
#explore-viewport.compact #bottom-menu button{ padding:6px 8px; }

#explore-viewport.compact #touchpad{
  bottom:8px; right:8px;
  grid-template-columns:42px 42px 42px;
  grid-template-rows:38px 38px 38px;
  gap:4px;
}
#explore-viewport.compact .tp-btn{ font-size:15px; }
#explore-viewport.compact .tp-action{ font-size:11px; }