/* Foundation 0.9A — War of Fate battlefield shell.
   Layout and interaction affordances only. Authoritative rules remain in Python. */

:root {
  --oath-ink: #07090d;
  --oath-night: #0a0e16;
  --oath-stone: #151b25;
  --oath-stone-2: #202936;
  --oath-gold: #d6b66e;
  --oath-gold-bright: #f0d99a;
  --oath-gold-dim: #6f5b32;
  --oath-frost: #83b9e8;
  --oath-void: #9b78d2;
  --oath-blood: #a85359;
  --oath-moss: #527665;
  --oath-parchment: #d7d1c4;
}

body.war-of-fate-ui {
  background:
    radial-gradient(circle at 13% 7%, rgba(100, 71, 155, .2), transparent 30rem),
    radial-gradient(circle at 86% 4%, rgba(216, 169, 86, .12), transparent 34rem),
    linear-gradient(180deg, #090c13 0, #06080c 58%, #090b10 100%);
}

body.war-of-fate-ui::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .22;
  background:
    linear-gradient(115deg, transparent 0 14%, rgba(255,255,255,.025) 14.2% 14.5%, transparent 14.7% 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px);
}

.war-shell {
  width: min(1880px, calc(100% - 24px));
  padding-top: 12px;
}

.oath-banner {
  position: relative;
  overflow: hidden;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  min-height: 148px;
  padding: 19px 24px;
  border-color: var(--oath-gold-dim);
  background:
    linear-gradient(90deg, rgba(17, 21, 31, .97), rgba(15, 19, 28, .86) 35%, rgba(16, 18, 25, .92)),
    radial-gradient(circle at 72% 30%, rgba(121, 86, 164, .18), transparent 28rem);
  box-shadow: 0 18px 58px rgba(0,0,0,.38), inset 0 0 0 1px rgba(240,217,154,.05);
}

.oath-banner::before,
.oath-banner::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.oath-banner::before {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 38%),
    linear-gradient(90deg, transparent 0 12%, rgba(214,182,110,.09) 12.2% 12.4%, transparent 12.6% 87%, rgba(214,182,110,.09) 87.2% 87.4%, transparent 87.6%);
}

.oath-banner::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--oath-gold-dim), var(--oath-gold-bright), var(--oath-gold-dim), transparent);
  opacity: .7;
}

.banner-crest {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 1px solid var(--oath-gold-dim);
  outline: 1px solid rgba(214,182,110,.12);
  outline-offset: 5px;
  border-radius: 50%;
  color: var(--oath-gold-bright);
  font-size: 2rem;
  text-shadow: 0 0 24px rgba(214,182,110,.48);
  background: radial-gradient(circle, rgba(214,182,110,.12), rgba(8,10,15,.85) 70%);
}

.oath-brand {
  position: relative;
  z-index: 1;
  text-align: center;
}

.oath-brand h1 {
  margin: 3px 0 0;
  color: #efe8db;
  font-family: "Segoe Print", "Bradley Hand", "Brush Script MT", cursive;
  font-size: clamp(2.9rem, 5.3vw, 5.7rem);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.05em;
  text-shadow: 0 4px 18px rgba(0,0,0,.78), 0 0 36px rgba(214,182,110,.12);
  transform: rotate(-1deg);
}

.oath-brand > p:last-child {
  margin-top: 9px;
  color: #aab2bf;
  font-family: Georgia, serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .68rem;
}

.oath-build {
  position: relative;
  z-index: 1;
  border-left-color: rgba(214,182,110,.22);
}

.oath-build strong {
  color: var(--oath-gold-bright);
}

.match-ribbon,
.oath-status {
  border-color: #343b49;
  background: linear-gradient(180deg, rgba(18,23,31,.96), rgba(9,12,18,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.oath-status {
  border-color: var(--oath-gold-dim);
}

.war-stage {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(650px, 2.7fr) minmax(230px, .72fr);
  gap: 10px;
  align-items: stretch;
}

.commander-shell,
.battlefield-center {
  min-width: 0;
  border: 1px solid var(--oath-gold-dim);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16,21,29,.98), rgba(8,11,16,.98));
  box-shadow: 0 18px 52px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.018);
}

.commander-shell {
  position: relative;
  overflow: hidden;
  padding: 10px;
}

.commander-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .58;
}

.commander-shell--p1::before {
  background:
    radial-gradient(circle at 50% 8%, rgba(214,182,110,.13), transparent 17rem),
    linear-gradient(160deg, rgba(80,98,122,.09), transparent 46%);
}

.commander-shell--p2::before {
  background:
    radial-gradient(circle at 50% 8%, rgba(129,78,104,.16), transparent 17rem),
    linear-gradient(200deg, rgba(104,70,120,.1), transparent 46%);
}

.commander-identity,
.command-resources,
.command-oaths,
.enemy-doctrine,
.commander-motto {
  position: relative;
  z-index: 1;
}

.commander-identity {
  min-height: 190px;
  padding: 15px 10px 13px;
  text-align: center;
  border-bottom: 1px solid rgba(214,182,110,.2);
}

.commander-kicker {
  display: block;
  color: var(--oath-gold);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.commander-sigil {
  width: 78px;
  height: 78px;
  margin: 12px auto 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(214,182,110,.45);
  color: var(--oath-gold-bright);
  font-size: 2.3rem;
  background:
    radial-gradient(circle at 50% 40%, rgba(214,182,110,.18), rgba(14,18,25,.88) 66%),
    #10151d;
  box-shadow: 0 0 30px rgba(214,182,110,.12);
}

.commander-sigil--enemy {
  color: #d6a3ae;
  border-color: rgba(168,83,89,.45);
  background: radial-gradient(circle at 50% 40%, rgba(168,83,89,.2), rgba(14,18,25,.9) 66%);
  box-shadow: 0 0 30px rgba(168,83,89,.12);
}

.commander-identity h2 {
  margin: 0;
  color: #ece8df;
  font: 700 1.35rem/1.1 Georgia, serif;
}

.commander-identity p {
  margin: 6px 0 0;
  color: #8994a4;
  font: italic .72rem Georgia, serif;
}

.command-resources.player-zone {
  margin-top: 10px;
  padding: 10px;
  border-radius: 9px;
  background: rgba(8,11,16,.72);
}

.command-resources .player-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.command-resources .player-head h2 {
  font-size: 1rem;
}

.command-resources .stronghold strong {
  font-size: 1.35rem;
}

.command-resources .resource-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.command-resources .resource-grid div {
  padding: 7px;
  background: rgba(5,8,12,.82);
}

.command-oaths,
.enemy-doctrine {
  margin-top: 10px;
  border-radius: 9px;
  background: rgba(9,12,18,.78);
}

.command-oaths .soul-line {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.command-oaths .soul-line span {
  padding: 6px 4px;
  text-align: center;
}

.enemy-doctrine p {
  margin: 0;
  color: #9aa3b1;
  font-size: .72rem;
  line-height: 1.55;
}

.commander-motto {
  margin: 12px 4px 2px;
  padding: 11px 8px;
  border-top: 1px solid rgba(214,182,110,.18);
  color: #c4af77;
  text-align: center;
  font: italic .75rem Georgia, serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.commander-motto--enemy {
  color: #bd8f9a;
}

.battlefield-center {
  padding: 9px;
  border-color: rgba(214,182,110,.42);
  background:
    radial-gradient(circle at 50% 0%, rgba(94,77,131,.12), transparent 28rem),
    linear-gradient(180deg, rgba(17,22,30,.98), rgba(7,10,15,.99));
}

.battlefield-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  padding: 5px 7px 10px;
  border-bottom: 1px solid rgba(214,182,110,.18);
}

.battlefield-header h2 {
  margin: 0;
  color: #eee8dc;
  font: 700 1.4rem Georgia, serif;
}

.battlefield-header > p {
  max-width: 430px;
  margin: 0;
  color: #788493;
  font-size: .68rem;
  text-align: right;
}

.battle-lanes.battlefield {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

.battle-lanes .front-column {
  position: relative;
  min-height: 205px;
  display: grid;
  grid-template-columns: minmax(92px, .86fr) minmax(105px, 1fr) minmax(150px, 1.35fr) minmax(105px, 1fr) minmax(92px, .86fr);
  grid-template-rows: auto auto minmax(122px, 1fr);
  gap: 5px 6px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid #394354;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(40,76,61,.13), transparent 34%, rgba(0,0,0,.04) 50%, transparent 66%, rgba(93,48,56,.14)),
    linear-gradient(180deg, #111721, #0b1017);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.battle-lanes .front-column::before,
.battle-lanes .front-column::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.battle-lanes .front-column::before {
  inset: 42px 0 0;
  opacity: .5;
}

.battle-lanes .front-column[data-front="west"]::before {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(63,75,102,.16), transparent 58%),
    linear-gradient(155deg, transparent 0 48%, rgba(145,184,220,.035) 49% 51%, transparent 52%);
}

.battle-lanes .front-column[data-front="center"]::before {
  background:
    radial-gradient(circle at 50% 76%, rgba(130,106,185,.16), transparent 34%),
    linear-gradient(90deg, transparent 47%, rgba(214,182,110,.035) 49% 51%, transparent 53%);
}

.battle-lanes .front-column[data-front="east"]::before {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(59,92,76,.18), transparent 60%),
    linear-gradient(25deg, transparent 0 47%, rgba(123,102,58,.035) 49% 51%, transparent 53%);
}

.battle-lanes .front-column::after {
  top: 42px;
  bottom: 8px;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, rgba(214,182,110,.28), transparent);
}

.battle-lanes .front-column:hover {
  border-color: #66748a;
}

.battle-lanes .front-column > header {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 1;
  margin: -2px -2px 2px;
  padding: 4px 8px 7px;
  border-bottom-color: rgba(214,182,110,.22);
}

.battle-lanes .front-column > header span {
  color: var(--oath-gold-bright);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.battle-lanes .rank-label {
  position: relative;
  z-index: 1;
  margin: 0;
  align-self: end;
  text-align: center;
  font-size: .56rem;
  letter-spacing: .08em;
}

/* 0.9B.4 semantic layout. Visual position follows explicit perspective/rank metadata,
   never child order: own rear | own vanguard | objects/front | enemy vanguard | enemy rear. */
.battle-lanes .rank-label[data-perspective="own"][data-rank="rear"] { grid-column: 1; grid-row: 2; }
.battle-lanes .board-slot[data-perspective="own"][data-rank="rear"] { grid-column: 1; grid-row: 3; }
.battle-lanes .rank-label[data-perspective="own"][data-rank="vanguard"] { grid-column: 2; grid-row: 2; }
.battle-lanes .board-slot[data-perspective="own"][data-rank="vanguard"] { grid-column: 2; grid-row: 3; }
.battle-lanes .object-lane[data-zone="front-objects"] { grid-column: 3; grid-row: 2 / 4; }
.battle-lanes .rank-label[data-perspective="enemy"][data-rank="vanguard"] { grid-column: 4; grid-row: 2; }
.battle-lanes .board-slot[data-perspective="enemy"][data-rank="vanguard"] { grid-column: 4; grid-row: 3; }
.battle-lanes .rank-label[data-perspective="enemy"][data-rank="rear"] { grid-column: 5; grid-row: 2; }
.battle-lanes .board-slot[data-perspective="enemy"][data-rank="rear"] { grid-column: 5; grid-row: 3; }

.battle-lanes .board-slot {
  position: relative;
  z-index: 1;
  min-height: 122px;
  padding: 5px;
  border-style: solid;
  background: rgba(8,11,16,.68);
}

.battle-lanes .own-slot {
  border-color: rgba(82,118,101,.62);
  box-shadow: inset 0 0 20px rgba(82,118,101,.05);
}

.battle-lanes .enemy-slot {
  border-color: rgba(168,83,89,.53);
  box-shadow: inset 0 0 20px rgba(168,83,89,.05);
}

.battle-lanes .object-lane {
  position: relative;
  z-index: 1;
  min-height: 100%;
  margin: 0;
  padding: 12px 8px;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(214,182,110,.15);
  border-radius: 8px;
  background: rgba(5,8,12,.38);
}

.battle-lanes .object-lane::before {
  content: "FRONT";
  margin-bottom: 8px;
  color: rgba(214,182,110,.52);
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .22em;
}

.battle-lanes .object-lane span {
  max-width: 100%;
  text-align: center;
  white-space: normal;
}

.battle-lanes .unit-token {
  height: 100%;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-color: #475264;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 30%),
    linear-gradient(160deg, #1a222e, #0f141c 72%);
  box-shadow: 0 7px 18px rgba(0,0,0,.22);
}

.battle-lanes .unit-token.own {
  border-color: rgba(93,138,114,.68);
}

.battle-lanes .unit-token.enemy {
  border-color: rgba(163,84,94,.65);
}

.command-dock {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(240px, .72fr) minmax(480px, 1.8fr) minmax(310px, 1fr);
  gap: 10px;
  align-items: stretch;
}

.command-dock > .panel,
.ledger-row > .panel {
  border-color: #384252;
  background:
    linear-gradient(180deg, rgba(19,25,34,.98), rgba(9,12,18,.98));
  box-shadow: 0 12px 34px rgba(0,0,0,.2);
}

.selection-panel {
  border-color: var(--oath-gold-dim) !important;
}

.selection-detail {
  min-height: 178px;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 16px;
  border: 1px dashed #465163;
  border-radius: 9px;
  color: #9aa4b3;
  text-align: center;
  background: rgba(7,10,15,.55);
}

.selection-detail strong {
  color: #e6e1d7;
  font: 700 1rem Georgia, serif;
}

.selection-detail p {
  max-width: 250px;
  margin: 7px 0 0;
  font-size: .72rem;
  line-height: 1.5;
}

.selection-glyph {
  margin-bottom: 8px;
  color: var(--oath-gold);
  font-size: 1.6rem;
}

.command-hand .hand {
  min-height: 184px;
  align-items: stretch;
}

.command-hand .hand-card {
  flex-basis: 138px;
  min-height: 174px;
  border-color: #675b3d;
  background:
    linear-gradient(180deg, rgba(214,182,110,.08), transparent 31%),
    linear-gradient(160deg, #221d16, #11161d 66%);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.command-hand .hand-card:hover {
  transform: translateY(-5px);
  border-color: var(--oath-gold-bright);
  box-shadow: 0 12px 26px rgba(0,0,0,.35), 0 0 0 1px rgba(214,182,110,.08);
}

.command-actions .actions {
  grid-template-columns: 1fr;
  max-height: 310px;
}

.command-actions .action-card {
  border-color: #3e4959;
  background: linear-gradient(180deg, #171e28, #10151d);
}

.command-actions .action-card:hover:not(:disabled) {
  border-color: var(--oath-gold-bright);
}

.command-actions .notice {
  border-left-color: var(--oath-gold);
  background: rgba(8,11,16,.72);
}

.ledger-row {
  margin-top: 10px;
}

.ledger-row .ledger-panel {
  padding: 11px 13px;
}

.ledger-row .events {
  max-height: 190px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.oath-footer {
  padding: 6px 3px;
  border-top: 1px solid rgba(214,182,110,.13);
}

@media (max-width: 1320px) {
  .war-stage {
    grid-template-columns: minmax(205px, .68fr) minmax(560px, 2.35fr) minmax(205px, .68fr);
  }
  .battle-lanes .front-column {
    grid-template-columns: minmax(80px, .82fr) minmax(92px, 1fr) minmax(126px, 1.2fr) minmax(92px, 1fr) minmax(80px, .82fr);
  }
  .command-dock {
    grid-template-columns: minmax(210px, .65fr) minmax(390px, 1.6fr) minmax(270px, .95fr);
  }
}

@media (max-width: 1080px) {
  .war-stage {
    grid-template-columns: 1fr 1fr;
  }
  .battlefield-center {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .commander-shell--p1 { grid-column: 1; grid-row: 2; }
  .commander-shell--p2 { grid-column: 2; grid-row: 2; }
  .commander-identity { min-height: 120px; }
  .commander-sigil { width: 54px; height: 54px; margin: 8px auto; font-size: 1.6rem; }
  .command-dock {
    grid-template-columns: 1fr 1fr;
  }
  .command-hand {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}

@media (max-width: 760px) {
  .war-shell { width: min(100% - 12px, 1880px); }
  .oath-banner {
    grid-template-columns: 1fr;
    min-height: 0;
    text-align: center;
  }
  .banner-crest { display: none; }
  .oath-brand h1 { font-size: clamp(2.45rem, 12vw, 4rem); }
  .oath-build { border-left: 0; padding-left: 0; text-align: center; }
  .war-stage,
  .command-dock {
    grid-template-columns: 1fr;
  }
  .battlefield-center,
  .commander-shell--p1,
  .commander-shell--p2,
  .command-hand {
    grid-column: 1;
    grid-row: auto;
  }
  .commander-shell--p1 { order: 1; }
  .battlefield-center { order: 2; }
  .commander-shell--p2 { order: 3; }
  .battlefield-header { align-items: start; }
  .battlefield-header > p { display: none; }
  .battle-lanes .front-column {
    min-width: 720px;
  }
  .battle-lanes {
    overflow-x: auto;
    padding-bottom: 5px !important;
  }
  .ledger-row .events {
    grid-template-columns: 1fr;
  }
}