/* 버튼 디자인 체계. 모양(크기·위치)은 그대로 두고 재질만 통일한다.
   어두운 화면: 주요 = 금빛 옻칠, 일반 = 청록 옻칠 + 놋쇠 테두리, 위험·공격 = 주홍 옻칠.
   양피지 대화상자: 주요 = 주홍 옻칠, 보조 = 먹선 테두리.
   마지막에 불러오며, 기존 규칙보다 우선하도록 #game을 앞에 붙인다. */
:root {
  --gold-hi: #f6dc97; --gold: #d9ab57; --gold-lo: #ab7a30; --gold-edge: #6a4a17; --gold-ink: #2a1c07;
  --lac-hi: #46625d; --lac: #314945; --lac-lo: #233533; --lac-edge: #0e1a18;
  --red-hi: #d06a4f; --red: #ad4632; --red-lo: #832f22; --red-edge: #4c150d;
  --brass: #c9a45c; --brass-soft: #c9a45c66; --cream: #f4ead3; --ink: #27302c;
}

/* ── 공통 동작 ─────────────────────────────────────────── */
#game button { transition: transform .08s ease, box-shadow .08s ease, filter .12s ease, background-color .12s ease; -webkit-tap-highlight-color: transparent; }
#game button:active:not(:disabled) { transform: translateY(1px); }
#game button:disabled { filter: grayscale(.85) brightness(.85); cursor: default; }
#game button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

/* ── 어두운 화면: 주요(금빛) ───────────────────────────── */
#game .menu-buttons .campaign-start,
#game .destination-commit,
#game .campaign-actions .end-turn,
#game .campaign-decision > .campaign-actions button.primary,
#game.mode-campaign .campaign-actions .end-turn {
  color: var(--gold-ink) !important; font-weight: 700;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 48%, var(--gold-lo) 100%) !important;
  border: 1px solid var(--gold-edge) !important;
  box-shadow: inset 0 1px 0 #fff6d8b3, inset 0 -2px 0 #00000026, 0 2px 0 var(--gold-edge), 0 6px 14px #0006 !important;
  text-shadow: 0 1px 0 #ffffff59;
}
#game .menu-buttons .campaign-start:hover, #game .destination-commit:hover, #game .campaign-actions .end-turn:hover { filter: brightness(1.06); }
#game .menu-buttons .campaign-start:active, #game .destination-commit:active, #game .campaign-actions .end-turn:active {
  box-shadow: inset 0 1px 0 #fff6d880, inset 0 2px 4px #0003, 0 1px 0 var(--gold-edge) !important;
}

/* ── 어두운 화면: 일반(청록 옻칠) ─────────────────────── */
#game .menu-buttons .secondary-start,
#game .menu-path,
#game .campaign-actions button:not(.end-turn):not(.primary),
#game .destination-tabs button,
#game .campaign-view,
#game .topbar .icon-button,
#game .battle-bar.is-command .combat-exit:not(.danger),
#game .decision-supply > [data-action=supply-focus] {
  color: var(--cream) !important;
  background: linear-gradient(180deg, var(--lac-hi) 0%, var(--lac) 55%, var(--lac-lo) 100%) !important;
  border: 1px solid var(--brass-soft) !important;
  box-shadow: inset 0 1px 0 #ffffff1f, inset 0 -2px 0 #00000033, 0 2px 0 var(--lac-edge), 0 5px 12px #0005 !important;
}
#game .decision-supply > [data-action=supply-focus] { padding: 4px 10px !important; border-radius: 10px; }
#game .menu-path:hover, #game .campaign-actions button:hover, #game .destination-tabs button:hover, #game .topbar .icon-button:hover { filter: brightness(1.12); }
#game .destination-tabs button[aria-pressed=true] {
  color: var(--gold-ink) !important;
  background: linear-gradient(180deg, #f1dcab 0%, #dcbb7a 100%) !important;
  border-color: var(--gold-edge) !important;
  box-shadow: inset 0 1px 0 #fff8e2, 0 2px 0 var(--gold-edge), 0 5px 12px #0005 !important;
}
#game .destination-tabs button[aria-pressed=true] span { color: #6b4b16 !important; }
#game .menu-path strong, #game .menu-path small { color: inherit; }
#game .menu-path small { opacity: .78; }

/* 조용한 버튼(글자형): 어두운 화면 */
#game .menu-footer button, #game .decision-supply > [data-action=war-log] {
  color: #e6cf98 !important; background: none !important; border: 0 !important; box-shadow: none !important;
  text-decoration: underline; text-decoration-color: #e6cf9855; text-underline-offset: 4px;
}

/* ── 위험·공격(주홍 옻칠) ─────────────────────────────── */
#game .battle-bar .danger,
#game .battle-bar.is-command .combat-exit.danger,
#game.mode-raid .battle-bar > .small,
#game .is-command .command-fire,
#game.mode-battle .touch-fire,
#game.mode-raid .touch-fire {
  color: #fff3e6 !important;
  background: linear-gradient(180deg, var(--red-hi) 0%, var(--red) 55%, var(--red-lo) 100%) !important;
  border: 1px solid var(--red-edge) !important;
  box-shadow: inset 0 1px 0 #ffd9c766, inset 0 -2px 0 #0000003b, 0 2px 0 var(--red-edge), 0 5px 12px #0006 !important;
  text-shadow: 0 1px 1px #0005;
}

/* ── 터치 조작: 원형 버튼과 이동 패드 ─────────────────── */
#game.mode-battle .touch-fire,
#game.mode-raid .touch-actions button {
  border-radius: 50% !important;
  border: 3px solid var(--brass) !important;
  font-weight: 700; letter-spacing: -.01em;
}
#game.mode-battle .touch-fire {
  background: radial-gradient(circle at 38% 30%, #dd7a5d 0%, var(--red) 52%, #6e251a 100%) !important;
  box-shadow: inset 0 2px 0 #ffd2bf55, inset 0 -4px 8px #0000004d, 0 0 0 2px #1a0d09, 0 6px 14px #0007 !important;
}
#game.mode-raid .touch-actions button {
  color: var(--cream) !important;
  background: radial-gradient(circle at 38% 30%, #56736e 0%, var(--lac) 55%, #17252a 100%) !important;
  box-shadow: inset 0 2px 0 #ffffff26, inset 0 -4px 8px #00000059, 0 0 0 2px #0b1513, 0 6px 14px #0007 !important;
  text-shadow: 0 1px 1px #0007;
}
#game.mode-raid .touch-actions .touch-fire {
  background: radial-gradient(circle at 38% 30%, #dd7a5d 0%, var(--red) 52%, #6e251a 100%) !important;
}
#game.mode-battle .touch-fire.down, #game.mode-raid .touch-actions button.down {
  transform: scale(.94) !important;
  box-shadow: inset 0 3px 10px #0007, 0 0 0 2px #0b1513, 0 0 14px #f2cd7b88 !important;
  color: #fff !important;
}
#game.mode-raid .touch-actions button.unavailable { filter: grayscale(.8) brightness(.75); }
#game.mode-raid .touch-actions button.timing-cue {
  color: var(--gold-ink) !important;
  background: radial-gradient(circle at 38% 30%, #fff0bd 0%, #f2c663 55%, #b9862f 100%) !important;
  box-shadow: inset 0 2px 0 #fff8, 0 0 0 2px #1a0d09, 0 0 18px #f2c663cc !important;
}
/* 이동 패드: 영역 전체가 터치를 받고, 누른 자리로 받침이 옮겨 간다. */
#game #stick { background: #ffffff07 !important; border: 1px dashed #c9a45c33 !important; box-shadow: none !important; overflow: visible; touch-action: none; }
#game #stick-base {
  position: absolute; left: calc(50% - 56px); top: calc(50% - 56px); width: 112px; height: 112px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, #2f4441 0%, #1c2b29 68%, #142120 100%);
  border: 2px solid var(--brass-soft);
  box-shadow: inset 0 3px 12px #0009, inset 0 -1px 0 #ffffff14, 0 4px 14px #0007;
}
#game #stick.active #stick-base { border-color: var(--brass); }
#game #stick-knob {
  left: calc(50% - 22px) !important; top: calc(50% - 22px) !important; width: 44px !important; height: 44px !important; margin: 0 !important; z-index: 1;
  background: radial-gradient(circle at 38% 32%, #fff3cf 0%, #e3c27e 45%, #a87a32 100%) !important;
  border: 1px solid var(--gold-edge) !important;
  box-shadow: 0 3px 6px #0008, inset 0 1px 0 #fff8 !important;
}
#game #stick-label { color: #cfd8cd !important; text-shadow: 0 1px 2px #000a; z-index: 1; }
#game #stick.active #stick-label, #game #stick.active #stick-detail { visibility: hidden; }

/* ── 전투 병과 카드 ────────────────────────────────────── */
#game .is-command .formation {
  background: linear-gradient(180deg, var(--lac-hi) 0%, var(--lac-lo) 100%) !important;
  border: 1px solid var(--brass-soft) !important;
  box-shadow: inset 0 1px 0 #ffffff1a, 0 2px 0 var(--lac-edge), 0 4px 10px #0005 !important;
}
#game .is-command .formation[aria-pressed=true] {
  border-color: var(--gold-hi) !important;
  box-shadow: inset 0 1px 0 #ffffff26, 0 0 0 2px #d9ab5799, 0 2px 0 var(--lac-edge), 0 4px 12px #0006 !important;
}
#game .formation .name { background: #182826 !important; color: var(--cream); }
#game .is-command .formation[aria-pressed=true] .name { background: linear-gradient(180deg, #e6c37a, #b98a3d) !important; color: var(--gold-ink) !important; }

/* ── 양피지 대화상자 ───────────────────────────────────── */
#game .dialog button.primary {
  color: #fff4e6 !important; font-weight: 700;
  background: linear-gradient(180deg, var(--red-hi) 0%, var(--red) 55%, var(--red-lo) 100%) !important;
  border: 1px solid var(--red-edge) !important; border-radius: 10px;
  box-shadow: inset 0 1px 0 #ffd9c766, inset 0 -2px 0 #0000002e, 0 2px 0 var(--red-edge), 0 5px 12px #4c150d40 !important;
  outline: none; text-shadow: 0 1px 1px #0004;
}
#game .dialog button.primary:hover { filter: brightness(1.06); }
#game .dialog button.quiet, #game .dialog .dialog-actions button:not(.primary) {
  color: var(--ink) !important; font-weight: 600;
  background: linear-gradient(180deg, #fbf5e8, #efe4cc) !important;
  border: 1px solid #8a7a5a !important; border-radius: 10px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #8a7a5a66 !important;
}
#game .dialog .setting-row {
  background: linear-gradient(180deg, #fbf6ea, #f1e7d1) !important;
  border: 1px solid #b9a77f !important; border-radius: 10px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #b9a77f66 !important; color: var(--ink) !important;
}
#game .dialog .setting-row b { color: #8a3a28; }
#game .dialog .setting-row[aria-pressed=false] b { color: #6b6d5c; }
#game .faction-choice {
  background: linear-gradient(180deg, #fbf5e7, #eee2c8) !important;
  border: 1px solid #b9a77f !important; border-radius: 12px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #b9a77f88 !important;
}
#game .faction-choice[aria-pressed=true] {
  background: linear-gradient(180deg, #fffaf0, #f6ead0) !important;
  border: 2px solid var(--red) !important;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 3px #ad46322e, 0 2px 0 var(--red-edge) !important;
}
#game .segment button {
  background: linear-gradient(180deg, #fbf5e8, #efe4cc) !important; color: var(--ink) !important;
  border: 1px solid #a4936c !important; box-shadow: inset 0 1px 0 #fff !important;
}
#game .segment button[aria-pressed=true] {
  background: linear-gradient(180deg, #3b4a45, #222d2a) !important; color: var(--cream) !important;
  border-color: #141c1a !important; box-shadow: inset 0 2px 4px #0006 !important;
}
#game .dialog .settings-grid { gap: 8px; }
#game .dialog .setting-row { padding: 0 16px !important; min-height: 50px; }
#game .dialog select {
  appearance: none; -webkit-appearance: none; min-height: 40px; padding: 0 34px 0 14px; border-radius: 10px;
  color: var(--ink); font-weight: 600;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2327302c' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center, linear-gradient(180deg, #fbf5e8, #efe4cc);
  border: 1px solid #8a7a5a; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #8a7a5a66;
}
/* PC 전투 알림은 위쪽 정보 줄 가운데 빈자리에 띄워 전장을 가리지 않는다. */
@media not all and (pointer:coarse) {
  #game.mode-battle #toast { position: fixed; top: 9px; bottom: auto; left: 50%; transform: translateX(-50%); max-width: min(560px, 46vw); padding: 8px 16px; }
  #game.mode-battle #toast.show { transform: translateX(-50%); }
}