/* =========================================================
   테마 — 색·질감·연출 (main.css 덮어쓰기) — 소유: art-director
   먹(墨)·금(金)·짙은 갈색·종이 팔레트로 시대극 품격을 입힌다.
   레이아웃은 main.css를 그대로 따르고, 여기서는 표면·연출만 손댄다.
   ========================================================= */

:root {
  /* 더 깊고 고급스러운 먹·금 팔레트로 재정의 */
  --먹: #17140f;
  --먹연: #241f17;
  --금: #c9a24a;
  --금밝: #f0d489;
  --갈: #4a3520;
  --종이: #ece0c2;
  --종이진: #d9c89e;
  --선: #8a7444;
  --글: #221a10;
  --글연: #6b5a3c;
  --위험: #a5342a;

  --art-ink-shadow: 0 8px 26px rgba(0,0,0,0.55);
  --art-serif: "Nanum Myeongjo", "Batang", "궁서", serif;

  /* [V2 §5-H-2·5] 전황 우세 3색 — 먹·금 팔레트에 통일한 정식 정의.
     (main.css 의 마커·툴팁 규칙이 var(--wf-adv-*) 로 이 값을 받아 쓴다.)
     우세=금 / 백중=호박 / 열세=인주적 — 금테 지형 위에서도 판도가 색으로 읽히게. */
  --wf-adv-win:  #d9b24a;   /* 금 — 아군 우세 */
  --wf-adv-even: #cf9b3a;   /* 호박 — 백중(우세 금과 열세 적 사이 중간톤) */
  --wf-adv-lose: #b2402f;   /* 인주적 — 아군 열세 */
  --인주: #a5342a;          /* 붉은 인주(결판 도장 테두리) */
}

/* ── 종이 결 바탕(전면) — data URI 프랙탈 노이즈, 외부 리소스 없음 ── */
body {
  background:
    radial-gradient(ellipse at 20% -10%, rgba(201,162,74,0.10), transparent 45%),
    radial-gradient(ellipse at 100% 110%, rgba(0,0,0,0.4), transparent 55%),
    var(--먹);
  background-attachment: fixed;
}

#app { background: var(--먹); }

/* =========================================================
   상단바
   ========================================================= */
#topbar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 40%),
    linear-gradient(180deg, var(--먹연), var(--먹) 85%);
  border-bottom: 2px solid var(--금);
  box-shadow: 0 3px 14px rgba(0,0,0,0.5);
}
.top-date { font-family: var(--art-serif); color: var(--금밝); text-shadow: 0 0 10px rgba(240,212,137,0.25); }
.top-date b { color: #fff6dd; }
.top-stat { border-left: 1px solid rgba(138,116,68,0.55); }
.ts-label { letter-spacing: 0.5px; }
.top-stat.danger .ts-val { color: #ff8f6a; text-shadow: 0 0 8px rgba(255,80,50,0.5); }

.top-btns button {
  background: linear-gradient(180deg, var(--갈), #3a2a16);
  border: 1px solid var(--금);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.top-btns button:hover { background: linear-gradient(180deg, var(--금밝), var(--금)); color: var(--먹); }
#btn-mute { font-size: 15px; }

/* =========================================================
   좌: 장수부 — 종이 카드 느낌
   ========================================================= */
#roster {
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.02) 0 2px, transparent 2px 4px),
    var(--종이진);
  border-right: 2px solid var(--갈);
  box-shadow: inset -8px 0 16px -12px rgba(0,0,0,0.5);
}
.panel-title {
  font-family: var(--art-serif); font-weight: 700; letter-spacing: 1px;
  color: var(--갈); border-bottom: 2px solid var(--선);
}
.roster-row {
  background: linear-gradient(180deg, #f6ecce, var(--종이));
  border: 1px solid rgba(138,116,68,0.4);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.roster-row:hover { transform: translateX(2px); border-color: var(--금); box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.roster-row.selected {
  border-color: var(--금); background: linear-gradient(180deg, #fff3d2, #f7e4ac);
  box-shadow: 0 0 0 1px var(--금) inset, 0 0 10px rgba(201,162,74,0.35);
}
.roster-row.done { opacity: 0.5; filter: grayscale(0.3); }
.roster-row.wild { background: linear-gradient(180deg, #e8dfc2, #dccfa6); border-style: dashed; }
.roster-check { text-shadow: 0 0 6px rgba(58,125,58,0.5); }
.loyalty-warn { text-shadow: 0 0 6px rgba(165,52,42,0.6); animation: art-pulse 1.6s ease-in-out infinite; }

.portrait-svg { border-radius: 6px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4)); flex: 0 0 auto; }
.portrait-fallback { box-shadow: 0 2px 3px rgba(0,0,0,0.4); }
/* 그려진 초상 이미지(assets/portraits) — SVG 폴백과 동일한 규격 위에 살짝 더 진한 그림자 */
.portrait-img { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55)); }

/* =========================================================
   중앙: 지도 — 지형감 있는 액자
   ========================================================= */
#map {
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%),
    var(--먹연);
  box-shadow: inset 0 0 60px rgba(0,0,0,0.6);
}
#map-svg { filter: drop-shadow(0 4px 14px rgba(0,0,0,0.45)); border-radius: 4px; }

/* art.js가 삽입하는 그림 지형·안개 패치·할로는 클릭을 가로채지 않도록 */
.art-terrain-photo, .art-hanriver-veil, .city-halo, .army-halo, .art-roads { pointer-events: none; }
.art-terrain-photo image { image-rendering: auto; }
.art-paper-tint { mix-blend-mode: multiply; }

/* map.js가 그리는 원래 직선 점선 간선은 숨기고, art.js가 그린 구불구불한
   황토 가도(.art-roads)로 대체한다(파일은 건드리지 않고 속성값을 겨냥). */
#map-svg line[stroke="#9a8659"] { display: none; }
/* 가도(art.js UI.art.roadsLayer) — 회화 지형 위에서 벡터선처럼 따로 놀지 않도록
   각 획에 붓선 왜곡 필터(SVG filter 속성, art-road-rough)를 직접 건다(부모 그룹에
   filter를 걸면 격리가 생겨 블렌드가 지형이 아니라 투명 배경과 섞여버리므로 각
   path에 개별 적용했다). 외곽(어두운 흙빛)만 곱하기로 지형에 스미게 하고, 중심
   밝은선은 블렌드 없이 그대로 올려 "길이 어디로 났는지" 즉시 읽히게 한다
   (1차 합성 때 중심선까지 소프트라이트로 죽여 대비가 낮다는 지적을 반영). */
.art-road-base { mix-blend-mode: multiply; }

/* 나루터(art.js UI.art._crossingArt) — 강을 만난 가도의 도하 지점.
   선착장은 벡터 판자만 쓴다(이미지 자산 pier.png는 잔디+물 배경을 업고 있어
   실제 지도 색과 어긋나는 문제로 보류 — 후속 과제). 저채도로 다듬어 과하게
   튀지 않게 했다. */
.river-dock { fill: #5c4a30; stroke: #2a1e0e; stroke-width: 0.7; opacity: 0.78; }
.river-ripple { fill: none; stroke: #eaf6f0; stroke-width: 0.8; opacity: 0.32; }
.river-boat { animation-duration: 22s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.river-boat path, .river-boat rect, .river-boat-img { filter: drop-shadow(0 0.6px 1px rgba(0,0,0,0.4)); }
@media (prefers-reduced-motion: reduce) { .river-boat { animation: none; } }

/* 배 이미지 자산(assets/props/boat*_cut.png) — 물 배경을 걷어낸 RGBA 투명
   컷아웃이라 마스크·전이판 없이 그대로 얹는다. 부드러운 보간과, 배 밑에 깔리는
   작은 그림자 타원(진한 물색, 옅은 불투명도)만 더한다 — 접지감은 주되 그
   자체가 사각/원형 경계로 도드라지지 않도록 아주 옅게. */
.river-boat-img { image-rendering: auto; }
.river-boat-shadow { fill: #0d2b2e; opacity: 0.2; }

/* 성곽·기치 뒤 그림자 — 그림 지형 위에서도 노드가 또렷이 읽히도록 */
.city-halo { fill: rgba(8,6,3,0.55); }
.army-halo { fill: rgba(6,5,3,0.5); }

/* map.js가 그리는 단색 배경/북방 산맥은 그림이 주인공이 되도록 옅게 눌러
   재도색한다(파일은 건드리지 않고 fill 속성값을 그대로 겨냥). */
#map-svg path[fill="#b9a878"] { opacity: 0.1; }
/* 북방 산맥 뒤에 오는 map.js의 안내 문구는 그림 위에서도 읽히도록 그림자 보강 */
#map-svg path[fill="#b9a878"] + text {
  paint-order: stroke; stroke: rgba(0,0,0,0.65); stroke-width: 3px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* 도시 성곽: data-city 속성 값으로 규모를 반영(강릉=수도 大, 주요 도시 中, 변방 小) */
#map-svg [data-city] { transform-box: fill-box; transform-origin: center; transition: transform 0.25s; }
#map-svg [data-city]:hover { transform: scale(1.06); }
#map-svg [data-city="강릉"] { transform: scale(1.22); }
#map-svg [data-city="강릉"]:hover { transform: scale(1.28); }
#map-svg [data-city="강하"],
#map-svg [data-city="공안"],
#map-svg [data-city="장사"] { transform: scale(1.04); }
#map-svg [data-city="강하"]:hover,
#map-svg [data-city="공안"]:hover,
#map-svg [data-city="장사"]:hover { transform: scale(1.12); }
#map-svg [data-city="무릉"],
#map-svg [data-city="영릉"],
#map-svg [data-city="양양"] { transform: scale(0.92); }
#map-svg [data-city="무릉"]:hover,
#map-svg [data-city="영릉"]:hover,
#map-svg [data-city="양양"]:hover { transform: scale(1.0); }

/* 성곽·기치 소유색: 아군=금, 조조=검정, 손권=적색 계열로 재도색
   (map.js가 그리는 fill 속성값을 그대로 겨냥 — 파일은 건드리지 않는다) */
#map-svg [fill="#c99a3a"] { fill: #c9a24a; }
#map-svg [fill="#8c2f23"] { fill: #17140f; }
#map-svg [fill="#2f6b56"] { fill: #7a2233; }
#map-svg [stroke="#2a1e0e"] { stroke: #100e0a; }

#map-svg [data-city] text { font-family: var(--art-serif); paint-order: stroke; stroke: rgba(255,248,224,0.55); stroke-width: 2px; }

/* 도시별 정밀 성곽 일러스트(art.js UI.art.paintCityIcons) — 그림 지형 위에서
   또렷이 읽히도록 그림자를 얹는다. 선택 시 금테 하이라이트는 map.js의 선택
   원(circle)이 그대로 담당하므로 여기서는 손대지 않는다.
   이미지 스프라이트(.city-icon-sprite)는 자체 접지 그림자(city-ground-shadow)를
   이미 두르고 있어 CSS drop-shadow까지 겹치면 이중 그림자로 붕 떠 보이므로 뺀다 —
   SVG 폴백 아이콘(.city-icon-svg)에만 기존 그림자를 유지한다. */
#map-svg .city-icon-svg { filter: drop-shadow(0 2px 2.5px rgba(0,0,0,0.55)); }
#map-svg .city-icon-sprite { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.3)); }

/* 성곽 이미지 스프라이트(assets/cities/*.png) — 회화풍이라 다운스케일 시 부드러운
   보간(auto)이 픽셀아트보다 자연스럽다. */
.city-sprite-img { image-rendering: auto; }
/* 잔디색 전이판 — 페더 마스크를 통과한 뒤에도 남는 흰 기가 raw 지형이 아니라
   이 초록 위에서 옅어지도록 하는 최종 방어선(마스크 인셋을 얼마나 좁혀도 완전히
   못 지우는 자산도 있어 추가). 크게 블러 처리해 그 자체 경계도 보이지 않는다. */
/* mix-blend-mode는 안 쓴다 — 부모(.city-icon-sprite)에 CSS filter(drop-shadow)가
   걸려 있어 블렌드를 걸면 격리가 생겨 지형이 아니라 그룹 내부와만 섞인다(가도와
   같은 함정). 대신 불투명도만으로 옅게 얹는다 — 블러된 초록 타원이라 그것으로도
   충분히 지형에 녹아든다. */
.city-grass-blend { filter: blur(7px); opacity: 0.62; }
.city-ground-shadow { filter: blur(4px); }

/* 이름패(art.js UI.art.paintNamePlates) — 어두운 반투명 라운드 패 위에
   밝은 글씨. map.js가 그린 도시명 텍스트의 어두운 먹색 fill을 밝게 재도색해
   패와 대비되게 한다(먹색 스트로크 아웃라인은 더 이상 필요치 않아 뺀다). */
.city-nameplate { fill: rgba(10,8,4,0.68); stroke: rgba(201,162,74,0.5); stroke-width: 0.8; }
#map-svg [data-city] text.city-name { fill: #fff3d2 !important; stroke: rgba(0,0,0,0.5); stroke-width: 1.2px; }

/* 부대 라벨 패(art.js UI.art.paintArmyPlates) — map.js가 소속색으로 그리는
   병력 수·진형 약호 텍스트는 조조(먹색 재도색) 등에서 판이 어두우면 묻히므로
   패 위에서는 밝은 글씨로 통일한다(기치 문자 .army-glyph는 이미 밝아 제외). */
.army-plate { fill: rgba(8,6,3,0.6); }
#map-svg [data-army] text:not(.army-glyph) {
  fill: #fff3d2 !important; paint-order: stroke; stroke: rgba(0,0,0,0.55); stroke-width: 1.1px;
}

/* 세력 깃발(art.js UI.art._flagGroup) — 깃대는 고정, 기치만 펄럭인다.
   transform만 쓰는 CSS 애니메이션이라 GPU 합성으로 가볍다(60fps 유지). */
.city-flag-flap { animation: art-flag-flutter 2.6s ease-in-out infinite; transform-box: fill-box; }
.city-flag-flap path { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.5)); }
@keyframes art-flag-flutter {
  0%, 100% { transform: skewY(-5deg) scaleX(1); }
  50% { transform: skewY(4deg) scaleX(0.97); }
}
@media (prefers-reduced-motion: reduce) {
  .city-flag-flap { animation: none; }
}

/* 점령·전투 중 상태(연기) 훅 — 기본은 숨김. 나중에 해당 [data-city] 그룹에
   클래스 "under-siege"를 추가하면 연기가 서서히 나타난다(연출 로직은 미구현). */
#map-svg .city-siege-fx { opacity: 0; pointer-events: none; transition: opacity 0.6s ease-out; }
#map-svg [data-city].under-siege .city-siege-fx { opacity: 1; }

/* 부대 기치 */
#map-svg [data-army] path { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }
#map-svg .army-glyph {
  font-size: 7px; font-weight: 700; fill: #fff8e6; font-family: var(--art-serif);
  paint-order: stroke; stroke: rgba(0,0,0,0.6); stroke-width: 1px;
  pointer-events: none;
}
#map-svg [data-army]:hover { filter: brightness(1.15); }

.map-legend {
  background: rgba(23,20,15,0.82); border: 1px solid var(--금); backdrop-filter: blur(1px);
}

#btn-advance {
  background: linear-gradient(180deg, var(--금밝), var(--금) 60%, #a4813a);
  border: 2px solid #2e2010;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.5);
  font-family: var(--art-serif);
}
#btn-advance:hover { filter: brightness(1.06); box-shadow: 0 5px 18px rgba(201,162,74,0.4), inset 0 1px 0 rgba(255,255,255,0.5); }
#btn-advance:active { transform: translateY(1px); }

/* =========================================================
   우: 컨텍스트 패널
   ========================================================= */
#context-panel {
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.02) 0 2px, transparent 2px 4px),
    var(--종이진);
  border-left: 2px solid var(--갈);
  box-shadow: inset 8px 0 16px -12px rgba(0,0,0,0.5);
}
.ctx-title { font-family: var(--art-serif); }
.ctx-owner.owner-아군 { background: var(--금); }
.ctx-owner.owner-조조 { background: #17140f; }
.ctx-owner.owner-손권 { background: #7a2233; }
.ctx-subhead { color: var(--갈); }
.stat-bar { background: #b7a374; box-shadow: inset 0 1px 3px rgba(0,0,0,0.35); }
.stat-fill { background: linear-gradient(90deg, var(--갈), var(--금) 70%, var(--금밝)); box-shadow: 0 0 6px rgba(201,162,74,0.5); }

.cmd-block {
  background: linear-gradient(180deg, #f6ecce, var(--종이));
  border: 1px solid var(--선); box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.cmd-btn, .target-btn {
  background: linear-gradient(180deg, #efe1bc, var(--종이진));
  border: 1px solid var(--선); transition: transform 0.1s, background 0.15s;
}
.cmd-btn:hover, .target-btn:hover { background: linear-gradient(180deg, var(--금밝), var(--금)); transform: translateY(-1px); }
.cmd-btn:active, .target-btn:active { transform: translateY(0); }

/* =========================================================
   하단 로그
   ========================================================= */
#log { background: linear-gradient(180deg, var(--먹연), var(--먹)); border-top: 2px solid var(--금); }
.log-title { font-family: var(--art-serif); }
.log-row { border-bottom: 1px dotted rgba(138,116,68,0.35); }
.log-row:hover { background: rgba(201,162,74,0.06); }
.log-tag { box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.logtag-조조 { background: #17140f; }
.logtag-손권 { background: #7a2233; }

/* =========================================================
   모달 공통
   ========================================================= */
.modal-back {
  background:
    radial-gradient(ellipse at center, rgba(30,24,14,0.55), rgba(6,5,3,0.92));
  backdrop-filter: blur(1.5px);
}
.modal-box {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(255,255,255,0.06), transparent 40%),
    var(--종이);
  border: 3px solid var(--금);
  box-shadow: var(--art-ink-shadow), 0 0 0 6px rgba(0,0,0,0.15) inset;
}

/* =========================================================
   이벤트 두루마리 — 상하 봉 + 펼침 연출
   ========================================================= */
.modal-back.event-modal .modal-box {
  position: relative;
  padding: 34px 26px 26px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.015) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.08), transparent 55%),
    var(--종이);
  border-color: var(--금);
  transform-origin: top center;
  animation: art-unroll 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal-back.event-modal .modal-box::before,
.modal-back.event-modal .modal-box::after {
  content: ""; position: absolute; left: -14px; right: -14px; height: 16px;
  background: linear-gradient(180deg, #8a6a34, #4a3520 55%, #2e2010);
  border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
}
.modal-back.event-modal .modal-box::before { top: -8px; }
.modal-back.event-modal .modal-box::after { bottom: -8px; }

@keyframes art-unroll {
  0%   { transform: scaleY(0.05); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}

.scroll-type { font-family: var(--art-serif); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.type-조조 { background: #17140f; } .type-손권 { background: #7a2233; }
.scroll-title { font-family: var(--art-serif); text-shadow: 0 1px 0 rgba(255,255,255,0.35); }
.scroll-body { position: relative; }
.scroll-btn {
  background: linear-gradient(180deg, var(--갈), #2e2010);
  border: 1px solid var(--금); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.1s, background 0.15s;
}
.scroll-btn:hover { background: linear-gradient(180deg, var(--금밝), var(--금)); color: var(--먹); transform: translateX(2px); }
.scroll-result { background: linear-gradient(180deg, #fff6df, #f7e4ac); border: 1px solid var(--금); box-shadow: inset 0 0 12px rgba(201,162,74,0.25); }

/* =========================================================
   저장/불러오기
   ========================================================= */
.save-slot { background: linear-gradient(180deg, #efe1bc, var(--종이진)); border: 1px solid var(--선); }
.mini-btn { background: linear-gradient(180deg, var(--갈), #2e2010); border: 1px solid var(--금); }
.mini-btn:hover { background: linear-gradient(180deg, var(--금밝), var(--금)); color: var(--먹); }

/* =========================================================
   월 전환 — 먹번짐 페이드
   ========================================================= */
.month-fade {
  background: radial-gradient(ellipse at center, rgba(20,16,10,0) 0%, rgba(10,8,5,0) 30%);
}
.month-fade.run {
  background:
    radial-gradient(ellipse at center, rgba(23,20,15,0.55) 0%, rgba(8,6,4,0.96) 75%);
  animation: art-ink-bloom 0.9s ease-out;
}
.mf-inner {
  font-family: var(--art-serif); letter-spacing: 4px;
  text-shadow: 0 0 22px rgba(240,212,137,0.65), 0 0 4px rgba(0,0,0,0.8);
  animation: art-mf-text 0.9s ease-out;
}
@keyframes art-ink-bloom {
  0%   { clip-path: circle(0% at 50% 50%); }
  40%  { clip-path: circle(75% at 50% 50%); }
  100% { clip-path: circle(120% at 50% 50%); }
}
@keyframes art-mf-text {
  0%   { opacity: 0; transform: scale(0.85); }
  30%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

/* =========================================================
   전투 화면 — 어두운 전장 분위기
   ========================================================= */
.modal-back.battle-modal {
  background: radial-gradient(ellipse at center, rgba(60,14,10,0.45), rgba(4,3,2,0.96));
}
.modal-back.battle-modal .modal-box {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(165,52,42,0.14), transparent 55%),
    linear-gradient(180deg, #241f17, #17140f 65%);
  border-color: #8c2f23;
  color: var(--종이);
  box-shadow: 0 0 40px rgba(165,52,42,0.25), var(--art-ink-shadow);
}
.battle-screen { color: var(--종이); }
.bt-title { font-family: var(--art-serif); text-shadow: 0 0 16px rgba(165,52,42,0.6); }
.bt-side { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.25)); backdrop-filter: blur(1px); }
.bt-side.atk { border-color: #8c2f23; box-shadow: 0 0 14px rgba(140,47,35,0.25) inset; }
.bt-side.def { border-color: var(--금); box-shadow: 0 0 14px rgba(201,162,74,0.2) inset; }
.bt-gen { color: var(--금밝); }
.bt-sh, .bt-note { color: #c9bfa4; }
.bt-vs { text-shadow: 0 0 14px rgba(165,52,42,0.7); }
.bt-gbar { background: #2a241a; box-shadow: inset 0 1px 4px rgba(0,0,0,0.6); }
.bt-gfill { position: relative; }
.bt-atk .bt-gfill { background: linear-gradient(90deg,#5c1c14,#c25a4a); box-shadow: 0 0 8px rgba(194,90,74,0.6); }
.bt-def .bt-gfill { background: linear-gradient(90deg,var(--갈),var(--금밝)); box-shadow: 0 0 8px rgba(201,162,74,0.6); }
.bt-big {
  background: linear-gradient(180deg, var(--갈), #2e2010); border: 2px solid var(--금);
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}
.bt-big.alt { background: linear-gradient(180deg, #7a2a22, #401510); border-color: #c25a4a; }
.bt-big:hover { filter: brightness(1.12); }
.bt-round-btn { background: linear-gradient(180deg, var(--갈), #2e2010); border: 1px solid var(--금); }
.bt-round-btn:hover { background: linear-gradient(180deg, var(--금밝), var(--금)); color: var(--먹); }
.bt-roundlog { background: rgba(0,0,0,0.4); border: 1px solid rgba(138,116,68,0.3); }
.bt-result { box-shadow: inset 0 0 18px rgba(0,0,0,0.4); }
.bt-result.win { text-shadow: 0 0 12px rgba(58,125,58,0.6); }
.bt-result.lose { text-shadow: 0 0 12px rgba(165,52,42,0.7); }

/* =========================================================
   종막
   ========================================================= */
.end-grade { font-family: var(--art-serif); text-shadow: 0 0 24px currentColor; }
.end-title { font-family: var(--art-serif); }
.end-win .end-title { color: #3a7d3a; }
.end-lose .end-title { color: var(--위험); }

/* =========================================================
   손맛: 수치 변동 플로팅 텍스트 · 명령 확정 도장
   ========================================================= */
.float-msg {
  background: linear-gradient(180deg, var(--금밝), var(--금));
  color: var(--먹); font-family: var(--art-serif); font-weight: 700;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
  animation: art-float-in 0.25s ease-out;
}
.float-msg.fail { background: linear-gradient(180deg, #d16a58, var(--위험)); color: #fff; }
@keyframes art-float-in {
  0% { opacity: 0; transform: translateY(6px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 명령 확정 도장(印) — art.js가 #float-host에 .seal-stamp를 잠깐 붙였다 뗀다 */
.seal-stamp {
  position: fixed; top: 46%; left: 50%; z-index: 80;
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--art-serif); font-size: 30px; font-weight: 700;
  color: #a5342a; border: 3px solid #a5342a; border-radius: 8px;
  background: rgba(236,224,194,0.06);
  pointer-events: none;
  transform: scale(2.4) rotate(-14deg);
  opacity: 0;
  animation: art-stamp-down 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
  text-shadow: 0 0 8px rgba(165,52,42,0.5);
  box-shadow: 0 0 0 rgba(165,52,42,0);
}
@keyframes art-stamp-down {
  0%   { transform: scale(2.6) rotate(-14deg); opacity: 0; }
  55%  { transform: scale(0.94) rotate(-8deg); opacity: 0.95; }
  70%  { transform: scale(1.08) rotate(-8deg); opacity: 0.9; box-shadow: 0 0 24px rgba(165,52,42,0.45); }
  100% { transform: scale(1) rotate(-8deg); opacity: 0; }
}

@keyframes art-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.4; }
}

/* =========================================================
   [V2 §5-H-1③] 결판 도장 배너 — 전투 종료·함락 시 화면 중앙 大 도장이
   쿵 찍히고(scale 2.2→1 + 미세 회전) 붉은 인주 테두리가 뜬다. 1.4초 뒤
   페이드, 아무 데나 클릭하면 즉시 스킵(art.js UI.fx 가 catcher 를 붙였다 뗀다).
   색: 勝=금 / 敗=먹 / 陷落(아군 도시 상실)=적. 전부 transform/opacity 만.
   ========================================================= */
.fx-banner-catch {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto; background: transparent; cursor: pointer;
}
.fx-seal {
  font-family: var(--art-serif); font-weight: 700; line-height: 1;
  font-size: clamp(88px, 17vw, 176px);
  padding: 0.14em 0.28em; border-radius: 16px;
  border: 6px solid var(--인주);
  background: rgba(24,19,12,0.34);
  box-shadow: 0 0 0 rgba(165,52,42,0), var(--art-ink-shadow);
  text-shadow: 0 3px 14px rgba(0,0,0,0.6);
  will-change: transform, opacity;
  animation: fx-seal-in 1.4s cubic-bezier(0.16, 0.9, 0.28, 1) forwards;
}
/* 勝 — 금 인장(밝은 금 글씨 + 금빛 발광) */
.fx-seal.win  { color: var(--금밝); border-color: var(--인주); text-shadow: 0 0 22px rgba(240,212,137,0.55), 0 3px 14px rgba(0,0,0,0.6); }
/* 敗 — 먹(어두운 글씨는 밝은 종이 배경 위에서 읽히게) */
.fx-seal.lose { color: #221a10; background: rgba(217,200,158,0.9); border-color: #3a2c1c; text-shadow: none; }
/* 陷落 — 인주적(성을 잃은 붉은 경보) */
.fx-seal.fall { color: #f0c2b2; border-color: var(--인주); background: rgba(60,18,14,0.5); text-shadow: 0 0 20px rgba(165,52,42,0.6), 0 3px 14px rgba(0,0,0,0.6); }
@keyframes fx-seal-in {
  0%   { transform: scale(2.35) rotate(-10deg); opacity: 0; }
  16%  { transform: scale(0.9)  rotate(-6deg);  opacity: 1; }   /* 쿵 — 세게 찍힘 */
  26%  { transform: scale(1.07) rotate(-6deg);  opacity: 1; box-shadow: 0 0 34px rgba(165,52,42,0.5), var(--art-ink-shadow); }
  40%  { transform: scale(1)    rotate(-6deg);  opacity: 1; }
  84%  { transform: scale(1)    rotate(-6deg);  opacity: 1; }
  100% { transform: scale(1)    rotate(-6deg);  opacity: 0; }
}

/* 스크롤바 — 종이·먹 톤 통일 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.15); }
::-webkit-scrollbar-thumb { background: var(--갈); border-radius: 5px; border: 1px solid var(--금); }
::-webkit-scrollbar-thumb:hover { background: var(--금); }