@font-face {
  font-family: "Blinker";
  src: local("Blinker Regular"), local("Blinker"), url(/fonts/blinker-regular-latin.woff2) format(woff2);
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Blinker";
  src: local("Blinker Regular"), local("Blinker"), url(/fonts/binker-regular-latin-ext.woff2) format(woff2);
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Blinker";
  src: local("Blinker Bold"), url(/fonts/blinker-bold-latin.woff2) format(woff2);
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Blinker";
  src: local("Blinker Bold"), url(/fonts/blinker-bold-latin-ext.woff2) format(woff2);
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Lato";
  src: local("Lato Regular"), local("Lato"), url(/fonts/lato-regular-plus-minus.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+002B, U+002D, U+00B1;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Lato";
  src: local("Lato Bold"), url(/fonts/lato-bold-plus-minus.woff2) format("woff2");
  font-display: swap;
  unicode-range: U+002B, U+002D, U+00B1;
  font-weight: 700;
  font-style: normal;
}
:root {
  --solarized-c-base03: #002b36;
  --solarized-c-base02: #073642;
  --solarized-c-base01: #586e75;
  --solarized-c-base00: #657b83;
  --solarized-c-base0: #839496;
  --solarized-c-base1: #93a1a1;
  --solarized-c-base2: #eee8d5;
  --solarized-c-base3: #fdf6e3;
  --solarized-c-yellow: #b58900;
  --solarized-c-orange: #cb4b16;
  --solarized-c-red: #dc322f;
  --solarized-c-magenta: #d33682;
  --solarized-c-violet: #6c71c4;
  --solarized-c-blue: #268bd2;
  --solarized-c-cyan: #2aa198;
  --solarized-c-green: #859900;
}

:root {
  --silphium-c-background-1: var(--solarized-c-base3);
  --silphium-c-background-2: var(--solarized-c-base2);
  --silphium-c-content-1: var(--solarized-c-base1);
  --silphium-c-content-2: var(--solarized-c-base00);
  --silphium-c-content-3: var(--solarized-c-base03);
  --silphium-c-accent-1: var(--solarized-c-yellow);
  --silphium-c-accent-2: var(--solarized-c-orange);
  --silphium-c-accent-3: var(--solarized-c-red);
  --silphium-c-accent-4: var(--solarized-c-magenta);
  --silphium-c-accent-5: var(--solarized-c-violet);
  --silphium-c-accent-6: var(--solarized-c-blue);
  --silphium-c-accent-7: var(--solarized-c-cyan);
  --silphium-c-accent-8: var(--solarized-c-green);
}

:root {
  --color-background: var(--silphium-c-background-1);
  --color-background-soft: var(--silphium-c-background-2);
  --color-border: var(--silphium-c-content-1);
  --color-text: var(--silphium-c-content-3);
  --color-text-inactive: var(--silphium-c-content-1);
}

[popover] {
  background: var(--color-background);
  border: none;
  border-radius: 8px;
  filter: drop-shadow(0 0 10px black);
  margin: auto;
  animation: view 100ms;
}
[popover][open] {
  display: flex;
}
@keyframes view {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}
@media (orientation: landscape) {
  [popover] {
    max-height: 75vw;
  }
}
@media (orientation: portrait) {
  [popover] {
    max-width: 90vw;
  }
}

.module-list {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: center;
  gap: 1rem;
}
.module-list a .logo {
  border-radius: 8px;
  object-fit: cover;
}
@media (orientation: portrait) {
  .module-list a .logo {
    max-width: calc(100vw - 64px);
  }
}
@media (orientation: landscape) {
  .module-list a .logo {
    max-width: calc(50vw - 64px);
  }
}

.module-page {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.module-page header {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.module-page header .back {
  width: 48px;
  height: 48px;
}
.module-page header .banner {
  display: flex;
  flex-direction: column;
  max-width: calc(100vw - 64px);
  margin-left: auto;
  margin-right: auto;
}
.module-page header .banner .logo {
  border-radius: 8px;
}
.module-page main {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: center;
}
.module-page main a .icon {
  height: 128px;
  width: 128px;
}
.module-page main a .name {
  text-align: center;
  max-width: 128px;
}

.faction-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.faction-page .header-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.faction-page .header-container .nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.faction-page .header-container .nav .back,
.faction-page .header-container .nav .button {
  cursor: pointer;
  width: 48px;
  height: 48px;
}
.faction-page .header-container .nav .help {
  cursor: help;
}
.faction-page .header-container .header {
  margin-left: auto;
  margin-right: auto;
}

.faction-header {
  font-size: 32pt;
  display: grid;
  gap: 8px;
  grid: "icon title" auto/128px auto;
  max-width: calc(100vw - 64px);
}
.faction-header .title {
  grid-area: title;
  justify-self: center;
  display: grid;
  grid: "name" auto "filter" auto/1fr;
  align-content: center;
}
.faction-header .title .name {
  grid-area: name;
  align-self: center;
  text-align: center;
}
.faction-header .title .eras {
  grid-area: filter;
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: row;
}
.faction-header .title .eras input[type=radio],
.faction-header .title .eras input[type=checkbox] {
  display: none;
}
.faction-header .title .eras .era {
  font-size: 12pt;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  place-items: center;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 8px;
  cursor: pointer;
  color: var(--color-text-inactive);
  max-width: 128px;
}
.faction-header .title .eras .era svg {
  width: 64px;
  height: 64px;
}
.faction-header .title .eras .era span {
  text-align: center;
}
.faction-header .title .eras .era:hover, .faction-header .title .eras .era:focus, .faction-header .title .eras .era.checked {
  color: var(--color-text);
}
.faction-header .icon {
  grid-area: icon;
  align-self: center;
  width: 128px;
  height: 128px;
}

.roster {
  display: flex;
  gap: 2rem;
  flex-flow: row wrap;
}
.roster .roster-group {
  display: flex;
  flex-flow: row;
  align-items: start;
  gap: 2px;
}
@media (orientation: portrait) {
  .roster .roster-group {
    flex-flow: column;
  }
}
.roster .roster-group .unit-cards {
  display: flex;
  flex-flow: row wrap;
}
.roster .roster-group .legend {
  display: flex;
  width: 60px;
  height: 60px;
  min-width: 60px;
  margin: 2px;
}

.roster-group .map {
  display: flex;
  flex-flow: column;
}
.roster-group .map .name {
  font-size: x-large;
  font-weight: bold;
}

.unit-card {
  display: grid;
  margin: 2px;
  width: min-content;
  font-size: 14pt;
  grid: "name" 3rem "card" min-content "pool" min-content/1fr;
  cursor: default;
}
.unit-card .name {
  grid-area: name;
  font-size: smaller;
  align-self: end;
}
.unit-card .frame {
  grid-area: card;
  display: grid;
  gap: 2px;
  width: 194px;
  border: 1px solid black;
  border-radius: 2px;
  align-items: center;
  padding-left: 2px;
  padding-right: 2px;
  grid: "size     size     image    image     image    " 28px "cost     cost     image    image     image    " 28px "upkeep   upkeep   image    image     image    " 28px "mental   mental   image    image     image    " 28px "terrain  terrain  terrain  abilities abilities" 28px "weapon1  weapon1  weapon1  abilities abilities" 28px "weapon2  weapon2  weapon2  abilities abilities" 28px "defense1 defense1 defense1 defense1  defense1 " 28px "defense2 defense2 defense2 defense2  defense2 " minmax(0, 1fr)/24px 1fr 30px 24px 24px;
  user-select: none;
}
.unit-card .frame .image {
  grid-area: image;
  width: 82px;
  height: 112px;
  place-self: start right;
  margin-right: -2px;
}
.unit-card .frame .stat {
  display: flex;
  gap: 1px;
  align-items: center;
}
.unit-card .frame .weapon1-row .icon,
.unit-card .frame .weapon2-row .icon,
.unit-card .frame .defense1-row .icon,
.unit-card .frame .defense2-row .icon, .unit-card .frame .terrain .icon, .unit-card .frame .mental-row .icon, .unit-card .frame .upkeep-row .icon, .unit-card .frame .cost-row .icon, .unit-card .frame .size-row .icon {
  width: 24px;
  height: 24px;
}
.unit-card .frame .weapon1-row,
.unit-card .frame .weapon2-row,
.unit-card .frame .defense1-row,
.unit-card .frame .defense2-row, .unit-card .frame .terrain, .unit-card .frame .mental-row, .unit-card .frame .upkeep-row, .unit-card .frame .cost-row, .unit-card .frame .size-row {
  display: grid;
  gap: 2px;
  place-self: stretch;
  align-items: center;
}
.unit-card .frame .weapon1-row .icon,
.unit-card .frame .weapon2-row .icon,
.unit-card .frame .defense1-row .icon,
.unit-card .frame .defense2-row .icon, .unit-card .frame .terrain .icon, .unit-card .frame .mental-row .icon, .unit-card .frame .upkeep-row .icon, .unit-card .frame .cost-row .icon, .unit-card .frame .size-row .icon {
  grid-area: icon;
}
.unit-card .frame .abilities .ability,
.unit-card .frame .defense1-row.defense1-row .hp,
.unit-card .frame .defense2-row.defense2-row .hp, .unit-card .frame .mental-row .mental .morale, .unit-card .frame .upkeep-row .upkeep, .unit-card .frame .cost-row .cost, .unit-card .frame .size-row .size {
  align-self: center;
}
.unit-card .frame .weapon1-row .details,
.unit-card .frame .weapon2-row .details,
.unit-card .frame .defense1-row .details,
.unit-card .frame .defense2-row .details, .unit-card .frame .weapon1-row .strength,
.unit-card .frame .weapon2-row .strength,
.unit-card .frame .defense1-row .strength,
.unit-card .frame .defense2-row .strength {
  align-self: baseline;
}
.unit-card .frame .defense1-row.defense1-row .hp,
.unit-card .frame .defense2-row.defense2-row .hp {
  justify-self: end;
}
.unit-card .frame .size-row {
  grid-area: size;
  grid: "icon size" 1fr/24px 1fr;
}
.unit-card .frame .size-row .size {
  display: flex;
  grid-area: size;
}
.unit-card .frame .size-row .size .soldiers,
.unit-card .frame .size-row .size .officers {
  align-self: baseline;
}
.unit-card .frame .size-row .size .officers {
  font-size: x-small;
}
.unit-card .frame .size-row .formations {
  display: flex;
  align-items: center;
  justify-content: right;
  margin-left: 4px;
}
.unit-card .frame .size-row .formations .formation {
  width: 20px;
  height: 20px;
}
.unit-card .frame .cost-row {
  grid-area: cost;
  grid: "icon cost" 1fr/24px 1fr;
}
.unit-card .frame .cost-row .cost {
  grid-area: cost;
  display: flex;
  align-items: center;
}
.unit-card .frame .cost-row .cost .turns {
  display: flex;
  align-items: center;
  font-size: smaller;
}
.unit-card .frame .cost-row .cost .turns .attribute {
  height: 1em;
  width: auto;
}
.unit-card .frame .upkeep-row {
  grid-area: upkeep;
  grid: "icon upkeep" 1fr/24px 1fr;
}
.unit-card .frame .upkeep-row .upkeep {
  grid-area: upkeep;
}
.unit-card .frame .mental-row {
  grid-area: mental;
  grid: "icon mental" 1fr/24px 1fr;
}
.unit-card .frame .mental-row .mental {
  grid-area: mental;
  display: flex;
  gap: 2px;
  align-items: center;
}
.unit-card .frame .mental-row .stamina {
  display: flex;
  gap: 1px;
  font-size: smaller;
  justify-self: start;
  align-items: center;
}
.unit-card .frame .mental-row .stamina .attribute {
  height: 1em;
  width: auto;
}
.unit-card .frame .terrain {
  grid-area: terrain;
  display: grid;
  grid: "scrub forest sand snow" 1fr/32px 32px 32px 32px;
  align-self: center;
  align-items: center;
  justify-items: center;
}
.unit-card .frame .terrain .scrub,
.unit-card .frame .terrain .forest,
.unit-card .frame .terrain .sand,
.unit-card .frame .terrain .snow {
  display: flex;
  align-items: center;
}
.unit-card .frame .terrain .scrub {
  grid-area: scrub;
}
.unit-card .frame .terrain .forest {
  grid-area: forest;
}
.unit-card .frame .terrain .sand {
  grid-area: sand;
}
.unit-card .frame .terrain .snow {
  grid-area: snow;
}
.unit-card .frame .terrain span {
  font-size: small;
  justify-self: left;
}
.unit-card .frame .attribute {
  height: 20px;
  width: 20px;
}
.unit-card .frame .weapons {
  display: grid;
  grid-row: weapon1/weapon2;
  grid-column: weapon1;
  align-self: start;
  gap: 2px;
  grid: "weapon1" 28px "weapon2" 28px / 1fr;
}
.unit-card .frame .defenses {
  display: grid;
  grid-row: defense1/defense2;
  grid-column: defense1;
  align-self: start;
  gap: 2px;
  grid: "defense1" 28px "defense2" minmax(0, 1fr) / 1fr;
}
.unit-card .frame .weapon1-row.weapon1-row, .unit-card .frame .weapon1-row.weapon2-row,
.unit-card .frame .weapon2-row.weapon1-row,
.unit-card .frame .weapon2-row.weapon2-row,
.unit-card .frame .defense1-row.weapon1-row,
.unit-card .frame .defense1-row.weapon2-row,
.unit-card .frame .defense2-row.weapon1-row,
.unit-card .frame .defense2-row.weapon2-row {
  grid: "icon strength details" 1fr/24px 1em 1fr;
}
.unit-card .frame .weapon1-row.defense1-row, .unit-card .frame .weapon1-row.defense2-row,
.unit-card .frame .weapon2-row.defense1-row,
.unit-card .frame .weapon2-row.defense2-row,
.unit-card .frame .defense1-row.defense1-row,
.unit-card .frame .defense1-row.defense2-row,
.unit-card .frame .defense2-row.defense1-row,
.unit-card .frame .defense2-row.defense2-row {
  grid: "icon strength details hp" 1fr/24px 1em 1fr 24px;
}
.unit-card .frame .weapon1-row.defense1-row .hp, .unit-card .frame .weapon1-row.defense2-row .hp,
.unit-card .frame .weapon2-row.defense1-row .hp,
.unit-card .frame .weapon2-row.defense2-row .hp,
.unit-card .frame .defense1-row.defense1-row .hp,
.unit-card .frame .defense1-row.defense2-row .hp,
.unit-card .frame .defense2-row.defense1-row .hp,
.unit-card .frame .defense2-row.defense2-row .hp {
  grid-area: hp;
  position: relative;
  text-align: center;
}
.unit-card .frame .weapon1-row.defense1-row .hp .ability, .unit-card .frame .weapon1-row.defense2-row .hp .ability,
.unit-card .frame .weapon2-row.defense1-row .hp .ability,
.unit-card .frame .weapon2-row.defense2-row .hp .ability,
.unit-card .frame .defense1-row.defense1-row .hp .ability,
.unit-card .frame .defense1-row.defense2-row .hp .ability,
.unit-card .frame .defense2-row.defense1-row .hp .ability,
.unit-card .frame .defense2-row.defense2-row .hp .ability {
  width: 24px;
  height: 24px;
}
.unit-card .frame .weapon1-row.defense1-row .hp span, .unit-card .frame .weapon1-row.defense2-row .hp span,
.unit-card .frame .weapon2-row.defense1-row .hp span,
.unit-card .frame .weapon2-row.defense2-row .hp span,
.unit-card .frame .defense1-row.defense1-row .hp span,
.unit-card .frame .defense1-row.defense2-row .hp span,
.unit-card .frame .defense2-row.defense1-row .hp span,
.unit-card .frame .defense2-row.defense2-row .hp span {
  position: absolute;
  font-size: smaller;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.unit-card .frame .weapon1-row .lethality,
.unit-card .frame .weapon2-row .lethality,
.unit-card .frame .defense1-row .lethality,
.unit-card .frame .defense2-row .lethality {
  grid-area: icon;
  align-self: end;
  justify-self: end;
  margin-right: -2px;
  font-size: xx-small;
}
.unit-card .frame .weapon1-row .strength,
.unit-card .frame .weapon2-row .strength,
.unit-card .frame .defense1-row .strength,
.unit-card .frame .defense2-row .strength {
  grid-area: strength;
  font-weight: bold;
  font-size: larger;
  justify-self: end;
}
.unit-card .frame .weapon1-row .details,
.unit-card .frame .weapon2-row .details,
.unit-card .frame .defense1-row .details,
.unit-card .frame .defense2-row .details {
  grid-area: details;
  display: flex;
  gap: 1px;
  font-size: smaller;
  justify-self: start;
  align-items: center;
}
.unit-card .frame .weapon1-row .details .attribute,
.unit-card .frame .weapon2-row .details .attribute,
.unit-card .frame .defense1-row .details .attribute,
.unit-card .frame .defense2-row .details .attribute {
  height: 1em;
  width: auto;
}
.unit-card .frame .weapon1-row {
  grid-area: weapon1;
}
.unit-card .frame .weapon2-row {
  grid-area: weapon2;
}
.unit-card .frame .defense1-row {
  grid-area: defense1;
}
.unit-card .frame .defense2-row {
  grid-area: defense2;
}
.unit-card .frame .abilities {
  grid-area: abilities;
  align-self: center;
  display: flex;
  flex-flow: row wrap;
  align-content: start;
  align-items: center;
  justify-content: right;
  height: 74px;
}
.unit-card .frame .abilities .ability {
  width: 24px;
  height: 24px;
}
.unit-card .pool {
  align-self: start;
}

.help-dialog {
  display: grid;
  padding: 1rem;
  grid: "help-l card help-r details" 460px/1fr min-content 1fr 256px;
  gap: 12px;
  align-content: center;
  align-items: center;
}
.help-dialog .unit-card {
  grid-area: card;
}
.help-dialog .unit-card .frame .abilities {
  position: relative;
}
.help-dialog .unit-card .row {
  border: 1px dashed;
  border-radius: 4px;
  position: relative;
}
.help-dialog .unit-card .row::before {
  content: " ";
  position: absolute;
  left: -14px;
  display: inline-block;
  width: 14px;
  height: 0px;
  border-top: 2px dotted;
  grid-row: 1;
  grid-column: 1;
  place-self: center start;
  border-color: inherit;
}
.help-dialog .unit-card .row.name {
  border-color: var(--silphium-c-content-3);
}
.help-dialog .unit-card .row.name::before {
  top: 0.5rem;
  left: -12px;
  width: 12px;
}
.help-dialog .unit-card .row.size-row {
  border-color: var(--silphium-c-accent-5);
}
.help-dialog .unit-card .row.cost-row {
  border-color: var(--silphium-c-accent-2);
}
.help-dialog .unit-card .row.upkeep-row {
  border-color: var(--silphium-c-accent-7);
}
.help-dialog .unit-card .row.mental-row {
  border-color: var(--silphium-c-accent-4);
}
.help-dialog .unit-card .row.terrain {
  border-color: var(--silphium-c-accent-1);
}
.help-dialog .unit-card .row.weapons {
  border-color: var(--silphium-c-accent-3);
}
.help-dialog .unit-card .row.defenses {
  border-color: var(--silphium-c-accent-6);
}
.help-dialog .unit-card .row.abilities {
  border-color: var(--silphium-c-accent-8);
}
.help-dialog .unit-card .row.abilities::before {
  left: unset;
  right: -14px;
}
.help-dialog .unit-card .row.pool {
  border-color: var(--silphium-c-content-2);
}
.help-dialog .unit-card .row.pool::before {
  left: unset;
  right: -14px;
}
.help-dialog .descr {
  font-size: 14pt;
}
.help-dialog .descr > button {
  font-size: smaller;
}
.help-dialog .descr.right {
  grid-area: help-r;
  display: grid;
  gap: 2px;
  grid: "." 3rem "." 28px "." 28px "." 28px "." 28px "abilities" 28px "abilities" 28px "abilities" 28px "." 28px "." 0 "pool" 28px/max-content;
  place-items: center start;
}
.help-dialog .descr.right .abilities {
  grid-area: abilities;
}
.help-dialog .descr.right .pool {
  grid-area: pool;
}
.help-dialog .descr.left {
  grid-area: help-l;
  display: grid;
  gap: 2px;
  grid: "name" 3rem "soldiers" 28px "cost" 28px "upkeep" 28px "mental" 28px "terrain" 28px "weapons" 28px "weapons" 28px "defense" 28px "defense" 0 "." 28px/max-content;
  place-items: center end;
}
.help-dialog .descr.left .name {
  grid-area: name;
  align-self: end;
}
.help-dialog .descr.left .soldiers {
  grid-area: soldiers;
}
.help-dialog .descr.left .cost {
  grid-area: cost;
}
.help-dialog .descr.left .upkeep {
  grid-area: upkeep;
}
.help-dialog .descr.left .mental {
  grid-area: mental;
}
.help-dialog .descr.left .terrain {
  grid-area: terrain;
}
.help-dialog .descr.left .weapons {
  grid-area: weapons;
}
.help-dialog .descr.left .defenses {
  grid-area: defense;
}
.help-dialog .descr.details {
  display: flex;
  flex-flow: column;
  height: 100%;
  overflow: hidden;
  justify-content: center;
}
.help-dialog .descr.details details {
  display: flex;
  flex-flow: column;
  gap: 0.2rem;
}
.help-dialog .descr.details details:has(~ details[open]) {
  display: none;
}
.help-dialog .descr.details details .weapon1-row {
  border-color: var(--silphium-c-accent-3);
}
.help-dialog .descr.details details .defense1-row {
  border-color: var(--silphium-c-accent-6);
}
.help-dialog .descr.details details .abilities {
  height: unset;
}
.help-dialog .descr.details details summary {
  display: flex;
  align-items: center;
  font-size: smaller;
  cursor: pointer;
}
.help-dialog .descr.details details + details {
  margin-top: 8px;
}
.help-dialog .descr.details details .help-table {
  display: grid;
  grid-template-columns: 28px max-content;
  grid-template-rows: 28px;
  column-gap: 0.5rem;
  row-gap: 2px;
  place-items: center start;
  font-size: smaller;
  margin-left: 1rem;
}
.help-dialog .descr.details details .help-table strong {
  font-weight: bold;
}
.help-dialog .descr.details details .help-table .icon {
  height: 24px;
  width: 24px;
}
.help-dialog .descr.details details .help-table .soldiers {
  color: var(--silphium-c-accent-4);
}
.help-dialog .descr.details details .help-table .officers {
  color: var(--silphium-c-accent-6);
}
.help-dialog .descr.details details .help-table .morale {
  color: var(--silphium-c-accent-2);
}
.help-dialog .descr.details details .help-table .strength {
  color: var(--silphium-c-accent-3);
}
.help-dialog .descr.details details .help-table .lethality {
  color: var(--silphium-c-accent-5);
}
.help-dialog .descr.details details .help-table .defense {
  color: var(--silphium-c-accent-8);
}
.help-dialog .descr.details details .help-table .replenish {
  color: var(--silphium-c-accent-7);
}
.help-dialog .descr.details details .help-table .interval {
  color: var(--silphium-c-accent-3);
}
.help-dialog .descr.details details .help-table .cross {
  font-weight: bold;
  font-size: larger;
  margin-left: 4px;
  place-self: center;
}
.help-dialog .descr.details details .help-table .max {
  color: var(--silphium-c-accent-5);
}
.help-dialog .descr.details details[open] ~ details {
  display: none;
}
.help-dialog .descr.details details[open] summary .size-row .soldiers {
  color: var(--silphium-c-accent-4);
}
.help-dialog .descr.details details[open] summary .size-row .officers {
  color: var(--silphium-c-accent-6);
}
.help-dialog .descr.details details[open] summary .mental-row .morale {
  color: var(--silphium-c-accent-2);
}
.help-dialog .descr.details details[open] summary .weapon1-row .strength {
  color: var(--silphium-c-accent-3);
}
.help-dialog .descr.details details[open] summary .weapon1-row .lethality {
  color: var(--silphium-c-accent-5);
}
.help-dialog .descr.details details[open] summary .defense1-row .strength {
  color: var(--silphium-c-accent-8);
}
.help-dialog .descr.details details[open] summary .pool .average {
  color: var(--silphium-c-accent-7);
}
.help-dialog .descr.details details[open] summary .pool .interval {
  color: var(--silphium-c-accent-3);
}
.help-dialog .descr.details details[open] summary .pool .max {
  color: var(--silphium-c-accent-5);
}
.help-dialog .descr.details details .unit-card {
  row-gap: 0;
  grid-template-rows: 0 min-content;
}
.help-dialog .descr.details details .unit-card .row::before {
  content: unset;
}
.help-dialog .descr.details details .unit-card .frame {
  border: none;
  row-gap: 0;
}
.help-dialog .descr.details details .unit-card .frame:has(.size-row) {
  grid-template-rows: 28px 0 0 0 0 0 0 0 0;
}
.help-dialog .descr.details details .unit-card .frame:has(.cost-row) {
  grid-template-rows: 0 28px 0 0 0 0 0 0 0;
}
.help-dialog .descr.details details .unit-card .frame:has(.upkeep-row) {
  grid-template-rows: 0 0 28px 0 0 0 0 0 0;
}
.help-dialog .descr.details details .unit-card .frame:has(.mental-row) {
  grid-template-rows: 0 0 0 28px 0 0 0 0 0;
}
.help-dialog .descr.details details .unit-card .frame:has(.terrain) {
  grid-template-rows: 0 0 0 0 28px 0 0 0 0;
}
.help-dialog .descr.details details .unit-card .frame:has(.weapon1-row) {
  grid-template-rows: 0 0 0 0 0 28px 0 0 0;
}
.help-dialog .descr.details details .unit-card .frame:has(.defense1-row) {
  grid-template-rows: 0 0 0 0 0 0 0 28px 0;
}
.help-dialog .descr.details details .unit-card .frame:has(.abilities) {
  grid-template-rows: 0 0 0 0 28px 0 0 0 0;
  grid-template-columns: 0 0 0 24px 24px;
}
.help-dialog .descr.details details .unit-card:has(.pool) {
  grid-template-rows: 0 0 min-content;
}

.pool {
  display: flex;
  gap: 4px;
  justify-content: left;
  align-items: center;
  user-select: none;
  grid-area: pool;
}
.pool .turns {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-left: 4px;
}
.pool .turns .icon {
  width: 24px;
  height: 24px;
}
.pool .turns .average {
  font-weight: bold;
  font-size: larger;
}
.pool .turns .interval {
  font-size: smaller;
}
.pool .max {
  font-weight: bold;
  font-size: larger;
  margin-left: 4px;
}
.pool .exp {
  width: 24px;
  height: 24px;
}
.pool .faction {
  height: 24px;
  object-fit: contain;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

body {
  color: var(--color-text);
  background: var(--color-background);
  font-family: Lato, Blinker, sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.5rem;
  font-weight: normal;
}

@layer reset {
  a {
    all: unset;
  }
  a[href] {
    cursor: pointer;
  }
  button,
  label:has(input[type=radio]),
  label:has(input[type=checkbox]) {
    all: unset;
  }
  button,
  label:has(input[type=radio]),
  label:has(input[type=checkbox]),
  [role=button] {
    display: flex;
    flex-direction: column;
  }
  button:disabled,
  label:has(input[type=radio]):disabled,
  label:has(input[type=checkbox]):disabled,
  [role=button]:disabled {
    filter: grayscale(100%) opacity(30%);
  }
  button:not(:disabled):hover,
  label:has(input[type=radio]):not(:disabled):hover,
  label:has(input[type=checkbox]):not(:disabled):hover,
  [role=button]:not(:disabled):hover {
    filter: drop-shadow(0 0 0.2rem black);
  }
  button:not(:disabled):active,
  label:has(input[type=radio]):not(:disabled):active,
  label:has(input[type=checkbox]):not(:disabled):active,
  [role=button]:not(:disabled):active {
    filter: drop-shadow(0 0 0.1rem black);
  }
}