/* Crown of Bharat interface. Fonts, color tokens, type scale and shared controls. */
@font-face {
  font-family: Manrope;
  src: url(../assets/fonts/Manrope-Variable.ttf) format("truetype");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: Space;
  src: url(../assets/fonts/SpaceGrotesk-Variable.ttf) format("truetype");
  font-weight: 300 700;
  font-display: swap;
}
:root {
  --emerald:#103e32;
  --emerald-deep:#092a24;
  --emerald-light:#245847;
  --ivory:#fbf5e6;
  --paper:#f0e7d2;
  --gold:#e6bf68;
  --gold-light:#f7dda0;
  --ink:#263e33;
  --muted:#647063;
  --line:#d8ccb0;
  --danger:#983e36;
  --radius:12px;
  --edge:16px;
  --edge-left:max(var(--edge),env(safe-area-inset-left));
  --edge-right:max(var(--edge),env(safe-area-inset-right));
  --edge-top:max(var(--edge),env(safe-area-inset-top));
  --edge-bottom:max(var(--edge),env(safe-area-inset-bottom));
  font: 500 14px/1.5 Manrope, sans-serif;
  color: var(--ink);
  font-synthesis: none;
  --cream:var(--ivory);
  --parchment:var(--paper);
  --brass:#a27b32;
  --teal:var(--emerald-light);
  --indigo:var(--emerald);
  --shadow:0 12px 32px #061e2433;
}
* {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  background: #315f49;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button,
input,
select {
  color: inherit;
}
button {
  border: 0;
}
button:disabled {
  cursor: default;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
h1,
h2,
h3,
h4,
strong,
b {
  font-family:
    Space,
    Manrope,
    sans-serif;
}
h1 {
  font-size: 32px;
}
h2 {
  font-size: 26px;
  line-height: 1.15;
}
h3 {
  font-size: 18px;
  line-height: 1.25;
}
h4 {
  font-size: 15px;
}
p {
  line-height: 1.6;
}
small {
  font-size: 12px;
}
img {
  max-width: 100%;
}
[hidden] {
  display: none !important;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 3px solid #448dc4;
  outline-offset: 3px;
}
button:disabled {
  color: #798074;
  background: #e8e5d8;
  border-color: #d7d5c7;
  box-shadow: none;
}
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  vertical-align: middle;
}
.eyebrow {
  font: 700 10px/1.4 Space, sans-serif;
  letter-spacing: 1.3px;
  color: #6c735f;
}
.button,
.icon-button,
.catalog-tab,
.panel-nav button,
.upgrade-tabs button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ivory);
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  transition: background-color .14s, box-shadow .14s;
  box-shadow: 0 2px 0 #a3a08733;
}
.button.primary,
.button.teal,
.roster-add,
.button.chosen-button {
  background: linear-gradient(var(--gold-light), var(--gold));
  color: #493919;
  border-color: #c49b4c;
  box-shadow: 0 3px 0 #8c6a2b;
}
.button.secondary {
  background: #f5eedc;
}
.button.danger {
  background: #9c443b;
  color: white;
  border-color: #77352f;
}
.button:not(:disabled):hover,
.icon-button:not(:disabled):hover,
.catalog-tab:hover {
  background: #e9dfc5;
}
.button.primary:not(:disabled):hover {
  background: #f7dc96;
}
.button:not(:disabled):active,
.icon-button:not(:disabled):active,
.catalog-tab:not(:disabled):active {
  box-shadow: inset 0 2px 4px #102b3526;
}
.button:disabled,
.icon-button:disabled {
  background: #e6e5da;
  color: #7a7f72;
  border-color: #d3d4c8;
  box-shadow: none;
}
.icon-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 10px;
}
.full-button {
  display: flex;
  width: 100%;
  margin-top: 12px;
}
.small-button {
  padding-inline: 12px;
}
.button .icon {
  width: 18px;
  height: 18px;
}
.cost {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  font: 600 13px/1.4 Space, sans-serif;
}
.cost > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.cost .icon {
  width: 16px;
  height: 16px;
  color: #96733a;
}
.cost-grain .icon {
  color: #6e8537;
}
.cost-iron .icon {
  color: #61798b;
}
.cost-gems .icon {
  color: #4c8b56;
}
.stars {
  display: inline-flex;
  gap: 4px;
  color: #c5c5b5;
}
.stars .icon {
  width: 20px;
  height: 20px;
}
.stars .filled {
  fill: var(--gold);
  color: #b99547;
}
.stars .earned {
  fill: var(--gold);
  color: #b99547;
}
/* Village canvas and edge-aligned resource, builder and action controls. */
#world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  outline: none;
  touch-action: none;
}
#ui {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}
#ui button,
#ui input,
#ui select,
.game-panel,
.result-backdrop {
  pointer-events: auto;
}
#world-label {
  display: none;
}
#home-hud {
  position: absolute;
  inset: var(--edge-top) var(--edge-right) auto var(--edge-left);
  height: 52px;
}
.player-cluster {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.player-medallion,
.builder-chip,
.league-badge,
.resource,
.side-button {
  background: var(--emerald);
  color: var(--ivory);
  border: 1px solid #d7bd7973;
  border-radius: 10px;
  box-shadow: 0 3px 10px #09261d30;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
}
.player-medallion {
  text-align: left;
  padding: 5px 12px 5px 5px;
  max-width: 220px;
  min-height: 52px;
}
.portrait {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #325b48;
  position: relative;
  color: var(--gold);
}
.portrait > .icon {
  width: 27px;
  height: 27px;
}
.portrait > b {
  position: absolute;
  right: -2px;
  bottom: -3px;
  background: var(--gold);
  color: #493c22;
  min-width: 18px;
  border-radius: 4px;
  font-size: 11px;
  text-align: center;
}
.player-medallion > span:last-child {
  min-width: 0;
}
.player-medallion strong {
  display: block;
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-medallion small {
  font-size: 11px;
  color: #ced8b9;
  display: block;
}
.league-badge {
  font-size: 12px;
  min-height: 44px;
}
.league-badge > .icon {
  color: var(--gold);
  width: 18px;
}
.league-badge span {
  display: flex;
  gap: 16px;
  align-items: center;
}
.league-badge b {
  color: var(--gold);
}
.builder-stack {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.builder-chip {
  min-width: 92px;
  height: 52px;
  padding: 6px 10px;
}
.builder-chip > .icon {
  color: var(--gold);
  width: 23px;
  height: 23px;
}
.builder-chip span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.builder-chip b {
  font-size: 18px;
  line-height: 1.2;
}
.builder-chip small {
  font-size: 11px;
  color: #ced8b9;
}
.resource-bar {
  position: absolute;
  right: 0;
  top: 0;
  width: 184px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.resource {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  padding: 4px 5px 4px 10px;
  min-height: 44px;
  gap: 6px;
  border-radius: 8px;
}
.resource-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  background: #42644990;
}
.resource-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 8px;
  min-width: 0;
}
.resource-caption small {
  font: 600 10px Space;
  text-transform: uppercase;
  color: #ccd6be;
}
.resource-caption strong {
  font-size: 17px;
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
}
.resource-cap {
  display: none;
}
.resource-icon {
  width: 27px;
  height: 27px;
  background: #d9bb70;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #4e462b;
}
.resource-icon .icon {
  width: 18px;
  height: 18px;
}
.resource-grain .resource-icon {
  background: #bbcb86;
}
.resource-wood .resource-icon {
  background: #d2b28a;
}
.resource-iron .resource-icon {
  background: #b7c9cc;
}
.resource-gems .resource-icon {
  background: #a4cf8b;
}
.resource-gems > .icon {
  display: none;
}
.resource-storage {
  position: absolute;
  right: calc(100% + 8px);
  top: 0;
  width: 300px;
  max-width: calc(100vw - 220px);
  padding: 16px;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  pointer-events: auto;
  color: var(--ink);
  max-height: calc(100dvh - 32px);
  overflow: auto;
}
.resource-storage > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.resource-storage > p {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.resource-storage p strong {
  margin-left: auto;
}
.resource-storage p small {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}
.resource-storage > span {
  display: block;
  font-size: 12px;
  margin-top: 12px;
  color: var(--muted);
}
#objective-actions {
  position: absolute;
  left: var(--edge-left);
  top: 140px;
  width: 230px;
}
.objective-chip {
  display: flex;
  background: #f9f4dfef;
  border: 1px solid #d4bc7c;
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.objective-follow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  text-align: left;
  background: none;
  flex: 1;
  min-width: 0;
  min-height: 48px;
}
.objective-follow > .icon {
  width: 18px;
  color: #7f783d;
}
.objective-follow > span {
  min-width: 0;
}
.objective-follow small {
  display: block;
  font: 700 10px Space;
  color: #737944;
  letter-spacing: .6px;
}
.objective-follow strong {
  font-size: 13px;
  line-height: 1.25;
  display: block;
  margin-top: 2px;
}
.objective-dismiss {
  width: 44px;
  min-width: 44px;
  background: transparent;
  border-left: 1px solid #daceb0;
  color: #7b7054;
}
.objective-dismiss .icon {
  width: 16px;
}
#side-tools {
  position: absolute;
  left: var(--edge-left);
  top: 206px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.side-button {
  font-size: 12px;
}
.collect-all {
  background: #e9edcc;
  color: #38583c;
}
.has-panel #home-hud,
.has-panel #objective-actions,
.has-panel #side-tools,
.has-panel #home-actions,
.has-panel #camera-tools {
  visibility: hidden;
}
#home-actions {
  position: absolute;
  left: var(--edge-left);
  right: var(--edge-right);
  bottom: var(--edge-bottom);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.home-controls {
  display: flex;
  gap: 8px;
}
.campaign-button,
.army-button,
.build-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  padding: 12px 18px;
  min-height: 64px;
  border: 1px solid #d5bd7c;
  box-shadow: 0 4px 0 #173629;
  background: var(--emerald);
  color: var(--ivory);
}
.campaign-button {
  background: linear-gradient(#f1d18a, #d8a94b);
  border-color: #fbe5ae;
  color: #493715;
  min-width: 126px;
  box-shadow: 0 4px 0 #88642a;
}
.campaign-button strong {
  font-size: 21px;
}
.campaign-button .icon {
  width: 27px;
  height: 27px;
}
.army-button > span,
.build-button > span {
  font: 700 15px Space;
}
.army-button small {
  display: block;
  font: 500 11px Manrope;
  color: #d1ddc6;
}
.build-button {
  background: var(--emerald-light);
}
.build-button > .icon {
  color: var(--gold);
}
.hero-home-button > .icon {
  color: var(--gold);
}
#camera-tools {
  position: absolute;
  bottom: 96px;
  right: var(--edge-right);
  display: flex;
  gap: 6px;
}
#camera-tools .icon-button {
  background: var(--emerald);
  border-color: #c5ad7266;
  color: var(--ivory);
}
#camera-tools [data-value=zoomIn],
#camera-tools [data-value=zoomOut] {
  display: none;
}
/* Building selection and placement. */
#context-actions,
#placement-actions {
  position: absolute;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 320px);
}
.context-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
}
.context-title {
  grid-column: 1;
  grid-row: 1;
  padding: 5px 12px;
  background: var(--emerald);
  border: 1px solid #d4b86a;
  border-radius: 8px;
  color: var(--ivory);
  text-align: center;
}
.context-title strong {
  font-size: 16px;
}
.context-title strong > span {
  font-size: 12px;
  color: #d3dfc7;
  margin-left: 6px;
}
.context-title small {
  display: block;
  font-size: 11px;
  color: #ead7a1;
}
.context-title .icon {
  width: 14px;
  height: 14px;
}
.context-buttons {
  grid-column: 1 / -1;
  justify-content: center;
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.context-action {
  min-width: 72px;
  max-width: 138px;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  border: 1px solid #d3c091;
  border-radius: 9px;
  background: var(--ivory);
  color: var(--ink);
  box-shadow: 0 3px 0 #7c80614d;
}
.context-action > .icon {
  width: 22px;
  height: 22px;
}
.context-action > strong {
  font-size: 12px;
}
.context-action > small,
.context-action .cost {
  font-size: 10px;
}
.context-action .cost .icon {
  width: 12px;
  height: 12px;
}
.context-upgrade,
.context-primary {
  background: linear-gradient(var(--gold-light), var(--gold));
  color: #493715;
  border-color: #e0bb65;
}
.context-collect,
.context-direct {
  background: #e4edcb;
}
.context-close {
  min-width: 44px;
  max-width: 44px;
}
.context-action:disabled {
  background: #e0e2d6;
  color: #808576;
  border-color: #c5c7b9;
  box-shadow: none;
}
.placement-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--ivory);
  border: 2px solid #d6b465;
  border-radius: 12px;
  box-shadow: var(--shadow);
  max-width: 680px;
}
.placement-card > div {
  flex: 1;
  min-width: 0;
}
.placement-card small {
  font: 700 10px Space;
  letter-spacing: .7px;
  color: var(--muted);
}
.placement-card strong {
  display: block;
  font-size: 16px;
}
.placement-card p {
  font-size: 12px;
  margin-top: 4px;
}
.placement-card .invalid {
  color: var(--danger);
}
.placement-icon {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e4eaca;
  color: #4f753b;
}
.is-placing #home-actions,
.is-placing #side-tools {
  visibility: hidden;
}
/* Shared panel frame. Fixed header and toolbar, one scrollable content body. */
#panel-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}
.game-panel {
  position: absolute;
  inset: var(--edge-top) var(--edge-right) var(--edge-bottom) var(--edge-left);
  margin-inline: auto;
  width: auto;
  max-width: 1000px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ivory);
  border: 1px solid #c5a65d;
  border-radius: 16px;
  box-shadow: 0 20px 80px #09272180, 0 0 0 4px #103e322e;
  pointer-events: auto;
}
.panel-settings,
.panel-help,
.panel-chronicle,
.panel-gems,
.panel-finish {
  max-width: 740px;
}
.panel-retreat {
  max-width: 520px;
  inset: auto var(--edge-right) auto var(--edge-left);
  top: 50%;
  transform: translateY(-50%);
  max-height: calc(100dvh - 32px);
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
  min-height: 72px;
  padding: 12px 20px;
  background: var(--emerald);
  border-bottom: 1px solid #d7b763;
  color: var(--ivory);
}
.panel-header > div {
  min-width: 0;
}
.panel-header .eyebrow {
  color: #c8d7b9;
  font-size: 10px;
  letter-spacing: 1px;
}
.panel-header h2 {
  font-size: 26px;
  line-height: 1.2;
  margin-top: 4px;
}
.panel-close {
  background: #ffffff0d;
  color: #f3e4be;
  border-color: #aac3a459;
  box-shadow: none;
  flex: 0 0 44px;
}
.panel-close:not(:disabled):hover {
  background: #ffffff20;
}
.panel-content {
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #a3a98a #eee7d3;
  scroll-padding: 16px;
  -webkit-overflow-scrolling: touch;
}
.panel-content > :last-child {
  margin-bottom: 0;
}
.panel-intro {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
  max-width: 780px;
}
.section-title {
  font-size: 18px;
  margin: 24px 0 12px;
}
.workspace-toolbar {
  flex: 0 0 auto;
  padding: 8px 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.catalog-tabs,
.panel-nav,
.upgrade-tabs {
  display: flex;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.catalog-tab,
.panel-nav button,
.upgrade-tabs button {
  flex: 0 0 auto;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  min-height: 44px;
  white-space: nowrap;
  padding: 10px 16px;
}
.catalog-tab.active,
.panel-nav .active,
.panel-nav [aria-current=page],
.upgrade-tabs .active,
.upgrade-tabs [aria-selected=true] {
  background: var(--emerald);
  color: var(--ivory);
  border-color: var(--emerald);
}
.panel-nav {
  padding: 4px 16px;
  background: #e7deca;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.panel-header .panel-nav {
  padding: 0;
  background: transparent;
  border: 0;
  margin-left: auto;
}
.panel-header .panel-nav button {
  color: #dbe5ce;
}
.panel-header .panel-nav .active {
  background: #ffffff1c;
  border-color: #d0bb7580;
}
.workspace-summary {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
}
.workspace-summary > span:last-child {
  border-left: 1px solid var(--line);
  padding-left: 12px;
}
.workspace-footnote {
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px;
}
.item-art,
.hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  isolation: isolate;
}
.item-art img,
.hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
.item-art > .icon,
.hero-art > .icon,
.art-monogram {
  display: none;
}
.item-art:has(img[hidden]) > .icon,
.hero-art:has(img[hidden]) > .icon {
  display: block;
  color: #72815b;
  width: 36px;
  height: 36px;
}
.unit-art img {
  object-position: 50% 55%;
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  align-items: start;
}
.catalog-card,
.army-roster-card,
.research-card,
.forge-card {
  background: #fffaf0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
}
.catalog-select {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
  text-align: left;
}
.catalog-portrait {
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background:
    radial-gradient(
      ellipse at 50% 78%,
      #a8b1783d,
      transparent 64%),
    #f0ecd9;
}
.catalog-portrait .item-art {
  width: 100%;
  height: 100%;
}
.catalog-owned {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  padding: 2px 5px;
  font: 700 11px Space;
  background: #fbf6e6;
  border: 1px solid #c7bc9a;
  border-radius: 4px;
}
.catalog-select h3 {
  font-size: 16px;
  margin: 12px 12px 4px;
}
.catalog-role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin: 0 12px;
}
.catalog-role > .icon {
  width: 16px;
  height: 16px;
}
.catalog-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.catalog-status {
  font-size: 12px;
  line-height: 1.4;
  min-height: 34px;
  color: var(--muted);
}
.catalog-status.needs-action {
  color: #856742;
}
.catalog-card-body .full-button {
  margin-top: 0;
}
.catalog-detail {
  font-size: 12px;
  line-height: 1.5;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
}
.catalog-card.unavailable .catalog-portrait {
  filter: saturate(.6);
}
.catalog-card.unavailable .catalog-status {
  color: #797762;
}
/* Army composition, training cards and tool controls. */
.panel-army .workspace-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 20px;
}
.army-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.army-summary > span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.army-summary > span > .icon {
  color: #6f7d4a;
}
.army-summary strong {
  font-size: 22px;
  white-space: nowrap;
}
.army-summary small {
  font: 500 12px Manrope;
  color: var(--muted);
}
.army-toolbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.army-toolbar-row .catalog-tabs {
  flex: 1;
}
.army-tools-toggle {
  flex: 0 0 auto;
}
.capacity-track {
  height: 4px;
  background: #d4d6bd;
  border-radius: 4px;
  overflow: hidden;
}
.capacity-track > i {
  display: block;
  height: 100%;
  background: #778d4a;
}
.workspace-toolbar > .capacity-track {
  display: none;
}
.army-toolbox {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  max-height: 124px;
  overflow: auto;
}
.army-toolbox > p {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--muted);
}
.workspace-toolbar > .review-battle {
  grid-column: 1/-1;
  margin: 0;
}
.army-composition {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 16px;
  background: #edf0db;
  border: 1px solid #d3dabc;
  border-radius: 10px;
}
.composition-heading {
  flex: 0 0 auto;
}
.composition-heading strong {
  font-size: 14px;
  display: block;
}
.composition-heading > span {
  font-size: 11px;
  display: block;
  color: var(--muted);
}
.composition-portraits {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  min-width: 0;
  flex: 1;
}
.composition-portraits > span {
  position: relative;
  flex: 0 0 52px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #faf7e8;
  border-radius: 6px;
  border: 1px solid #d3d8b7;
}
.composition-portraits .item-art {
  height: 42px;
  width: 44px;
}
.composition-portraits b {
  position: absolute;
  right: 2px;
  top: 1px;
  padding: 0 3px;
  border-radius: 3px;
  background: var(--emerald);
  color: var(--ivory);
  font-size: 10px;
  z-index: 2;
}
.composition-portraits small {
  display: none;
}
.army-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 16px;
}
.roster-select {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px;
  background: transparent;
  text-align: left;
  min-height: 108px;
}
.roster-select > .item-art {
  height: 92px;
  width: 76px;
}
.roster-select > .unit-art img {
  transform: scale(1.25);
}
.roster-title {
  min-width: 0;
  flex: 1;
}
.roster-title h3 {
  font-size: 16px;
  margin-bottom: 6px;
}
.roster-title > span {
  font-size: 12px;
  color: var(--muted);
}
.roster-select > .icon {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 15px;
  height: 15px;
  color: #95947a;
}
.roster-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.roster-controls > span {
  text-align: center;
  min-width: 24px;
}
.roster-controls strong {
  display: block;
  font-size: 22px;
  line-height: 1.1;
}
.roster-controls small {
  font-size: 11px;
  display: block;
}
.roster-controls > .roster-add {
  background: var(--emerald-light);
  border-color: var(--emerald);
  color: var(--ivory);
  box-shadow: none;
}
.roster-controls > .roster-add:disabled {
  background: #dde1d2;
  border-color: #cbd1bf;
  color: #86917d;
}
.army-roster-card > .catalog-detail {
  margin: 0 12px;
}
.roster-stats {
  display: flex;
  gap: 16px;
}
.roster-stats b {
  display: block;
  font-size: 16px;
}
.roster-stats span {
  font-size: 12px;
}
.roster-unlock {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px;
  background: var(--paper);
  font-size: 12px;
}
.roster-unlock .button {
  width: 100%;
}
.army-next-step {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.army-next-step p {
  font-size: 12px;
  color: var(--muted);
}
.army-next-step > .button {
  flex-shrink: 0;
}
/* Pinned upgrade decision, stats and appearance exploration. */
.upgrade-action-bar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 20px;
  padding: 12px 20px;
  background: #f1e6c9;
  border-bottom: 1px solid #d5c396;
  align-items: center;
}
.upgrade-action-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.upgrade-action-summary > .item-art {
  width: 76px;
  height: 60px;
}
.upgrade-action-summary > div {
  min-width: 0;
}
.upgrade-action-summary strong {
  font-size: 18px;
  display: block;
}
.upgrade-action-summary small {
  font-size: 12px;
  display: block;
  color: #6e7259;
}
.upgrade-action-summary .icon {
  width: 18px;
  height: 18px;
}
.upgrade-action-main {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
}
.upgrade-action-main > .button {
  margin: 0;
  min-width: 168px;
  font-size: 14px;
  min-height: 48px;
}
.upgrade-action-cost {
  display: grid;
  gap: 4px;
}
.upgrade-action-cost > small {
  font: 700 10px Space;
  color: #7b7252;
  letter-spacing: .8px;
}
.upgrade-action-cost .cost {
  font-size: 14px;
  gap: 4px 12px;
}
.upgrade-gate {
  grid-column: 1/-1;
  font-size: 12px;
  line-height: 1.4;
  color: #85533c;
  display: flex;
  align-items: center;
  gap: 8px;
}
.upgrade-gate:empty {
  display: none;
}
.upgrade-tabs {
  margin: 0 0 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.upgrade-details {
  max-width: 880px;
  margin-inline: auto;
}
.building-stats {
  margin-bottom: 16px;
}
.comparison-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font: 700 10px Space;
  letter-spacing: 1px;
  color: var(--muted);
}
.stat-comparison {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fffaf0;
}
.stat-comparison > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 24px 70px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #e5dcc6;
  font-size: 13px;
}
.stat-comparison > div:last-child {
  border: 0;
}
.stat-comparison strong,
.stat-comparison b {
  text-align: right;
  font-size: 15px;
}
.stat-comparison b {
  color: #477147;
}
.stat-comparison .icon {
  width: 16px;
  height: 16px;
  justify-self: center;
  color: #a59b7d;
}
.unlock-callout {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #edf0d8;
  border: 1px solid #cdd6ad;
  border-radius: 8px;
  padding: 12px;
  margin: 16px 0;
  font-size: 13px;
}
.unlock-callout small {
  display: block;
  font: 700 10px Space;
  letter-spacing: 1px;
  color: #6f7c48;
  margin-bottom: 3px;
}
.upgrade-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}
.upgrade-hero > .item-art {
  width: 160px;
  height: 130px;
}
.upgrade-hero h3 {
  margin: 8px 0;
}
.upgrade-hero p {
  font-size: 13px;
  color: var(--muted);
}
.level-pill {
  display: inline-flex;
  border-radius: 5px;
  padding: 4px 7px;
  font: 700 11px Space;
  background: #ecd499;
  color: #5c4924;
  border: 1px solid #cfb473;
}
.upgrade-requirement {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin: 16px 0 8px;
}
.requirement {
  font-size: 12px;
  color: var(--muted);
}
.upgrade-payment {
  padding: 12px;
  background: var(--paper);
  border-radius: 8px;
  margin-top: 16px;
}
.upgrade-payment > small {
  display: block;
  font-size: 10px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.building-evolution-comparison {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 16px;
  background: #eef0da;
  border: 1px solid #d5dbbd;
  border-radius: 12px;
  margin-bottom: 16px;
}
.building-evolution-comparison figure {
  margin: 0;
  flex: 1;
  text-align: center;
}
.building-evolution-comparison .item-art {
  width: 100%;
  height: 160px;
}
.building-evolution-comparison figcaption {
  font: 600 13px Space;
  margin-top: 8px;
}
.evolution-toggle {
  width: 100%;
  margin-bottom: 16px;
}
.building-gallery {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffaf0;
  margin-bottom: 16px;
}
.evolution-preview {
  display: flex;
  align-items: center;
  gap: 24px;
}
.evolution-preview > .item-art {
  width: 45%;
  height: 200px;
}
.evolution-preview strong {
  display: block;
  font-size: 20px;
}
.evolution-preview small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}
.evolution-levels {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 2px;
  scrollbar-width: thin;
}
.evolution-level {
  flex: 0 0 80px;
  min-height: 96px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font: 700 13px Space;
}
.evolution-level .item-art {
  width: 70px;
  height: 64px;
}
.evolution-level.selected {
  border: 2px solid var(--emerald);
  background: #e2e8c9;
}
.building-gallery > p {
  font-size: 12px;
  color: var(--muted);
}
/* Builders, research, heroes and equipment. */
.builders-summary,
.lab-status,
.builder-offer,
.timer-job,
.research-running,
.readiness-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  padding: 12px;
  margin-bottom: 16px;
}
.builders-summary > span,
.builder-offer > div,
.timer-job > span {
  flex: 1;
  min-width: 0;
}
.builders-summary strong {
  display: block;
  font-size: 16px;
}
.builders-summary small,
.timer-job small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.builders-summary > .icon,
.builder-offer > .icon {
  width: 28px;
  height: 28px;
  color: #7c8a54;
}
.builder-project {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffaf0;
  margin-bottom: 8px;
}
.builder-project > .item-art,
.builder-project > .hero-art {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
}
.builder-project > div {
  flex: 1;
  min-width: 0;
}
.builder-project h3 {
  font-size: 16px;
}
.builder-project h3 small {
  font-size: 12px;
  color: var(--muted);
}
.builder-project .cost {
  margin-top: 6px;
}
.builder-project p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}
.builder-project > .button {
  flex-shrink: 0;
}
.builder-project.is-ready {
  border-left: 3px solid #7f9a56;
}
.lab-status > strong {
  flex: 1;
}
.research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.research-card {
  padding: 16px;
}
.research-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.research-card-title .item-art {
  height: 80px;
  width: 72px;
}
.research-card-title h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.research-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  font-size: 12px;
}
.research-price > span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
}
.research-price > span > .icon {
  width: 16px;
  height: 16px;
}
.research-running {
  flex-wrap: wrap;
  background: #e9edce;
  border-color: #cbd3a7;
  font-size: 13px;
}
.research-running .button {
  margin-left: auto;
}
.hero-roster {
  display: grid;
  gap: 16px;
}
.hero-profile {
  display: grid;
  grid-template-columns: minmax(160px, .8fr) minmax(0, 1.6fr);
  background: #fffaf0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.hero-profile.chosen {
  border-color: #799754;
  box-shadow: inset 0 0 0 1px #799754;
}
.hero-portrait-scene {
  position: relative;
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 240px;
  background:
    radial-gradient(
      ellipse at 50% 45%,
      #d9dcad,
      transparent 70%),
    #e6e3c9;
}
.hero-portrait-scene > .hero-art {
  width: 100%;
  height: 280px;
}
.hero-portrait-scene > .level-pill {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
}
.selected-ribbon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px;
  text-align: center;
  background: var(--emerald);
  color: var(--gold);
  font: 700 10px Space;
  letter-spacing: .6px;
}
.hero-profile-body {
  padding: 20px;
  min-width: 0;
}
.hero-profile-body > h3 {
  font-size: 25px;
}
.hero-ability-title {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
  color: #9a7539;
  font-size: 13px;
}
.hero-profile-body > p {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}
.hero-profile-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.hero-profile-actions .button {
  flex: 1;
}
.hero-equipment {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
.equip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.equip-head > .icon {
  color: #5e8389;
}
.equip-head strong,
.equip-head small {
  display: block;
}
.equip-head small {
  font-size: 11px;
  color: var(--muted);
}
.equip-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.equip-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  min-height: 60px;
  border: 1px dashed #b6b99e;
  border-radius: 8px;
  background: #f1efdD;
  text-align: left;
}
.equip-slot.filled {
  border-style: solid;
  background: #eaf0d9;
}
.equip-slot.choosing {
  outline: 2px solid #72894a;
}
.equip-slot strong,
.equip-slot small {
  display: block;
}
.equip-slot strong {
  font-size: 13px;
}
.equip-slot small {
  font-size: 11px;
  color: var(--muted);
}
.equip-slot.locked {
  opacity: .7;
}
.equip-chooser {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.equip-option small {
  display: block;
  font-size: 11px;
}
.forge-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.forge-card {
  padding: 12px;
}
.forge-title {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.forge-title small {
  font-size: 11px;
  color: var(--muted);
}
.forge-card p {
  font-size: 12px;
  color: var(--muted);
}
.forge-effects,
.forge-next {
  display: grid;
  gap: 4px;
  font-size: 12px;
  margin-top: 12px;
}
.forge-effects {
  color: #507a40;
}
.forge-next {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.forge-next > small {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
}
.forge-price {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 12px;
}
.forge-price > .icon {
  width: 16px;
  height: 16px;
}
.forge-price > b {
  font-size: 17px;
}
.gem-wallet {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid #ccd7ac;
  background: #edf2db;
  border-radius: 12px;
  margin-bottom: 16px;
}
.gem-wallet > .icon {
  width: 48px;
  height: 48px;
  color: #659348;
}
.gem-wallet strong {
  font-size: 34px;
  display: block;
  line-height: 1;
}
.gem-wallet span {
  font: 700 10px Space;
  letter-spacing: 1px;
  color: var(--muted);
}
.gem-wallet > small {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}
.builder-offer h3 {
  font-size: 18px;
  margin-bottom: 6px;
}
.builder-offer p {
  font-size: 12px;
  color: var(--muted);
}
.achievement-list > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.achievement-list span {
  flex: 1;
}
.achievement-list b {
  display: flex;
  align-items: center;
  gap: 4px;
}
.achievement-list .complete {
  color: #658149;
}
.achievement-list b > .icon {
  width: 16px;
  height: 16px;
}
.finish-emblem {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  color: #72a052;
  background: #ebefd1;
  border-radius: 50%;
}
.finish-emblem > .icon {
  width: 40px;
  height: 40px;
}
.finish-title {
  text-align: center;
  font-size: 24px;
}
.finish-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 16px;
  color: var(--muted);
  font-size: 14px;
}
.gem-confirm {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-size: 13px;
}
.gem-confirm strong {
  display: flex;
  gap: 6px;
  align-items: center;
  color: #4d8342;
}
.gem-confirm b {
  text-align: right;
}
.gate-reason,
.settings-note,
.battle-commit-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background: #f3ead7;
  border: 1px solid #dfcdac;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #856a43;
  margin: 12px 0;
}
.gate-reason > .icon,
.settings-note > .icon,
.battle-commit-note > .icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}
.fine-print,
.reward-note,
.overflow-note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin: 12px 0;
}
.empty-state {
  text-align: center;
  padding: 24px 12px;
}
.empty-state > .icon {
  width: 44px;
  height: 44px;
  color: #78924c;
}
.empty-state h3 {
  font-size: 23px;
  margin: 12px 0;
}
.empty-state p {
  font-size: 13px;
  margin-bottom: 16px;
  color: var(--muted);
}
/* Campaign, Royal League and online battles. */
.attack-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.battle-tab {
  flex: 1;
  min-height: 56px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
}
.battle-tab strong {
  display: block;
  font-size: 15px;
}
.battle-tab small {
  display: block;
  font-size: 11px;
  color: var(--muted);
}
.battle-tab.active {
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--ivory);
}
.battle-tab.active small {
  color: #cbd9bc;
}
.battle-tab > .icon {
  width: 23px;
  height: 23px;
}
.campaign-intro {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}
.campaign-intro p {
  font-size: 13px;
  color: var(--muted);
}
.map-compass {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  height: 48px;
  border-radius: 50%;
  background: #e8e5c9;
  color: #7d8551;
}
.map-compass .icon {
  width: 27px;
  height: 27px;
}
.campaign-stars {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 18px Space;
  color: #987436;
}
.campaign-route {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.raid-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: #fffaf0;
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 0;
}
.route-marker {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e7d096;
  color: #695329;
  font: 700 12px Space;
}
.route-marker .icon {
  width: 16px;
  height: 16px;
}
.raid-landmark {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      ellipse,
      #e1e6bf,
      transparent 70%);
}
.raid-landmark > .item-art {
  width: 100%;
  height: 100%;
}
.raid-region {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.raid-region .eyebrow {
  font-size: 10px;
}
.raid-region .stars .icon {
  width: 14px;
  height: 14px;
}
.raid-card h3 {
  font-size: 21px;
}
.raid-card > p {
  font-size: 12px;
  color: var(--muted);
}
.raid-brief {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.raid-brief > .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.raid-rewards {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.raid-rewards > small {
  display: block;
  font: 700 10px Space;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: 8px;
}
.raid-rewards .cost {
  font-size: 12px;
  gap: 4px 8px;
}
.raid-start {
  margin-top: 4px;
  min-height: 44px;
}
.raid-card.locked {
  background: #f2efdf;
}
.ranked-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0;
}
.rank-shield {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  color: #b29a54;
}
.rank-shield .icon {
  width: 72px;
  height: 72px;
}
.rank-shield b {
  position: absolute;
  font-size: 25px;
}
.ranked-hero h3 {
  font-size: 28px;
  margin: 4px 0;
}
.ai-label {
  font: 700 10px Space;
  color: var(--muted);
  letter-spacing: 1px;
}
.league-ladder {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 12px;
  background: var(--paper);
  border-radius: 10px;
  overflow-x: auto;
}
.league-ladder > span {
  flex: 1;
  min-width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #939581;
}
.league-ladder small {
  font-size: 11px;
}
.league-ladder .current {
  color: #8c6b25;
}
.ranked-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0;
  text-align: center;
}
.ranked-stats strong {
  display: block;
  font-size: 26px;
}
.ranked-stats small {
  font-size: 12px;
  color: var(--muted);
}
.league-countdown {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--muted);
  margin: 12px 0;
}
.league-rewards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.league-rewards > span {
  font: 700 10px Space;
  background: #eeebd8;
  padding: 12px;
  border-radius: 8px;
}
.league-rewards b {
  display: block;
  font-size: 13px;
  margin-top: 4px;
}
.league-rewards .icon {
  width: 14px;
  height: 14px;
}
.league-table {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 16px;
}
.league-table-head,
.league-entry {
  display: grid;
  grid-template-columns: 48px 1fr 80px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.league-table-head {
  background: var(--paper);
  font: 700 10px Space;
  letter-spacing: 1px;
}
.league-entry strong,
.league-table-head > :last-child {
  text-align: right;
}
.league-entry small {
  font: 700 10px Space;
  color: var(--muted);
  margin-left: 8px;
}
.league-entry.is-player {
  background: #e9efd5;
}
.league-entry:last-child {
  border: 0;
}
.league-history > div {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.online-status,
.online-summary,
.online-profile,
.online-stats,
.online-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.online-actions > .button {
  flex: 1;
}
.opponent-list,
.online-list,
.online-opponents {
  display: grid;
  gap: 12px;
}
.opponent-card,
.online-opponent,
.online-match {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffaf0;
}
.opponent-card h3,
.online-opponent h3 {
  font-size: 18px;
}
.opponent-card p,
.online-opponent p {
  font-size: 12px;
  color: var(--muted);
}
.online-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0;
}
.online-hero > .icon {
  width: 44px;
  height: 44px;
  color: #789156;
}
.online-hero h3 { font-size: 26px; margin: 4px 0; }
.online-privacy {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  margin-bottom: 16px;
  background: #edf0df;
  border: 1px solid #d3dbbd;
  border-radius: 10px;
  font-size: 13px;
  color: var(--muted);
}
.online-opponent-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.online-opponent-head strong { display: block; font-size: 19px; }
.online-opponent-head small { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.online-actions > .full-button { margin: 0; }

/* Battle briefing and result summary. */
.briefing-layout {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(0, 1.1fr);
  gap: 24px;
}
.scout-card {
  min-width: 0;
}
.briefing-map {
  display: block;
  width: 100%;
  height: auto;
  max-height: 300px;
  aspect-ratio: 1;
  border-radius: 12px;
}
.map-legend {
  display: flex;
  gap: 8px 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
  margin: 8px 0 12px;
}
.map-legend > span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.map-legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #b18e51;
}
.map-legend .legend-taj {
  background: #e9c569;
}
.map-legend .legend-defense {
  background: #b96a5a;
}
.map-legend .legend-wall {
  background: #796a4c;
}
.scout-card h3 {
  font-size: 21px;
}
.scout-card p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}
.defense-counts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.defense-counts > span {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 5px;
  background: var(--paper);
}
.briefing-army {
  min-width: 0;
}
.briefing-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.briefing-section-title h3 {
  font-size: 24px;
}
.briefing-space {
  font-size: 15px;
  color: #657848;
}
.briefing-troops {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
}
.briefing-troops > span {
  position: relative;
  width: 76px;
  min-width: 0;
  text-align: center;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.briefing-troops .item-art {
  height: 66px;
  width: 100%;
}
.briefing-troops b {
  position: absolute;
  right: 4px;
  top: 4px;
  border-radius: 3px;
  background: var(--emerald);
  color: var(--ivory);
  font-size: 11px;
  padding: 0 3px;
}
.briefing-troops small {
  font-size: 10px;
  display: block;
  line-height: 1.3;
}
.readiness-row {
  background: #f0efde;
  border: 0;
  padding: 12px;
  font-size: 13px;
}
.readiness-row p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.briefing-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}
.briefing-actions > .button {
  min-width: 132px;
}
.battle-commit-note {
  color: var(--muted);
  margin-top: 20px;
}
.battle-commit-note p {
  font-size: 12px;
}
.retreat-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}
.retreat-summary strong {
  font-size: 17px;
}
.result-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--edge-top) var(--edge-right) var(--edge-bottom) var(--edge-left);
  background: #072d27ae;
  z-index: 80;
}
.result-card {
  width: min(800px, 100%);
  max-height: 100%;
  padding: 24px;
  background: var(--ivory);
  border: 1px solid var(--gold);
  border-radius: 16px;
  box-shadow: 0 20px 80px #03171180;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  overflow: auto;
}
.result-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
}
.result-emblem {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: #e8eacb;
  border-radius: 50%;
  color: #809151;
}
.result-emblem > .icon {
  width: 40px;
  height: 40px;
}
.result-head > .stars .icon {
  width: 34px;
  height: 34px;
}
.result-head h2 {
  font-size: 29px;
}
.result-head p {
  font-size: 13px;
  color: var(--muted);
}
.result-destruction {
  font: 700 19px Space;
  color: #718450;
}
.result-summary {
  min-width: 0;
}
.result-loot {
  padding: 16px;
  border-radius: 10px;
  background: var(--paper);
  margin-bottom: 12px;
}
.result-loot > small {
  display: block;
  font: 700 10px Space;
  letter-spacing: .7px;
  color: var(--muted);
  margin-bottom: 8px;
}
.result-loot .cost {
  font-size: 21px;
  gap: 8px 16px;
}
.result-loot .cost .icon {
  width: 22px;
  height: 22px;
}
.empty-loot {
  font-size: 13px;
  color: var(--muted);
}
.result-bonus {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13px;
  background: #eaf0d5;
  border-radius: 6px;
  margin: 6px 0;
}
.result-troops {
  margin-top: 16px;
}
.result-troops > small {
  font: 700 10px Space;
  letter-spacing: .6px;
  color: var(--muted);
}
.result-troops > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.result-troops > div > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
}
.result-troops .item-art {
  width: 42px;
  height: 46px;
}
.result-card > .button {
  grid-column: 1/-1;
  justify-self: center;
  min-width: 240px;
  margin-top: 8px;
}
/* Kingdom settings, chronicle and field guide. */
.settings-crest {
  display: none;
}
#name-form > label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}
.name-field {
  display: flex;
  gap: 8px;
}
.name-field input {
  min-width: 0;
  flex: 1;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #bebf9e;
  border-radius: 8px;
  background: #fffdf4;
  font-size: 16px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.settings-row > span {
  display: flex;
  align-items: center;
  gap: 12px;
}
.settings-row strong {
  display: block;
  font-size: 14px;
}
.settings-row small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.settings-row select {
  min-height: 44px;
  border: 1px solid #bdc3a4;
  border-radius: 8px;
  background: #fffdf4;
  padding: 8px 12px;
  font-size: 14px;
}
.sound-toggle {
  min-width: 64px;
}
.settings-note {
  background: #edf0df;
  color: var(--muted);
  border-color: #d4d9bf;
  margin: 16px 0;
}
.settings-note p {
  font-size: 12px;
}
.save-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.save-actions > .button {
  flex: 1;
}
.guide-link {
  justify-content: flex-start;
}
.guide-link > .icon:last-child {
  margin-left: auto;
}
.chapters {
  display: grid;
  gap: 16px;
}
.chapter {
  position: relative;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffaf0;
}
.chapter-number {
  position: absolute;
  right: 16px;
  top: 8px;
  font: 700 44px Space;
  color: #e7e3cd;
}
.chapter h3 {
  font-size: 23px;
  position: relative;
  margin: 8px 0;
}
.chapter p {
  font-size: 13px;
  color: var(--muted);
}
.chapter ul {
  padding: 0;
  margin: 16px 0 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.chapter li {
  display: flex;
  gap: 8px;
  font-size: 13px;
  align-items: center;
}
.chapter li.complete {
  color: #698447;
}
.chapter li .icon {
  width: 17px;
  height: 17px;
}
.field-guide {
  display: grid;
  gap: 16px;
}
.guide-section {
  display: flex;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.guide-section > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: #e9ecd5;
  border-radius: 8px;
  color: #698449;
  flex: 0 0 40px;
}
.guide-section h3 {
  font-size: 17px;
  margin-bottom: 8px;
}
.guide-section p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}
/* Combat HUD, troop deck, heroes and spells. */
#battle-hud {
  position: absolute;
  inset: var(--edge-top) var(--edge-right) auto var(--edge-left);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ivory);
}
.battle-title,
.battle-score,
.battle-time,
.retreat-button {
  background: var(--emerald);
  border: 1px solid #c3ad7170;
  border-radius: 9px;
  box-shadow: 0 3px 12px #071c2d30;
}
.battle-title {
  padding: 8px 12px;
  max-width: 250px;
  min-width: 130px;
}
.battle-title small {
  display: block;
  font: 700 9px Space;
  letter-spacing: .7px;
  color: #ccd8bb;
}
.battle-title strong {
  display: block;
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.battle-score {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  min-height: 48px;
}
.battle-score > strong {
  font-size: 23px;
}
.battle-score > strong small {
  font-size: 12px;
}
.battle-score > span:last-child {
  display: none;
}
.battle-score .stars .icon {
  width: 18px;
  height: 18px;
}
.battle-time {
  margin-left: auto;
  padding: 8px 12px;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.battle-time strong {
  font-size: 23px;
  font-variant-numeric: tabular-nums;
}
.battle-time.urgent {
  color: #ffcd96;
}
.retreat-button {
  padding: 10px 12px;
  min-height: 48px;
  color: #f1dfb4;
  font-size: 12px;
  font-weight: 700;
}
.retreat-button > .icon {
  display: none;
}
#troop-actions {
  position: absolute;
  left: var(--edge-left);
  right: var(--edge-right);
  bottom: var(--edge-bottom);
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 1100px;
  margin-inline: auto;
  min-height: 88px;
  padding: 6px;
  background: #12382fec;
  border: 1px solid #cab47a;
  border-radius: 12px;
  color: var(--ivory);
}
#troop-actions:empty {
  display: none;
}
.deployment-hint {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 100%;
  min-height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #143c2eea;
  border: 1px solid #bcc79e77;
  border-radius: 7px;
  font-size: 12px;
  color: #f3edcf;
  pointer-events: none;
}
.deployment-hint > .icon {
  width: 16px;
  height: 16px;
}
.deployment-hint.spell-aiming {
  background: #244b64;
  pointer-events: auto;
}
.cancel-aim {
  padding: 7px 10px;
  min-height: 44px;
}
.deck-caption {
  display: none;
}
.troop-tray {
  order: 0;
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 8px;
}
.troop-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  min-width: 0;
  flex: 1;
  padding: 0 0 2px;
}
.troop-card {
  position: relative;
  flex: 0 0 78px;
  min-width: 78px;
  height: 88px;
  background: linear-gradient(#fff8e4, #ddcfaa);
  border: 1px solid #d8c691;
  border-radius: 7px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 3px 4px;
  overflow: hidden;
}
.troop-card > .item-art {
  width: 100%;
  height: 60px;
  flex: 0 0 60px;
}
.troop-card > .troop-label {
  font: 700 11px/1.15 Space;
  text-align: center;
  margin-top: auto;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}
.troop-count {
  position: absolute;
  z-index: 2;
  right: 3px;
  top: 3px;
  border-radius: 3px;
  min-width: 22px;
  padding: 1px 3px;
  font: 700 11px Space;
  background: #183f30;
  color: var(--ivory);
}
.troop-level {
  position: absolute;
  left: 3px;
  top: 3px;
  padding: 0 3px;
  border-radius: 3px;
  background: #e3c777;
  color: #5c4720;
  font: 700 10px Space;
  z-index: 2;
}
.troop-card.selected {
  border: 2px solid #ffdf78;
  box-shadow: inset 0 0 0 1px #aa8434;
  background: #fff0b8;
}
.troop-card:disabled {
  background: #c4c5b4;
  border-color: #aaaD9f;
  color: #727b69;
}
.troop-card:disabled .item-art {
  filter: grayscale(.8);
  opacity: .6;
}
.battle-abilities {
  flex: 0 0 88px;
  display: flex;
  min-width: 0;
}
.battle-abilities:empty {
  display: none;
}
.battle-hero {
  display: flex;
  position: relative;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: linear-gradient(#d0c0dc, #9d86b4);
  border: 1px solid #dec3eb;
  border-radius: 7px;
  color: #342b42;
  padding: 3px;
  overflow: hidden;
}
.battle-hero > .hero-art {
  width: 65px;
  height: 46px;
}
.battle-hero > span:not(.hero-art) {
  text-align: center;
  max-width: 100%;
}
.battle-hero strong {
  display: block;
  font-size: 12px;
  line-height: 1.2;
}
.battle-hero small {
  font-size: 10px;
  line-height: 1.2;
  display: block;
  margin-top: 2px;
}
.battle-hero strong b {
  font-size: 10px;
}
.battle-hero.selected {
  border: 2px solid #ffe293;
}
.battle-hero:disabled {
  filter: grayscale(.7);
  opacity: .7;
}
.hero-life {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 2px;
  height: 3px;
  background: #443b50;
}
.hero-life > i {
  display: block;
  height: 100%;
  background: #9ed16e;
}
.spell-bar {
  order: 1;
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.spell-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-width: 66px;
  width: 66px;
  min-height: 80px;
  padding: 5px 3px;
  background: linear-gradient(#bacadc, #6d93b1);
  border: 1px solid #b4cee4;
  border-radius: 7px;
  color: #213e50;
}
.spell-button > .icon {
  width: 27px;
  height: 27px;
}
.spell-button strong {
  font: 700 11px Space;
  display: block;
}
.spell-button small {
  font: 500 10px Manrope;
  display: block;
  white-space: nowrap;
  margin-top: 3px;
}
.spell-button.spell-freeze {
  background: linear-gradient(#c1e2e8, #77b6c3);
  border-color: #b9e5eb;
}
.spell-button.spell-rage {
  background: linear-gradient(#dfc4df, #b18cb9);
  border-color: #e5c5e6;
}
.spell-button.spell-rain {
  background: linear-gradient(#b8ddca, #76aa97);
  border-color: #bce5c7;
}
.spell-button.selected {
  border: 2px solid #ffe392;
}
.spell-button:disabled {
  filter: grayscale(.8);
  opacity: .55;
  background: #b5c0bd;
  color: #647772;
}
.battle-mode #camera-tools {
  display: none;
}
.has-panel #battle-hud,
.has-panel #troop-actions {
  visibility: hidden;
}
/* World labels. Position and transform belong exclusively to the renderer. */
.world-labels {
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 4;
}
.building-bubble {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  padding: 3px 6px;
  min-height: 24px;
  line-height: 16px;
  font: 700 11px/16px Space;
  background: #f9f2dbeF;
  color: #32563b;
  border: 1px solid #b7c795;
  border-radius: 6px;
  box-shadow: 0 2px 3px #102f2126;
  white-space: nowrap;
}
.construction-marker {
  color: #73521d;
  background: #fff0c2;
  border-color: #d8b562;
}
.building-bubble.health {
  padding: 0;
  width: 38px;
  height: 5px;
  min-height: 0;
  border: 1px solid #f1ebce;
  border-radius: 3px;
  background: #983c36;
  overflow: hidden;
  box-shadow: none;
}
.building-bubble.health > i {
  display: block;
  height: 100%;
  background: #89b94e;
}
.has-panel ~ .world-labels {
  visibility: hidden;
}
/* Toasts, loading and orientation guidance. */
#toast {
  position: absolute;
  z-index: 100;
  top: var(--edge-top);
  left: 50%;
  transform: translate(-50%, -12px);
  opacity: 0;
  visibility: hidden;
  max-width: min(520px, calc(100% - 48px));
  padding: 12px 16px;
  border-radius: 9px;
  border: 1px solid #d7c387;
  background: var(--emerald);
  color: var(--ivory);
  box-shadow: var(--shadow);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  transition: opacity .18s, transform .18s;
  pointer-events: none;
}
#toast.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
#loading {
  position: absolute;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 24px;
  background:
    radial-gradient(
      ellipse at 50% 30%,
      #285640,
      #092b24 70%);
  color: var(--ivory);
  pointer-events: auto;
  text-align: center;
  transition: opacity .4s;
}
.loading-mark {
  height: 48px;
}
#loading .loading-mark .brand-emblem {
  height: 48px;
  width: 48px;
  border-radius: 10px;
}
.loading-mark > .icon {
  width: 44px;
  height: 44px;
  color: var(--gold);
}
#loading .eyebrow {
  color: #cbd5b2;
}
#loading h1 {
  line-height: 0;
  max-width: 440px;
  width: 70vw;
}
#loading .game-title {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
}
#loading p {
  font-size: 13px;
  color: #ccd8b8;
}
.loading-track {
  width: 240px;
  height: 5px;
  overflow: hidden;
  border-radius: 3px;
  background: #4f6844;
  margin-top: 12px;
}
.loading-track > div {
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width .2s;
}
#loading-label {
  font-size: 12px;
  color: #d5debd;
}
#loading.loaded {
  opacity: 0;
  pointer-events: none;
}
#orientation-guide {
  position: absolute;
  inset: 0;
  z-index: 105;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  background:
    radial-gradient(
      ellipse at 50% 35%,
      #2d5947,
      #0b322a 70%);
  color: var(--ivory);
  text-align: center;
  pointer-events: auto;
}
#orientation-guide .eyebrow {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 2px;
}
#orientation-guide h2 {
  font-size: 32px;
}
#orientation-guide p {
  font-size: 16px;
  max-width: 300px;
}
#orientation-guide small {
  font-size: 12px;
  color: #c7d7bb;
  max-width: 280px;
}
.rotate-device-art {
  width: 144px;
  height: 90px;
  display: grid;
  place-items: center;
  border: 3px solid var(--gold);
  border-radius: 16px;
  background: #24503d;
  box-shadow: 0 6px 0 #061f1b;
}
.rotate-device-art > .icon {
  width: 46px;
  height: 46px;
  color: var(--gold);
}
.portrait-blocked #orientation-guide {
  display: flex;
}
.portrait-blocked #ui > :not(#orientation-guide):not(#loading) {
  visibility: hidden !important;
  pointer-events: none !important;
}
.portrait-blocked .world-labels {
  visibility: hidden;
}
.portrait-blocked #world {
  pointer-events: none;
}
.coach-card {
  position: absolute;
  left: var(--edge-left);
  bottom: 100px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 340px;
  padding: 12px;
  border: 1px solid var(--gold);
  border-radius: 12px;
  background: var(--ivory);
  pointer-events: auto;
}
.coach-body strong {
  font-size: 16px;
}
.coach-body span {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
/* Shared back-navigation and upgrade action metadata. */
.panel-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.panel-heading > div {
  min-width: 0;
}
.panel-back {
  background: #ffffff0d;
  color: var(--ivory);
  border-color: #bfd0a855;
  box-shadow: none;
  flex: 0 0 44px;
}
.game-panel .panel-header .panel-back .icon {
  transform: rotate(180deg);
}
.panel-back:hover {
  background: #ffffff1c;
}
.context-dismiss {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: grid;
  place-items: center;
  min-width: 44px;
  width: 44px;
  min-height: 44px;
  background: var(--emerald);
  color: var(--ivory);
  border: 1px solid #c6b37a;
  border-radius: 8px;
}
.has-selection .home-controls {
  visibility: hidden;
}
.upgrade-action-cost {
  grid-column: 1/-1;
}
.upgrade-action-bar > .upgrade-action-cost {
  display: flex;
  align-items: center;
  gap: 12px;
}
.upgrade-action-bar > .upgrade-action-cost .cost {
  gap: 4px 16px;
}
/* A fixed roster keeps all six champions reachable above one focused profile. */
.hero-roster-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: #eee7d6;
  border-bottom: 1px solid var(--line);
}
.hero-roster-tabs {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.hero-roster-choice {
  position: relative;
  flex: 1 0 58px;
  min-height: 44px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #405a4d;
  background: transparent;
  text-align: center;
  transition: box-shadow .14s, transform .14s;
}
.hero-roster-choice strong { display: block; font-size: 13px; }
.hero-roster-choice small { display: block; font-size: 10px; line-height: 1.4; }
.hero-roster-choice.is-active-hero { border-color: #ac913e; }
.hero-roster-choice[aria-pressed="true"] { color: #fff9e8; background: #174f40; box-shadow: inset 0 -2px #d6b451; }
.hero-roster-choice:active { transform: translateY(1px); }
.hero-hall-control { flex: 0 0 auto; min-height: 44px; padding: 6px 10px; margin: 0; font-size: 12px; }
.hero-role { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.hero-role > span { margin-left: auto; white-space: nowrap; }
.panel-heroes .hero-roster { display: block; }
@media (orientation: landscape) and (max-width: 760px) {
  .hero-roster-toolbar { padding: 2px 8px; gap: 4px; }
  .hero-roster-tabs { gap: 2px; }
  .hero-roster-choice { flex-basis: 52px; padding-inline: 4px; }
  .hero-hall-control { padding-inline: 8px; }
  .hero-role { font-size: 11px; }
}

/* Heroes keep choices and spend information ahead of optional detail. */
.hero-hall-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
}
.hero-hall-status > .icon { color: #8b783f; }
.hero-hall-status > span { flex: 1; min-width: 0; }
.hero-hall-status strong { display: block; font-size: 14px; }
.hero-hall-status small { display: block; font-size: 11px; color: var(--muted); }
.hero-hall-status > .button { flex: 0 0 auto; margin: 0; }
.hero-profile.hero-compact { grid-template-columns: 128px minmax(0, 1fr); align-items: start; }
.hero-compact .hero-portrait-scene { min-height: 0; height: 160px; }
.hero-compact .hero-portrait-scene > .hero-art { height: 156px; }
.hero-compact .hero-profile-body { padding: 12px 16px; }
.hero-action-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hero-action-heading h3 { font-size: 21px; }
.hero-action-heading .level-pill { white-space: nowrap; flex-shrink: 0; }
.hero-action-price { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-top: 8px; font-size: 12px; }
.hero-action-price > span { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.hero-action-price > span > .icon { width: 16px; height: 16px; }
.hero-action-price .cost { font-size: 13px; }
.hero-action-reason { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 12px; line-height: 1.4; color: #866544; }
.hero-action-reason > .icon { width: 15px; height: 15px; margin-top: 1px; }
.hero-compact .hero-profile-actions { margin-top: 8px; }
.hero-compact .hero-profile-actions > .button { min-height: 44px; }
.hero-compact .hero-unlock { margin-top: 8px; }
.hero-details-toggle { width: 100%; justify-content: flex-start; margin-top: 8px; min-height: 44px; background: transparent; border-color: transparent; box-shadow: none; font-size: 12px; }
.hero-details-toggle > .icon:last-child { margin-left: auto; }
.hero-expanded-details { padding-top: 8px; border-top: 1px solid var(--line); margin-top: 8px; }
.hero-expanded-details > p { font-size: 13px; color: var(--muted); margin: 8px 0 12px; }
.hero-expanded-details .hero-equipment { margin-top: 12px; padding-top: 12px; }
.catalog-tab, .panel-nav button, .upgrade-tabs button, .battle-tab {
  transition: box-shadow .14s, transform .14s;
}
@media (orientation: landscape) and (max-height: 600px) {
  .hero-hall-status { margin-bottom: 8px; padding-bottom: 6px; gap: 8px; }
  .hero-hall-status strong { font-size: 13px; }
  .hero-hall-status > .button { padding: 8px 12px; font-size: 12px; }
  .hero-profile.hero-compact { grid-template-columns: 108px minmax(0, 1fr); }
  .hero-compact .hero-portrait-scene { height: 144px; }
  .hero-compact .hero-portrait-scene > .hero-art { height: 140px; }
  .hero-compact .hero-profile-body { padding: 10px 12px; }
  .hero-action-heading h3 { font-size: 19px; }
  .hero-action-price { margin-top: 6px; }
  .hero-action-reason { font-size: 11px; }
  .hero-action-price .cost { font-size: 12px; }
}
@media (orientation: landscape) and (max-width: 760px) {
  .hero-hall-status > .icon { display: none; }
  .hero-profile.hero-compact { grid-template-columns: 88px minmax(0, 1fr); }
  .hero-compact .hero-portrait-scene { height: 136px; }
  .hero-compact .hero-portrait-scene > .hero-art { height: 132px; }
  .hero-compact .hero-profile-body { padding: 8px 10px; }
  .hero-action-heading h3 { font-size: 18px; }
  .hero-action-heading .level-pill { font-size: 10px; padding: 3px 5px; }
  .hero-compact .hero-profile-actions > .button { padding: 8px; font-size: 12px; }
}

/* Short landscape layouts from phones through wide browser windows. */
@media (orientation: landscape) and (max-height: 600px) {
  :root {
    --edge:10px;
  }
  .game-panel {
    border-radius: 12px;
    max-width: 1080px;
  }
  .panel-settings,
  .panel-help,
  .panel-chronicle,
  .panel-gems,
  .panel-finish {
    max-width: 760px;
  }
  .panel-header {
    min-height: 52px;
    padding: 4px 12px;
    gap: 12px;
  }
  .panel-header h2 {
    font-size: 21px;
    line-height: 1.15;
    margin-top: 2px;
  }
  .panel-header .eyebrow {
    font-size: 10px;
    letter-spacing: .7px;
    line-height: 1.2;
  }
  .panel-heading {
    gap: 8px;
  }
  .panel-content {
    padding: 12px 16px 16px;
    scroll-padding: 12px;
  }
  .panel-nav {
    padding: 2px 12px;
    gap: 4px;
  }
  .panel-nav button {
    padding: 8px 16px;
    font-size: 12px;
  }
  .workspace-toolbar {
    padding: 4px 12px;
    gap: 12px;
  }
  .catalog-tab {
    padding: 8px 14px;
    font-size: 12px;
  }
  .workspace-summary {
    font-size: 11px;
    gap: 6px;
  }
  .workspace-summary > span:last-child {
    display: none;
  }
  .catalog-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
  }
  .catalog-card {
    display: grid;
    grid-template-columns: minmax(90px, .9fr) minmax(0, 1.1fr);
    align-items: stretch;
  }
  .catalog-card-body {
    border-left: 1px solid var(--line);
    justify-content: center;
  }
  .catalog-card:has(.catalog-detail) {
    grid-column: span 2;
    grid-template-columns: 140px minmax(0, 1fr);
  }
  .catalog-card-body > .button { margin-top: auto; }

  .catalog-portrait {
    height: 76px;
  }
  .catalog-select h3 {
    font-size: 15px;
    margin: 8px 10px 3px;
  }
  .catalog-role {
    font-size: 11px;
    margin: 0 10px;
  }
  .catalog-card-body {
    padding: 8px 10px 10px;
    gap: 6px;
  }
  .catalog-status {
    min-height: 32px;
    font-size: 11px;
    line-height: 1.4;
  }
  .catalog-card-body .cost {
    font-size: 12px;
    gap: 4px 8px;
  }
  .catalog-card-body .button {
    font-size: 12px;
  }
  .panel-intro {
    font-size: 12px;
    margin-bottom: 12px;
  }
  .army-summary {
    gap: 12px;
  }
  .army-summary strong {
    font-size: 20px;
  }
  .army-summary small {
    font-size: 11px;
  }
  .panel-army .workspace-toolbar {
    gap: 8px 12px;
  }
  .army-summary > span > .icon {
    display: none;
  }
  .army-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
  }
  .roster-select {
    min-height: 84px;
    padding: 6px;
    gap: 4px;
  }
  .roster-select > .item-art {
    height: 72px;
    width: 62px;
  }
  .roster-title h3 {
    font-size: 14px;
    margin-bottom: 4px;
  }
  .roster-title > span {
    font-size: 11px;
  }
  .roster-controls {
    padding: 4px 8px;
    gap: 6px;
  }
  .roster-controls small {
    display: none;
  }
  .army-composition {
    padding: 5px 8px;
    gap: 12px;
    margin-bottom: 12px;
  }
  .composition-portraits > span {
    height: 32px;
    flex-basis: 44px;
  }
  .composition-portraits .item-art {
    width: 36px;
    height: 30px;
  }
  .composition-heading strong {
    font-size: 12px;
  }
  .composition-heading > span {
    font-size: 10px;
  }
  .army-next-step {
    padding-top: 12px;
    margin-top: 12px;
  }
  .upgrade-action-bar {
    padding: 8px 16px;
    gap: 6px 16px;
  }
  .upgrade-action-summary > .item-art {
    width: 64px;
    height: 48px;
  }
  .upgrade-action-summary strong {
    font-size: 17px;
  }
  .upgrade-action-main > .button {
    min-height: 44px;
    min-width: 160px;
    font-size: 13px;
  }
  .upgrade-action-cost .cost {
    font-size: 13px;
  }
  .upgrade-action-bar > .upgrade-action-cost {
    gap: 8px;
  }
  .upgrade-gate {
    font-size: 11px;
  }
  .upgrade-tabs {
    margin-bottom: 12px;
    padding-bottom: 4px;
  }
  .upgrade-tabs button {
    font-size: 12px;
    min-height: 44px;
    padding: 8px 16px;
  }
  .stat-comparison > div {
    padding: 8px 12px;
    font-size: 12px;
  }
  .stat-comparison strong,
  .stat-comparison b {
    font-size: 14px;
  }
  .building-evolution-comparison .item-art {
    height: 120px;
  }
  .evolution-preview > .item-art {
    height: 150px;
  }
  .building-gallery {
    padding: 12px;
  }
  .builder-project {
    gap: 12px;
    padding: 8px 12px;
  }
  .builder-project > .item-art,
  .builder-project > .hero-art {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }
  .builder-project h3 {
    font-size: 15px;
  }
  .builder-project .cost,
  .builder-project p {
    font-size: 12px;
    margin-top: 4px;
  }
  .builders-summary {
    padding: 8px 12px;
    margin-bottom: 12px;
  }
  .builders-summary strong {
    font-size: 15px;
  }
  .research-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
  }
  .research-card {
    padding: 12px;
  }
  .research-card-title .item-art {
    width: 60px;
    height: 64px;
  }
  .hero-profile {
    grid-template-columns: 180px minmax(0, 1fr);
  }
  .hero-portrait-scene {
    min-height: 160px;
    align-self: start;
  }
  .hero-portrait-scene > .hero-art {
    height: 200px;
  }
  .hero-profile-body {
    padding: 16px;
  }
  .hero-profile-body > h3 {
    font-size: 23px;
  }
  .hero-profile-body > p {
    font-size: 12px;
  }
  .campaign-intro {
    margin-bottom: 12px;
    gap: 12px;
  }
  .campaign-intro p {
    font-size: 12px;
  }
  .campaign-route {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
  }
  .raid-landmark {
    height: 72px;
  }
  .raid-card {
    padding: 12px;
    gap: 6px;
  }
  .raid-card h3 {
    font-size: 19px;
  }
  .raid-card > p {
    font-size: 12px;
  }
  .raid-rewards {
    padding-top: 8px;
  }
  .briefing-layout {
    grid-template-columns: minmax(220px, .9fr) minmax(0, 1.1fr);
    gap: 20px;
  }
  .briefing-map {
    max-height: 240px;
  }
  .briefing-section-title h3 {
    font-size: 21px;
  }
  .briefing-troops .item-art {
    height: 48px;
  }
  .briefing-troops > span {
    width: 66px;
  }
  .readiness-row {
    padding: 8px;
    margin-bottom: 8px;
  }
  .result-card {
    padding: 16px;
    gap: 12px 20px;
  }
  .result-head {
    gap: 8px;
  }
  .result-emblem {
    display: none;
  }
  .result-head h2 {
    font-size: 25px;
  }
  .result-head p {
    font-size: 12px;
  }
  .result-head .eyebrow {
    font-size: 10px;
  }
  .result-head > .stars .icon {
    width: 30px;
    height: 30px;
  }
  .result-loot {
    padding: 12px;
    margin-bottom: 8px;
  }
  .result-loot .cost {
    font-size: 19px;
  }
  .result-bonus {
    font-size: 12px;
    padding: 6px 8px;
  }
  .result-troops {
    margin-top: 8px;
  }
  .result-troops .item-art {
    width: 34px;
    height: 36px;
  }
  .result-card > .button {
    margin-top: 0;
  }
  .settings-row {
    padding: 12px 0;
  }
  .settings-note {
    margin: 12px 0;
  }
  #home-hud {
    height: 48px;
  }
  .player-medallion {
    min-height: 48px;
    padding: 4px 10px 4px 4px;
    max-width: 190px;
  }
  .portrait {
    height: 36px;
    width: 36px;
    flex-basis: 36px;
  }
  .player-medallion strong {
    font-size: 15px;
  }
  .player-medallion small {
    font-size: 10px;
  }
  .builder-chip {
    height: 48px;
    min-width: 80px;
    padding: 5px 8px;
    gap: 6px;
  }
  .builder-chip b {
    font-size: 16px;
  }
  .builder-chip > .icon {
    width: 20px;
    height: 20px;
  }
  .builder-chip small {
    font-size: 10px;
  }
  .resource-bar {
    width: 196px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
  .resource-bar .resource-gems { grid-column: 2; }
  .resource {
    min-height: 44px;
    padding: 3px 4px 3px 8px;
  }
  .resource-caption strong {
    font-size: 15px;
  }
  .resource-caption small {
    display: none;
  }
  .resource-icon {
    width: 24px;
    height: 24px;
  }
  .resource-icon > .icon {
    width: 17px;
    height: 17px;
  }
  .league-badge {
    display: none;
  }
  #objective-actions {
    top: 72px;
    width: 208px;
  }
  .objective-follow {
    min-height: 44px;
    padding: 6px 8px;
  }
  .objective-follow strong {
    font-size: 12px;
  }
  .objective-follow > .icon {
    display: none;
  }
  .objective-follow small {
    font-size: 10px;
  }
  #side-tools {
    top: 128px;
  }
  .side-button,
  #side-tools > .icon-button {
    display: none;
  }
  #side-tools .collect-all {
    min-height: 44px;
    font-size: 11px;
    padding: 8px 10px;
  }
  .campaign-button,
  .army-button,
  .build-button {
    min-height: 60px;
    padding: 8px 12px;
    gap: 6px;
  }
  .campaign-button {
    min-width: 108px;
  }
  .campaign-button strong {
    font-size: 18px;
  }
  .campaign-button > .icon {
    width: 24px;
    height: 24px;
  }
  .army-button > span,
  .build-button > span {
    font-size: 13px;
  }
  .army-button small {
    font-size: 10px;
  }
  .home-controls {
    gap: 8px;
  }
  #camera-tools {
    bottom: 82px;
  }
  #camera-tools .icon-button {
    width: 44px;
    height: 44px;
  }
  #context-actions {
    bottom: 82px;
    max-width: calc(100% - 172px);
  }
  #placement-actions {
    bottom: 82px;
    max-width: calc(100% - 32px);
  }
  .context-card {
    gap: 6px;
  }
  .context-title strong {
    font-size: 14px;
  }
  .context-title strong > span {
    font-size: 11px;
  }
  .context-buttons {
    gap: 6px;
  }
  .context-action {
    min-width: 66px;
    min-height: 60px;
    padding: 6px 8px;
    gap: 3px;
  }
  .context-action > strong {
    font-size: 11px;
  }
  .context-action > .icon {
    width: 20px;
    height: 20px;
  }
  .context-action .cost {
    font-size: 10px;
    gap: 3px 6px;
  }
  .context-title {
    padding: 4px 10px;
  }
  .placement-card {
    padding: 8px 12px;
    gap: 8px;
  }
  .placement-card strong {
    font-size: 15px;
  }
  .placement-card p {
    font-size: 12px;
  }
  .building-bubble {
    padding: 2px 5px;
    min-height: 22px;
    font-size: 10px;
    line-height: 16px;
  }
  #loading {
    gap: 8px;
    padding: 16px;
  }
  .loading-mark {
    height: 36px;
  }
  #loading .loading-mark .brand-emblem {
    width: 36px;
    height: 36px;
  }
  #loading .game-title {
    max-height: 140px;
  }
  #loading p {
    font-size: 12px;
  }
  .loading-track {
    margin-top: 8px;
  }
}
/* Narrow landscape layouts. */
@media (orientation: landscape) and (max-width: 760px) {
  .panel-nav {
    padding-inline: 8px;
  }
  .panel-nav button {
    padding: 8px 12px;
    flex: 1;
    min-width: 0;
    font-size: 11px;
  }
  .panel-nav button > .icon {
    width: 16px;
    height: 16px;
  }
  .panel-header {
    padding-inline: 10px;
    gap: 8px;
  }
  .panel-header h2 {
    font-size: 19px;
  }
  .panel-header .eyebrow {
    letter-spacing: .4px;
  }
  .panel-content {
    padding: 12px;
  }
  .workspace-toolbar {
    padding-inline: 8px;
    gap: 8px;
  }
  .workspace-summary {
    display: none;
  }
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .catalog-portrait {
    height: 68px;
  }
  .catalog-select h3 {
    font-size: 14px;
    margin-inline: 8px;
  }
  .catalog-role {
    margin-inline: 8px;
    font-size: 10px;
  }
  .catalog-card-body {
    padding: 8px;
    gap: 6px;
  }
  .catalog-status {
    font-size: 11px;
    min-height: 32px;
  }
  .catalog-card-body .button {
    padding: 8px;
  }
  .panel-army .workspace-toolbar {
    gap: 6px 8px;
  }
  .army-summary {
    gap: 8px;
  }
  .army-summary strong {
    font-size: 18px;
  }
  .army-summary small {
    font-size: 10px;
  }
  .army-summary > .button {
    padding: 8px;
    font-size: 11px;
  }
  .army-toolbar-row {
    gap: 4px;
  }
  .army-tools-toggle {
    padding: 8px;
    font-size: 11px;
  }
  .army-tools-toggle > .icon {
    display: none;
  }
  .army-toolbar-row .catalog-tab {
    padding: 8px 10px;
    font-size: 11px;
  }
  .army-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .roster-select {
    flex-direction: column;
    min-height: 100px;
    text-align: center;
    gap: 2px;
    padding: 4px;
  }
  .roster-select > .item-art {
    width: 100%;
    height: 54px;
  }
  /* Crop the transparent 512px sprites to readable upper-body portraits. */
  .roster-select > .unit-art img {
    object-fit: cover;
    object-position: 50% 15%;
    transform: none;
  }
  .roster-select > .art-guard img {
    object-position: 50% 35%;
  }
  .roster-select > .art-archer img {
    object-position: 50% 10%;
  }
  .roster-select > .art-rider img {
    object-position: 50% 32%;
  }
  .roster-select > .art-elephant img {
    object-position: 50% 50%;
  }
  .roster-select > .art-garuda img {
    object-position: 50% 28%;
  }
  .roster-title h3 {
    font-size: 13px;
    margin-bottom: 2px;
  }
  .roster-title > span {
    font-size: 11px;
  }
  .roster-controls {
    padding: 4px;
    gap: 4px;
  }
  .roster-controls strong {
    font-size: 20px;
  }
  .roster-controls > .icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
  .composition-heading strong {
    font-size: 12px;
  }
  .composition-portraits {
    gap: 5px;
  }
  .army-next-step {
    gap: 8px;
  }
  .army-next-step p {
    font-size: 11px;
  }
  .upgrade-action-bar {
    padding: 8px 12px;
    gap: 4px 12px;
  }
  .upgrade-action-summary {
    gap: 8px;
  }
  .upgrade-action-summary > .item-art {
    width: 48px;
    height: 44px;
  }
  .upgrade-action-summary strong {
    font-size: 15px;
  }
  .upgrade-action-summary small {
    font-size: 11px;
  }
  .upgrade-action-main > .button {
    min-width: 154px;
    font-size: 12px;
    padding: 8px 12px;
  }
  .upgrade-action-cost .cost {
    font-size: 12px;
  }
  .upgrade-action-bar > .upgrade-action-cost > small {
    font-size: 10px;
  }
  .upgrade-gate {
    font-size: 11px;
  }
  .builder-project {
    gap: 8px;
    padding: 8px;
  }
  .builder-project > .item-art,
  .builder-project > .hero-art {
    width: 52px;
    height: 60px;
    flex-basis: 52px;
  }
  .builder-project h3 {
    font-size: 14px;
  }
  .builder-project h3 small {
    display: block;
    font-size: 11px;
  }
  .builder-project > .button {
    padding: 8px;
    font-size: 12px;
  }
  .builders-summary {
    gap: 8px;
  }
  .builders-summary > .icon {
    display: none;
  }
  .builders-summary > .button {
    padding: 8px;
    font-size: 12px;
  }
  .builders-summary strong {
    font-size: 14px;
  }
  .research-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .research-card {
    padding: 12px;
  }
  .research-card-title {
    gap: 8px;
  }
  .research-card-title .item-art {
    width: 46px;
    height: 56px;
  }
  .research-card-title h3 {
    font-size: 16px;
  }
  .research-card .stat-comparison > div {
    grid-template-columns: minmax(0, 1fr) 42px 14px 42px;
    padding: 8px;
    font-size: 11px;
    gap: 4px;
  }
  .research-card .stat-comparison strong,
  .research-card .stat-comparison b {
    font-size: 12px;
  }
  .research-price {
    flex-wrap: wrap;
    gap: 8px;
  }
  .research-card .cost {
    font-size: 11px;
    gap: 4px 8px;
  }
  .hero-profile {
    grid-template-columns: 130px minmax(0, 1fr);
  }
  .hero-portrait-scene > .hero-art {
    height: 180px;
  }
  .hero-profile-body {
    padding: 12px;
  }
  .hero-profile-body > h3 {
    font-size: 21px;
  }
  .hero-profile .stat-comparison > div {
    grid-template-columns: minmax(0, 1fr) 48px 18px 48px;
    gap: 4px;
    padding: 8px;
    font-size: 11px;
  }
  .hero-profile .stat-comparison strong,
  .hero-profile .stat-comparison b {
    font-size: 13px;
  }
  .equip-slot {
    padding: 8px;
    gap: 6px;
  }
  .equip-slot > .icon {
    width: 16px;
    height: 16px;
  }
  .equip-slot strong {
    font-size: 11px;
  }
  .equip-slot small {
    font-size: 10px;
  }
  .battle-tab {
    min-height: 48px;
    padding: 6px 8px;
    gap: 6px;
  }
  .battle-tab strong {
    font-size: 13px;
  }
  .battle-tab small {
    font-size: 10px;
  }
  .battle-tab > .icon {
    width: 20px;
    height: 20px;
  }
  .campaign-intro {
    display: none;
  }
  .campaign-route {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .raid-landmark {
    height: 64px;
  }
  .raid-card h3 {
    font-size: 18px;
  }
  .raid-brief {
    font-size: 11px;
  }
  .raid-region > .eyebrow {
    font-size: 10px;
  }
  .raid-rewards .cost {
    font-size: 11px;
    gap: 4px 6px;
  }
  .raid-rewards .cost .icon {
    width: 13px;
    height: 13px;
  }
  .briefing-layout {
    grid-template-columns: minmax(200px, .9fr) minmax(0, 1.1fr);
    gap: 16px;
  }
  .briefing-map {
    max-height: 210px;
  }
  .briefing-section-title {
    gap: 8px;
  }
  .briefing-section-title h3 {
    font-size: 20px;
  }
  .briefing-section-title > .button {
    padding: 8px;
    font-size: 11px;
  }
  .briefing-troops {
    gap: 6px;
  }
  .briefing-troops > span {
    width: 58px;
  }
  .briefing-troops small {
    font-size: 10px;
  }
  .readiness-row {
    font-size: 12px;
  }
  .readiness-row p {
    font-size: 11px;
  }
  .scout-card h3 {
    font-size: 19px;
  }
  .resource-bar {
    width: 176px;
  }
  .resource-caption small {
    display: none;
  }
  .resource-caption strong {
    font-size: 15px;
  }
  .resource {
    min-height: 44px;
  }
  .resource-icon {
    width: 23px;
    height: 23px;
  }
  .resource-bar .resource-caption {
    justify-content: flex-end;
  }
  .player-medallion {
    max-width: 162px;
  }
  .player-medallion strong {
    font-size: 14px;
  }
  .builder-stack {
    left: 48%;
    gap: 6px;
  }
  .builder-chip {
    min-width: 65px;
    padding: 5px 7px;
    gap: 4px;
  }
  .builder-chip > .icon {
    display: none;
  }
  .builder-chip small {
    font-size: 10px;
  }
  .builder-chip b {
    font-size: 15px;
  }
  .builder-chip span {
    align-items: center;
  }
  #objective-actions {
    top: 70px;
    width: 180px;
  }
  .objective-follow strong {
    font-size: 11px;
  }
  .objective-dismiss {
    width: 44px;
    min-width: 44px;
  }
  .objective-follow {
    min-height: 44px;
  }
  .objective-dismiss {
    min-height: 44px;
  }
  #side-tools {
    top: 126px;
  }
  .collect-all > span {
    font-size: 11px;
  }
  .campaign-button {
    min-width: 92px;
    padding: 8px 10px;
    gap: 6px;
  }
  .campaign-button strong {
    font-size: 17px;
  }
  .campaign-button > .icon {
    width: 23px;
    height: 23px;
  }
  .army-button,
  .build-button {
    padding: 8px 10px;
    min-height: 60px;
    gap: 5px;
  }
  .army-button > .icon,
  .build-button > .icon {
    width: 20px;
    height: 20px;
  }
  .army-button > span,
  .build-button > span {
    font-size: 12px;
  }
  .home-controls {
    gap: 6px;
  }
  .hero-home-button small {
    display: none;
  }
  #camera-tools {
    right: var(--edge-right);
    bottom: 80px;
    gap: 4px;
  }
  #camera-tools [data-value=rotate] {
    display: none;
  }
  #context-actions {
    max-width: calc(100% - 128px);
    bottom: 80px;
  }
  .context-buttons {
    gap: 4px;
  }
  .context-action {
    min-width: 60px;
    min-height: 60px;
    padding: 5px 6px;
    max-width: 118px;
  }
  .context-action .cost {
    gap: 2px 4px;
    font-size: 10px;
  }
  .context-action .cost .icon {
    width: 10px;
    height: 10px;
  }
  .context-action > .icon {
    width: 19px;
    height: 19px;
  }
  .context-action > strong {
    font-size: 11px;
  }
  .context-title strong {
    font-size: 13px;
  }
  .context-title strong > span {
    font-size: 11px;
  }
  .context-dismiss {
    width: 44px;
    min-width: 44px;
  }
  .battle-title {
    min-width: 0;
    max-width: 28%;
    padding: 6px 8px;
  }
  .battle-title strong {
    font-size: 13px;
  }
  .battle-title small {
    font-size: 10px;
    letter-spacing: 0;
  }
  .battle-score {
    padding: 6px 8px;
    gap: 5px;
    min-height: 44px;
  }
  .battle-score > strong {
    font-size: 19px;
  }
  .battle-score .stars .icon {
    width: 14px;
    height: 14px;
  }
  .battle-time {
    padding: 6px 8px;
    gap: 4px;
    min-height: 44px;
  }
  .battle-time strong {
    font-size: 20px;
  }
  .battle-time > .icon {
    display: none;
  }
  .retreat-button {
    padding: 8px;
    min-height: 44px;
    font-size: 11px;
  }
  #battle-hud {
    gap: 6px;
  }
  #troop-actions {
    padding: 5px;
    gap: 6px;
    min-height: 80px;
  }
  .troop-tray {
    gap: 5px;
  }
  .troop-scroll {
    gap: 5px;
  }
  .troop-card {
    flex-basis: 64px;
    min-width: 64px;
    height: 80px;
  }
  .troop-card > .item-art {
    height: 52px;
    flex-basis: 52px;
  }
  .troop-card > .troop-label {
    font-size: 0;
  }
  .troop-card > .troop-label:after {
    content: attr(data-short);
    font: 700 11px Space;
  }
  .battle-abilities {
    flex-basis: 68px;
  }
  .battle-hero > .hero-art {
    height: 40px;
    width: 58px;
  }
  .battle-hero strong {
    font-size: 11px;
  }
  .battle-hero small {
    font-size: 10px;
  }
  .spell-bar {
    gap: 4px;
  }
  .spell-button {
    min-width: 50px;
    width: 50px;
    min-height: 78px;
    gap: 5px;
    padding: 4px 2px;
  }
  .spell-button > .icon {
    width: 24px;
    height: 24px;
  }
  .spell-button strong {
    font-size: 10px;
  }
  .spell-button small {
    font-size: 10px;
    margin-top: 2px;
  }
  .deployment-hint {
    font-size: 11px;
    bottom: calc(100% + 6px);
    padding: 4px 8px;
    gap: 5px;
  }
  .deployment-hint > .icon {
    width: 14px;
    height: 14px;
  }
  .result-card {
    gap: 10px 16px;
    padding: 14px;
  }
  .result-head h2 {
    font-size: 22px;
  }
  .result-head p {
    font-size: 11px;
  }
  .result-loot .cost {
    font-size: 17px;
    gap: 6px 12px;
  }
  .result-loot .cost .icon {
    width: 18px;
    height: 18px;
  }
  .result-bonus {
    font-size: 11px;
  }
  .result-head > .stars .icon {
    width: 27px;
    height: 27px;
  }
}
/* Extra-short landscape layouts. */
@media (orientation: landscape) and (max-height: 360px) {
  :root {
    --edge:8px;
  }
  .panel-header {
    min-height: 48px;
    padding-block: 2px;
  }
  .panel-header h2 {
    font-size: 18px;
  }
  .panel-header .eyebrow {
    font-size: 10px;
  }
  .panel-nav {
    padding-block: 0;
  }
  .panel-nav button {
    min-height: 44px;
  }
  .workspace-toolbar {
    padding-block: 2px;
  }
  .panel-content {
    padding: 8px 12px 12px;
  }
  .catalog-portrait {
    height: 52px;
  }
  .catalog-select h3 {
    font-size: 13px;
    margin-top: 6px;
  }
  .catalog-role {
    font-size: 10px;
  }
  .catalog-card-body {
    padding: 6px 8px 8px;
  }
  .catalog-status {
    min-height: 44px;
    font-size: 11px;
  }
  .catalog-card-body .button {
    min-height: 44px;
  }
  .army-composition {
    display: none; /* Capacity is in the toolbar; troop counts remain on every card. */
  }
  .composition-portraits > span {
    height: 28px;
  }
  .composition-portraits .item-art {
    height: 26px;
  }
  .roster-select {
    min-height: 82px;
    padding: 3px;
  }
  .roster-select > .item-art {
    height: 44px;
  }
  .roster-title h3 {
    font-size: 12px;
  }
  .roster-title > span {
    font-size: 10px;
  }
  .roster-controls {
    padding: 3px;
  }
  .army-next-step {
    margin-top: 12px;
  }
  .upgrade-action-bar {
    padding: 6px 12px;
    gap: 4px 12px;
  }
  .upgrade-action-summary > .item-art {
    width: 44px;
    height: 40px;
  }
  .upgrade-action-summary strong {
    font-size: 14px;
  }
  .upgrade-action-summary small {
    font-size: 10px;
  }
  .upgrade-action-cost .cost {
    font-size: 12px;
  }
  .upgrade-gate {
    font-size: 10px;
    line-height: 1.3;
  }
  .upgrade-action-main > .button {
    min-height: 44px;
    font-size: 12px;
  }
  .upgrade-tabs {
    margin-bottom: 8px;
    padding-bottom: 4px;
  }
  .battle-title {
    padding: 5px 8px;
  }
  .deployment-hint {
    font-size: 10px;
  }
  .result-card {
    padding: 12px;
    gap: 8px 16px;
  }
  .result-head {
    gap: 6px;
  }
  .result-head > .eyebrow {
    font-size: 10px;
  }
  .result-head h2 {
    font-size: 21px;
  }
  .result-head p {
    font-size: 11px;
  }
  .result-loot {
    padding: 10px;
  }
  .result-bonus {
    padding: 5px 8px;
  }
  .result-troops {
    margin-top: 6px;
  }
  .result-troops .item-art {
    height: 28px;
    width: 30px;
  }
  .result-head > .stars .icon {
    width: 24px;
    height: 24px;
  }
  .result-card > .button {
    min-height: 44px;
  }
  #loading .game-title {
    max-height: 110px;
  }
  .loading-mark {
    display: none;
  }
}
/* Portrait fallback for non-game surfaces. */
@media (orientation: portrait) {
  .game-panel {
    max-width: 680px;
  }
  .panel-header {
    padding: 12px 16px;
  }
  .panel-header h2 {
    font-size: 23px;
  }
  .panel-content {
    padding: 16px;
  }
  .workspace-toolbar {
    flex-wrap: wrap;
    padding: 8px 12px;
  }
  .workspace-summary {
    display: none;
  }
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .army-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .panel-army .workspace-toolbar {
    grid-template-columns: 1fr;
  }
  .army-summary {
    justify-content: space-between;
  }
  .briefing-layout {
    grid-template-columns: 1fr;
  }
  .hero-profile {
    grid-template-columns: 120px minmax(0, 1fr);
  }
  .result-card {
    grid-template-columns: 1fr;
  }
  .upgrade-action-bar {
    grid-template-columns: 1fr;
  }
  .upgrade-action-main {
    justify-content: stretch;
  }
  .upgrade-action-main > .button {
    width: 100%;
  }
  .panel-nav button {
    padding-inline: 10px;
    font-size: 11px;
  }
  .building-evolution-comparison {
    padding: 12px;
    gap: 8px;
  }
  .building-evolution-comparison .item-art {
    height: 100px;
  }
}
/* Respect reduced motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .button,
  .icon-button,
  .catalog-tab,
  #toast,
  #loading,
  .loading-track > div {
    transition: none;
  }
}