/* Plain light panel surfaces, dark metal headings and the existing wooden controls.
   Character art, navigation, map terrain and spell state overlays keep their own visuals. */
:root {
  /* Muted pale-blue, untextured surfaces beneath every content frame. */
  --frame-bronze: #735d43;
  --frame-bronze-light: #b19367;
  --metal-surface: #dbe7ed;
  --metal-inset: #e5eef3;
  --bronze-action: linear-gradient(180deg, #edc27a, #c89144 50%, #b47c35);
  --control-grain: repeating-linear-gradient(2deg, #ffffff05 0 1px, transparent 1px 5px);
  --control-wood: linear-gradient(#ffffff06, #00000024);
  --control-bevel: inset 0 1px #e2c69c35, inset 0 -2px #100b0780, 0 2px 2px #0005;
  --panel-fill: #dbe7ed;
  --card-fill: #e5eef3;
  --content-ink: #263640;
  --content-muted: #4e626e;
  --content-link: #285471;
  --panel-header: linear-gradient(180deg, #2b3336, #1a2023);
  --frame-edge: linear-gradient(145deg, #897154, #394145 35%, #252c30 75%, #65543f);
  --frame-bevel: inset 0 1px #ffffffa6, 0 4px 10px #0003;
  --stone-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.7 0 0 0 -.72'/%3E%3C/filter%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .93 0 0 0 0 .85 0 0 0 1 -.62'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.22'/%3E%3C/svg%3E");
  --wood-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='84'%3E%3Cfilter id='w' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045 .2' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .035 0 0 0 0 .01 2.4 0 0 0 -1.05'/%3E%3C/filter%3E%3Crect width='420' height='84' filter='url(%23w)'/%3E%3C/svg%3E");
  --planks: repeating-linear-gradient(180deg, transparent 0 25px, #1a0e0699 25px 27px, #ffffff0d 27px 28px);
  --ember: #f08c45;
  --ember-hot: #ff6a1a;
  --ember-deep: #a8340c;
  --stone-edge: #4f4740;
  --wood-edge: #6e4a2c;
  --realm-bg: #13110f;
  --realm-surface: #221e1b;
  --realm-raised: #2e2823;
  --realm-inset: #181513;
  --realm-edge: var(--stone-edge);
  --realm-gold: var(--ember);
  --gold: var(--ember);
  --line: var(--stone-edge);
  --realm-frame: 0 0 0 1px #0b0908, inset 0 2px 8px #000a, 0 10px 26px #000b;
}

/* Keep light-content colors local: the illustrated backdrop and dark header stay legible. */
.game-layout,
dialog,
.gate-card,
.commander-chip {
  --ink: var(--content-ink);
  --muted: var(--content-muted);
  --paper: var(--panel-fill);
  --paper-deep: var(--card-fill);
  --input-surface: var(--card-fill);
  --realm-surface: var(--panel-fill);
  --realm-inset: var(--card-fill);
  --realm-raised: #cadbe4;
  --realm-success: #2f6039;
  --realm-danger: #993d33;
  --line: #93aab8;
  --gold: var(--content-link);
  color: var(--ink);
}

body {
  /* The page backdrop is separate from cards, wooden controls and spell artwork. */
  background: #314b5d;
}

/* No gold corner brackets or hairlines anywhere. */
.frame-corner,
.panel::after,
.ref-wood::after,
.ref-stone::after,
.gate-card::after {
  display: none !important;
}

/* Panels and their headers use one restrained metal material across the UI. */
.panel,
.panel.wood-panel,
.ref-wood,
.ref-stone,
.gate-card,
.battle-feeds,
.room-header,
.battle-setup,
dialog,
dialog.training-modal,
.commander-dashboard .dash-panel,
.commander-dashboard .dash-entry {
  border: 2px solid var(--frame-bronze);
  border-radius: 6px;
  background: var(--panel-fill);
  color: var(--ink);
  box-shadow: var(--frame-bevel);
}
.panel > h2 {
  color: #f4e6cf;
  text-shadow: 0 1px #0008;
  background: var(--panel-header);
  border-bottom: 1px solid var(--frame-bronze);
  box-shadow: inset 0 1px #ffffff05;
}
.panel > h2 .ui-icon,
.ref-plaque .ui-icon {
  color: var(--frame-bronze-light);
  filter: none;
}
.ref-plaque,
.ref-plaque.brown {
  --ink: #f4e6cf;
  background: var(--panel-header);
  border: 1px solid var(--frame-bronze);
  box-shadow: inset 0 1px #ffffff05;
}
.commander-chip,
.ref-stat,
.economy-summary > div,
.skills-grid > div,
.hero-reference-main,
.hero-reference-slot button,
.hero-choice,
.hero-choice.is-locked,
.item-card,
.spell-card,
.mode,
.spell-loadout-pick,
.spell-choice,
.spell-hero-picker a,
.spell-detail,
.spell-hint,
.spell-track,
.spell-bar,
.spell-slot,
.store-tabs a,
.filter-bar,
.stat-strip,
.section-heading,
.battle-entry-rules,
.dialog-nav a,
.battle-resources,
.battle-orders,
.field-command-bar,
.troop-ref-row,
.ref-weapon-skills > div,
.barracks-capacity,
.barracks-stock,
.hero-mini-skill,
.hero-skill-guide > div,
.loan-row,
.room-commander,
.room-map,
.training-tier,
.battle-setup .setup-hero,
.classic-screen-links a,
.notice {
  background: var(--card-fill);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px #fff8;
}
.section-heading {
  border-width: 0 0 1px;
  background: none;
  box-shadow: 0 1px 0 #ffffff08;
}

/* Artwork sits on a plain light face; sprite images and state overlays remain separate. */
.item-art,
.spell-icon,
.spell-slot,
.ref-weapon-skills .skill-weapon {
  background-color: var(--card-fill);
  box-shadow: none;
}
.item-art,
.spell-icon {
  background-image: none;
}
.item-card .text-button,
.hero-choice > a,
.hero-level-reference summary,
.skill-equipment {
  color: var(--content-link);
}
.hero-choice h3,
.hero-choice-vitals,
.hero-reference-slot span,
.setup-section > h3,
.setup-section > h3 > span,
.battle-setup label,
.battle-setup .setup-hero:has(:checked),
.army-stat b,
.status-list dt,
.economy-row.total b,
.skill-full {
  color: var(--ink);
}
.hero-race-name,
.hero-mini-help,
.setup-hint,
.setup-advanced p,
.army-stat small,
.status-list small,
.event-log small {
  color: var(--muted);
}
.form-error,
.spell-incompatible,
.xp-cut {
  color: #953e29;
}
.auth-links {
  color: var(--content-link);
}
.workspace-heading .commander-chip {
  color: var(--ink);
}
.setup-advanced summary {
  color: var(--content-link);
}
.room-countdown b {
  color: #f6d99a;
}

/* Selection has a quiet carved edge; frame geometry and painted assets stay intact. */
.hero-choice.is-active,
.item-card.equipped,
.spell-loadout-slot.is-chosen .spell-loadout-pick,
.hero-reference-slot.selected button,
.battle-setup .setup-hero:has(:checked) {
  background: var(--card-fill);
  border-color: #bda17a;
  box-shadow:
    inset 0 0 0 1px #d2b48c66,
    inset 0 2px 6px #0006;
}

/* Shared walnut controls: fine CSS grain, cream text and a carved bevel. */
button,
.button,
.store-tabs a,
.spell-hero-picker a,
.battle-entry-button,
.classic-screen-links a {
  --control-face: #392a20;
  color: #f6e8d2;
  text-shadow: 0 1px #100b07;
  background: var(--control-grain), var(--control-wood), var(--control-face);
  border-color: #70533c;
  border-bottom-color: #21160e;
  box-shadow: var(--control-bevel);
}
button:hover:not(:disabled),
.button:hover,
.store-tabs a:hover,
.spell-hero-picker a:hover,
.battle-entry-button:hover,
.classic-screen-links a:hover {
  --control-face: #4d392a;
  color: #f6e8d2;
  border-color: #b79b75;
  filter: none;
}
button.primary,
.button.primary,
.gate-card .primary,
.battle-entry-tabs .primary,
.battle-setup [data-battle-setup] > button[type='submit'],
.store-tabs a.active,
.spell-hero-picker a.active,
.training-tabs .is-selected,
.battle-feed-tabs [aria-selected='true'],
.wood-nav > a.active {
  --control-face: #67503b;
  color: #fff0da;
  text-shadow: 0 1px #100b07;
  background: var(--control-grain), var(--control-wood), var(--control-face);
  border-color: #c0a17a;
  border-bottom-color: #302015;
  box-shadow: var(--control-bevel);
  font-weight: 800;
}
button.primary:hover:not(:disabled),
.button.primary:hover,
.store-tabs a.active:hover,
.spell-hero-picker a.active:hover,
.training-tabs .is-selected:hover:not(:disabled),
.battle-feed-tabs [aria-selected='true']:hover,
.wood-nav > a.active:hover {
  --control-face: #796149;
  border-color: #dbc39c;
  filter: none;
}
button:active:not(:disabled),
.button:active,
.store-tabs a:active,
.spell-hero-picker a:active {
  box-shadow:
    inset 0 3px 7px #0009,
    inset 0 -1px #d2b48c33;
  transform: translateY(1px);
}
button.danger,
.button.danger,
.room-leave {
  --control-face: #652e32;
  background: var(--control-grain), var(--control-wood), var(--control-face);
  color: #ffe8e3;
  border-color: #c7837a;
}
button.danger::before,
.button.danger::before,
.room-leave::before {
  content: '!';
  font-weight: 900;
  margin-inline-end: 0.4em;
}
button.danger:hover:not(:disabled),
.button.danger:hover,
.room-leave:hover {
  --control-face: #7b3a3e;
  border-color: #ecc0b7;
}
button:disabled,
button.primary:disabled {
  --control-face: #302923;
  color: #c6bfb3;
  border-color: #6d6256;
  opacity: 0.75;
  box-shadow: inset 0 2px 4px #0008;
  cursor: not-allowed;
}
input[type='checkbox'],
input[type='radio'],
input[type='range'] {
  accent-color: #bda17a;
}

/* Transaction numbers and units stay together; groups can wrap on narrow screens. */
.transaction-summary {
  margin: 16px 0 12px;
  padding: 12px;
  border: 1px solid #a58b69;
  border-radius: 4px;
  background: var(--card-fill);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.8;
  min-width: 0;
}
.transaction-summary > b {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}
.transaction-summary p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 14px;
  color: var(--ink);
}
.transaction-amount {
  display: inline-block;
  white-space: nowrap;
  font-weight: 800;
}
.bank-test-notice {
  color: var(--ink);
  font-size: 14px;
}
form:has(.transaction-summary) {
  min-width: 0;
}
form:has(.transaction-summary) > button {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.spell-compatibility {
  flex-basis: 100%;
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.8;
}

/* These are selection cards, rather than wooden action buttons. */
.spell-loadout-pick,
.spell-choice,
.spell-slot,
.hero-reference-slot button,
.hero-reference-slot.selected button {
  background: var(--card-fill);
  color: var(--ink);
  text-shadow: none;
  box-shadow: none;
}
.spell-loadout-pick:hover:not(:disabled),
.spell-choice:hover:not(:disabled),
.spell-slot:hover:not(:disabled),
.hero-reference-slot button:hover:not(:disabled) {
  background: #f2e8d4;
  color: var(--ink);
}
.spell-number {
  color: #fff3d0;
}
.spell-choice:disabled,
.spell-loadout-pick:disabled {
  color: var(--muted);
  opacity: 1;
  filter: none;
}
.spell-slot:focus-visible {
  outline-color: #a96d29;
}
.queue-label.is-boost,
.queue-label.is-bonus,
.hero-label.is-overflow,
.hero-label.is-rage {
  color: #79501c;
}
.queue-label.is-freeze,
.hero-label.is-frost {
  color: #225b72;
}
.queue-label.is-disrupt,
.hero-label.is-burn {
  color: #963c32;
}
.queue-label.is-debt,
.hero-label.is-siphon {
  color: #6d4290;
}
.hero-label.is-regen {
  color: #286443;
}
input:not([type='checkbox']):not([type='range']):not([type='radio']),
select,
textarea {
  background: var(--input-surface);
  color: var(--ink);
  color-scheme: light;
  border-color: var(--line);
  box-shadow: inset 0 1px 2px #302b2414;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline-color: #a96d29;
}

/* Battle screen: stone rails and timber menus with ember edges. */
.battle-rail ul,
.army-bar,
.battle-status {
  border-color: #5a4f45;
  background: var(--card-fill);
  color: var(--ink);
}
.army-hero img {
  border-color: var(--wood-edge);
  box-shadow: 0 0 10px -3px #ff6a1a99;
}
.map-action-menu {
  --ink: #f4e6cf;
  --muted: #e0d0b5;
  color: var(--ink);
  background: var(--wood-tex), linear-gradient(#5b3b22f2, #3a2414f2);
  border-color: #2a1308;
  box-shadow:
    0 8px 22px #0009,
    0 0 16px -4px #ff6a1aa6,
    inset 0 1px #ffd9a833;
}
.map-action-menu::after {
  background: #3a2414;
  border-color: #2a1308;
}

/* Remaining boxes from the older skins, so no navy or gold-edged box is left behind. */
.setup-spells .panel {
  border: 6px solid transparent;
  border-radius: 8px;
  background: var(--panel-fill);
  border-color: var(--frame-bronze);
}
.map-tools,
#battle-content .map-tools,
.map-legend,
.map-zoom,
.map-order-feedback,
.mode-card,
.alliance-card,
.race-grid > div,
.gem-package,
.race,
.field-status,
.duel-round,
.stage-list > div,
.rail-spells,
.rail-troops,
.battle-elapsed,
.army-stat,
.battle-vital,
.battle-ready,
.resist-toggle,
.battle-command-guide,
.battle-stance-bar,
.setup-duration,
.room-commander.is-empty,
.queue-status,
.spell-timer,
.training-tier.locked,
.dialog-close,
.training-modal .dialog-close,
.hero-choice > .hero-skill-toggle,
.badge,
#toast {
  background: var(--card-fill);
  color: var(--ink);
  border-color: var(--line);
}
.resist-toggle.is-on {
  border-color: #c0a17a;
  box-shadow: inset 0 0 0 1px #d2b48c66;
}
.badge.green {
  background: #dcebd4;
  color: #315a36;
  border-color: #64885b;
}
#toast {
  color: var(--content-ink);
}
#toast.error {
  color: #ffe3df;
  background: #3a1612;
  border-color: #a4392c;
}
.progress,
.status-meter,
.hero-health-track,
.result-xp div,
.battle-vital progress,
.hero-skill-progress progress,
.hero-mini-skill progress {
  background: #120f0d;
  border-color: #3c352f;
}
.battle-vital progress::-webkit-progress-bar,
.hero-skill-progress progress::-webkit-progress-bar,
.hero-mini-skill progress::-webkit-progress-bar,
.ref-vitals meter::-webkit-meter-bar {
  background: #120f0d;
}
.rail-face {
  background: #1d1916;
}
th {
  background: var(--wood-tex), linear-gradient(#5b3b22, #3d2715);
  color: #f4e6cf;
}
table {
  background: var(--card-fill);
}
tbody tr:nth-child(even) {
  background: #302b2408;
}
dialog::backdrop {
  background: #0b0806c7;
}
.workspace-heading {
  border-bottom-color: #4f474066;
}
.badge.gold {
  color: #ffd2a8;
  background: linear-gradient(#5a2a12, #3a1a0b);
  border-color: var(--ember-deep);
  box-shadow: 0 0 10px -3px #ff6a1a99;
}
/* Commander dashboard: one scoped component using the shared metal frame material. */
.game-shell:has(.commander-dashboard) {
  isolation: isolate;
}
.game-shell:has(.commander-dashboard)::before {
  content: '';
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(#080c10a6, #080b0dc4),
    url('/dashboard/war-table.webp') center / cover;
}
.game-shell:has(.commander-dashboard) > .workspace-heading {
  display: none;
}
.commander-dashboard {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    'entry entry entry entry entry entry entry entry commander commander commander commander'
    'achievements achievements achievements achievements achievements achievements achievements achievements commander commander commander commander'
    'battles battles battles battles battles battles battles heroes heroes heroes heroes heroes';
  gap: 18px;
  align-items: start;
  padding-block: 12px 24px;
  font-size: 16px;
  direction: ltr;
}
.commander-dashboard > * {
  min-width: 0;
  direction: rtl;
}
.commander-dashboard .dash-panel,
.commander-dashboard .dash-entry {
  overflow: hidden;
  margin: 0;
}
.commander-dashboard .dash-panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-height: 50px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--frame-bronze);
  background: var(--panel-header);
  box-shadow: inset 0 1px #ffffff05;
}
.commander-dashboard h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 20px;
  line-height: 1.6;
  color: #fff0d6;
}
.commander-dashboard .dash-panel-heading .ui-icon {
  color: var(--frame-bronze-light);
}
.commander-dashboard a {
  color: var(--content-link);
  text-decoration: none;
}
.commander-dashboard a:focus-visible {
  outline: 3px solid #ffe3a0;
  outline-offset: -3px;
}
.commander-dashboard .dash-panel-heading > a {
  color: #f4e6cf;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
}
.commander-dashboard .dash-panel-body {
  padding: 16px;
}
.commander-dashboard small {
  font-size: 14px;
  color: var(--muted);
}
.commander-dashboard .dash-commander {
  grid-area: commander;
  align-self: start;
}
.commander-dashboard .dash-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.commander-dashboard .dash-emblem {
  flex: 0 0 100px;
  height: 142px;
  display: grid;
  place-items: center;
  background: var(--card-fill);
  border: 2px solid var(--frame-bronze);
  border-radius: 4px 4px 36px 36px;
  box-shadow: inset 0 1px #ffffff0a;
}
.commander-dashboard .dash-emblem .icon {
  width: 88px;
  height: 96px;
}
.commander-dashboard .dash-identity-info {
  flex: 1;
  min-width: 0;
}
.commander-dashboard .dash-identity-info > b {
  display: block;
  overflow-wrap: anywhere;
  padding: 10px;
  margin-bottom: 12px;
  text-align: center;
  background: var(--metal-inset);
  border: 1px solid #4b4f4f;
  border-radius: 4px;
  font-size: 22px;
}
.commander-dashboard .dash-identity-info label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  margin: 0 0 6px;
}
.commander-dashboard .dash-identity-info label .icon {
  width: 24px;
  height: 30px;
}
.commander-dashboard .dash-identity-info small {
  display: block;
  margin-top: 7px;
  line-height: 1.8;
}
.commander-dashboard progress {
  display: block;
  width: 100%;
  height: 14px;
  border: 1px solid #6e6251;
  border-radius: 4px;
  overflow: hidden;
  background: var(--metal-inset);
  accent-color: #d7a14d;
}
.commander-dashboard progress::-webkit-progress-bar {
  background: var(--metal-inset);
}
.commander-dashboard progress::-webkit-progress-value {
  background: var(--bronze-action);
}
.commander-dashboard progress::-moz-progress-bar {
  background: var(--bronze-action);
}
.commander-dashboard .dash-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.commander-dashboard .dash-stat {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 82px;
  padding: 10px;
  border: 1px solid #484e4f;
  border-bottom-color: var(--line);
  border-radius: 5px;
  background: var(--card-fill);
  box-shadow:
    inset 0 1px #ffffff0d,
    0 2px 3px #0005;
}
.commander-dashboard .dash-stat > div {
  min-width: 0;
  flex: 1;
}
.commander-dashboard .dash-stat small,
.commander-dashboard .dash-stat b {
  display: block;
  overflow-wrap: anywhere;
}
.commander-dashboard .dash-stat b {
  color: var(--ink);
  font-size: 25px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.commander-dashboard .dash-stat > .icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.commander-dashboard .dash-income {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.8;
}
.commander-dashboard .dash-commander-foot {
  padding-top: 0;
  font-size: 14px;
}
.commander-dashboard .dash-commander-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.commander-dashboard .dash-entry {
  grid-area: entry;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 326px;
  background:
    linear-gradient(270deg, #06090be8, #0b10134d 56%, #0002) padding-box,
    url('/dashboard/war-table.webp') center 65% / cover padding-box,
    var(--frame-edge) border-box;
}
.commander-dashboard .dash-warriors {
  position: absolute;
  inset: 0 auto 0 0;
  width: 48%;
  pointer-events: none;
  z-index: -1;
}
.commander-dashboard .dash-warriors img {
  position: absolute;
  bottom: -22px;
  left: -35px;
  height: 105%;
  width: 80%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(5px 0 8px #000a);
}
.commander-dashboard .dash-warriors img + img {
  left: 30%;
  height: 94%;
  z-index: -1;
}
.commander-dashboard .dash-entry-copy {
  width: 57%;
  padding: 24px;
  margin-inline-end: auto;
}
.commander-dashboard .dash-entry h2 {
  font-size: clamp(28px, 3vw, 42px);
  color: #ffdc9c;
  text-shadow: 0 3px 5px #000;
}
.commander-dashboard .dash-entry p {
  font-size: 16px;
  line-height: 1.9;
  color: #f5eade;
  margin: 12px 0 22px;
}
.commander-dashboard .dash-battle-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 64px;
  min-width: 0;
  padding: 0 6px;
  color: #fff0da;
  background: none;
  border-style: solid;
  border-color: transparent;
  border-width: 12px 24px 14px;
  border-image: url('/dashboard/wood/cta-plank.webp') 18% 12% 20% 12% fill / 12px 24px 14px 24px stretch;
  border-radius: 12px;
  box-shadow: none;
  filter: drop-shadow(0 3px 2px #0008);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.5;
  text-shadow: 0 1px 2px #120b06;
  transition:
    filter 160ms,
    transform 160ms;
}
.commander-dashboard .dash-battle-cta:hover {
  filter: brightness(1.08) drop-shadow(0 4px 2px #0007);
  transform: translateY(-1px);
}
.commander-dashboard .dash-battle-cta:active {
  filter: brightness(0.95) drop-shadow(0 1px 1px #0008);
  transform: translateY(1px);
}
.commander-dashboard .dash-battle-cta:focus-visible {
  outline: 3px solid #fff0da;
  outline-offset: 4px;
}
.commander-dashboard .dash-battle-cta .icon {
  width: 36px;
  height: 38px;
}
.commander-dashboard .dash-achievements {
  grid-area: achievements;
}
.commander-dashboard .achievement-head {
  text-align: left;
  margin-bottom: 12px;
}
.commander-dashboard .achievement-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 128px));
  justify-content: space-evenly;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.commander-dashboard .achievement {
  --tier: var(--frame-bronze);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  gap: 4px;
  text-align: center;
}
.commander-dashboard .achievement.tier-silver {
  --tier: #b2bec4;
}
.commander-dashboard .achievement.tier-gold {
  --tier: #e4bb69;
}
.commander-dashboard .achievement-slot {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid var(--tier);
  border-radius: 6px;
  background: var(--panel-fill);
  box-shadow: inset 0 1px #ffffff08;
}
.commander-dashboard .achievement-slot img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}
.commander-dashboard .achievement b {
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.commander-dashboard .achievement.tier-none > b,
.commander-dashboard .achievement.tier-none > small,
.commander-dashboard .achievement.tier-none > .achievement-pips {
  display: none;
}
.commander-dashboard .achievement-pips {
  display: flex;
  gap: 5px;
}
.commander-dashboard .achievement-pips i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #555;
}
.commander-dashboard .achievement-pips .bronze {
  background: #c07a3e;
}
.commander-dashboard .achievement-pips .silver {
  background: #c9d1db;
}
.commander-dashboard .achievement-pips .gold {
  background: #f0c45a;
}
.commander-dashboard .dash-battles {
  grid-area: battles;
}
.commander-dashboard .dash-history {
  display: grid;
  gap: 10px;
}
.commander-dashboard .dash-history-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  min-height: 72px;
  background: var(--card-fill);
  border: 1px solid #42494a;
  border-radius: 5px;
}
.commander-dashboard .dash-result,
.commander-dashboard .dash-rewards,
.commander-dashboard .dash-rewards > span {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.commander-dashboard .dash-result {
  color: var(--ink);
}
.commander-dashboard .dash-result.is-win {
  color: #315b35;
}
.commander-dashboard .dash-rewards {
  flex: 1;
  color: var(--ink);
  font-size: 14px;
}
.commander-dashboard .dash-rewards .icon {
  width: 30px;
  height: 32px;
}
.commander-dashboard .dash-view {
  font-size: 14px;
}
.commander-dashboard .dash-roster {
  grid-area: heroes;
}
.commander-dashboard .dash-heroes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 3px 2px 10px;
}
.commander-dashboard .dash-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--frame-bronze);
  border-radius: 6px;
  background: var(--card-fill);
}
.commander-dashboard .dash-hero.is-active {
  border-color: #c5a06a;
  box-shadow: inset 0 0 0 1px #c5a06a;
}
.commander-dashboard .dash-hero > img {
  width: 100%;
  height: 145px;
  object-fit: cover;
  object-position: center 18%;
}
.commander-dashboard .dash-hero > div {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: var(--card-fill);
}
.commander-dashboard .dash-hero b {
  overflow-wrap: anywhere;
  color: var(--ink);
}
.commander-dashboard .dash-hero span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
}
.commander-dashboard .dash-hero .icon {
  width: 24px;
  height: 28px;
}
.commander-dashboard .dash-empty {
  margin: 8px 0;
  color: var(--muted);
  line-height: 1.9;
}
@media (max-width: 1100px) {
  .commander-dashboard {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr);
    grid-template-areas: 'entry commander' 'achievements commander' 'battles heroes';
    gap: 14px;
  }
  .commander-dashboard .dash-panel-body {
    padding: 12px;
  }
  .commander-dashboard .dash-stat {
    padding: 8px;
    gap: 6px;
  }
  .commander-dashboard .dash-stat b {
    font-size: 22px;
  }
  .commander-dashboard .dash-emblem {
    flex-basis: 70px;
    height: 110px;
  }
  .commander-dashboard .dash-emblem .icon {
    width: 62px;
    height: 72px;
  }
  .commander-dashboard .dash-entry-copy {
    width: 68%;
    padding: 18px;
  }
  .commander-dashboard .dash-warriors {
    width: 43%;
    opacity: 0.8;
  }
  .commander-dashboard .dash-battle-cta {
    font-size: 20px;
    gap: 8px;
    padding: 0 4px;
  }
  .commander-dashboard .dash-history-row {
    flex-wrap: wrap;
  }
  .commander-dashboard .dash-rewards {
    flex-basis: 55%;
  }
}
@media (max-width: 800px) {
  .commander-dashboard {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'entry' 'commander' 'achievements' 'battles' 'heroes';
  }
  .commander-dashboard .dash-entry-copy {
    width: 57%;
  }
  .commander-dashboard .dash-warriors {
    opacity: 1;
    width: 48%;
  }
}
@media (max-width: 550px) {
  .commander-dashboard {
    gap: 16px;
    padding-top: 0;
  }
  .commander-dashboard .dash-identity {
    gap: 12px;
  }
  .commander-dashboard .dash-stats {
    gap: 8px;
  }
  .commander-dashboard .dash-stat {
    min-height: 76px;
  }
  .commander-dashboard .dash-stat > .icon {
    width: 40px;
    flex-basis: 40px;
    height: 40px;
  }
  .commander-dashboard .dash-stat b {
    font-size: 16px;
  }
  .commander-dashboard .dash-entry {
    display: block;
    min-height: 0;
    background-position:
      center,
      center top,
      center;
  }
  .commander-dashboard .dash-entry-copy {
    width: 100%;
    padding: 16px;
    background: #0c1113ed;
  }
  .commander-dashboard .dash-entry h2 {
    font-size: 30px;
  }
  .commander-dashboard .dash-entry p {
    margin: 8px 0 14px;
    font-size: 14px;
  }
  .commander-dashboard .dash-warriors {
    position: relative;
    inset: auto;
    z-index: 0;
    width: 100%;
    height: 210px;
    opacity: 1;
    background: url('/dashboard/war-table.webp') center 65% / cover;
  }
  .commander-dashboard .dash-warriors img {
    bottom: 0;
    left: 3%;
    width: 58%;
    height: 100%;
    object-position: center bottom;
    filter: brightness(1.13) saturate(1.06);
  }
  .commander-dashboard .dash-warriors img + img {
    left: 43%;
    width: 54%;
    height: 94%;
    z-index: 0;
  }
  .commander-dashboard .dash-battle-cta {
    font-size: 22px;
    min-height: 60px;
    border-width: 10px 18px 12px;
    border-image-width: 10px 18px 12px 18px;
  }
  .commander-dashboard .dash-panel-heading {
    padding: 10px;
  }
  .commander-dashboard h2 {
    font-size: 18px;
  }
  .commander-dashboard .dash-panel-body {
    padding: 10px;
  }
  .commander-dashboard .achievement-grid {
    gap: 6px;
  }
  .commander-dashboard .achievement-slot {
    border-width: 1px;
  }
  .commander-dashboard .dash-history-row {
    padding: 10px;
    gap: 10px;
  }
  .commander-dashboard .dash-rewards {
    flex-basis: 100%;
    order: 3;
  }
  .commander-dashboard .dash-result {
    flex: 1;
  }
  .commander-dashboard .dash-heroes {
    gap: 6px;
  }
  .commander-dashboard .dash-hero {
    border-width: 2px;
  }
  .commander-dashboard .dash-hero > img {
    height: 100px;
  }
  .commander-dashboard .dash-hero > div {
    padding: 8px 4px;
  }
  .commander-dashboard .dash-hero span {
    flex-wrap: wrap;
    gap: 3px;
  }
}
@media (max-width: 380px) {
  .commander-dashboard .dash-stat {
    padding: 6px;
    gap: 4px;
  }
  .commander-dashboard .dash-stat > .icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }
  .commander-dashboard .dash-stat b {
    font-size: 14px;
  }
}

/* Shared plank controls. The earlier walnut skin remains the fallback for compact map,
   portrait/disclosure and text-only controls, which deliberately do not join this scope.
   Native CSS nesting keeps every variant behind the same explicit exclusion boundary. */
:is(
  button,
  a.button,
  .store-tabs a,
  .spell-hero-picker a,
  .battle-entry-button,
  .classic-screen-links a,
  .battle-setup [data-battle-setup] > button[type='submit']
):not(
  :where(
    .dash-battle-cta,
    .text-button,
    .ghost,
    .dialog-close,
    .hero-skill-toggle,
    .owl-adviser,
    .resist-toggle,
    .spell-slot,
    .spell-info-button,
    .spell-loadout-pick,
    .spell-choice,
    .rail-spells,
    .map-action,
    .map-tools *,
    .map-zoom *,
    .map-action-menu *,
    .battle-command-guide *,
    .field-command-bar *,
    .map-order-feedback *,
    .battle-orders *,
    .army-bar *,
    .spell-hint *,
    .hero-reference-slot *,
    [data-spell-move],
    [data-spell-cancel],
    [data-map-action-cancel],
    [data-clear-selection],
    [data-zoom],
    [data-map-reset]
  )
) {
  --plank-tone: brightness(0.9);
  --plank-shadow: drop-shadow(0 2px 1px #0007);
  position: relative;
  background: none;
  border: solid transparent;
  border-width: 4px 8px 5px;
  border-image: url('/dashboard/wood/control-plank.webp') 14% 10% 14% 10% fill / 4px 8px 5px 8px stretch;
  border-radius: 8px;
  box-shadow: none;
  color: #fff3df;
  text-shadow: 0 1px 2px #100a06;
  filter: var(--plank-tone) var(--plank-shadow);
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  padding: 4px 10px;
  white-space: normal;
  overflow-wrap: anywhere;
  transition:
    filter 160ms,
    transform 160ms;

  /* Main page and modal submissions, full-width hero actions and battle entry. */
  &:is(
    form > button[type='submit'],
    fieldset > button[type='submit'],
    .gate-card .primary,
    .hero-choice .primary,
    .section-heading .primary,
    .room-entry .primary,
    .room-ready-button,
    .battle-entry-button,
    .result-banner > .button
  ) {
    border-width: 12px 24px 14px;
    border-image: url('/dashboard/wood/cta-plank.webp') 18% 12% 20% 12% fill / 12px 24px 14px 24px stretch;
    padding: 2px 8px;
    min-height: 56px;
  }

  &.battle-entry-button {
    min-height: 120px;
  }

  &:is(.primary, .gate-card .primary) {
    --plank-tone: brightness(1.1);
    font-weight: 900;
  }

  /* Tabs use the fine plank even when the first tab is a primary action. */
  &:is(
    .store-tabs a,
    .spell-hero-picker a,
    .training-tabs button,
    .battle-feed-tabs button,
    .battle-entry-tabs a,
    .inventory-category-links a,
    .classic-screen-links a
  ) {
    border-width: 4px 8px 5px;
    border-image: url('/dashboard/wood/control-plank.webp') 14% 10% 14% 10% fill / 4px 8px 5px 8px stretch;
    padding: 4px 10px;
    min-height: 44px;
  }

  &:is(.active, .is-selected, [aria-selected='true']) {
    --plank-tone: brightness(1.14);
    --plank-shadow: drop-shadow(0 4px 2px #0009);
    font-weight: 900;
    text-decoration: underline;
    text-decoration-color: #fff0da;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    transform: translateY(-2px);
  }

  &:hover:not(:disabled):not([aria-disabled='true']) {
    filter: var(--plank-tone) brightness(1.08) drop-shadow(0 3px 2px #0008);
    transform: translateY(-1px);
  }
  &:is(.active, .is-selected, [aria-selected='true']):hover:not(:disabled) {
    transform: translateY(-3px);
  }
  /* Pre-stained texture instead of a filter, so the cream text keeps its colour.
     [class] lifts specificity above the large-plank submit selector (the room exit is a submit). */
  &:is(.danger, .room-leave)[class] {
    --plank-tone: brightness(1);
    border-image-source: url('/dashboard/wood/danger-plank.webp');
    color: #fff5ef;
    font-weight: 800;
    /* The existing ! pseudo-element is retained. */
  }
  &:active:not(:disabled):not([aria-disabled='true']) {
    filter: var(--plank-tone) brightness(0.92) drop-shadow(0 1px 1px #0008);
    transform: translateY(1px);
  }
  &:focus-visible {
    outline: 3px solid #fff0da;
    outline-offset: 4px;
  }
  &:is(:disabled, [aria-disabled='true']) {
    color: #c9c4bb;
    filter: grayscale(0.9) brightness(0.75) drop-shadow(0 1px 0 #0005);
    opacity: 0.8;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
  }

  @media (max-width: 550px) {
    border-width: 3px 6px 4px;
    border-image-width: 3px 6px 4px 6px;
    padding-inline: 7px;
    &:is(
      form > button[type='submit'],
      fieldset > button[type='submit'],
      .gate-card .primary,
      .hero-choice .primary,
      .section-heading .primary,
      .room-entry .primary,
      .room-ready-button,
      .battle-entry-button,
      .result-banner > .button
    ) {
      border-width: 10px 18px 12px;
      border-image-width: 10px 18px 12px 18px;
      padding-inline: 5px;
    }
    &:is(
      .store-tabs a,
      .spell-hero-picker a,
      .training-tabs button,
      .battle-feed-tabs button,
      .battle-entry-tabs a,
      .inventory-category-links a,
      .classic-screen-links a
    ) {
      border-width: 3px 6px 4px;
      border-image-width: 3px 6px 4px 6px;
      padding-inline: 7px;
    }
  }
}