/* Shared materials for the floating interface. Keep geometry in style.css:
   the world remains the focus, with ivory, enamel and a restrained brass edge. */
:root {
  --ui-paper:#fffaf0;
  --ui-paper-low:#f0ecdf;
  --ui-ink:#253f45;
  --ui-muted:#5e706b;
  --ui-edge:#c9b991;
  --ui-shadow:0 8px 24px #142e3623,0 2px 4px #142e3612;
  --ui-inset:inset 0 1px 0 #ffffffed,inset 0 -1px 0 #b7ae951c;
}

/* Dimensional illustrations retain their own painted fill and line work. */
.interface-icon {
  display:block;
  flex:none;
  width:26px;
  height:26px;
  overflow:visible;
  filter:drop-shadow(0 1px 1px #253c4229);
  pointer-events:none;
}
.topnav .interface-icon { width:26px; height:26px; }
.board-frame .turn-dock .navigation-icon { padding:4px; }
.board-frame .navigation-icon .interface-icon { width:34px; height:28px; }
.stats-button .interface-icon { width:22px; height:22px; }
#shuffle-tribes .interface-icon { width:40px; height:40px; filter:drop-shadow(0 2px 1.5px #3b260a52); transition:transform .12s; }
.city-menu-tabs .interface-icon { width:23px; height:23px; }

/* White controls stand cleanly apart from both light sky and dark fog. */
.topnav :is(.text-button,.outline-button),
.stats-button {
  border:1px solid #c5bcaa;
  background:linear-gradient(180deg,#fffdf8,#f5f1e6);
  color:var(--ui-ink);
  box-shadow:var(--ui-inset),0 2px 5px #173a4610;
  font-weight:800;
}
.topnav .recap-button {
  background:linear-gradient(180deg,#ffffff,#faf8f0);
  border-color:#d5ccba;
  color:var(--ui-ink);
  box-shadow:var(--ui-inset),0 2px 5px #173a4610;
}
.topnav .recap-button[aria-expanded="true"],
.topnav .animation-speed[aria-pressed="true"] {
  background:linear-gradient(180deg,#367c81,#255e67);
  color:#fff9e6;
  border-color:#204f58;
  box-shadow:inset 0 1px 0 #96c1be66,inset 0 -2px 0 #113f4955,0 2px 5px #173a4620;
}
body:not([data-match-result="winner"]):not([data-match-result="draw"]) .topbar .turn-summary {
  border:1px solid #d7ceba99;
  background:linear-gradient(180deg,#fffdf8f5,#f6f1e5ee);
  box-shadow:var(--ui-inset),0 2px 5px #173a460c;
}
.topbar .round-label { color:#86662c; font-weight:850; }
.topbar .turn-summary strong { font-weight:850; }
.player-card:not(.multiplayer-card) {
  border-color:color-mix(in srgb,var(--jade-light) 45%,#b2c4be);
  background:linear-gradient(145deg,color-mix(in srgb,var(--jade-light) 25%,#fffef6),color-mix(in srgb,var(--jade-light) 42%,#f3f2e7));
  box-shadow:var(--ui-inset),0 3px 10px #173a461a;
}
.player-avatar,.seat-emblem,.city-crest {
  border:1px solid #c3ad72;
  box-shadow:inset 0 1px 1px #fff6d999,inset 0 -2px 2px #0c35472b,0 1px 2px #173a4620;
}
.player-name strong { color:var(--ui-ink); font-weight:850; }
.player-name small,.player-resource>span { color:#536a63; }
.player-resource strong { color:#846027; }

/* A thin brass lip replaces the old broad colored stripe on command cards. */
.control-dock :is(.turn-dock,.selection-controls[data-city="true"],.army-panel),
.control-dock .squad-sheet {
  border-color:color-mix(in srgb,var(--command-color) 22%,#bdb69d);
  border-radius:14px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--command-light) 19%,#fffdf4),#f4f0e4f5);
  box-shadow:inset 0 1px 0 #fffef7,inset 0 2px 0 #d5bc7b77,var(--ui-shadow);
}
.control-dock .selection-controls[data-city="true"] .army-panel,
.control-dock .army-panel.compact-orders {
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.turn-dock-status strong { color:var(--command-dark); font-weight:850; }
.turn-dock-status>span { color:var(--ui-muted); }
.control-dock :is(.navigation-icon,.city-menu-tabs button,.army-panel button,.city-upgrade-choices button,.unit-training-choices button),
.squad-sheet :is(button,summary),
.assist-options>summary,
.turn-assist>.assist-turn {
  border-color:color-mix(in srgb,var(--command-color) 20%,#c2bca8);
  background:linear-gradient(180deg,#fffdf6,color-mix(in srgb,var(--command-light) 25%,#eeeee2));
  color:var(--command-dark);
  box-shadow:var(--ui-inset),0 1px 2px #203b4010;
  font-weight:800;
}
.control-dock .assist-turn,.control-dock .assist-options>summary {
  background:linear-gradient(180deg,#fff9e6,#f0e8ce);
  border-color:#c9b77f;
  box-shadow:inset 0 1px 0 #ffffff,inset 0 -1px 0 #b9a26129;
}
.control-dock .primary-button,.unit-upgrade-dialog .primary-button {
  background:linear-gradient(180deg,color-mix(in srgb,var(--command-dark) 84%,var(--command-color)),var(--command-dark));
  color:#fff9e9;
  border-color:color-mix(in srgb,var(--command-dark) 70%,#000);
  box-shadow:inset 0 1px 0 #d8f0e540,inset 0 -2px 0 #071f3840,0 2px 0 color-mix(in srgb,var(--command-dark) 72%,#000),0 3px 6px #173a461a;
  text-shadow:0 1px 1px #0b293b55;
}
.control-dock .city-menu-tabs button[aria-selected="true"],
.control-dock .army-panel button[aria-pressed="true"],
.control-dock #next-city[aria-expanded="true"] {
  background:linear-gradient(180deg,color-mix(in srgb,var(--command-dark) 82%,var(--command-color)),var(--command-dark));
  color:#fff9e7;
  border-color:var(--command-dark);
  box-shadow:inset 0 1px 0 #c8e6dc40,inset 0 -2px 0 #071f3838;
}
.control-dock .city-menu-tabs button[aria-selected="true"] .interface-icon,
.control-dock #next-city[aria-expanded="true"] .interface-icon { color:#254e59; }
.control-dock .city-menu-tabs button { line-height:1.2; }
.city-overview .city-identity>strong { font-size:14px; line-height:1.25; font-weight:850; }
.city-overview small { font-size:12px; line-height:1.25; }
.army-mission strong { font-size:14px; }
.army-mission span,.city-menu-status { font-size:12px; line-height:1.35; }
.army-panel .order-buttons button { font-size:12px; }

/* Portraits do the work; the fine metal rim and small price stay secondary. */
.control-dock .selection-controls .recruit-choice,
.control-dock .selection-controls .recruit-choice[aria-disabled="true"] {
  background:transparent;
  border:0;
  box-shadow:none;
}
.recruit-figure {
  border-color:color-mix(in srgb,var(--command-color) 30%,#c4b68e);
  background:radial-gradient(circle at 38% 25%,#fffdf4 5%,color-mix(in srgb,var(--command-light) 58%,#f2eddb) 76%);
  box-shadow:inset 0 0 0 2px #fffdf3d9,inset 0 -4px 8px #32535615,0 2px 5px #243c4320;
}
.selection-controls .recruit-price {
  border-color:#c5a65d;
  border-radius:8px;
  background:linear-gradient(180deg,#fff9df,#f3e2a8);
  color:#765522;
  box-shadow:inset 0 1px 0 #fffdf5,0 1px 2px #68511c1c;
  font-size:12px;
  line-height:13px;
}
.selection-controls .recruit-choice .recruit-name { font-size:12px; line-height:1.25; color:var(--command-dark); }
.control-dock .recruit-choice[aria-disabled="true"] .recruit-name { color:#79847a; }
.control-dock .recruit-choice[aria-disabled="true"] .recruit-figure { border-color:#b9c1b7; box-shadow:inset 0 0 0 2px #fffdf39e; }
.mythic-choice .recruit-figure { border-color:#b69a52; box-shadow:inset 0 0 0 2px #fff7d0,0 0 0 1px #e2c78088,0 2px 6px #83632226; }
.selection-controls .mythic-choice .mythic-count { color:#81642f; }

/* Squads stay a flat tool strip: no roster, nested cards or extra chrome. */
.squad-sheet-heading>button {
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:9px;
}
.squad-sheet-heading strong { font-weight:850; }
.squad-sheet-heading>div>span { color:#526a62; }
#squad-change-mission[aria-expanded="true"] {
  background:color-mix(in srgb,var(--squad-color) 12%,#fffaf0);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--squad-color) 35%,transparent);
}
.squad-number { box-shadow:inset 0 1px 0 #fff6d86b,inset 0 -2px 0 #142e3633; }
.squad-sheet .squad-formation-control>summary { background:transparent; border-radius:0; box-shadow:none; }
.squad-overview-card { box-shadow:none!important; }

/* Menus use the same calm paper and enamel palette as the battle controls. */
.game-dialog:not(.start-screen):not(.victory-dialog),
.assist-choice-panel,.city-picker,.turn-recap-panel,.tutorial-card {
  border-color:#c4b796;
  background:linear-gradient(145deg,#fffdf6,#f4f0e4);
  box-shadow:inset 0 1px 0 #ffffff,inset 0 2px 0 #d9c38d77,0 20px 70px #102c3d40,0 3px 8px #102c3d16;
}
.game-dialog:not(.start-screen)::backdrop { background:#102b3c8a; backdrop-filter:blur(9px) saturate(.78); }
.game-dialog:not(.start-screen) .dialog-close,
#city-picker-close,#turn-recap-close {
  border:1px solid #d8cfbc;
  border-radius:12px;
  background:linear-gradient(180deg,#fffef8,#efeade);
  color:#415d5d;
  box-shadow:var(--ui-inset);
}
.pause-heading .pause-portrait {
  border:1px solid #c6b78f;
  background:radial-gradient(circle at 40% 30%,#fff9e8,color-mix(in srgb,var(--menu-light) 74%,#e5e4d8));
  box-shadow:inset 0 1px 0 #ffffff,0 2px 5px #173a4615;
}
.pause-menu .pause-heading .eyebrow { font-size:11px; }
.pause-menu .pause-round { font-size:12px; }
.pause-preferences { border-color:#ddd4be; background:#fffcf4bf; box-shadow:inset 0 1px 0 #ffffff; }
.pause-menu .menu-setting+.menu-setting { border-color:#ddd6c4; }
.pause-menu .animation-setting strong,.pause-menu .route-setting>label { font-size:14px; color:var(--ui-ink); }
.pause-menu .animation-setting small,.pause-menu .route-setting p { font-size:12px; color:var(--ui-muted); }
.pause-menu-actions .outline-button,.pause-footer .pause-new-game,
.city-picker-row {
  border-color:#c9c5b1;
  background:linear-gradient(180deg,#fffdf5,#efeede);
  color:var(--ui-ink);
  box-shadow:var(--ui-inset);
}
.game-dialog :is(input,select) {
  border-color:#c9c5b1;
  background-color:#f6f3e7;
  color:var(--ui-ink);
  box-shadow:var(--ui-inset);
}
.pause-menu-actions .outline-button,.pause-footer .pause-new-game { font-size:14px; font-weight:800; }
.pause-menu .save-status { font-size:12px; color:var(--ui-muted); }
.unit-info-summary>div,.recruit-preview-stats>div {
  border:1px solid #d4cebb;
  background:linear-gradient(180deg,#fffdf5,#efeede);
  box-shadow:var(--ui-inset);
}
.unit-info-summary span,.unit-info-heading p:last-child,.unit-info-bonuses dl>div,.unit-info-dialog .unit-info-note { font-size:12px; }
.delegation-settings p,.assist-choice-panel small { font-size:12px; }
.city-picker-row[aria-current="location"] { border-color:var(--city-color); background:color-mix(in srgb,var(--city-light) 48%,#fffaf0); }

/* The title screen's illustrations sit inside one clear, well-made game panel. */
.new-game-section {
  border-color:color-mix(in srgb,var(--tribe-color) 24%,#c5b890);
  background:linear-gradient(145deg,#fffdf5e8,#f8f4e8dc);
  box-shadow:inset 0 1px 0 #ffffff,0 8px 28px #203b4010;
}
.new-game-heading { border-bottom-color:#d6ccb6; }
.start-entry-actions :is(.continue-panel button,.tutorial-entry) {
  border-color:#c7b994;
  background:linear-gradient(180deg,#fffdf6,#f3eddf);
  color:var(--ui-ink);
  box-shadow:var(--ui-inset),0 2px 5px #173a4610;
}
.tribe-pickers button[aria-pressed="true"] {
  border-color:var(--tribe-color);
  background:linear-gradient(180deg,#fffdf5,color-mix(in srgb,var(--tribe-light) 38%,#f6f0df));
  box-shadow:var(--ui-inset),0 3px 10px #173a4612;
}
.tribe-pickers button>span { box-shadow:inset 0 1px 0 #fff4ce99,inset 0 0 0 2px #fff5cf44,0 2px 4px #173a4619; }
.seat-setup-row { border:1px solid #d6cfbb; background:#ecefdfb8; box-shadow:inset 0 1px 0 #fffdf4; }
.start-actions .primary-button {
  background:linear-gradient(180deg,#2e7883,#226372);
  border-color:#1b4d59;
  box-shadow:inset 0 1px 0 #b7dfd955,inset 0 -2px 0 #123f4b44,0 3px 0 #163f4d,0 6px 16px #173a4620;
  color:#fff9e9;
  font-size:15px;
  text-shadow:0 1px 1px #0b293b55;
}

@media(hover:hover) {
  .topnav button:hover:not(:disabled),.stats-button:hover,
  .control-dock .navigation-icon:hover:not(:disabled),
  .pause-menu-actions .outline-button:hover,.pause-footer .pause-new-game:hover {
    border-color:#a58b51;
    filter:brightness(1.025);
  }
  .control-dock .recruit-choice:hover:not([aria-disabled="true"]) .recruit-figure { box-shadow:inset 0 0 0 2px #fffdf5,0 0 0 2px color-mix(in srgb,var(--command-color) 32%,transparent),0 3px 8px #173a4620; }
}
button:active:not(:disabled) .interface-icon { filter:drop-shadow(0 0 0 transparent); }
.control-dock :is(.navigation-icon,.assist-turn,.primary-button):active:not(:disabled),
.topnav button:active:not(:disabled),.stats-button:active { box-shadow:inset 0 2px 4px #173a4626; }
#shuffle-tribes:active .interface-icon { transform:translateY(1px) scale(.96); }

@media(max-width:600px) {
  .control-dock .city-menu-tabs button { font-size:11px; }
  .city-overview small { font-size:12px; }
  .pause-menu .route-setting select { font-size:16px; }
  .selection-controls .recruit-choice .recruit-name { font-size:12px; }
  .selection-controls .mythic-choice .recruit-name { font-size:11px; line-height:1.2; }
  .start-settings>label { font-size:14px; }
  .tribe-pickers button { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
  .interface-icon,#shuffle-tribes .interface-icon,.topnav button,.stats-button,.recruit-figure { transition:none; }
}
body[data-animations="off"] :is(.interface-icon,#shuffle-tribes .interface-icon,.topnav button,.stats-button,.recruit-figure) { transition:none; }