:root { --camp-gold:#d2ad68; --camp-light:#f9e5ad; --camp-iron:#514c42; --camp-ink:#15110e; }
body { background:#15130f; }
.button,.welcome-choice,.welcome-help,.sidebar-disclosure>summary,dialog h2,dialog h3,.game-sidebar h2,.game-sidebar h3,legend,.match-choice-heading,#lobby-title { font-family:Georgia,'Times New Roman',serif; }
.button,.welcome-choice { color:#f0dfbf; border:2px solid #736247; border-radius:3px; background:linear-gradient(180deg,#474137,#27221a 45%,#181714); box-shadow:inset 0 1px #cfb98866,inset 0 -2px #0009,0 2px 5px #0007; text-shadow:0 2px 2px #000; }
.button:hover:not(:disabled),.welcome-choice:hover:not(:disabled) { color:#fff1b5; border-color:#d6b36b; background:linear-gradient(#665436,#3a2b19); box-shadow:inset 0 1px #ffe3a6,0 0 14px #ce972331; }
.button:focus-visible,.welcome-choice:focus-visible,.welcome-help:focus-visible { outline:2px solid #ffe1a0; outline-offset:3px; }
.button.primary { color:#ffedbc; background:linear-gradient(#34573d,#1b3827 55%,#122719); border-color:#bb9654; }
.button.primary:hover:not(:disabled) { background:linear-gradient(#467444,#244d2f); border-color:#f3d286; }
.button.danger { background:linear-gradient(#683a31,#39201a); border-color:#93604b; color:#ffe0bb; }
.button:disabled,.welcome-choice:disabled { opacity:.4; filter:saturate(.4); cursor:default; }
.match-lobby { max-width:none; grid-template-columns:minmax(0,1fr); align-content:center; justify-items:center; padding:clamp(88px,10svh,120px) clamp(20px,4vw,56px); background:linear-gradient(90deg,#100a0305,#100a0310),url('./assets/menu/tavern-warboard-v6.jpg') center/cover; gap:0; }
.welcome-title-banner { position:relative; width:calc(100% + 72px); margin:0 -36px 26px; text-align:center; }
.welcome-menu { grid-column:1; position:relative; max-width:430px; padding:32px 28px 14px; border:1px solid #a68651a6; border-top-color:#e0c18caa; border-bottom-color:#70513199; border-radius:12px; background:linear-gradient(115deg,#281b0b9c,#160d079e); box-shadow:inset 0 0 0 1px #e4c5891a,inset 0 1px 0 #efd29a1f,inset 0 -1px 0 #07030180,0 18px 38px #0006; }
#lobby-title { position:relative; margin:0; padding:4px 16px; line-height:0; }
.welcome-title-text { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.warboard-wordmark { display:block; width:100%; height:auto; margin-block:-4%; aspect-ratio:3 / 1; object-fit:contain; filter:drop-shadow(0 3px 2px #000a); }
.lobby-subtitle { margin:4px 0 0; color:#eddbb4; font:normal .9375rem/1.5 Georgia,serif; letter-spacing:.1em; text-shadow:0 2px 2px #000; }
.welcome-menu .welcome-choice { border:1px solid #ba925f99; border-radius:2px 12px 2px 12px; background:linear-gradient(110deg,#71553470,#29201696); box-shadow:inset 0 1px #e4c08855,0 3px 6px #0003; }
.welcome-menu .welcome-choice:hover:not(:disabled) { background:linear-gradient(110deg,#92713c9c,#51371dad); }
.welcome-menu .welcome-choice.welcome-primary { background:linear-gradient(110deg,#50613791,#26371da8); }
.welcome-page-heading { margin:-9px 0 22px; }
.welcome-page-heading h3 { margin:13px 0 0; font:normal 1.5rem Georgia,serif; color:#f1d8a7; }
.welcome-page-heading h3:focus { outline:0; }
.welcome-page { position:relative; isolation:isolate; }
.welcome-page:not(#welcome-home) { padding:16px 14px 20px; border-block:2px solid #b79760; border-radius:3px 8px 5px 2px; background:radial-gradient(ellipse at 10% 0,#f6dfad99,transparent 70%),linear-gradient(105deg,#d3b989e8,#f0d9aceb 50%,#cdb07ee3); box-shadow:inset 0 0 20px #76451a45,0 5px 14px #0004; }
.welcome-page:not(#welcome-home)::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg,#a46e3540,transparent 16%,transparent 85%,#a46e3540); }
.welcome-page:not(#welcome-home) .welcome-page-heading { margin:0 0 18px; }
.welcome-page:not(#welcome-home) :is(h3,.welcome-back) { color:#49301a; }
.welcome-page:not(#welcome-home) .welcome-back:hover { color:#1e1208; }
.welcome-page:not(#welcome-home) .welcome-back:focus-visible { outline-color:#664220; }
.welcome-back { display:block; border:0; color:#e2c594; background:none; padding:4px 0; font:1rem Georgia,serif; cursor:pointer; }
.welcome-back:hover { color:#fff0ba; }.welcome-back:focus-visible { outline:2px solid #efd194; outline-offset:4px; }
/* Clearing Connecting… must not shrink and recenter the opening panel. */
.welcome-menu > .welcome-status { margin:10px 0 0; min-height:1.5em; }
.welcome-choices { gap:13px; }
.welcome-choice { padding:15px 18px; font-size:1.35rem; font-weight:normal; }
.welcome-choice.welcome-primary { color:#ffe6a1; background:linear-gradient(#424f31,#26301e); border-color:#bea066; }
.welcome-choice small { color:#d1c3aa; font-size:.875rem; line-height:1.4; font-family:Georgia,serif; }
.welcome-help { display:inline-block; font-size:.875rem; line-height:1.4; color:#d9c28e; text-decoration:none; padding:10px 8px; }
.welcome-help:hover { color:#fff0b8; text-decoration:underline; }
.welcome-page .install-game-entry { color:#49321d; min-height:44px; font-weight:600; text-decoration:underline; }
.welcome-page .install-game-entry:hover { color:#24180d; }
.welcome-status { color:#dacdb7; font-size:.875rem; }
dialog,dialog.welcome-dialog,.settings-dialog { padding:24px; color:#f0e0c1; border:5px ridge #74634a; border-radius:3px; background:linear-gradient(#17120edc,#17120ee8),url('./assets/menu/tavern-warboard-v6.jpg') center/cover; box-shadow:0 0 0 2px #181715,inset 0 0 42px #0008,0 20px 90px #000c; max-height:calc(100dvh - 24px); }
dialog::backdrop,.welcome-dialog::backdrop { background:#090804bb; backdrop-filter:blur(3px); }
dialog h2,.welcome-dialog .dialog-heading h2 { color:var(--camp-light); font-size:1.9rem; font-weight:normal; text-shadow:0 2px #000; }
dialog h3 { color:#e3c78b; }
dialog p,dialog li { color:#dacdb8; }
.main-menu-dialog { width:min(430px,calc(100vw - 24px)); }
.menu-match-info { margin:8px 0 20px; font-size:.875rem; text-align:center; }
.camp-menu { display:grid; gap:12px; }
.camp-menu>.button { font-size:1.18rem; padding:13px; text-align:center; text-decoration:none; }
.menu-sign { width:100%; font-size:1.15rem; letter-spacing:.03em; min-height:46px; border:3px ridge #96815a; background:linear-gradient(#4b3525,#291b12); }
.board-expanded .game-layout { background:#15130f; }
.board-expanded .game-sidebar { padding:10px; background:linear-gradient(#19130eee,#15110cf5),url('./assets/menu/tavern-warboard-v6.jpg') right/cover; }
.board-expanded .turn-controls { background:#1a140f; }
.sidebar-card,.turn-card,.board-expanded .turn-card,.board-expanded .sidebar-card { border:2px solid #66553b; border-radius:3px; background:linear-gradient(130deg,#292319,#171813); box-shadow:inset 0 1px #a58b4e38,0 2px 6px #0005; }
.game-sidebar .section-heading { border-bottom:1px solid #8b73465c; padding-bottom:9px; margin-bottom:10px; }
.game-sidebar h3 { color:#e8cf98; font-size:1rem; }
.game-sidebar h2 { color:#f2dbac; }
.setup-step-mark { border-color:#927b4e; background:#38291d; color:#e4c98b; }
.sidebar-card[data-setup-status="active"] { border-color:#cbb079; box-shadow:inset 0 1px #a58b4e38,0 0 0 1px #cbb07940; }
.sidebar-card[data-setup-status="done"] .setup-step-mark { color:#c3d79a; background:#28311c; border-color:#688347; }
#race-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#race-options .race-choice { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; padding:7px 3px; min-height:98px; font-size:.875rem; border-color:#6d624e; }
.race-choice img { display:block; width:72px; height:72px; object-fit:contain; filter:drop-shadow(0 3px 2px #0008); }
.sidebar-card[data-setup-status="done"] :is(.color-options,.commander-options,.selection-content,.piece-actions) { opacity:1; }
#race-options .race-choice[data-race="humans"] { background:linear-gradient(#152a40,#111820); }
#race-options .race-choice[data-race="orcs"] { background:linear-gradient(#452720,#211513); }
#race-options .race-choice[data-race="elves"] { background:linear-gradient(#30263f,#111e20); }
#race-options .race-choice[data-race="undead"] { background:linear-gradient(#23333e,#11161b); }
#race-options .race-choice[aria-pressed="true"] { border-color:#e6bd6f; box-shadow:inset 0 0 18px #dfac291f,0 0 0 1px #ad843d; color:#ffe6a2; }
#race-options .button:last-child { grid-column:1 / -1; }
.army-color-choice,.commander-choice { border-radius:3px; border-color:#796546; background:linear-gradient(#2b281f,#181b19); }
.commander-choice[aria-pressed="true"] { border-color:#cfaf6b; background:#283428; }
.commander-choice strong { font-family:Georgia,serif; color:#f2dbac; }
.commander-choice span { color:#c3bea9; }
.help-button { background:#302c23; border-color:#8a754e; color:#e0c48b; }
.setup-start-dock,.board-expanded .setup-start-dock { display:none; }
.board-expanded .game-layout:has(.setup-start-dock:not([hidden])) { grid-template-rows:none; }
.setup-confirm { top:50%; width:min(430px,85%); padding:0; border:0; border-radius:0; background:none; box-shadow:none; gap:10px; }
.setup-confirm .button.primary { font-family:Georgia,serif; font-size:clamp(1.9rem,4.2vw,3.4rem); font-weight:normal; line-height:1.2; padding:22px 15px; color:#ffebac; background:linear-gradient(90deg,#182019ee,#243e25f5,#182019ee); border:2px solid #ae8a4f; box-shadow:0 8px 30px #0009,inset 0 0 28px #3f673326; text-shadow:0 3px 2px #000; }
.setup-confirm .button.primary:hover:not(:disabled),.setup-confirm .button.primary:focus { color:#fff4cf; border-color:#ffe29a; background:linear-gradient(90deg,#243326f5,#385e32fa,#243326f5); box-shadow:0 0 26px #e8c6654a,0 8px 30px #0009; }
.setup-confirm .button.quiet { width:max-content; justify-self:center; padding:7px 14px; border:1px solid #8b794c80; background:#191a16df; color:#e8dcc4; }
.battle-result { position:absolute; z-index:15; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:min(480px,86%); padding:30px 20px; border-block:3px solid #ba985c; text-align:center; background:linear-gradient(90deg,#15150df2,#283521f5,#15150df2); box-shadow:0 10px 40px #000a; }
.battle-result h2 { color:#ffe6a1; font:normal clamp(2.5rem,6vw,5rem)/1.1 Georgia,serif; margin:0; text-shadow:0 4px #000; }
.battle-result p { color:#eee0bf; margin:14px 0 20px; }
.battle-result[data-outcome="defeat"] { background:linear-gradient(90deg,#20120ff2,#492420f5,#20120ff2); border-color:#95664d; }
.battle-result[data-outcome="defeat"] h2 { color:#f2b694; }
.battle-result[hidden] { display:none; }
.game-tooltip { position:fixed; inset:auto; margin:0; pointer-events:none; width:max-content; max-width:min(300px,calc(100vw - 16px)); padding:10px 13px; background:#dfc89c; color:#2c2013; border:2px solid #8c6e3a; border-radius:3px; box-shadow:0 6px 18px #0008; font-size:.875rem; line-height:1.45; }
.help-popover { background:#d8c197; color:#2b2419; border-color:#927446; border-radius:3px; }
.help-popover p,.help-popover strong { color:inherit; }
.audio-panel { background:#211c14; border-color:#756043; }
.battlefield-facts dt,.coordinate-note,.settings-dialog .scenery-status,.music-status { color:#c1b79f; }
.mode-switch,.opponent-options { border-color:#796b50; }
.mode-switch label span,.opponent-options label span { font-family:Georgia,serif; }
.mode-switch input:checked+span,.opponent-options input:checked+span { background:#425035; color:#ffe9b3; border-color:#c8a260; }
.level-choice { border-radius:3px; border-color:#776849; }
input,select { accent-color:#bd9d60; }
dialog input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),dialog select { background:#171710; border:1px solid #897345; color:#f1e3c4; border-radius:3px; }
.board-viewport { background:radial-gradient(ellipse,#283022,#11130f); }
.board-expanded .expanded-stacked .game-sidebar { padding:10px; }
.board-expanded .game-layout.expanded-stacked:has(.setup-start-dock:not([hidden])) { grid-template-rows:auto minmax(0,1fr); }
.learning-dialog { width:min(620px,calc(100vw - 24px)); }
.faq-question { border-bottom:1px solid #b7975e66; padding:13px 0; }.faq-question summary { cursor:pointer; color:#f3d7a2; font:1.1rem/1.4 Georgia,serif; }.faq-question p { line-height:1.6; margin-bottom:0; }.faq-question+button { margin-top:18px; }
.tutorial-progress { color:#baab8c; font-size:.8rem; }.tutorial-board { display:grid; grid-template-columns:repeat(5,1fr); width:min(360px,100%); margin:20px auto; border:3px ridge #b6965f; }
.tutorial-square { aspect-ratio:1; padding:0; border:0; border-radius:0; cursor:pointer; background:#73613f; position:relative; display:flex; align-items:center; justify-content:center; }
.tutorial-square.dark { background:#403b29; }.tutorial-square.tutorial-island { background:#806936; box-shadow:inset 0 0 0 3px #d9b86a; }.tutorial-square.selected { outline:3px solid #e2d389; outline-offset:-3px; }
.tutorial-square>.token { pointer-events:none; }.tutorial-square:focus-visible { outline:3px solid #e8d997; outline-offset:-3px; }.tutorial-status { min-height:2.7em; color:#eed092; line-height:1.5; }
/* Warm translucent parchment carries every non-combat menu. Full text remains
   in the document throughout the ink reveal, including for assistive readers. */
dialog:is(.welcome-dialog,.learning-dialog,.settings-dialog,.main-menu-dialog,.install-game-dialog,#rules-dialog,#restart-dialog) { color:#382615; border:4px ridge #ab8550; border-radius:5px 12px 6px 3px; background:radial-gradient(ellipse at 18% 5%,#fae8bd66,transparent 68%),linear-gradient(105deg,#cfb487ed,#eddbb4ed 50%,#ceb180ed); box-shadow:0 0 0 2px #352516,inset 0 0 38px #75401c55,0 20px 70px #000a; }
dialog:is(.welcome-dialog,.learning-dialog,.settings-dialog,.main-menu-dialog,.install-game-dialog,#rules-dialog,#restart-dialog) :is(h2,h3,p,li,dt,dd,summary,label,legend,.friend-presence,.install-support) { color:#49321d; text-shadow:none; }
dialog:is(.welcome-dialog,.learning-dialog,.settings-dialog,.main-menu-dialog,.install-game-dialog,#rules-dialog,#restart-dialog) .button { color:#f0dfbf; }
dialog:is(.welcome-dialog,.learning-dialog,.settings-dialog,.main-menu-dialog,.install-game-dialog,#rules-dialog,#restart-dialog) .friend-presence.online { color:#31582c; }
dialog :is(.level-choice,.opponent-options) :is(span,strong) { color:#f0dfbf; }
dialog .level-choice small { color:#c9b997; }
dialog .match-picker-note,.main-menu-dialog .scorecard { color:#614629; }
.settings-dialog .audio-panel :is(p,li,strong,label) { color:#dacdb8; }
.settings-dialog .audio-panel summary { color:#eed8a5; }
.learning-dialog .faq-question summary { color:#4f3217; }
.learning-dialog .tutorial-progress { color:#765536; }
.learning-dialog .tutorial-status { color:#62441f; }
@keyframes menu-arrive { from { opacity:0; } to { opacity:1; } }
@keyframes parchment-unfold { from { opacity:.45; transform:translateY(-5px) scaleY(.96); } to { opacity:1; transform:translateY(0) scaleY(1); } }
@keyframes ink-written { from { clip-path:inset(0 100% 0 0); filter:blur(1px); } to { clip-path:inset(0); filter:blur(0); } }
@keyframes parchment-pass { from { opacity:.55; transform:scaleY(.1); } to { opacity:0; transform:scaleY(1); } }
@media(prefers-reduced-motion:no-preference) {
  .in-menu .welcome-menu { animation:menu-arrive 1620ms 250ms ease-out both; }
  .welcome-page:not(#welcome-home):not([hidden]) { transform-origin:50% 0; animation:parchment-unfold 320ms ease-out; }
  .welcome-page:not(#welcome-home):not([hidden])::before { content:''; position:absolute; inset:-4px; z-index:2; pointer-events:none; border-block:2px solid #b5894590; background:linear-gradient(#d8ba8766,#f3dfb733,#ab763d40); transform-origin:50% 0; animation:parchment-pass 420ms ease-out both; }
  .welcome-page:not([hidden]) h3 { width:fit-content; margin-inline:auto; animation:ink-written 430ms 60ms ease-out backwards; }
  dialog:is(.welcome-dialog,.learning-dialog,.settings-dialog,.main-menu-dialog,.install-game-dialog,#rules-dialog,#restart-dialog)[open] { transform-origin:50% 15%; animation:parchment-unfold 320ms ease-out; }
  dialog:is(.welcome-dialog,.learning-dialog,.settings-dialog,.main-menu-dialog,.install-game-dialog,#rules-dialog,#restart-dialog)[open] h2 { animation:ink-written 460ms 50ms ease-out backwards; }
}
@media(max-width:720px) {
  .match-lobby { padding:88px 20px; }
  .welcome-menu { grid-column:1; }
  .welcome-menu { padding:22px 20px 12px; max-width:360px; }
  .welcome-title-banner { width:calc(100% + 40px); margin:0 -20px 24px; }
  #lobby-title { padding:4px 16px; }
  .welcome-choice { padding:11px 14px; font-size:1.05rem; }
  .setup-confirm .button.primary { padding:17px 10px; }
}
@media(prefers-reduced-motion:reduce) { .button,.welcome-choice { transition:none; } }