/* The active UI. Layout, spacing and type live here; decorative assets never position content. */
:root {
  --ink: #eee5cd;
  --muted: #bdc8b3;
  --paper: #1d414d;
  --paper-deep: #17333d;
  --line: #526857;
  --teal: #91b77b;
  --gold: #d9b777;
  --shadow: 0 5px 22px #08273155;
  --forest: #2a4e3e;
  --wood-surface: #4d3928;
  --wood-edge: #8d7045;
  --input-surface: #132f38;
}
body {
  font-size: 16px;
  line-height: 1.9;
  background: #346b70 url('/reference/theme/img/gen/main_bg.jpg') center top/cover fixed no-repeat;
  color: var(--ink);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(#153f4544, #163f39a8);
  pointer-events: none;
  z-index: -1;
}
h1 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.5;
}
h2 {
  font-size: 22px;
  line-height: 1.6;
}
h3 {
  font-size: 18px;
  line-height: 1.6;
}
p {
  font-size: 15px;
  line-height: 1.95;
}
small {
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
}
a,
button,
input,
select,
textarea {
  touch-action: manipulation;
}
button,
.button {
  min-height: 44px;
  padding: 9px 18px;
  font-size: 14px;
  line-height: 1.75;
  border-radius: 9px;
  box-shadow: 0 2px 0 #55432225;
  white-space: normal;
}
button:hover,
.button:hover {
  transform: none;
  filter: brightness(1.06);
}
button:active,
.button:active {
  transform: translateY(1px);
}
button.primary,
.button.primary {
  background: linear-gradient(#e4c784, #cba35a);
  color: #3d321f;
  border-color: #ad8848;
  box-shadow: 0 2px 0 #8c693c55;
  font-weight: 700;
}
.danger {
  background: #f8e5dc;
  color: #963d2a;
  border-color: #d4a08b;
}
.ghost,
.text-button {
  box-shadow: none;
}
.text-button {
  font-size: 14px;
  color: #356653;
  min-height: 40px;
}
.small {
  font-size: 13px;
  min-height: 38px;
  padding: 6px 12px;
}
.icon {
  width: 26px;
  height: 28px;
  object-fit: contain;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid #d2a756;
  outline-offset: 4px;
}
.game-shell,
.game-shell:has(.natural-map) {
  width: min(1320px, 100%);
  max-width: 100%;
  padding: 0 32px;
  margin: auto;
  min-height: 100vh;
}
.workspace-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 4px 22px;
  color: #fff9df;
}
.workspace-heading h1 {
  margin: 0;
  font-size: 29px;
}
.workspace-heading .eyebrow {
  color: #e0e9d3;
  font-size: 14px;
  letter-spacing: 0;
  margin-bottom: 4px;
}
.commander-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #173f38b8;
  border: 1px solid #d5dcb83d;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 14px;
}
.commander-chip small {
  display: block;
  color: #d1dcc5;
  font-size: 12px;
}
.commander-chip .icon {
  width: 30px;
  height: 34px;
}
.game-layout {
  display: block;
  margin: 0;
  min-height: 500px;
}
.content {
  min-width: 0;
}
.sidebar,
.realm-banner,
.classic-page-title {
  display: none;
}
.panel {
  position: relative;
  background: var(--paper);
  border: 1px solid #d4cfb7;
  border-radius: 14px;
  box-shadow: var(--shadow);
  margin: 0 0 24px;
  overflow: hidden;
  min-width: 0;
}
.panel > h2 {
  position: static;
  width: auto;
  height: auto;
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  background: linear-gradient(#f7f3e5, #ece7d4);
  border: 0;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  color: #3a4e3e;
  text-shadow: none;
  margin: 0;
}
.panel > h2 .icon {
  display: block;
  width: 26px;
  height: 30px;
  color: #7b713f;
}
.panel-body {
  padding: 24px;
}
.frame-corner {
  display: none;
}
.panel .panel {
  box-shadow: none;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 24px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
}
.section-heading h2 {
  font-size: 24px;
  margin: 0;
}
.section-heading p {
  margin: 6px 0 0;
}
.eyebrow {
  font-size: 13px;
  letter-spacing: 0;
  color: #71805b;
}
.badge {
  font-size: 13px;
  line-height: 1.7;
  padding: 6px 12px;
  border-radius: 7px;
  white-space: normal;
}
.badge.gold {
  background: #f1e2b7;
  color: #725c28;
}
.badge.green {
  background: #dfead7;
  color: #406644;
}
.two-col,
.hero-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.two-col > .panel {
  margin: 0;
}
.two-col {
  margin-bottom: 24px;
}
.hero-layout {
  margin-bottom: 24px;
}
.progress {
  height: 9px;
  background: #d9dfcf;
  border: 0;
  border-radius: 8px;
  box-shadow: inset 0 1px 2px #233c2320;
  overflow: hidden;
}
.progress i {
  height: 100%;
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, #729955, #a6b86b);
}
.stat-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px;
  background: #eeeddf;
  border: 1px solid #dddcc9;
  border-radius: 9px;
  margin: 16px 0;
}
.stat-strip span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  flex-wrap: wrap;
}
.stat-strip .icon {
  width: 23px;
  height: 25px;
}
.activity-chest {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 2px 0 20px;
}
.activity-chest > .icon {
  width: 50px;
  height: 52px;
}
.activity-chest b {
  font-size: 19px;
  color: #596e3f;
}
.activity-chest small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
}
.classic-mission-level {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.classic-mission-level .progress {
  flex: 1;
}
.classic-mission-level .icon {
  width: 25px;
}
.activity-list {
  padding: 0;
  margin: 0 0 18px;
  list-style: none;
}
.activity-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #e3dfcb;
  font-size: 14px;
}
.activity-list li > span {
  color: #74805f;
  white-space: nowrap;
}
.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.mode-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 20px 12px;
  background: #eef0e2;
  border: 1px solid #d6deca;
  border-radius: 12px;
  min-height: 125px;
}
.mode-card h3 {
  font-size: 16px;
  margin: 0;
}
.mode-card p {
  font-size: 13px;
}
.mode-card > .icon {
  width: 37px;
  height: 42px;
  color: #658053;
}
.portrait,
.portrait.large {
  border: 0;
  outline: 0;
  box-shadow: none;
  background:
    radial-gradient(ellipse at bottom, #cdd8b8, transparent 68%),
    url('/heroes/human-v2.webp') center/contain no-repeat;
  height: 280px;
  border-radius: 10px;
}
.portrait.orc,
.portrait.large.orc {
  background:
    radial-gradient(ellipse at bottom, #cdd8b8, transparent 68%),
    url('/heroes/orc-v3.webp') center/contain no-repeat;
}
.portrait.large {
  height: 330px;
}
.attribute {
  display: grid;
  grid-template-columns: 100px minmax(30px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  font-size: 14px;
}
.attribute b {
  font-size: 14px;
}
.attribute small {
  font-size: 12px;
}
.training-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.training {
  padding: 18px 12px;
  min-height: 98px;
}
.training b {
  font-size: 16px;
}
.training small {
  font-size: 12px;
}
.skills-grid {
  gap: 14px;
}
.skills-grid > div {
  padding: 18px 12px;
  background: #efefdf;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.skills-grid b,
.skills-grid span {
  font-size: 14px;
}
.skills-grid small {
  font-size: 12px;
}
.barracks-classic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 24px;
}
.barracks-figure {
  padding: 24px;
  border-radius: 14px;
  background: #e9ebdc;
  border: 1px solid var(--line);
}
.barracks-art {
  height: 300px;
  background:
    url('/heroes/pandram-v2.webp') left bottom/48% auto no-repeat,
    url('/heroes/human-v2.webp') right bottom/49% auto no-repeat;
}
.troop-training {
  display: grid;
  gap: 14px;
}
.training-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px 16px;
  align-items: center;
  font-size: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.training-row .progress {
  grid-column: 1/3;
  grid-row: 2;
}
.training-row button {
  grid-column: 3;
  grid-row: 1/3;
}
.training-row > span {
  font-size: 12px;
}
.big-number {
  font-size: 44px;
  color: #5a763e;
}
.big-number small {
  display: block;
  font-size: 14px;
}
label {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 16px;
  gap: 7px;
}
input:not([type='checkbox']):not([type='range']),
select,
textarea {
  font-size: 15px;
  min-height: 46px;
  background: #fffef8;
  color: #31483c;
  border: 1px solid #bfc7ae;
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
  box-shadow: inset 0 1px 2px #163a2010;
}
textarea {
  min-height: 110px;
  line-height: 1.9;
}
input[type='range'] {
  min-height: 34px;
  accent-color: #5b7e47;
}
input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: #5b7e47;
}
.form-error {
  font-size: 14px;
  color: #a44631;
}
.check {
  font-size: 14px;
}
.form-grid {
  gap: 20px;
}
.filter-bar {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 16px;
  padding: 20px;
  background: #ecefdf;
  border: 1px solid #d8ddc8;
  border-radius: 11px;
}
.filter-bar button {
  height: auto;
  min-height: 46px;
}
.filter-bar label {
  font-size: 13px;
}
.filter-bar input,
.filter-bar select {
  font-size: 14px;
}
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 18px;
}
.item-card {
  padding: 22px 18px;
  background: #f8f5e9;
  border: 1px solid #d9d1b6;
  border-radius: 12px;
  min-width: 0;
}
.item-art {
  width: 90px;
  height: 90px;
  background: radial-gradient(#e3ce8a66, transparent 70%);
}
.item-art > .icon {
  width: 50px;
  height: 55px;
}
.item-card h3 {
  font-size: 17px;
}
.item-card p {
  font-size: 14px;
  color: #6e765d;
}
.item-card small {
  font-size: 12px;
  line-height: 1.9;
}
.item-card > b {
  font-size: 15px;
}
.item-card .badge {
  font-size: 12px;
}
.item-actions {
  gap: 8px;
}
.item-actions .text-button {
  font-size: 13px;
}
table {
  font-size: 14px;
  background: #fbf9ef;
}
.table-scroll {
  border: 1px solid var(--line);
  border-radius: 10px;
}
th {
  font-size: 13px;
  background: #e8eddb;
  color: #506342;
  padding: 13px 16px;
}
td {
  padding: 14px 16px;
  border-color: #e0dfcc;
  max-width: 320px;
}
tbody tr:nth-child(even) {
  background: #f1f1e4;
}
.table-scroll button {
  font-size: 13px;
}
.pager {
  padding: 18px;
  gap: 14px;
  font-size: 14px;
}
.empty {
  font-size: 15px;
  padding: 30px 10px;
  color: #738164;
}
.empty .icon {
  width: 40px;
  height: 44px;
}
.notice {
  font-size: 14px;
  line-height: 1.95;
  background: #f5ecd0;
  border: 1px solid #d9c791;
  color: #786239;
  border-radius: 10px;
  padding: 18px 22px;
}
.mission-row {
  gap: 18px;
  padding: 22px 0;
  align-items: center;
}
.mission-row h3 {
  font-size: 17px;
}
.mission-row small {
  font-size: 13px;
}
.mission-row > .icon {
  width: 32px;
}
.list-row,
.history-row,
.topic-row {
  gap: 18px;
  padding: 18px 0;
  font-size: 14px;
}
.list-row p,
.message-row p {
  font-size: 15px;
}
.history-row b,
.topic-row h3 {
  font-size: 16px;
}
.history-row > span {
  font-size: 14px;
}
.message-row > div {
  flex-wrap: wrap;
  gap: 12px;
}
.message-row p {
  line-height: 2;
}
.race-grid > div,
.alliance-card,
.gem-package {
  background: #f1f1e3;
  border: 1px solid #d6dcc6;
  border-radius: 12px;
  padding: 22px;
}
.race-grid p,
.alliance-card p {
  font-size: 14px;
}
.alliance-card span {
  font-size: 14px;
}
.gem-package small {
  font-size: 13px;
}
.economy-row {
  font-size: 15px;
  padding: 12px 0;
}
.economy-row b {
  font-size: 15px;
}
.battle-resources {
  background: #f9f6e9;
  border: 1px solid #cec7aa;
  border-radius: 12px;
  box-shadow: var(--shadow);
  gap: 18px;
  padding: 18px 22px;
  margin-bottom: 20px;
  color: #384e3a;
}
.battle-resources > span {
  font-size: 14px;
  gap: 8px;
}
.battle-resources b {
  font-size: 21px;
}
.battle-resources small {
  font-size: 11px;
  max-width: 100px;
  line-height: 1.8;
}
.battle-resources .icon {
  width: 25px;
  height: 28px;
}
.battle-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
.map-panel {
  border: 1px solid #8da695;
  border-radius: 14px;
  overflow: hidden;
  background: #56a9b7;
  box-shadow: var(--shadow);
}
.map-tools {
  padding: 12px 16px;
  background: #294e43;
  color: #edf1db;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 12px;
}
.map-tools > div {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.map-tools button {
  min-height: 36px;
  min-width: 37px;
  padding: 4px 10px;
  font-size: 14px;
  background: #365c4b;
  border: 1px solid #b3bf8f66;
  color: #f7ebc7;
  box-shadow: none;
}
.map-legend {
  padding: 12px 18px;
  gap: 18px;
  font-size: 12px;
  background: #294e43;
  color: #e1e7cc;
}
.field-command-bar {
  padding: 14px;
  gap: 10px;
  background: linear-gradient(#e9e3c9, #d6cfad);
  border-color: #b8a776;
  box-shadow: none;
}
.field-command {
  font-size: 14px !important;
  min-height: 44px !important;
  padding: 8px 16px !important;
  background: #f8f3df !important;
  color: #435439 !important;
  border: 1px solid #aaa77f !important;
  border-radius: 8px !important;
  box-shadow: 0 2px #8c865b22 !important;
}
.field-command .icon {
  width: 24px;
  height: 27px;
}
.field-hint {
  font-size: 13px;
  color: #61684d;
}
.field-status {
  padding: 14px 18px;
  background: #eae8d4;
  color: #47543d;
  gap: 18px;
  font-size: 13px;
  border: 0;
}
.field-status .icon {
  width: 22px;
  height: 25px;
}
.field-status > span {
  gap: 8px;
}
.field-health .progress {
  width: 100px;
}
.battle-orders {
  columns: auto;
  display: block;
  padding: 24px;
  background: var(--paper);
  border: 1px solid #cec9af;
  border-radius: 13px;
  margin: 0;
  font-size: 15px;
  box-shadow: var(--shadow);
}
.battle-orders h3 {
  font-size: 20px;
}
.battle-orders > button {
  width: auto;
  margin: 6px 8px 12px 0;
}
.battle-orders p {
  font-size: 14px;
}
.battle-orders small {
  font-size: 13px;
}
.battle-orders details {
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}
.battle-orders details[open] {
  display: block;
}
.participant {
  padding: 12px 0;
  gap: 12px;
  font-size: 14px;
}
.participant small {
  font-size: 12px;
}
.participant i {
  width: 13px;
  height: 13px;
  border-radius: 3px;
}
.order-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: right;
  padding: 10px 0;
}
.order-empty > .icon {
  width: 38px;
  height: 42px;
}
.order-empty p {
  margin: 0;
}
.event-log,
.chat-log {
  max-height: 360px;
}
.event-log p,
.chat-log p {
  font-size: 14px;
  padding: 14px 0;
}
.event-log time,
.chat-log time {
  font-size: 12px;
  color: #7a816a;
}
.event-log small {
  font-size: 12px;
  color: #7a765a;
}
.chat-log p {
  padding: 14px;
  background: #edf0e3;
}
.chat-log b {
  font-size: 14px;
}
.chat-log span {
  font-size: 14px;
  line-height: 1.95;
}
.chat-log .text-button {
  font-size: 12px;
}
.arena-scene {
  background: linear-gradient(#c6d5b6, #819e7b);
  border: 1px solid #819c73;
  border-radius: 14px;
  padding: 28px;
  gap: 20px;
  color: #273f31;
}
.arena-scene h3 {
  font-size: 20px;
}
.arena-scene p {
  font-size: 14px;
}
.versus {
  font-size: 30px;
  color: #f3e4b9;
}
.duel-round {
  padding: 18px;
  background: #f7f4e8;
  border-color: var(--line);
  border-radius: 10px;
  font-size: 14px;
}
.duel-round small {
  font-size: 12px;
}
.result-banner {
  background: linear-gradient(#f8f2db, #e8e9d1);
  border: 1px solid #b5be8f;
  border-radius: 14px;
  padding: 36px;
  color: #415733;
}
.result-banner h2 {
  font-size: 28px;
  color: #415733;
}
dialog {
  width: min(600px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  max-height: calc(100dvh - 48px);
  padding: 28px;
  border: 1px solid #b2b88f;
  border-radius: 16px;
  color: var(--ink);
  background: #faf8ed;
  box-shadow: 0 22px 90px #0b2c3655;
  overflow: auto;
}
dialog::backdrop {
  background: #102e35b8;
  backdrop-filter: blur(4px);
}
dialog h2 {
  font-size: 23px;
  padding: 0 0 16px;
  margin: 0 0 20px 40px;
  border-color: var(--line);
}
dialog p {
  font-size: 15px;
}
.dialog-close {
  position: absolute;
  left: 18px;
  top: 18px;
  width: 36px;
  height: 36px;
  min-height: 36px;
  background: #efe8d3;
  border: 1px solid #d6caa7;
  border-radius: 8px;
  font-size: 25px;
  padding: 0;
  color: #6a633f;
  box-shadow: none;
}
.dialog-nav {
  gap: 12px;
}
.dialog-nav a {
  font-size: 15px;
  padding: 14px;
  border-color: #d2d8bf;
  border-radius: 9px;
  background: #edf0e1;
}
.tutorial-owl {
  background: none;
}
.tutorial-owl .icon {
  opacity: 1;
  width: 80px;
  height: 85px;
}
.stage-list > div {
  padding: 20px;
  border-color: var(--line);
  background: #f1f1e3;
  border-radius: 10px;
}
.stage-list b {
  font-size: 16px;
}
.stage-list p {
  font-size: 14px;
}
.dialog-actions {
  gap: 14px;
  flex-wrap: wrap;
}
#toast {
  font-size: 14px;
  line-height: 1.9;
  max-width: min(560px, calc(100vw - 32px));
  padding: 13px 22px;
  bottom: 20px;
  background: #eef4df;
  color: #375b34;
  border: 1px solid #a7bd85;
  border-radius: 10px;
  box-shadow: 0 6px 24px #143b3540;
}
.game-shell > footer {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: 12px;
  color: #edf0d9;
  border: 0;
  border-top: 1px solid #d5dfbd44;
  padding: 22px 0 30px;
  margin-top: 32px;
}
.game-shell > footer::after {
  display: none;
}
.game-shell > footer a {
  color: #f4d998;
}
.connection {
  font-size: 12px;
}
.connection:before {
  width: 7px;
  height: 7px;
  background: #b0ce87;
}
.public-world {
  min-height: 100vh;
  max-width: none;
  background:
    linear-gradient(#194a4c33, #153d3bba),
    url('/reference/theme/img/gen/main_bg.jpg') center top/cover fixed no-repeat;
  color: #f7f1d4;
}
.public-world > header {
  max-width: 1280px;
  margin: auto;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: none;
}
.public-world > header nav {
  display: flex;
  align-items: center;
  gap: 10px 24px;
  flex-wrap: wrap;
  font-size: 14px;
}
.public-world > header nav a {
  min-height: 40px;
  display: flex;
  align-items: center;
}
.public-login-link {
  display: flex;
  gap: 16px;
  font-size: 13px;
  align-items: center;
  background: #173f3899;
  border: 1px solid #c8d5ae44;
  padding: 10px 16px;
  border-radius: 10px;
}
.gate-layout {
  max-width: 1040px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr minmax(360px, 460px);
  gap: 72px;
  align-items: center;
  position: relative;
  padding: 40px 32px 64px;
  min-height: 640px;
  height: auto;
}
.original-home-character {
  position: static;
  height: 480px;
  width: 100%;
  background: url('/heroes/human-v2.webp') center/contain no-repeat;
  filter: drop-shadow(0 18px 18px #153d3366);
}
.gate-card {
  position: relative;
  background: #faf7e9;
  border: 1px solid #ccbf91;
  border-radius: 16px;
  padding: 30px;
  color: #344a3a;
  box-shadow: 0 20px 50px #123a3c40;
  width: auto;
  min-height: 0;
  bottom: auto;
  left: auto;
  max-width: 100%;
}
.gate-card::before,
.gate-card::after {
  display: none;
}
.original-home-logo {
  display: block;
  width: 190px;
  margin: 0 auto 24px;
  background: none;
  height: auto;
}
.original-home-logo img {
  display: block;
  width: 100%;
  height: auto;
}
.gate-card h2 {
  font-size: 23px;
  margin-bottom: 24px;
}
.gate-card .eyebrow {
  font-size: 13px;
}
.gate-card input:not([type='checkbox']):not([type='range']),
.gate-card select {
  font-size: 15px;
  min-height: 46px;
  height: auto;
}
.gate-card .primary {
  min-height: 48px;
  font-size: 16px;
}
.auth-links {
  font-size: 13px;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 14px;
}
.demo-hint {
  font-size: 12px;
  line-height: 1.9;
  color: #6f785e;
  padding-top: 16px;
}
.public-preview {
  display: block;
  background: #163e38e8;
  border: 0;
  padding: 40px max(32px, calc((100vw - 1200px) / 2));
  color: #f5f0d8;
}
.public-preview h2 {
  font-size: 24px;
}
.public-preview p {
  font-size: 14px;
  color: #d3dfc5;
}
.classic-screen-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.classic-screen-links a {
  border: 1px solid #829875;
  border-radius: 10px;
  overflow: hidden;
  background: #2c5145;
}
.classic-screen-links span {
  display: block;
  padding: 10px 14px;
  font-size: 15px;
}
.classic-screen-links img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.public-world > footer {
  font-size: 12px;
  padding: 24px 32px;
  text-align: center;
  line-height: 2;
  max-width: 1000px;
}
@media (min-width: 1700px) {
  .game-shell,
  .game-shell:has(.natural-map) {
    width: 1440px;
  }
}
@media (max-width: 1100px) {
  .filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gate-layout {
    gap: 30px;
  }
}
@media (max-width: 850px) {
  .game-shell,
  .game-shell:has(.natural-map) {
    padding: 0 20px;
  }
  .workspace-heading {
    padding: 24px 0 18px;
  }
  .workspace-heading h1 {
    font-size: 26px;
  }
  .commander-chip {
    font-size: 13px;
    padding: 8px 12px;
  }
  .hero-layout,
  .barracks-classic {
    grid-template-columns: 1fr;
  }
  .barracks-art {
    height: 260px;
    background-size:
      auto 95%,
      auto 95%;
    background-position:
      30% bottom,
      70% bottom;
  }
  .two-col {
    grid-template-columns: 1fr;
  }
  .gate-layout {
    grid-template-columns: minmax(0, 460px);
    justify-content: center;
    min-height: 0;
    padding-top: 20px;
  }
  .original-home-character {
    display: none;
  }
  .classic-screen-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 550px) {
  body {
    font-size: 15px;
    background-size: auto 1100px;
    background-position: center top;
  }
  .game-shell,
  .game-shell:has(.natural-map) {
    width: 100%;
    padding: 0 14px;
  }
  .workspace-heading {
    gap: 12px;
    flex-wrap: wrap;
    padding: 22px 2px 18px;
  }
  .workspace-heading h1 {
    font-size: 25px;
  }
  .workspace-heading .eyebrow {
    font-size: 12px;
  }
  .commander-chip {
    font-size: 12px;
    padding: 7px 10px;
    gap: 7px;
  }
  .commander-chip small {
    font-size: 11px;
  }
  .commander-chip .icon {
    width: 22px;
    height: 26px;
  }
  .panel {
    border-radius: 12px;
    margin-bottom: 20px;
  }
  .panel > h2 {
    padding: 14px 18px;
    min-height: 56px;
    font-size: 17px;
    gap: 10px;
  }
  .panel > h2 .icon {
    width: 24px;
    height: 27px;
  }
  .panel-body {
    padding: 18px;
  }
  .activity-chest {
    gap: 14px;
  }
  .activity-chest b {
    font-size: 18px;
  }
  .activity-list li {
    font-size: 13px;
    gap: 10px;
  }
  .activity-list button {
    font-size: 12px;
    padding: 6px 10px;
    min-height: 38px;
  }
  .mode-grid {
    gap: 9px;
  }
  .mode-card {
    padding: 15px 8px;
    min-height: 110px;
  }
  .mode-card h3 {
    font-size: 14px;
  }
  .mode-card > .icon {
    width: 30px;
    height: 33px;
  }
  .stat-strip {
    gap: 10px;
    padding: 12px;
  }
  .stat-strip span {
    font-size: 12px;
  }
  .section-heading {
    padding: 18px;
    gap: 14px;
    margin-bottom: 20px;
  }
  .section-heading h2 {
    font-size: 21px;
  }
  .section-heading .eyebrow {
    font-size: 12px;
  }
  .section-heading .badge {
    font-size: 12px;
  }
  .two-col,
  .hero-layout,
  .barracks-classic {
    gap: 20px;
    margin-bottom: 20px;
  }
  .portrait.large {
    height: 300px;
  }
  .attribute {
    grid-template-columns: 80px minmax(20px, 1fr) auto;
    gap: 9px;
    font-size: 13px;
  }
  .attribute b {
    font-size: 12px;
  }
  .attribute small {
    font-size: 11px;
  }
  .training {
    padding: 14px 10px;
  }
  .training small {
    font-size: 12px;
  }
  .skills-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .skills-grid > div {
    padding: 14px 10px;
  }
  .skills-grid b,
  .skills-grid span {
    font-size: 13px;
  }
  .skills-grid small {
    font-size: 12px;
  }
  .barracks-figure {
    padding: 18px;
  }
  .barracks-art {
    height: 260px;
    background-size:
      48% auto,
      48% auto;
    background-position:
      left bottom,
      right bottom;
  }
  .training-row {
    font-size: 13px;
    gap: 7px 12px;
  }
  .filter-bar {
    padding: 14px;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .filter-bar label {
    font-size: 12px;
  }
  .filter-bar select,
  .filter-bar input {
    font-size: 13px;
    min-height: 44px;
  }
  .filter-bar button {
    font-size: 13px;
  }
  .item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .item-card {
    padding: 18px 12px;
  }
  .item-art {
    width: 70px;
    height: 75px;
  }
  .item-art > .icon {
    width: 42px;
    height: 47px;
  }
  .item-card h3 {
    font-size: 15px;
  }
  .item-card p {
    font-size: 13px;
  }
  .item-card small {
    font-size: 12px;
  }
  .item-card .badge {
    font-size: 11px;
  }
  .item-actions {
    gap: 4px;
  }
  .item-actions button {
    min-height: 38px;
    font-size: 12px;
    padding: 6px 8px;
  }
  .item-card .text-button {
    font-size: 12px;
  }
  .mission-row {
    flex-wrap: wrap;
    gap: 12px;
  }
  .mission-row h3 {
    font-size: 16px;
  }
  .mission-row > div {
    min-width: 180px;
  }
  .mission-row small {
    font-size: 12px;
  }
  .mission-row > button {
    margin-right: 42px;
  }
  .notice {
    font-size: 13px;
    padding: 16px;
  }
  .list-row,
  .history-row,
  .topic-row {
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
  }
  .history-row > div {
    min-width: 160px;
  }
  .list-row button {
    font-size: 13px;
  }
  .alliance-grid,
  .race-grid {
    grid-template-columns: 1fr;
  }
  .gem-package {
    padding: 18px 10px;
  }
  .gem-package h3 {
    font-size: 20px;
  }
  .gem-package small {
    font-size: 12px;
  }
  .gem-package button {
    font-size: 12px;
    padding: 8px;
    min-height: 42px;
  }
  .table-scroll table {
    font-size: 13px;
    min-width: 500px;
  }
  .table-scroll th {
    font-size: 12px;
    padding: 12px;
  }
  .table-scroll td {
    padding: 12px;
  }
  .battle-resources {
    gap: 14px;
    padding: 16px;
    justify-content: flex-start;
    margin-bottom: 20px;
  }
  .battle-resources > span {
    font-size: 12px;
    flex: 1 1 90px;
    gap: 6px;
  }
  .battle-resources b {
    font-size: 18px;
  }
  .battle-resources small {
    font-size: 11px;
  }
  .battle-resources .icon {
    width: 23px;
    height: 26px;
  }
  .map-tools {
    font-size: 12px;
    padding: 12px;
    gap: 10px;
  }
  .map-tools > div {
    width: 100%;
    justify-content: flex-start;
  }
  .map-tools button {
    min-height: 38px;
    min-width: 38px;
    font-size: 14px;
  }
  .map-legend {
    font-size: 11px;
    gap: 9px 14px;
    padding: 12px;
  }
  .field-command-bar {
    padding: 12px;
    gap: 8px;
  }
  .field-command {
    font-size: 12px !important;
    padding: 8px 10px !important;
    min-height: 42px !important;
  }
  .field-hint {
    font-size: 12px;
    text-align: center;
  }
  .field-status {
    padding: 12px;
    gap: 12px;
    font-size: 12px;
    justify-content: center;
  }
  .field-status .icon {
    width: 20px;
    height: 23px;
  }
  .battle-orders {
    padding: 20px;
    font-size: 14px;
  }
  .battle-orders h3 {
    font-size: 19px;
  }
  .battle-orders p {
    font-size: 14px;
  }
  .participant {
    font-size: 14px;
  }
  .participant small {
    font-size: 12px;
  }
  .event-log p,
  .chat-log p {
    font-size: 13px;
  }
  .event-log time,
  .chat-log time {
    font-size: 11px;
  }
  .event-log small {
    font-size: 12px;
  }
  .arena-scene {
    padding: 18px 12px;
    gap: 12px;
    grid-template-columns: 1fr 90px 1fr;
  }
  .arena-scene .portrait {
    height: 190px;
  }
  .arena-scene h3 {
    font-size: 16px;
  }
  .arena-scene p {
    font-size: 12px;
  }
  .versus {
    font-size: 24px;
  }
  .arena-scene button {
    font-size: 12px;
    padding: 8px;
  }
  .duel-rounds {
    grid-template-columns: 1fr;
  }
  .duel-round {
    font-size: 13px;
  }
  .result-banner {
    padding: 28px 20px;
  }
  .result-banner h2 {
    font-size: 24px;
  }
  dialog {
    padding: 24px 18px;
    border-radius: 12px;
    max-height: calc(100dvh - 32px);
  }
  dialog h2 {
    font-size: 21px;
    margin-left: 36px;
  }
  dialog p {
    font-size: 14px;
  }
  .dialog-close {
    left: 14px;
    top: 16px;
  }
  .dialog-nav a {
    font-size: 14px;
    padding: 12px;
  }
  .dialog-nav .icon {
    width: 22px;
  }
  #toast {
    font-size: 13px;
    padding: 12px 18px;
    bottom: 14px;
  }
  .game-shell > footer {
    font-size: 11px;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 22px 6px;
  }
  .game-shell > footer span {
    font-size: 11px;
  }
  .public-world > header {
    padding: 18px 20px;
    justify-content: center;
    gap: 16px;
  }
  .public-world > header nav {
    justify-content: center;
    font-size: 13px;
    gap: 4px 18px;
  }
  .public-login-link {
    font-size: 12px;
    gap: 14px;
    padding: 10px 14px;
  }
  .gate-layout {
    padding: 16px 16px 36px;
    gap: 0;
  }
  .gate-card {
    padding: 24px 20px;
    border-radius: 14px;
  }
  .original-home-logo {
    width: 175px;
    margin-bottom: 22px;
  }
  .gate-card h2 {
    font-size: 22px;
  }
  .gate-card label {
    font-size: 14px;
  }
  .gate-card input:not([type='checkbox']):not([type='range']) {
    font-size: 15px;
    min-height: 46px;
  }
  .gate-card .demo-hint {
    font-size: 12px;
  }
  .auth-links {
    font-size: 13px;
  }
  .public-preview {
    padding: 30px 20px;
  }
  .public-preview h2 {
    font-size: 22px;
  }
  .classic-screen-links {
    gap: 12px;
  }
  .classic-screen-links span {
    font-size: 14px;
    padding: 10px;
  }
  .classic-screen-links img {
    height: 130px;
  }
  .public-world > footer {
    font-size: 11px;
    padding: 22px 20px;
  }
}

/* Readability floors for controls inherited from old mobile components. */
.mission-row button,
.history-row .small {
  font-size: 13px;
  min-height: 40px;
}
.attribute small,
.history-row small {
  font-size: 12px;
}
.section-heading .eyebrow {
  color: #6c7c5f;
  font-size: 13px;
}
.portrait,
.portrait.large {
  background:
    url('/heroes/human-v2.webp') center/contain no-repeat,
    radial-gradient(ellipse at bottom, #d9e0c5, transparent 68%);
}
.portrait.orc,
.portrait.large.orc {
  background:
    url('/heroes/orc-v3.webp') center/contain no-repeat,
    radial-gradient(ellipse at bottom, #d9e0c5, transparent 68%);
}
#toast {
  pointer-events: none;
}
.game-shell:has(#battle-content) .workspace-heading {
  display: none;
}
.game-shell:has(#battle-content) .game-layout {
  margin-top: 24px;
}
@media (max-width: 550px) {
  .workspace-heading {
    padding-top: 20px;
    padding-bottom: 16px;
  }
  .game-shell:has(#battle-content) .game-layout {
    margin-top: 20px;
  }
}

/* One palette for every surface: deep blue, forest green and natural wood. */
body {
  color: var(--ink);
  background-color: #235d68;
}
.panel {
  background: var(--paper);
  border-color: #60705a;
  box-shadow:
    var(--shadow),
    inset 0 1px #a4bc8f12;
}
.panel > h2 {
  color: #f0dfba;
  background: linear-gradient(#644b31, #4b3828);
  border-bottom-color: #8d7045;
}
.panel > h2 .icon {
  color: #d8bc7c;
}
.section-heading {
  background: #1d414d;
  border-color: #5b705b;
  color: var(--ink);
}
.section-heading h2,
h2,
h3 {
  color: #f0e3c4;
}
.section-heading .eyebrow,
.eyebrow {
  color: #becda7;
}
.muted,
small {
  color: var(--muted);
}
button,
.button {
  background: linear-gradient(#6c5337, #4d3d2b);
  border-color: #97764d;
  color: #f1e3c4;
  box-shadow: 0 2px 0 #122d3280;
}
button.primary,
.button.primary {
  background: linear-gradient(#4b713e, #345534);
  border-color: #91a16b;
  color: #f3efd7;
  box-shadow: 0 2px 0 #132f26;
}
.danger {
  background: #5d3c2d;
  color: #f2d4b2;
  border-color: #a17b50;
}
.ghost,
.text-button {
  background: transparent;
  box-shadow: none;
  color: #d0dca7;
}
.badge {
  background: #3f5743;
  color: #e5e8c8;
  border-color: #7c9263;
}
.badge.gold {
  background: #624b2d;
  color: #f0d49a;
  border-color: #a48652;
}
.badge.green {
  background: #345b3d;
  color: #d6e5b7;
  border-color: #819964;
}
.stat-strip {
  background: #183a37;
  border-color: #51674d;
  color: #e6e2c2;
}
.progress {
  background: #112d31;
  box-shadow: inset 0 1px 3px #071f3155;
}
.progress i {
  background: linear-gradient(90deg, #658747, #a0b66a);
}
.activity-chest b {
  color: #dce5ab;
}
.activity-chest small {
  color: #bfccb3;
}
.activity-list li {
  border-color: #4d6655;
}
.activity-list li > span {
  color: #c7d2af;
}
.mode-card {
  background: #284e42;
  border-color: #66805a;
  color: #e4e6c5;
}
.mode-card h3 {
  color: #f0e3c4;
}
.mode-card > .icon {
  color: #c0d39c;
}
.portrait,
.portrait.large {
  background:
    url('/heroes/human-v2.webp') center/contain no-repeat,
    radial-gradient(ellipse at bottom, #3d5b40, transparent 68%);
}
.portrait.orc,
.portrait.large.orc {
  background:
    url('/heroes/orc-v3.webp') center/contain no-repeat,
    radial-gradient(ellipse at bottom, #3d5b40, transparent 68%);
}
.skills-grid > div,
.barracks-figure {
  background: #294a3d;
  border-color: #6a7957;
  color: #e6e6c5;
}
.training-row {
  border-color: #506958;
}
.big-number {
  color: #d4dfa3;
}
label {
  color: #e1e5cc;
}
input:not([type='checkbox']):not([type='range']),
select,
textarea,
.gate-card input:not([type='checkbox']):not([type='range']),
.gate-card select {
  background: var(--input-surface);
  color: #eee7ce;
  border-color: #66806b;
  box-shadow: inset 0 2px 4px #061d2733;
  color-scheme: dark;
}
input::placeholder,
textarea::placeholder {
  color: #9eb39f;
  opacity: 1;
}
select option {
  background: #173841;
  color: #eee7ce;
}
.form-error {
  color: #efb599;
}
.filter-bar {
  background: #234b42;
  border-color: #627d5b;
}
.item-card {
  background: #413e2d;
  border-color: #85794f;
  color: #eee3c5;
}
.item-card.equipped {
  background: #344e35;
  border-color: #97aa6d;
}
.item-card p {
  color: #c8cdb0;
}
.item-card small {
  color: #bcc7ad;
}
.item-art {
  background: radial-gradient(#b5924c33, transparent 70%);
}
.item-art > .icon {
  color: #d6b675;
  filter: drop-shadow(0 2px 2px #132d36aa);
}
.item-card .text-button {
  color: #d5e2ad;
}
table {
  background: #1b3b46;
  color: #eee5cd;
}
.table-scroll {
  border-color: #61715b;
}
th {
  background: #4c3d2b;
  color: #f0ddba;
  border-color: #8d744b;
}
td {
  border-color: #486254;
  color: #e4e4c8;
}
tbody tr:nth-child(even) {
  background: #264b50;
}
.empty {
  color: #c1cfb3;
}
.empty .icon {
  color: #b0c397;
}
.notice {
  background: #4d422b;
  border-color: #927a4b;
  color: #eed8ac;
}
.list-row,
.history-row,
.topic-row,
.message-row,
.mission-row {
  border-color: #526958;
}
.history-row > span {
  color: #c7d89e;
}
.alliance-card,
.race-grid > div,
.gem-package {
  background: #294c40;
  border-color: #6a7d59;
  color: #e5e5c8;
}
.alliance-card p,
.race-grid p,
.gem-package small {
  color: #c0cdb2;
}
.economy-row {
  border-color: #526958;
}
.economy-row b {
  color: #e3d296;
}
.economy-row.total b {
  color: #c2dc92;
}
.battle-resources {
  background: #1c414e;
  border-color: #687c60;
  color: #e7e7c9;
}
.battle-resources small {
  color: #c2cdb2;
}
.field-command-bar {
  background: linear-gradient(#5c482f, #403a2b);
  border-color: #94794a;
}
.field-command {
  background: linear-gradient(#6b5437, #493d2c) !important;
  color: #f0e2c3 !important;
  border-color: #967c51 !important;
  box-shadow: 0 2px #21342766 !important;
}
.field-hint {
  color: #d2d8b4;
}
.field-status {
  background: #234a3c;
  color: #dae1bb;
}
.battle-orders {
  background: #1d414d;
  border-color: #687b5e;
  color: #e9e4c9;
}
.battle-orders hr,
.battle-orders details,
.participant {
  border-color: #526958;
}
.event-log p {
  border-color: #526958;
}
.event-log time,
.chat-log time {
  color: #b4c8b0;
}
.event-log small {
  color: #d5c494;
}
.chat-log p {
  background: #2a4c3e;
  color: #eee3c6;
}
.arena-scene {
  background: linear-gradient(#345740, #1c4248);
  border-color: #7c8d61;
  color: #eee4c7;
}
.duel-round {
  background: #24463e;
  border-color: #60765b;
  color: #e5e6c9;
}
.result-banner {
  background: linear-gradient(#34503b, #1c4149);
  border-color: #829060;
  color: #e4e8bc;
}
.result-banner h2 {
  color: #e4d294;
}
dialog {
  background: #1d3e49;
  color: #eee4c9;
  border-color: #8a8055;
  box-shadow: 0 22px 90px #061d2bbb;
}
dialog h2 {
  color: #edddba;
  border-color: #60735a;
}
.dialog-close {
  background: #5a462f;
  color: #f3e4c5;
  border-color: #9d8052;
}
.dialog-nav a,
.stage-list > div {
  background: #2c4e3f;
  border-color: #6e805d;
  color: #e6e4c4;
}
#toast {
  background: #254e39;
  color: #e4edc9;
  border-color: #8da36b;
}
#toast.error {
  background: #5a392c;
  color: #f0d1b0;
  border-color: #ab8255;
}
.gate-card {
  background: #1d414d;
  color: #eee4c9;
  border-color: #8f8054;
  box-shadow: 0 20px 50px #0b2d3c66;
}
.gate-card h2 {
  color: #f0e0bb;
}
.gate-card .eyebrow {
  color: #c6d5ad;
}
.auth-links {
  color: #d0dda9;
}
.demo-hint,
.gate-card .demo-hint {
  color: #bacab0;
  border-color: #6e7957;
}
.public-preview {
  background: #163c36ed;
}
.classic-screen-links a {
  background: #2c4d3c;
  border-color: #7a8c61;
}
@media (max-width: 850px) {
}
.hero-choice.is-locked {
  background: #293e3c;
  border-color: #81754d;
}
.hero-choice.is-locked > .hero-choice-art {
  opacity: 0.78;
}
.hero-choice > a {
  font-size: 13px;
  color: #d2dda8;
  margin-top: 10px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portrait.vulcan {
  background-image: url('/heroes/vulcan-v2.webp');
}
.portrait.dragon {
  background-image: url('/heroes/indra-v3.webp');
}
.portrait.super {
  background-image: url('/heroes/super-vulcan-v2.webp');
}
.hero-roster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.hero-choice {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  min-width: 0;
  padding: 52px 22px 22px;
  border: 1px solid #687c59;
  border-radius: 12px;
  background: #23473e;
  text-align: center;
}
.hero-choice.is-active {
  background: #2c503a;
  border-color: #b0b477;
  box-shadow: inset 0 0 0 1px #b0b47755;
}
.hero-choice-art {
  display: block;
  width: 100%;
  height: 285px;
  object-fit: contain;
  margin: 0 0 18px;
  filter: drop-shadow(0 5px 6px #092c3155);
}
.hero-choice > .badge {
  position: absolute;
  left: 12px;
  top: 12px;
  font-size: 12px;
}
.hero-choice h3 {
  font-size: 21px;
  margin: 0 0 3px;
  color: #f1dfb8;
}
.hero-race-name {
  font-size: 13px;
  color: #bacfa9;
  font-weight: 400;
}
.hero-choice p {
  font-size: 14px;
  color: #c4ceb0;
  margin: 12px 0;
  flex: 1;
}
.hero-choice-vitals {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 14px;
  margin: 8px 0 18px;
  color: #e5e7c7;
}
.hero-choice-vitals span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.hero-choice-vitals .icon {
  width: 22px;
  height: 24px;
}
.hero-choice > button {
  width: 100%;
  font-size: 14px;
  min-height: 44px;
}
.portrait.pandram,
.portrait.large.pandram {
  background:
    url('/heroes/pandram-v2.webp') center/contain no-repeat,
    radial-gradient(ellipse at bottom, #3d5b40, transparent 68%);
}
.barracks-art {
  background-image: url('/heroes/human-v2.webp'), url('/heroes/orc-v3.webp');
  background-size:
    auto 100%,
    auto 100%;
  background-position:
    20% bottom,
    80% bottom;
}
@media (max-width: 850px) {
  .hero-choice {
    padding: 52px 16px 16px;
  }
  .hero-choice-art {
    height: 240px;
  }
  .hero-choice h3 {
    font-size: 19px;
  }
  .barracks-art {
    background-position:
      25% bottom,
      75% bottom;
  }
}
@media (max-width: 650px) {
  .hero-roster {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .hero-choice {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 7px;
    text-align: right;
    padding: 16px;
  }
  .hero-choice-art {
    grid-column: 1;
    grid-row: 1 / span 7;
    width: 110px;
    height: 230px;
    margin: 0;
    align-self: center;
  }
  .hero-choice > h3,
  .hero-choice > .hero-race-name,
  .hero-choice > p,
  .hero-choice > .hero-choice-vitals,
  .hero-choice > button,
  .hero-choice > .badge {
    grid-column: 2;
    margin: 0;
  }
  .hero-choice > .badge {
    position: static;
    justify-self: start;
    font-size: 11px;
    padding: 4px 7px;
  }
  .hero-choice > h3 {
    font-size: 19px;
  }
  .hero-choice > p {
    font-size: 13px;
    line-height: 1.9;
  }
  .hero-choice-vitals {
    justify-content: flex-start;
    gap: 14px;
    font-size: 13px;
  }
  .hero-choice-vitals .icon {
    width: 20px;
    height: 22px;
  }
  .hero-choice > button {
    font-size: 13px;
    min-height: 42px;
    padding: 8px;
  }
  .barracks-art {
    background-size:
      48% auto,
      48% auto;
    background-position:
      left bottom,
      right bottom;
  }
}

@media (max-width: 650px) {
  .hero-choice > a {
    grid-column: 2;
    margin: 0;
    justify-content: flex-start;
  }
  .hero-choice-vitals b {
    font-size: 13px;
  }
}
/* Shared compact account header. Material colours come from frame-theme tokens. */
.topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 8px 0;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  text-decoration: none;
}
.brand-logo {
  display: block;
  width: auto;
  height: auto;
  font-family: Roboto, Vazir, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 3px;
  color: #ecd2a0;
  -webkit-text-stroke: 0.5px #352416;
  text-shadow: 0 2px 1px #090b0d;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .brand-logo {
    background: linear-gradient(180deg, #fff0c7 5%, #d9ac62 38%, #8a572c 52%, #f0cd88 72%, #b67d3f);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 1px #090b0d);
  }
}
.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  min-width: 0;
}
.header-actions > a,
.header-actions > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 6px 9px;
  font-size: 13px;
  line-height: 1.5;
  color: #ece3d2;
  background: var(--panel-header);
  border: 1px solid #4b4d49;
  border-radius: 4px;
  box-shadow: none;
}
.header-actions .icon {
  width: 18px;
  height: 22px;
}
@media (max-width: 900px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 12px;
  }
  .header-actions {
    grid-column: 1 / -1;
  }
}
@media (max-width: 550px) {
  .topbar {
    padding: 6px 0;
    gap: 4px 8px;
  }
  .brand-logo {
    font-size: 25px;
    letter-spacing: 1px;
  }
  .header-actions {
    justify-content: space-between;
    gap: 4px;
  }
  .header-actions > a,
  .header-actions > button {
    flex: 1 0 auto;
    padding: 5px;
    font-size: 12px;
  }
  .header-actions .icon {
    display: none;
  }
}