:root {
  --ink: #f7efe2;
  --dark: #111816;
  --deep: #17221f;
  --muted: #aeb9ad;
  --line: rgba(230, 205, 151, .22);
  --paper: #efe3ca;
  --panel: rgba(24, 34, 31, .82);
  --panel-strong: rgba(14, 20, 18, .92);
  --forest: #1e342c;
  --leaf: #5f8f5d;
  --gold: #d7aa4f;
  --gold-soft: #f2d38b;
  --rust: #b85a3b;
  --stone: #98a19a;
  --blue: #4c879d;
  --danger: #d76252;
  --shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

.mini-btn {
  width: auto;
  min-height: 30px;
  padding: 7px 12px;
  border: 1px solid rgba(242, 211, 139, .42);
  border-radius: 7px;
  color: #111816;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  font-size: .76rem;
  line-height: 1;
  font-weight: 950;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 8px 18px rgba(0,0,0,.18);
}

.lang-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  min-height: 38px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12, 18, 16, .62);
}

.lang-switch button {
  min-width: 42px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: .78rem;
  font-weight: 950;
  cursor: pointer;
}

.lang-switch button.active {
  color: #16110a;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
}

.auth-lang-switch {
  width: 100%;
  margin: 12px 0;
}

.queue-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(230, 205, 151, .16);
}

.queue-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
}

.queue-item.mission {
  border-color: rgba(76, 135, 157, .48);
  background:
    linear-gradient(135deg, rgba(76, 135, 157, .16), rgba(0,0,0,.16)),
    rgba(255,255,255,.055);
}

.queue-main {
  min-width: 0;
}

.queue-main strong {
  display: block;
  margin-bottom: 4px;
}

.queue-coord {
  color: var(--gold-soft);
  font-weight: 900;
}

.queue-status,
.queue-meta {
  min-width: 112px;
  padding: 8px 10px;
  border: 1px solid rgba(235, 207, 142, .18);
  border-radius: 8px;
  background: rgba(0,0,0,.18);
  text-align: right;
}

.queue-status span,
.queue-meta span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.queue-status strong,
.queue-meta strong {
  margin: 0;
  color: var(--gold-soft);
}

.region-panel {
  margin: 10px 0 14px;
}

.region-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(235, 207, 142, .18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(243, 217, 144, .11), rgba(76, 135, 157, .08)),
    rgba(255,255,255,.055);
}

.region-card h3 {
  margin-top: 2px;
}

.region-card > span {
  padding: 8px 10px;
  border: 1px solid rgba(242, 211, 139, .28);
  border-radius: 7px;
  color: #111816;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  font-weight: 950;
}

.region-card small {
  color: var(--muted);
  font-weight: 850;
}

.player-avatar.frame-gold,
.profile-hero-card.frame-gold .profile-avatar,
.cosmetic-card.frame-gold {
  border-color: rgba(242, 211, 139, .78);
  box-shadow: 0 0 0 1px rgba(242, 211, 139, .42), 0 18px 45px rgba(215, 170, 79, .18);
}

.player-avatar.frame-obsidian,
.profile-hero-card.frame-obsidian .profile-avatar,
.cosmetic-card.frame-obsidian {
  border-color: rgba(141, 174, 185, .72);
  background: linear-gradient(135deg, #18211f, #101312);
  color: var(--gold-soft);
  box-shadow: 0 0 0 1px rgba(141, 174, 185, .32), 0 18px 48px rgba(0,0,0,.44);
}

.profile-avatar.avatar-builder,
.profile-avatar.avatar-commander,
.profile-avatar.avatar-oracle,
.player-avatar.avatar-builder,
.player-avatar.avatar-commander,
.player-avatar.avatar-oracle {
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.35), transparent 20%),
    linear-gradient(135deg, #f2d38b, #7e5b2c 58%, #26352f);
}

.profile-avatar,
.player-avatar {
  position: relative;
  overflow: hidden;
}

.avatar-symbol {
  display: grid;
  place-items: center;
}

.profile-avatar .game-icon {
  width: 38px;
  height: 38px;
}

.player-avatar .game-icon {
  width: 22px;
  height: 22px;
}

.profile-avatar small,
.player-avatar small {
  position: absolute;
  right: 7px;
  bottom: 5px;
  font-size: .65rem;
  opacity: .72;
}

.cosmetics-panel {
  margin-top: 14px;
}

.cosmetic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.cosmetic-card {
  min-height: 84px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.16));
  text-align: left;
}

.cosmetic-card.active {
  border-color: rgba(242, 211, 139, .72);
  background: linear-gradient(135deg, rgba(215, 170, 79, .32), rgba(24, 34, 31, .9));
}

.cosmetic-card:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.cosmetic-card strong,
.cosmetic-card span {
  display: block;
}

.admin-player-row {
  grid-template-columns: minmax(160px, 1.4fr) 110px 64px 82px repeat(7, minmax(88px, auto));
  align-items: center;
}

.danger-btn {
  border-color: rgba(215, 98, 82, .5) !important;
  color: #ffd8d2 !important;
  background: rgba(215, 98, 82, .14) !important;
}

.admin-small-input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  color: var(--ink);
  background: rgba(255,255,255,.08);
  font-weight: 850;
}

.auth-server-status {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(215, 98, 82, .42);
  border-radius: 8px;
  color: #ffd8d2;
  background: rgba(215, 98, 82, .12);
  font-weight: 850;
}

.profile-title-note {
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
}

.profile-title-note span {
  color: var(--muted);
  font-size: .85rem;
  font-weight: 800;
}

.village-art.skin-winter {
  filter: saturate(.72) brightness(1.08) contrast(1.08);
}

.village-art.skin-winter:after {
  background: linear-gradient(180deg, rgba(230, 242, 245, .16), rgba(230, 242, 245, .08));
}

.village-art.skin-imperial {
  filter: saturate(1.12) contrast(1.12);
}

.village-art.skin-imperial:after {
  background: radial-gradient(circle at 50% 38%, rgba(242, 211, 139, .24), transparent 34%);
}

.village-art.skin-warcamp {
  filter: saturate(.9) contrast(1.18) brightness(.92);
}

.village-art.skin-warcamp:after {
  background: linear-gradient(120deg, rgba(184, 90, 59, .22), transparent 46%, rgba(0,0,0,.18));
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(215, 170, 79, .23), transparent 28%),
    radial-gradient(circle at 84% 8%, rgba(76, 135, 157, .18), transparent 26%),
    linear-gradient(180deg, #0c1110 0, #17231f 42%, #222c25 100%);
  min-height: 100vh;
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/54px 54px,
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0/54px 54px;
}

button {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.app-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 18px;
}

.topbar, .section-head, .tabs, .status-strip, .account-strip, .hero-board, .map-wrap {
  display: flex;
  gap: 14px;
}

body.auth-locked .game-only {
  display: none !important;
}

body:not(.auth-locked) .auth-gate {
  display: none;
}

body:not(.is-admin) [data-admin-only] {
  display: none !important;
}

.topbar {
  align-items: center;
  justify-content: space-between;
  color: #fff;
  min-height: 154px;
  padding: 22px 24px;
  border: 1px solid rgba(235, 207, 142, .18);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(6, 10, 9, .94) 0%, rgba(8, 12, 11, .82) 36%, rgba(8, 12, 11, .46) 68%, rgba(8, 12, 11, .76) 100%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.24)),
    url("assets/brand-header-realms.png") center right / cover no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 52px rgba(0,0,0,.28);
  overflow: hidden;
  position: relative;
}

h1, h2, h3, p { margin: 0; }

h1 {
  font-size: clamp(2rem, 7vw, 4.4rem);
  line-height: .95;
  letter-spacing: 0;
  text-shadow: 0 8px 34px rgba(0, 0, 0, .38);
}

.brand-subtitle {
  margin-top: 8px;
  color: #d9d0ba;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .78rem;
}

.auth-gate {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 440px);
  gap: 16px;
  align-items: stretch;
  margin: 14px 0;
}

.auth-copy,
.auth-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
    var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.auth-copy {
  min-height: 430px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(90deg, rgba(7, 11, 10, .9), rgba(7, 11, 10, .48) 58%, rgba(7, 11, 10, .22)),
    url("assets/brand-header-realms.png") center / cover no-repeat;
  overflow: hidden;
  position: relative;
}

.auth-copy:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(242, 211, 139, .12);
  box-shadow: inset 0 0 80px rgba(0,0,0,.46);
}

.auth-copy h2 {
  position: relative;
  margin-top: 8px;
  max-width: 760px;
  font-size: clamp(2.4rem, 6vw, 5.8rem);
  line-height: .92;
}

.auth-copy p:not(.eyebrow) {
  position: relative;
  max-width: 620px;
  margin-top: 10px;
  color: #ded6c4;
  font-weight: 700;
  line-height: 1.45;
}

.auth-proof {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.auth-proof span {
  padding: 8px 10px;
  border: 1px solid rgba(242, 211, 139, .24);
  border-radius: 999px;
  background: rgba(10, 16, 14, .58);
  color: var(--gold-soft);
  font-size: .82rem;
  font-weight: 900;
}

.auth-panel {
  padding: 22px;
  display: grid;
  align-content: center;
  gap: 14px;
}

.auth-panel-head {
  display: grid;
  gap: 6px;
  margin-bottom: 4px;
}

.auth-panel-head h3 {
  font-size: 1.5rem;
}

.auth-panel-head p:not(.eyebrow) {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.45;
}

.auth-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, .07);
}

.auth-mode button {
  min-height: 40px;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font-weight: 1000;
}

.auth-mode button.active {
  color: #111816;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: 0 10px 20px rgba(215, 170, 79, .18);
}

.register-only {
  display: none !important;
}

.auth-gate.register-mode .register-only {
  display: grid !important;
}

.auth-panel label {
  display: grid;
  gap: 6px;
  color: var(--gold-soft);
  font-weight: 900;
}

.auth-panel input {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: rgba(255, 250, 240, .94);
  color: #111816;
  font: inherit;
  font-weight: 800;
}

.auth-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 4px;
}

h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.05rem; }

.eyebrow {
  color: var(--gold-soft);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.top-actions { display: flex; gap: 8px; }

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 250, 240, .1);
  color: var(--ink);
  font-size: 1.15rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.icon-btn.danger { color: var(--danger); }

.save-status {
  position: relative;
}

.save-status:after {
  content: "";
  position: absolute;
  right: 8px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #79d68d;
  box-shadow: 0 0 0 4px rgba(121, 214, 141, .16);
}

.status-strip {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.resource {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  background: linear-gradient(180deg, rgba(255, 250, 240, .13), rgba(255, 250, 240, .06));
  border-right: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.resource:last-child { border-right: 0; }
.resource span { grid-row: span 2; font-size: 1.25rem; }
.resource strong { overflow: hidden; text-overflow: ellipsis; }
.resource small { color: var(--muted); font-weight: 700; }
.resource.premium { background: linear-gradient(180deg, rgba(76, 135, 157, .24), rgba(255, 250, 240, .06)); }

.gems-resource {
  position: relative;
  padding-right: 46px;
}

.gem-plus {
  position: absolute;
  right: 9px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(242, 211, 139, .44);
  border-radius: 7px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: #111816;
  font-weight: 1000;
  transform: translateY(-50%);
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
}

.gem-plus:hover {
  filter: brightness(1.08);
}

.account-strip {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(215, 170, 79, .12), transparent 46%),
    linear-gradient(180deg, rgba(255, 250, 240, .11), rgba(255, 250, 240, .045));
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.account-strip strong {
  display: block;
  font-size: 1.1rem;
}

.player-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
}

.player-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(242, 211, 139, .38);
  border-radius: 8px;
  color: #111816;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  font-size: 1.25rem;
  font-weight: 1000;
  box-shadow: 0 12px 26px rgba(0,0,0,.26);
}

.player-card span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 800;
}

.player-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 8px;
  flex: 1;
  max-width: 520px;
}

.player-stats div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(230, 205, 151, .16);
  border-radius: 8px;
  background: rgba(255, 250, 240, .055);
}

.player-stats strong,
.player-stats span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-stats strong {
  color: var(--gold-soft);
  font-size: .98rem;
}

.player-stats span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
}

.account-actions {
  display: flex;
  gap: 8px;
}

.account-actions .secondary-btn {
  width: auto;
  min-width: 92px;
}

.login-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: min(760px, 100%);
}

.login-form input {
  min-width: 0;
  flex: 1 1 150px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: rgba(255, 250, 240, .92);
  color: #111816;
  font: inherit;
}

.login-form .secondary-btn {
  width: auto;
}

.profile-hero-card {
  display: grid;
  grid-template-columns: auto 1fr minmax(240px, 320px);
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(215, 170, 79, .15), transparent 60%),
    rgba(255, 250, 240, .065);
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 1px solid rgba(242, 211, 139, .42);
  border-radius: 8px;
  color: #111816;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  font-size: 2rem;
  font-weight: 1000;
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
}

.profile-hero-card h2 {
  margin-top: 2px;
  font-size: clamp(1.8rem, 4vw, 3rem);
}

.profile-hero-card p:not(.eyebrow) {
  color: var(--muted);
  font-weight: 850;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.profile-grid div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, .07);
}

.profile-grid strong,
.profile-grid span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-grid strong {
  color: var(--gold-soft);
  font-size: 1.1rem;
}

.profile-grid span {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 850;
}

.tabs {
  position: sticky;
  top: 64px;
  z-index: 2;
  padding: 8px;
  margin-bottom: 14px;
  overflow: visible;
  border: 1px solid var(--line);
  background: rgba(10, 16, 14, .78);
  border-radius: 8px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.tab {
  flex: 1 0 max-content;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 7px;
  color: #d8ddcf;
  background: transparent;
  font-weight: 800;
}

.tab.active {
  color: #20180b;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 22px rgba(215, 170, 79, .2);
}

.more-tabs-btn {
  flex: 0 0 46px;
  min-height: 40px;
  border-radius: 7px;
  border: 1px solid rgba(235, 207, 142, .22);
  color: var(--gold-soft);
  background: rgba(255, 250, 240, .08);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
}

.tabs.open .more-tabs-btn {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: #20180b;
  transform: rotate(180deg);
}

.tabs-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 6px;
  display: none;
  width: min(320px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid rgba(235, 207, 142, .24);
  border-radius: 8px;
  background: rgba(7, 11, 10, .96);
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
  backdrop-filter: blur(18px);
}

.tabs.open .tabs-more-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.tabs-more-menu .tab {
  width: 100%;
  flex: 0 0 auto;
  text-align: left;
}

.view { display: none; }
.view.active { display: block; }

.hero-board {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, .62fr);
  align-items: stretch;
  margin-bottom: 14px;
  padding: 1px;
  border: 1px solid rgba(242, 211, 139, .2);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(242, 211, 139, .22), rgba(76, 135, 157, .12), transparent 58%),
    rgba(255, 250, 240, .035);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .42);
}

.village-art {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 24% 70%, rgba(255, 250, 240, .16), transparent 13%),
    radial-gradient(circle at 72% 68%, rgba(0, 0, 0, .18), transparent 18%),
    radial-gradient(circle at 50% 46%, rgba(242, 211, 139, .18), transparent 27%),
    linear-gradient(#586f78 0 33%, #6f7e49 33% 72%, #425735 72%);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.village-art:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), transparent 34%),
    radial-gradient(circle at 50% 69%, rgba(255, 250, 240, .24), transparent 38%),
    linear-gradient(135deg, rgba(215,170,79,.14), transparent 48%);
}

.sun {
  position: absolute;
  right: 11%;
  top: 12%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #f4c961;
  box-shadow: 0 0 0 18px rgba(244, 201, 97, .18);
}

.mountains {
  position: absolute;
  inset: 29% 0 auto;
  height: 130px;
  background:
    linear-gradient(135deg, transparent 35%, #657b75 36% 55%, transparent 56%) 0 0/240px 130px,
    linear-gradient(45deg, transparent 37%, #526762 38% 58%, transparent 59%) 80px 8px/260px 120px;
}

.territory-grid {
  position: absolute;
  inset: 25% 4% 5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  transform: perspective(680px) rotateX(16deg);
}

.field-zone {
  border: 2px solid rgba(242, 211, 139, .32);
  border-radius: 8px;
  box-shadow: inset 0 0 32px rgba(0, 0, 0, .34), 0 14px 36px rgba(0,0,0,.18);
}

.field-zone.forest {
  background:
    radial-gradient(circle at 12% 70%, rgba(0,0,0,.24) 0 22px, transparent 23px),
    radial-gradient(circle at 20% 35%, #314f35 0 12px, transparent 13px),
    radial-gradient(circle at 52% 22%, #456a43 0 16px, transparent 17px),
    radial-gradient(circle at 75% 54%, #29472f 0 15px, transparent 16px),
    #5f7d45;
}

.field-zone.clay {
  background:
    radial-gradient(circle at 70% 40%, rgba(0,0,0,.16), transparent 24%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.08) 0 12px, transparent 12px 26px),
    linear-gradient(135deg, #8f4c35, #b76640);
}

.field-zone.iron {
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 42%),
    radial-gradient(circle at 30% 45%, #5f6864 0 18px, transparent 19px),
    radial-gradient(circle at 70% 32%, #424c49 0 22px, transparent 23px),
    #7f8982;
}

.field-zone.crop {
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent),
    repeating-linear-gradient(100deg, #a77d34 0 16px, #d5ad54 16px 30px, #c4973f 30px 38px);
}

.village-center {
  position: absolute;
  left: 33%;
  top: 41%;
  width: 34%;
  height: 31%;
  z-index: 1;
  transform: perspective(500px) rotateX(10deg);
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35));
}

.center-wall {
  position: absolute;
  inset: 11% 2% 14%;
  border: 8px solid #9a8b70;
  border-radius: 50%;
  background: rgba(220, 187, 126, .34);
  box-shadow: 0 10px 34px rgba(23, 34, 29, .28), inset 0 0 22px rgba(0,0,0,.18);
}

.center-hall {
  position: absolute;
  left: 36%;
  top: 21%;
  width: 28%;
  height: 45%;
  border: 4px solid #604d3b;
  background: linear-gradient(180deg, #e2c17d, #a77c42);
}

.center-hall:before,
.center-house:before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: -19px;
  height: 22px;
  background: linear-gradient(135deg, transparent 14%, #9b3e2d 15% 84%, transparent 85%);
}

.center-house {
  position: absolute;
  width: 22%;
  height: 24%;
  border: 3px solid #604d3b;
  background: linear-gradient(180deg, #e4bf80, #b8854e);
}

.center-house.a { left: 17%; top: 50%; }
.center-house.b { right: 16%; top: 51%; }

.center-road {
  position: absolute;
  left: 47%;
  bottom: -8%;
  width: 10%;
  height: 76%;
  background: #a68c65;
  transform: rotate(8deg);
}

.building-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.v-building {
  position: absolute;
  width: min(146px, 31vw);
  min-height: 68px;
  border: 1px solid rgba(242, 211, 139, .38);
  border-radius: 8px;
  padding: 8px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.045)),
    rgba(12, 18, 16, .72);
  box-shadow: 0 12px 28px rgba(23, 34, 29, .22);
  backdrop-filter: blur(8px);
  text-align: left;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.v-building:hover {
  transform: translateY(-2px);
}

.v-building.affordable {
  border-color: rgba(242, 211, 139, .92);
  box-shadow: 0 0 0 2px rgba(215, 170, 79, .18), 0 16px 36px rgba(0, 0, 0, .34);
}

.v-building.busy {
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05)),
    rgba(42, 86, 102, .88);
}

.v-building .v-top {
  display: flex;
  align-items: center;
  gap: 7px;
}

.v-building .v-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: rgba(255, 250, 240, .2);
}

.v-building strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .94rem;
}

.v-building small {
  color: rgba(255, 255, 255, .76);
  font-weight: 800;
}

.v-building .v-progress {
  height: 5px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
}

.v-building .v-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
}

.v-townhall { left: 40%; top: 39%; }
.v-wall { left: 38%; top: 56%; }
.v-lumber { left: 8%; top: 38%; }
.v-quarry { right: 7%; top: 58%; }
.v-mine { right: 9%; top: 35%; }
.v-farm { left: 10%; top: 64%; }
.v-barracks { left: 62%; top: 45%; }

.selected-building {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(215, 170, 79, .12), transparent),
    rgba(255, 250, 240, .07);
}

.selected-building .costs {
  margin: 10px 0;
}

.selected-building strong {
  display: block;
  font-size: 1.08rem;
  color: var(--gold-soft);
}

.selected-building span,
.selected-building small {
  color: var(--muted);
  font-weight: 700;
}

.panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
    var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.stats-grid div, .metric-list div, .queue-item, .report, .card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, .07);
}

.stats-grid div {
  padding: 12px;
}

.stats-grid strong {
  display: block;
  font-size: 1.35rem;
  color: var(--gold-soft);
}

.stats-grid span, .card p, .report p, .target-panel p {
  color: var(--muted);
}

.metric-list strong,
.queue-item strong,
.report strong,
.card h3 {
  color: var(--ink);
}

.primary-btn, .secondary-btn {
  width: 100%;
  min-height: 44px;
  border-radius: 8px;
  padding: 0 14px;
  font-weight: 900;
}

.primary-btn {
  color: #111816;
  background: linear-gradient(135deg, #f1d68f, #d7aa4f);
  box-shadow: 0 12px 26px rgba(215, 170, 79, .2);
}

.primary-btn:disabled, .secondary-btn:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.secondary-btn {
  border: 1px solid var(--line);
  color: var(--ink);
  background: rgba(255, 250, 240, .1);
}

.grid.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.metric-list, .queue-list, .reports {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.metric-list div, .queue-item, .report {
  padding: 12px;
}

.queue-item strong, .report strong { display: block; margin-bottom: 4px; }

.section-head {
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(215, 170, 79, .12), transparent 56%),
    rgba(10, 16, 14, .72);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.pill {
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: 999px;
  color: #111816;
  background: linear-gradient(135deg, #9ec8d5, var(--blue));
  font-size: .82rem;
  font-weight: 900;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.council-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.civilization-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.civilization-card {
  position: relative;
  min-height: 245px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(242, 211, 139, .24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
    var(--panel);
  box-shadow: var(--shadow);
}

.civilization-card:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .58;
  background:
    radial-gradient(circle at 15% 12%, rgba(242, 211, 139, .22), transparent 25%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 1px, transparent 1px 18px);
}

.civilization-card > * {
  position: relative;
  z-index: 1;
}

.civilization-card h3 {
  margin: 18px 0 8px;
  font-size: 1.45rem;
}

.civilization-card p {
  min-height: 56px;
  color: var(--muted);
}

.civilization-card strong {
  display: block;
  margin: 10px 0 16px;
  color: var(--gold-soft);
}

.civilization-card.active {
  outline: 3px solid var(--gold);
}

.civilization-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  color: #111816;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  font-size: 1.65rem;
  font-weight: 900;
}

.civilization-card.barbarians { background: linear-gradient(135deg, rgba(72, 31, 33, .92), rgba(24, 34, 31, .82)); }
.civilization-card.egyptians { background: linear-gradient(135deg, rgba(99, 74, 30, .92), rgba(24, 34, 31, .82)); }
.civilization-card.vikings { background: linear-gradient(135deg, rgba(36, 67, 78, .92), rgba(24, 34, 31, .82)); }
.civilization-card.romans { background: linear-gradient(135deg, rgba(86, 67, 55, .92), rgba(24, 34, 31, .82)); }
.civilization-card.dacians { background: linear-gradient(135deg, rgba(41, 73, 48, .92), rgba(24, 34, 31, .82)); }
.civilization-card.persians { background: linear-gradient(135deg, rgba(58, 45, 91, .92), rgba(24, 34, 31, .82)); }

.doctrine-card {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(242, 211, 139, .24);
  border-radius: 8px;
  color: #fff;
  background: #23392f;
  box-shadow: var(--shadow);
}

.doctrine-card:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .72;
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 42%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 18px);
}

.doctrine-card > * {
  position: relative;
  z-index: 1;
}

.doctrine-card h3 {
  margin: 18px 0 8px;
  font-size: 1.35rem;
}

.doctrine-card p {
  min-height: 76px;
  color: rgba(255, 255, 255, .78);
}

.doctrine-card .secondary-btn {
  margin-top: 16px;
  color: #111816;
  background: linear-gradient(135deg, rgba(255,255,255,.92), var(--gold-soft));
}

.doctrine-card.active {
  outline: 3px solid var(--gold);
}

.doctrine-card.locked {
  filter: grayscale(.35);
  opacity: .68;
}

.doctrine-card.locked:after {
  content: "Deblocare la Primarie nivel 5";
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  padding: 7px 9px;
  border: 1px solid rgba(242, 211, 139, .26);
  border-radius: 999px;
  background: rgba(10, 16, 14, .78);
  color: var(--gold-soft);
  font-size: .72rem;
  font-weight: 900;
}

.doctrine-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .18);
  font-size: 1.65rem;
  font-weight: 900;
}

.doctrine-card.harvest { background: linear-gradient(135deg, #315c40, #7d8f3b); }
.doctrine-card.legion { background: linear-gradient(135deg, #632f33, #a65337); }
.doctrine-card.expansion { background: linear-gradient(135deg, #2b5264, #386c82); }
.doctrine-card.balanced { background: linear-gradient(135deg, #2c3c35, #6f6b57); }

.hero-card.active,
.quest-card.done {
  outline: 2px solid rgba(242, 211, 139, .78);
}

.market-actions {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.section-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.secondary-btn.compact {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: .82rem;
  font-weight: 900;
}

.panel-note {
  margin-top: 8px;
  color: #c6bfae;
  font-size: .9rem;
  line-height: 1.45;
}

.market-actions [data-trade-from] {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  gap: 4px;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid rgba(235, 207, 142, .26);
  background:
    linear-gradient(135deg, rgba(242, 211, 139, .18), rgba(18, 28, 24, .86)),
    rgba(12, 18, 16, .92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.22);
  text-align: left;
}

.market-actions [data-trade-from] span {
  color: #d7caa9;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.market-actions [data-trade-from] strong {
  color: #fff6da;
  font-size: .98rem;
}

.market-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 4px;
  row-gap: 2px;
  border-color: rgba(235, 207, 142, .2);
  background:
    linear-gradient(90deg, rgba(235, 207, 142, .1), rgba(255,255,255,.035)),
    rgba(22, 30, 27, .88);
}

.market-row strong {
  display: inline;
  margin: 0;
}

.market-row span {
  display: inline;
}

.profile-hero-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(240px, 320px);
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid rgba(235, 207, 142, .22);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(235, 207, 142, .12), rgba(255,255,255,.035)),
    rgba(13, 20, 18, .8);
}

.premium-card {
  border-color: rgba(90, 149, 165, .34);
}

.premium-shop-section {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(235, 207, 142, .2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(76, 135, 157, .055)),
    rgba(9, 15, 13, .72);
  box-shadow: var(--shadow);
}

.premium-shop-gems {
  border-color: rgba(242, 211, 139, .32);
}

.premium-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(235, 207, 142, .14);
}

.premium-section-head h3 {
  margin: 0;
  font-size: 1.22rem;
}

.premium-section-head > span {
  max-width: 520px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
  text-align: right;
}

.premium-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.premium-effect {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(242, 211, 139, .24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(215, 170, 79, .16), rgba(76, 135, 157, .08)),
    rgba(0,0,0,.16);
}

.premium-effect strong {
  color: var(--gold-soft);
  font-size: 1.06rem;
}

.premium-effect span {
  color: var(--muted);
  font-weight: 900;
}

.builder-product {
  border-color: rgba(242, 211, 139, .42);
  background:
    linear-gradient(145deg, rgba(215, 170, 79, .15), rgba(76, 135, 157, .09)),
    var(--panel);
}

.premium-help {
  grid-column: 1 / -1;
  border-color: rgba(235, 207, 142, .3);
  background:
    linear-gradient(90deg, rgba(235, 207, 142, .12), rgba(90, 149, 165, .08)),
    rgba(13, 20, 18, .82);
}

.premium-help p {
  max-width: 760px;
  margin: 8px 0 12px;
  color: #d7cfbd;
  line-height: 1.5;
}

.gem-pack {
  border-color: rgba(242, 211, 139, .3);
  background:
    linear-gradient(135deg, rgba(215, 170, 79, .15), rgba(76, 135, 157, .08)),
    rgba(16, 23, 21, .86);
}

.gem-pack-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(235, 207, 142, .18);
  border-radius: 7px;
  background: rgba(255,255,255,.055);
}

.gem-pack-price strong {
  color: var(--gold-soft);
}

.gem-pack-price span {
  color: var(--muted);
  font-weight: 900;
}

.alliance-donate {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 10px;
  margin-top: 12px;
}

.alliance-donate select {
  min-height: 44px;
  border: 1px solid rgba(235, 207, 142, .24);
  border-radius: 8px;
  padding: 0 10px;
  color: #fff6da;
  background: rgba(8, 13, 12, .72);
  font: inherit;
  font-weight: 800;
}

.village-art.skin-fortress {
  filter: contrast(1.08) saturate(.9);
  box-shadow: inset 0 0 0 2px rgba(210, 210, 195, .22), 0 24px 80px rgba(0,0,0,.42);
}

.village-art.skin-sunset {
  filter: sepia(.12) saturate(1.14) brightness(1.04);
  box-shadow: inset 0 0 90px rgba(210, 122, 70, .24), 0 24px 80px rgba(0,0,0,.42);
}

.quest-card.daily {
  border-color: rgba(120, 184, 145, .38);
  background:
    linear-gradient(180deg, rgba(120, 184, 145, .14), rgba(255,255,255,.035)),
    var(--panel);
}

.quest-card.progress {
  border-color: rgba(235, 207, 142, .34);
}

.quest-card.claimed {
  opacity: .72;
}

.login-form.stacked {
  min-width: 0;
  margin-top: 12px;
  flex-direction: column;
}

.card {
  display: grid;
  gap: 12px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.035)),
    var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  color: #1b1711;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  font-size: 1.45rem;
}

.costs, .unit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.costs span, .unit-row span {
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(255, 250, 240, .1);
  color: var(--gold-soft);
  font-size: .82rem;
  font-weight: 800;
}

.recruit-control {
  display: grid;
  grid-template-columns: 1fr 92px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(235, 207, 142, .18);
  border-radius: 8px;
  background: rgba(8, 13, 12, .48);
}

.recruit-control label {
  color: #d7caa9;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.recruit-control input {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(235, 207, 142, .26);
  border-radius: 7px;
  background: rgba(255, 250, 240, .08);
  color: #fff6da;
  font: inherit;
  font-weight: 900;
  text-align: center;
  outline: none;
}

.recruit-control input:focus {
  border-color: rgba(242, 211, 139, .72);
  box-shadow: 0 0 0 3px rgba(242, 211, 139, .13);
}

.map-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
}

.world-map-viewport {
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(235, 207, 142, .32);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.18)),
    rgba(9, 13, 11, .84);
  box-shadow: var(--shadow);
  user-select: none;
  touch-action: manipulation;
}

.map-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(34px, 1fr));
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    rgba(10, 16, 14, .82);
  box-shadow: var(--shadow);
}

.map-grid.loading {
  opacity: .72;
  filter: saturate(.82);
  pointer-events: none;
}

.tile {
  aspect-ratio: 1;
  border-radius: 7px;
  background: #829a5b;
  color: #fff;
  font-size: clamp(1rem, 3vw, 1.35rem);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  cursor: pointer;
}

.tile.player { background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: #111816; }
.tile.own { background: linear-gradient(135deg, var(--leaf), #9fbf68); color: #101714; }
.tile.enemy { background: var(--rust); }
.tile.event { background: linear-gradient(135deg, #344650, #d7aa4f); color: #111816; }
.tile.event.bandits { background: linear-gradient(135deg, #5b2b31, #d7aa4f); }
.tile.event.caravan { background: linear-gradient(135deg, #2e5964, #f2d38b); }
.tile.event.ruins { background: linear-gradient(135deg, #555d56, #d7aa4f); }
.tile.empty { background: #617c55; }
.tile.selected { outline: 3px solid #fff; }

.target-panel {
  align-self: start;
  position: sticky;
  top: 122px;
}

.target-summary {
  display: grid;
  gap: 9px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(230, 205, 151, .16);
}

.target-summary h3 {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.15;
}

.target-badge {
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid rgba(242, 211, 139, .28);
  border-radius: 999px;
  color: var(--gold-soft);
  background: rgba(215, 170, 79, .1);
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.target-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.target-meta span {
  padding: 6px 8px;
  border: 1px solid rgba(235, 207, 142, .16);
  border-radius: 7px;
  color: var(--muted);
  background: rgba(0,0,0,.16);
  font-size: .8rem;
  font-weight: 850;
}

.target-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.target-stats div {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(230, 205, 151, .22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(0,0,0,.1)),
    rgba(255, 250, 240, .065);
}

.target-stats strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--gold-soft);
  font-size: 1.35rem;
  line-height: 1.05;
}

.target-stats span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 850;
}

.target-hint {
  margin: 0 0 12px;
  padding: 10px 11px;
  border: 1px solid rgba(76, 135, 157, .25);
  border-radius: 8px;
  background: rgba(76, 135, 157, .1);
  line-height: 1.45;
}

.target-panel .primary-btn {
  margin-top: 2px;
}

.map-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.map-navigation-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -2px 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(235, 207, 142, .22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(215, 170, 79, .12), rgba(76, 135, 157, .08)),
    rgba(8, 13, 12, .76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.map-navigation-panel strong {
  display: block;
  color: var(--gold-soft);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.map-navigation-panel span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}

.map-controls {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
}

.map-controls .primary-btn,
.map-controls .secondary-btn {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: .82rem;
  white-space: nowrap;
}

.target-hint {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(235, 207, 142, .18);
  border-radius: 7px;
  background: rgba(255,255,255,.055);
  color: var(--gold-soft);
  font-weight: 800;
}

.reports { margin-top: 0; }

.rankings-list {
  display: grid;
  gap: 10px;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 14px;
}

.admin-span {
  grid-column: 1 / -1;
}

.admin-card {
  display: grid;
  gap: 14px;
}

.admin-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-actions {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.admin-actions .primary-btn,
.admin-actions .secondary-btn {
  min-height: 42px;
  padding: 0 10px;
  font-size: .82rem;
}

.admin-note {
  color: var(--muted);
  font-weight: 700;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-stats div,
.admin-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, .07);
}

.admin-stats div {
  padding: 12px;
}

.admin-stats strong {
  display: block;
  color: var(--gold-soft);
  font-size: 1.25rem;
}

.admin-stats span {
  color: var(--muted);
  font-weight: 800;
}

.admin-list {
  display: grid;
  gap: 9px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.admin-list.villages {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-row {
  display: grid;
  gap: 4px;
  padding: 11px;
}

.admin-row span,
.admin-row strong,
.admin-row small {
  display: block;
}

.admin-row span {
  color: var(--ink);
  font-weight: 900;
}

.admin-row strong {
  color: var(--gold-soft);
}

.admin-row small {
  color: var(--muted);
  font-weight: 800;
}

.ranking-row {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.035)),
    var(--panel);
  box-shadow: var(--shadow);
}

.ranking-row .place {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: #111816;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  font-weight: 900;
}

.ranking-row strong,
.ranking-row span {
  display: block;
}

.ranking-row span {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 5;
  max-width: min(420px, calc(100% - 24px));
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(10, 16, 14, .92);
  color: #fff;
  box-shadow: var(--shadow);
  transform: translate(-50%, 120px);
  transition: transform .2s ease;
}

.toast.show { transform: translate(-50%, 0); }

@media (max-width: 820px) {
  .app-shell { padding: 12px; }
  .auth-gate {
    grid-template-columns: 1fr;
  }
  .auth-copy {
    min-height: 260px;
  }
  .auth-actions {
    grid-template-columns: 1fr;
  }
  .status-strip { grid-template-columns: repeat(2, 1fr); }
  .resource.premium { grid-column: span 2; }
  .account-strip, .login-form { align-items: stretch; flex-direction: column; }
  .account-strip {
    align-items: stretch;
  }
  .player-card,
  .account-actions {
    width: 100%;
  }
  .player-stats,
  .profile-grid,
  .profile-hero-card {
    grid-template-columns: 1fr;
    max-width: none;
  }
  .tabs { top: 110px; }
  .hero-board, .grid.two, .map-wrap, .cards, .council-board, .civilization-board, .admin-grid, .admin-list.villages {
    grid-template-columns: 1fr;
  }
  .admin-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .world-map-viewport { min-height: 430px; }
  .map-grid.world-map {
    width: 100%;
    min-width: 0;
    grid-template-columns: 26px repeat(var(--map-cols, 15), minmax(0, 1fr)) 26px;
  }
  .village-art { min-height: 430px; }
  .v-building {
    width: min(140px, 42vw);
    min-height: 56px;
    padding: 7px;
  }
  .v-building strong { font-size: .8rem; }
  .territory-grid { inset: 24% 3% 4%; gap: 8px; }
  .village-center { left: 28%; top: 39%; width: 44%; height: 28%; }
  .v-townhall { left: 33%; top: 36%; }
  .v-wall { left: 34%; top: 52%; }
  .v-lumber { left: 4%; top: 35%; }
  .v-quarry { right: 4%; top: 58%; }
  .v-mine { right: 4%; top: 34%; }
  .v-farm { left: 4%; top: 62%; }
  .v-barracks { left: 57%; top: 47%; }
  .target-panel { position: static; }
  .premium-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .premium-section-head > span {
    max-width: none;
    text-align: left;
  }
  .section-head { align-items: flex-start; }
  .map-navigation-panel {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }
  .map-controls {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .map-controls [data-map-move="center"] {
    grid-column: span 1;
  }
  .map-controls .primary-btn,
  .map-controls .secondary-btn {
    padding: 0 6px;
    font-size: .72rem;
  }
}

@media (max-width: 460px) {
  .topbar { align-items: flex-start; }
  .icon-btn { width: 38px; height: 38px; }
  .resource { padding: 8px; }
  .map-grid { gap: 4px; }
  .tile { border-radius: 5px; }
  .v-building {
    width: 132px;
    font-size: .78rem;
  }
  .v-building .v-icon {
    width: 26px;
    height: 26px;
  }
  .ranking-row {
    grid-template-columns: 44px 1fr;
  }
  .ranking-row > strong {
    grid-column: 2;
  }
}

/* Premium strategy refresh */
:root {
  --ink: #f8f2e6;
  --dark: #070b0a;
  --deep: #101816;
  --muted: #bac2b4;
  --line: rgba(235, 207, 142, .24);
  --panel: rgba(13, 19, 17, .78);
  --panel-strong: rgba(8, 13, 12, .94);
  --gold: #cda453;
  --gold-soft: #f3d990;
  --leaf: #79a86a;
  --blue: #5a95a5;
  --shadow: 0 22px 60px rgba(0, 0, 0, .42);
}

body {
  background:
    radial-gradient(circle at 14% 8%, rgba(243, 217, 144, .18), transparent 30rem),
    radial-gradient(circle at 86% 4%, rgba(90, 149, 165, .16), transparent 30rem),
    linear-gradient(180deg, #050807 0, #0e1714 34%, #18211a 100%);
}

body:before {
  opacity: .16;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/72px 72px,
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/72px 72px;
}

.app-shell {
  width: min(1380px, 100%);
  padding: 20px;
}

.topbar {
  min-height: 116px;
  margin-bottom: 12px;
  padding: 22px 24px;
  border: 1px solid rgba(235, 207, 142, .16);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(8, 13, 12, .96), rgba(16, 26, 23, .82)),
    radial-gradient(circle at 18% 20%, rgba(243, 217, 144, .16), transparent 28rem);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .34);
}

.topbar h1 {
  font-size: clamp(3rem, 7vw, 6rem);
}

.brand-subtitle {
  color: #d4cfbf;
}

.status-strip,
.account-strip,
.tabs {
  border-color: rgba(235, 207, 142, .2);
  background: rgba(7, 11, 10, .8);
}

.status-strip {
  top: 10px;
}

.resource {
  padding: 12px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.035)),
    rgba(19, 28, 25, .88);
}

.resource strong {
  font-size: 1.15rem;
}

.resource small {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
}

.account-strip {
  padding: 14px 16px;
}

.tabs {
  top: 76px;
  padding: 6px;
}

.tab {
  min-height: 42px;
  color: #c7d0c4;
}

.tab:hover {
  background: rgba(255, 255, 255, .06);
}

.hero-board {
  grid-template-columns: minmax(0, 1.75fr) minmax(340px, .55fr);
  gap: 16px;
  padding: 8px;
  border-color: rgba(235, 207, 142, .22);
  background:
    linear-gradient(135deg, rgba(243, 217, 144, .18), rgba(90, 149, 165, .08), rgba(0,0,0,.12)),
    rgba(255, 255, 255, .025);
}

.village-art {
  min-height: 620px;
  border-color: rgba(235, 207, 142, .25);
  background:
    radial-gradient(circle at 77% 16%, rgba(255, 230, 157, .72) 0 24px, rgba(255, 230, 157, .18) 25px 70px, transparent 71px),
    linear-gradient(180deg, #5f7675 0 26%, #516a57 26% 36%, #657747 36% 58%, #34472f 58% 100%);
}

.village-art:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.15), transparent 26%),
    radial-gradient(circle at 48% 56%, rgba(245, 226, 174, .2), transparent 26%),
    linear-gradient(120deg, transparent 0 48%, rgba(255,255,255,.055) 49% 51%, transparent 52% 100%);
  z-index: 1;
}

.village-art:after {
  z-index: 5;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 30%),
    radial-gradient(circle at 50% 62%, transparent 0 46%, rgba(0,0,0,.18) 82%),
    linear-gradient(135deg, rgba(243, 217, 144, .12), transparent 44%);
}

.sun {
  right: 9%;
  top: 9%;
  width: 72px;
  height: 72px;
  background: #ffdd79;
  box-shadow: 0 0 0 24px rgba(255, 221, 121, .15), 0 0 70px rgba(255, 221, 121, .42);
}

.mountains {
  inset: 24% 0 auto;
  height: 178px;
  opacity: .88;
  background:
    linear-gradient(135deg, transparent 35%, #506b66 36% 55%, transparent 56%) 0 18px/260px 158px,
    linear-gradient(45deg, transparent 37%, #3c5651 38% 58%, transparent 59%) 80px 0/300px 170px;
}

.territory-grid {
  inset: 25% 3.5% 4%;
  gap: 12px;
  transform: perspective(860px) rotateX(18deg);
}

.field-zone {
  border-width: 1px;
  border-color: rgba(243, 217, 144, .34);
  box-shadow: inset 0 0 42px rgba(0,0,0,.36), 0 18px 42px rgba(0,0,0,.22);
}

.field-zone.forest {
  background:
    radial-gradient(circle at 12% 70%, rgba(0,0,0,.25) 0 24px, transparent 25px),
    radial-gradient(circle at 18% 36%, #203f2b 0 13px, transparent 14px),
    radial-gradient(circle at 38% 52%, #6f9358 0 14px, transparent 15px),
    radial-gradient(circle at 56% 22%, #406f3d 0 19px, transparent 20px),
    radial-gradient(circle at 77% 55%, #25462d 0 17px, transparent 18px),
    linear-gradient(135deg, #597647, #2d4a35);
}

.field-zone.clay {
  background:
    radial-gradient(circle at 72% 42%, rgba(0,0,0,.18), transparent 25%),
    repeating-linear-gradient(120deg, rgba(255,255,255,.09) 0 10px, transparent 10px 24px),
    linear-gradient(135deg, #8a4631, #c17345);
}

.field-zone.iron {
  background:
    linear-gradient(135deg, rgba(255,255,255,.13), transparent 45%),
    radial-gradient(circle at 30% 45%, #626f69 0 20px, transparent 21px),
    radial-gradient(circle at 70% 32%, #3f4d4a 0 24px, transparent 25px),
    linear-gradient(135deg, #87918b, #59645f);
}

.field-zone.crop {
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent),
    repeating-linear-gradient(100deg, #8f6b2f 0 14px, #d2aa51 14px 30px, #b78635 30px 40px);
}

.village-center {
  left: 34%;
  top: 38%;
  width: 33%;
  height: 32%;
  z-index: 3;
}

.center-wall {
  border-color: #c0ab7d;
  background:
    radial-gradient(circle, rgba(238, 203, 133, .46), rgba(93, 69, 44, .22)),
    rgba(220, 187, 126, .28);
}

.center-hall,
.center-house {
  border-color: #5c4731;
  box-shadow: 0 10px 16px rgba(0,0,0,.22);
}

.building-layer {
  z-index: 6;
}

.v-building {
  width: min(176px, 31vw);
  min-height: 76px;
  padding: 10px;
  border-color: rgba(235, 207, 142, .44);
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045)),
    linear-gradient(135deg, rgba(17, 25, 22, .94), rgba(35, 44, 34, .82));
  box-shadow: 0 18px 34px rgba(0, 0, 0, .32);
  backdrop-filter: blur(12px);
}

.v-building:before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: -7px;
  height: 10px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(90deg, rgba(243, 217, 144, .2), rgba(243, 217, 144, .7), rgba(243, 217, 144, .2));
}

.v-building:hover,
.v-building.selected {
  transform: translateY(-3px);
  border-color: rgba(255, 224, 145, .98);
  box-shadow: 0 0 0 2px rgba(243, 217, 144, .16), 0 22px 46px rgba(0,0,0,.38);
}

.v-building.selected {
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.055)),
    linear-gradient(135deg, rgba(46, 58, 42, .96), rgba(76, 62, 32, .88));
}

.v-building.affordable:not(.selected) {
  border-color: rgba(134, 198, 123, .82);
  box-shadow: 0 0 0 2px rgba(134, 198, 123, .14), 0 18px 38px rgba(0,0,0,.34);
}

.v-building .v-icon {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(235, 207, 142, .22);
  background: linear-gradient(135deg, rgba(243, 217, 144, .24), rgba(255,255,255,.08));
}

.v-building strong {
  font-size: .98rem;
}

.v-building small {
  line-height: 1.35;
}

.v-progress {
  border: 1px solid rgba(255,255,255,.12);
}

.v-townhall { left: 40%; top: 37%; }
.v-wall { left: 37%; top: 55%; }
.v-lumber { left: 7%; top: 34%; }
.v-quarry { right: 5%; top: 64%; }
.v-mine { right: 7%; top: 29%; }
.v-farm { left: 8%; top: 66%; }
.v-barracks { left: 63%; top: 47%; }

.panel,
.card,
.ranking-row {
  border-color: rgba(235, 207, 142, .22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.035)),
    rgba(12, 18, 16, .84);
}

.hero-board > .panel {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 20px;
}

.selected-building {
  margin-top: 0;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(243, 217, 144, .14), rgba(90, 149, 165, .08)),
    rgba(255,255,255,.055);
}

.selected-building strong {
  font-size: 1.15rem;
}

.stats-grid div,
.metric-list div,
.queue-item {
  border-color: rgba(235, 207, 142, .16);
  background: rgba(255,255,255,.055);
}

.primary-btn,
.secondary-btn {
  border-radius: 8px;
}

.map-grid {
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.028)),
    rgba(8, 13, 12, .88);
}

@media (max-width: 980px) {
  .hero-board {
    grid-template-columns: 1fr;
  }

  .village-art {
    min-height: 560px;
  }

  .tabs {
    top: 96px;
  }
}

@media (max-width: 820px) {
  .topbar {
    min-height: auto;
    padding: 18px;
  }

  .status-strip {
    top: 0;
  }

  .village-art {
    min-height: 500px;
  }

  .v-building {
    width: min(152px, 44vw);
    min-height: 70px;
  }

  .territory-grid {
    inset: 25% 3% 5%;
  }

  .v-townhall { left: 32%; top: 36%; }
  .v-wall { left: 32%; top: 53%; }
  .v-lumber { left: 4%; top: 34%; }
  .v-quarry { right: 4%; top: 64%; }
  .v-mine { right: 4%; top: 29%; }
  .v-farm { left: 4%; top: 66%; }
  .v-barracks { left: 55%; top: 47%; }
}

@media (max-width: 460px) {
  .app-shell {
    padding: 10px;
  }

  .topbar h1 {
    font-size: 3rem;
  }

  .village-art {
    min-height: 470px;
  }

  .v-building {
    width: 96px;
    min-height: 58px;
    padding: 7px;
  }

  .v-building .v-top {
    gap: 5px;
  }

  .v-building .v-icon {
    width: 28px;
    height: 28px;
    font-size: .95rem;
  }

  .v-building strong {
    font-size: .72rem;
  }

  .v-building small {
    font-size: .68rem;
  }

  .v-building > small {
    display: none;
  }

  .v-townhall { left: 35%; top: 34%; }
  .v-wall { left: 35%; top: 52%; }
  .v-lumber { left: 3%; top: 34%; }
  .v-mine { right: 3%; top: 34%; }
  .v-barracks { right: 3%; left: auto; top: 49%; }
  .v-farm { left: 3%; top: 64%; }
  .v-quarry { right: 3%; top: 64%; }
}

/* Realistic village direction */
.village-art {
  min-height: 640px;
  background:
    linear-gradient(180deg, rgba(5, 8, 7, .02), rgba(5, 8, 7, .18)),
    radial-gradient(circle at 52% 52%, rgba(238, 215, 160, .08), transparent 34%),
    url("assets/village-realistic-v1.png") center / cover no-repeat;
  border-color: rgba(205, 178, 121, .28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 30px 90px rgba(0,0,0,.46);
}

.village-art:before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 24%),
    radial-gradient(circle at 52% 54%, transparent 0 48%, rgba(0,0,0,.24) 100%);
  z-index: 1;
}

.village-art:after {
  z-index: 5;
  background:
    linear-gradient(180deg, transparent 0 74%, rgba(0,0,0,.18) 100%),
    linear-gradient(90deg, rgba(0,0,0,.12), transparent 16% 84%, rgba(0,0,0,.18));
}

.sun,
.mountains,
.territory-grid,
.village-center {
  display: none;
}

.building-layer {
  z-index: 6;
}

.v-building {
  width: min(168px, 31vw);
  min-height: 72px;
  padding: 10px 11px;
  border: 1px solid rgba(215, 194, 145, .35);
  border-radius: 6px;
  color: #f5efe2;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
    rgba(9, 12, 10, .76);
  box-shadow: 0 14px 30px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(7px) saturate(.9);
}

.v-building:before {
  display: none;
}

.v-building:hover,
.v-building.selected {
  transform: translateY(-2px);
  border-color: rgba(232, 206, 145, .82);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
    rgba(25, 24, 18, .82);
  box-shadow: 0 0 0 1px rgba(232, 206, 145, .18), 0 18px 40px rgba(0,0,0,.48);
}

.v-building.affordable:not(.selected) {
  border-color: rgba(136, 169, 109, .72);
  box-shadow: 0 0 0 1px rgba(136, 169, 109, .15), 0 14px 32px rgba(0,0,0,.42);
}

.v-building.busy {
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)),
    rgba(31, 53, 58, .82);
}

.v-building .v-icon {
  width: 34px;
  height: 34px;
  border-radius: 5px;
  border: 1px solid rgba(215, 194, 145, .28);
  background: rgba(0, 0, 0, .22);
  color: #e8d19b;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
}

.game-icon {
  display: block;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.resource span .game-icon {
  width: 24px;
  height: 24px;
  color: #e7d19c;
}

.v-icon .game-icon,
.card-icon .game-icon {
  width: 22px;
  height: 22px;
}

.costs span .game-icon,
.unit-row span .game-icon {
  width: 15px;
  height: 15px;
  color: #dfc788;
}

.costs span,
.unit-row span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tile .game-icon {
  width: 22px;
  height: 22px;
  color: currentColor;
}

/* Realistic coordinate world map */
.map-grid.world-map {
  display: grid;
  grid-template-columns: 34px repeat(var(--map-cols, 15), minmax(0, 1fr)) 34px;
  width: 100%;
  min-width: 0;
  gap: 0;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.12)),
    radial-gradient(circle at 25% 20%, rgba(79, 117, 61, .42), transparent 30%),
    radial-gradient(circle at 72% 62%, rgba(55, 98, 61, .32), transparent 28%),
    #d9cfaa;
  box-shadow: inset 0 0 0 6px rgba(243, 230, 190, .28);
}

.map-axis,
.map-corner {
  display: grid;
  place-items: center;
  min-height: 30px;
  color: #2d2c22;
  background: rgba(245, 235, 202, .86);
  font-size: .78rem;
  font-weight: 900;
}

.map-axis.side {
  min-width: 34px;
}

.map-grid.world-map .tile {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 0;
  border: 1px solid rgba(31, 48, 29, .18);
  overflow: hidden;
  color: #fff7d9;
  background: #6a9a54;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.map-grid.world-map .tile:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .55;
  background:
    radial-gradient(circle at 20% 28%, rgba(255,255,255,.12), transparent 18%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.08));
}

.terrain-grass { background: linear-gradient(135deg, #6fa45b, #4f873e); }
.terrain-field { background: repeating-linear-gradient(90deg, #8f9b43 0 7px, #758a38 7px 14px); }
.terrain-forest { background: linear-gradient(135deg, #2f5a37, #1f3f2b); }
.terrain-hill { background: radial-gradient(circle at 52% 46%, #7b8655, #536b42 58%, #45613b); }
.terrain-lake { background: radial-gradient(circle at 48% 50%, #4c8aa0, #2f6478 64%, #406d56); }

.terrain-forest .terrain-mark:before,
.terrain-forest .terrain-mark:after {
  content: "";
  position: absolute;
  width: 34%;
  height: 42%;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  background: rgba(13, 48, 28, .78);
}

.terrain-forest .terrain-mark:before { left: 18%; top: 18%; }
.terrain-forest .terrain-mark:after { right: 18%; bottom: 18%; }

.terrain-lake .terrain-mark:before {
  content: "";
  position: absolute;
  inset: 22% 16%;
  border-radius: 50%;
  background: rgba(119, 181, 199, .62);
}

.terrain-hill .terrain-mark:before {
  content: "";
  position: absolute;
  left: 25%;
  top: 30%;
  width: 50%;
  height: 35%;
  border-radius: 50% 50% 35% 35%;
  background: rgba(71, 80, 52, .48);
}

.map-token {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(26px, 3.1vw, 34px);
  height: clamp(26px, 3.1vw, 34px);
  border: 2px solid rgba(31, 28, 18, .7);
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 35%, rgba(243, 217, 144, .9), rgba(116, 75, 37, .95));
  box-shadow: 0 8px 16px rgba(0,0,0,.34);
}

.map-token .game-icon {
  width: 18px;
  height: 18px;
  color: #21170d;
}

.map-grid.world-map .tile.player .map-token,
.map-grid.world-map .tile.own .map-token {
  border-color: #1d50c5;
}

.map-grid.world-map .tile.enemy .map-token {
  border-color: #b61e36;
}

.map-grid.world-map .tile.event .map-token {
  border-color: #f2d38b;
  background: radial-gradient(circle at 45% 35%, #f2d38b, #4b5c44);
}

.map-grid.world-map .tile.event.barbar .map-token {
  border-color: #d76252;
  background: radial-gradient(circle at 45% 35%, #e39a75, #5d1f18);
}

.map-grid.world-map .tile.event.ruins .map-token {
  border-color: #b8c0ba;
  background: radial-gradient(circle at 45% 35%, #d4d8cf, #4b5550);
}

.map-grid.world-map .tile.event.caravan .map-token {
  border-color: #f2d38b;
  background: radial-gradient(circle at 45% 35%, #f2d38b, #7a5524);
}

.map-grid.world-map .tile.selected {
  outline: 3px solid #fff3b8;
  z-index: 3;
}

.inline-title-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  border: 1px solid rgba(215, 194, 145, .24);
  border-radius: 5px;
  color: #e8d19b;
  background: rgba(0,0,0,.18);
  vertical-align: middle;
}

.inline-title-icon .game-icon {
  width: 18px;
  height: 18px;
}

.v-building strong {
  font-size: .95rem;
  letter-spacing: 0;
}

.v-building small {
  color: rgba(241, 233, 216, .82);
  font-size: .8rem;
}

.v-building > small {
  display: block;
  margin-top: 6px;
  color: #d7c69d;
}

.v-townhall { left: 41%; top: 40%; }
.v-wall { left: 42%; top: 58%; }
.v-lumber { left: 8%; top: 39%; }
.v-quarry { left: 9%; right: auto; top: 65%; }
.v-mine { right: 8%; top: 30%; }
.v-farm { right: 9%; left: auto; top: 67%; }
.v-barracks { left: 67%; top: 48%; }

.selected-building strong {
  color: #ead7aa;
}

.selected-building .selected-upgrade-btn {
  width: 100%;
  margin-top: 12px;
}

.card-icon {
  color: #efe4ca;
  background: linear-gradient(135deg, rgba(87, 75, 51, .9), rgba(36, 34, 26, .92));
}

@media (max-width: 980px) {
  .village-art {
    min-height: 570px;
  }
}

@media (max-width: 820px) {
  .village-art {
    min-height: 520px;
  }

  .v-building {
    width: min(138px, 42vw);
    min-height: 66px;
  }

  .v-townhall { left: 34%; top: 40%; }
  .v-wall { left: 34%; top: 56%; }
  .v-lumber { left: 4%; top: 38%; }
  .v-quarry { left: 4%; top: 65%; }
  .v-mine { right: 4%; top: 31%; }
  .v-farm { right: 4%; top: 66%; }
  .v-barracks { left: 58%; top: 48%; }
}

@media (max-width: 460px) {
  .village-art {
    min-height: 500px;
    background-position: center;
  }

  .v-building {
    width: 92px;
    min-height: 56px;
    padding: 7px;
  }

  .v-building .v-icon {
    width: 26px;
    height: 26px;
    font-size: .6rem;
  }

  .v-icon .game-icon,
  .card-icon .game-icon {
    width: 18px;
    height: 18px;
  }

  .v-building strong {
    font-size: .68rem;
  }

  .v-building small {
    font-size: .64rem;
  }

  .v-building > small {
    display: none;
  }

  .v-townhall { left: 35%; top: 39%; }
  .v-wall { left: 35%; top: 54%; }
  .v-lumber { left: 3%; top: 37%; }
  .v-quarry { left: 3%; top: 64%; }
  .v-mine { right: 3%; top: 30%; }
  .v-farm { right: 3%; top: 64%; }
  .v-barracks { right: 3%; left: auto; top: 47%; }
}

/* Onboarding, travel missions and village progression */
.onboarding-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(235, 207, 142, .2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(205, 164, 83, .13), rgba(90, 149, 165, .07)),
    rgba(7, 11, 10, .78);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.onboarding-strip[hidden] {
  display: none;
}

.onboarding-strip strong {
  display: block;
}

.onboarding-steps {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.tutorial-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(235, 207, 142, .18);
  border-radius: 7px;
  color: #d8ddcf;
  background: rgba(255,255,255,.055);
  font-weight: 800;
  white-space: nowrap;
}

.tutorial-step.done {
  color: #172019;
  background: linear-gradient(135deg, #b8d08f, #6f9d68);
}

.tutorial-step .game-icon {
  width: 16px;
  height: 16px;
}

.village-art.stage-2 {
  background:
    linear-gradient(180deg, rgba(5, 8, 7, .02), rgba(5, 8, 7, .18)),
    radial-gradient(circle at 52% 52%, rgba(238, 215, 160, .08), transparent 34%),
    url("assets/village-realistic-v2.png") center / cover no-repeat;
}

.village-art.stage-3 {
  background:
    linear-gradient(180deg, rgba(5, 8, 7, .02), rgba(5, 8, 7, .18)),
    radial-gradient(circle at 52% 52%, rgba(238, 215, 160, .08), transparent 34%),
    url("assets/village-realistic-v3.png") center / cover no-repeat;
}

.village-art.stage-1.skin-fortress,
.village-art.stage-2.skin-fortress,
.village-art.stage-3.skin-fortress {
  background:
    linear-gradient(180deg, rgba(18, 22, 20, .1), rgba(5, 8, 7, .34)),
    radial-gradient(circle at 50% 52%, rgba(210, 210, 195, .18), transparent 38%),
    url("assets/village-realistic-v3.png") center / cover no-repeat;
  filter: contrast(1.16) saturate(.82) brightness(.96);
}

.village-art.stage-1.skin-sunset,
.village-art.stage-2.skin-sunset,
.village-art.stage-3.skin-sunset {
  background:
    linear-gradient(180deg, rgba(148, 73, 42, .18), rgba(5, 8, 7, .22)),
    radial-gradient(circle at 74% 18%, rgba(255, 182, 91, .34), transparent 34%),
    url("assets/village-realistic-v2.png") center / cover no-repeat;
  filter: sepia(.22) saturate(1.35) brightness(1.08);
}

.stage-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  margin: 8px 0 4px;
  padding: 0 10px;
  border: 1px solid rgba(235, 207, 142, .24);
  border-radius: 7px;
  color: #ead7aa;
  background: rgba(0,0,0,.2);
  font-size: .82rem;
  font-weight: 900;
}

.queue-item.mission {
  border-color: rgba(90, 149, 165, .34);
  background: rgba(90, 149, 165, .09);
}

@media (max-width: 820px) {
  .onboarding-strip {
    grid-template-columns: 1fr;
  }
}

/* Header logo and stable village markers */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.brand-crest {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(235, 207, 142, .32);
  border-radius: 10px;
  background:
    radial-gradient(circle at 42% 30%, rgba(243, 217, 144, .22), transparent 56%),
    linear-gradient(145deg, rgba(43, 39, 25, .96), rgba(11, 16, 14, .94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 46px rgba(0,0,0,.34);
  color: #ead7aa;
  position: relative;
  overflow: hidden;
}

.brand-crest:before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(235, 207, 142, .18);
  border-radius: 7px;
  pointer-events: none;
}

.brand-crest:after {
  content: "";
  position: absolute;
  inset: -40% auto auto -20%;
  width: 58px;
  height: 150%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: rotate(24deg);
  pointer-events: none;
}

.brand-crest svg {
  width: 54px;
  height: 54px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.34));
}

.brand-crest .crest-shield {
  fill: rgba(205, 164, 83, .08);
  stroke: #efd89c;
}

.brand-crest .crest-wall,
.brand-crest .crest-keep {
  stroke-width: 2.4;
}

.brand-crest .crest-tools {
  stroke: #b9c6a6;
}

.brand-crest .crest-spear {
  stroke: #f3d990;
}

.topbar {
  min-height: 154px;
  padding: 22px 24px;
  border: 1px solid rgba(235, 207, 142, .18);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(6, 10, 9, .94) 0%, rgba(8, 12, 11, .82) 36%, rgba(8, 12, 11, .46) 68%, rgba(8, 12, 11, .76) 100%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.24)),
    url("assets/brand-header-realms.png") center right / cover no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 52px rgba(0,0,0,.28);
  overflow: hidden;
  position: relative;
}

.topbar h1 {
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  white-space: nowrap;
  text-shadow: 0 7px 26px rgba(0,0,0,.58);
}

.v-building {
  display: grid;
  grid-template-rows: 40px 18px 5px;
  align-content: start;
  gap: 4px;
  height: 84px;
  min-height: 84px;
  max-height: 84px;
  overflow: hidden;
}

.v-building .v-top {
  min-height: 40px;
  align-items: center;
}

.v-building .v-meta {
  display: block;
  min-height: 18px;
  line-height: 18px;
  max-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #d7c69d;
  font-size: .8rem;
  font-weight: 900;
}

.v-building .v-meta.production {
  color: #ead7aa;
}

.v-building .v-progress {
  position: static;
  width: 100%;
  height: 4px;
  margin-top: 0;
}

@media (max-width: 820px) {
  .brand-crest {
    width: 58px;
    height: 58px;
  }

  .brand-crest svg {
    width: 38px;
    height: 38px;
  }

  .v-building {
    grid-template-rows: 38px 16px 4px;
    height: 74px;
    min-height: 74px;
    max-height: 74px;
  }

  .topbar h1 {
    font-size: clamp(1.5rem, 6.6vw, 2.45rem);
  }

  .topbar {
    min-height: 132px;
    padding: 18px;
    background-position: 62% center;
  }

  .v-building .v-meta {
    min-height: 16px;
    line-height: 16px;
    max-height: 16px;
    font-size: .74rem;
  }
}

@media (max-width: 460px) {
  .brand-lockup {
    gap: 12px;
  }

  .brand-crest {
    width: 48px;
    height: 48px;
  }

  .brand-crest svg {
    width: 32px;
    height: 32px;
  }

  .topbar h1 {
    font-size: clamp(1.28rem, 6.2vw, 1.7rem);
  }

  .topbar {
    min-height: 116px;
    padding: 14px;
  }

  .brand-subtitle {
    font-size: .62rem;
    line-height: 1.25;
  }

  .tabs {
    gap: 6px;
  }

  .tab {
    padding: 0 10px;
    font-size: .82rem;
  }

  .tabs.open .tabs-more-menu {
    grid-template-columns: 1fr;
  }

  .v-building {
    grid-template-rows: 34px 0 4px;
    height: 60px;
    min-height: 60px;
    max-height: 60px;
  }

  .v-building .v-meta {
    display: none;
  }
}

@media (max-width: 680px) {
  .app-shell {
    padding: 10px;
  }

  .topbar {
    min-height: auto;
    margin-bottom: 10px;
    padding: 12px;
  }

  .brand-lockup {
    width: 100%;
    align-items: center;
  }

  .brand-crest {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  .brand-crest svg {
    width: 30px;
    height: 30px;
  }

  .topbar h1 {
    font-size: clamp(1.45rem, 8vw, 2.15rem);
    line-height: .95;
  }

  .brand-subtitle,
  .topbar .eyebrow {
    font-size: .62rem;
    line-height: 1.2;
  }

  .auth-gate {
    gap: 10px;
  }

  .auth-copy,
  .auth-panel {
    padding: 16px;
    border-radius: 8px;
  }

  .auth-copy {
    min-height: 320px;
    align-content: end;
  }

  .auth-copy h2 {
    font-size: clamp(2.8rem, 16vw, 4.4rem);
    line-height: .86;
  }

  .auth-copy p:not(.eyebrow),
  .auth-panel-head p:not(.eyebrow) {
    font-size: .96rem;
    line-height: 1.45;
  }

  .auth-proof {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .auth-lang-switch {
    min-height: 42px;
  }

  .auth-mode {
    min-height: 46px;
  }

  .auth-panel label {
    gap: 7px;
    margin-top: 10px;
  }

  .auth-panel input {
    min-height: 48px;
    font-size: 1rem;
  }

  .auth-actions .primary-btn,
  .auth-actions .secondary-btn {
    min-height: 48px;
  }

  .status-strip {
    position: sticky;
    top: 0;
    z-index: 4;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
  }

  .resource {
    min-height: 54px;
    padding: 8px;
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .resource span .game-icon {
    width: 20px;
    height: 20px;
  }

  .resource strong {
    font-size: .96rem;
  }

  .resource small {
    font-size: .68rem;
  }

  .resource.premium {
    grid-column: span 2;
  }

  .gem-plus {
    right: 7px;
    width: 30px;
    height: 30px;
  }

  .account-strip {
    gap: 10px;
    padding: 10px;
  }

  .player-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .player-avatar {
    width: 44px;
    height: 44px;
  }

  .player-stats {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .account-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .account-actions .secondary-btn {
    min-width: 0;
    width: 100%;
  }

  .tabs {
    position: sticky;
    top: 78px;
    z-index: 3;
    gap: 6px;
    padding: 6px;
    overflow: visible;
  }

  .tabs > .tab:not(.active):not(:nth-of-type(1)):not(:nth-of-type(2)):not(:nth-of-type(3)),
  .tabs > .tab[data-admin-only] {
    display: none;
  }

  .tab {
    min-height: 38px;
    padding: 0 9px;
    font-size: .78rem;
  }

  .more-tabs-btn {
    flex-basis: 42px;
    min-height: 38px;
  }

  .tabs-more-menu {
    left: 6px;
    right: 6px;
    width: auto;
    max-height: min(70vh, 480px);
    overflow-y: auto;
  }

  .tabs.open .tabs-more-menu {
    grid-template-columns: 1fr;
  }

  .section-head {
    gap: 8px;
  }

  .section-head h2 {
    font-size: clamp(1.5rem, 8vw, 2.1rem);
  }

  .cards,
  .grid.two,
  .hero-board,
  .council-board,
  .civilization-board,
  .premium-shop-grid,
  .target-stats {
    grid-template-columns: 1fr;
  }

  .panel,
  .card,
  .premium-shop-section,
  .selected-building {
    padding: 14px;
  }

  .village-art {
    min-height: 520px;
  }

  .selected-building {
    grid-template-columns: 1fr;
  }

  .selected-upgrade-btn {
    width: 100%;
  }

  .queue-item {
    grid-template-columns: 1fr;
  }

  .queue-status,
  .queue-meta {
    min-width: 0;
    text-align: left;
  }

  .map-wrap {
    gap: 10px;
  }

  .world-map-viewport {
    min-height: 440px;
    overflow: auto;
  }

  .map-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .map-controls [data-map-move="center"] {
    grid-column: span 3;
  }

  .target-panel {
    position: static;
  }
}

@media (max-width: 380px) {
  .auth-copy {
    min-height: 280px;
  }

  .auth-copy h2 {
    font-size: clamp(2.4rem, 15vw, 3.2rem);
  }

  .status-strip {
    grid-template-columns: 1fr;
  }

  .resource.premium {
    grid-column: auto;
  }

  .account-actions,
  .map-controls {
    grid-template-columns: 1fr;
  }

  .map-controls [data-map-move="center"] {
    grid-column: auto;
  }

  .hero-intel,
  .target-stats,
  .stats-grid {
    grid-template-columns: 1fr;
  }
}