:root {
  --bg: #0c1018;
  --ocean-bg:
    radial-gradient(circle at 50% 42%, rgba(74, 161, 202, .28), transparent 34%),
    radial-gradient(circle at 12% 18%, rgba(109, 211, 239, .16), transparent 26%),
    radial-gradient(circle at 86% 78%, rgba(4, 25, 45, .38), transparent 30%),
    linear-gradient(180deg, #0b4e6c 0%, #07334f 52%, #061f35 100%);
  --panel: rgba(21, 19, 26, 0.94);
  --panel2: rgba(33, 27, 35, 0.96);
  --line: rgba(255,255,255,.14);
  --ink: #f6efe4;
  --muted: #c8bcae;
  --gold: #f2b84b;
  --blue: #2d8cff;
  --blue2: #123d89;
  --red: #ed4a45;
  --red2: #76211f;
  --neutral: #a19585;
  --green: #7eb35f;
  --shadow: 0 18px 42px rgba(0,0,0,.38);
  --ui-midnight: #06111d;
  --ui-navy: #0b263b;
  --ui-navy-raised: #123b58;
  --ui-navy-soft: #194d6d;
  --ui-gold-dark: #805016;
  --ui-gold: #d3a13f;
  --ui-gold-bright: #f3d487;
  --ui-parchment: #ead9b5;
  --ui-border: rgba(211, 161, 63, .58);
  --ui-border-soft: rgba(211, 161, 63, .3);
  --ui-blue-border: rgba(135, 194, 224, .3);
  --ui-surface: linear-gradient(180deg, rgba(17, 52, 77, .98), rgba(5, 18, 31, .99));
  --ui-surface-raised: linear-gradient(180deg, rgba(22, 63, 91, .94), rgba(7, 27, 45, .97));
  --ui-inset: inset 0 0 0 1px rgba(255, 235, 174, .07);
  --ui-shadow: 0 22px 50px rgba(0, 0, 0, .48);
  --ui-radius: 7px;
  --ui-radius-small: 4px;
  --font-ui: "Cinzel", ui-serif, Georgia, "Times New Roman", serif;
  --font-display: "Cinzel Decorative", "Cinzel", ui-serif, Georgia, "Times New Roman", serif;
  --font-lore: "IM Fell English", ui-serif, Georgia, "Times New Roman", serif;
  --font-system: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --motion-ui-fast: 150ms;
  --motion-ui-open: 220ms;
  --motion-ui-close: 180ms;
  --motion-standard: 680ms;
  --motion-major: 1100ms;
  --motion-ease-out: cubic-bezier(.2, .76, .24, 1);
  --motion-ease-settle: cubic-bezier(.22, 1.18, .36, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overscroll-behavior: none; }
html:fullscreen,
html:fullscreen body {
  background: var(--ocean-bg);
}
body {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--ink);
  background: var(--ocean-bg);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
button, input { font: inherit; }
button { border: 0; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .42; cursor: not-allowed; }
input { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }

:where(
  button,
  input,
  label,
  .nav-btn,
  .hud-btn,
  .resource-pill,
  .city-wheel-action,
  .action-buttons button,
  .shop-buy-btn,
  .inventory-use-btn,
  .battle-report-filters button,
  .battle-report-back,
  .battle-report-detail-btn,
  .leaderboard-toolbar button,
  .profile-tabs button,
  .profile-icon-btn,
  .profile-primary-btn,
  .profile-secondary-btn,
  .profile-skill-reset button,
  .skill-row button,
  .offline-collect-btn
) {
  font-family: var(--font-ui);
}

:where(
  .modal-card h2,
  .panel-header strong,
  .city-list-main-name,
  .leaderboard-toolbar strong,
  .leaderboard-rank,
  .battle-report-result strong,
  .battle-report-detail-head strong,
  .profile-screen-header h2,
  .profile-name-row h3,
  .profile-section-heading h3,
  .flag-editor-preview h3
) {
  font-family: var(--font-display);
}

:where(
  .online-login small,
  .tiny-note,
  .modal-card p,
  .modal-card li,
  .shop-item-copy small,
  .inventory-selection-copy small,
  .inventory-selection-empty small,
  .profile-skill-reset small,
  .scout-breakdown-row > span small,
  .offline-lost-cities small
) {
  font-family: var(--font-lore);
  font-weight: 400;
}

:where(
  .profile-gold strong,
  .profile-xp,
  .profile-cap,
  .resource-pill strong,
  .city-label-level,
  .city-army-count,
  .foreign-selected-level,
  .foreign-garrison,
  .army-token,
  .kingdom-stat strong,
  .shop-balance strong,
  .inventory-summary strong,
  .leaderboard-power strong,
  .battle-report-troops strong,
  .scout-report-overview strong
) {
  font-variant-numeric: tabular-nums;
}

.phone-shell {
  position: relative;
  height: 100dvh;
  width: min(100vw, 520px);
  margin: 0 auto;
  background: var(--ocean-bg);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 80px rgba(0,0,0,.55);
}
.phone-shell:fullscreen {
  width: 100vw;
  height: 100vh;
  background: var(--ocean-bg);
}
.phone-shell:fullscreen::backdrop {
  background: var(--ocean-bg);
}
html:fullscreen::backdrop {
  background: var(--ocean-bg);
}

.setup-screen {
  --login-art-width: min(100vw, calc(100dvh * 4 / 3));
  --login-art-height: min(100dvh, calc(100vw * 3 / 4));
  position: absolute;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: end center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background:
    linear-gradient(180deg, rgba(3, 8, 16, .02) 0%, rgba(3, 8, 16, .18) 42%, rgba(3, 8, 16, .72) 100%),
    radial-gradient(circle at 50% 82%, rgba(10, 32, 54, .2), transparent 38%),
    url("assets/optimized/login-background-1448x1086-cec197d384ba.webp") center / contain no-repeat,
    #17110d;
}
.setup-screen.visible { display: grid; }
.setup-fullscreen-btn {
  position: absolute;
  z-index: 3;
  top: max(.75rem, env(safe-area-inset-top));
  right: max(.75rem, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  color: #fff6d0;
  background: linear-gradient(180deg, rgba(13, 35, 59, .84), rgba(5, 12, 23, .88));
  border: 1px solid rgba(255, 226, 147, .56);
  box-shadow: 0 10px 24px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(7px);
}
.discord-home-link {
  position: absolute;
  z-index: 3;
  left: calc((100vw - var(--login-art-width)) / 2 + max(.75rem, env(safe-area-inset-left)) + 54px);
  bottom: calc((100dvh - var(--login-art-height)) / 2 + max(.75rem, env(safe-area-inset-bottom)));
  display: grid;
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  place-items: center;
  color: #fff6d0;
  border: 1px solid rgba(255, 226, 147, .56);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(13, 35, 59, .84), rgba(5, 12, 23, .9));
  box-shadow: 0 10px 24px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(7px);
  transition: border-color .16s ease, color .16s ease, filter .16s ease, transform .16s ease;
}
.discord-home-link svg {
  width: 25px;
  height: 25px;
  fill: currentColor;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .7));
}
.discord-home-link:hover {
  color: #fff;
  border-color: #ffe7a4;
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.discord-home-link:focus-visible {
  outline: 3px solid rgba(130, 197, 255, .9);
  outline-offset: 3px;
}
.discord-home-link:active {
  transform: translateY(1px);
}
.login-music-mute-btn {
  position: absolute;
  z-index: 3;
  left: calc((100vw - var(--login-art-width)) / 2 + max(.75rem, env(safe-area-inset-left)));
  bottom: calc((100dvh - var(--login-art-height)) / 2 + max(.75rem, env(safe-area-inset-bottom)));
  display: grid;
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  place-items: center;
  padding: 0;
  color: #fff6d0;
  border: 1px solid rgba(255, 226, 147, .56);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(13, 35, 59, .84), rgba(5, 12, 23, .9));
  box-shadow: 0 10px 24px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(7px);
  font-size: 1.2rem;
  line-height: 1;
}
.login-music-mute-btn:hover {
  border-color: rgba(255, 226, 147, .82);
  filter: brightness(1.08);
}
.login-music-mute-btn[aria-pressed="true"] {
  color: #d9e7ef;
  border-color: rgba(185, 205, 221, .5);
  background: linear-gradient(180deg, rgba(31, 42, 55, .88), rgba(8, 13, 21, .92));
}
.setup-card {
  width: min(390px, calc(100vw - 2rem));
  margin-bottom: clamp(.75rem, 4vh, 2.5rem);
  padding: .82rem;
  border: 1px solid rgba(255, 226, 147, .28);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(8, 18, 31, .74), rgba(5, 10, 18, .9));
  box-shadow: 0 18px 46px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
.login-game-info {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: max(1rem, env(safe-area-inset-right));
  width: min(320px, 26vw);
  min-width: 250px;
  padding: 1rem;
  border: 1px solid rgba(255, 226, 147, .32);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(8, 23, 39, .88), rgba(4, 11, 20, .94));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .46), inset 0 0 0 1px rgba(255,255,255,.05);
  transform: translateY(-50%);
  backdrop-filter: blur(9px);
}
.login-game-info-eyebrow {
  display: block;
  color: #f2ca72;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.login-game-info h2 {
  margin: .4rem 0 .55rem;
  color: #fff0b4;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.2;
}
.login-game-info p {
  margin: 0;
  color: #d9e7ef;
  font-size: .84rem;
  line-height: 1.45;
}
.login-game-info ul {
  display: grid;
  gap: .48rem;
  margin: .75rem 0;
  padding: 0;
  list-style: none;
}
.login-game-info li {
  padding-left: .8rem;
  color: #b9cddd;
  font-family: var(--font-lore);
  font-size: .76rem;
  line-height: 1.38;
  border-left: 2px solid rgba(242, 202, 114, .48);
}
.login-game-info li strong {
  color: #f3e2bd;
}
.login-game-info > a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: .5rem .72rem;
  color: #261704;
  border-radius: 9px;
  background: linear-gradient(#ffe19a, #dc9a2d);
  font-size: .72rem;
  font-weight: 950;
  text-decoration: none;
}
@media (max-width: 1199px), (max-height: 699px), (max-aspect-ratio: 5/3) {
  .login-game-info {
    display: none !important;
  }
}
.loading-wheel {
  --loading-wheel-size: 104px;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--loading-wheel-size);
  height: var(--loading-wheel-size);
  isolation: isolate;
}
.loading-wheel[hidden] {
  display: none;
}
.loading-wheel img {
  display: block;
  pointer-events: none;
  user-select: none;
}
.loading-wheel-ring {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: loadingWheelSpin 1.35s linear infinite;
  filter: drop-shadow(0 0 12px rgba(85, 178, 255, .36)) drop-shadow(0 8px 9px rgba(0,0,0,.42));
}
.loading-wheel-crown {
  z-index: 2;
  width: 58%;
  height: 58%;
  object-fit: contain;
  animation: loadingCrownPulse 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 11px rgba(255, 217, 97, .42)) drop-shadow(0 6px 6px rgba(0,0,0,.36));
}
.menu-loading-wheel {
  --loading-wheel-size: 82px;
  margin: 0 auto .58rem;
}
.setup-screen.loading .setup-card {
  border-color: rgba(255, 226, 147, .46);
  box-shadow: 0 18px 46px rgba(0,0,0,.48), 0 0 28px rgba(76, 170, 255, .14), inset 0 0 0 1px rgba(255,255,255,.08);
}
@keyframes loadingWheelSpin {
  to { transform: rotate(360deg); }
}
@keyframes loadingCrownPulse {
  0%, 100% { transform: scale(.94); }
  50% { transform: scale(1.03); }
}
.eyebrow { color: var(--gold); font-size: .77rem; font-family: var(--font-ui); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: .25rem 0 .35rem; font-family: var(--font-display); font-size: 2.3rem; font-weight: 900; line-height: .94; }
h2,
h3 {
  font-family: var(--font-display);
}
p { color: var(--muted); font-family: var(--font-lore); line-height: 1.45; }
label { display: block; margin: 1rem 0 .35rem; color: #fff3c9; font-size: .84rem; font-weight: 900; }
input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 15px;
  padding: 0 .9rem;
  color: var(--ink);
  background: rgba(255,255,255,.08);
  outline: none;
}
.primary-btn, .ghost-btn {
  width: 100%;
  min-height: 48px;
  margin-top: .7rem;
  border-radius: 15px;
  font-weight: 950;
}
.primary-btn { color: #211508; background: linear-gradient(#ffd77c, #e99a26); box-shadow: 0 10px 24px rgba(0,0,0,.28); }
.ghost-btn { color: var(--ink); background: rgba(255,255,255,.09); border: 1px solid var(--line); }
.tiny-note { font-size: .78rem; margin-bottom: 0; }
.online-login {
  margin-top: 0;
  padding: .72rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  background: rgba(3, 9, 17, .42);
}
.online-login strong,
.online-login small {
  display: block;
}
.online-login small {
  margin-top: .18rem;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}
.server-realm-list {
  display: grid;
  gap: .42rem;
  margin-top: .72rem;
  padding-top: .62rem;
  border-top: 1px solid rgba(239, 205, 126, .22);
}
.server-realm-list[hidden] { display: none; }
.server-realm-heading {
  color: #efd17e;
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.server-realm-card {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: .68rem;
  padding: .42rem .68rem .42rem .48rem;
  color: #fff1c8;
  text-align: left;
  border: 1px solid rgba(235, 199, 112, .48);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(22, 54, 83, .96), rgba(6, 23, 40, .98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -3px 0 rgba(0,0,0,.18), 0 7px 16px rgba(0,0,0,.3);
}
.server-realm-card.selected {
  border-color: #f1cc70;
  box-shadow: 0 0 0 1px rgba(241, 204, 112, .22), 0 0 18px rgba(83, 157, 211, .2), inset 0 1px 0 rgba(255,255,255,.12);
}
.server-realm-card:disabled { opacity: .72; }
.server-realm-card strong {
  min-width: 0;
  overflow: hidden;
  color: #fff0bd;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.server-realm-crest {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #2b1905;
  border: 1px solid #f6dc91;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #fff1ac, #d59a32 58%, #74420e);
  box-shadow: inset 0 0 0 2px rgba(77, 40, 5, .28), 0 4px 8px rgba(0,0,0,.34);
  font-family: Georgia, serif;
  font-size: 1.55rem;
  line-height: 1;
}
.server-queue-status {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .48rem;
  color: #d9e9f4;
  font-size: .76rem;
}
.server-queue-status[hidden] { display: none; }
.server-queue-status strong { color: #d9e9f4; }
.server-queue-spinner {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid rgba(217, 233, 244, .28);
  border-top-color: #f1cc70;
  border-radius: 50%;
  animation: loadingWheelSpin .9s linear infinite;
}
.online-login-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: .38rem;
}
.public-site-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .22rem .62rem;
  margin-top: .62rem;
}
.public-site-links a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 .25rem;
  color: #cfe9ff;
  font-size: .66rem;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: .18em;
}
.public-site-links a:hover,
.public-site-links a:focus-visible {
  color: #fff0a7;
}
.online-login .ghost-btn,
.online-login .primary-btn {
  min-height: 44px;
  margin-top: .55rem;
  border-radius: 12px;
}
#googleSignInBtn {
  color: #102033;
  background: rgba(250, 252, 255, .96);
  border-color: rgba(255,255,255,.72);
}
#googleSignInBtn::before {
  content: "G";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: .45rem;
  border-radius: 999px;
  color: #1f63d6;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(16,32,51,.12);
  font-family: var(--font-system);
  font-weight: 1000;
}

.game-view { position: absolute; inset: 0; }
.top-hud {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: 0;
  padding: calc(.65rem + env(safe-area-inset-top)) .7rem .45rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  pointer-events: none;
}
.profile-chip, .resource-pill, .hud-btn {
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(16,15,22,.88);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.profile-chip {
  min-width: 142px;
  max-width: 55%;
  height: 44px;
  padding: .25rem .55rem;
  border-radius: 16px;
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: .45rem;
}
.crown-icon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(#ffd876,#b96c1d); color: #211508; font-weight: 950; }
.profile-chip strong, .profile-chip small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.profile-chip strong { font-size: .86rem; }
.profile-chip small { color: var(--muted); font-size: .68rem; }
.resource-bar { display: flex; align-items: center; gap: .35rem; }
.shop-btn {
  width: 64px;
  height: 64px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
  overflow: visible;
}
.shop-btn:active { transform: translateY(1px); }
.shop-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 7px 10px rgba(0,0,0,.42));
}
.resource-pill { min-width: 70px; height: 38px; border-radius: 999px; padding: 0 .55rem; display: flex; align-items: center; justify-content: center; gap: .25rem; }
.resource-pill strong { font-size: .92rem; }
.city-list-btn { color: var(--ink); }
.bag-btn:active,
.city-list-btn:active,
.island-switch-btn:active { transform: translateY(1px); }
.resource-pill.bag-btn,
.resource-pill.shop-btn,
.resource-pill.city-list-btn,
.resource-pill.island-switch-btn {
  position: absolute;
  z-index: 55;
  bottom: max(.75rem, env(safe-area-inset-bottom));
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  overflow: visible;
}
.resource-pill.bag-btn {
  right: calc(max(.75rem, env(safe-area-inset-right)) + 228px);
}
.resource-pill.shop-btn {
  right: calc(max(.75rem, env(safe-area-inset-right)) + 152px);
}
.resource-pill.city-list-btn {
  right: calc(max(.75rem, env(safe-area-inset-right)) + 76px);
}
.resource-pill.island-switch-btn {
  right: max(.75rem, env(safe-area-inset-right));
}
.active-item-effects-stack {
  --effect-badge-size: 66px;
  --effect-icon-size: 58px;
  --effect-timer-font: .68rem;
  --effect-stack-gap: .5rem;
  position: absolute;
  z-index: 56;
  right: max(.72rem, env(safe-area-inset-right));
  top: 50%;
  display: grid;
  gap: var(--effect-stack-gap);
  justify-items: end;
  transform: translateY(-50%);
  pointer-events: none;
  max-height: calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.effect-status-badge {
  width: var(--effect-badge-size);
  min-height: calc(var(--effect-badge-size) * 1.24);
  display: grid;
  grid-template-rows: var(--effect-icon-size) auto;
  justify-items: center;
  gap: .22rem;
  padding: .26rem .24rem .34rem;
  border-radius: 16px;
  color: #fff5c8;
  background:
    radial-gradient(circle at 50% 30%, rgba(83, 193, 255, .22), transparent 55%),
    linear-gradient(180deg, rgba(6, 23, 43, .64), rgba(5, 14, 26, .82));
  border: 1px solid rgba(246,190,82,.48);
  box-shadow: 0 10px 24px rgba(0,0,0,.36), 0 0 22px rgba(79,177,255,.34);
}
.war-drums-status-badge {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 188, 70, .22), transparent 55%),
    linear-gradient(180deg, rgba(44, 24, 7, .66), rgba(15, 13, 22, .84));
  border-color: rgba(255, 206, 106, .56);
  box-shadow: 0 10px 24px rgba(0,0,0,.36), 0 0 22px rgba(255, 177, 60, .3);
}
.tax-decree-status-badge {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 223, 126, .24), transparent 55%),
    linear-gradient(180deg, rgba(55, 37, 10, .7), rgba(18, 14, 8, .86));
  border-color: rgba(255, 223, 139, .62);
  box-shadow: 0 10px 24px rgba(0,0,0,.36), 0 0 22px rgba(255, 210, 89, .3);
}
.veil-status-badge {
  background:
    radial-gradient(circle at 50% 30%, rgba(139, 91, 255, .24), transparent 55%),
    linear-gradient(180deg, rgba(24, 15, 42, .72), rgba(8, 10, 24, .86));
  border-color: rgba(186, 154, 255, .56);
  box-shadow: 0 10px 24px rgba(0,0,0,.36), 0 0 22px rgba(135, 98, 255, .32);
}
.effect-status-badge[hidden] {
  display: none;
}
.effect-status-icon {
  width: var(--effect-icon-size);
  height: var(--effect-icon-size);
  display: block;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 0 18px rgba(84, 202, 255, .45), 0 7px 14px rgba(0,0,0,.36);
}
.war-drums-status-icon {
  box-shadow: 0 0 18px rgba(255, 186, 78, .42), 0 7px 14px rgba(0,0,0,.36);
}
.tax-decree-status-icon {
  box-shadow: 0 0 18px rgba(255, 221, 118, .44), 0 7px 14px rgba(0,0,0,.36);
}
.veil-status-icon {
  box-shadow: 0 0 18px rgba(153, 119, 255, .42), 0 7px 14px rgba(0,0,0,.36);
}
.effect-status-badge strong {
  min-width: 0;
  max-width: 100%;
  color: #fff4b8;
  font-size: var(--effect-timer-font);
  font-weight: 1000;
  line-height: 1;
  padding: .18rem .28rem;
  border-radius: 999px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(4, 13, 25, .82);
  border: 1px solid rgba(246,190,82,.38);
  box-shadow: 0 3px 8px rgba(0,0,0,.28);
}
.active-item-effects-stack.compact {
  --effect-badge-size: 54px;
  --effect-icon-size: 45px;
  --effect-timer-font: .56rem;
  --effect-stack-gap: .26rem;
  top: calc(50% - 20px);
}
.active-item-effects-stack.compact .effect-status-badge {
  min-height: calc(var(--effect-badge-size) * 1.12);
  gap: .12rem;
  padding: .16rem .14rem .2rem;
  border-radius: 12px;
  box-shadow: 0 7px 16px rgba(0,0,0,.32), 0 0 14px rgba(79,177,255,.24);
}
.active-item-effects-stack.compact .effect-status-icon {
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(84, 202, 255, .34), 0 5px 10px rgba(0,0,0,.3);
}
.active-item-effects-stack.compact .war-drums-status-icon {
  box-shadow: 0 0 12px rgba(255, 186, 78, .32), 0 5px 10px rgba(0,0,0,.3);
}
.active-item-effects-stack.compact .tax-decree-status-icon {
  box-shadow: 0 0 12px rgba(255, 221, 118, .34), 0 5px 10px rgba(0,0,0,.3);
}
.active-item-effects-stack.compact .veil-status-icon {
  box-shadow: 0 0 12px rgba(153, 119, 255, .32), 0 5px 10px rgba(0,0,0,.3);
}
.active-item-effects-stack.compact .effect-status-badge strong {
  padding: .12rem .18rem;
}
.active-item-effects-stack.dense {
  --effect-badge-size: 48px;
  --effect-icon-size: 40px;
  --effect-timer-font: .5rem;
  --effect-stack-gap: .18rem;
}
.city-list-icon,
.bag-icon,
.island-switch-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.island-switch-btn span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.island-switch-btn[hidden] { display: none; }
.hud-btn { width: 38px; height: 38px; border-radius: 13px; color: var(--ink); font-weight: 950; }
.fullscreen-btn.active { color: #211508; background: linear-gradient(#fff0a7, #f2b84b); }

.main-city-return {
  position: absolute;
  z-index: 54;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #f8d77e;
  background: linear-gradient(180deg, #173d5a, #061724);
  border: 2px solid rgba(232, 188, 91, .82);
  box-shadow: 0 10px 22px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255, 238, 177, .16), inset 0 -4px 0 rgba(0,0,0,.28);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.main-city-return[hidden] { display: none; }
.main-city-return-house {
  position: relative;
  z-index: 2;
  font-size: 1.18rem;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0,0,0,.72), 0 0 8px rgba(255, 220, 126, .32);
}
.main-city-return-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #ffe29a;
  font-size: .88rem;
  text-shadow: 0 2px 0 rgba(0,0,0,.55);
  transform: translate(-50%, -50%) rotate(var(--main-city-angle, 0deg)) translateX(21px);
  transform-origin: center;
}
.main-city-return:active {
  transform: translate(-50%, -50%) scale(.95);
}
.main-city-return.hud-home-return {
  position: static;
  z-index: auto;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  transform: none;
  flex: 0 0 auto;
}
.main-city-return.hud-home-return .main-city-return-arrow {
  display: none;
}
.main-city-return.hud-home-return:active {
  transform: translateY(1px);
}

.map-frame { position: absolute; inset: 0 0 164px 0; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab; background: var(--ocean-bg); }
.map-frame.dragging { cursor: grabbing; }
.citadel-assault-countdown {
  position: static;
  flex: 0 1 clamp(84px, 15vw, 126px);
  width: clamp(84px, 15vw, 126px);
  min-width: 84px;
  max-width: 126px;
  height: 44px;
  min-height: 44px;
  padding: 3px 6px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  border: 1px solid rgba(255, 213, 111, .72);
  border-radius: 10px;
  color: #fff3ca;
  background: linear-gradient(180deg, rgba(55, 34, 14, .96), rgba(25, 15, 8, .94));
  box-shadow: 0 5px 14px rgba(0,0,0,.4), inset 0 0 12px rgba(255, 194, 72, .08);
  pointer-events: none;
  white-space: nowrap;
}
.citadel-assault-countdown[hidden] { display: none; }
.citadel-assault-countdown span {
  display: inline-flex;
  align-items: center;
  color: #ffd66e;
  font-size: .48rem;
  font-weight: 950;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
}
.citadel-assault-countdown span::before {
  content: "\2694";
  margin-right: 3px;
  color: #fff0b0;
  font-size: .58rem;
}
.citadel-assault-countdown strong {
  color: #fff;
  font-size: .68rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.citadel-assault-countdown small {
  display: none;
}
.citadel-assault-countdown.imminent {
  border-color: rgba(255, 91, 75, .92);
  background: linear-gradient(180deg, rgba(105, 25, 20, .97), rgba(43, 11, 9, .96));
  box-shadow: 0 5px 16px rgba(0,0,0,.44), 0 0 14px rgba(255, 69, 53, .3);
  animation: citadelAssaultWarningPulse 1.2s ease-in-out infinite alternate;
}
.citadel-assault-countdown.imminent span,
.citadel-assault-countdown.imminent small { color: #ffd2cc; }
@keyframes citadelAssaultWarningPulse {
  from { filter: brightness(.96); }
  to { filter: brightness(1.14); }
}
.map-frame.map-switching {
  cursor: wait;
  background:
    radial-gradient(circle at 50% 45%, rgba(63, 78, 78, .24), transparent 46%),
    linear-gradient(180deg, #101b20 0%, #071218 100%);
}

@media (max-width: 360px) {
  .citadel-assault-countdown {
    min-width: 78px;
    width: 78px;
    padding-inline: 4px;
  }
}
@media (max-height: 430px) and (orientation: landscape) {
  .citadel-assault-countdown {
    height: 40px;
    min-height: 40px;
  }
}
.map-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: none;
  place-items: center;
  background: transparent;
  pointer-events: none;
}
.map-frame.map-switching .map-loading-overlay {
  display: grid;
}
.map-frame.map-switching .map-loading-panel {
  opacity: 0;
  animation: crownlandsMapLoadingPanelIn 160ms ease 650ms forwards;
}
@keyframes crownlandsMapLoadingPanelIn {
  from { opacity: 0; transform: translate3d(0, 3px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.map-loading-panel {
  display: grid;
  justify-items: center;
  gap: .48rem;
  min-width: min(230px, calc(100% - 2rem));
  padding: .8rem .96rem .82rem;
  border: 1px solid rgba(151, 216, 255, .38);
  border-radius: 16px;
  color: #eaf8ff;
  background: rgba(5, 20, 34, .88);
  box-shadow: 0 18px 46px rgba(0,0,0,.42), 0 0 26px rgba(79, 177, 255, .18);
  text-align: center;
}
.map-loading-wheel {
  --loading-wheel-size: 108px;
}
.map-loading-label {
  display: block;
  max-width: 260px;
  color: #eaf8ff;
  font-size: .82rem;
  font-weight: 950;
  line-height: 1.2;
}
.map-world {
  position: absolute;
  left: 0;
  top: 0;
  width: 10000px;
  height: 7600px;
  transform-origin: 0 0;
  contain: layout style;
  backface-visibility: hidden;
}
.map-frame.camera-moving .map-world,
.map-frame.dragging .map-world,
.map-frame.zooming .map-world {
  will-change: transform;
}
.map-bg {
  position: absolute; inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 45%, rgba(141, 211, 255, .2), transparent 39%),
    radial-gradient(circle at 16% 20%, rgba(255,255,255,.09), transparent 24%),
    radial-gradient(circle at 84% 78%, rgba(6, 28, 50, .25), transparent 28%),
    linear-gradient(180deg, #347fb1 0%, #236996 46%, #174f7d 100%);
}
.map-bg.west-image-map,
.map-bg.north-image-map,
.map-bg.east-image-map,
.map-bg.south-image-map,
.map-bg.center-image-map {
  background: #082f43;
}
.map-bg.west-image-map::before,
.map-bg.north-image-map::before,
.map-bg.east-image-map::before,
.map-bg.south-image-map::before,
.map-bg.center-image-map::before,
.map-bg.image-map-ready::before {
  opacity: 0;
}
.island-art-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}
.island-art-map.active {
  opacity: 1;
}
.island-art-map.retiring {
  display: none;
}
.world-map-svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}
.map-bg::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, transparent 55%, rgba(0,0,0,.24) 100%),
    repeating-linear-gradient(24deg, rgba(255,255,255,.055) 0 3px, transparent 3px 54px),
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 22%, rgba(6,22,38,.12) 74%, transparent);
  mix-blend-mode: screen;
  opacity: .82;
}
.world-sea-sparkle {
  fill: rgba(235, 250, 255, .58);
  filter: drop-shadow(0 0 5px rgba(255,255,255,.35));
}
.world-sea-ripple {
  fill: none;
  stroke: rgba(229, 249, 255, .36);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 16 30;
}
.world-shore-glow {
  fill: none;
  stroke: rgba(255, 244, 181, .42);
  stroke-width: 92;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: url(#worldShoreGlow);
}
.world-beach {
  fill: none;
  stroke: rgba(245, 221, 145, .88);
  stroke-width: 48;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.world-shore-line {
  fill: none;
  stroke: rgba(255, 249, 207, .9);
  stroke-width: 16;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.world-land {
  stroke: rgba(59, 109, 54, .6);
  stroke-width: 8;
  filter: url(#worldLandShadow);
}
.world-land.heartland { fill: url(#landHeartland); }
.world-land.pine { fill: url(#landPine); }
.world-land.marsh { fill: url(#landMarsh); }
.world-land.woodland { fill: url(#landWoodland); }
.world-land.golden { fill: url(#landGolden); }
.world-causeway {
  fill: none;
  stroke: url(#causewayGradient);
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#worldLandShadow);
}
.world-causeway-shore {
  fill: none;
  stroke: rgba(255, 239, 176, .82);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.world-meadow {
  fill: rgba(185, 213, 113, .28);
  stroke: rgba(255,255,255,.08);
  stroke-width: 3;
}
.world-hill {
  fill: none;
  stroke: rgba(73, 116, 60, .23);
  stroke-width: 10;
  stroke-linecap: round;
}
.world-center-clearing {
  fill: rgba(189, 217, 128, .24);
  stroke: rgba(255, 245, 182, .18);
  stroke-width: 5;
}
.world-forest {
  fill: rgba(29, 100, 54, .46);
  stroke: rgba(17, 70, 41, .34);
  stroke-width: 6;
  filter: url(#worldTerrainShadow);
}
.world-swamp {
  fill: rgba(83, 127, 86, .48);
  stroke: rgba(57, 91, 70, .34);
  stroke-width: 6;
  filter: url(#worldTerrainShadow);
}
.world-mountain {
  fill: url(#mountainGradient);
  stroke: rgba(71, 60, 51, .52);
  stroke-width: 7;
  filter: drop-shadow(0 18px 18px rgba(22,28,24,.24));
}
.map-frame.camera-moving .world-sea-sparkle,
.map-frame.camera-moving .world-shore-glow,
.map-frame.camera-moving .world-land,
.map-frame.camera-moving .world-causeway,
.map-frame.camera-moving .world-forest,
.map-frame.camera-moving .world-swamp,
.map-frame.camera-moving .world-mountain,
.map-frame.zooming .world-sea-sparkle,
.map-frame.zooming .world-shore-glow,
.map-frame.zooming .world-land,
.map-frame.zooming .world-causeway,
.map-frame.zooming .world-forest,
.map-frame.zooming .world-swamp,
.map-frame.zooming .world-mountain,
.map-frame.low-zoom .world-sea-sparkle,
.map-frame.low-zoom .world-shore-glow,
.map-frame.low-zoom .world-land,
.map-frame.low-zoom .world-causeway,
.map-frame.low-zoom .world-forest,
.map-frame.low-zoom .world-swamp,
.map-frame.low-zoom .world-mountain {
  filter: none;
}
.map-frame.camera-moving .map-bg::before,
.map-frame.zooming .map-bg::before,
.map-frame.low-zoom .map-bg::before {
  mix-blend-mode: normal;
  opacity: .45;
}
.world-region-label {
  fill: rgba(255, 247, 215, .78);
  font-size: 88px;
  font-weight: 950;
  letter-spacing: 0;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(8, 22, 32, .54);
  stroke-width: 12px;
}
.island-land {
  position: absolute;
  left: 0; top: 0; width: 10000px; height: 7600px;
  clip-path: polygon(50% 4.5%, 71.8% 8.5%, 88.2% 21.5%, 96.6% 43%, 93% 64.25%, 80.7% 84.75%, 61.1% 95.75%, 37.9% 92%, 18% 80.25%, 6.6% 59%, 12.3% 33%, 26.1% 13.5%);
  background:
    radial-gradient(circle at 27% 72%, rgba(255,226,133,.22), transparent 17%),
    radial-gradient(circle at 70% 22%, rgba(139,91,48,.24), transparent 18%),
    radial-gradient(circle at 48% 63%, rgba(47,119,58,.45), transparent 23%),
    linear-gradient(135deg, #83a864, #638d4f 48%, #406a3d);
  box-shadow: inset 0 0 0 18px rgba(241,217,150,.55), inset 0 0 65px rgba(29,53,26,.35), 0 0 46px rgba(246,222,150,.33);
}
.island-land::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(35,74,31,.42) 1.5px, transparent 1.7px),
    linear-gradient(45deg, rgba(255,255,255,.045) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.045) 75%);
  background-size: 24px 24px, 42px 42px;
  opacity: .36;
}
.shore-glow {
  position: absolute; left: 0; top: 0; width: 10000px; height: 7600px;
  clip-path: polygon(50% 4.5%, 71.8% 8.5%, 88.2% 21.5%, 96.6% 43%, 93% 64.25%, 80.7% 84.75%, 61.1% 95.75%, 37.9% 92%, 18% 80.25%, 6.6% 59%, 12.3% 33%, 26.1% 13.5%);
  pointer-events: none;
  box-shadow: inset 0 0 0 34px rgba(255,238,171,.28);
}
.terrain { position: absolute; pointer-events: none; }
.lake {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7fd9ff, #2f88b8 62%, #1a5e85 100%);
  border: 10px solid rgba(236,219,153,.72);
  box-shadow: inset 0 8px 22px rgba(255,255,255,.18), 0 10px 22px rgba(20,48,44,.28);
  opacity: .95;
}
.lake-a { left: 680px; top: 700px; width: 380px; height: 240px; transform: rotate(-8deg); }
.lake-b { left: 1570px; top: 880px; width: 460px; height: 280px; transform: rotate(9deg); }
.lake-c { left: 1220px; top: 1355px; width: 340px; height: 190px; transform: rotate(-12deg); }
.mountain {
  border-radius: 50%;
  background:
    radial-gradient(circle at 43% 29%, rgba(255,255,255,.65), transparent 10%),
    repeating-linear-gradient(118deg, rgba(45,37,32,.35) 0 20px, rgba(111,95,79,.24) 20px 36px),
    radial-gradient(circle at 50% 50%, #8f806a, #55483d 70%);
  border: 8px solid rgba(68,55,47,.65);
  box-shadow: inset 0 0 28px rgba(0,0,0,.28), 0 14px 25px rgba(0,0,0,.22);
  opacity: .94;
}
.ridge-a { left: 1050px; top: 495px; width: 640px; height: 310px; transform: rotate(-5deg); }
.ridge-b { left: 680px; top: 1145px; width: 500px; height: 270px; transform: rotate(37deg); }
.ridge-c { left: 1775px; top: 440px; width: 410px; height: 260px; transform: rotate(14deg); }
.ridge-d { left: 460px; top: 405px; width: 320px; height: 230px; transform: rotate(-20deg); }
.paths { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.paths .army-route-ribbon {
  stroke: none;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.26));
}
.paths .army-route-flow {
  fill: none;
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 18 16;
  animation: dash 1.1s linear infinite;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}
.map-frame.camera-moving .paths .army-route-ribbon,
.map-frame.zooming .paths .army-route-ribbon,
.map-frame.low-zoom .paths .army-route-ribbon,
.map-frame.crowded-map .paths .army-route-ribbon,
.map-frame.camera-moving .paths .army-route-flow,
.map-frame.zooming .paths .army-route-flow,
.map-frame.low-zoom .paths .army-route-flow,
.map-frame.crowded-map .paths .army-route-flow {
  animation: none;
  filter: none;
}
.paths .army-route-ribbon.player-route { fill: rgba(45, 151, 255, .9); }
.paths .army-route-ribbon.enemy-route { fill: rgba(239, 62, 57, .88); }
.paths .army-route-ribbon.clan-support-route { fill: rgba(43, 139, 70, .9); }
.paths .army-route-ribbon.clan-hostile-route { fill: rgba(239, 62, 57, .88); }
.paths .army-route-flow.player-route { stroke: rgba(125, 207, 255, .98); }
.paths .army-route-flow.enemy-route { stroke: rgba(255, 139, 126, .98); }
.paths .army-route-flow.clan-support-route { stroke: rgba(143, 226, 165, .98); }
.paths .army-route-flow.clan-hostile-route { stroke: rgba(143, 226, 165, .98); }
.paths .army-route-flow.scout-route { stroke-dasharray: 8 15; }
@keyframes dash { to { stroke-dashoffset: -12; } }
.harvest-layer,
.portal-layer,
.city-layer,
.army-layer { position: absolute; left: 0; top: 0; width: 10000px; height: 7600px; }
.harvest-layer {
  z-index: 12;
  pointer-events: none;
}
.portal-layer {
  z-index: 14;
  pointer-events: none;
}
.city-layer {
  z-index: 16;
  pointer-events: none;
}
.army-layer {
  z-index: 18;
  pointer-events: none;
}
.harvest-bonus-node {
  position: absolute;
  width: 66px;
  height: 66px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: transparent;
  background: transparent;
  box-shadow: none;
  font-size: 0;
  line-height: 1;
  text-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  animation: harvestPulse 1.55s ease-in-out infinite;
}
.harvest-bonus-node::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 103, .64), rgba(255, 178, 50, .34) 48%, transparent 72%);
  box-shadow: 0 0 16px rgba(255, 212, 84, .8), 0 0 34px rgba(255, 170, 45, .48);
  pointer-events: none;
}
.harvest-bonus-node::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(255, 236, 146, .42);
  animation: harvestRing 1.55s ease-out infinite;
  pointer-events: none;
}
.harvest-bonus-node > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}
.harvest-bonus-icon {
  display: block;
  width: 58px;
  height: 58px;
  border-radius: 0;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 0 7px rgba(255, 226, 103, .8)) drop-shadow(0 4px 4px rgba(0,0,0,.42));
}
.harvest-bonus-node.harvest-bonus-troops {
  color: #ffe8e4;
}
.harvest-bonus-node.harvest-bonus-troops::before {
  background: radial-gradient(circle, rgba(255, 92, 76, .62), rgba(198, 38, 34, .36) 48%, transparent 72%);
  box-shadow: 0 0 16px rgba(255, 92, 76, .78), 0 0 34px rgba(198, 38, 34, .5);
}
.harvest-bonus-node.harvest-bonus-troops::after {
  border-color: rgba(255, 148, 132, .48);
}
.harvest-bonus-node.harvest-bonus-troops .harvest-bonus-icon {
  filter: drop-shadow(0 0 7px rgba(255, 92, 76, .82)) drop-shadow(0 4px 4px rgba(0,0,0,.42));
}
.harvest-bonus-node:active {
  transform: translate(-50%, -50%) scale(.92);
}
@keyframes harvestPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}
@keyframes harvestRing {
  0% { transform: scale(.68); opacity: .7; }
  100% { transform: scale(1.22); opacity: 0; }
}
.teleport-node {
  --teleport-render-scale: 1.14;
  position: absolute;
  width: calc(var(--teleport-size, 96px) * var(--teleport-render-scale));
  height: calc(var(--teleport-size, 96px) * var(--teleport-render-scale));
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: #f8fbff;
  background: transparent;
  box-shadow: none;
  filter:
    drop-shadow(0 9px 5px rgba(2, 10, 25, .78))
    drop-shadow(0 0 4px rgba(255, 244, 175, .78))
    drop-shadow(0 0 9px rgba(76, 205, 255, .42))
    drop-shadow(0 0 16px rgba(35, 116, 255, .24));
  pointer-events: auto;
  z-index: 20;
  padding: 0;
}
.teleport-node::before {
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 139, .28), rgba(70, 197, 255, .14) 43%, rgba(24, 92, 255, .06) 62%, transparent 76%);
  filter: blur(4px);
  pointer-events: none;
}
.teleport-node::after {
  content: none;
}
.teleport-node:active {
  transform: translate(-50%, calc(-50% + 3px)) scale(.96);
  filter:
    drop-shadow(0 5px 4px rgba(2, 10, 25, .72))
    drop-shadow(0 0 3px rgba(255, 244, 175, .72))
    drop-shadow(0 0 7px rgba(76, 205, 255, .36))
    drop-shadow(0 0 13px rgba(35, 116, 255, .22));
}
.teleport-arrow-icon {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 50%;
  pointer-events: none;
  user-select: none;
}
.edge-transition-north .teleport-arrow-icon {
  transform: rotate(-90deg);
}
.edge-transition-south .teleport-arrow-icon {
  transform: rotate(90deg);
}
.edge-transition-west .teleport-arrow-icon {
  transform: rotate(180deg);
}
.edge-transition-east .teleport-arrow-icon {
  transform: rotate(0deg);
}
.teleport-label {
  position: absolute;
  left: 50%;
  bottom: calc(var(--teleport-size, 96px) * -.32);
  transform: translateX(-50%);
  padding: .12rem .42rem;
  border-radius: 999px;
  color: #dff8ff;
  background: rgba(4, 21, 48, .86);
  border: 1px solid rgba(190, 238, 255, .58);
  font-size: .58rem;
  font-weight: 1000;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,.7);
}
.map-frame.zooming .teleport-node,
.map-frame.low-zoom .teleport-node {
  filter:
    drop-shadow(0 7px 4px rgba(2, 10, 25, .72))
    drop-shadow(0 0 3px rgba(255, 244, 175, .72))
    drop-shadow(0 0 7px rgba(76, 205, 255, .36))
    drop-shadow(0 0 14px rgba(35, 116, 255, .22));
}

.camp-node {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--camp-size, 132px);
  height: var(--camp-size, 132px);
  transform: translate(-50%, -58%);
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  z-index: 4;
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .42));
}
.camp-node:not(.decorative)::before,
.city-node::after,
.army-token::before,
.city-wheel-action::before,
.gold-camp-wheel-action::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--map-hit-size, 44px);
  height: var(--map-hit-size, 44px);
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
}
.camp-node.decorative::before,
.army-token.endpoint-clearance::before { pointer-events: none; }
.map-world,
.map-bg,
.harvest-layer,
.portal-layer,
.city-layer,
.army-layer,
.city-node,
.city-action-wheel,
.camp-node,
.gold-camp-action-wheel,
.teleport-node,
.harvest-bonus-node {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.map-frame img,
.map-frame picture,
.map-frame canvas {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.camp-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.camp-node.selected,
.camp-node.attackable,
.camp-node.supportable {
  z-index: 27;
}
.camp-node.decorative {
  pointer-events: none;
  cursor: default;
}
.camp-node.selected .camp-art {
  filter: drop-shadow(0 0 7px rgba(255, 235, 149, .98)) drop-shadow(0 0 16px rgba(74, 181, 255, .86));
}
.camp-node.attackable .camp-art {
  filter: drop-shadow(0 0 8px rgba(255, 83, 83, .95));
}
.camp-node.supportable .camp-art {
  filter: drop-shadow(0 0 8px rgba(83, 226, 137, .95));
}
.gold-camp-label {
  position: absolute;
  left: 50%;
  top: calc(100% - 20px);
  width: max-content;
  max-width: 190px;
  transform: translateX(-50%);
  display: block;
  min-width: 94px;
  padding: 6px 15px 7px;
  border: 2px solid #c89736;
  border-radius: 3px;
  background: linear-gradient(180deg, #173d62 0%, #071b30 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 235, 168, .24), 0 4px 9px rgba(0, 0, 0, .62);
  font-family: "Cinzel", Georgia, serif;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.gold-camp-label strong {
  color: #ffe29a;
  font-size: .74rem;
  text-shadow: 0 1px 2px #000;
}
.gold-camp-active-timer {
  position: absolute;
  left: 50%;
  top: calc(100% - 47px);
  min-width: 86px;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  padding: 3px 11px 4px;
  border: 1px solid #e0ad45;
  color: #fff4c7;
  background: linear-gradient(180deg, rgba(105, 31, 27, .96), rgba(52, 13, 17, .97));
  box-shadow: inset 0 0 0 1px rgba(255, 224, 141, .14), 0 3px 7px rgba(0, 0, 0, .58);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
  font-family: "Cinzel", Georgia, serif;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.gold-camp-active-timer[hidden] {
  display: none;
}
.gold-camp-active-timer small {
  color: #f1bf63;
  font-size: .48rem;
  font-weight: 800;
  text-transform: uppercase;
}
.gold-camp-active-timer strong {
  font-size: .62rem;
  text-shadow: 0 1px 2px #000;
}
.gold-camp-action-wheel {
  position: absolute;
  z-index: 30;
  width: var(--camp-wheel-size, 132px);
  height: var(--camp-wheel-size, 132px);
  transform: translate(-50%, -58%);
  pointer-events: none;
}
.stronghold-objective-action-wheel {
  transform: translate(-50%, -62%);
}
.stronghold-objective-action-wheel.crown-objective-action-wheel {
  z-index: 31;
}
.gold-camp-wheel-action {
  position: absolute;
  top: calc(100% - 3px);
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 5px 3px 4px;
  border: 2px solid #d4a443;
  border-radius: 4px;
  color: #fff8d4;
  background: linear-gradient(180deg, #245c88, #0b2946);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 167, .2), 0 5px 9px rgba(0, 0, 0, .62);
  font-family: "Cinzel", Georgia, serif;
  pointer-events: auto;
}
.gold-camp-wheel-action:hover:not(:disabled),
.gold-camp-wheel-action:focus-visible {
  filter: brightness(1.16);
  border-color: #ffe39a;
}
.gold-camp-wheel-action > span {
  font-size: 1.05rem;
  line-height: 1;
}
.gold-camp-wheel-action strong {
  max-width: 100%;
  font-size: .52rem;
  line-height: 1;
  overflow-wrap: anywhere;
}
.gold-camp-wheel-action:disabled {
  filter: grayscale(.75);
  opacity: .72;
}
.camp-scout-action,
.camp-recall-action {
  left: calc(50% - var(--camp-action-offset, 92px));
}
.camp-recall-action {
  background: linear-gradient(180deg, #7a3d28, #351615);
}
.camp-order-action {
  left: calc(50% + var(--camp-action-offset, 92px));
  background: linear-gradient(180deg, #9c671e, #4a2b0b);
}
.camp-info-action {
  left: 50%;
  top: calc(100% + 48px);
}
.camp-report-action {
  left: calc(50% + var(--camp-action-offset, 92px));
  top: calc(100% + 48px);
  background: linear-gradient(180deg, #4b5579, #171e39);
}
.camp-rally-action {
  left: calc(50% - var(--camp-action-offset, 92px));
  top: calc(100% + 48px);
  border-color: #e8c064;
  color: #fff6d1;
  background: linear-gradient(180deg, #7b4f9c, #34204e);
}
.gold-camp-info-panel {
  display: grid;
  gap: 12px;
}
.camp-info-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) 48px;
  gap: 7px;
  padding: 5px;
  border: 1px solid rgba(207, 158, 62, .55);
  border-radius: 6px;
  background: rgba(4, 18, 32, .78);
  box-shadow: inset 0 0 0 1px rgba(255, 235, 169, .06);
}
.citadel-info-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.camp-info-tab {
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #bfd4e2;
  background: transparent;
  font-family: "Cinzel", Georgia, serif;
  font-size: .82rem;
  font-weight: 900;
}
.camp-info-tab:hover,
.camp-info-tab:focus-visible {
  color: #fff0ba;
  border-color: rgba(231, 189, 94, .44);
}
.camp-info-tab.active {
  color: #1c1206;
  border-color: #ffdf86;
  background: linear-gradient(180deg, #ffdb79, #c98725);
  box-shadow: inset 0 0 0 1px rgba(255, 250, 211, .45), 0 3px 8px rgba(0, 0, 0, .28);
}
.camp-rules-tab {
  font-size: 1.08rem;
}
.camp-info-tab-panel[hidden] {
  display: none;
}
.camp-info-tab-panel {
  display: grid;
  gap: 10px;
}
.citadel-reign-ledger {
  display: grid;
  gap: 7px;
}
.citadel-reign-heading,
.citadel-reign-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(100px, auto);
  align-items: center;
  gap: 10px;
}
.citadel-reign-heading {
  padding: 0 10px;
  color: #9ebbd0;
  font-size: .64rem;
  font-weight: 900;
  text-transform: uppercase;
}
.citadel-reign-heading span:last-child {
  text-align: right;
}
.citadel-reign-list {
  display: grid;
  gap: 6px;
  max-height: min(52vh, 430px);
  overflow-y: auto;
  scrollbar-color: #c89335 rgba(4, 18, 32, .6);
}
.citadel-reign-row {
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid rgba(157, 199, 226, .2);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(22, 63, 93, .92), rgba(8, 31, 51, .96));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}
.citadel-reign-row.current {
  border-color: rgba(255, 211, 102, .78);
  background: linear-gradient(180deg, rgba(91, 63, 18, .96), rgba(38, 28, 12, .97));
  box-shadow: inset 0 0 0 1px rgba(255, 237, 174, .16), 0 0 12px rgba(220, 155, 39, .14);
}
.citadel-reign-rank {
  color: #f2c45f;
  font-size: .92rem;
  text-align: center;
}
.citadel-reign-ruler {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.citadel-reign-ruler strong {
  overflow: hidden;
  color: #fff1bd;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.citadel-reign-ruler small {
  color: #d7b55e;
  font-size: .64rem;
}
.citadel-reign-time {
  color: #e5f2fb;
  font-size: .82rem;
  text-align: right;
  white-space: nowrap;
}
.citadel-reign-note,
.citadel-reign-empty {
  margin: 0;
  padding: 11px;
  border: 1px solid rgba(157, 199, 226, .16);
  border-radius: 5px;
  color: #afc7d8;
  background: rgba(4, 18, 32, .6);
  font-size: .74rem;
  line-height: 1.45;
}
@media (max-width: 540px) {
  .citadel-reign-heading,
  .citadel-reign-row {
    grid-template-columns: 40px minmax(0, 1fr) minmax(78px, auto);
    gap: 6px;
  }
  .citadel-reign-heading,
  .citadel-reign-row {
    padding-left: 7px;
    padding-right: 7px;
  }
  .citadel-reign-time {
    font-size: .72rem;
  }
}
.camp-public-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.camp-public-status > div {
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid rgba(164, 213, 244, .2);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(23, 67, 98, .88), rgba(10, 38, 61, .92));
}
.camp-public-status span,
.camp-public-status strong {
  display: block;
}
.camp-public-status span {
  color: #a8c7dc;
  font-size: .65rem;
  text-transform: uppercase;
}
.camp-public-status strong {
  margin-top: 3px;
  color: #fff1bd;
  overflow-wrap: anywhere;
}
.camp-stats-source {
  grid-column: 1 / -1;
  color: #d7b45e;
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
}
.gold-camp-info-panel > img {
  width: min(210px, 55vw);
  height: 170px;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 7px rgba(0, 0, 0, .5));
}
.gold-camp-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.gold-camp-info-grid > div {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(164, 213, 244, .2);
  border-radius: 6px;
  background: rgba(17, 55, 82, .78);
}
.gold-camp-info-grid span,
.gold-camp-info-grid strong {
  display: block;
}
.gold-camp-info-grid span {
  color: #a8c7dc;
  font-size: .68rem;
}
.gold-camp-info-grid strong {
  margin-top: 2px;
  color: #fff3c2;
  overflow-wrap: anywhere;
}
.gold-camp-info-grid small {
  display: block;
  margin-top: 2px;
  color: #9fc0d5;
  font-size: .62rem;
}
.camp-defense-grid .camp-total-defense {
  grid-column: 1 / -1;
  border-color: rgba(225, 176, 73, .56);
  background: linear-gradient(180deg, rgba(91, 58, 19, .72), rgba(39, 29, 19, .84));
  text-align: center;
}
.camp-defense-grid .camp-total-defense strong {
  color: #ffda78;
  font-size: 1.12rem;
}
.camp-scout-expiry {
  padding: 8px 10px;
  border-left: 3px solid #7cbde2;
  background: rgba(26, 73, 103, .38);
  font-size: .72rem;
}
.camp-stats-locked {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-height: 180px;
  align-content: center;
  padding: 22px 18px;
  border: 1px solid rgba(130, 163, 187, .28);
  border-radius: 6px;
  color: #c9d9e5;
  background: linear-gradient(180deg, rgba(13, 38, 59, .9), rgba(6, 22, 38, .96));
  text-align: center;
}
.camp-stats-lock {
  font-size: 1.65rem;
  filter: grayscale(.25);
}
.camp-stats-locked > strong {
  color: #ffe09a;
  font-family: "Cinzel", Georgia, serif;
  font-size: .96rem;
}
.camp-stats-locked p {
  max-width: 310px;
  color: #adc1cf;
  font-size: .75rem;
}
.camp-reward-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.camp-reward-overview > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(225, 176, 73, .4);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(47, 71, 91, .9), rgba(14, 37, 57, .94));
}
.camp-reward-overview span,
.camp-reward-overview strong {
  display: block;
}
.camp-reward-overview span {
  color: #a8c7dc;
  font-size: .64rem;
  text-transform: uppercase;
}
.camp-reward-overview strong {
  margin-top: 4px;
  color: #ffe09a;
  overflow-wrap: anywhere;
}
.camp-reward-meter {
  height: 8px;
  overflow: hidden;
  border: 1px solid rgba(236, 200, 112, .48);
  border-radius: 4px;
  background: rgba(4, 16, 28, .9);
}
.camp-reward-meter > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #9f6822, #ffd979);
  box-shadow: 0 0 10px rgba(255, 210, 104, .45);
  transition: width .22s ease;
}
.camp-reward-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.camp-reward-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 6px 9px;
  border: 1px solid rgba(139, 167, 187, .22);
  border-radius: 5px;
  background: rgba(9, 31, 49, .78);
}
.camp-reward-row.claimed {
  border-color: rgba(103, 191, 133, .42);
  background: rgba(19, 67, 54, .58);
}
.camp-reward-row.next {
  border-color: rgba(239, 188, 75, .78);
  background: linear-gradient(90deg, rgba(92, 59, 18, .82), rgba(35, 44, 48, .82));
  box-shadow: inset 3px 0 0 #f4c35f;
}
.camp-reward-check {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(164, 195, 215, .4);
  border-radius: 50%;
  color: #b7ccda;
  background: rgba(5, 21, 34, .88);
  font-family: "Cinzel", Georgia, serif;
  font-size: .72rem;
  font-weight: 900;
}
.camp-reward-row.claimed .camp-reward-check {
  border-color: #8fd1a5;
  color: #eaffef;
  background: #276c49;
}
.camp-reward-row.next .camp-reward-check {
  border-color: #ffdb7d;
  color: #211505;
  background: #e7ac42;
}
.camp-reward-copy,
.camp-reward-copy small,
.camp-reward-copy strong {
  display: block;
  min-width: 0;
}
.camp-reward-copy small {
  color: #9fb9ca;
  font-size: .61rem;
  text-transform: uppercase;
}
.camp-reward-copy strong {
  margin-top: 2px;
  color: #f4e6bd;
  font-size: .82rem;
  overflow-wrap: anywhere;
}
.camp-reward-row em {
  color: #9eb6c5;
  font-size: .62rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}
.camp-reward-row.claimed em { color: #91d7a8; }
.camp-reward-row.next em { color: #ffd776; }
.camp-reward-reset {
  color: #aebfcb !important;
  font-size: .68rem;
  text-align: center;
}
.relic-limit-message {
  padding: 9px 11px;
  border: 1px solid rgba(218, 131, 94, .62);
  border-left: 3px solid #d7824f;
  border-radius: 5px;
  color: #f3d0b7 !important;
  background: rgba(76, 30, 24, .72);
  font-size: .72rem;
}
.relic-reward-heading {
  margin: 2px 0 0;
  color: #ffe09a;
  font-family: "Cinzel", Georgia, serif;
  font-size: .78rem;
  letter-spacing: 0;
  text-transform: uppercase;
}
.relic-drop-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.relic-drop-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 7px 9px;
  border: 1px solid rgba(139, 167, 187, .28);
  border-left: 3px solid #a8becd;
  border-radius: 5px;
  background: rgba(9, 31, 49, .78);
}
.relic-drop-row.rarity-uncommon { border-left-color: #6ea6d7; }
.relic-drop-row.rarity-rare { border-left-color: #b58be4; }
.relic-drop-row.rarity-legendary { border-left-color: #f0bd55; }
.relic-drop-name,
.relic-drop-name strong,
.relic-drop-name small {
  display: block;
  min-width: 0;
}
.relic-drop-name strong {
  color: #f4e6bd;
  font-size: .72rem;
  overflow-wrap: anywhere;
}
.relic-drop-name small {
  margin-top: 2px;
  color: #9fb9ca;
  font-size: .58rem;
  text-transform: uppercase;
}
.relic-drop-row em {
  color: #ffe09a;
  font-size: .72rem;
  font-style: normal;
  font-weight: 900;
}
.relic-reward-history-row em {
  white-space: nowrap;
}
.relic-reward-empty {
  padding: 16px;
  border: 1px dashed rgba(139, 167, 187, .32);
  border-radius: 5px;
  color: #aebfcb;
  background: rgba(9, 31, 49, .46);
  font-size: .72rem;
  text-align: center;
}
.deed-camp-condition {
  padding: 9px 11px;
  border: 1px solid rgba(231, 189, 94, .44);
  border-left: 3px solid #efc45f;
  border-radius: 5px;
  color: #f1e3bd !important;
  background: linear-gradient(90deg, rgba(77, 51, 18, .76), rgba(13, 37, 55, .82));
  font-size: .74rem;
}
.deed-camp-history-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.deed-camp-history-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 9px;
  min-height: 62px;
  padding: 7px 8px;
  border: 1px solid rgba(207, 158, 62, .34);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(28, 55, 73, .92), rgba(8, 27, 43, .96));
}
.deed-history-city {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(244, 205, 111, .58);
  border-radius: 50%;
  color: #ffe19a;
  background: rgba(97, 62, 18, .72);
  font-size: 1rem;
}
.deed-history-copy,
.deed-history-copy strong,
.deed-history-copy span,
.deed-history-copy small {
  display: block;
  min-width: 0;
}
.deed-history-copy strong {
  color: #ffe3a2;
  font-family: "Cinzel", Georgia, serif;
  font-size: .82rem;
  overflow-wrap: anywhere;
}
.deed-history-copy span {
  margin-top: 2px;
  color: #b8d2e2;
  font-size: .68rem;
}
.deed-history-copy small {
  margin-top: 3px;
  color: #95adbd;
  font-size: .61rem;
  line-height: 1.25;
}
.deed-history-locate {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
}
.deed-history-empty {
  min-height: 190px;
}
.deed-camp-help p + p {
  margin-top: 9px;
}
.camp-reward-loading {
  display: grid;
  min-height: 260px;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  color: #d9e5ee;
  text-align: center;
}
.camp-reward-loading p {
  max-width: 320px;
  color: #aebfcb;
  font-size: .72rem;
}
.camp-reward-loading.error strong { color: #f2c087; }
.camp-reward-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(216, 180, 97, .22);
  border-top-color: #f2c45d;
  border-radius: 50%;
  animation: campRewardSpin .8s linear infinite;
}
@keyframes campRewardSpin {
  to { transform: rotate(360deg); }
}
@media (max-width: 520px) {
  .relic-drop-table {
    grid-template-columns: 1fr;
  }
}
.gold-camp-info-panel p {
  margin: 0;
  color: #d9e5ee;
  line-height: 1.35;
}
.gold-camp-info-panel.camp-rules-only {
  gap: 0;
}
.gold-camp-description {
  padding: 16px;
  border: 1px solid rgba(214, 168, 72, .64);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(20, 55, 82, .94), rgba(7, 26, 44, .96));
  box-shadow: inset 0 0 0 1px rgba(255, 235, 169, .08);
}
.gold-camp-description > strong {
  display: block;
  margin-bottom: 10px;
  color: #ffd978;
  font-family: "Cinzel", Georgia, serif;
  font-size: 1rem;
}
.gold-camp-description p + p {
  margin-top: 10px;
}
.map-frame.zooming .camp-node,
.map-frame.low-zoom .camp-node {
  filter: drop-shadow(0 7px 5px rgba(0, 0, 0, .52));
}

.city-node {
  position: absolute;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  z-index: 5;
  pointer-events: auto;
}
.city-node.selected { z-index: 10; }
.city-node.targeted { z-index: 9; }
.city-node:not(.stronghold-node)::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 88px;
  height: 76px;
  transform: translateX(-50%) translateY(1px) scale(.995);
  transform-origin: 50% 58%;
  display: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .76));
  animation: citySelectionFloat 1.9s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
  z-index: 2;
}
.city-node.player.selected:not(.stronghold-node)::before,
.city-node.player.targeted:not(.stronghold-node)::before {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86'%3E%3Cpolygon points='50 3 91 24 91 62 50 83 9 62 9 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .76)) drop-shadow(0 0 5px rgba(255, 255, 255, .48));
}
.city-node.enemy.targeted:not(.stronghold-node)::before,
.city-node.neutral.targeted:not(.stronghold-node)::before,
.city-node.player2.targeted:not(.stronghold-node)::before,
.city-node.player3.targeted:not(.stronghold-node)::before {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86'%3E%3Cpolygon points='50 3 91 24 91 62 50 83 9 62 9 24' fill='none' stroke='%23e0302d' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .76)) drop-shadow(0 0 5px rgba(255, 57, 57, .5));
}
@keyframes citySelectionFloat {
  0%, 100% { transform: translateX(-50%) translateY(1px) scale(.995); }
  50% { transform: translateX(-50%) translateY(-4px) scale(1.015); }
}
.city-node.stronghold-node {
  width: var(--stronghold-size, 154px);
  height: calc(var(--stronghold-size, 154px) * .896);
  transform: translate(-50%, -62%);
  border-radius: 0;
  z-index: 6;
}
.city-node.stronghold-node.selected,
.city-node.stronghold-node.targeted {
  z-index: 12;
}
.stronghold-glow {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: calc(var(--stronghold-size, 154px) * .818);
  height: calc(var(--stronghold-size, 154px) * .273);
  transform: translateX(-50%);
  border: 2px solid rgba(255, 219, 116, .78);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 212, 83, .32), rgba(44, 29, 7, .18) 62%, transparent 72%);
  box-shadow: 0 0 24px rgba(255, 202, 68, .52);
  pointer-events: none;
}
.stronghold-building {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(var(--stronghold-size, 154px) * .961);
  height: calc(var(--stronghold-size, 154px) * .896);
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  filter: drop-shadow(0 12px 9px rgba(0,0,0,.45));
  pointer-events: none;
}
.stronghold-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.city-node.stronghold-node.selected .stronghold-glow {
  border-color: rgba(255, 244, 184, .96);
  box-shadow: 0 0 0 5px rgba(242,184,75,.28), 0 0 30px rgba(255, 218, 105, .74);
}
.city-node.stronghold-training .stronghold-glow {
  border-color: rgba(203, 235, 255, .86);
  background: radial-gradient(ellipse at center, rgba(126, 207, 255, .3), rgba(16, 49, 86, .16) 62%, transparent 72%);
  box-shadow: 0 0 24px rgba(126, 207, 255, .48);
}
.city-node.stronghold-training.selected .stronghold-glow {
  border-color: rgba(238, 249, 255, .98);
  box-shadow: 0 0 0 5px rgba(126, 207, 255, .28), 0 0 30px rgba(176, 228, 255, .72);
}
.city-node.stronghold-speed .stronghold-glow {
  border-color: rgba(145, 231, 255, .86);
  background: radial-gradient(ellipse at center, rgba(89, 207, 255, .28), rgba(26, 62, 89, .18) 62%, transparent 72%);
  box-shadow: 0 0 24px rgba(89, 207, 255, .46);
}
.city-node.stronghold-speed.selected .stronghold-glow {
  border-color: rgba(238, 250, 255, .98);
  box-shadow: 0 0 0 5px rgba(89, 207, 255, .26), 0 0 30px rgba(156, 231, 255, .7);
}
.city-node.stronghold-defense .stronghold-glow {
  border-color: rgba(255, 196, 101, .88);
  background: radial-gradient(ellipse at center, rgba(255, 179, 76, .28), rgba(75, 52, 28, .18) 62%, transparent 72%);
  box-shadow: 0 0 24px rgba(255, 179, 76, .48);
}
.city-node.stronghold-defense.selected .stronghold-glow {
  border-color: rgba(255, 238, 194, .98);
  box-shadow: 0 0 0 5px rgba(255, 179, 76, .26), 0 0 30px rgba(255, 210, 126, .72);
}
.city-node.stronghold-crown .stronghold-glow {
  border-color: rgba(255, 232, 137, .94);
  background: radial-gradient(ellipse at center, rgba(255, 224, 107, .34), rgba(37, 95, 145, .2) 62%, transparent 72%);
  box-shadow: 0 0 30px rgba(255, 215, 94, .58), 0 0 22px rgba(91, 176, 255, .42);
}
.city-node.stronghold-crown.selected .stronghold-glow {
  border-color: rgba(255, 249, 205, .98);
  box-shadow: 0 0 0 6px rgba(255, 215, 94, .3), 0 0 36px rgba(255, 232, 137, .8), 0 0 24px rgba(123, 194, 255, .56);
}
.city-node.stronghold-node.attackable .stronghold-glow {
  animation: targetPulse .75s infinite alternate;
}
.city-node.stronghold-node.supportable .stronghold-glow {
  animation: supportPulse .75s infinite alternate;
}
.city-node.stronghold-node .city-label {
  bottom: calc(var(--stronghold-size, 154px) * .857);
}
.scout-nearby-radius {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  border: 5px solid rgba(88, 198, 255, .9);
  border-radius: 50%;
  background: rgba(62, 165, 225, .12);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.2), 0 0 30px rgba(72,190,255,.35);
  pointer-events: none;
}
.scout-nearby-radius::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 3px dashed rgba(208, 242, 255, .78);
  border-radius: 50%;
}
.scout-nearby-radius > span {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  min-width: max-content;
  padding: .3rem .62rem;
  border: 2px solid rgba(164, 225, 255, .82);
  border-radius: 999px;
  color: white;
  background: rgba(11, 59, 97, .92);
  box-shadow: 0 4px 7px rgba(0,0,0,.35);
  font-size: .65rem;
  font-weight: 1000;
}
.regroup-radius {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  border: 5px solid rgba(255, 88, 88, .9);
  border-radius: 50%;
  background: rgba(201, 43, 54, .12);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.18), 0 0 34px rgba(255,72,72,.38);
  pointer-events: none;
}
.regroup-radius::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 3px dashed rgba(255, 210, 210, .78);
  border-radius: 50%;
}
.regroup-radius > span {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  min-width: max-content;
  padding: .3rem .62rem;
  border: 2px solid rgba(255, 176, 176, .82);
  border-radius: 999px;
  color: white;
  background: rgba(91, 16, 24, .94);
  box-shadow: 0 4px 7px rgba(0,0,0,.35);
  font-size: .65rem;
  font-weight: 1000;
}
.city-ring {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  box-shadow: none;
  z-index: 0;
}
.city-node.castle-stage-1 { --city-art-size: 66px; }
.city-node.castle-stage-2 { --city-art-size: 69px; }
.city-node.castle-stage-3 { --city-art-size: 72px; }
.city-node.castle-stage-4 { --city-art-size: 75px; }
.city-node.castle-stage-5 { --city-art-size: 78px; }
.city-shield-field {
  position: absolute;
  left: 50%;
  bottom: -20px;
  width: calc(var(--city-art-size, 66px) * .68);
  height: calc(var(--city-art-size, 66px) * .68);
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  opacity: .96;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .52)) drop-shadow(0 0 8px rgba(255, 220, 112, .42));
  animation: cityShieldPulse 1.9s ease-in-out infinite;
}
.city-shield-field img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.city-node.player .city-ring,
.city-node.player2 .city-ring,
.city-node.player3 .city-ring,
.city-node.enemy .city-ring,
.city-node.neutral .city-ring { background: transparent; border-color: transparent; }
.city-node.selected .city-ring { box-shadow: none; }
.city-node.attackable .city-ring { animation: targetPulse .75s infinite alternate; }
.city-node.supportable .city-ring { animation: supportPulse .75s infinite alternate; }
.city-node.scout-nearby-target .city-ring { animation: scoutTargetPulse .75s infinite alternate; }
.city-node.regroup-target .city-ring { animation: regroupTargetPulse .75s infinite alternate; }
.city-node.scout-radius-source .city-ring { box-shadow: 0 0 0 8px rgba(89, 209, 255, .55), 0 14px 25px rgba(0,0,0,.42); }
.city-node.regroup-radius-source .city-ring { box-shadow: 0 0 0 8px rgba(255, 88, 88, .55), 0 14px 25px rgba(0,0,0,.42); }
@keyframes targetPulse { from { box-shadow: 0 0 0 2px rgba(242,184,75,.34), 0 10px 20px rgba(0,0,0,.35); } to { box-shadow: 0 0 0 9px rgba(242,184,75,.42), 0 10px 20px rgba(0,0,0,.35); } }
@keyframes scoutTargetPulse { from { box-shadow: 0 0 0 3px rgba(88,198,255,.42), 0 10px 20px rgba(0,0,0,.35); } to { box-shadow: 0 0 0 11px rgba(88,198,255,.62), 0 10px 20px rgba(0,0,0,.35); } }
@keyframes regroupTargetPulse { from { box-shadow: 0 0 0 3px rgba(255,88,88,.38), 0 10px 20px rgba(0,0,0,.35); } to { box-shadow: 0 0 0 11px rgba(255,88,88,.58), 0 10px 20px rgba(0,0,0,.35); } }
@keyframes cityShieldPulse {
  0%, 100% { opacity: .9; transform: translateX(-50%) translateY(0) scale(.985); }
  50% { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1.035); }
}
.city-castle {
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: var(--city-art-size, 62px);
  height: var(--city-art-size, 62px);
  display: grid;
  place-items: center;
  overflow: visible;
  border-radius: 0;
  transform: translateX(-50%);
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.35));
  z-index: 1;
  pointer-events: none;
}
.map-frame.camera-moving .city-ring,
.map-frame.camera-moving .city-shield-field,
.map-frame.camera-moving .city-castle,
.map-frame.camera-moving .stronghold-building,
.map-frame.camera-moving .player-city-label,
.map-frame.camera-moving .foreign-city-label,
.map-frame.camera-moving .foreign-selected-banner,
.map-frame.camera-moving .city-wheel-ring,
.map-frame.zooming .city-ring,
.map-frame.zooming .city-shield-field,
.map-frame.zooming .city-castle,
.map-frame.zooming .stronghold-building,
.map-frame.crowded-map .city-ring,
.map-frame.crowded-map .city-shield-field,
.map-frame.crowded-map .city-castle,
.map-frame.crowded-map .stronghold-building,
.map-frame.crowded-map .player-city-label,
.map-frame.crowded-map .foreign-city-label,
.map-frame.crowded-map .foreign-selected-banner,
.map-frame.crowded-map .city-wheel-ring,
.map-frame.low-zoom .city-ring,
.map-frame.low-zoom .city-shield-field,
.map-frame.low-zoom .city-castle,
.map-frame.low-zoom .stronghold-building,
.map-frame.low-zoom .player-city-label,
.map-frame.low-zoom .foreign-city-label,
.map-frame.low-zoom .foreign-selected-banner,
.map-frame.low-zoom .city-wheel-ring {
  filter: none;
  box-shadow: none;
}
.map-frame.camera-moving .city-shield-field,
.map-frame.zooming .city-shield-field,
.map-frame.crowded-map .city-shield-field,
.map-frame.low-zoom .city-shield-field {
  animation: none;
  opacity: .9;
}
.map-frame.camera-moving .harvest-bonus-node,
.map-frame.crowded-map .harvest-bonus-node,
.map-frame.camera-moving .wheel-scout-nearby.armed,
.map-frame.camera-moving .wheel-regroup.armed,
.map-frame.camera-moving .city-node.attackable .city-ring,
.map-frame.camera-moving .city-node.supportable .city-ring,
.map-frame.camera-moving .city-node.scout-nearby-target .city-ring,
.map-frame.camera-moving .city-node.regroup-target .city-ring,
.map-frame.crowded-map .wheel-scout-nearby.armed,
.map-frame.crowded-map .wheel-regroup.armed,
.map-frame.crowded-map .city-node.attackable .city-ring,
.map-frame.crowded-map .city-node.supportable .city-ring,
.map-frame.crowded-map .city-node.scout-nearby-target .city-ring,
.map-frame.crowded-map .city-node.regroup-target .city-ring {
  animation: none;
}
.map-frame.camera-moving .city-action-wheel,
.map-frame.camera-moving .gold-camp-action-wheel,
.map-frame.camera-moving .scout-nearby-radius,
.map-frame.camera-moving .regroup-radius,
.map-frame.zooming .city-action-wheel,
.map-frame.zooming .gold-camp-action-wheel,
.map-frame.zooming .scout-nearby-radius,
.map-frame.zooming .regroup-radius {
  opacity: 0;
}
.map-frame.camera-moving .city-label,
.map-frame.zooming .city-label {
  opacity: 1;
}
.city-castle.stage-1,
.city-castle.stage-2,
.city-castle.stage-3,
.city-castle.stage-4,
.city-castle.stage-5 { background-image: none; }
.city-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.city-level { display: none; }
.city-label {
  --label-tether: 0px;
  position: absolute;
  left: 50%;
  bottom: 74px;
  transform: translateX(-50%);
  width: max-content;
  z-index: 3;
  cursor: pointer;
  pointer-events: auto;
}
.city-label * { pointer-events: none; }
.city-label::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: var(--label-tether);
  transform: translateX(-50%);
  background: rgba(255,255,255,.72);
  box-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.player-city-label {
  display: grid;
  justify-items: center;
  gap: .2rem;
  filter: drop-shadow(0 5px 4px rgba(0,0,0,.55));
}
.citadel-city-crown {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  color: #ffd76b;
  font-family: Georgia, serif;
  font-size: 1.2rem;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 1px 0 #fff1a8, 0 2px 2px #6f3700, 0 0 8px rgba(255, 190, 45, .9);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .7));
}
.city-ruler-row {
  display: flex;
  max-width: 194px;
  align-items: center;
  justify-content: center;
  gap: .2rem;
}
.map-city-clan-tag {
  max-width: 150px;
  overflow: hidden;
  justify-self: center;
  color: #f1d47d;
  font-size: .64rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: -1px -1px 0 #080808, 1px -1px 0 #080808, -1px 1px 0 #080808, 1px 1px 0 #080808;
}
.city-ruler-name {
  max-width: 170px;
  overflow: hidden;
  color: #fff0c7;
  font-size: .8rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: -1px -1px 0 #080808, 1px -1px 0 #080808, -1px 1px 0 #080808, 1px 1px 0 #080808;
}
.player-city-banner { display: grid; grid-template-columns: 42px max-content; align-items: end; }
.city-owner-column {
  width: 42px;
  min-height: 53px;
  padding: 3px 3px 9px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .13rem;
  color: white;
  background: #176cb7;
  clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%);
}
.city-owner-flag {
  width: 36px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  border: 2px solid white;
  font-size: .66rem;
  font-weight: 950;
}
.city-owner-flag .flag-symbol { font-size: .9rem; }
.city-label-level { color: white; font-size: .72rem; line-height: 1; font-weight: 1000; white-space: nowrap; text-shadow: 0 1px 1px rgba(0,0,0,.65); }
.player-city-data { display: grid; justify-items: start; align-content: end; min-width: max-content; }
.city-army-count {
  min-width: 82px;
  padding: .28rem .48rem;
  color: white;
  background: #247dce;
  font-size: .76rem;
  line-height: 1;
  font-weight: 1000;
  white-space: nowrap;
}
.player-city-data .city-name {
  padding: .16rem .28rem 0;
  color: #fff0c7;
  font-size: .64rem;
  text-shadow: -1px -1px 0 #080808, 1px -1px 0 #080808, -1px 1px 0 #080808, 1px 1px 0 #080808;
}
.foreign-city-label {
  display: grid;
  justify-items: center;
  gap: .16rem;
  filter: drop-shadow(0 5px 4px rgba(0,0,0,.5));
}
.foreign-city-label > .city-name {
  max-width: 150px;
  overflow: hidden;
  color: #fff;
  font-size: .64rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: -1px -1px 0 #090909, 1px -1px 0 #090909, -1px 1px 0 #090909, 1px 1px 0 #090909;
}
.foreign-city-shield {
  width: 46px;
  min-height: 58px;
  padding: 4px 4px 10px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .2rem;
  color: white;
  background: #655e53;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
}
.city-node.enemy {
  --enemy-city-ui: #e12635;
  --enemy-city-ui-dark: #7b1520;
  --enemy-city-ui-border: #ff727c;
  --enemy-city-name-bg: rgba(120, 16, 25, .88);
  --enemy-city-name-border: rgba(255, 114, 124, .66);
}
.city-node.enemy.enemy-power-protected {
  --enemy-city-ui: #ed8b8b;
  --enemy-city-ui-dark: #a64e50;
  --enemy-city-ui-border: #ffd0d0;
  --enemy-city-name-bg: rgba(151, 65, 67, .9);
  --enemy-city-name-border: rgba(255, 208, 208, .8);
}
.city-node.enemy.enemy-power-in-range {
  --enemy-city-ui: #e12635;
  --enemy-city-ui-dark: #7b1520;
  --enemy-city-ui-border: #ff727c;
  --enemy-city-name-bg: rgba(120, 16, 25, .88);
  --enemy-city-name-border: rgba(255, 114, 124, .66);
}
.city-node.enemy.enemy-power-overpowering {
  --enemy-city-ui: #59121a;
  --enemy-city-ui-dark: #2b070b;
  --enemy-city-ui-border: #9c3540;
  --enemy-city-name-bg: rgba(38, 5, 9, .94);
  --enemy-city-name-border: rgba(156, 53, 64, .74);
}
.city-node.enemy .foreign-city-shield { background: var(--enemy-city-ui); }
.city-node.player2 .foreign-city-shield { background: #6946a9; }
.city-node.player3 .foreign-city-shield { background: #287e4c; }
.city-node.neutral .foreign-city-shield { background: #6b655b; }
.foreign-city-shield .city-owner-flag { width: 38px; height: 30px; border-color: rgba(255,255,255,.78); }
.selected-foreign-label { gap: .18rem; }
.foreign-ruler-name {
  max-width: 190px;
  overflow: hidden;
  color: #fff;
  font-size: .8rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: -1px -1px 0 #090909, 1px -1px 0 #090909, -1px 1px 0 #090909, 1px 1px 0 #090909;
}
.foreign-ruler-name-inline {
  max-width: 132px;
  padding: .08rem .24rem;
  border-radius: 999px;
  color: #ffe8e5;
  background: rgba(96, 18, 22, .72);
  border: 1px solid rgba(255, 178, 170, .42);
  font-size: .8rem;
  line-height: 1;
}
.city-node.enemy .foreign-ruler-name-inline {
  background: var(--enemy-city-name-bg);
  border-color: var(--enemy-city-name-border);
}
.foreign-selected-banner {
  display: grid;
  grid-template-columns: 52px 46px max-content;
  align-items: stretch;
  filter: drop-shadow(0 6px 4px rgba(0,0,0,.52));
}
.foreign-selected-level {
  min-height: 52px;
  padding: 0 .35rem 8px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #8e2423;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
  font-size: 1.05rem;
  font-weight: 1000;
  text-shadow: 0 2px 2px rgba(0,0,0,.65);
}
.foreign-selected-crest {
  display: grid;
  place-items: center;
  background: #5e1718;
  border: 3px solid #b43b35;
}
.foreign-selected-crest .city-owner-flag { width: 34px; height: 31px; border-width: 1px; }
.foreign-selected-data {
  min-width: 96px;
  padding: .35rem .55rem;
  display: grid;
  justify-items: end;
  align-content: center;
  background: #8e2423;
}
.city-node.enemy .foreign-selected-level,
.city-node.enemy .foreign-selected-data { background: var(--enemy-city-ui); }
.city-node.enemy .foreign-selected-crest {
  background: var(--enemy-city-ui-dark);
  border-color: var(--enemy-city-ui-border);
}
.foreign-selected-data .city-name { max-width: 142px; overflow: hidden; font-size: .64rem; text-overflow: ellipsis; }
.foreign-garrison { color: #fff; font-size: .72rem; font-weight: 1000; white-space: nowrap; }
.foreign-garrison.unknown { color: #ffe2dc; }
.foreign-garrison.clan-visible {
  color: #eaffef;
  text-shadow: 0 1px 1px rgba(4, 45, 18, .95), 0 0 7px rgba(91, 229, 126, .7);
}
.city-node.player2 .foreign-selected-level,
.city-node.player2 .foreign-selected-data { background: #604092; }
.city-node.player2 .foreign-selected-crest { background: #31204f; border-color: #8a69c3; }
.city-node.player3 .foreign-selected-level,
.city-node.player3 .foreign-selected-data { background: #256f45; }
.city-node.player3 .foreign-selected-crest { background: #123d27; border-color: #4ca873; }
.city-node.neutral .foreign-selected-level,
.city-node.neutral .foreign-selected-data { background: #625c52; }
.city-node.neutral .foreign-selected-crest { background: #37332e; border-color: #8c8476; }
.city-node.player2 .owner-flag { color: #160b36; background: #9d75ff; }
.city-node.player3 .owner-flag { color: #052813; background: #56d486; }
.city-node.enemy .owner-flag { color: white; background: var(--red); }
.city-node.neutral .owner-flag { color: #1e1914; background: var(--neutral); }
.city-name { display: block; color: #fff6d3; font-size: .64rem; line-height: 1.1; white-space: nowrap; }

.city-node.player.main-city-node .city-owner-column,
.city-node.player.main-city-node .city-army-count {
  background: #123a60;
}
.city-node.enemy.main-city-node .foreign-city-shield,
.city-node.enemy.main-city-node .foreign-selected-level,
.city-node.enemy.main-city-node .foreign-selected-data {
  background: #454b54;
}
.city-node.enemy.main-city-node .foreign-selected-crest {
  background: #24282e;
  border-color: #7f8994;
}
.city-node.enemy.main-city-node .foreign-ruler-name-inline {
  background: rgba(36, 40, 46, .94);
  border-color: rgba(127, 137, 148, .82);
}

.city-label.label-slot-top { --label-tether: 0px; left: 50%; right: auto; top: auto; bottom: 58px; transform: translateX(-50%); }
.city-label.label-slot-top-high { --label-tether: 16px; left: 50%; right: auto; top: auto; bottom: 74px; transform: translateX(-50%); }
.city-label.label-slot-top-higher { --label-tether: 32px; left: 50%; right: auto; top: auto; bottom: 90px; transform: translateX(-50%); }
.city-label.label-slot-top-highest { --label-tether: 48px; left: 50%; right: auto; top: auto; bottom: 106px; transform: translateX(-50%); }
.city-label.label-slot-top-tier-5 { --label-tether: 64px; left: 50%; right: auto; top: auto; bottom: 122px; transform: translateX(-50%); }
.city-label.label-slot-top-tier-6 { --label-tether: 80px; left: 50%; right: auto; top: auto; bottom: 138px; transform: translateX(-50%); }

.city-action-wheel {
  position: absolute;
  z-index: 28;
  width: var(--wheel-width, 214px);
  height: var(--wheel-height, 184px);
  transform: translate(-50%, var(--wheel-translate-y, -38%)) scale(var(--wheel-scale, 1));
  pointer-events: none;
}
.city-wheel-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--wheel-ring-width, 142px);
  height: var(--wheel-ring-height, 118px);
  transform: translate(-50%, -42%);
  border: 8px solid rgba(26, 75, 111, .92);
  border-top-color: transparent;
  border-radius: 50%;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.45));
}
.city-wheel-action {
  position: absolute;
  width: 62px;
  min-height: 62px;
  padding: .35rem .3rem .45rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .05rem;
  clip-path: polygon(50% 0, 94% 23%, 94% 76%, 50% 100%, 6% 76%, 6% 23%);
  color: white;
  border: 0;
  background: #205d91;
  filter: drop-shadow(0 5px 3px rgba(0,0,0,.52));
  pointer-events: auto;
}
.city-wheel-action:disabled { filter: grayscale(.75) drop-shadow(0 4px 3px rgba(0,0,0,.4)); }
.city-wheel-action .wheel-icon { font-size: 1.2rem; line-height: 1; }
.wheel-action-name { font-size: .58rem; font-weight: 950; }
.wheel-cost { min-width: 44px; padding: .12rem .24rem; border-radius: 5px; color: #fff7cc; background: #0b3b61; font-size: .58rem; font-weight: 1000; }
.wheel-level { left: var(--wheel-side-offset, 2px); top: var(--wheel-side-top, 68px); background: #38a94e; }
.wheel-send { right: var(--wheel-side-offset, 2px); top: var(--wheel-side-top, 68px); color: #251600; background: #f2b52f; }
.wheel-scout { left: var(--wheel-side-offset, 2px); top: var(--wheel-side-top, 68px); background: #2d83c8; }
.wheel-attack { right: var(--wheel-side-offset, 2px); top: var(--wheel-side-top, 68px); color: #251600; background: #f2b52f; }
.wheel-report { right: var(--wheel-extra-right, -50px); top: var(--wheel-extra-top, 10px); width: 56px; min-height: 56px; background: #24547d; }
.wheel-report .wheel-icon { font-size: 1.15rem; }
.wheel-scout-nearby { right: var(--wheel-extra-right, -50px); top: var(--wheel-extra-top, 10px); width: 58px; min-height: 58px; background: #2d83c8; }
.wheel-scout-nearby.armed { background: #38a94e; animation: scoutReadyPulse .75s infinite alternate; }
.wheel-scout-nearby .wheel-icon { font-size: 1.35rem; }
.wheel-regroup { left: var(--wheel-extra-left, -50px); top: var(--wheel-extra-top, 10px); width: 58px; min-height: 58px; background: #bd3f48; }
.wheel-regroup.armed { background: #d25050; animation: regroupReadyPulse .75s infinite alternate; }
.wheel-regroup .wheel-icon { font-size: 1.35rem; }
.city-wheel-action.busy {
  cursor: progress;
  animation: none;
  filter: drop-shadow(0 0 9px rgba(159, 221, 255, .9)) drop-shadow(0 5px 3px rgba(0,0,0,.52));
}
.city-wheel-action.busy .wheel-icon { animation: bulkOrderBusySpin .85s linear infinite; }
@keyframes scoutReadyPulse { from { filter: drop-shadow(0 5px 3px rgba(0,0,0,.52)); } to { filter: drop-shadow(0 0 9px rgba(111,255,169,.92)) drop-shadow(0 5px 3px rgba(0,0,0,.52)); } }
@keyframes regroupReadyPulse { from { filter: drop-shadow(0 5px 3px rgba(0,0,0,.52)); } to { filter: drop-shadow(0 0 9px rgba(255,132,132,.92)) drop-shadow(0 5px 3px rgba(0,0,0,.52)); } }
@keyframes bulkOrderBusySpin { to { transform: rotate(1turn); } }
.foreign-city-action-wheel .city-wheel-ring { border-color: rgba(22, 83, 123, .95); border-top-color: transparent; }
.wheel-info { left: var(--wheel-info-left, 76px); bottom: var(--wheel-info-bottom, 0); width: 58px; min-height: 58px; background: #24547d; }
.wheel-info .wheel-icon { font-family: Georgia, serif; font-size: 1.45rem; font-weight: 1000; }

.army-token {
  position: absolute;
  min-width: 44px;
  height: 30px;
  transform: translate(-50%, -50%);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .16rem;
  padding: 0 .35rem;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.72);
  box-shadow: 0 10px 22px rgba(0,0,0,.36);
  font-size: .72rem;
  font-weight: 950;
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
  transition: transform .12s linear;
  contain: layout;
}
.army-token.player { background: linear-gradient(#4fb2ff, #175ea9); }
.army-token.player2 { background: linear-gradient(#bd9bff, #5d35a8); }
.army-token.player3 { background: linear-gradient(#73e49a, #237d4b); }
.army-token.clan-ally {
  color: #effff3;
  border-color: #8fe2a5;
  background: linear-gradient(#58c978, #267a43);
  box-shadow: 0 0 0 2px rgba(18, 61, 39, .82), 0 0 15px rgba(89, 229, 128, .72), 0 10px 22px rgba(0,0,0,.36);
}
.army-token.enemy { background: linear-gradient(#ff766d, #9c2b26); }
.army-token.neutral { background: linear-gradient(#d2c6aa, #6c6254); color: #211b15; }
.army-token small { opacity: .86; font-size: .62rem; }
.army-token.hidden-transfer {
  min-width: 48px;
  height: 28px;
  padding: 0 .4rem;
}
.army-token.hidden-transfer small {
  font-size: .68rem;
  font-weight: 950;
}
.army-token.selected {
  z-index: 28;
  contain: layout;
  overflow: visible;
  border-color: #fff2a6;
  box-shadow: 0 0 0 2px rgba(10, 35, 63, .9), 0 0 16px rgba(255, 220, 111, .72), 0 10px 22px rgba(0,0,0,.4);
}
.army-token.endpoint-clearance {
  pointer-events: none;
  cursor: default;
}
.army-token.endpoint-clearance .army-token-nav {
  display: none;
}
.army-token-nav {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  width: 148px;
  height: 50px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 4px;
  border: 2px solid #cda94f;
  border-radius: 6px;
  background: rgba(7, 24, 42, .96);
  box-shadow: 0 8px 18px rgba(0,0,0,.5);
  pointer-events: auto;
}
.army-token-nav[hidden] { display: none; }
.army-token-nav::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 2px solid #cda94f;
  border-bottom: 2px solid #cda94f;
  background: #07182a;
}
.army-token-nav button {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 38px;
  display: grid;
  grid-template-columns: 18px 1fr;
  place-items: center;
  gap: 2px;
  padding: 0 5px;
  border: 1px solid rgba(231, 205, 127, .55);
  border-radius: 4px;
  color: #fff4d4;
  background: linear-gradient(#245984, #123a5e);
  font: inherit;
  cursor: pointer;
}
.army-token-nav button:hover,
.army-token-nav button:focus-visible {
  border-color: #ffe18a;
  background: linear-gradient(#3475a9, #184b78);
  outline: none;
}
.army-token-nav button > span { font-size: 1rem; line-height: 1; }
.army-token-nav button > small { font-size: .68rem; font-weight: 950; opacity: 1; }
.army-sync-status {
  position: absolute;
  left: 50%;
  top: max(72px, calc(env(safe-area-inset-top, 0px) + 54px));
  z-index: 95;
  transform: translateX(-50%);
  padding: .38rem .7rem;
  border: 1px solid rgba(255, 212, 111, .66);
  border-radius: 999px;
  color: #fff3c7;
  background: rgba(35, 24, 10, .92);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .38);
  font-size: .7rem;
  font-weight: 950;
  pointer-events: none;
}
.army-sync-status[hidden] { display: none; }
.map-frame.camera-moving .army-token,
.map-frame.crowded-map .army-token,
.map-frame.low-zoom .army-token {
  box-shadow: none;
  transition: none;
}

.performance-panel {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 9999;
  width: min(280px, calc(100vw - 20px));
  display: grid;
  gap: .18rem;
  padding: .6rem .7rem;
  border: 1px solid rgba(147, 214, 255, .44);
  border-radius: 10px;
  color: #eaf8ff;
  background: rgba(5, 17, 30, .9);
  box-shadow: 0 14px 30px rgba(0,0,0,.42);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.25;
  pointer-events: none;
}
.performance-panel[hidden] { display: none; }
.performance-panel strong {
  color: #ffe08a;
  font-size: .78rem;
}
.performance-panel span,
.performance-panel small {
  display: block;
}
.performance-panel small {
  color: rgba(234, 248, 255, .68);
  font-size: .58rem;
}

.toast {
  position: absolute;
  z-index: 60;
  left: 50%; bottom: 250px;
  transform: translateX(-50%);
  max-width: min(440px, calc(100% - 1.2rem));
  padding: .62rem .85rem;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(16,14,18,.94);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  font-size: .82rem;
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(-5px); }

.commander-panel {
  position: absolute;
  z-index: 50;
  left: .55rem; right: .55rem;
  bottom: calc(74px + env(safe-area-inset-bottom));
  min-height: 126px;
  padding: .68rem;
  border-radius: 22px 22px 18px 18px;
  background: linear-gradient(180deg, rgba(42,35,45,.96), rgba(17,16,22,.98));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 -16px 45px rgba(0,0,0,.35);
  display: none;
}
.commander-panel.visible { display: block; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .65rem; margin-bottom: .45rem; }
.panel-header strong, .panel-header small { display: block; }
.panel-header strong { font-size: .96rem; }
.panel-header small { color: var(--muted); font-size: .73rem; }
.clear-btn { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.09); border: 1px solid var(--line); font-size: 1.35rem; line-height: 1; font-weight: 950; }
.selected-info { min-height: 30px; color: var(--muted); font-size: .84rem; line-height: 1.35; }
.selected-info strong { color: var(--ink); }
.action-buttons { display: flex; gap: .43rem; overflow-x: auto; padding-top: .58rem; scrollbar-width: none; }
.action-buttons::-webkit-scrollbar { display: none; }
.action-buttons button { flex: 0 0 auto; min-width: 92px; min-height: 42px; border-radius: 14px; padding: 0 .68rem; color: #211508; background: linear-gradient(#ffd878, #e69627); font-weight: 950; font-size: .79rem; white-space: nowrap; }
.action-buttons button.secondary { color: var(--ink); background: rgba(255,255,255,.1); border: 1px solid var(--line); }
.action-buttons button.danger { color: white; background: linear-gradient(#ff665e, #bd302a); }
.action-buttons button.blue { color: white; background: linear-gradient(#55aaff, #185da7); }
.action-buttons button.active-march { color: #211508; background: linear-gradient(#fff0a7, #f2b84b); box-shadow: inset 0 0 0 2px rgba(255,255,255,.65), 0 8px 18px rgba(0,0,0,.24); }

.bottom-nav {
  position: absolute;
  z-index: 55;
  left: 0; right: 0; bottom: 0;
  height: calc(74px + env(safe-area-inset-bottom));
  padding: .42rem .58rem calc(.42rem + env(safe-area-inset-bottom));
  display: flex;
  gap: .42rem;
  background: linear-gradient(180deg, rgba(25,22,29,.98), #0f0d14);
  border-top: 1px solid rgba(255,255,255,.14);
}
.nav-btn { flex: 1 1 0; min-width: 0; border-radius: 16px; color: var(--muted); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11); display: grid; place-items: center; align-content: center; gap: .06rem; font-size: .72rem; font-weight: 900; }
.nav-btn span { display: block; color: var(--ink); font-size: 1rem; }
.nav-btn .nav-icon {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .38));
}
.nav-btn strong,
.nav-btn small { display: block; line-height: 1; }
.nav-btn small { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; font-size: .58rem; }
.nav-btn.active { color: white; background: linear-gradient(#2169bd, #15376c); border-color: rgba(158,213,255,.8); }
.incoming-attack-btn {
  color: #ffe9df;
  background: linear-gradient(#a81722, #5f1019);
  border-color: rgba(255, 181, 141, .68);
  box-shadow: 0 0 0 0 rgba(255, 82, 58, .46), inset 0 -5px 0 rgba(0,0,0,.24);
}
.incoming-attack-btn[hidden] { display: none; }
.incoming-attack-btn.active {
  animation: incomingAttackPulse 1.05s ease-in-out infinite;
}
.incoming-attack-btn span {
  color: #fff2d4;
}
.incoming-attack-btn strong {
  color: #fff;
  font-size: .82rem;
}
.incoming-attack-btn small {
  color: #ffd2bf;
}
.outgoing-attack-btn {
  color: #e5f6ff;
  background: linear-gradient(#176fb4, #12365f);
  border-color: rgba(151, 216, 255, .68);
  box-shadow: 0 0 0 0 rgba(79, 177, 255, .42), inset 0 -5px 0 rgba(0,0,0,.24);
}
.outgoing-attack-btn[hidden] { display: none; }
.outgoing-attack-btn.active {
  animation: outgoingAttackPulse 1.2s ease-in-out infinite;
}
.outgoing-attack-btn span {
  color: #eaf8ff;
}
.outgoing-attack-btn strong {
  color: #fff;
  font-size: .82rem;
}
.outgoing-attack-btn small {
  color: #bfe7ff;
}
@keyframes incomingAttackPulse {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 0 0 rgba(255, 82, 58, .44), inset 0 -5px 0 rgba(0,0,0,.24); }
  50% { filter: brightness(1.28); box-shadow: 0 0 0 7px rgba(255, 82, 58, .16), 0 0 24px rgba(255, 78, 58, .48), inset 0 -5px 0 rgba(0,0,0,.2); }
}
@keyframes outgoingAttackPulse {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 0 0 rgba(79, 177, 255, .38), inset 0 -5px 0 rgba(0,0,0,.24); }
  50% { filter: brightness(1.22); box-shadow: 0 0 0 7px rgba(79, 177, 255, .14), 0 0 24px rgba(79, 177, 255, .42), inset 0 -5px 0 rgba(0,0,0,.2); }
}

.modal { width: min(460px, calc(100% - 1.3rem)); padding: 0; border: 0; color: var(--ink); background: transparent; }
.modal::backdrop { background: rgba(0,0,0,.68); }
.modal-card { position: relative; max-height: min(86vh, 720px); overflow: hidden; padding: 1rem; display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: 24px; background: linear-gradient(180deg, #312a38, #131119); border: 1px solid var(--line); box-shadow: 0 28px 70px rgba(0,0,0,.52); }
.modal-card h2 { margin: 0 2rem .75rem 0; }
.modal-card #modalBody { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: .15rem; }
.modal-card p, .modal-card li { color: var(--muted); line-height: 1.42; }
.modal-card ul { margin: .5rem 0 0; padding-left: 1.15rem; }
.modal-card li { margin: .35rem 0; }
.player-name-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .18em;
  transition: color .16s ease, text-decoration-color .16s ease;
}
.player-name-link:hover,
.player-name-link:focus-visible {
  color: #f3d88b;
  text-decoration-color: currentColor;
}
.player-name-link:focus-visible {
  outline: 2px solid #f3d88b;
  outline-offset: 2px;
}
.public-player-profile-modal.modal {
  width: min(720px, calc(100vw - 1.3rem));
  max-width: calc(100vw - 1.3rem);
}
.public-player-profile-modal .modal-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.public-player-profile-modal #modalBody {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
.public-player-profile {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}
.public-profile-section {
  min-width: 0;
  padding: .85rem;
  border: 1px solid rgba(214, 183, 106, .22);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(0,0,0,.16));
}
.public-profile-heading {
  margin-bottom: .75rem;
  color: #d9bc75;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.public-profile-identity {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .8rem;
  font-size: 1.08rem;
}
.public-profile-flag {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
}
.public-profile-location,
.public-profile-clan {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem;
  border: 1px solid rgba(217, 188, 117, .35);
  border-radius: 10px;
  color: #f6edda;
  background: rgba(0,0,0,.22);
  text-align: left;
  cursor: pointer;
}
.public-profile-location > span:first-child { color: #e5c36f; font-size: 1.55rem; }
.public-profile-location > span:last-child { display: grid; }
.public-profile-clan > .clan-shield {
  flex: 0 0 auto;
}
.public-profile-clan-copy {
  min-width: 0;
  display: grid;
  gap: .1rem;
}
.public-profile-clan .clan-shield-size-small {
  width: 40px;
  height: 44px;
}
.public-profile-location > span:last-child,
.public-profile-location strong,
.public-profile-location small,
.public-profile-clan strong,
.public-profile-clan small {
  min-width: 0;
  overflow-wrap: anywhere;
}
.public-profile-location small,
.public-profile-clan small { color: #aeb4bd; }
.public-profile-location:hover:not(:disabled),
.public-profile-location:focus-visible,
.public-profile-clan:hover,
.public-profile-clan:focus-visible {
  border-color: #e0bd68;
  background: rgba(224, 189, 104, .1);
  outline: none;
}
.public-profile-location:disabled { cursor: default; opacity: .6; }
.public-profile-stat,
.public-profile-strongholds > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem;
}
.public-profile-stat strong,
.public-profile-strongholds > div strong {
  color: #f1d47d;
  font-size: 1.45rem;
  overflow-wrap: anywhere;
}
.public-profile-troop-estimate { margin-top: .65rem; }
.public-profile-strongholds { margin-top: .8rem; }
.public-profile-strongholds ul { margin-top: .45rem; }
.public-profile-strongholds p,
.public-profile-empty { margin: .45rem 0 0; }
.public-profile-loading,
.public-profile-error {
  min-height: 180px;
  display: grid;
  place-content: center;
  gap: .6rem;
  text-align: center;
}
.public-profile-error button {
  justify-self: center;
  padding: .55rem .9rem;
  border: 1px solid rgba(217,188,117,.4);
  border-radius: 9px;
  color: #f5ead1;
  background: rgba(217,188,117,.12);
}
.public-clan-details {
  display: grid;
  gap: .8rem;
}
.public-clan-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .8rem;
  align-items: center;
}
.public-clan-identity > div { min-width: 0; }
.public-clan-identity > div > span,
.public-clan-roster-heading > span {
  color: #d9bc75;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.public-clan-details h3,
.public-clan-details p { margin: .1rem 0; }
.public-clan-details dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  margin: 0;
}
.public-clan-details dl div {
  padding: .65rem;
  border-radius: 9px;
  background: rgba(0,0,0,.2);
}
.public-clan-details dt { color: #aeb4bd; font-size: .75rem; }
.public-clan-details dd { margin: .15rem 0 0; color: #f1d47d; font-weight: 900; }
.public-clan-roster-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  padding-top: .15rem;
}
.public-clan-roster-heading > strong { color: #f1d47d; font-size: .78rem; }
.public-clan-roster {
  display: grid;
  gap: .38rem;
}
.public-clan-member {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  padding: .62rem .7rem;
  border: 1px solid rgba(214, 183, 106, .14);
  border-radius: 9px;
  background: rgba(255,255,255,.045);
}
.public-clan-member > div:first-child,
.public-clan-member-power {
  min-width: 0;
  display: grid;
  gap: .08rem;
}
.public-clan-member small { color: #aeb4bd; font-size: .7rem; }
.public-clan-member-power {
  justify-items: end;
  text-align: right;
}
.public-clan-member-power strong { color: #f1d47d; }
@media (max-width: 720px) {
  .public-player-profile { grid-template-columns: 1fr; }
  .public-player-profile-modal .modal-card { padding: .75rem; }
  .public-profile-section { padding: .7rem; }
  .public-clan-details dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-clan-details dl div:last-child { grid-column: 1 / -1; }
}
.modal-close { position: absolute; z-index: 3; right: .7rem; top: .65rem; width: 34px; height: 34px; border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.1); }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin: .7rem 0; }
.stat-card { padding: .65rem; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.stat-card strong { display: block; color: #fff4c8; }
.stat-card small { color: var(--muted); }
.skill-row { display: grid; grid-template-columns: 1fr auto; gap: .55rem; align-items: center; padding: .55rem 0; border-top: 1px solid rgba(255,255,255,.09); }
.skill-row:first-child { border-top: 0; }
.skill-row button { min-height: 36px; border-radius: 12px; padding: 0 .65rem; color: #211508; background: linear-gradient(#ffd878, #e69627); font-weight: 950; }
.skill-list { display: grid; margin-top: .35rem; }
.skill-row small { color: var(--muted); }

.shop-modal.modal {
  width: min(620px, calc(100vw - 1.3rem));
}
.shop-modal .modal-card {
  background: linear-gradient(180deg, #071a2d, #132f56 72%, #1a416d);
  border-color: rgba(246, 190, 82, .62);
}
.shop-panel {
  display: grid;
  gap: .7rem;
}
.shop-balance {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .58rem .82rem;
  border-radius: 12px;
  background: rgba(5, 20, 36, .72);
  border: 1px solid rgba(158,213,255,.16);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.13);
}
.shop-balance span {
  color: #cfe9ff;
  font-size: .78rem;
  font-weight: 950;
  text-transform: uppercase;
}
.shop-balance strong {
  color: #fff0a7;
  font-size: 1.35rem;
  line-height: 1;
}
.shop-items {
  display: grid;
  gap: .58rem;
}
.shop-rewarded-section {
  display: grid;
  gap: .58rem;
  padding: .65rem;
  border: 1px solid rgba(246, 190, 82, .38);
  border-radius: 14px;
  background:
    radial-gradient(circle at 10% 0%, rgba(246, 190, 82, .12), transparent 42%),
    rgba(5, 20, 36, .56);
}
.shop-rewarded-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: .8rem;
}
.shop-rewarded-heading span,
.shop-rewarded-heading strong {
  display: block;
}
.shop-rewarded-heading span {
  color: #9ed5ff;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.shop-rewarded-heading strong {
  margin-top: .08rem;
  color: #fff0a7;
  font-size: 1rem;
}
.shop-rewarded-heading small {
  color: #d8e9f6;
  font-size: .7rem;
  font-weight: 850;
  text-align: right;
}
.shop-rewarded-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .58rem;
}
.shop-item.rewarded-ad-shop-item {
  min-height: 0;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
}
.rewarded-ad-shop-action {
  display: grid;
  justify-items: stretch;
  gap: .45rem;
  min-width: 0;
}
.rewarded-ad-shop-action .shop-item-image-placeholder {
  width: 72px;
  height: 72px;
  justify-self: center;
}
.shop-buy-btn.rewarded-ad-watch-btn {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding-inline: .35rem;
  font-size: .78rem;
}
.rewarded-ad-shop-copy {
  min-width: 0;
  overflow-wrap: anywhere;
}
.rewarded-ad-shop-copy .rewarded-ad-availability {
  color: #ffe293;
  font-weight: 950;
}
@media (max-width: 620px) {
  .shop-rewarded-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: .2rem;
  }
  .shop-rewarded-heading small {
    text-align: left;
  }
  .shop-rewarded-items {
    grid-template-columns: minmax(0, 1fr);
  }
  .shop-item.rewarded-ad-shop-item {
    grid-template-columns: 82px minmax(0, 1fr);
  }
  .rewarded-ad-shop-action .shop-item-image-placeholder {
    width: 64px;
    height: 64px;
  }
  .shop-buy-btn.rewarded-ad-watch-btn {
    font-size: .7rem;
  }
}
.rewarded-ad-confirmation-modal.modal {
  width: min(440px, calc(100vw - 1.3rem));
}
.rewarded-ad-disclosure {
  display: grid;
  justify-items: center;
  gap: .68rem;
  padding: .4rem .15rem .1rem;
  text-align: center;
}
.rewarded-ad-disclosure img {
  box-sizing: border-box;
  width: 88px;
  height: 88px;
  padding: 5px;
  border: 1px solid rgba(246, 190, 82, .46);
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
  object-fit: contain;
}
.rewarded-ad-disclosure strong {
  color: #fff0a7;
  font-size: 1.2rem;
}
.rewarded-ad-disclosure p {
  max-width: 34ch;
  margin: 0;
  color: #d8e9f6;
  line-height: 1.45;
}
.rewarded-ad-disclosure small {
  color: var(--muted);
}
.rewarded-ad-disclosure-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin-top: .25rem;
}
.shop-item {
  min-height: 76px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .66rem .72rem;
  border-radius: 14px;
  background: rgba(5, 20, 36, .78);
  border: 1px solid rgba(158,213,255,.12);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.13);
}
.shop-item-image-placeholder {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background:
    radial-gradient(circle at 42% 32%, rgba(255, 229, 145, .22), transparent 48%),
    linear-gradient(180deg, rgba(24, 59, 91, .92), rgba(5, 20, 36, .82));
  border: 1px solid rgba(246,190,82,.34);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), 0 6px 12px rgba(0,0,0,.2);
}
.shop-item-image-placeholder.has-image {
  overflow: hidden;
  padding: 0;
  background: rgba(5, 20, 36, .88);
}
.shop-item-image {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: block;
  padding: 4px;
  object-fit: contain;
}
.shop-item-image-placeholder span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #211508;
  background: linear-gradient(#ffd878, #e69627);
  font-size: 1rem;
  font-weight: 1000;
}
.shop-item-copy {
  min-width: 0;
}
.shop-item-copy strong,
.shop-item-copy span,
.shop-item-copy small {
  display: block;
}
.shop-item-copy strong {
  color: #fff0a7;
  font-size: 1rem;
}
.shop-item-copy span {
  margin-top: .12rem;
  color: #cfe9ff;
  font-size: .8rem;
  font-weight: 850;
}
.shop-item-copy small {
  margin-top: .12rem;
  color: var(--muted);
  font-size: .72rem;
}
.shop-item-copy .shop-item-cooldown {
  color: #ffe293;
  font-weight: 950;
}
.shop-item-copy .shop-item-purchase-limit {
  color: #d8e9f6;
  font-weight: 850;
}
.shop-buy-btn {
  min-width: 104px;
  min-height: 44px;
  padding: .28rem .65rem;
  border-radius: 12px;
  color: #211508;
  background: linear-gradient(#ffd878, #e69627);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), 0 7px 14px rgba(0,0,0,.24);
  font-weight: 950;
}
.shop-buy-btn:disabled {
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.12);
  box-shadow: none;
}
.privacy-settings-link {
  width: fit-content;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .8rem;
  text-decoration: none;
}

.inventory-modal.modal {
  width: min(620px, calc(100vw - 1.3rem));
}
.inventory-modal .modal-card {
  background: linear-gradient(180deg, #071a2d, #132f56 72%, #1a416d);
  border-color: rgba(246, 190, 82, .62);
}
.inventory-panel {
  display: grid;
  gap: .72rem;
}
.inventory-summary {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .58rem .82rem;
  border-radius: 12px;
  background: rgba(5, 20, 36, .72);
  border: 1px solid rgba(158,213,255,.16);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.13);
}
.inventory-summary span {
  color: #cfe9ff;
  font-size: .78rem;
  font-weight: 950;
  text-transform: uppercase;
}
.inventory-summary small {
  display: block;
  margin-top: .12rem;
  color: #8ecdf1;
  font-size: .66rem;
  line-height: 1.1;
  text-transform: none;
}
.inventory-summary strong {
  color: #fff0a7;
  font-size: 1.25rem;
  line-height: 1;
}
.inventory-slots {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .55rem;
}
@media (max-width: 620px) {
  .inventory-slots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.inventory-slot {
  min-height: 128px;
  display: grid;
  grid-template-rows: 48px 3.2em 1.05em;
  align-content: start;
  justify-items: center;
  gap: .28rem;
  padding: .62rem .46rem;
  border-radius: 14px;
  text-align: center;
  background: rgba(5, 20, 36, .78);
  border: 1px solid rgba(158,213,255,.12);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.13);
}
button.inventory-slot {
  cursor: pointer;
}
.inventory-slot.filled {
  border-color: rgba(246,190,82,.42);
  background: linear-gradient(180deg, rgba(32, 52, 78, .92), rgba(6, 25, 44, .86));
}
.inventory-slot.filled.selected {
  border-color: rgba(255, 226, 120, .95);
  box-shadow: 0 0 0 4px rgba(255, 205, 88, .18), inset 0 -4px 0 rgba(0,0,0,.13);
}
.inventory-slot-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background:
    radial-gradient(circle at 42% 32%, rgba(255, 229, 145, .22), transparent 48%),
    linear-gradient(180deg, rgba(24, 59, 91, .92), rgba(5, 20, 36, .82));
  border: 1px solid rgba(246,190,82,.34);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), 0 6px 12px rgba(0,0,0,.2);
}
.inventory-slot-icon.has-image {
  background: rgba(5, 20, 36, .88);
}
.inventory-slot-icon span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #211508;
  background: linear-gradient(#ffd878, #e69627);
  font-size: .95rem;
  font-weight: 1000;
}
.inventory-slot-image {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: block;
  padding: 3px;
  object-fit: contain;
}
.inventory-slot-name {
  max-width: 100%;
  min-height: 3.15em;
  display: -webkit-box;
  overflow: hidden;
  color: #fff0a7;
  font-size: .76rem;
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.inventory-slot-count {
  color: #cfe9ff;
  font-size: .72rem;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.inventory-use-btn {
  min-width: 58px;
  min-height: 30px;
  padding: .25rem .55rem;
  border-radius: 8px;
  color: #211508;
  background: linear-gradient(#ffe278, #e69a19);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.17);
  font-size: .72rem;
  font-weight: 950;
}
.inventory-use-btn:active {
  transform: translateY(1px);
}
.inventory-selection {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  padding: .65rem .75rem;
  border-radius: 14px;
  background: rgba(5, 20, 36, .78);
  border: 1px solid rgba(246,190,82,.24);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.13);
}
.inventory-selection-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(246,190,82,.34);
  background: rgba(5, 20, 36, .88);
}
.inventory-selection-image {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: block;
  padding: 4px;
  object-fit: contain;
}
.inventory-selection-copy {
  min-width: 0;
  display: grid;
  gap: .16rem;
}
.inventory-selection-copy strong,
.inventory-selection-empty strong {
  color: #fff0a7;
  font-size: .9rem;
}
.inventory-selection-copy small,
.inventory-selection-empty small {
  color: #8ecdf1;
  font-size: .68rem;
  line-height: 1.22;
}
.inventory-selection-copy span {
  color: #cfe9ff;
  font-size: .72rem;
  font-weight: 900;
}
.inventory-selection-empty {
  grid-column: 1 / -1;
  display: grid;
  gap: .15rem;
  text-align: center;
}
.inventory-slot-empty {
  color: rgba(207,233,255,.58);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.city-list-modal.modal {
  width: min(900px, calc(100vw - 1.4rem));
}
.city-list-modal .modal-card {
  background: linear-gradient(180deg, #071a2d, #15345f 72%, #214f83);
  border-color: rgba(246, 190, 82, .62);
}
.city-list-panel {
  display: grid;
  gap: .78rem;
}
.city-list-summary {
  min-height: 54px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .58rem .82rem;
  border-radius: 12px;
  background: rgba(5, 20, 36, .72);
  border: 1px solid rgba(158,213,255,.16);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.13);
}
.city-list-summary span {
  color: #cfe9ff;
  font-size: .78rem;
  font-weight: 950;
  text-transform: uppercase;
}
.city-list-summary strong {
  color: #fff0a7;
  font-size: 1.35rem;
  line-height: 1;
}
.city-list-syncing {
  flex: 1 1 100%;
  text-align: right;
  color: #cfe9ff;
  font-size: .72rem;
  font-weight: 850;
}
.report-nav-btn { position: relative; }
.report-unread-badge {
  position: absolute;
  top: 2px;
  right: 3px;
  z-index: 2;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid #f7df9d;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #a91f25;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .48);
  font: 900 11px/1 Arial, sans-serif;
  pointer-events: none;
}
.report-unread-badge[hidden] { display: none; }
.city-list-sync-error {
  flex: 1 1 auto;
  color: #ffc5ad;
  font-size: .72rem;
  font-weight: 850;
}
.city-list-sync-retry {
  min-height: 36px;
  padding: .25rem .72rem;
  border: 1px solid rgba(255, 225, 151, .62);
  border-radius: 8px;
  color: #251806;
  background: linear-gradient(#ffe18a, #d99a2f);
  font-weight: 950;
  cursor: pointer;
}
.city-list-toolbar {
  display: flex;
  justify-content: center;
  gap: 1.15rem;
  padding: .08rem .4rem .35rem;
}
.city-list-toolbar button {
  min-width: 126px;
  min-height: 48px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: .35rem .7rem;
  border-radius: 10px;
  color: var(--ink);
  background: linear-gradient(#1f5f9d, #123766);
  border: 1px solid rgba(158,213,255,.35);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.24), 0 8px 18px rgba(0,0,0,.22);
  font-weight: 950;
}
.city-list-toolbar button.active {
  color: #fff;
  background: linear-gradient(#3d98e3, #1b5b9d);
  border-color: rgba(255,255,255,.42);
}
.city-list-toolbar span {
  font-size: 1.08rem;
  line-height: 1;
}
.city-list-toolbar small {
  color: #cfe9ff;
  font-size: .68rem;
}
.city-list-rows {
  display: grid;
  gap: .55rem;
}
.city-list-row {
  min-height: 66px;
  display: grid;
  grid-template-columns: 54px 62px 58px minmax(104px, .9fr) minmax(120px, 1.1fr) minmax(94px, .75fr) 48px;
  align-items: center;
  gap: .42rem;
  padding: .42rem .52rem;
  border-radius: 14px;
  background: rgba(5, 20, 36, .78);
  border: 1px solid rgba(158,213,255,.08);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.13);
}
.city-list-row.main-city {
  background: linear-gradient(90deg, rgba(7,38,69,.95), rgba(8,27,48,.82));
}
.city-list-row.stronghold-city-row {
  border-color: rgba(245, 191, 73, .55);
  background: linear-gradient(135deg, rgba(23, 38, 59, .96), rgba(77, 55, 20, .9));
}
.city-list-locate,
.city-list-info {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(#19a8f1, #075d9f);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.28), 0 5px 10px rgba(0,0,0,.24);
  font-size: 1.5rem;
  font-weight: 950;
}
.city-list-info {
  justify-self: end;
  font-size: 1.35rem;
  background: linear-gradient(#1b6fb6, #063761);
}
.island-switcher-modal.modal {
  width: min(980px, calc(100vw - .7rem));
}
.island-switcher-modal .modal-card {
  max-height: min(90vh, 740px);
}
.island-map-shell {
  width: min(100%, 920px);
  display: grid;
  margin: .25rem auto .1rem;
}
.island-map-picker {
  position: relative;
  width: min(100%, 920px);
  height: min(64vh, 560px);
  min-height: 330px;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  cursor: grab;
  user-select: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
  touch-action: none;
  contain: layout paint style;
  isolation: isolate;
  border-radius: 16px;
  border: 1px solid rgba(175, 228, 255, .26);
  background:
    linear-gradient(90deg, rgba(184, 224, 255, .09) 0 1px, transparent 1px var(--island-grid-cell-w, 272px)),
    linear-gradient(rgba(184, 224, 255, .09) 0 1px, transparent 1px var(--island-grid-cell-h, 213px)),
    radial-gradient(circle at 50% 44%, rgba(80, 181, 224, .38), transparent 52%),
    #0d3555;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), inset 0 -16px 32px rgba(0,0,0,.22);
}
.island-map-picker.panning,
.island-map-picker.pinching {
  cursor: grabbing;
}
.island-map-picker::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.island-map-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  contain: layout style;
}
.island-map-canvas-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--island-grid-base-w, 1100px);
  height: var(--island-grid-base-h, 840px);
  transform: translate3d(var(--island-camera-x, 0px), var(--island-camera-y, 0px), 0) scale(var(--island-map-zoom, 1));
  transform-origin: left top;
  backface-visibility: hidden;
  will-change: transform;
  contain: layout style;
}
.island-map-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--island-grid-base-w, 1100px);
  height: var(--island-grid-base-h, 840px);
  min-width: 0;
  min-height: 0;
  transform: translate3d(0, 0, 0);
  transform-origin: left top;
  backface-visibility: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px var(--island-grid-cell-w, 272px)),
    linear-gradient(rgba(255,255,255,.09) 0 1px, transparent 1px var(--island-grid-cell-h, 213px)),
    radial-gradient(circle at 50% 50%, rgba(151, 226, 255, .2), transparent 40%),
    linear-gradient(180deg, rgba(27, 120, 159, .62) 0%, rgba(14, 85, 123, .62) 54%, rgba(11, 53, 83, .82) 100%);
}

.island-switcher-modal .modal-card #modalBody {
  scrollbar-width: none;
}

.island-switcher-modal .modal-card #modalBody::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.island-map-icon {
  position: absolute;
  left: var(--island-x);
  top: var(--island-y);
  width: var(--island-w);
  height: var(--island-h);
  min-width: 74px;
  min-height: 52px;
  max-width: 150px;
  max-height: 96px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  gap: .06rem;
  padding: .42rem .46rem;
  color: #fff7d7;
  text-align: center;
  border-radius: 50%;
  border: 3px solid rgba(255, 244, 181, .72);
  background: radial-gradient(circle at 38% 28%, #b8d784, #5f944f 74%);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.08), 0 9px 15px rgba(0,0,0,.28);
}
.island-map-icon.pine { background: radial-gradient(circle at 38% 28%, #afcf82, #416e4f 74%); }
.island-map-icon.marsh { background: radial-gradient(circle at 42% 32%, #b5cf80, #58765a 74%); }
.island-map-icon.woodland { background: radial-gradient(circle at 38% 28%, #a4c978, #3f6a43 74%); }
.island-map-icon.golden { background: radial-gradient(circle at 40% 28%, #d5cf83, #647d49 74%); }
.island-map-icon.active {
  color: #211508;
  border-color: #fff7c7;
  box-shadow: 0 0 0 5px rgba(255, 226, 147, .34), inset 0 0 0 5px rgba(255,255,255,.18), 0 12px 20px rgba(0,0,0,.34);
}
.island-map-icon.home::after {
  content: "Home";
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  padding: .08rem .34rem;
  border-radius: 999px;
  color: #211508;
  background: #ffe293;
  border: 1px solid rgba(255,255,255,.72);
  font-size: .52rem;
  font-weight: 1000;
  white-space: nowrap;
}
.island-map-icon:disabled {
  opacity: .58;
}
.island-map-name {
  max-width: 100%;
  overflow: hidden;
  font-size: .68rem;
  line-height: 1;
  font-weight: 1000;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 rgba(0,0,0,.55);
  white-space: nowrap;
}
.island-map-icon small {
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: .5rem;
  line-height: 1;
  font-weight: 850;
  opacity: .84;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
  white-space: nowrap;
}
.island-map-icon.home::after {
  content: none;
}
.island-map-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.32));
}
.island-map-connection {
  stroke: rgba(255, 236, 169, .48);
  stroke-width: .46;
  stroke-dasharray: 2.2 2.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.island-map-picker .island-map-icon {
  z-index: 2;
  width: var(--island-w);
  height: var(--island-h);
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  grid-template-rows: minmax(0, 1fr);
  place-items: stretch;
  gap: 0;
  padding: .18rem;
  color: #f6fbff;
  border-radius: 10px;
  border: 2px solid rgba(188, 231, 255, .5);
  background: rgba(5, 20, 34, .72);
  box-shadow: 0 11px 22px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.08);
  backface-visibility: hidden;
}
.island-map-picker .island-map-icon.active {
  color: #fff7d7;
  border-color: #ffe293;
  box-shadow: 0 0 0 4px rgba(255, 226, 147, .25), 0 13px 26px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.16);
}
.island-map-picker .island-map-icon.home {
  border-color: rgba(255, 214, 126, .78);
}
.island-map-thumb {
  position: relative;
  z-index: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 48%, rgba(80, 196, 225, .32), transparent 43%),
    linear-gradient(180deg, #0a5a7b, #062b45);
}
.island-map-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: saturate(1.08) contrast(1.04) drop-shadow(0 3px 5px rgba(0,0,0,.5));
  pointer-events: none;
  user-select: none;
}
.island-map-picker .island-map-name,
.island-map-owned {
  position: absolute;
  left: .24rem;
  right: .24rem;
  z-index: 2;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.island-map-picker .island-map-name {
  bottom: 1.15rem;
  color: #fff;
  font-size: .9rem;
  line-height: 1;
  font-weight: 1000;
  text-shadow: 0 2px 0 rgba(0,0,0,.55);
}
.island-map-owned {
  bottom: .38rem;
  color: #bfe4ff;
  font-size: .68rem;
  line-height: 1;
  font-weight: 950;
}
.island-map-home-label,
.island-map-active-label {
  position: absolute;
  top: -.34rem;
  z-index: 3;
  padding: .09rem .34rem;
  border-radius: 999px;
  color: #211508;
  background: #ffe293;
  border: 1px solid rgba(255,255,255,.72);
  font-size: .52rem;
  font-weight: 1000;
  line-height: 1;
  white-space: nowrap;
}
.island-map-home-label {
  right: -.28rem;
}
.island-map-active-label {
  left: -.28rem;
  color: #052032;
  background: #bfe4ff;
}
.island-switcher-panel {
  display: grid;
  gap: .55rem;
  padding-top: .4rem;
}
.island-switch-row {
  min-height: 58px;
  padding: .65rem .75rem;
  display: grid;
  gap: .16rem;
  text-align: left;
  border-radius: 14px;
  color: var(--ink);
  background: rgba(8, 15, 28, .74);
  border: 1px solid rgba(255,255,255,.12);
}
.island-switch-row.active {
  color: #211508;
  background: linear-gradient(#ffe293, #e9a83b);
  border-color: rgba(255,255,255,.65);
}
.island-switch-row:disabled {
  opacity: .58;
}
.island-switch-name {
  font-size: .95rem;
  font-weight: 1000;
}
.island-switch-row small {
  color: inherit;
  opacity: .78;
  font-weight: 850;
}
.city-list-art {
  width: 54px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.35));
}
.city-list-art img {
  display: block;
  width: 54px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.35));
}
.city-list-level {
  width: 38px;
  height: 42px;
  display: grid;
  place-items: center;
  justify-self: center;
  color: white;
  background: linear-gradient(#2387d7, #12528e);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
  text-shadow: 0 2px 0 rgba(0,0,0,.72);
}
.city-list-troops,
.city-list-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
  text-shadow: 0 2px 0 #000;
  font-size: 1.2rem;
}
.city-list-main-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(246,239,228,.78);
  font-style: italic;
  font-size: 1rem;
}
.city-list-empty {
  min-height: 92px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border-radius: 14px;
  background: rgba(5, 20, 36, .58);
}
.city-list-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  padding-top: .1rem;
}
.city-list-pager button {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  color: #fff;
  background: transparent;
  font-size: 2.2rem;
  font-weight: 950;
  text-shadow: 0 2px 0 rgba(0,0,0,.75);
}
.city-list-pager strong {
  min-width: 72px;
  text-align: center;
  font-size: 1.18rem;
  color: #fff;
  text-shadow: 0 2px 0 #000;
}

.battle-report-modal.modal {
  width: min(930px, calc(100vw - 1.4rem));
}
.battle-report-modal .modal-card {
  background: linear-gradient(180deg, #091b30, #173966 70%, #214c7e);
  border-color: rgba(246, 190, 82, .62);
}
.battle-report-panel {
  display: grid;
  gap: .7rem;
}
.battle-report-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
  padding-right: 2.3rem;
  color: rgba(246, 239, 228, .84);
  font-weight: 950;
}
.battle-report-filters {
  display: flex;
  gap: .42rem;
  flex-wrap: wrap;
}
.battle-report-filters button,
.battle-report-back,
.battle-report-detail-btn,
.battle-report-locate-btn {
  min-height: 36px;
  border-radius: 12px;
  padding: 0 .65rem;
  color: var(--ink);
  background: linear-gradient(#2f82d1, #174b87);
  border: 1px solid rgba(182, 222, 255, .42);
  font-weight: 950;
}
.battle-report-filters button.active {
  color: #1f1609;
  background: linear-gradient(#ffe293, #e9a83b);
  border-color: rgba(255,255,255,.58);
}
.battle-report-list {
  display: grid;
  gap: .5rem;
}
.battle-report-card {
  display: grid;
  grid-template-columns: 150px minmax(150px, 1fr) 120px minmax(160px, 1fr) 88px;
  align-items: center;
  gap: .55rem;
  min-height: 78px;
  padding: .5rem;
  border-radius: 8px;
  background: rgba(4, 15, 27, .72);
  border: 2px solid rgba(210, 224, 237, .42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.battle-report-card.victory { border-color: #92c744; }
.battle-report-card.defeat { border-color: #dc644f; }
.battle-report-card.scout { border-color: #c8d3e4; }
.battle-report-result {
  display: grid;
  place-items: center;
  gap: .1rem;
  min-height: 58px;
  border-radius: 8px;
  color: white;
  text-align: center;
  background: linear-gradient(#1f67b6, #114179);
  border: 1px solid rgba(255,255,255,.22);
}
.battle-report-card.defeat .battle-report-result { background: linear-gradient(#8f241d, #561313); }
.battle-report-card.scout .battle-report-result { background: linear-gradient(#556b82, #28394d); }
.battle-report-result strong,
.battle-report-city strong,
.battle-report-troops strong,
.battle-report-opponent strong,
.battle-report-detail-head strong {
  color: #fff;
  text-shadow: 0 2px 0 #06111c, 0 0 4px rgba(0,0,0,.65);
}
.battle-report-result small,
.battle-report-troops small,
.battle-report-detail-head small {
  color: rgba(246,239,228,.72);
}
.battle-report-city {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .45rem;
}
.battle-report-city span {
  min-width: 42px;
  padding: .26rem .4rem;
  border-radius: 0 0 8px 8px;
  color: white;
  text-align: center;
  background: linear-gradient(#2376c8, #145391);
  font-weight: 950;
}
.battle-report-card.defeat .battle-report-city span,
.battle-report-card.scout .battle-report-city span {
  background: linear-gradient(#ca3328, #831912);
}
.battle-report-city strong,
.battle-report-opponent strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.battle-report-opponent {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: .45rem;
}
.battle-report-opponent strong {
  min-width: 0;
}
.battle-report-target-flag {
  flex: 0 0 auto;
  width: 34px;
  height: 38px;
}
.battle-report-troops {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .12rem .32rem;
  align-items: center;
}
.battle-report-troops span {
  grid-row: span 2;
  font-size: 1.65rem;
}
.battle-report-actions {
  display: flex;
  justify-content: flex-end;
  gap: .35rem;
}
.battle-report-detail-btn,
.battle-report-locate-btn {
  width: 42px;
  min-width: 42px;
  padding: 0;
  font-size: 1.2rem;
}
.battle-report-locate-btn {
  color: #1b0e05;
  background: linear-gradient(#fff1a5, #f2a83c);
  border-color: rgba(255,255,255,.38);
}
.battle-report-locate-btn:disabled {
  opacity: .45;
}
.battle-report-empty {
  padding: 1.2rem;
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
  background: rgba(4, 15, 27, .66);
  border: 1px solid rgba(255,255,255,.12);
}
.battle-report-detail {
  display: grid;
  gap: .8rem;
}
.battle-report-back {
  justify-self: start;
}
.battle-report-detail-head {
  display: grid;
  gap: .15rem;
  padding: .85rem;
  border-radius: 12px;
  background: rgba(4, 15, 27, .72);
  border: 1px solid rgba(255,255,255,.12);
}
.battle-report-locate-detail {
  justify-self: end;
  margin-top: -.2rem;
}
.battle-report-detail-head span {
  width: max-content;
  padding: .22rem .5rem;
  border-radius: 8px;
  color: #1f1609;
  background: linear-gradient(#ffe293, #e9a83b);
  font-weight: 950;
}
.battle-report-detail.defeat .battle-report-detail-head span {
  color: white;
  background: linear-gradient(#aa2d25, #631711);
}
.battle-report-detail.scout .battle-report-detail-head span {
  color: white;
  background: linear-gradient(#667c93, #2d4056);
}
.battle-report-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
.battle-report-detail-grid div {
  min-width: 0;
  padding: .65rem;
  border-radius: 10px;
  background: rgba(4, 15, 27, .62);
  border: 1px solid rgba(255,255,255,.1);
}
.battle-report-detail-grid span,
.battle-report-detail-grid strong {
  display: block;
}
.battle-report-detail-grid span {
  color: rgba(246,239,228,.72);
  font-size: .78rem;
}
.battle-report-detail-loading,
.battle-report-detail-notice {
  margin: 0;
  padding: .85rem;
  border: 1px solid rgba(157, 204, 228, .24);
  border-radius: 12px;
  color: #cde7f4;
  background: rgba(4, 15, 27, .62);
}
.battle-visual-report {
  gap: .7rem;
}
.battle-visual-navigation {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(160px, 1.4fr) minmax(44px, 1fr);
  gap: .55rem;
  align-items: center;
  padding: .18rem .1rem;
}
.battle-visual-navigation .battle-report-back {
  justify-self: start;
}
.battle-visual-navigation .battle-report-locate-detail {
  justify-self: end;
  margin: 0;
}
.battle-visual-title {
  display: grid;
  gap: .08rem;
  text-align: center;
}
.battle-visual-title strong {
  color: #fff4d3;
  font-size: 1.12rem;
  text-shadow: 0 2px 0 #020b13;
}
.battle-visual-title small {
  color: rgba(220, 237, 248, .7);
  font-size: .66rem;
}
.battle-visual-target,
.battle-visual-rule,
.battle-visual-section,
.battle-visual-wall,
.battle-visual-rewards {
  border: 1px solid rgba(211, 161, 63, .3);
  border-radius: 13px;
  background: rgba(4, 15, 27, .72);
}
.battle-visual-target {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .42rem;
  padding: .48rem .7rem;
  text-align: center;
}
.battle-visual-target > span,
.battle-visual-target > small {
  color: rgba(205, 231, 244, .7);
  font-size: .66rem;
}
.battle-visual-target > strong {
  color: #ffe29a;
  font-size: .9rem;
}
.battle-visual-rule {
  padding: .42rem .65rem;
  color: #cde7f4;
  font-size: .7rem;
  text-align: center;
}
.battle-visual-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, .56fr) minmax(0, 1fr);
  gap: .65rem;
  align-items: center;
  padding: .78rem;
  border: 1px solid rgba(211, 161, 63, .38);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 40%, rgba(39, 104, 156, .3), transparent 38%),
    linear-gradient(180deg, rgba(8, 31, 54, .94), rgba(9, 27, 48, .9));
  box-shadow: inset 0 0 34px rgba(59, 129, 185, .1), 0 10px 28px rgba(0, 0, 0, .22);
}
.battle-visual-hero-side {
  display: grid;
  justify-items: center;
  gap: .38rem;
  min-width: 0;
  text-align: center;
}
.battle-visual-side-label {
  color: #ffe29a;
  font-size: .64rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.battle-report-hero-flag.kingdom-flag-large {
  width: 116px;
  height: 88px;
  border-width: 3px;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, .38));
}
.battle-report-hero-flag.kingdom-flag-large .flag-symbol {
  font-size: 2.35rem;
}
.battle-visual-hero-side.viewer .battle-report-hero-flag {
  box-shadow: 0 0 0 2px rgba(255, 226, 154, .38), 0 0 18px rgba(246, 190, 82, .17);
}
.battle-visual-ruler {
  display: grid;
  gap: .02rem;
  max-width: 100%;
}
.battle-visual-ruler .player-name-link {
  justify-content: center;
  max-width: 100%;
  color: #fff;
  font-size: .9rem;
  font-weight: 950;
}
.battle-visual-ruler small {
  color: rgba(205, 231, 244, .68);
  font-size: .6rem;
  overflow-wrap: anywhere;
}
.battle-visual-power {
  min-width: min(100%, 170px);
  padding: .4rem .65rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(2, 13, 24, .55);
}
.battle-visual-power.attacker { border-color: rgba(230, 104, 75, .35); }
.battle-visual-power.defender { border-color: rgba(89, 177, 230, .35); }
.battle-visual-power span,
.battle-visual-power strong {
  display: block;
}
.battle-visual-power span {
  color: rgba(205, 231, 244, .72);
  font-size: .58rem;
}
.battle-visual-power strong {
  margin-top: .05rem;
  color: #ffe29a;
  font-size: 1.04rem;
}
.battle-visual-troop-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: .32rem;
  align-items: center;
  width: 100%;
  padding: .34rem .5rem;
  border-radius: 9px;
  color: #f8fbff;
  background: rgba(41, 111, 166, .48);
}
.battle-visual-troop-flow strong { font-size: .8rem; }
.battle-visual-troop-flow span { color: #ffe29a; }
.battle-visual-losses {
  color: #f2a592;
  font-size: .6rem;
}
.battle-visual-outcome {
  display: grid;
  justify-items: center;
  gap: .35rem;
  min-width: 0;
  text-align: center;
}
.battle-visual-outcome > span {
  min-width: 106px;
  padding: .38rem .65rem;
  border: 1px solid rgba(255, 226, 154, .45);
  border-radius: 9px 9px 18px 18px;
  color: #fff7dc;
  background: linear-gradient(#d49d32, #825014);
  box-shadow: inset 0 -4px 0 rgba(44, 24, 5, .35), 0 5px 13px rgba(0,0,0,.32);
  font-size: .78rem;
  font-weight: 1000;
  letter-spacing: .05em;
}
.battle-visual-outcome.defeat > span {
  border-color: rgba(255, 160, 139, .48);
  background: linear-gradient(#b94535, #651b18);
}
.battle-visual-outcome > strong {
  color: #d7edfa;
  font-size: .65rem;
  line-height: 1.25;
}
.battle-visual-section,
.battle-visual-wall,
.battle-visual-rewards {
  display: grid;
  gap: .55rem;
  padding: .68rem;
}
.battle-visual-section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  color: #ffe29a;
  text-align: center;
}
.battle-visual-section-title > span { font-size: 1rem; }
.battle-visual-section-title h3 {
  margin: 0;
  color: inherit;
  font-size: .88rem;
}
.battle-visual-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .62rem;
}
.battle-visual-detail-card,
.battle-visual-bonus-card {
  display: grid;
  align-content: start;
  gap: .3rem;
  min-width: 0;
  padding: .54rem;
  border: 1px solid rgba(255,255,255,.1);
  border-top-width: 3px;
  border-radius: 11px;
  background: rgba(11, 39, 67, .68);
}
.battle-visual-detail-card.attacker,
.battle-visual-bonus-card.attacker { border-top-color: #d46a4d; }
.battle-visual-detail-card.defender,
.battle-visual-bonus-card.defender { border-top-color: #72b6df; }
.battle-visual-detail-card h4,
.battle-visual-bonus-card h4 {
  margin: 0 0 .12rem;
  color: #d7edfa;
  font-size: .7rem;
  text-align: center;
}
.battle-visual-detail-row,
.battle-visual-bonus-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(76px, auto);
  gap: .38rem;
  align-items: center;
  min-width: 0;
  padding: .38rem .42rem;
  border-radius: 8px;
  background: rgba(3, 18, 32, .45);
}
.battle-visual-detail-icon,
.battle-visual-bonus-row > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: #fff4d3;
  background: rgba(40, 104, 151, .65);
  font-size: .92rem;
}
.battle-visual-detail-row > div,
.battle-visual-bonus-row > div {
  display: grid;
  gap: .03rem;
  min-width: 0;
}
.battle-visual-detail-row > div > span,
.battle-visual-bonus-row > div > strong {
  color: #d8edf8;
  font-size: .65rem;
}
.battle-visual-detail-row small,
.battle-visual-bonus-row small {
  color: rgba(205, 231, 244, .56);
  font-size: .53rem;
  overflow-wrap: anywhere;
}
.battle-visual-detail-row > strong,
.battle-visual-bonus-row > b {
  color: #fff4d3;
  font-size: .71rem;
  text-align: right;
  overflow-wrap: anywhere;
}
.battle-visual-no-bonus {
  display: grid;
  min-height: 58px;
  place-items: center;
  padding: .5rem;
  border-radius: 8px;
  color: rgba(205, 231, 244, .58);
  background: rgba(3, 18, 32, .36);
  font-size: .62rem;
  text-align: center;
}
.battle-visual-wall.breached {
  border-color: rgba(210, 81, 64, .45);
}
.battle-visual-wall-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: .7rem;
  align-items: center;
}
.battle-visual-wall-grid > div {
  display: grid;
  gap: .08rem;
  padding: .5rem;
  border-radius: 9px;
  text-align: center;
  background: rgba(3, 18, 32, .48);
}
.battle-visual-wall-grid span,
.battle-visual-wall-grid small {
  color: rgba(205, 231, 244, .65);
  font-size: .58rem;
}
.battle-visual-wall-grid strong {
  color: #fff4d3;
  font-size: .76rem;
}
.battle-visual-wall-arrow {
  color: #ffe29a !important;
  font-size: 1rem !important;
}
.battle-participant-metric {
  min-width: 0;
  padding: .48rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  background: rgba(255,255,255,.045);
}
.battle-participant-metric > span,
.battle-participant-metric > strong,
.battle-participant-metric > small {
  display: block;
  overflow-wrap: anywhere;
}
.battle-participant-metric > span {
  color: #9dcce4;
  font-size: .65rem;
}
.battle-participant-metric > strong {
  margin-top: .1rem;
  color: #ffe29a;
  font-size: .82rem;
}
.battle-participant-metric > small {
  margin-top: .1rem;
  color: rgba(246,239,228,.64);
  font-size: .61rem;
}
.battle-viewer-rewards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .38rem;
}
.scout-attempt-explanation {
  border: 1px solid rgba(211, 161, 63, .26);
  border-radius: 12px;
  background: rgba(4, 15, 27, .72);
}

.scout-attempt-explanation {
  display: grid;
  gap: .48rem;
  padding: .72rem;
}

.scout-attempt-explanation > h3,
.scout-attempt-explanation > p {
  margin: 0;
}

.scout-attempt-explanation > h3 {
  color: #ffe29a;
}

.scout-attempt-explanation > p,
.scout-attempt-explanation > small {
  color: rgba(246, 239, 228, .76);
  font-size: .75rem;
}

.objective-clan-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .55rem;
  width: 100%;
  min-height: 48px;
  padding: .3rem .45rem;
  color: #f8e8bd;
  text-align: left;
  border: 1px solid rgba(211,161,63,.28);
  border-radius: 10px;
  background: rgba(211,161,63,.09);
}
.objective-clan-link > span {
  display: grid;
  min-width: 0;
}
.objective-clan-link small {
  color: #9dcce4;
  font-size: .68rem;
}

.leaderboard-modal.modal {
  width: min(820px, calc(100vw - 1.4rem));
}
.leaderboard-modal .modal-card {
  background: linear-gradient(180deg, #0a2237, #102c4a 62%, #07131f);
  border-color: rgba(242, 184, 75, .58);
}
.leaderboard-panel {
  display: grid;
  gap: .7rem;
}
.leaderboard-tabs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  padding-right: 2.3rem;
}
.leaderboard-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: .28rem;
  min-width: min(390px, 100%);
  padding: .26rem;
  border: 1px solid rgba(158,213,255,.2);
  border-radius: 12px;
  background: rgba(3, 13, 24, .68);
}
.leaderboard-tab {
  min-height: 40px;
  padding: .4rem .8rem;
  border: 1px solid transparent;
  border-radius: 9px;
  color: rgba(246,239,228,.78);
  background: transparent;
  font-weight: 950;
}
.leaderboard-tab:hover,
.leaderboard-tab:focus-visible {
  color: #fff4c8;
  border-color: rgba(255,226,147,.36);
  background: rgba(42, 83, 119, .42);
}
.leaderboard-tab.active {
  color: #211508;
  border-color: rgba(255,255,255,.44);
  background: linear-gradient(#ffe293, #d9962e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 5px 12px rgba(0,0,0,.24);
}
.leaderboard-refresh-btn {
  min-height: 40px;
  padding: 0 .85rem;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 10px;
  color: #211508;
  background: linear-gradient(#ffe293, #e9a83b);
  font-weight: 950;
}
.leaderboard-tab-panel {
  display: grid;
  gap: .7rem;
}
.leaderboard-tab-panel[hidden] {
  display: none;
}
.leaderboard-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding-right: 2.3rem;
}
.leaderboard-toolbar strong,
.leaderboard-toolbar small {
  display: block;
}
.leaderboard-toolbar strong {
  color: #ffe29a;
}
.leaderboard-toolbar small {
  margin-top: .12rem;
  color: rgba(246,239,228,.72);
  font-size: .74rem;
  font-weight: 850;
}
.leaderboard-toolbar button {
  min-height: 38px;
  border-radius: 12px;
  padding: 0 .8rem;
  color: #211508;
  background: linear-gradient(#ffe293, #e9a83b);
  border: 1px solid rgba(255,255,255,.42);
  font-weight: 950;
}
.leaderboard-list {
  display: grid;
  gap: .46rem;
}
.leaderboard-row {
  display: grid;
  grid-template-columns: 54px 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  min-height: 66px;
  padding: .48rem .58rem;
  border-radius: 8px;
  background: rgba(4, 15, 27, .68);
  border: 1px solid rgba(158,213,255,.18);
}
.leaderboard-row.current {
  border-color: rgba(255, 226, 147, .8);
  box-shadow: inset 0 0 0 1px rgba(255, 226, 147, .24), 0 0 18px rgba(242, 184, 75, .16);
}
.leaderboard-rank {
  display: grid;
  place-items: center;
  min-height: 42px;
  border-radius: 8px;
  color: #211508;
  background: linear-gradient(#ffe293, #d9962e);
  font-weight: 1000;
}
.leaderboard-flag {
  width: 38px;
  height: 30px;
}
.leaderboard-ruler {
  min-width: 0;
}
.leaderboard-ruler strong,
.leaderboard-ruler small,
.leaderboard-power strong,
.leaderboard-power small {
  display: block;
}
.leaderboard-ruler strong {
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leaderboard-ruler small,
.leaderboard-power small {
  color: rgba(246,239,228,.68);
  font-size: .68rem;
  font-weight: 850;
}
.leaderboard-power {
  min-width: 92px;
  text-align: right;
}
.leaderboard-power strong {
  color: #fff4c8;
  font-size: 1.08rem;
  text-shadow: 0 2px 0 rgba(0,0,0,.7);
}
.leaderboard-empty {
  padding: 1.1rem;
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
  background: rgba(4, 15, 27, .62);
  border: 1px solid rgba(255,255,255,.12);
}

.incoming-attack-modal.modal,
.outgoing-attack-modal.modal {
  width: min(900px, calc(100vw - 1.4rem));
}
.incoming-attack-modal .modal-card {
  background: linear-gradient(180deg, #3b1218, #151018 68%, #07131f);
  border-color: rgba(255, 112, 86, .62);
  box-shadow: 0 28px 80px rgba(0,0,0,.58), 0 0 36px rgba(255, 58, 42, .16);
}
.outgoing-attack-modal .modal-card {
  background: linear-gradient(180deg, #102c4b, #121827 68%, #07131f);
  border-color: rgba(122, 203, 255, .58);
  box-shadow: 0 28px 80px rgba(0,0,0,.58), 0 0 36px rgba(79, 177, 255, .16);
}
.active-operations-panel {
  display: grid;
  gap: .7rem;
}
.active-operations-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(132, 199, 239, .3);
  border-radius: 8px;
  background: rgba(2, 14, 25, .72);
}
.active-operations-tab {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  padding: .45rem .55rem;
  color: #b8d7ea;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 900;
}
.active-operations-tab strong {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0 .3rem;
  border-radius: 5px;
  color: #dff5ff;
  background: rgba(91, 166, 210, .2);
  font-family: var(--font-ui);
  font-size: .68rem;
}
.active-operations-tab.active {
  color: #fff0b8;
  border-color: rgba(255, 210, 102, .52);
  background: linear-gradient(180deg, rgba(50, 91, 124, .96), rgba(18, 49, 78, .96));
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.22);
}
.active-operations-tab.active strong {
  color: #241304;
  background: linear-gradient(#ffe69b, #d99528);
}
.active-operations-content {
  min-width: 0;
}
.incoming-attack-panel {
  display: grid;
  gap: .7rem;
}
.incoming-attack-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .1rem .65rem;
  align-items: center;
  padding: .72rem .82rem;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(185, 31, 37, .34), rgba(255,255,255,.06));
  border: 1px solid rgba(255, 155, 121, .26);
}
.incoming-attack-summary strong {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(#f24b38, #8b1522);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.26);
}
.incoming-attack-summary span {
  color: #fff2d4;
  font-weight: 950;
}
.incoming-attack-summary small {
  color: #ffc6b3;
  font-weight: 850;
}
.outgoing-attack-modal .incoming-attack-summary {
  background: linear-gradient(90deg, rgba(31, 112, 185, .34), rgba(255,255,255,.06));
  border-color: rgba(122, 203, 255, .28);
}
.outgoing-attack-modal .incoming-attack-summary strong {
  background: linear-gradient(#72d1ff, #1e67b3);
}
.outgoing-attack-modal .incoming-attack-summary span {
  color: #eaf8ff;
}
.outgoing-attack-modal .incoming-attack-summary small {
  color: #bfe7ff;
}
.outgoing-attack-modal .active-objective-summary {
  background: linear-gradient(90deg, rgba(110, 72, 19, .45), rgba(27, 70, 102, .38));
  border-color: rgba(255, 205, 103, .34);
}
.outgoing-attack-modal .active-objective-summary strong {
  color: #241304;
  background: linear-gradient(#ffe69b, #c88625);
}
.outgoing-attack-modal .active-objective-summary span {
  color: #fff0bf;
}
.outgoing-attack-modal .active-objective-summary small {
  color: #cae8f8;
}
.incoming-attack-list {
  display: grid;
  gap: .52rem;
}
.incoming-attack-card {
  display: grid;
  grid-template-columns: 94px minmax(0, 1.25fr) minmax(0, 1fr) 48px;
  gap: .55rem;
  align-items: stretch;
  padding: .58rem;
  border-radius: 14px;
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255, 155, 121, .2);
}
.incoming-attack-card.incoming-scout-card {
  border-color: rgba(122, 203, 255, .26);
}
.incoming-attack-card.citadel-assault-card {
  border-color: rgba(255, 92, 72, .64);
  box-shadow: inset 0 0 0 1px rgba(255, 190, 82, .14), 0 10px 24px rgba(76, 14, 9, .24);
}
.citadel-assault-card .incoming-attack-badge {
  color: #fff0d0;
  background: linear-gradient(180deg, #a63127, #4d120e);
}
.incoming-attack-card.outgoing-attack-card {
  border-color: rgba(122, 203, 255, .24);
}
.incoming-attack-badge,
.incoming-attack-city,
.incoming-attack-force {
  min-width: 0;
  padding: .5rem .58rem;
  border-radius: 11px;
  background: rgba(0,0,0,.22);
}
.incoming-attack-badge {
  display: grid;
  place-items: center;
  text-align: center;
  background: linear-gradient(#f6b252, #9d2b24);
}
.incoming-scout-card .incoming-attack-badge {
  background: linear-gradient(#8bd7ff, #1d5f9f);
}
.outgoing-attack-card .incoming-attack-badge {
  background: linear-gradient(#8bd7ff, #1d5f9f);
}
.outgoing-scout-card .incoming-attack-badge {
  background: linear-gradient(#8fffd7, #188a75);
}
.active-objective-card.held-camp-operation-card .active-objective-badge {
  background: linear-gradient(#ffe69b, #b8731f);
}
.active-objective-card.held-stronghold-operation-card .active-objective-badge {
  background: linear-gradient(#ffe99f, #467fa6);
}
.active-objective-card .active-objective-badge strong {
  color: #251505;
}
.active-objective-card .active-objective-badge small {
  color: rgba(37, 21, 5, .78);
}
.incoming-attack-badge strong {
  color: #231005;
  font-size: .9rem;
  font-weight: 1000;
}
.incoming-scout-card .incoming-attack-badge strong,
.outgoing-attack-card .incoming-attack-badge strong {
  color: #061527;
}
.incoming-attack-badge small {
  color: rgba(35, 16, 5, .74);
  font-size: .58rem;
  font-weight: 1000;
  text-transform: uppercase;
}
.incoming-scout-card .incoming-attack-badge small,
.outgoing-attack-card .incoming-attack-badge small {
  color: rgba(6, 21, 39, .78);
}
.incoming-attack-city span,
.incoming-attack-force span {
  display: block;
  color: #ffc0aa;
  font-size: .62rem;
  font-weight: 1000;
  text-transform: uppercase;
}
.outgoing-attack-card .incoming-attack-city span,
.outgoing-attack-card .incoming-attack-force span {
  color: #aee3ff;
}
.incoming-attack-city strong,
.incoming-attack-force strong {
  display: block;
  overflow: hidden;
  color: #fff4c8;
  font-size: .92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.incoming-attack-city small,
.incoming-attack-force small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.outgoing-attack-card .incoming-attack-city strong,
.outgoing-attack-card .incoming-attack-force strong {
  color: #eaf8ff;
}
.incoming-attack-locate {
  width: 48px;
  min-height: 48px;
  align-self: stretch;
  border-radius: 12px;
  color: #1b0e05;
  background: linear-gradient(#fff1a5, #f2a83c);
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.18);
  font-size: 1.35rem;
  font-weight: 1000;
}
.outgoing-attack-card .incoming-attack-locate {
  color: #061527;
  background: linear-gradient(#d8f7ff, #66bdf0);
}
.march-item-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .45rem;
}
.swift-march-order-btn,
.swift-march-order-used,
.recall-horn-btn,
.recall-horn-status {
  min-height: 36px;
  padding: .45rem .72rem;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
}
.swift-march-order-btn {
  color: #211508;
  border: 1px solid rgba(255, 244, 186, .68);
  background: linear-gradient(180deg, #ffe88c, #d38b19);
  box-shadow: inset 0 -3px 0 rgba(82, 43, 4, .2), 0 5px 12px rgba(0, 0, 0, .22);
}
.swift-march-order-btn:disabled,
.recall-horn-btn:disabled {
  cursor: wait;
  opacity: .68;
}
.swift-march-order-used,
.recall-horn-status {
  display: grid;
  place-items: center;
  color: #aee3ff;
  border: 1px solid rgba(111, 190, 230, .3);
  background: rgba(12, 55, 83, .54);
}
.recall-horn-btn {
  color: #fff2ce;
  border: 1px solid rgba(148, 205, 238, .58);
  background: linear-gradient(180deg, #276f99, #0b3555);
  box-shadow: inset 0 -3px 0 rgba(2, 18, 31, .3), 0 5px 12px rgba(0, 0, 0, .22);
}
.recall-horn-status {
  color: #d9f3ff;
  border: 1px solid rgba(111, 190, 230, .34);
  background: rgba(10, 54, 80, .72);
}
.outgoing-return-card .incoming-attack-badge {
  background: linear-gradient(#d8f7ff, #4a93c5);
}
.incoming-attack-empty {
  padding: .9rem;
  border-radius: 14px;
  color: var(--muted);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line);
  text-align: center;
}

@media (max-width: 760px) {
  .battle-report-modal.modal {
    width: min(560px, calc(100vw - 1rem));
  }
  .battle-report-toolbar {
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    padding-right: 2rem;
  }
  .battle-report-card {
    grid-template-columns: 1fr 42px;
    gap: .45rem;
  }
  .battle-report-result,
  .battle-report-city,
  .battle-report-troops,
  .battle-report-opponent {
    grid-column: 1;
  }
  .battle-report-actions {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: stretch;
    flex-direction: column;
  }
  .battle-report-detail-btn,
  .battle-report-locate-btn {
    height: auto;
  }
  .battle-report-detail-grid {
    grid-template-columns: 1fr;
  }
  .battle-visual-navigation {
    grid-template-columns: minmax(88px, 1fr) minmax(110px, 1.25fr) minmax(38px, 1fr);
    gap: .28rem;
  }
  .battle-visual-navigation button {
    padding-inline: .45rem;
    font-size: .58rem;
  }
  .battle-visual-title strong { font-size: .86rem; }
  .battle-visual-target {
    flex-wrap: wrap;
    gap: .2rem .38rem;
    padding: .38rem .45rem;
  }
  .battle-visual-target > small {
    flex-basis: 100%;
  }
  .battle-visual-hero {
    grid-template-columns: minmax(0, 1fr) minmax(82px, .48fr) minmax(0, 1fr);
    gap: .3rem;
    padding: .5rem .38rem;
  }
  .battle-report-hero-flag.kingdom-flag-large {
    width: 72px;
    height: 55px;
  }
  .battle-report-hero-flag.kingdom-flag-large .flag-symbol { font-size: 1.45rem; }
  .battle-visual-ruler .player-name-link { font-size: .69rem; }
  .battle-visual-ruler small,
  .battle-visual-side-label,
  .battle-visual-power span,
  .battle-visual-losses { font-size: .47rem; }
  .battle-visual-power {
    min-width: 0;
    width: 100%;
    padding: .28rem .25rem;
  }
  .battle-visual-power strong { font-size: .75rem; }
  .battle-visual-troop-flow {
    gap: .14rem;
    padding: .26rem .2rem;
  }
  .battle-visual-troop-flow strong { font-size: .61rem; }
  .battle-visual-outcome > span {
    min-width: 76px;
    padding: .3rem .28rem;
    font-size: .58rem;
  }
  .battle-visual-outcome > strong { font-size: .48rem; }
  .battle-visual-section,
  .battle-visual-wall,
  .battle-visual-rewards { padding: .45rem; }
  .battle-visual-two-column { gap: .3rem; }
  .battle-visual-detail-card,
  .battle-visual-bonus-card { padding: .34rem; }
  .battle-visual-detail-row,
  .battle-visual-bonus-row {
    grid-template-columns: 22px minmax(0, 1fr) minmax(54px, auto);
    gap: .22rem;
    padding: .28rem .24rem;
  }
  .battle-visual-detail-icon,
  .battle-visual-bonus-row > span {
    width: 22px;
    height: 22px;
    font-size: .68rem;
  }
  .battle-visual-detail-row > div > span,
  .battle-visual-bonus-row > div > strong,
  .battle-visual-detail-row > strong,
  .battle-visual-bonus-row > b { font-size: .53rem; }
  .battle-visual-detail-row small,
  .battle-visual-bonus-row small { font-size: .43rem; }
  .battle-visual-wall-grid { gap: .3rem; }
  .battle-viewer-rewards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .battle-participant-metric {
    padding: .35rem;
  }
  .battle-participant-metric > span {
    font-size: .54rem;
  }
  .battle-participant-metric > strong {
    font-size: .69rem;
  }
  .battle-participant-metric > small {
    font-size: .56rem;
  }
  .leaderboard-modal.modal {
    width: min(560px, calc(100vw - 1rem));
  }
  .leaderboard-tabs-header {
    align-items: stretch;
    flex-direction: column;
    padding-right: 2rem;
  }
  .leaderboard-tabs {
    min-width: 0;
    width: 100%;
  }
  .leaderboard-refresh-btn {
    width: 100%;
  }
  .leaderboard-toolbar {
    align-items: flex-start;
    flex-direction: column;
    padding-right: 2rem;
  }
  .leaderboard-row {
    grid-template-columns: 46px 38px minmax(0, 1fr);
  }
  .leaderboard-power {
    grid-column: 3;
    text-align: left;
  }
  .incoming-attack-modal.modal,
  .outgoing-attack-modal.modal {
    width: min(560px, calc(100vw - 1rem));
  }
  .incoming-attack-card {
    grid-template-columns: 78px minmax(0, 1fr) 46px;
  }
  .active-operations-tab {
    gap: .24rem;
    padding-inline: .28rem;
    font-size: .65rem;
  }
  .active-operations-tab strong {
    min-width: 19px;
    height: 19px;
    padding-inline: .2rem;
    font-size: .6rem;
  }
  .incoming-attack-force {
    grid-column: 2 / 3;
  }
  .incoming-attack-locate {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

@media (max-height: 720px) {
  .map-frame { inset-bottom: 150px; }
  .city-node { width: 58px; height: 58px; }
  .city-node.castle-stage-1 { --city-art-size: 61px; }
  .city-node.castle-stage-2 { --city-art-size: 64px; }
  .city-node.castle-stage-3 { --city-art-size: 67px; }
  .city-node.castle-stage-4 { --city-art-size: 70px; }
  .city-node.castle-stage-5 { --city-art-size: 73px; }
  .city-shield-field { bottom: -18px; }
  .city-castle { bottom: -7px; }
  .city-label { bottom: 70px; }
  .city-action-wheel { --wheel-scale: .86; }
  .commander-panel { min-height: 113px; }
  .toast { bottom: 232px; }
}


.battle-preview { display: grid; gap: .7rem; }
.battle-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  padding: .75rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.07);
}
.battle-result strong { font-size: 1.05rem; }
.battle-result span { color: var(--muted); font-size: .82rem; font-weight: 900; text-align: right; }
.battle-preview.win .battle-result { box-shadow: inset 0 0 0 1px rgba(126,179,95,.35); }
.battle-preview.lose .battle-result { box-shadow: inset 0 0 0 1px rgba(237,74,69,.42); }
.battle-preview p { margin: 0; }
.tiny-warning { font-size: .78rem; color: #e7d8bd; opacity: .86; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .1rem; }
.modal-actions button { min-height: 44px; border-radius: 14px; font-weight: 950; }
.modal-actions .danger-action { color: white; background: linear-gradient(#ff665e, #bd302a); }
.modal-actions .safe-action { color: var(--ink); background: rgba(255,255,255,.1); border: 1px solid var(--line); }

.offline-reward-modal.modal { width: min(520px, calc(100% - 1.3rem)); }
.offline-reward-modal .modal-card {
  background: linear-gradient(180deg, #102b44, #132033 68%, #11151f);
  border-color: rgba(255, 214, 126, .55);
}
.offline-reward-panel {
  display: grid;
  gap: .78rem;
}
.offline-reward-panel p {
  margin: 0;
}
.offline-reward-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}
.offline-reward-grid div {
  min-width: 0;
  padding: .8rem;
  border-radius: 14px;
  background: rgba(5, 16, 28, .72);
  border: 1px solid rgba(255,255,255,.12);
}
.offline-reward-grid span,
.offline-reward-grid strong,
.offline-reward-grid small {
  display: block;
}
.offline-reward-grid span,
.offline-reward-grid small {
  color: var(--muted);
  font-size: .78rem;
}
.offline-reward-grid strong {
  margin-top: .15rem;
  color: #fff4c8;
  font-size: 1.55rem;
  line-height: 1.1;
}
.offline-lost-cities {
  padding: .78rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 167, 126, .32);
  background: rgba(54, 18, 18, .38);
}
.offline-lost-cities.safe {
  border-color: rgba(126, 179, 95, .28);
  background: rgba(17, 47, 32, .36);
}
.offline-lost-cities span,
.offline-lost-cities small {
  display: block;
  color: var(--muted);
  font-size: .78rem;
}
.offline-lost-cities strong {
  display: block;
  margin-top: .12rem;
  color: #fff4c8;
  font-size: 1.25rem;
}
.offline-lost-cities ul {
  list-style: none;
  display: grid;
  gap: .32rem;
  margin: .5rem 0 0;
  padding: 0;
}
.offline-lost-cities li {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  min-width: 0;
  color: #fff;
  font-weight: 900;
}
.offline-lost-cities li small {
  flex: 0 0 auto;
}
.offline-collect-btn {
  min-height: 46px;
  border-radius: 14px;
  color: #211508;
  background: linear-gradient(#ffe58e, #e5a83b);
  font-weight: 950;
}
@media (max-width: 540px) {
  .offline-reward-grid {
    grid-template-columns: 1fr;
  }
}

.modal.troop-slider-modal { width: min(720px, calc(100% - 1.3rem)); }
.modal.scout-report-modal { width: min(820px, calc(100% - 1.3rem)); }
.detailed-scout-report { display: grid; gap: .72rem; }
.scout-report-identities {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
  gap: .7rem;
  align-items: center;
}
.scout-report-ruler { min-width: 0; display: flex; align-items: center; gap: .58rem; }
.scout-report-ruler.enemy { justify-content: flex-end; text-align: right; }
.scout-report-ruler div { min-width: 0; }
.scout-report-ruler strong,
.scout-report-ruler small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scout-report-ruler strong { color: #fff4c8; font-size: .9rem; }
.scout-report-ruler small { color: var(--muted); font-size: .68rem; }
.scout-report-flag,
.scout-report-enemy-flag { flex: 0 0 auto; width: 48px; height: 42px; }
.scout-report-flag .flag-symbol,
.scout-report-enemy-flag .flag-symbol { font-size: 1.15rem; }
.scout-report-mark { display: grid; justify-items: center; color: #9ed5ff; text-align: center; }
.scout-report-mark > span { font-size: 1.55rem; line-height: 1; }
.scout-report-mark strong { color: #fff4c8; font-size: .7rem; text-transform: uppercase; }
.scout-report-mark small { color: var(--muted); font-size: .62rem; }
.scout-report-city {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 42px;
  gap: .55rem;
  align-items: center;
  padding: .5rem .65rem;
  border-radius: 8px;
  background: rgba(142,36,35,.74);
  border: 1px solid rgba(255,122,108,.3);
}
.scout-report-city span { color: #ffd2cb; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.scout-report-city strong { overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.scout-report-city b { color: #fff4c8; white-space: nowrap; }
.scout-report-city .scout-report-locate { justify-self: end; }
.scout-report-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.scout-report-overview > div {
  padding: .55rem .68rem;
  border-radius: 8px;
  background: #0d2c45;
  border: 1px solid rgba(83,159,208,.28);
}
.scout-report-overview span,
.scout-report-overview strong { display: block; }
.scout-report-overview span { color: #9ed5ff; font-size: .68rem; font-weight: 900; }
.scout-report-overview strong { color: #d8ef74; font-size: 1.08rem; }
.scout-report-section { min-width: 0; }
.scout-report-section h3 { margin: 0 0 .38rem; color: #d6eaff; font-size: .86rem; letter-spacing: 0; }
.scout-defense-breakdown,
.scout-skill-list {
  padding: .35rem .62rem;
  border-radius: 8px;
  background: rgba(13,44,69,.62);
  border: 1px solid rgba(158,213,255,.15);
}
.scout-breakdown-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: .5rem;
  align-items: center;
  min-height: 40px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.scout-stat-icon { color: #9ed5ff; font-size: 1.05rem; text-align: center; }
.scout-breakdown-row > span strong,
.scout-breakdown-row > span small { display: block; }
.scout-breakdown-row > span strong { color: #fff; font-size: .76rem; }
.scout-breakdown-row > span small { color: var(--muted); font-size: .64rem; }
.scout-breakdown-row > b { color: #fff4c8; font-size: .82rem; }
.scout-breakdown-total { display: flex; align-items: center; justify-content: space-between; padding: .48rem 0 .12rem 30px; }
.scout-breakdown-total span { color: #fff; font-weight: 950; }
.scout-breakdown-total strong { color: #d8ef74; font-size: 1rem; }
.scout-skill-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.scout-skill-row {
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: .5rem;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.scout-skill-row:last-child { border-bottom: 0; }
.scout-skill-row span { overflow: hidden; color: #fff; font-size: .72rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.scout-skill-row small { color: #9ed5ff; font-size: .66rem; font-weight: 900; }
.scout-skill-row strong { min-width: 44px; color: #fff4c8; font-size: .75rem; text-align: right; }
.scout-skill-row.base strong { color: #d8ef74; }
.scout-report-timing { display: flex; justify-content: space-between; gap: .8rem; color: var(--muted); font-size: .66rem; font-weight: 900; }
.troop-slider-panel { display: grid; gap: .72rem; }
.troop-route-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
  gap: .62rem;
  align-items: center;
}
.troop-route-city {
  min-width: 0;
  padding: .64rem .72rem;
  border-radius: 14px;
  background: rgba(8, 15, 28, .76);
  border: 1px solid rgba(132, 190, 255, .2);
}
.troop-route-city span,
.troop-route-city strong,
.troop-route-city small { display: block; }
.troop-route-city span { color: #8fcfff; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.troop-route-city strong { overflow: hidden; color: #fff4c8; text-overflow: ellipsis; white-space: nowrap; }
.troop-route-city small { color: var(--muted); font-size: .74rem; }
.troop-route-city small b { color: #fff; }
.troop-route-city.destination { text-align: right; }
.troop-command-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #251702;
  background: linear-gradient(#ffe278, #e69a19);
  border: 2px solid rgba(255, 240, 169, .82);
  box-shadow: 0 8px 18px rgba(0,0,0,.3), inset 0 0 0 2px rgba(255,255,255,.22);
  font-size: 1.7rem;
}
.troop-slider-panel.transfer .troop-command-icon { color: #071a0d; background: linear-gradient(#a9ec83, #49a84c); border-color: rgba(209,255,187,.8); }
.shield-drop-warning {
  display: grid;
  gap: .12rem;
  padding: .52rem .68rem;
  border-radius: 12px;
  color: #ffeeb2;
  background: linear-gradient(180deg, rgba(94, 33, 23, .92), rgba(38, 12, 11, .9));
  border: 1px solid rgba(255, 199, 91, .58);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.22);
}
.shield-drop-warning strong,
.shield-drop-warning span { display: block; }
.shield-drop-warning strong { color: #fff4c8; font-size: .72rem; font-weight: 950; text-transform: uppercase; }
.shield-drop-warning span { color: #ffe6a3; font-size: .72rem; font-weight: 850; line-height: 1.28; }
.reinforcement-limit-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: .52rem .68rem;
  border-radius: 12px;
  color: #dfffd7;
  background: linear-gradient(180deg, rgba(25, 86, 51, .92), rgba(9, 41, 24, .94));
  border: 1px solid rgba(126, 227, 139, .5);
}
.reinforcement-limit-note strong { flex: 0 0 auto; font-size: .76rem; font-weight: 950; }
.reinforcement-limit-note span { font-size: .7rem; font-weight: 800; line-height: 1.25; text-align: right; }
.troop-slider-control {
  padding: .66rem .76rem .58rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(13, 38, 65, .96), rgba(7, 20, 36, .96));
  border: 1px solid rgba(132, 190, 255, .28);
}
.troop-slider-readout { display: flex; align-items: baseline; justify-content: space-between; gap: .7rem; margin-bottom: .5rem; }
.troop-slider-readout span { color: #9ed5ff; font-size: .78rem; font-weight: 900; }
.troop-slider-readout strong { color: #fff4c8; font-size: 1.28rem; }
.troop-amount-slider {
  --slider-progress: 0%;
  width: 100%;
  height: 16px;
  margin: 0;
  appearance: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #f4b52d var(--slider-progress), #10253a var(--slider-progress));
  border: 2px solid rgba(255,255,255,.16);
  cursor: pointer;
}
.troop-amount-slider::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  appearance: none;
  border-radius: 9px;
  background: #f7c64e;
  border: 3px solid #fff3b5;
  box-shadow: 0 5px 12px rgba(0,0,0,.4);
}
.troop-amount-slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 9px;
  background: #f7c64e;
  border: 3px solid #fff3b5;
  box-shadow: 0 5px 12px rgba(0,0,0,.4);
}
.troop-slider-limits { display: flex; justify-content: space-between; margin-top: .35rem; color: var(--muted); font-size: .68rem; font-weight: 900; }
.swift-march-launch-option {
  min-width: 0;
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: center;
  padding: .48rem .68rem;
  border-radius: 14px;
  background: rgba(30, 57, 38, .72);
  border: 1px solid rgba(139, 205, 118, .42);
}
.swift-march-launch-copy {
  min-width: 0;
}
.swift-march-launch-copy strong,
.swift-march-launch-copy small {
  display: block;
}
.swift-march-launch-copy strong {
  overflow: hidden;
  color: #efffdc;
  font-size: .8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.swift-march-launch-copy small {
  color: #b9d7ad;
  font-size: .66rem;
  font-weight: 850;
}
.swift-march-launch-option.unavailable {
  opacity: .58;
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
}
.swift-march-launch-toggle {
  min-width: 82px;
  display: grid;
  grid-template-columns: auto 42px;
  gap: .42rem;
  align-items: center;
  justify-content: end;
  color: #d9ead3;
  cursor: pointer;
  font-size: .7rem;
  font-weight: 950;
}
.swift-march-launch-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.swift-march-launch-toggle i {
  position: relative;
  width: 42px;
  height: 24px;
  display: block;
  border-radius: 999px;
  background: #263c48;
  border: 1px solid rgba(255,255,255,.2);
  transition: background .16s ease, border-color .16s ease;
}
.swift-march-launch-toggle i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d4dde2;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  transition: transform .16s ease, background .16s ease;
}
.swift-march-launch-toggle input:checked + i {
  background: #477c3d;
  border-color: rgba(177, 220, 139, .7);
}
.swift-march-launch-toggle input:checked + i::after {
  transform: translateX(18px);
  background: #f0ffde;
}
.swift-march-launch-toggle input:focus-visible + i {
  outline: 2px solid #f3d27a;
  outline-offset: 2px;
}
.swift-march-launch-toggle:has(input:disabled) {
  cursor: not-allowed;
}
.troop-slider-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
.troop-slider-preview > div {
  min-width: 0;
  padding: .58rem .68rem;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.troop-slider-preview span,
.troop-slider-preview strong,
.troop-slider-preview small { display: block; }
.troop-slider-preview span { color: var(--muted); font-size: .68rem; font-weight: 900; }
.troop-slider-preview strong { color: #fff; font-size: .9rem; }
.troop-slider-preview small { color: var(--muted); font-size: .66rem; }
.troop-slider-preview.win > div { border-color: rgba(126,179,95,.48); }
.troop-slider-preview.lose > div { border-color: rgba(237,74,69,.52); }
.troop-slider-preview.transfer > div { border-color: rgba(102,201,112,.44); }
.troop-slider-preview.unknown > div { border-color: rgba(242,184,75,.42); }
.troop-slider-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.troop-slider-actions button { min-height: 48px; border-radius: 14px; font-weight: 950; }
.troop-slider-confirm { display: flex; align-items: center; justify-content: center; gap: .42rem; color: #251702; background: linear-gradient(#ffe278, #e69a19); }
.troop-slider-confirm span { font-size: 1.25rem; }
.troop-slider-confirm.transfer { color: #071a0d; background: linear-gradient(#a9ec83, #49a84c); }
.troop-slider-confirm:disabled { opacity: .68; cursor: progress; filter: grayscale(.15); }
.troop-slider-cancel { color: var(--ink); background: rgba(255,255,255,.1); border: 1px solid var(--line); }

@media (max-width: 780px) and (orientation: landscape), (max-height: 430px) {
  .modal.troop-slider-modal .modal-card { padding: .72rem; }
  .modal.troop-slider-modal .modal-card h2 { margin-bottom: .45rem; font-size: 1.08rem; }
  .troop-slider-panel { gap: .48rem; }
  .troop-route-summary { grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); gap: .4rem; }
  .troop-route-city { padding: .42rem .55rem; }
  .troop-command-icon { width: 44px; height: 44px; border-radius: 13px; font-size: 1.28rem; }
  .troop-slider-control { padding: .48rem .62rem .4rem; }
  .troop-slider-readout { margin-bottom: .28rem; }
  .troop-slider-readout strong { font-size: 1.08rem; }
  .swift-march-launch-option { min-height: 42px; padding: .36rem .55rem; }
  .troop-slider-preview > div { padding: .4rem .55rem; }
  .troop-slider-actions button { min-height: 40px; }
  .modal.scout-report-modal .modal-card { padding: .72rem; }
  .modal.scout-report-modal .modal-card h2 { margin-bottom: .45rem; font-size: 1.08rem; }
  .detailed-scout-report { gap: .48rem; }
  .scout-report-identities { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); gap: .42rem; }
  .scout-report-flag, .scout-report-enemy-flag { width: 40px; height: 36px; }
  .scout-report-ruler strong { font-size: .78rem; }
  .scout-report-mark > span { font-size: 1.25rem; }
  .scout-report-city, .scout-report-overview > div { padding: .38rem .52rem; }
  .scout-breakdown-row { min-height: 34px; }
  .scout-skill-row { min-height: 30px; }
}

.city-stat-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
  margin: .45rem 0 .55rem;
}
.stat-wide,
.stat-chip {
  border-radius: 14px;
  padding: .55rem .6rem;
  background: rgba(8, 15, 28, .72);
  border: 1px solid rgba(132, 190, 255, .18);
}
.stat-wide {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fortification-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .18rem .7rem;
}
.fortification-status > small {
  grid-column: 1 / -1;
  color: rgba(224, 235, 245, .76);
  font-size: .68rem;
}
.fortification-status.damaged {
  border-color: rgba(232, 176, 70, .48);
  background: rgba(47, 31, 10, .76);
}
.fortification-status.breached {
  border-color: rgba(213, 84, 65, .56);
  background: rgba(52, 18, 16, .78);
}
.fortification-status.damaged > strong,
.fortification-status.breached > strong {
  color: #ffd477;
}
.stat-wide span,
.stat-chip span {
  display: block;
  color: #9ed5ff;
  font-size: .72rem;
  font-weight: 850;
}
.stat-wide strong,
.stat-chip strong {
  display: block;
  color: #fff;
  font-size: .98rem;
}
.stat-chip small {
  display: block;
  color: #ffbd52;
  font-size: .68rem;
  margin-top: .08rem;
}
.main-city-status {
  border-color: rgba(255, 214, 126, .48);
  background: linear-gradient(135deg, rgba(49, 33, 16, .86), rgba(13, 24, 35, .76));
}
.main-city-status strong {
  color: #ffd77c;
}
.main-city-action-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  padding: .62rem;
  border-radius: 14px;
  background: rgba(8, 15, 28, .72);
  border: 1px solid rgba(255, 214, 126, .32);
}
.main-city-action-copy {
  min-width: 0;
}
.main-city-action-copy strong,
.main-city-action-copy small,
.main-city-change-btn span,
.main-city-change-btn small {
  display: block;
}
.main-city-action-copy strong {
  color: #fff;
  font-size: .93rem;
}
.main-city-action-copy small {
  margin-top: .08rem;
  color: #9ed5ff;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.25;
}
.main-city-change-btn {
  min-height: 42px;
  min-width: 128px;
  border-radius: 13px;
  padding: .48rem .68rem;
  color: #211508;
  background: linear-gradient(#ffd77c, #e99a26);
  font-weight: 950;
  white-space: nowrap;
}
.main-city-change-btn small {
  margin-top: .08rem;
  color: #5a330c;
  font-size: .68rem;
}
.main-city-change-btn:disabled {
  cursor: not-allowed;
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
}
.main-city-change-btn:disabled small {
  color: #ffd77c;
}
.main-city-change-reason {
  grid-column: 1 / -1;
  margin: -.1rem 0 0;
  color: #e7d8bd;
  font-size: .72rem;
  line-height: 1.3;
}
.city-level-up-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, auto);
  align-items: center;
  gap: .55rem;
  padding: .62rem;
  border-radius: 14px;
  background: rgba(39, 27, 10, .78);
  border: 1px solid rgba(242, 184, 75, .36);
}
.city-level-up-copy {
  min-width: 0;
}
.city-level-up-copy strong,
.city-level-up-copy small,
.city-level-up-btn span,
.city-level-up-btn small {
  display: block;
}
.city-level-up-copy strong {
  color: #fff4c8;
  font-size: .93rem;
}
.city-level-up-copy small {
  margin-top: .08rem;
  color: #ffd77c;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.25;
}
.city-level-up-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .32rem;
}
.city-level-up-btn {
  min-width: 0;
  min-height: 44px;
  border-radius: 12px;
  padding: .4rem .46rem;
  color: #211508;
  background: linear-gradient(#ffe08b, #e69a22);
  border: 1px solid rgba(255,255,255,.34);
  font-weight: 950;
}
.city-level-up-btn span {
  font-size: .78rem;
  line-height: 1;
}
.city-level-up-btn small {
  margin-top: .16rem;
  color: #5a330c;
  font-size: .62rem;
  line-height: 1.05;
}
.city-level-up-btn:disabled {
  cursor: not-allowed;
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.14);
}
.city-level-up-btn:disabled small {
  color: #ffd77c;
}
.relinquish-city-action-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  padding: .62rem;
  border-radius: 14px;
  background: rgba(50, 16, 18, .72);
  border: 1px solid rgba(255, 102, 94, .38);
}
.relinquish-city-action-copy {
  min-width: 0;
}
.relinquish-city-action-copy strong,
.relinquish-city-action-copy small {
  display: block;
}
.relinquish-city-action-copy strong {
  color: #fff;
  font-size: .93rem;
}
.relinquish-city-action-copy small {
  margin-top: .08rem;
  color: #ffd2c9;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.25;
}
.relinquish-city-action-copy .relinquish-city-reset {
  margin-top: .28rem;
  color: #fff1a8;
}
.relinquish-city-btn {
  min-height: 42px;
  min-width: 138px;
  border-radius: 13px;
  padding: .48rem .68rem;
  color: #fff;
  background: linear-gradient(#ff665e, #bd302a);
  font-weight: 950;
  white-space: nowrap;
}
.relinquish-city-btn:disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .18);
}
.relinquish-warning {
  display: grid;
  gap: .7rem;
}
.relinquish-warning > strong {
  color: #fff1bd;
  font-size: 1.05rem;
}
.relinquish-warning p {
  margin: 0;
  color: #eadbce;
  line-height: 1.35;
}

/* === V9 LANDSCAPE / HORIZONTAL LAYOUT === */
.phone-shell {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  margin: 0;
  border-radius: 0;
}

.setup-screen {
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
.setup-card {
  width: min(390px, calc(100vw - 2rem));
}

.top-hud {
  left: max(.75rem, env(safe-area-inset-left));
  right: max(.75rem, env(safe-area-inset-right));
  padding-top: calc(.55rem + env(safe-area-inset-top));
}
.profile-chip {
  min-width: 190px;
  height: 46px;
}
.resource-pill {
  min-width: 88px;
  height: 40px;
}

.map-frame {
  inset: 0;
}

.commander-panel {
  left: auto;
  right: max(.75rem, env(safe-area-inset-right));
  top: calc(70px + env(safe-area-inset-top));
  bottom: max(.75rem, env(safe-area-inset-bottom));
  width: min(380px, 35vw);
  min-width: 318px;
  min-height: 0;
  max-height: calc(100dvh - 86px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  border-radius: 24px;
  box-shadow: -18px 0 45px rgba(0,0,0,.35);
}

.action-buttons {
  flex-wrap: wrap;
  overflow-x: visible;
  padding-bottom: .1rem;
}
.action-buttons button {
  flex: 1 1 calc(50% - .43rem);
  min-width: 116px;
}

.bottom-nav {
  left: max(.75rem, env(safe-area-inset-left));
  right: auto;
  bottom: max(.75rem, env(safe-area-inset-bottom));
  width: 112px;
  min-width: 112px;
  height: 62px;
  padding: .42rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  box-shadow: 0 12px 35px rgba(0,0,0,.36);
}
.bottom-nav:has(.incoming-attack-btn:not([hidden])),
.bottom-nav:has(.outgoing-attack-btn:not([hidden])) {
  width: 220px;
  min-width: 220px;
}
.bottom-nav:has(.incoming-attack-btn:not([hidden])):has(.outgoing-attack-btn:not([hidden])) {
  width: 314px;
  min-width: 314px;
}
.nav-btn {
  border-radius: 14px;
  grid-auto-flow: column;
  place-content: center;
  gap: .28rem;
}
.nav-btn span {
  font-size: .98rem;
}

.toast {
  bottom: calc(78px + env(safe-area-inset-bottom));
  left: calc((100vw - min(380px, 35vw)) / 2);
  max-width: min(520px, calc(100vw - 430px));
}

.modal {
  width: min(560px, calc(100vw - 2rem));
}

.rotate-warning {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 500;
  place-items: center;
  padding: 1.2rem;
  text-align: center;
  color: var(--ink);
  background: radial-gradient(circle at top, rgba(45,140,255,.22), transparent 35%), rgba(7,9,14,.92);
  backdrop-filter: blur(8px);
}
.rotate-warning > div {
  width: min(360px, 100%);
  padding: 1.2rem;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(42,35,45,.98), rgba(17,16,22,.98));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.rotate-warning strong,
.rotate-warning span {
  display: block;
}
.rotate-warning strong {
  font-size: 1.45rem;
  margin-bottom: .35rem;
}
.rotate-warning span {
  color: var(--muted);
}

@media (orientation: portrait) and (max-width: 900px) {
  .rotate-warning { display: grid; }
}

@media (max-width: 780px) and (orientation: landscape) {
  .top-hud {
    padding-top: calc(.35rem + env(safe-area-inset-top));
  }
  .profile-chip {
    min-width: 150px;
    height: 40px;
  }
  .profile-chip small {
    display: none;
  }
  .resource-pill {
    min-width: 66px;
    height: 36px;
  }
  .commander-panel {
    top: calc(50px + env(safe-area-inset-top));
    width: min(330px, 40vw);
    min-width: 290px;
    padding: .55rem;
  }
  .panel-header strong { font-size: .88rem; }
  .panel-header small { font-size: .66rem; }
  .selected-info { font-size: .76rem; }
  .city-stat-panel {
    grid-template-columns: 1fr;
    gap: .34rem;
  }
  .stat-wide,
  .stat-chip {
    padding: .42rem .5rem;
  }
  .action-buttons button {
    min-height: 36px;
    min-width: 92px;
    font-size: .72rem;
  }
  .bottom-nav {
    width: 106px;
    min-width: 106px;
    height: 52px;
    padding: .32rem;
  }
  .bottom-nav:has(.incoming-attack-btn:not([hidden])),
  .bottom-nav:has(.outgoing-attack-btn:not([hidden])) {
    width: 204px;
    min-width: 204px;
  }
  .bottom-nav:has(.incoming-attack-btn:not([hidden])):has(.outgoing-attack-btn:not([hidden])) {
    width: 286px;
    min-width: 286px;
  }
  .nav-btn {
    font-size: .66rem;
  }
  .toast {
    bottom: calc(62px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 360px);
  }
}

@media (min-width: 1100px) {
  .commander-panel {
    width: 410px;
    min-width: 410px;
  }
  .bottom-nav {
    width: 122px;
    min-width: 122px;
  }
  .bottom-nav:has(.incoming-attack-btn:not([hidden])),
  .bottom-nav:has(.outgoing-attack-btn:not([hidden])) {
    width: 232px;
    min-width: 232px;
  }
  .bottom-nav:has(.incoming-attack-btn:not([hidden])):has(.outgoing-attack-btn:not([hidden])) {
    width: 322px;
    min-width: 322px;
  }
  .toast {
    left: calc((100vw - 410px) / 2);
    max-width: 620px;
  }
}

/* === V10 CLEAN ACTION UI === */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.profile-stack {
  pointer-events: auto;
  display: grid;
  gap: .32rem;
  justify-items: start;
}
.profile-action-row {
  display: flex;
  align-items: center;
  gap: .52rem;
}

[hidden] { display: none !important; }

.portrait-placeholder {
  position: relative;
  width: 100px;
  height: 78px;
  border-radius: 16px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.profile-button {
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--ink);
}
.profile-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: url("assets/optimized/hud-profile-frame-256x200-acfdfef9af26.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.34));
}
.profile-button > * {
  position: relative;
  z-index: 1;
}
.profile-button .kingdom-flag-small {
  position: absolute;
  left: 19.5%;
  top: 25.4%;
  width: 60.8%;
  height: 52%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.profile-rank-btn {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.profile-rank-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.clan-hud-btn {
  position: relative;
  isolation: isolate;
}
.clan-hud-icon {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.clan-hud-icon .clan-shield-size-small {
  width: 52px;
  height: 57px;
}
.clan-hud-btn.is-search::after {
  content: "\2315";
  position: absolute;
  z-index: 2;
  right: -2px;
  bottom: -2px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border: 2px solid #fff0bd;
  border-radius: 50%;
  color: #fff8dd;
  background: #174b74;
  box-shadow: 0 3px 7px rgba(0,0,0,.45);
  font-size: .92rem;
  font-weight: 1000;
  line-height: 1;
}
.clan-hud-btn.has-rallies::before,
.profile-tabs button.has-rallies::after {
  content: attr(data-rally-count);
  position: absolute;
  z-index: 4;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border: 2px solid #fff0bd;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(#c84545, #791e2a);
  box-shadow: 0 3px 8px rgba(0,0,0,.52);
  font: 900 .66rem/1 var(--font-ui);
}
.clan-hud-btn.has-rallies::before {
  right: -5px;
  top: -4px;
}
.profile-tabs button {
  position: relative;
}
.profile-tabs button.has-rallies::after {
  right: -5px;
  top: -7px;
}
.daily-login-reward-btn {
  position: relative;
  isolation: isolate;
}
.daily-login-reward-icon {
  display: block;
  width: 86%;
  height: 86%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .42));
}
.daily-login-reward-btn.is-claimable .daily-login-reward-icon {
  animation: dailyRewardHudGlow 1.8s ease-in-out infinite;
}
.daily-login-reward-btn:disabled {
  opacity: .58;
}
.daily-login-reward-badge {
  position: absolute;
  z-index: 3;
  right: -3px;
  top: -4px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border: 2px solid #ffd4cf;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(#ff5148, #b80e18);
  box-shadow: 0 3px 8px rgba(0,0,0,.48), 0 0 12px rgba(255, 46, 46, .72);
  font-size: .72rem;
  font-weight: 1000;
  line-height: 1;
}
@keyframes dailyRewardHudGlow {
  0%, 100% { filter: drop-shadow(0 6px 8px rgba(0,0,0,.42)) drop-shadow(0 0 0 rgba(255,224,101,0)); transform: translateY(0); }
  50% { filter: drop-shadow(0 6px 8px rgba(0,0,0,.42)) drop-shadow(0 0 8px rgba(255,224,101,.9)); transform: translateY(-2px); }
}
.profile-rank-btn:active {
  transform: translateY(1px);
}
.profile-button:focus-visible,
.profile-rank-btn:focus-visible,
.profile-flag-button:focus-visible,
.profile-icon-btn:focus-visible,
.flag-option-grid button:focus-visible,
.flag-symbol-grid button:focus-visible,
.flag-swatch-grid button:focus-visible {
  outline: 3px solid #9ed5ff;
  outline-offset: 2px;
}

.kingdom-flag {
  --flag-primary: #1f5f91;
  --flag-secondary: #e6b94f;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--flag-primary);
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 3px 3px 8px 3px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.18), 0 8px 18px rgba(0,0,0,.32);
}
.kingdom-flag::before,
.kingdom-flag::after {
  content: "";
  position: absolute;
  z-index: 0;
  background: var(--flag-secondary);
}
.kingdom-flag.pattern-split::before { inset: 0 0 0 50%; }
.kingdom-flag.pattern-diagonal::before { inset: 0; clip-path: polygon(58% 0, 100% 0, 100% 100%, 15% 100%); }
.kingdom-flag.pattern-band::before { left: 0; right: 0; top: 38%; height: 24%; }
.kingdom-flag.pattern-cross::before { top: 0; bottom: 0; left: 42%; width: 16%; }
.kingdom-flag.pattern-cross::after { left: 0; right: 0; top: 42%; height: 16%; }
.kingdom-flag.pattern-saltire::before,
.kingdom-flag.pattern-saltire::after,
.kingdom-flag.pattern-bend::before {
  top: -24%;
  bottom: -24%;
  left: 42%;
  width: 16%;
}
.kingdom-flag.pattern-saltire::before { transform: rotate(38deg); }
.kingdom-flag.pattern-saltire::after { transform: rotate(-38deg); }
.kingdom-flag.pattern-chevron::before {
  inset: 0;
  clip-path: polygon(0 70%, 0 47%, 50% 18%, 100% 47%, 100% 70%, 50% 41%);
}
.kingdom-flag.pattern-quartered {
  background: conic-gradient(
    from 90deg,
    var(--flag-primary) 0 25%,
    var(--flag-secondary) 0 50%,
    var(--flag-primary) 0 75%,
    var(--flag-secondary) 0 100%
  );
}
.kingdom-flag.pattern-pale::before { top: 0; bottom: 0; left: 36%; width: 28%; }
.kingdom-flag.pattern-chief::before { top: 0; left: 0; right: 0; height: 34%; }
.kingdom-flag.pattern-bend::before { transform: rotate(-38deg); }
.flag-symbol {
  position: relative;
  z-index: 2;
  color: #fff9e8;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px 2px rgba(0,0,0,.65);
}
.kingdom-flag-small { width: 42px; height: 38px; }
.kingdom-flag-small .flag-symbol { font-size: 1.15rem; }
.kingdom-flag-large { width: 148px; height: 112px; }
.kingdom-flag-large .flag-symbol { font-size: 3rem; }
.kingdom-flag-editor { width: 190px; height: 138px; }
.kingdom-flag-editor .flag-symbol { font-size: 3.8rem; }

.profile-screen {
  position: absolute;
  z-index: 180;
  left: 50%;
  top: 50%;
  width: min(860px, calc(100% - 1rem));
  height: min(600px, calc(100dvh - .75rem));
  transform: translate(-50%, -50%);
  display: none;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  color: var(--ink);
  background: rgba(6, 13, 24, .985);
  border: 1px solid rgba(242,184,75,.48);
  border-radius: 10px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.64), 0 24px 64px rgba(0,0,0,.58);
  backdrop-filter: blur(12px);
}
.profile-screen.open { display: grid; }
.profile-screen.skills-active,
.profile-screen.settings-active,
.profile-screen.clan-active,
.profile-screen.flag-editor-active {
  height: min(520px, calc(100dvh - 1.5rem));
  grid-template-rows: auto minmax(0, 1fr);
}
.profile-screen-header {
  position: relative;
  z-index: 2;
  min-height: 60px;
  padding: calc(.5rem + env(safe-area-inset-top)) max(.85rem, env(safe-area-inset-right)) .5rem max(.85rem, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto 44px;
  align-items: center;
  gap: .8rem;
  border-bottom: 1px solid rgba(242,184,75,.4);
  background: #0a1c2d;
}
.profile-screen-heading { min-width: 0; text-align: left; }
.profile-screen-header span { color: #8ecdf1; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.profile-screen-header h2 { margin: .05rem 0 0; overflow: hidden; font-size: 1.25rem; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
.profile-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(82px, 1fr));
  gap: .35rem;
  padding: .25rem;
  border-radius: 8px;
  background: #06131f;
  border: 1px solid rgba(158,213,255,.2);
}
.profile-tabs button {
  min-height: 38px;
  padding: 0 .8rem;
  border-radius: 6px;
  color: #9ec5dc;
  background: transparent;
  font-size: .78rem;
  font-weight: 950;
}
.profile-tabs button.active { color: #211508; background: #f2b84b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.profile-tabs { grid-template-columns: repeat(4, minmax(64px, 1fr)); }
.clan-view {
  min-height: 0;
  overflow: auto;
  padding: .7rem;
  color: #f7ead1;
  background: radial-gradient(circle at 50% 0, rgba(47,122,74,.18), transparent 44%), #101b22;
}
.city-node.clan-ally .city-ring {
  border-color: #5fd27c;
  background: rgba(43, 139, 70, .28);
  box-shadow: 0 0 0 4px rgba(70,181,99,.2), 0 0 22px rgba(69,218,108,.7);
}
.city-node.clan-ally .foreign-city-shield {
  background: #267a43;
}
.city-node.clan-ally .foreign-selected-banner {
  box-shadow: 0 0 18px rgba(67,205,103,.7);
}
.city-node.clan-ally.targeted:not(.stronghold-node)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86'%3E%3Cpolygon points='50 3 91 24 91 62 50 83 9 62 9 24' fill='none' stroke='%2379d895' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .76)) drop-shadow(0 0 7px rgba(89, 229, 128, .78));
}
.city-node.clan-ally .foreign-selected-level,
.city-node.clan-ally .foreign-selected-data {
  background: #267a43;
}
.city-node.clan-ally .foreign-selected-crest {
  background: #123d27;
  border-color: #8fe2a5;
}
.city-node.clan-ally .foreign-ruler-name-inline {
  color: #eaffef;
  background: rgba(22, 92, 46, .94);
  border-color: rgba(134, 217, 156, .86);
}
.city-node.clan-ally .foreign-garrison.unknown {
  color: #d8ffe2;
}
.city-node.clan-ally.stronghold-node.targeted .stronghold-glow {
  display: block;
  border-color: rgba(121, 216, 149, .98);
  background: radial-gradient(ellipse at center, rgba(72, 203, 109, .3), rgba(15, 75, 38, .18) 62%, transparent 72%);
  box-shadow: 0 0 0 5px rgba(70,181,99,.22), 0 0 30px rgba(69,218,108,.72);
}
.clan-ally-action-wheel .city-wheel-ring {
  border-color: rgba(121, 216, 149, .94) !important;
  border-top-color: transparent !important;
  box-shadow: 0 0 18px rgba(67, 205, 103, .48);
}
.gold-camp-action-wheel.clan-ally-action-wheel .gold-camp-wheel-action {
  border-color: rgba(131, 225, 154, .72);
}
.camp-node.clan-ally .camp-art {
  filter: drop-shadow(0 0 8px rgba(76, 231, 117, .95)) drop-shadow(0 0 18px rgba(42, 155, 76, .82));
}
.camp-node.clan-ally .gold-camp-label {
  border-color: #79d895;
  background: linear-gradient(180deg, rgba(37, 111, 60, .96), rgba(12, 54, 30, .96));
}
.wheel-reinforce,
.clan-reinforce-action {
  border-color: rgba(131, 225, 154, .72) !important;
  color: #ecfff1 !important;
  background: linear-gradient(180deg, rgba(58, 136, 76, .98), rgba(18, 71, 38, .98)) !important;
}
.holding-reinforcement-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: .45rem;
  margin-top: .35rem;
  padding: .7rem;
  border: 1px solid rgba(123, 221, 147, .42);
  border-radius: 10px;
  color: #eaffef;
  background: linear-gradient(180deg, rgba(29, 87, 48, .72), rgba(8, 37, 25, .88));
}
.holding-reinforcement-heading,
.holding-reinforcement-row,
.reinforcement-operation-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
}
.holding-reinforcement-heading span {
  color: #aee9bd;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.holding-reinforcement-row {
  padding: .5rem .58rem;
  border: 1px solid rgba(153, 224, 169, .2);
  border-radius: 7px;
  background: rgba(3, 24, 15, .55);
}
.holding-reinforcement-row span,
.holding-reinforcement-row small {
  display: block;
}
.holding-reinforcement-row small,
.holding-reinforcement-panel > small,
.holding-reinforcement-empty {
  color: #a9cdb3;
  font-size: .65rem;
}
.holding-reinforcement-row button,
.reinforcement-operation-card button {
  min-height: 34px;
  padding: .35rem .62rem;
  border: 1px solid rgba(163, 231, 178, .48);
  border-radius: 6px;
  color: #effff2;
  background: linear-gradient(#408c55, #1b5330);
  font-weight: 900;
}
.reinforcement-operations-list {
  display: grid;
  gap: .5rem;
}
.reinforcement-operation-summary,
.reinforcement-operation-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.reinforcement-operation-summary {
  margin-bottom: .75rem;
  padding: .7rem .75rem;
  border: 1px solid rgba(116, 213, 141, .26);
  border-radius: 10px;
  background: rgba(8, 38, 23, .62);
}
.reinforcement-operation-summary small,
.reinforcement-operation-heading small {
  display: block;
  color: #a9cdb3;
  font-size: .66rem;
}
.reinforcement-operation-groups,
.reinforcement-operation-group {
  display: grid;
  gap: .55rem;
}
.reinforcement-operation-groups {
  gap: .9rem;
}
.reinforcement-operation-heading {
  padding: 0 .1rem;
  color: #dfffe7;
}
.reinforcement-operation-heading b {
  min-width: 1.6rem;
  padding: .14rem .42rem;
  border: 1px solid rgba(150, 225, 168, .32);
  border-radius: 999px;
  color: #bff0ca;
  text-align: center;
  background: rgba(31, 92, 49, .58);
}
.reinforcement-operation-card {
  padding: .68rem .75rem;
  border: 1px solid rgba(116, 213, 141, .32);
  border-radius: 10px;
  color: #effff2;
  background: rgba(12, 55, 31, .64);
}
.reinforcement-operation-card span small,
.reinforcement-operation-card > small {
  display: block;
  color: #a9cdb3;
  font-size: .66rem;
}
@media (max-width: 620px) {
  .active-operations-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reinforcement-operation-summary { align-items: flex-start; flex-direction: column; }
  .holding-reinforcement-row,
  .reinforcement-operation-card { align-items: flex-start; flex-wrap: wrap; }
}
.city-clan-tag { color: #91e6aa; }
.clan-content { max-width: 1180px; margin: 0 auto; }
.clan-empty { display: grid; min-height: 360px; place-content: center; gap: .65rem; text-align: center; }
.clan-empty h3, .clan-empty p { margin: 0; }
.clan-lock { color: #78c990; font-size: 4rem; }
.clan-browser-nav { display: none; }
.clan-section-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .35rem;
  margin-bottom: .75rem;
  padding: .38rem;
  border: 1px solid rgba(205,169,87,.34);
  border-radius: 11px;
  background: rgba(5,19,28,.92);
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
}
.clan-section-nav button {
  position: relative;
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  padding: .42rem .65rem;
  overflow: hidden;
  color: #a9c7ba;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: .76rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clan-section-nav button:hover {
  color: #eef8ef;
  border-color: rgba(143,221,163,.3);
  background: rgba(39,99,59,.28);
}
.clan-section-nav button.active {
  color: #241708;
  border-color: #fff0bd;
  background: linear-gradient(#f2d27e, #c8933e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.46);
}
.clan-section-nav button:focus-visible {
  outline: 3px solid #f3d27a;
  outline-offset: 1px;
}
.clan-section-nav-mark {
  color: #e2bd69;
  font-size: .92rem;
}
.clan-section-nav button.active .clan-section-nav-mark { color: #40270e; }
.clan-section-nav button > b {
  min-width: 20px;
  padding: .1rem .3rem;
  color: #dff7e5;
  border: 1px solid rgba(139,218,160,.25);
  border-radius: 999px;
  background: rgba(31,91,50,.72);
  font-size: .62rem;
  line-height: 1.2;
}
.clan-section-nav button > b.alert {
  color: #fff3c5;
  border-color: rgba(239,194,92,.5);
  background: #7d4d1d;
}
.clan-section-nav button.active > b {
  color: #fff3c5;
  border-color: rgba(72,40,10,.35);
  background: #563412;
}
.clan-section-panel,
.clan-browser-panel { min-width: 0; }
.clan-browser, .clan-columns { display: grid; grid-template-columns: minmax(260px,.72fr) minmax(360px,1.28fr); gap: .75rem; }
.clan-create-card, .clan-discovery, .clan-roster-panel, .clan-gift-panel, .clan-quest-panel, .clan-social-card, .clan-rename-card {
  min-width: 0;
  padding: .8rem;
  border: 1px solid rgba(191,226,198,.2);
  border-radius: 14px;
  background: rgba(13,28,34,.88);
  box-shadow: 0 14px 28px rgba(0,0,0,.24);
}
.clan-overview-panel { margin-bottom: .75rem; }
.clan-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .45rem;
}
.clan-overview-grid button {
  min-width: 0;
  min-height: 68px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: .08rem;
  padding: .55rem .65rem;
  color: #f8ecd4;
  border: 1px solid rgba(139,218,160,.24);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(26,72,44,.66), rgba(9,27,35,.9));
  text-align: left;
}
.clan-overview-grid button:hover,
.clan-overview-grid button:focus-visible {
  border-color: rgba(147,231,169,.7);
  background: linear-gradient(145deg, rgba(39,99,59,.82), rgba(10,35,43,.96));
  outline: none;
}
.clan-overview-grid button > span {
  color: #a9cdb3;
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.clan-overview-grid button > strong {
  max-width: 100%;
  overflow: hidden;
  color: #ffe5a1;
  font-size: .92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clan-overview-grid button > small {
  color: #9fb4ae;
  font-size: .63rem;
}
.clan-rewards-panel {
  display: grid;
  gap: .75rem;
}
.clan-rallies-panel {
  display: grid;
  gap: .58rem;
  border-color: rgba(212, 169, 91, .38);
  background: linear-gradient(145deg, rgba(55, 37, 67, .92), rgba(12, 28, 34, .94));
}
.clan-social-heading,
.clan-rally-card header,
.clan-rally-summary,
.clan-rally-card footer,
.clan-rally-card li,
.clan-rally-confirmation li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
}
.clan-social-heading span,
.clan-rally-card header span,
.clan-rally-card li span {
  display: grid;
  min-width: 0;
}
.clan-social-heading small,
.clan-rally-card header small,
.clan-rally-card li small {
  color: #bbaec4;
  font-size: .62rem;
}
.clan-social-heading > b,
.clan-rally-card header > b {
  min-width: 32px;
  padding: .2rem .45rem;
  border: 1px solid rgba(235, 199, 119, .42);
  border-radius: 999px;
  color: #ffe7a3;
  text-align: center;
  background: rgba(75, 45, 89, .7);
}
.clan-rally-note {
  margin: 0;
  color: #cfc2d6;
  font-size: .67rem;
  line-height: 1.4;
}
.clan-rally-list {
  display: grid;
  gap: .55rem;
}
.clan-rally-card {
  display: grid;
  gap: .48rem;
  padding: .68rem;
  border: 1px solid rgba(210, 175, 105, .3);
  border-radius: 10px;
  color: #f8ecd4;
  background: rgba(8, 18, 29, .72);
}
.clan-rally-card.launched {
  border-color: rgba(198, 89, 80, .5);
  background: linear-gradient(135deg, rgba(86, 27, 36, .72), rgba(8, 18, 29, .78));
}
.clan-rally-card.recalling {
  border-color: rgba(100, 172, 210, .48);
}
.clan-rally-summary {
  align-items: stretch;
  flex-wrap: wrap;
  padding: .42rem .5rem;
  border-radius: 7px;
  color: #b9cbd3;
  background: rgba(255,255,255,.045);
  font-size: .63rem;
}
.clan-rally-summary span {
  display: grid;
  gap: .08rem;
}
.clan-rally-summary strong {
  color: #fff0bf;
}
.clan-rally-status {
  color: #e7bc77;
  font-weight: 900;
  text-transform: uppercase;
}
.clan-rally-card ul,
.clan-rally-confirmation ul {
  display: grid;
  gap: .26rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.clan-rally-card li {
  padding: .4rem .5rem;
  border-left: 3px solid #55a873;
  border-radius: 4px;
  background: rgba(255,255,255,.045);
}
.clan-rally-card li.inbound {
  border-left-color: #5eadd2;
}
.clan-rally-card li.returning {
  border-left-color: #c58b55;
}
.clan-rally-card footer {
  justify-content: flex-end;
}
.clan-rally-card footer button,
.clan-rally-confirmation footer button {
  min-height: 35px;
  padding: .4rem .68rem;
  border: 1px solid rgba(230, 193, 112, .48);
  border-radius: 7px;
  color: #fff5d0;
  background: linear-gradient(#73508d, #3d2955);
  font-weight: 900;
}
.clan-rally-card footer button.danger-action,
.clan-rally-confirmation footer button.danger-action {
  border-color: rgba(234, 119, 102, .55);
  background: linear-gradient(#9b3e42, #5c1f2a);
}
.clan-rally-confirmation-modal.modal {
  width: min(620px, calc(100vw - 1.4rem));
}
.clan-disband-confirmation-modal.modal {
  width: min(620px, calc(100vw - 1.4rem));
}
.clan-rally-confirmation {
  display: grid;
  gap: .7rem;
}
.clan-rally-confirmation h3,
.clan-rally-confirmation p {
  margin: .12rem 0;
}
.clan-rally-confirmation li {
  padding: .5rem .62rem;
  border: 1px solid rgba(201, 168, 104, .24);
  border-radius: 7px;
  background: rgba(255,255,255,.05);
}
.clan-rally-confirmation footer {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
}
.clan-form { display: grid; gap: .55rem; }
.clan-form input, .clan-form select, .clan-form textarea, .clan-search input {
  min-height: 40px;
  padding: .55rem .7rem;
  color: #fff7e8;
  border: 1px solid rgba(178,216,188,.3);
  border-radius: 8px;
  background: #0b151a;
}
.clan-form textarea { min-height: 88px; resize: vertical; }
.clan-search { display: grid; grid-template-columns: 1fr auto; gap: .45rem; }
.clan-search button, .clan-list-row > button, .clan-member-selection button, .clan-applications button, .clan-gift-actions button, .clan-quest-card button {
  min-height: 36px;
  padding: .35rem .65rem;
  color: #eaffef;
  border: 1px solid #4c9764;
  border-radius: 8px;
  background: #225c38;
  font-weight: 800;
}
.clan-list { display: grid; gap: .45rem; margin-top: .65rem; }
.clan-list-row, .clan-applications article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: .65rem;
  border-radius: 9px;
  background: rgba(255,255,255,.055);
}
.clan-list-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.clan-list-row div { display: grid; gap: .12rem; min-width: 0; }
.clan-list-row span, .clan-list-row small, .clan-member-row span, .clan-muted { color: #a9c0b2; }
.clan-name-link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 28px;
  min-width: 0;
  padding: 0;
  overflow-wrap: anywhere;
  color: #f4e4bd;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}
.clan-name-link:hover,
.clan-name-link:focus-visible {
  color: #8fe0a5;
  text-decoration: underline;
  text-underline-offset: .16em;
}
.clan-name-link:focus-visible {
  outline: 2px solid #8fe0a5;
  outline-offset: 2px;
  border-radius: 5px;
}
.clan-shield-link {
  display: inline-grid;
  place-items: center;
  margin: 0;
  padding: 0;
  color: inherit;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.clan-shield-link:hover { filter: brightness(1.16); }
.clan-shield-link:focus-visible {
  outline: 2px solid #8fe0a5;
  outline-offset: 3px;
}
.clan-hero-name { color: inherit; font-size: inherit; }
.clan-hero-shield-link { min-width: 78px; min-height: 86px; }
.clan-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .8rem;
  margin-bottom: .75rem;
  padding: .85rem;
  border: 1px solid rgba(139,218,160,.35);
  border-radius: 15px;
  background: linear-gradient(115deg, rgba(29,82,48,.9), rgba(15,34,41,.94));
}
.clan-hero h3, .clan-hero p { margin: .12rem 0; }
.clan-hero-copy { min-width: 0; }
.clan-hero-copy > span {
  color: #a9cdb3;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.clan-hero-copy h3 {
  overflow-wrap: anywhere;
  color: #ffe5a1;
}
.clan-hero-copy p {
  color: #c0cec5;
  line-height: 1.35;
}
.clan-shield {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  vertical-align: middle;
  filter: drop-shadow(0 8px 9px rgba(0,0,0,.4));
}
.clan-shield svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.clan-shield-size-mini { width: 38px; height: 42px; filter: drop-shadow(0 4px 4px rgba(0,0,0,.38)); }
.clan-shield-size-small { width: 54px; height: 60px; }
.clan-shield-size-large { width: 78px; height: 86px; }
.clan-shield-size-editor { width: 176px; height: 194px; filter: drop-shadow(0 16px 18px rgba(0,0,0,.56)); }
.clan-shield-polished svg { filter: saturate(1.08) brightness(1.04); }
.clan-shield-battleworn svg { filter: saturate(.82) contrast(1.09); }
.clan-hero-shield { display: grid; justify-items: center; gap: .24rem; }
.clan-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .28rem; margin-top: .35rem; }
.clan-hero-actions button {
  min-height: 27px;
  padding: .15rem .5rem;
  color: #fff0c1;
  border: 1px solid rgba(237,194,92,.62);
  border-radius: 999px;
  background: rgba(43,29,14,.78);
  font-size: .62rem;
  font-weight: 950;
}
.clan-rename-card {
  margin-bottom: .75rem;
  border-color: rgba(230,190,99,.38);
  background: linear-gradient(125deg, rgba(45,31,18,.94), rgba(13,28,34,.92));
}
.clan-rename-card > p { margin: 0 0 .65rem; color: #c8c0ad; }
.clan-rename-form { grid-template-columns: minmax(220px,1fr) auto; align-items: end; }
.clan-rename-form label { display: grid; gap: .28rem; color: #d9cfb7; font-size: .72rem; font-weight: 900; }
.clan-rename-summary { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem .8rem; color: #b9c9be; font-size: .75rem; }
.clan-rename-summary strong { color: #f3d27a; }
.clan-rename-form > small { color: #d9c584; font-weight: 800; }
.clan-rename-form .clan-warning { grid-column: 1 / -1; margin: 0; }
.clan-rename-actions { display: flex; justify-content: flex-end; gap: .45rem; }
.clan-rename-actions button { min-height: 38px; }
.clan-rename-actions button:disabled { opacity: .52; cursor: not-allowed; }
.clan-power { display: grid; justify-items: end; }
.clan-power strong { color: #8fe0a5; font-size: 1.4rem; }
.clan-power span,
.clan-power small { color: #a9cdb3; }
.clan-social-layout { grid-template-columns: minmax(260px,.68fr) minmax(420px,1.32fr); align-items: start; }
.clan-social-panels { display: grid; min-width: 0; gap: .75rem; }
.clan-content:not(.shield-editor-open) .clan-columns,
.clan-content:not(.shield-editor-open) .clan-social-panels { display: contents; }
.clan-section-panel:not(.active) { display: none; }
.clan-section-panel.active { display: block; }
.clan-rallies-panel.active,
.clan-rewards-panel.active { display: grid; }
.clan-panel-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  text-align: left;
}
.clan-panel-heading > span,
.clan-panel-heading > h3 { grid-column: 1; }
.clan-panel-heading > b {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  padding: .18rem .48rem;
  color: #bce8c8;
  border: 1px solid rgba(143,221,163,.28);
  border-radius: 999px;
  background: rgba(35,95,53,.5);
  font-size: .68rem;
}
.clan-roster { display: grid; max-height: 440px; gap: .3rem; overflow: auto; }
.clan-member-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .48rem;
  padding: .44rem .5rem;
  border: 1px solid transparent;
  border-radius: 9px;
  background: rgba(255,255,255,.055);
}
.clan-member-row.selected { border-color: rgba(125,220,151,.68); background: rgba(49,116,69,.24); }
.clan-member-flag { width: 38px; height: 26px; }
.clan-member-copy { display: grid; min-width: 0; gap: .08rem; }
.clan-member-copy > span { font-size: .72rem; }
.clan-member-last-login {
  color: #88b99a;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.clan-member-select {
  justify-self: start;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: #f5e6bd;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 900;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.clan-member-select:hover, .clan-member-select:focus-visible { color: #8fe0a5; text-decoration: underline; outline: none; }
.clan-member-selection {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .32rem;
  padding-top: .38rem;
  border-top: 1px solid rgba(137,210,156,.18);
}
.clan-member-selection .danger { border-color: #ad5a5a; background: #682f34; }
.clan-member-profile-link { background: #263f49 !important; border-color: #537b87 !important; }
.clan-applications { margin-top: .7rem; }
.clan-subsection-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.clan-subsection-heading h4 { margin: .25rem 0 .45rem; }
.clan-subsection-heading b {
  min-width: 24px;
  padding: .1rem .36rem;
  color: #251709;
  border-radius: 999px;
  background: #e6b954;
  text-align: center;
  font-size: .65rem;
}
.clan-applications article { padding: .45rem .5rem; }
.clan-applications article > span { display: grid; min-width: 0; margin-right: auto; }
.clan-applications article > span small { color: #a9c0b2; font-size: .7rem; }
.clan-applications article > div { display: flex; gap: .25rem; }
.clan-warning { color: #f0c070; }
.clan-leave { margin-top: .7rem; }
.clan-leave.danger-action {
  color: #fff;
  border-color: rgba(234, 119, 102, .65);
  background: linear-gradient(#9b3e42, #5c1f2a);
}
.clan-gift-panel > p { margin: 0 0 .65rem; color: #b9c9be; line-height: 1.4; }
.clan-gift-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: .5rem;
}
.clan-gift-actions small {
  grid-column: 1 / -1;
  grid-row: 2;
  color: #d9c584;
  font-weight: 800;
  text-align: center;
}
.clan-gift-actions button {
  width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.clan-gift-actions button:disabled, .clan-quest-card button:disabled { opacity: .52; cursor: not-allowed; }
.clan-gift-stats { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .55rem; }
.clan-gift-stats span { padding: .25rem .45rem; color: #a9c0b2; border-radius: 999px; background: rgba(255,255,255,.055); font-size: .72rem; }
.clan-gift-stats strong { color: #8fe0a5; }
.clan-gift-donations {
  min-width: 0;
  display: grid;
  gap: .3rem;
  margin-top: .58rem;
  padding-top: .5rem;
  color: #9fb4aa;
  border-top: 1px solid rgba(143,221,164,.14);
  font-size: .65rem;
}
.clan-gift-donations > strong { color: #c9d8cf; font-size: .68rem; }
.clan-gift-donations > small { color: #80958b; }
.clan-gift-donations ol { display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.clan-gift-donations li { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: .45rem; }
.clan-gift-donations li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clan-gift-donations li > small { flex: 0 0 auto; color: #789487; font-size: .61rem; white-space: nowrap; }
.clan-gift-donations .player-name-link { color: #b9d9c3; font-size: inherit; }
.clan-quest-heading {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: .1rem .65rem;
  margin-bottom: .62rem;
  text-align: left;
}
.clan-quest-heading > span, .clan-quest-heading > h3 { grid-column: 1; }
.clan-quest-heading > b {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  padding: .3rem .48rem;
  color: #d9e8dc;
  border: 1px solid rgba(143,221,164,.25);
  border-radius: 999px;
  background: rgba(53,121,71,.16);
  font-size: .72rem;
  white-space: nowrap;
}
.clan-quest-expiration {
  margin: 0 0 .62rem;
  padding: .42rem .55rem;
  color: #ffe1aa;
  border: 1px solid rgba(236,168,64,.4);
  border-radius: 8px;
  background: rgba(133,72,20,.22);
  font-size: .74rem;
}
.clan-quest-expiration[hidden] { display: none; }
.clan-quest-progress { display: grid; gap: .38rem; margin-bottom: .65rem; }
.clan-quest-progress > div { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .18rem .7rem; color: #a9c0b2; font-size: .76rem; }
.clan-quest-progress > div span { min-width: 0; text-align: right; }
.clan-quest-progress > div strong { color: #f0d586; font-size: .95rem; }
.clan-quest-progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.clan-quest-progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#2f8050,#8fdda4); }
.clan-quest-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .42rem; }
.clan-quest-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: .28rem .5rem;
  padding: .55rem;
  border: 1px solid rgba(189,215,194,.14);
  border-radius: 9px;
  background: rgba(0,0,0,.18);
}
.clan-quest-card > div { display: grid; min-width: 0; gap: .08rem; }
.clan-quest-card > div span, .clan-quest-card > small { color: #a9b8ae; font-size: .69rem; }
.clan-quest-card > div strong { color: #eee0b9; font-size: .82rem; }
.clan-quest-card > small { grid-column: 1; }
.clan-quest-card > button { grid-column: 2; grid-row: 1 / 3; min-width: 82px; }
.clan-quest-card.unlocked { border-color: rgba(124,217,148,.48); background: rgba(39,101,57,.2); }
.clan-quest-card.claimed { border-color: rgba(213,186,108,.28); }
.clan-quest-card.claimed > div strong { color: #d8bd78; }
.clan-leaderboard-heading { border-bottom: 1px solid rgba(124,211,149,.25); padding-bottom: .55rem; }
.clan-leaderboard-heading small { display: block; color: #9bb8a2; }
.clan-leaderboard-tag { color: #83d79b; font-weight: 950; }
.clan-leaderboard-row { grid-template-columns: 54px 38px auto minmax(0, 1fr) auto; }

.clan-shield-editor {
  width: auto;
  height: auto;
  display: grid;
  gap: .8rem;
  padding: .9rem;
  border: 1px solid rgba(219,177,80,.42);
  border-radius: 15px;
  background:
    radial-gradient(circle at 18% 0, rgba(157,108,47,.2), transparent 34%),
    linear-gradient(145deg, rgba(43,30,21,.97), rgba(12,27,33,.98));
  filter: none;
  box-shadow: inset 0 0 0 1px rgba(255,242,202,.06), 0 16px 32px rgba(0,0,0,.28);
}
.clan-shield-editor-workspace,
.clan-shield-panel {
  display: contents;
}
.clan-shield-editor-tabs {
  display: none;
}
.clan-shield-editor-preview {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: 1.1rem;
  padding: .65rem .8rem;
  border-radius: 12px;
  background: radial-gradient(circle at 21% 42%, rgba(236,191,86,.16), transparent 36%), rgba(5,14,18,.5);
}
.clan-shield-preview-stage {
  min-height: 210px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background:
    linear-gradient(rgba(11,18,18,.3), rgba(11,18,18,.72)),
    repeating-linear-gradient(90deg, rgba(211,171,91,.055) 0 2px, transparent 2px 12px);
}
.clan-shield-editor-preview h3 { margin: .15rem 0 .3rem; color: #ffe29a; font-size: 1.35rem; }
.clan-shield-editor-preview p { max-width: 52ch; margin: 0; color: #d6c9ad; line-height: 1.45; }
.clan-shield-editor-preview > div > span {
  color: #d7ae58;
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.clan-shield-editor-preview small { display: block; margin-top: .5rem; color: #91c99f; font-weight: 800; }
.clan-shield-editor-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}
.clan-shield-control,
.clan-shield-color-group {
  min-width: 0;
  margin: 0;
  padding: .62rem;
  border: 1px solid rgba(211,177,102,.22);
  border-radius: 10px;
  background: rgba(5,16,20,.62);
}
.clan-shield-control-wide { grid-column: 1 / -1; }
.clan-shield-control legend,
.clan-shield-color-group legend {
  padding: 0 .35rem;
  color: #e9cb84;
  font-size: .72rem;
  font-weight: 950;
}
.clan-shield-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: .35rem;
}
.clan-shield-choice-grid button {
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  place-items: center;
  gap: .3rem;
  padding: .3rem .45rem;
  color: #ddd4bd;
  border: 1px solid rgba(211,177,102,.18);
  border-radius: 7px;
  background: rgba(25,37,38,.9);
  font-weight: 900;
}
.clan-shield-choice-grid button > span { color: #f3d885; font-size: 1.1rem; }
.clan-shield-choice-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}
.clan-shield-choice-icon svg { width: 24px; height: 24px; overflow: visible; }
.clan-shield-choice-grid button > small { font-size: .64rem; line-height: 1.15; }
.clan-shield-choice-grid button.active {
  color: #241608;
  border-color: #ffedba;
  background: linear-gradient(#f5d788, #c9923d);
  box-shadow: 0 0 0 2px rgba(239,192,88,.18);
}
.clan-shield-choice-grid button.active > span { color: #2b1b0c; }
.clan-shield-colors {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .45rem;
}
.clan-shield-swatch-grid {
  display: grid;
  grid-template-columns: repeat(5, 22px);
  justify-content: center;
  gap: .32rem;
}
.clan-shield-swatch-grid button {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: var(--shield-swatch);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.clan-shield-swatch-grid button.active {
  border-color: #fff8dc;
  box-shadow: 0 0 0 2px #d7a949, inset 0 0 0 1px rgba(0,0,0,.35);
}
.clan-shield-editor-actions {
  display: grid;
  grid-template-columns: minmax(110px,.7fr) minmax(110px,.7fr) minmax(180px,1.3fr);
  gap: .55rem;
}
.clan-shield-editor button:focus-visible,
.clan-hero-actions button:focus-visible {
  outline: 3px solid #f3d27a;
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .clan-browser, .clan-columns { grid-template-columns: 1fr; }
  .clan-rename-form { grid-template-columns: 1fr; }
  .clan-rename-summary, .clan-rename-actions { justify-content: stretch; }
  .clan-rename-actions { display: grid; grid-template-columns: 1fr 1.4fr; }
  .clan-view {
    padding: .35rem;
    overscroll-behavior: contain;
  }
  .clan-content:not(.shield-editor-open) {
    width: 100%;
    display: grid;
    gap: .45rem;
  }
  .clan-section-nav,
  .clan-browser-nav {
    position: sticky;
    z-index: 8;
    top: -.35rem;
    display: grid;
    padding: .3rem;
    border: 1px solid rgba(205,169,87,.34);
    border-radius: 10px;
    background: rgba(5,19,28,.98);
    box-shadow: 0 8px 18px rgba(0,0,0,.34);
  }
  .clan-section-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .25rem;
  }
  .clan-browser-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
  }
  .clan-section-nav button,
  .clan-browser-nav button {
    position: relative;
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .35rem .45rem;
    overflow: hidden;
    color: #a9c7ba;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    font-size: .7rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .clan-section-nav button.active,
  .clan-browser-nav button.active {
    color: #241708;
    border-color: #fff0bd;
    background: linear-gradient(#f2d27e, #c8933e);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.46);
  }
  .clan-section-nav button:focus-visible,
  .clan-browser-nav button:focus-visible {
    outline: 3px solid #f3d27a;
    outline-offset: 1px;
  }
  .clan-section-nav-mark {
    color: #e2bd69;
    font-size: .86rem;
  }
  .clan-section-nav button.active .clan-section-nav-mark { color: #40270e; }
  .clan-section-nav button > b {
    min-width: 20px;
    padding: .1rem .3rem;
    color: #dff7e5;
    border: 1px solid rgba(139,218,160,.25);
    border-radius: 999px;
    background: rgba(31,91,50,.72);
    font-size: .59rem;
    line-height: 1.2;
  }
  .clan-section-nav button > b.alert {
    color: #fff3c5;
    border-color: rgba(239,194,92,.5);
    background: #7d4d1d;
  }
  .clan-section-nav button.active > b {
    color: #fff3c5;
    border-color: rgba(72,40,10,.35);
    background: #563412;
  }
  .clan-content:not(.shield-editor-open) .clan-columns,
  .clan-content:not(.shield-editor-open) .clan-social-panels,
  .clan-browser {
    display: contents;
  }
  .clan-section-panel,
  .clan-browser-panel {
    display: none;
  }
  .clan-section-panel.active,
  .clan-browser-panel.active {
    display: block;
  }
  .clan-overview-panel.active,
  .clan-rallies-panel.active,
  .clan-rewards-panel.active {
    display: grid;
  }
  .clan-overview-panel {
    gap: .5rem;
    margin: 0;
  }
  .clan-overview-panel .clan-hero {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .62rem;
    margin: 0;
    padding: .58rem .68rem;
    border-radius: 11px;
  }
  .clan-overview-panel .clan-shield-size-large {
    width: 62px;
    height: 68px;
  }
  .clan-overview-panel .clan-hero-copy h3 { font-size: 1.03rem; }
  .clan-overview-panel .clan-hero-copy p {
    max-width: 56ch;
    overflow: hidden;
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .clan-overview-panel .clan-power {
    grid-column: auto;
    grid-template-columns: 1fr;
    justify-items: end;
    gap: 0;
    text-align: right;
  }
  .clan-overview-panel .clan-power strong { font-size: 1.08rem; }
  .clan-overview-panel .clan-power span,
  .clan-overview-panel .clan-power small { font-size: .62rem; }
  .clan-hero-actions button {
    min-height: 44px;
    padding: .3rem .65rem;
  }
  .clan-overview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .35rem;
  }
  .clan-overview-grid button {
    min-height: 70px;
    padding: .45rem .55rem;
  }
  .clan-create-card,
  .clan-discovery,
  .clan-roster-panel,
  .clan-gift-panel,
  .clan-quest-panel,
  .clan-social-card,
  .clan-rename-card {
    padding: .65rem;
    border-radius: 11px;
  }
  .clan-rewards-panel.active {
    grid-template-columns: minmax(240px, .78fr) minmax(0, 1.22fr);
    align-items: start;
    gap: .55rem;
  }
  .clan-gift-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .clan-gift-actions small {
    grid-column: 1;
    grid-row: auto;
  }
  .clan-roster {
    max-height: none;
    overflow: visible;
  }
  .clan-search button,
  .clan-list-row > button,
  .clan-member-selection button,
  .clan-applications button,
  .clan-gift-actions button,
  .clan-quest-card button {
    min-height: 44px;
  }
  .clan-view.shield-editor-active {
    overflow: hidden;
    padding: .35rem;
  }
  .clan-content.shield-editor-open {
    width: 100%;
    height: 100%;
    max-width: none;
  }
  .clan-content.shield-editor-open .clan-hero {
    display: none;
  }
  .clan-shield-editor {
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(112px, .78fr) minmax(164px, 1.22fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: .4rem;
    padding: .4rem;
    overflow: hidden;
  }
  .clan-shield-editor-preview {
    min-width: 0;
    min-height: 0;
    grid-column: 1;
    grid-row: 1 / 3;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: .3rem;
    padding: .35rem;
    overflow: hidden;
    text-align: center;
  }
  .clan-shield-preview-stage {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }
  .clan-shield-editor-preview .clan-shield-size-editor {
    width: min(140px, calc(100% - .35rem));
    height: auto;
    aspect-ratio: 176 / 194;
  }
  .clan-shield-editor-intro > span,
  .clan-shield-editor-intro > p,
  .clan-shield-editor-intro > small {
    display: none;
  }
  .clan-shield-editor-preview h3 {
    margin: 0;
    font-size: clamp(.68rem, 2.5vw, .9rem);
    line-height: 1.15;
  }
  .clan-shield-editor-workspace {
    min-width: 0;
    min-height: 0;
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: .35rem;
    overflow: hidden;
  }
  .clan-shield-editor-tabs {
    display: flex;
    gap: .28rem;
    overflow-x: auto;
    padding: 0 0 .2rem;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }
  .clan-shield-editor-tabs button {
    min-width: 67px;
    min-height: 36px;
    flex: 0 0 auto;
    padding: .25rem .42rem;
    scroll-snap-align: start;
    color: #d9cfb7;
    border: 1px solid rgba(211,177,102,.24);
    border-radius: 7px;
    background: rgba(13,31,37,.94);
    font-size: .67rem;
    font-weight: 950;
  }
  .clan-shield-editor-tabs button.active {
    color: #241608;
    border-color: #ffedba;
    background: linear-gradient(#f5d788, #c9923d);
  }
  .clan-shield-editor-controls {
    min-height: 0;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .18rem;
    scrollbar-width: thin;
  }
  .clan-shield-panel {
    display: none;
  }
  .clan-shield-panel.active {
    display: grid;
    grid-template-columns: 1fr;
    gap: .45rem;
  }
  .clan-shield-control-wide,
  .clan-shield-colors {
    grid-column: auto;
  }
  .clan-shield-colors {
    grid-template-columns: 1fr;
  }
  .clan-shield-color-group:last-child {
    grid-column: auto;
  }
  .clan-shield-choice-grid {
    grid-template-columns: repeat(2, minmax(62px, 1fr));
  }
  .clan-shield-choice-grid button {
    min-height: 46px;
    padding: .28rem .32rem;
  }
  .clan-shield-control,
  .clan-shield-color-group {
    padding: .5rem .38rem;
  }
  .clan-shield-editor-actions {
    min-width: 0;
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .32rem;
  }
  .clan-shield-editor-actions button {
    min-height: 38px;
    padding: .25rem .35rem;
    font-size: .66rem;
  }
  .clan-shield-editor-actions .clan-shield-save {
    grid-column: 1 / -1;
    min-height: 42px;
    font-size: .74rem;
  }
}

@media (max-width: 580px) {
  .clan-section-nav button,
  .clan-browser-nav button {
    padding-inline: .3rem;
    font-size: .64rem;
  }
  .clan-section-nav-mark { display: none; }
  .clan-overview-panel .clan-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .clan-overview-panel .clan-shield-size-large {
    width: 54px;
    height: 60px;
  }
  .clan-overview-panel .clan-power {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto auto;
    justify-items: start;
    gap: .5rem;
    text-align: left;
  }
  .clan-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clan-rewards-panel.active { grid-template-columns: 1fr; }
  .clan-list-row { grid-template-columns: auto minmax(0, 1fr); }
  .clan-list-row > button { grid-column: 1 / -1; width: 100%; }
  .clan-gift-actions { grid-template-columns: 1fr; }
  .clan-gift-actions small { order: 2; }
  .clan-quest-grid { grid-template-columns: 1fr; }
  .clan-quest-heading { grid-template-columns: minmax(0,1fr); }
  .clan-quest-heading > b { grid-column: 1; grid-row: auto; justify-self: start; }
  .clan-quest-progress > div { display: grid; gap: .1rem; }
  .clan-member-selection { grid-template-columns: 1fr; }
  .clan-applications article { align-items: flex-start; flex-wrap: wrap; }
  .clan-applications article > div { width: 100%; }
  .clan-applications article > div button { flex: 1; }
  .clan-leaderboard-row { grid-template-columns: 46px 34px auto minmax(0, 1fr); }
  .clan-leaderboard-row .leaderboard-power { grid-column: 4; }
}
.profile-screen-close { grid-column: 3; justify-self: end; border-radius: 999px; }
.profile-icon-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: #174b74;
  border: 1px solid rgba(158,213,255,.35);
  font-size: 1.2rem;
  font-weight: 950;
}
.profile-icon-btn.confirm { color: #0b1b10; background: #7eb35f; }

.profile-view {
  width: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: .6rem .7rem;
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(320px, 1.28fr);
  align-items: stretch;
  gap: .55rem;
  overflow-y: auto;
}
.profile-skills-view {
  width: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: .75rem;
  overflow-y: auto;
}
.profile-settings-view {
  width: min(720px, 100%);
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
  padding: .78rem max(.78rem, env(safe-area-inset-right)) max(.78rem, env(safe-area-inset-bottom)) max(.78rem, env(safe-area-inset-left));
  display: grid;
  align-content: start;
  gap: .68rem;
  overflow-y: auto;
}
.profile-settings-section {
  display: grid;
  gap: .62rem;
  padding: .72rem;
  border-radius: 8px;
  background: rgba(13,44,69,.62);
  border: 1px solid rgba(158,213,255,.18);
}
.profile-skill-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin-bottom: .7rem;
}
.profile-skill-summary > div {
  min-width: 0;
  padding: .58rem .68rem;
  border-radius: 8px;
  background: #0d2c45;
  border: 1px solid rgba(83,159,208,.28);
}
.profile-skill-summary span,
.profile-skill-summary strong { display: block; }
.profile-skill-summary span { overflow: hidden; color: #9ed5ff; font-size: .68rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.profile-skill-summary strong { overflow: hidden; color: #fff4c8; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.profile-skill-summary [data-skill-sync-status] {
  display: block;
  margin-top: .08rem;
  color: #a8ec84;
  font-size: .6rem;
  font-weight: 850;
}
.profile-skill-summary [data-skill-sync-status][hidden] { display: none; }
.profile-skill-list .skill-row.syncing {
  border-color: rgba(137,215,126,.48);
  box-shadow: inset 0 0 0 1px rgba(137,215,126,.08);
}
.skill-preset-panel {
  display: grid;
  gap: .45rem;
  margin-bottom: .7rem;
}
.skill-preset-tabs {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .38rem;
}
.skill-preset-tabs button {
  min-width: 0;
  min-height: 47px;
  padding: .38rem .48rem;
  border: 1px solid rgba(158,213,255,.2);
  border-radius: 8px 8px 4px 4px;
  color: #cfe9ff;
  background: linear-gradient(180deg, rgba(22,69,103,.9), rgba(7,29,48,.96));
  text-align: left;
}
.skill-preset-tabs button strong,
.skill-preset-tabs button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skill-preset-tabs button strong { font-size: .76rem; }
.skill-preset-tabs button small { margin-top: .08rem; color: #9dcce4; font-size: .62rem; font-weight: 850; }
.skill-preset-tabs button.selected {
  border-color: rgba(246,190,82,.72);
  color: #fff4c8;
  background: linear-gradient(180deg, rgba(66,47,24,.96), rgba(17,49,71,.98));
  box-shadow: inset 0 2px 0 rgba(255,231,158,.13);
}
.skill-preset-tabs button.active { border-color: rgba(137,215,126,.7); }
.skill-preset-tabs button.active small { color: #a8ec84; }
.skill-preset-detail {
  min-width: 0;
  display: grid;
  gap: .52rem;
  padding: .62rem .68rem;
  border: 1px solid rgba(246,190,82,.3);
  border-radius: 6px 6px 8px 8px;
  background: linear-gradient(115deg, rgba(20,55,78,.92), rgba(8,27,44,.96));
}
.skill-preset-detail.locked {
  border-color: rgba(158,213,255,.14);
  background: rgba(10,31,49,.72);
}
.skill-preset-detail > header {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .9fr);
  align-items: center;
  gap: .65rem;
}
.skill-preset-detail > header > div:first-child,
.skill-preset-detail > header > div:first-child strong,
.skill-preset-detail > header > div:first-child small { min-width: 0; display: block; }
.skill-preset-detail > header > div:first-child strong { overflow: hidden; color: #fff4c8; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.skill-preset-detail > header > div:first-child small { margin-top: .06rem; color: #9dcce4; font-size: .64rem; font-weight: 850; }
.skill-preset-rename {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .35rem;
}
.skill-preset-rename input {
  min-width: 0;
  min-height: 36px;
  padding: 0 .5rem;
  border: 1px solid rgba(158,213,255,.28);
  border-radius: 7px;
  color: #fff;
  background: rgba(3,17,29,.78);
  font: inherit;
  font-size: .72rem;
  font-weight: 850;
}
.skill-preset-rename button {
  min-height: 36px;
  padding: 0 .62rem;
  border: 1px solid rgba(158,213,255,.28);
  border-radius: 7px;
  color: #fff4c8;
  background: #174b74;
  font-weight: 950;
}
.skill-preset-allocation {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .3rem;
}
.skill-preset-allocation-group {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: .28rem;
  padding: .34rem .42rem;
  border: 1px solid rgba(158,213,255,.14);
  border-radius: 6px;
  background: rgba(5,23,38,.65);
}
.skill-preset-allocation-group h4 {
  margin: 0;
  color: #f6be52;
  font-size: .61rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.skill-preset-allocation-group > div { display: grid; gap: .16rem; }
.skill-preset-allocation-group span {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .24rem;
}
.skill-preset-allocation small,
.skill-preset-allocation strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-preset-allocation small { color: #9dcce4; font-size: .58rem; font-weight: 850; }
.skill-preset-allocation strong { color: #fff4c8; font-size: .72rem; }
.skill-preset-detail > footer,
.skill-preset-confirmation > footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
}
.skill-preset-detail > footer button,
.skill-preset-confirmation > footer button { min-height: 38px; }
.skill-preset-locked-copy,
.skill-preset-empty-copy,
.skill-preset-points,
.skill-preset-error { margin: 0; font-size: .68rem; font-weight: 800; line-height: 1.35; }
.skill-preset-locked-copy,
.skill-preset-empty-copy,
.skill-preset-points { color: #cfe9ff; }
.skill-preset-error { color: #ffb2a6; }
.skill-preset-confirmation-modal.modal { width: min(590px, calc(100vw - 1.1rem)); }
.skill-preset-confirmation { display: grid; gap: .65rem; }
.skill-preset-confirmation h3 { margin: .08rem 0 0; color: #fff4c8; }
.skill-preset-confirmation p { margin: 0; color: #cfe9ff; line-height: 1.4; }
.skill-preset-confirmation p strong { color: #f6be52; }
.profile-skill-reset {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  margin-bottom: .7rem;
  padding: .58rem .68rem;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(64,35,24,.84), rgba(13,44,69,.72));
  border: 1px solid rgba(246,190,82,.36);
}
.profile-skill-reset strong,
.profile-skill-reset small {
  display: block;
}
.profile-skill-reset strong {
  color: #fff4c8;
  font-size: .95rem;
}
.profile-skill-reset small {
  margin-top: .08rem;
  color: #cfe9ff;
  font-size: .68rem;
  font-weight: 850;
  line-height: 1.25;
}
.profile-skill-reset button {
  min-width: 82px;
  min-height: 40px;
  padding: 0 .7rem;
  border-radius: 10px;
  color: #211508;
  background: linear-gradient(#ffd878, #e69627);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), 0 7px 14px rgba(0,0,0,.22);
  font-weight: 950;
}
.profile-skill-reset button:disabled {
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.12);
  box-shadow: none;
}
.profile-skill-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: .65rem;
}
.profile-skill-group {
  min-width: 0;
  display: grid;
  align-content: start;
  overflow: hidden;
  border: 1px solid rgba(158,213,255,.17);
  border-radius: 9px;
  background: rgba(7,28,46,.68);
}
.profile-skill-group > header {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .48rem .62rem;
  border-bottom: 1px solid rgba(246,190,82,.22);
  background: linear-gradient(90deg, rgba(57,43,24,.82), rgba(14,48,71,.76));
}
.profile-skill-group > header strong {
  color: #f6be52;
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.profile-skill-group > header small {
  color: #9dcce4;
  font-size: .6rem;
  font-weight: 850;
}
.profile-skill-group > div { display: grid; gap: .38rem; padding: .42rem; }
.profile-skill-list .skill-row {
  min-width: 0;
  padding: .52rem .58rem;
  border: 1px solid rgba(158,213,255,.15);
  border-radius: 7px;
  background: rgba(13,44,69,.62);
}
.profile-skill-list .skill-row:first-child { border-top: 1px solid rgba(158,213,255,.15); }
.profile-skill-list .skill-row strong { color: #fff4c8; }
.profile-skill-list .skill-row button { min-width: 42px; }
.profile-identity {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .45rem;
  padding: .35rem .45rem;
}
.profile-flag-button {
  display: grid;
  justify-items: center;
  gap: .38rem;
  padding: .45rem;
  color: var(--ink);
  background: transparent;
}
.profile-flag-edit { color: #9ed5ff; font-size: .78rem; font-weight: 900; }
.profile-clan-affiliation {
  width: min(390px, 100%);
  min-height: 58px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  padding: .4rem .65rem;
  border: 1px solid rgba(131,215,155,.38);
  border-radius: 9px;
  color: #f3f7eb;
  background: linear-gradient(115deg, rgba(29,82,48,.72), rgba(13,44,69,.7));
  text-align: left;
}
.profile-clan-affiliation:hover,
.profile-clan-affiliation:focus-visible {
  border-color: #a8ec84;
  background: linear-gradient(115deg, rgba(38,104,61,.86), rgba(19,65,98,.82));
}
.profile-clan-affiliation > span:last-child {
  min-width: 0;
  display: grid;
  gap: .08rem;
}
.profile-clan-affiliation small {
  color: #9ed5b1;
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.profile-clan-affiliation strong {
  overflow: hidden;
  color: #fff1bd;
  font-size: .86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-clan-shield {
  display: grid;
  place-items: center;
}
.profile-clan-shield .clan-shield-size-mini {
  width: 40px;
  height: 44px;
}
.profile-name-block { width: min(390px, 100%); display: grid; gap: .48rem; }
.profile-name-row,
.profile-name-editor {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .55rem;
}
.profile-name-row h3 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 1.28rem; color: #ffe29a; }
.profile-edit-btn { width: 40px; height: 40px; }
.profile-name-editor { grid-template-columns: 1fr 42px 42px; }
.profile-name-editor input { min-width: 0; border-radius: 8px; }
.profile-level-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.profile-level-row strong { color: #fff1bd; }
.profile-level-row span { color: var(--muted); font-size: .8rem; font-weight: 850; }
.profile-xp-track { width: 100%; height: 15px; overflow: hidden; border-radius: 5px; background: #050a11; border: 1px solid rgba(158,213,255,.35); }
.profile-xp-track span { display: block; width: 0; height: 100%; background: #4ca5e8; transition: width .2s ease; }

.kingdom-overview { display: grid; align-content: center; gap: .45rem; padding: .4rem; }
.profile-section-heading { text-align: center; }
.profile-section-heading span,
.flag-editor-preview > div > span { color: #8ecdf1; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.profile-section-heading h3,
.flag-editor-preview h3 { margin: .08rem 0 0; color: #ffe29a; font-size: 1.12rem; }
.kingdom-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.kingdom-stat {
  min-height: 72px;
  padding: .58rem .65rem;
  display: grid;
  align-content: center;
  gap: .2rem;
  border-radius: 8px;
  background: #0d2c45;
  border: 1px solid rgba(83,159,208,.22);
}
.kingdom-stat-wide { grid-column: auto; width: auto; justify-self: stretch; }
.kingdom-stat span { color: #9ed5ff; font-size: .72rem; font-weight: 900; }
.kingdom-stat strong { color: #fff; font-size: 1.12rem; }
.kingdom-stat strong:has(.profile-production-bonus) {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .28em;
}
.kingdom-stat .profile-production-total,
.kingdom-stat .profile-production-bonus {
  font-size: inherit;
  font-weight: inherit;
}
.kingdom-stat .profile-production-total { color: inherit; }
.kingdom-stat .profile-production-bonus {
  color: var(--ui-gold-bright);
}
.kingdom-stat-power { min-height: 82px; }
.kingdom-stat-power small {
  display: block;
  color: #b8d9ed;
  font-size: .56rem;
  font-weight: 700;
  line-height: 1.25;
}

.profile-achievement-summary {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(280px, 1.6fr) minmax(145px, .7fr);
  align-items: center;
  gap: .55rem;
  padding: .48rem .62rem;
  border: 1px solid rgba(211, 161, 63, .3);
  border-radius: 12px;
  background: linear-gradient(110deg, rgba(52, 36, 20, .68), rgba(7, 38, 62, .78));
}

.profile-achievement-summary-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .38rem;
}

.profile-achievement-summary-grid > div {
  min-width: 0;
  display: grid;
  gap: .08rem;
  padding: .35rem .46rem;
  border: 1px solid rgba(118, 182, 216, .18);
  border-radius: 8px;
  background: rgba(3, 18, 30, .5);
  text-align: center;
}

.profile-achievement-summary-grid span { color: #8ecdf1; font-size: .6rem; font-weight: 900; text-transform: uppercase; }
.profile-achievement-summary-grid strong { color: #fff0b6; font-size: .82rem; }
.profile-view-achievements-btn {
  min-height: 38px;
  padding: .42rem .62rem;
  border: 1px solid rgba(255, 232, 151, .72);
  border-radius: 9px;
  color: #271800;
  background: linear-gradient(#ffe785, #d9931f);
  box-shadow: inset 0 -3px 0 rgba(92, 50, 5, .22);
  font-size: .68rem;
  font-weight: 1000;
}
.profile-view-achievements-btn.has-alert { border-color: #ffb4ae; box-shadow: 0 0 12px rgba(255, 54, 50, .4), inset 0 -3px 0 rgba(92, 50, 5, .22); }
.profile-view-achievements-btn:disabled { opacity: .5; }
.kingdom-stat-power small[hidden] { display: none; }
.profile-notification-row {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  padding: .55rem .65rem;
  border-radius: 8px;
  background: #0d2c45;
  border: 1px solid rgba(83,159,208,.24);
}
.profile-notification-row strong,
.profile-notification-row small {
  display: block;
}
.profile-notification-row strong {
  color: #fff4c8;
  font-size: .95rem;
}
.profile-notification-row small {
  margin-top: .08rem;
  color: #cfe9ff;
  font-size: .68rem;
  font-weight: 850;
  line-height: 1.25;
}
.push-alerts-toggle {
  width: 144px;
  min-height: 42px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .22rem;
  padding: .22rem;
  border-radius: 8px;
  background: rgba(5,10,17,.55);
  border: 1px solid rgba(158,213,255,.24);
}
.push-alerts-option {
  min-width: 0;
  min-height: 34px;
  border-radius: 6px;
  color: #d8ecfa;
  background: transparent;
  border: 1px solid transparent;
  font-weight: 950;
}
.push-alerts-option.active {
  color: #211508;
  background: #f2b84b;
  border-color: rgba(255,255,255,.48);
}
.push-alerts-option:disabled { opacity: .58; }
.push-alerts-status {
  justify-self: end;
  min-width: 132px;
  padding: .35rem .55rem;
  overflow: hidden;
  border-radius: 8px;
  color: #d8ecfa;
  background: rgba(5,10,17,.55);
  border: 1px solid rgba(158,213,255,.2);
  font-size: .68rem;
  font-weight: 900;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flag-editor-view {
  width: min(920px, 100%);
  min-height: 0;
  margin: 0 auto;
  padding: 1rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem 1rem;
  overflow-y: auto;
}
.flag-editor-preview {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  padding: .5rem;
}
.flag-control-group { display: grid; align-content: start; gap: .5rem; padding: .75rem; }
.flag-control-group h4 { margin: 0; color: #d8ecfa; font-size: .82rem; }
.flag-swatch-grid { display: grid; grid-template-columns: repeat(6, 38px); gap: .5rem; }
.flag-swatch-grid button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.2);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
}
.flag-swatch-grid button.active { border-color: #fff; box-shadow: 0 0 0 2px #f2b84b, inset 0 0 0 2px rgba(0,0,0,.25); }
.flag-option-grid,
.flag-symbol-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.flag-option-grid button,
.flag-symbol-grid button {
  min-height: 44px;
  border-radius: 8px;
  color: #dcecf7;
  background: #102b40;
  border: 1px solid rgba(158,213,255,.25);
  font-weight: 900;
}
.flag-symbol-grid button { font-size: 1.35rem; }
.flag-option-grid button.active,
.flag-symbol-grid button.active { color: #211508; background: #f2b84b; border-color: #fff0bd; }
.flag-editor-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: .6rem; padding: .4rem .75rem; }
.profile-primary-btn,
.profile-secondary-btn { min-height: 46px; border-radius: 8px; font-weight: 950; }
.profile-primary-btn { color: #211508; background: #f2b84b; }
.profile-secondary-btn { color: #fff; background: #174b74; border: 1px solid rgba(158,213,255,.28); }

@media (max-width: 900px) and (orientation: landscape) {
  .profile-screen-header { min-height: 56px; padding-top: calc(.35rem + env(safe-area-inset-top)); padding-bottom: .35rem; }
  .profile-tabs { grid-template-columns: repeat(4, minmax(64px, 1fr)); }
  .profile-tabs button { min-height: 34px; padding: 0 .45rem; font-size: .72rem; }
  .profile-view { grid-template-columns: minmax(195px, .7fr) minmax(300px, 1.3fr); padding: .45rem; gap: .35rem; }
  .profile-identity, .kingdom-overview { padding: .32rem; }
  .kingdom-flag-large { width: 104px; height: 76px; }
  .kingdom-flag-large .flag-symbol { font-size: 2.1rem; }
  .profile-name-row h3 { font-size: 1.12rem; }
  .profile-edit-btn { width: 36px; height: 36px; }
  .profile-level-row span { font-size: .72rem; }
  .profile-xp-track { height: 12px; }
  .kingdom-stat { min-height: 62px; padding: .42rem .5rem; }
  .kingdom-stat-power { min-height: 76px; }
  .kingdom-stat strong { font-size: .96rem; }
  .flag-editor-view { padding-top: .5rem; }
  .kingdom-flag-editor { width: 132px; height: 92px; }
  .flag-editor-preview { padding: 0; }
  .flag-control-group { padding: .45rem; }
  .profile-skills-view { padding-top: .55rem; }
  .profile-skill-summary { margin-bottom: .45rem; }
  .profile-skill-summary > div { padding: .42rem .55rem; }
  .skill-preset-panel { margin-bottom: .45rem; }
  .skill-preset-tabs button { min-height: 40px; padding: .3rem .4rem; }
  .skill-preset-detail { gap: .4rem; padding: .45rem .55rem; }
  .skill-preset-detail > header { grid-template-columns: minmax(0, 1fr) minmax(190px, .8fr); }
  .skill-preset-allocation-group { padding: .26rem .34rem; }
  .skill-preset-detail > footer button { min-height: 34px; }
  .profile-skill-reset { min-height: 46px; margin-bottom: .45rem; padding: .42rem .55rem; }
  .profile-skill-reset button { min-height: 34px; min-width: 72px; }
  .profile-skill-list { gap: .35rem .55rem; }
  .profile-skill-list .skill-row { padding: .42rem .55rem; }
  .profile-settings-view { padding: .55rem; }
  .profile-notification-row { min-height: 46px; padding: .45rem .55rem; }
}

/* Daily Missions --------------------------------------------------------- */
.daily-missions-section {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(211, 161, 63, .27);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(13, 44, 69, .82), rgba(4, 19, 32, .88));
  box-shadow: inset 0 1px 0 rgba(255, 239, 186, .05);
}

.daily-missions-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: .38rem;
  padding: .5rem;
}
.daily-missions-section[hidden] { display: none; }

.daily-missions-heading {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
}
.daily-missions-heading .profile-section-heading { text-align: left; }
.daily-missions-heading .profile-section-heading h3 { font-size: .94rem; }
.daily-missions-heading .profile-section-heading h3 strong { color: #9ed5ff; font-size: .72rem; }
.daily-missions-meta { display: grid; justify-items: end; gap: .08rem; }
.daily-missions-meta span { color: #b8d9ed; font-size: .59rem; font-weight: 850; white-space: nowrap; }
.daily-missions-meta span:last-child { color: #f2c768; }

.daily-missions-list {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: .34rem;
}

.daily-mission-row {
  min-width: 0;
  min-height: 62px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(88px, .48fr) 58px;
  align-items: center;
  gap: .42rem;
  padding: .36rem .4rem;
  border: 1px solid rgba(158, 213, 255, .17);
  border-radius: 7px;
  background: rgba(3, 17, 29, .68);
  cursor: pointer;
}
.daily-mission-row:hover,
.daily-mission-row:focus-visible { border-color: rgba(242, 200, 104, .62); }
.daily-mission-row.complete { border-color: rgba(126, 190, 103, .42); background: rgba(18, 55, 41, .62); }
.daily-mission-row.claimed { opacity: .76; }
.daily-mission-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #f3ca6e;
  border: 1px solid rgba(211, 161, 63, .42);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(68, 50, 22, .9), rgba(12, 31, 46, .95));
  font-size: 1rem;
  line-height: 1;
}
.daily-mission-copy { min-width: 0; display: grid; gap: .12rem; }
.daily-mission-copy > div { min-width: 0; display: flex; justify-content: space-between; gap: .35rem; }
.daily-mission-copy strong,
.daily-mission-copy small,
.daily-mission-reward strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daily-mission-copy strong { color: #fff0bd; font-size: .72rem; }
.daily-mission-copy > div > span { color: #9ed5ff; font-size: .61rem; font-weight: 900; }
.daily-mission-copy small { color: #c3d9e5; font-size: .59rem; font-weight: 750; }
.daily-mission-progress { height: 5px; overflow: hidden; border-radius: 99px; background: rgba(0, 0, 0, .55); }
.daily-mission-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #347fa8, #efbd52); }
.daily-mission-row.complete .daily-mission-progress i { background: linear-gradient(90deg, #437d4c, #9edc71); }
.daily-mission-reward { min-width: 0; display: grid; gap: .08rem; }
.daily-mission-reward small { color: #8ecdf1; font-size: .52rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.daily-mission-reward strong { color: #f2c768; font-size: .59rem; }
.daily-mission-action { min-width: 0; display: grid; justify-items: end; }
.daily-mission-action button {
  min-width: 52px;
  min-height: 32px;
  padding: 0 .42rem;
  border: 1px solid rgba(255, 235, 173, .68);
  border-radius: 6px;
  color: #271807;
  background: linear-gradient(180deg, #f5d77f, #b97720);
  font-size: .62rem;
  font-weight: 950;
  text-transform: uppercase;
}
.daily-mission-action .daily-mission-reroll {
  min-width: 32px;
  width: 32px;
  padding: 0;
  color: #fff0bd;
  border-color: rgba(158, 213, 255, .32);
  background: linear-gradient(180deg, #174b74, #071a2b);
  font-size: 1rem;
}
.daily-mission-action button:disabled { opacity: .58; }
.daily-mission-completed { color: #a8ec84; font-size: .55rem; font-weight: 950; text-align: right; text-transform: uppercase; }
.daily-mission-difficulty { color: #8eb4cb; font-size: .54rem; font-weight: 900; text-transform: uppercase; }
.daily-mission-placeholder {
  min-width: 0;
  min-height: 70px;
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  padding: .7rem;
  color: #c8d9e2;
  border: 1px dashed rgba(158, 213, 255, .22);
  border-radius: 7px;
  background: rgba(3, 17, 29, .46);
  font-size: .72rem;
  font-weight: 850;
  text-align: center;
}
button.daily-mission-placeholder { width: 100%; cursor: pointer; }
.daily-missions-status { margin: 0; color: #ffb2a6; font-size: .58rem; font-weight: 800; }

.modal.daily-mission-modal { width: min(480px, calc(100% - 1.2rem)); }
.daily-mission-detail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .62rem;
  align-items: center;
}
.daily-mission-detail-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  grid-row: span 2;
  color: #f3ca6e;
  border: 1px solid rgba(211, 161, 63, .46);
  border-radius: 50%;
  background: rgba(12, 31, 46, .88);
  font-size: 1.5rem;
}
.daily-mission-detail h3 { margin: .08rem 0 0; color: #fff0bd; font-size: 1rem; }
.daily-mission-detail > div > span,
.daily-mission-detail-stat span { color: #8ecdf1; font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.daily-mission-detail-stat { min-width: 0; display: grid; gap: .12rem; padding: .5rem; border-radius: 7px; background: rgba(13, 44, 69, .68); }
.daily-mission-detail-stat strong { color: #fff0bd; }
.daily-mission-recommendation { grid-column:1/-1; display:grid; gap:.18rem; padding:.58rem; border:1px solid #6a995e; border-radius:8px; background:#123729c7; }
.daily-mission-recommendation > span { color:#9edc71; font-weight:900; text-transform:uppercase; }
.daily-mission-detail p,
.daily-mission-detail small { grid-column: 1 / -1; margin: 0; color: #c8d9e2; line-height: 1.35; }
.daily-mission-confirmation { display: grid; gap: .6rem; }
.daily-mission-confirmation p { margin: 0; }
.daily-mission-confirmation p strong { color: #f2c768; }
.daily-mission-confirmation footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.daily-mission-confirmation footer button { min-height: 42px; }
@media (max-width: 640px) and (orientation: portrait) {
  .profile-view {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: .42rem;
    padding: .42rem;
    overflow-y: auto;
  }
  .profile-achievement-summary {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: .38rem;
    padding: .48rem;
  }
  .profile-identity {
    min-width: 0;
    min-height: 0;
    grid-template-columns: 68px minmax(0, 1fr);
    justify-items: stretch;
    align-content: center;
    gap: .42rem;
    padding: .48rem;
    border: 1px solid rgba(158, 213, 255, .14);
    border-radius: 8px;
    background: linear-gradient(100deg, rgba(13, 44, 69, .82), rgba(5, 22, 37, .68));
  }
  .profile-identity .profile-flag-button { grid-column: 1; grid-row: 1; padding: .1rem; }
  .profile-identity .kingdom-flag-large { width: 64px; height: 48px; }
  .profile-identity .profile-flag-edit { display: none; }
  .profile-identity .profile-name-block { width: 100%; gap: .3rem; }
  .profile-identity .profile-name-row { gap: .3rem; }
  .profile-identity .profile-name-row h3 { font-size: .96rem; }
  .profile-identity .profile-edit-btn { width: 30px; height: 30px; font-size: .9rem; }
  .profile-identity .profile-level-row { gap: .25rem; }
  .profile-identity .profile-level-row strong,
  .profile-identity .profile-level-row span { font-size: .62rem; }
  .profile-identity .profile-xp-track { height: 9px; }
  .profile-identity .profile-clan-affiliation {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: .36rem;
    padding: .24rem .36rem;
  }
  .profile-identity .profile-clan-shield .clan-shield-size-mini { width: 27px; height: 30px; }
  .kingdom-overview { gap: .38rem; padding: .48rem; }
  .kingdom-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .36rem; }
  .kingdom-stat,
  .kingdom-stat-power { min-height: 58px; padding: .4rem .48rem; }
  .kingdom-stat span { font-size: .61rem; }
  .kingdom-stat strong { font-size: .84rem; }
  .daily-missions-section { gap: .24rem; padding: .34rem; }
  .daily-missions-heading .profile-section-heading span { font-size: .54rem; }
  .daily-missions-heading .profile-section-heading h3 { font-size: .76rem; }
  .daily-missions-meta span { font-size: .52rem; }
  .daily-missions-list { gap: .24rem; }
  .daily-mission-row { min-height: 52px; grid-template-columns: 28px minmax(0, 1fr) 77px 44px; gap: .28rem; padding: .25rem .28rem; }
  .daily-mission-icon { width: 27px; height: 27px; font-size: .86rem; }
  .daily-mission-copy strong { font-size: .62rem; }
  .daily-mission-copy small { font-size: .52rem; }
  .daily-mission-copy > div > span { font-size: .53rem; }
  .daily-mission-reward small { font-size: .46rem; }
  .daily-mission-reward strong { font-size: .5rem; }
  .daily-mission-action button { min-width: 42px; min-height: 28px; padding: 0 .22rem; font-size: .54rem; }
  .daily-mission-action .daily-mission-reroll { min-width: 28px; width: 28px; min-height: 28px; }
  .daily-mission-completed { font-size: .47rem; }
  .profile-stat-info { right: .2rem; top: .2rem; width: 18px; height: 18px; font-size: .55rem; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .daily-mission-row { min-height: 50px; }
}

/* Main-menu patch notes ---------------------------------------------------- */

.patch-notes-btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .58rem;
  padding: 0 .78rem;
  text-align: left;
}

.patch-notes-btn-icon {
  font-size: 1.12rem;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45));
}

.patch-notes-btn.has-new-patch-notes {
  border-color: rgba(255, 220, 123, .66);
  background: linear-gradient(180deg, rgba(116, 79, 20, .4), rgba(37, 29, 18, .5));
  box-shadow: inset 0 0 0 1px rgba(255, 239, 183, .08), 0 0 18px rgba(232, 172, 53, .08);
}

.patch-notes-badge {
  padding: .22rem .46rem;
  color: #251600;
  border: 1px solid #ffe59c;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe89d, #e9a62d);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
  font-size: .59rem;
  font-weight: 1000;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.patch-notes-badge[hidden] {
  display: none;
}

.modal.patch-notes-modal {
  width: min(620px, calc(100% - 1.3rem));
}

.patch-notes-modal .modal-card {
  max-height: min(88dvh, 760px);
}

.patch-notes-modal #modalBody {
  display: grid;
  gap: .72rem;
}

.patch-notes-intro {
  display: grid;
  gap: .22rem;
  padding: .78rem .84rem;
  border: 1px solid rgba(242, 202, 114, .28);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0, rgba(242, 202, 114, .14), transparent 44%),
    rgba(4, 18, 31, .66);
}

.patch-notes-intro > span,
.patch-notes-release header span {
  color: #efc96f;
  font-size: .63rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.patch-notes-intro > strong {
  color: #fff0b4;
  font-family: var(--font-display);
  font-size: 1rem;
}

.patch-notes-intro p {
  margin: .1rem 0 0;
  font-size: .78rem;
}

.patch-notes-release-list {
  display: grid;
  gap: .62rem;
}

.patch-notes-release {
  display: grid;
  gap: .52rem;
  padding: .75rem .82rem;
  border: 1px solid rgba(180, 204, 222, .18);
  border-radius: 14px;
  background: rgba(3, 14, 25, .58);
}

.patch-notes-release.is-latest {
  border-color: rgba(242, 202, 114, .42);
  background: linear-gradient(180deg, rgba(45, 38, 24, .72), rgba(3, 14, 25, .68));
}

.patch-notes-release header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
}

.patch-notes-release header > div {
  display: grid;
  gap: .12rem;
}

.patch-notes-release header strong {
  color: #f6e7c4;
  font-size: .88rem;
}

.patch-notes-release header em {
  padding: .2rem .46rem;
  color: #241600;
  border-radius: 999px;
  background: #efc96f;
  font-size: .58rem;
  font-style: normal;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.patch-notes-release ul {
  margin: 0;
  padding-left: 1.1rem;
}

.patch-notes-release li {
  margin: .28rem 0;
  color: #dbe8f0;
  font-size: .8rem;
}

.patch-notes-release > small {
  color: #8399a9;
  font-family: var(--font-system);
  font-size: .6rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

@media (max-height: 560px) and (orientation: landscape) {
  .setup-card {
    max-height: calc(100dvh - 1rem);
    margin-bottom: .5rem;
    padding: .58rem;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .online-login {
    padding: .55rem;
  }

  .server-realm-list {
    gap: .3rem;
    margin-top: .45rem;
    padding-top: .4rem;
  }

  .server-realm-card {
    min-height: 50px;
  }

  .online-login .ghost-btn,
  .online-login .primary-btn {
    min-height: 44px;
    margin-top: .32rem;
  }

  .public-site-links {
    margin-top: .42rem;
  }

  .patch-notes-modal .modal-card {
    max-height: calc(100dvh - 1rem);
    padding: .72rem;
  }

  .patch-notes-intro {
    padding: .58rem .68rem;
  }
}

.profile-gold {
  min-width: 86px;
  height: 31px;
  margin-left: -7px;
  margin-top: .16rem;
  padding: 0 .45rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  color: #fff8dc;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(16,15,22,.9);
  box-shadow: 0 8px 22px rgba(0,0,0,.3);
}
.profile-gold span { font-size: 1rem; }
.profile-gold strong { font-size: .96rem; }

.character-level-badge {
  position: absolute;
  z-index: 3;
  right: 9px;
  bottom: 8px;
  min-width: 36px;
  height: 20px;
  padding: 0 .32rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #211508;
  font-size: .62rem;
  font-weight: 1000;
  border: 2px solid rgba(255, 248, 220, .9);
  background: linear-gradient(#ffd977, #e99a26);
  box-shadow: 0 8px 18px rgba(0,0,0,.42);
}

.profile-xp {
  min-width: 88px;
  padding: .12rem .38rem;
  border-radius: 999px;
  color: #bfe4ff;
  font-size: .6rem;
  font-weight: 950;
  text-align: center;
  border: 1px solid rgba(132, 190, 255, .18);
  background: rgba(8, 15, 28, .66);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.profile-cap {
  min-width: 88px;
  padding: .16rem .4rem;
  border-radius: 999px;
  color: #d7ecff;
  font-size: .64rem;
  font-weight: 900;
  text-align: center;
  border: 1px solid rgba(132, 190, 255, .2);
  background: rgba(8, 15, 28, .72);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}

.top-hud {
  align-items: flex-start;
}

.selected-mini,
.idle-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .42rem;
  margin-bottom: .55rem;
}
.idle-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.selected-mini > div,
.idle-summary > span {
  padding: .54rem .55rem;
  border-radius: 14px;
  background: rgba(8, 15, 28, .72);
  border: 1px solid rgba(132, 190, 255, .18);
}
.selected-mini span,
.idle-summary span {
  color: #9ed5ff;
  font-size: .68rem;
  font-weight: 850;
}
.selected-mini strong,
.idle-summary strong {
  display: block;
  color: #fff;
  font-size: .9rem;
}

.city-action-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 52px 1fr;
  gap: .5rem;
  align-items: stretch;
}
.action-buttons .city-action-row button {
  min-width: 0;
  width: 100%;
  min-height: 66px;
  white-space: pre-line;
}
.action-buttons .city-action-row .info-action {
  border-radius: 999px;
  min-height: 52px;
  align-self: center;
  font-size: 1.35rem;
  color: #fff8d6;
  background: linear-gradient(#367fcf, #103c7a);
  border: 2px solid rgba(160, 218, 255, .9);
  box-shadow: 0 9px 22px rgba(0,0,0,.32), inset 0 0 0 2px rgba(255,255,255,.08);
}
.action-buttons .city-action-row .level-action {
  color: #251702;
  background: linear-gradient(#ffe38a, #dd961c);
}
.action-buttons .city-action-row .send-action {
  color: white;
  background: linear-gradient(#50a9ff, #165ba9);
}

.send-confirm-card,
.send-outcome {
  padding: .7rem;
  border-radius: 16px;
  background: rgba(8, 15, 28, .76);
  border: 1px solid rgba(132, 190, 255, .2);
}
.send-confirm-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: .65rem;
  align-items: center;
  margin-bottom: .5rem;
}
.send-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  font-size: 1.55rem;
  background: linear-gradient(#163967, #09182c);
  border: 1px solid rgba(255,255,255,.16);
}
.send-main strong,
.send-main span {
  display: block;
}
.send-main span {
  color: var(--muted);
  font-size: .78rem;
  margin-top: .1rem;
}
.send-outcome {
  display: grid;
  gap: .1rem;
  margin-bottom: .2rem;
}
.send-outcome strong { color: #fff; }
.send-outcome span { color: #9ed5ff; font-weight: 900; }
.send-outcome small { color: var(--muted); }
.send-outcome.win { box-shadow: inset 0 0 0 1px rgba(126,179,95,.45); }
.send-outcome.lose { box-shadow: inset 0 0 0 1px rgba(237,74,69,.48); }
.action-buttons button.move-action { color: #0b1b10; background: linear-gradient(#a8ec84, #48a84b); }
.action-buttons button.attack-action { color: #fff; background: linear-gradient(#ff6a5f, #b82320); }
.city-node.targeted .city-ring { box-shadow: none; animation: none; }

@media (max-width: 780px) and (orientation: landscape) {
  .profile-action-row { gap: .44rem; }
  .portrait-placeholder { width: 74px; height: 58px; border-radius: 14px; }
  .profile-button .kingdom-flag-small { left: 19.5%; top: 25.4%; width: 60.8%; height: 52%; border-radius: 0; }
  .profile-rank-btn { width: 44px; height: 44px; }
  .clan-hud-icon .clan-shield-size-small { width: 40px; height: 44px; }
  .clan-hud-btn.is-search::after { right: -3px; bottom: -3px; width: 18px; height: 18px; font-size: .76rem; }
  .daily-login-reward-badge { width: 18px; height: 18px; font-size: .62rem; }
  .shop-btn { width: 56px; height: 56px; }
  .resource-pill.bag-btn,
  .resource-pill.shop-btn,
  .resource-pill.city-list-btn,
  .resource-pill.island-switch-btn { width: 56px; min-width: 56px; max-width: 56px; height: 56px; }
  .resource-pill.bag-btn { right: calc(max(.75rem, env(safe-area-inset-right)) + 198px); }
  .resource-pill.shop-btn { right: calc(max(.75rem, env(safe-area-inset-right)) + 132px); }
  .resource-pill.city-list-btn { right: calc(max(.75rem, env(safe-area-inset-right)) + 66px); }
  .active-item-effects-stack {
    --effect-badge-size: 48px;
    --effect-icon-size: 39px;
    --effect-timer-font: .5rem;
    --effect-stack-gap: .22rem;
    right: max(.38rem, env(safe-area-inset-right));
    max-height: calc(100dvh - 124px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .effect-status-badge { padding: .18rem .16rem .22rem; border-radius: 11px; }
  .effect-status-icon { border-radius: 10px; }
  .effect-status-badge strong { font-size: var(--effect-timer-font); padding: .12rem .18rem; }
  .active-item-effects-stack.compact {
    --effect-badge-size: 38px;
    --effect-icon-size: 30px;
    --effect-timer-font: .42rem;
    --effect-stack-gap: .1rem;
    top: calc(50% - 24px);
    right: max(.22rem, env(safe-area-inset-right));
    max-height: calc(100dvh - 154px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .active-item-effects-stack.compact .effect-status-badge {
    min-height: calc(var(--effect-badge-size) * 1.06);
    gap: .06rem;
    padding: .1rem .08rem .12rem;
    border-radius: 8px;
  }
  .active-item-effects-stack.compact .effect-status-icon { border-radius: 7px; }
  .active-item-effects-stack.compact .effect-status-badge strong { padding: .07rem .1rem; }
  .inventory-slots { gap: .38rem; }
  .inventory-slot { min-height: 98px; grid-template-rows: 34px 3.05em 1em; gap: .2rem; padding: .46rem .32rem; }
  .inventory-slot-icon { width: 34px; height: 34px; border-radius: 9px; }
  .inventory-slot-icon span { width: 22px; height: 22px; font-size: .74rem; }
  .inventory-slot-name { min-height: 3em; font-size: .66rem; line-height: 1; }
  .inventory-slot-count { font-size: .64rem; }
  .inventory-selection { grid-template-columns: 42px minmax(0, 1fr) auto; gap: .44rem; padding: .5rem; }
  .inventory-selection-icon { width: 42px; height: 42px; border-radius: 9px; }
  .inventory-selection-copy strong { font-size: .78rem; }
  .inventory-selection-copy small, .inventory-selection-empty small { font-size: .62rem; }
  .inventory-use-btn { min-width: 48px; min-height: 26px; padding: .2rem .42rem; font-size: .66rem; }
  .character-level-badge { min-width: 31px; height: 18px; right: 7px; bottom: 6px; font-size: .54rem; }
  .profile-gold { height: 27px; min-width: 74px; margin-top: .14rem; font-size: .78rem; }
  .profile-xp { min-width: 76px; font-size: .52rem; padding: .1rem .3rem; }
  .profile-cap { min-width: 76px; font-size: .56rem; padding: .12rem .3rem; }
  .selected-mini { grid-template-columns: 1fr; }
  .city-action-row { grid-template-columns: 1fr 46px 1fr; gap: .35rem; }
  .action-buttons .city-action-row button { min-height: 52px; font-size: .68rem; }
  .action-buttons .city-action-row .info-action { min-height: 46px; font-size: 1.1rem; }
  .relinquish-city-action-panel { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .relinquish-city-btn { width: 100%; min-width: 0; }
  .city-level-up-panel { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .city-level-up-btn { min-height: 40px; padding: .36rem .32rem; }
  .send-confirm-card { grid-template-columns: 46px 1fr; }
  .send-icon { width: 46px; height: 46px; font-size: 1.25rem; }
  .shop-item { grid-template-columns: 46px minmax(0, 1fr) auto; gap: .48rem; padding: .5rem .55rem; }
  .shop-item-image-placeholder { width: 46px; height: 46px; border-radius: 10px; }
  .shop-item-image-placeholder span { width: 24px; height: 24px; font-size: .82rem; }
  .shop-buy-btn { min-width: 78px; min-height: 38px; }
  .shop-rewarded-section { padding: .5rem; }
  .shop-rewarded-items { grid-template-columns: minmax(0, 1fr); }
  .shop-item.rewarded-ad-shop-item { grid-template-columns: 82px minmax(0, 1fr); }
  .rewarded-ad-shop-action .shop-item-image-placeholder { width: 64px; height: 64px; }
  .shop-buy-btn.rewarded-ad-watch-btn { min-width: 0; font-size: .7rem; }
  .city-list-modal.modal { width: min(760px, calc(100vw - .8rem)); }
  .city-list-toolbar { gap: .5rem; padding-inline: 0; }
  .city-list-toolbar button { min-width: 104px; min-height: 42px; }
  .city-list-row {
    min-height: 56px;
    grid-template-columns: 44px 44px 44px minmax(84px, .85fr) minmax(92px, 1fr) minmax(70px, .65fr) 40px;
    gap: .32rem;
    padding: .34rem .42rem;
  }
  .city-list-locate,
  .city-list-info { width: 38px; height: 38px; font-size: 1.15rem; }
  .city-list-art { width: 42px; height: 36px; font-size: 1.25rem; }
  .city-list-level { width: 32px; height: 36px; font-size: .82rem; }
  .city-list-troops,
  .city-list-name { font-size: .98rem; }
  .city-list-main-label { font-size: .84rem; }
  .city-list-pager button { width: 42px; height: 42px; font-size: 1.7rem; }
  .main-city-return { width: 36px; height: 36px; }
  .main-city-return-house { font-size: 1rem; }
  .main-city-return-arrow { transform: translate(-50%, -50%) rotate(var(--main-city-angle, 0deg)) translateX(18px); }
}

@media (max-width: 780px) and (orientation: landscape) and (max-height: 390px) {
  .active-item-effects-stack {
    --effect-badge-size: 42px;
    --effect-icon-size: 34px;
    --effect-timer-font: .46rem;
    --effect-stack-gap: .16rem;
    right: max(.28rem, env(safe-area-inset-right));
    max-height: calc(100dvh - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .effect-status-badge { padding: .14rem .12rem .18rem; border-radius: 9px; }
  .effect-status-icon { border-radius: 8px; }
  .effect-status-badge strong { padding: .1rem .14rem; }
  .active-item-effects-stack.compact {
    --effect-badge-size: 34px;
    --effect-icon-size: 27px;
    --effect-timer-font: .38rem;
    --effect-stack-gap: .07rem;
    top: calc(50% - 26px);
    max-height: calc(100dvh - 142px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .active-item-effects-stack.compact .effect-status-badge {
    min-height: calc(var(--effect-badge-size) * 1.04);
    padding: .08rem .06rem .1rem;
    border-radius: 7px;
  }
}

/* Inner Castle placeholder hub */
.main-city-status-copy {
  min-width: 0;
}

.inner-castle-entry-btn {
  min-width: 156px;
  min-height: 44px;
  margin-left: .7rem;
  padding: .5rem .78rem;
  border: 1px solid rgba(255, 224, 145, .72);
  border-radius: 13px;
  color: #241604;
  background: linear-gradient(180deg, #ffe596, #dfa133);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 5px 13px rgba(0,0,0,.26);
  font-size: .78rem;
  font-weight: 950;
  white-space: nowrap;
}

.inner-castle-entry-btn:hover {
  filter: brightness(1.08);
}

.inner-castle-entry-btn:focus-visible,
.inner-castle-back-btn:focus-visible {
  outline: 3px solid #fff0a7;
  outline-offset: 3px;
}

.inner-castle-modal.modal {
  width: min(1180px, calc(100vw - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-width: calc(100vw - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right));
}

.modal.inner-castle-modal .modal-card {
  max-height: min(94dvh, 820px);
  padding: max(.72rem, env(safe-area-inset-top)) max(.72rem, env(safe-area-inset-right)) max(.72rem, env(safe-area-inset-bottom)) max(.72rem, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% -20%, rgba(89, 151, 208, .28), transparent 45%),
    linear-gradient(180deg, #102a42, #071523 76%, #050d16);
  border-color: rgba(229, 184, 91, .64);
}

.inner-castle-modal .modal-close {
  width: 44px;
  height: 44px;
  right: .5rem;
  top: .45rem;
}

.inner-castle-modal .modal-card h2 {
  color: #fff0c2;
}

.inner-castle-modal .modal-card #modalBody {
  overflow: hidden;
  padding-right: 0;
}

.inner-castle-shell {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: .62rem;
}

.inner-castle-intro {
  margin: 0;
  color: #cfe9ff !important;
  font-size: .78rem;
  font-weight: 750;
  text-align: center;
}

.inner-castle-layout {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 22vw, 280px);
  align-items: stretch;
  gap: .72rem;
}

.inner-castle-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
}

.inner-castle-scene {
  position: relative;
  width: min(100%, calc(125.333dvh - 12rem));
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
  border: 2px solid rgba(234, 194, 107, .66);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 25%, rgba(116, 184, 223, .34), transparent 45%),
    linear-gradient(180deg, #355c75, #273827 70%, #131d15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 16px 34px rgba(0,0,0,.38);
}

.inner-castle-hub-art,
.inner-castle-hotspots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.inner-castle-hub-art {
  z-index: 0;
  display: block;
  object-fit: contain;
  background: rgba(5, 16, 25, .58);
}

.inner-castle-hotspots {
  z-index: 1;
  pointer-events: none;
}

.inner-castle-hotspot {
  position: absolute;
  left: var(--hotspot-left);
  top: var(--hotspot-top);
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding: 0;
  border: 0;
  outline: 0;
  appearance: none;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font: inherit;
  cursor: pointer;
  overflow: visible;
}

.inner-castle-hotspot > span {
  box-sizing: border-box;
  position: relative;
  width: clamp(72px, 8vw, 96px);
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .2rem .4rem .22rem .9rem;
  border: 1px solid rgba(211, 169, 78, .96);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  color: #fff3cf;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 28%, transparent 72%, rgba(255,255,255,.05)),
    linear-gradient(180deg, rgba(24, 67, 101, .97), rgba(6, 29, 50, .98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.38);
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.58));
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.5rem, .8vw, .62rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0,0,0,.82);
  text-transform: uppercase;
  text-wrap: balance;
  transition: transform .16s ease, color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}

.inner-castle-hotspot > span::before {
  content: "";
  position: absolute;
  left: .4rem;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translateY(-50%) rotate(45deg);
  border: 1px solid rgba(255, 235, 173, .68);
  background: #d2a548;
  box-shadow: 0 0 4px rgba(232, 190, 95, .48);
}

.inner-castle-hotspot:hover > span {
  transform: translateY(-1px);
  border-color: #f1ca70;
  filter: brightness(1.08) drop-shadow(0 4px 4px rgba(0,0,0,.62));
}

.inner-castle-hotspot.selected > span {
  transform: scale(1.02);
  border-color: #fff0ae;
  color: #281803;
  background:
    linear-gradient(90deg, rgba(255,255,255,.24), transparent 30%, transparent 70%, rgba(255,255,255,.12)),
    linear-gradient(180deg, #ffe7a0, #d59a32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(106, 59, 7, .35);
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.6));
  text-shadow: none;
}

.inner-castle-hotspot.selected > span::before {
  border-color: rgba(85, 48, 8, .5);
  background: #53330b;
  box-shadow: none;
}

.inner-castle-hotspot.selected:hover > span {
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.04) drop-shadow(0 5px 4px rgba(0,0,0,.62));
}

.inner-castle-hotspot:active > span,
.inner-castle-hotspot.selected:active > span {
  transform: translateY(1px) scale(.98);
  filter: brightness(.97) drop-shadow(0 2px 2px rgba(0,0,0,.54));
}

.inner-castle-hotspot:focus-visible > span {
  outline: 2px solid #fff0a7;
  outline-offset: 2px;
  filter: brightness(1.08) drop-shadow(0 0 4px rgba(255, 229, 139, .94)) drop-shadow(0 4px 4px rgba(0,0,0,.62));
}

.inner-castle-preview-tray {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: .65rem;
  padding: .62rem;
  border: 1px solid rgba(229, 184, 91, .42);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(19, 48, 70, .94), rgba(6, 20, 32, .96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.28);
}

.inner-castle-preview {
  min-height: 0;
  align-self: center;
  display: grid;
  gap: .56rem;
}

.inner-castle-preview-art {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1;
  display: block;
  padding: clamp(4px, .7vw, 8px);
  object-fit: contain;
  border: 1px solid rgba(206, 230, 246, .28);
  border-radius: 13px;
  background: rgba(4, 14, 23, .72);
  box-shadow: 0 9px 20px rgba(0,0,0,.34);
}

.inner-castle-preview-copy {
  min-width: 0;
  display: grid;
  gap: .2rem;
  text-align: center;
}

.inner-castle-preview-copy strong,
.inner-castle-preview-copy span,
.inner-castle-preview-copy small {
  display: block;
}

.inner-castle-preview-copy strong {
  color: #ffe49a;
  font-size: 1.05rem;
}

.inner-castle-preview-copy span {
  color: #d8edfb;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.28;
}

.inner-castle-preview-copy small {
  margin-top: .16rem;
  color: #91bad3;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.inner-castle-back-btn {
  width: 100%;
  min-height: 44px;
  padding: .48rem .64rem;
  border: 1px solid rgba(181, 216, 239, .34);
  border-radius: 12px;
  color: #eaf6ff;
  background: linear-gradient(180deg, #25577a, #0b2a43);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 5px 12px rgba(0,0,0,.24);
  font-size: .74rem;
  font-weight: 950;
}

.inner-castle-back-btn span {
  margin-right: .28rem;
}

.inner-castle-back-btn:hover {
  filter: brightness(1.1);
}

.common-gear-alert {
  position: absolute;
  inset: -8px -8px auto auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid #ffd9a0;
  border-radius: 50%;
  color: #fff;
  background: #c9252d;
  box-shadow: 0 2px 8px #22080a;
  font: 800 13px/1 system-ui;
}

.inner-castle-manage-gear {
  margin-top: 5px;
  padding: 6px 12px;
  border: 1px solid #d9ab58;
  color: #fff4d2;
  background: linear-gradient(#31517c, #172a49);
}

.common-gear-box-modal.modal,
.common-gear-building-modal.modal {
  box-sizing: border-box;
  width: min(96vw, 980px);
  max-width: min(96vw, 980px);
  max-height: none;
  overflow: visible;
}

.common-gear-box-modal .modal-card,
.common-gear-building-modal .modal-card {
  box-sizing: border-box;
  width: 100%;
  height: min(620px, calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: hidden;
}

.common-gear-box-modal .modal-card h2,
.common-gear-building-modal .modal-card h2 {
  margin-bottom: .5rem;
  padding-bottom: .45rem;
  font-size: clamp(1.05rem, 3vw, 1.55rem);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.common-gear-box-modal #modalBody,
.common-gear-building-modal #modalBody {
  min-height: 0;
  height: auto;
  overflow: hidden;
}

.common-gear-reveal-shell {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  height: 100%;
  padding: 12px;
  background: radial-gradient(circle at 50% 46%, #344e73, #101827 70%);
}

.common-gear-box-open {
  display: grid;
  place-items: center;
  gap: 5px;
  border: 0;
  color: #fff4d2;
  background: transparent;
}

.common-gear-box-open img {
  display: block;
  width: min(35vh, 230px);
  max-width: 100%;
  max-height: min(45dvh, 230px);
  object-fit: contain;
  border-radius: 18px;
  filter: drop-shadow(0 16px 18px #050a12cc);
}

.common-gear-box-open.opening img {
  animation: common-gear-open .42s ease-in-out both;
}

@keyframes common-gear-open {
  30% { transform: rotate(-4deg) scale(1.04); }
  65% { transform: rotate(5deg) scale(1.08); filter: brightness(1.35) drop-shadow(0 0 24px #e6ba67); }
  100% { transform: scale(.94); opacity: .15; }
}

.common-gear-reveal-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(760px, 92%);
}

.common-gear-reveal-card,
.common-gear-detail-panel,
.common-gear-mini-card {
  border: 1px solid #aab6c9;
  border-radius: 10px;
  color: #edf3ff;
  background: linear-gradient(145deg, #334158, #172131);
  box-shadow: inset 0 0 0 1px #ffffff16, 0 6px 14px #0006;
}

.common-gear-reveal-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  min-height: 150px;
  padding: 12px;
  text-align: center;
}
.common-gear-reveal-card > img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 5px 5px #0008); }

.common-gear-rarity { color: #c9d1de; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }

.common-gear-building-shell {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(230px, .8fr);
  grid-template-rows: minmax(0, 1fr) 94px;
  gap: 8px;
  height: 100%;
  padding: 8px;
  overflow: hidden;
  background: #111a28;
}

.common-gear-character-panel { position: relative; min-height: 0; overflow: hidden; border-radius: 10px; background: #0c1320; }
.common-gear-character-panel > img {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: block;
  padding: clamp(4px, .8vw, 9px);
  object-fit: contain;
  object-position: center bottom;
  opacity: .92;
}
.common-gear-equipped-slots { position: absolute; inset: 8px; display: grid; grid-template-columns: repeat(2, 72px); justify-content: space-between; align-content: space-between; gap: 4px; pointer-events: none; }
.common-gear-slot { position: relative; pointer-events: auto; min-height: 42px; padding: 4px; border: 1px solid #71819a; border-radius: 7px; color: #dfe8f8; background: #111a28dd; font-size: 10px; text-transform: capitalize; }
.common-gear-slot.filled { padding-left: 34px; }
.common-gear-slot > img { position: absolute; left: 3px; top: 50%; width: 29px; height: 29px; object-fit: contain; transform: translateY(-50%); filter: drop-shadow(0 2px 2px #0008); }
.common-gear-slot b { display: block; color: #e5bc67; }
.common-gear-slot.selected { border-color: #f0c66f; box-shadow: 0 0 0 2px #d9a94a55; }
.common-gear-slot.filled { background: #213754e8; }
.common-gear-detail-panel { display: grid; align-content: center; gap: 8px; min-height: 0; padding: 14px; }
.common-gear-detail-art { justify-self: center; width: min(96px, 42%); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 6px 6px #0009); }
.common-gear-detail-panel > strong { color: #fff4d2; font-size: clamp(14px, 2vw, 20px); }
.common-gear-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.common-gear-inventory-strip { grid-column: 1 / -1; display: grid; grid-template-columns: 112px 1fr; gap: 8px; min-height: 0; }
.common-gear-back { border: 1px solid #5d769a; color: #eaf1fd; background: #1a2a42; }
.common-gear-grouped-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(132px, 1fr); gap: 6px; overflow-x: auto; overflow-y: hidden; }
.common-gear-mini-card { display: grid; grid-template-columns: 34px auto 1fr auto; align-items: center; gap: 5px; padding: 6px; text-align: left; font-size: 10px; }
.common-gear-mini-card > img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 2px #0008); }
.common-gear-mini-card span { overflow: hidden; text-overflow: ellipsis; }
.common-gear-mini-card.selected { border-color: #f1c96d; background: #2b4364; }
.common-gear-empty-strip { align-self: center; color: #a9b5c8; }

@media (max-height: 520px) {
  .common-gear-box-modal .modal-card,
  .common-gear-building-modal .modal-card {
    height: calc(100dvh - .5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - .5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: .45rem;
  }
  .common-gear-box-modal .modal-card h2,
  .common-gear-building-modal .modal-card h2 {
    margin-bottom: .3rem;
    padding-bottom: .3rem;
    font-size: clamp(.98rem, 3.5vw, 1.25rem);
  }
  .common-gear-building-shell { grid-template-rows: minmax(0, 1fr) 68px; gap: 6px; padding: 6px; }
  .common-gear-equipped-slots { inset: 6px; grid-template-columns: repeat(2, 66px); gap: 3px; }
  .common-gear-slot { min-height: 36px; padding: 3px; font-size: 9px; }
  .common-gear-slot.filled { padding-left: 29px; }
  .common-gear-slot > img { width: 24px; height: 24px; }
  .common-gear-detail-panel { gap: 4px; padding: 8px; }
  .common-gear-detail-panel > strong { font-size: 13px; line-height: 1.08; }
  .common-gear-detail-panel > small { font-size: 10px; line-height: 1.08; }
  .common-gear-rarity { font-size: 9px; }
  .common-gear-actions { gap: 5px; }
  .common-gear-actions button { min-height: 30px; padding: 3px 7px; font-size: 11px; }
  .common-gear-inventory-strip { grid-template-columns: 94px minmax(0, 1fr); gap: 6px; }
  .common-gear-back { padding: 4px 7px; font-size: 11px; }
  .common-gear-reveal-card { min-height: 112px; padding: 8px; }
  .common-gear-detail-art { width: 52px; }
}

@media (max-width: 640px) and (orientation: portrait) {
  .common-gear-box-modal.modal,
  .common-gear-building-modal.modal { width: calc(100vw - .5rem); max-width: calc(100vw - .5rem); }
  .common-gear-box-modal .modal-card,
  .common-gear-building-modal .modal-card {
    box-sizing: border-box;
    width: 100%;
    height: calc(100dvh - .5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - .5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: .45rem;
  }
  .common-gear-building-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(280px, 46vh) auto 86px; overflow-x: hidden; overflow-y: auto; }
  .common-gear-detail-panel { min-height: 260px; }
  .common-gear-inventory-strip { grid-column: 1; grid-template-columns: 96px minmax(0, 1fr); }
  .common-gear-reveal-shell { place-items: stretch; align-content: start; overflow-y: auto; }
  .common-gear-reveal-cards { grid-template-columns: 1fr; width: 100%; }
}

@media (max-width: 520px) {
  .shop-modal.modal {
    width: calc(100vw - .5rem - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-width: calc(100vw - .5rem - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
  .shop-modal .modal-card {
    box-sizing: border-box;
    width: 100%;
    max-height: calc(100dvh - .5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: .55rem;
  }
  .shop-modal .modal-card h2 {
    margin-bottom: .45rem;
    padding-bottom: .4rem;
    font-size: 1.3rem;
  }
  .shop-panel { gap: .55rem; }
  .shop-balance {
    min-height: 48px;
    flex-wrap: wrap;
    gap: .35rem .65rem;
    padding: .5rem .65rem;
  }
  .shop-balance strong {
    max-width: 100%;
    font-size: clamp(1rem, 5.8vw, 1.2rem);
    overflow-wrap: anywhere;
    text-align: right;
  }
  .shop-rewarded-section { padding: .5rem; }
  .shop-item.rewarded-ad-shop-item {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: .5rem;
    padding: .55rem;
  }
  .rewarded-ad-shop-action .shop-item-image-placeholder { width: 56px; height: 56px; }
  .shop-buy-btn.rewarded-ad-watch-btn { min-height: 34px; font-size: .66rem; }
  .rewarded-ad-shop-copy strong { font-size: .88rem; }
  .rewarded-ad-shop-copy span { font-size: .72rem; }
  .rewarded-ad-shop-copy small { font-size: .65rem; line-height: 1.18; }
  .shop-items { gap: .5rem; }
  .shop-items .shop-item {
    min-height: 0;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: start;
    gap: .5rem;
    padding: .58rem;
  }
  .shop-items .shop-item-image-placeholder { width: 52px; height: 52px; }
  .shop-items .shop-item-copy {
    align-self: center;
    overflow-wrap: anywhere;
  }
  .shop-items .shop-item-copy strong { font-size: .9rem; line-height: 1.08; }
  .shop-items .shop-item-copy span { font-size: .74rem; }
  .shop-items .shop-item-copy small { font-size: .66rem; line-height: 1.22; }
  .shop-items .shop-buy-btn {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: 36px;
  }
}

@media (max-width: 900px) and (orientation: landscape), (max-height: 430px) {
  .inner-castle-modal.modal {
    width: calc(100vw - .5rem - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-width: calc(100vw - .5rem - env(safe-area-inset-left) - env(safe-area-inset-right));
  }

  .inner-castle-modal .modal-card {
    max-height: calc(100dvh - .5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: max(.4rem, env(safe-area-inset-top)) max(.45rem, env(safe-area-inset-right)) max(.4rem, env(safe-area-inset-bottom)) max(.45rem, env(safe-area-inset-left));
  }

  .inner-castle-modal .modal-card h2 {
    margin-bottom: .38rem;
    padding-bottom: .35rem;
    font-size: .98rem;
  }

  .inner-castle-intro {
    display: none;
  }

  .inner-castle-layout {
    grid-template-columns: minmax(0, 1fr) minmax(156px, 30vw);
    gap: .42rem;
  }

  .inner-castle-scene {
    width: min(100%, calc(133.333dvh - 10rem));
    border-radius: 12px;
  }

  .inner-castle-hotspot {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .inner-castle-hotspot > span {
    width: clamp(58px, 11vw, 80px);
    height: 28px;
    padding: .16rem .28rem .18rem .72rem;
    clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%);
    font-size: clamp(.46rem, 1.35vw, .54rem);
    letter-spacing: 0;
  }

  .inner-castle-hotspot > span::before {
    left: .3rem;
    width: 4px;
    height: 4px;
  }

  .inner-castle-preview-tray {
    gap: .38rem;
    padding: .4rem;
    border-radius: 12px;
  }

  .inner-castle-preview {
    gap: .34rem;
  }

  .inner-castle-preview-art {
    width: min(100%, 124px);
    justify-self: center;
    border-radius: 9px;
  }

  .inner-castle-preview-copy {
    gap: .08rem;
  }

  .inner-castle-preview-copy strong {
    font-size: .82rem;
  }

  .inner-castle-preview-copy span {
    font-size: .62rem;
    line-height: 1.16;
  }

  .inner-castle-preview-copy small {
    margin-top: .08rem;
    font-size: .56rem;
  }

  .inner-castle-back-btn {
    min-height: 44px;
    padding: .34rem .38rem;
    font-size: .62rem;
  }
}

@media (max-width: 560px) and (orientation: landscape), (max-height: 330px) {
  .inner-castle-layout {
    grid-template-columns: minmax(0, 1fr) minmax(142px, 28vw);
  }

  .inner-castle-scene {
    width: min(100%, calc(133.333dvh - 8rem));
  }

  .inner-castle-preview-art {
    width: min(100%, 88px);
  }
}
.action-buttons .city-action-row { flex: 1 0 100%; }

/* The Version 21 world is rendered by the generated SVG map. These older terrain layers stay hidden. */
.island-land, .shore-glow, .terrain { display: none; }

/* Crownlands interface theme ------------------------------------------------ */

body {
  color: var(--ink);
}

::selection {
  color: #211508;
  background: var(--ui-gold-bright);
}

:where(button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--ui-gold-bright);
  outline-offset: 2px;
}

/* Optional positions written by the Game Editor. Existing HUD CSS remains the fallback. */
.game-view > .hud-layout-managed,
.game-view .hud-layout-managed {
  position: absolute !important;
  margin: 0 !important;
}
.game-view .hud-layout-hidden {
  display: none !important;
}

.setup-card,
.map-loading-panel,
.commander-panel,
.modal .modal-card,
.profile-screen {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow), var(--ui-inset);
}

.setup-card {
  box-shadow: 0 20px 52px rgba(0, 0, 0, .58), var(--ui-inset);
}

.setup-screen.loading .setup-card {
  border-color: rgba(243, 212, 135, .72);
  box-shadow: 0 20px 52px rgba(0, 0, 0, .58), 0 0 24px rgba(95, 171, 218, .18), var(--ui-inset);
}

.online-login {
  border-color: var(--ui-border-soft);
  border-radius: var(--ui-radius-small);
  background: rgba(3, 14, 25, .72);
  box-shadow: var(--ui-inset);
}

.online-login .ghost-btn,
.online-login .primary-btn {
  border-radius: var(--ui-radius-small);
}

.online-login strong,
.modal-card h2,
.panel-header strong,
.leaderboard-toolbar strong,
.profile-screen-header h2,
.profile-section-heading h3,
.flag-editor-preview h3 {
  color: var(--ui-gold-bright);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .62);
}

input,
textarea,
select {
  color: var(--ink);
  border: 1px solid var(--ui-border-soft);
  border-radius: var(--ui-radius-small);
  background: rgba(3, 16, 28, .82);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .3);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--ui-gold-bright);
  box-shadow: 0 0 0 2px rgba(211, 161, 63, .18), inset 0 2px 8px rgba(0, 0, 0, .3);
}

.primary-btn,
.shop-buy-btn,
.inventory-use-btn,
.profile-primary-btn,
.offline-collect-btn,
.troop-slider-confirm,
.main-city-change-btn,
.city-level-up-btn,
  .skill-row button,
.profile-skill-reset button,
.leaderboard-toolbar button,
.battle-report-filters button.active {
  color: #271807;
  border: 1px solid rgba(255, 235, 173, .78);
  border-radius: var(--ui-radius-small);
  background: linear-gradient(180deg, #f5d77f, #c98926 72%, #8c5514);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .46), inset 0 -3px 0 rgba(75, 39, 5, .24), 0 7px 14px rgba(0, 0, 0, .26);
  text-shadow: 0 1px 0 rgba(255, 245, 205, .28);
}

.ghost-btn,
.profile-secondary-btn,
.battle-report-back,
.battle-report-detail-btn,
.city-list-toolbar button,
.troop-slider-cancel {
  color: var(--ui-parchment);
  border: 1px solid var(--ui-border-soft);
  border-radius: var(--ui-radius-small);
  background: linear-gradient(180deg, var(--ui-navy-raised), var(--ui-midnight));
  box-shadow: var(--ui-inset), 0 6px 12px rgba(0, 0, 0, .22);
}

.primary-btn:disabled,
.shop-buy-btn:disabled,
.inventory-use-btn:disabled,
.city-level-up-btn:disabled,
.main-city-change-btn:disabled,
.profile-skill-reset button:disabled {
  color: rgba(234, 217, 181, .58);
  border-color: rgba(211, 161, 63, .16);
  background: rgba(12, 31, 46, .76);
  box-shadow: none;
  text-shadow: none;
}

@media (hover: hover) {
  :where(
    .primary-btn,
    .shop-buy-btn,
    .inventory-use-btn,
    .profile-primary-btn,
    .offline-collect-btn,
    .main-city-change-btn,
    .city-level-up-btn,
    .profile-skill-reset button,
    .leaderboard-toolbar button
  ):not(:disabled):hover {
    filter: brightness(1.08);
  }

  :where(
    .ghost-btn,
    .profile-secondary-btn,
    .battle-report-back,
    .battle-report-detail-btn,
    .city-list-toolbar button
  ):not(:disabled):hover {
    border-color: rgba(243, 212, 135, .66);
    background: linear-gradient(180deg, var(--ui-navy-soft), var(--ui-navy));
  }
}

.setup-fullscreen-btn,
.fullscreen-btn,
.modal-close,
.clear-btn,
.profile-icon-btn,
.profile-screen-close {
  color: var(--ui-gold-bright);
  border: 1px solid var(--ui-border-soft);
  border-radius: var(--ui-radius-small);
  background: linear-gradient(180deg, var(--ui-navy-raised), var(--ui-midnight));
  box-shadow: var(--ui-inset), 0 6px 14px rgba(0, 0, 0, .3);
}

.setup-fullscreen-btn,
.fullscreen-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border-width: 2px;
  border-color: rgba(232, 188, 91, .82);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 238, 177, .15), inset 0 -4px 0 rgba(0, 0, 0, .24), 0 9px 20px rgba(0, 0, 0, .38);
}

.fullscreen-glyph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-system);
  font-size: 1.28rem;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .7);
}

.fullscreen-btn.active,
.profile-icon-btn.confirm {
  color: #211508;
  border-color: rgba(255, 239, 186, .82);
  background: linear-gradient(180deg, var(--ui-gold-bright), #bd7c22);
}

.toast {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-small);
  color: var(--ui-parchment);
  background: linear-gradient(180deg, rgba(18, 54, 78, .98), rgba(4, 17, 29, .98));
  box-shadow: 0 14px 32px rgba(0, 0, 0, .46), var(--ui-inset);
}

.commander-panel {
  border-radius: var(--ui-radius) var(--ui-radius) var(--ui-radius-small) var(--ui-radius-small);
  box-shadow: 0 -14px 42px rgba(0, 0, 0, .42), var(--ui-inset);
}

.panel-header {
  padding-bottom: .42rem;
  border-bottom: 1px solid var(--ui-border-soft);
}

.panel-header small,
.selected-info,
.modal-card p,
.modal-card li {
  color: #c8d9e2;
}

.action-buttons button {
  border: 1px solid rgba(255, 235, 173, .68);
  border-radius: var(--ui-radius-small);
  background: linear-gradient(180deg, #f5d77f, #b97720);
  box-shadow: inset 0 -3px 0 rgba(70, 36, 5, .22);
}

.action-buttons button.secondary,
.action-buttons button.blue {
  color: var(--ui-parchment);
  border-color: var(--ui-border-soft);
  background: linear-gradient(180deg, var(--ui-navy-soft), var(--ui-midnight));
}

.action-buttons button.danger,
.action-buttons button.attack-action {
  color: #fff6ec;
  border-color: rgba(255, 175, 145, .55);
  background: linear-gradient(180deg, #a63b30, #4f1515);
}

.action-buttons button.move-action {
  color: #f0f7e8;
  border-color: rgba(177, 220, 139, .52);
  background: linear-gradient(180deg, #477c3d, #193b28);
}

.bottom-nav {
  border-radius: var(--ui-radius);
  background: linear-gradient(180deg, rgba(11, 38, 59, .99), rgba(4, 14, 25, .99));
  border-top: 1px solid var(--ui-border);
  box-shadow: 0 -10px 26px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 235, 174, .06);
}

.nav-btn {
  border: 1px solid var(--ui-border-soft);
  border-radius: var(--ui-radius-small);
  color: #c5d5de;
  background: linear-gradient(180deg, rgba(22, 60, 86, .92), rgba(5, 20, 34, .96));
  box-shadow: var(--ui-inset);
}

.nav-btn.active {
  color: #fff5d5;
  border-color: rgba(243, 212, 135, .78);
  background: linear-gradient(180deg, #235f84, #0a2c49);
  box-shadow: inset 0 0 0 1px rgba(255, 235, 174, .12), 0 0 15px rgba(76, 161, 211, .2);
}

.incoming-attack-btn,
.incoming-attack-btn.active {
  border-color: rgba(255, 173, 140, .66);
  background: linear-gradient(180deg, #9e2d2b, #461115);
}

.outgoing-attack-btn,
.outgoing-attack-btn.active {
  border-color: rgba(151, 216, 255, .62);
  background: linear-gradient(180deg, #1b668f, #092943);
}

.modal::backdrop {
  background: rgba(1, 7, 13, .78);
  backdrop-filter: blur(2px);
}

.modal .modal-card {
  box-shadow: 0 28px 72px rgba(0, 0, 0, .62), var(--ui-inset);
}

.modal-card h2 {
  padding-bottom: .58rem;
  border-bottom: 1px solid var(--ui-border-soft);
}

.modal-card #modalBody {
  scrollbar-color: rgba(211, 161, 63, .72) rgba(4, 18, 31, .48);
}

:is(
  .stat-card,
  .shop-balance,
  .shop-item,
  .inventory-summary,
  .inventory-slot,
  .inventory-selection,
  .city-list-summary,
  .city-list-row,
  .city-list-empty,
  .island-switch-row,
  .battle-report-card,
  .battle-report-empty,
  .battle-report-detail-head,
  .battle-report-detail-grid > div,
  .battle-result,
  .leaderboard-row,
  .leaderboard-empty,
  .incoming-attack-summary,
  .incoming-attack-card,
  .incoming-attack-empty,
  .outgoing-attack-summary,
  .outgoing-attack-card,
  .offline-reward-grid > div,
  .scout-report-city,
  .scout-report-overview > div,
  .scout-breakdown-row,
  .scout-skill-list,
  .troop-route-city,
  .troop-slider-control,
  .troop-slider-preview > div,
  .send-confirm-card,
  .city-stat-panel,
  .stat-wide,
  .stat-chip,
  .main-city-action-panel,
  .city-level-up-panel,
  .relinquish-city-action-panel,
  .profile-settings-section,
  .profile-skill-summary > div,
  .profile-skill-reset,
  .profile-skill-list .skill-row,
  .kingdom-stat,
  .profile-notification-row,
  .gold-camp-info-grid > div,
  .gold-camp-description
) {
  border-color: var(--ui-border-soft);
  border-radius: var(--ui-radius);
  background: var(--ui-surface-raised);
  box-shadow: var(--ui-inset);
}

.shop-item,
.inventory-slot,
.city-list-row,
.battle-report-card,
.leaderboard-row {
  border-left: 3px solid rgba(211, 161, 63, .58);
}

.shop-item-image-placeholder,
.inventory-slot-icon,
.inventory-selection-icon {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-small);
  background: rgba(3, 16, 28, .92);
  box-shadow: var(--ui-inset), 0 5px 11px rgba(0, 0, 0, .26);
}

.shop-item-copy strong,
.inventory-slot-name,
.inventory-selection-copy strong,
.inventory-selection-empty strong,
.shop-balance strong,
.inventory-summary strong,
.city-list-summary strong,
.battle-report-detail-grid strong,
.leaderboard-power strong {
  color: var(--ui-gold-bright);
}

.shop-balance span,
.inventory-summary span,
.shop-item-copy span,
.inventory-slot-count,
.inventory-selection-copy span,
.kingdom-stat span,
.profile-skill-summary span,
.profile-section-heading span,
.flag-editor-preview > div > span {
  color: #9dcce4;
}

.inventory-slot.filled {
  border-color: rgba(211, 161, 63, .5);
  background: linear-gradient(180deg, rgba(28, 69, 96, .96), rgba(6, 24, 40, .98));
}

.inventory-slot.filled.selected {
  border-color: var(--ui-gold-bright);
  box-shadow: 0 0 0 3px rgba(211, 161, 63, .18), var(--ui-inset);
}

.city-list-toolbar button.active,
.profile-tabs button.active,
.push-alerts-option.active,
.flag-option-grid button.active,
.flag-symbol-grid button.active {
  color: #211508;
  border-color: rgba(255, 240, 190, .82);
  background: linear-gradient(180deg, var(--ui-gold-bright), #bd7b22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38);
}

.city-list-locate,
.city-list-info,
.battle-report-detail-btn,
.battle-report-locate-btn,
.city-list-pager button {
  border: 1px solid var(--ui-border-soft);
  border-radius: var(--ui-radius-small);
  color: var(--ui-gold-bright);
  background: linear-gradient(180deg, var(--ui-navy-soft), var(--ui-midnight));
  box-shadow: var(--ui-inset), 0 5px 10px rgba(0, 0, 0, .24);
}

.battle-report-card.victory {
  border-color: rgba(147, 199, 68, .82);
}

.battle-report-card.defeat {
  border-color: rgba(220, 100, 79, .82);
}

.battle-report-card.scout {
  border-color: rgba(200, 211, 228, .72);
}

.battle-report-result,
.battle-report-card.scout .battle-report-result {
  border-color: var(--ui-border-soft);
  border-radius: var(--ui-radius-small);
  background: linear-gradient(180deg, var(--ui-navy-soft), var(--ui-midnight));
}

.battle-report-card.defeat .battle-report-result {
  background: linear-gradient(180deg, #8f2a24, #431315);
}

.incoming-attack-summary {
  border-color: rgba(220, 100, 79, .48);
  background: linear-gradient(90deg, rgba(112, 29, 28, .72), rgba(7, 27, 45, .96));
}

.outgoing-attack-modal .incoming-attack-summary {
  border-color: rgba(111, 190, 230, .42);
  background: linear-gradient(90deg, rgba(20, 80, 113, .82), rgba(7, 27, 45, .96));
}

.incoming-attack-card {
  border-color: rgba(220, 100, 79, .4);
  background: linear-gradient(180deg, rgba(61, 33, 37, .94), rgba(7, 24, 40, .98));
}

.incoming-attack-card.incoming-scout-card,
.incoming-attack-card.outgoing-attack-card {
  border-color: rgba(111, 190, 230, .38);
  background: var(--ui-surface-raised);
}

.incoming-attack-badge,
.incoming-attack-city,
.incoming-attack-force {
  border-radius: var(--ui-radius-small);
}

.incoming-attack-city,
.incoming-attack-force {
  border: 1px solid rgba(211, 161, 63, .16);
  background: rgba(3, 16, 28, .68);
}

.incoming-attack-locate {
  border: 1px solid rgba(255, 235, 173, .68);
  border-radius: var(--ui-radius-small);
  background: linear-gradient(180deg, var(--ui-gold-bright), #a5681b);
  box-shadow: inset 0 -3px 0 rgba(75, 39, 5, .2), 0 6px 12px rgba(0, 0, 0, .25);
}

.outgoing-attack-card .incoming-attack-locate {
  color: #f2e8cd;
  border-color: rgba(142, 207, 238, .56);
  background: linear-gradient(180deg, #236d96, #092b47);
}

.swift-march-order-btn {
  color: #211508;
  border-color: rgba(255, 235, 173, .72);
  background: linear-gradient(180deg, var(--ui-gold-bright), #a5681b);
}

.swift-march-order-used {
  color: #d9f3ff;
  border-color: rgba(111, 190, 230, .34);
  background: rgba(10, 54, 80, .72);
}

.recall-horn-btn {
  color: #f2e8cd;
  border-color: rgba(142, 207, 238, .56);
  background: linear-gradient(180deg, #236d96, #092b47);
}

.offline-lost-cities,
.offline-collect-btn,
.modal-actions button,
.troop-command-icon,
.shield-drop-warning,
.troop-slider-actions button,
.push-alerts-status {
  border-radius: var(--ui-radius-small);
}

.offline-reward-grid strong {
  color: var(--ui-gold-bright);
}

.offline-lost-cities {
  border-color: rgba(220, 100, 79, .42);
  background: linear-gradient(180deg, rgba(78, 27, 29, .72), rgba(18, 22, 30, .88));
}

.offline-lost-cities.safe {
  border-color: rgba(126, 179, 95, .4);
  background: linear-gradient(180deg, rgba(26, 70, 45, .66), rgba(12, 28, 31, .9));
}

.modal-actions .safe-action {
  color: var(--ui-parchment);
  border: 1px solid var(--ui-border-soft);
  background: linear-gradient(180deg, var(--ui-navy-raised), var(--ui-midnight));
}

.modal-actions .danger-action {
  color: #fff6ec;
  border: 1px solid rgba(255, 175, 145, .55);
  background: linear-gradient(180deg, #a63b30, #4f1515);
}

.troop-command-icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 7px 15px rgba(0, 0, 0, .3);
}

.troop-slider-panel.transfer .troop-command-icon,
.troop-slider-confirm.transfer {
  color: #f1f8e9;
  border-color: rgba(177, 220, 139, .52);
  background: linear-gradient(180deg, #477c3d, #193b28);
}

.troop-amount-slider {
  border-color: var(--ui-border-soft);
  background: linear-gradient(90deg, var(--ui-gold) var(--slider-progress), #0b263b var(--slider-progress));
}

.push-alerts-status {
  border-color: var(--ui-border-soft);
  color: #c7d8e1;
  background: rgba(2, 14, 24, .76);
}

.leaderboard-rank {
  border: 1px solid rgba(255, 237, 180, .72);
  border-radius: var(--ui-radius-small);
  background: linear-gradient(180deg, var(--ui-gold-bright), #a5681b);
}

.leaderboard-row.current {
  border-color: rgba(243, 212, 135, .9);
  box-shadow: inset 0 0 0 1px rgba(243, 212, 135, .18), 0 0 18px rgba(211, 161, 63, .16);
}

.island-map-picker {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background:
    linear-gradient(90deg, rgba(190, 222, 237, .07) 0 1px, transparent 1px var(--island-grid-cell-w, 272px)),
    linear-gradient(rgba(190, 222, 237, .07) 0 1px, transparent 1px var(--island-grid-cell-h, 213px)),
    linear-gradient(180deg, #144e69, #082c46 62%, #061d31);
  box-shadow: inset 0 0 0 2px rgba(255, 235, 174, .06), inset 0 -18px 34px rgba(0, 0, 0, .24);
}

.island-map-canvas {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px var(--island-grid-cell-w, 272px)),
    linear-gradient(rgba(255, 255, 255, .07) 0 1px, transparent 1px var(--island-grid-cell-h, 213px)),
    linear-gradient(180deg, rgba(30, 112, 145, .72), rgba(8, 47, 75, .88));
}

.island-map-picker .island-map-icon {
  border-color: rgba(211, 161, 63, .56);
  border-radius: var(--ui-radius-small);
  background: rgba(3, 17, 29, .86);
  box-shadow: 0 11px 22px rgba(0, 0, 0, .38), var(--ui-inset);
}

.island-map-picker .island-map-icon.active {
  border-color: var(--ui-gold-bright);
  box-shadow: 0 0 0 3px rgba(211, 161, 63, .2), 0 13px 26px rgba(0, 0, 0, .42), var(--ui-inset);
}

.island-map-thumb {
  border-radius: 2px;
  background: linear-gradient(180deg, #0d6687, #062c45);
}

.island-map-home-label,
.island-map-active-label {
  border-radius: 3px;
  border-color: rgba(255, 240, 190, .78);
  background: var(--ui-gold-bright);
}

.island-map-active-label {
  color: #f3e7c9;
  border-color: rgba(160, 217, 245, .68);
  background: var(--ui-navy-soft);
}

.city-wheel-ring,
.foreign-city-action-wheel .city-wheel-ring {
  border-color: rgba(211, 161, 63, .78);
  border-top-color: transparent;
}

.city-wheel-action {
  color: #fff5d7;
  background: linear-gradient(180deg, #1e628a, #082a46);
  filter: drop-shadow(0 5px 3px rgba(0, 0, 0, .56)) drop-shadow(0 0 2px rgba(243, 212, 135, .52));
}

.wheel-send,
.wheel-attack {
  color: #271807;
  background: linear-gradient(180deg, var(--ui-gold-bright), #a8691b);
}

.wheel-level,
.wheel-scout-nearby.armed {
  color: #f4f8e8;
  background: linear-gradient(180deg, #4f8447, #173a27);
}

.wheel-regroup,
.wheel-regroup.armed {
  background: linear-gradient(180deg, #a6423c, #4b1618);
}

.wheel-cost {
  color: var(--ui-gold-bright);
  border: 1px solid rgba(211, 161, 63, .32);
  background: rgba(3, 18, 31, .9);
}

.effect-status-badge,
.active-item-effects-stack.compact .effect-status-badge,
.active-item-effects-stack.dense .effect-status-badge {
  border-radius: var(--ui-radius);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4), 0 0 18px rgba(79, 177, 255, .22), var(--ui-inset);
}

.effect-status-icon,
.active-item-effects-stack.compact .effect-status-icon,
.active-item-effects-stack.dense .effect-status-icon {
  border-radius: var(--ui-radius-small);
}

.effect-status-badge strong {
  border-radius: 3px;
}

.profile-screen {
  background: linear-gradient(180deg, rgba(9, 31, 48, .995), rgba(3, 13, 23, .998));
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .72), 0 26px 70px rgba(0, 0, 0, .62), var(--ui-inset);
}

.profile-screen-header {
  border-bottom-color: var(--ui-border);
  background: linear-gradient(180deg, #123952, #071a2b);
  box-shadow: inset 0 -1px 0 rgba(255, 235, 174, .08);
}

.profile-screen-header span,
.profile-flag-edit {
  color: #9dcce4;
}

.profile-tabs,
.push-alerts-toggle {
  border-color: var(--ui-border-soft);
  border-radius: var(--ui-radius);
  background: rgba(2, 14, 24, .76);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .3);
}

.profile-tabs button,
.push-alerts-option,
.flag-option-grid button,
.flag-symbol-grid button {
  border-radius: var(--ui-radius-small);
  color: #c7d8e1;
}

.profile-xp-track {
  border-color: var(--ui-border-soft);
  background: #020a12;
}

.profile-xp-track span {
  background: linear-gradient(90deg, #347fa8, var(--ui-gold));
}

.profile-name-row h3,
.profile-level-row strong,
.profile-skill-summary strong,
.profile-skill-reset strong,
.profile-skill-list .skill-row strong,
.profile-notification-row strong {
  color: var(--ui-gold-bright);
}

.flag-control-group {
  border-top: 1px solid var(--ui-border-soft);
}

.flag-control-group h4 {
  color: var(--ui-parchment);
}

.flag-option-grid button,
.flag-symbol-grid button {
  border-color: var(--ui-border-soft);
  background: linear-gradient(180deg, var(--ui-navy-raised), var(--ui-midnight));
}

.profile-gold,
.resource-pill:not(.bag-btn):not(.shop-btn):not(.city-list-btn):not(.island-switch-btn) {
  border-color: var(--ui-border-soft);
  color: #fff5d1;
  background: linear-gradient(180deg, rgba(18, 52, 76, .96), rgba(4, 17, 29, .98));
  box-shadow: 0 8px 22px rgba(0, 0, 0, .34), var(--ui-inset);
}

.performance-panel {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-small);
  color: #dce8ee;
  background: rgba(4, 18, 31, .94);
  box-shadow: var(--ui-shadow), var(--ui-inset);
}

.rotate-warning {
  background: rgba(2, 10, 18, .94);
}

.rotate-warning > div {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow), var(--ui-inset);
}

.rotate-warning strong {
  color: var(--ui-gold-bright);
}

/* Hero level-up rewards ----------------------------------------------------- */

.level-up-reward-modal.modal {
  width: min(680px, calc(100% - 1.3rem));
  max-width: none;
  overflow: visible;
}

.level-up-reward-modal::backdrop {
  background:
    radial-gradient(circle at 50% 42%, rgba(212, 155, 50, .2), transparent 34%),
    rgba(1, 7, 13, .86);
  backdrop-filter: blur(4px);
}

.level-up-reward-modal .level-up-reward-card {
  position: relative;
  max-height: min(92vh, 760px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: .88rem;
  padding: 1.15rem;
  overflow: hidden;
  border: 2px solid rgba(242, 205, 111, .82);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% -10%, rgba(240, 190, 75, .2), transparent 42%),
    linear-gradient(180deg, #123954 0%, #071d30 48%, #030f1b 100%);
  box-shadow:
    0 0 0 1px rgba(47, 23, 4, .9),
    0 0 38px rgba(231, 171, 49, .23),
    0 30px 90px rgba(0, 0, 0, .72),
    inset 0 1px 0 rgba(255, 239, 187, .2);
  transform: translateY(18px) scale(.96);
  opacity: 0;
  transition: transform 220ms ease, opacity 180ms ease;
}

.level-up-reward-modal.revealed .level-up-reward-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.level-up-reward-modal.collecting .level-up-reward-card {
  transform: translateY(-4px) scale(.985);
  opacity: .2;
}

.level-up-reward-card::before,
.level-up-reward-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(242, 205, 111, .16);
  transform: rotate(45deg);
  pointer-events: none;
}

.level-up-reward-card::before {
  top: -118px;
  left: -92px;
}

.level-up-reward-card::after {
  right: -92px;
  bottom: -118px;
}

.level-up-reward-header,
.level-up-reward-body,
.level-up-collect-btn {
  position: relative;
  z-index: 1;
}

.level-up-reward-header {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .35rem .45rem .9rem;
  border-bottom: 1px solid rgba(242, 205, 111, .26);
}

.level-up-crown-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
}

.level-up-crown-wrap::before,
.level-up-crown-wrap::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(246, 215, 129, .38);
  transform: rotate(45deg);
}

.level-up-crown-wrap::after {
  inset: 18px;
  border-color: rgba(246, 215, 129, .2);
}

.level-up-crown-glow {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: rgba(236, 175, 55, .22);
  box-shadow: 0 0 34px rgba(245, 187, 62, .42);
}

.level-up-crown-wrap img {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)) drop-shadow(0 0 10px rgba(255, 210, 94, .34));
}

.level-up-eyebrow {
  display: block;
  margin-bottom: .15rem;
  color: #8fc9e7;
  font: 800 .72rem/1 var(--font-system);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.level-up-reward-card .level-up-reward-header h2 {
  margin: 0;
  padding: 0;
  border: 0;
  color: #ffe6a3;
  font-size: clamp(1.55rem, 4vw, 2.25rem);
  line-height: 1.05;
}

.level-up-reward-header p {
  margin: .32rem 0 0;
  color: #c7dbe5;
}

.level-up-reward-body {
  min-height: 0;
  display: grid;
  gap: .72rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 .12rem .15rem;
  scrollbar-color: rgba(211, 161, 63, .72) rgba(4, 18, 31, .48);
}

.level-up-step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  color: #a9bdc9;
  font: 800 .78rem/1 var(--font-system);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.level-up-step span {
  padding: .42rem .68rem;
  border: 1px solid rgba(152, 194, 216, .22);
  border-radius: 999px;
  background: rgba(2, 14, 24, .62);
}

.level-up-step span.current {
  color: #ffeca9;
  border-color: rgba(242, 205, 111, .52);
  background: rgba(151, 98, 22, .24);
}

.level-up-step strong {
  color: #e6b957;
  font-size: 1.15rem;
}

.level-up-reward-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
}

.level-up-reward-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: .58rem;
  padding: .78rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 57, 79, .76), rgba(3, 16, 27, .88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 20px rgba(0, 0, 0, .2);
}

.level-up-reward-item.skill {
  border-color: rgba(127, 196, 232, .34);
}

.level-up-reward-item.gold {
  border-color: rgba(244, 198, 83, .38);
}

.level-up-reward-item.troops {
  border-color: rgba(144, 199, 124, .34);
}

.level-up-reward-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  color: #a9e3ff;
  background: rgba(1, 10, 18, .62);
  font-size: 2rem;
  text-shadow: 0 0 14px currentColor;
}

.level-up-reward-icon img {
  width: 43px;
  height: 43px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
}

.level-up-reward-item small,
.level-up-reward-item strong,
.level-up-reward-item p {
  display: block;
}

.level-up-reward-item small {
  color: #9db8c8;
  font: 800 .68rem/1 var(--font-system);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.level-up-reward-item strong {
  margin-top: .15rem;
  color: #fff2bd;
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  line-height: 1;
}

.level-up-reward-item p {
  margin: .28rem 0 0;
  color: #aebfca;
  font: 600 .7rem/1.25 var(--font-system);
}

.level-up-troop-destination {
  display: flex;
  align-items: center;
  gap: .68rem;
  padding: .65rem .78rem;
  border: 1px solid rgba(144, 199, 124, .25);
  border-radius: 12px;
  background: rgba(19, 55, 39, .34);
}

.level-up-troop-destination > img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.level-up-troop-destination span,
.level-up-troop-destination small,
.level-up-troop-destination strong {
  display: block;
}

.level-up-troop-destination small {
  color: #9fb8aa;
  font: 800 .65rem/1 var(--font-system);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.level-up-troop-destination strong {
  margin-top: .16rem;
  color: #e4f4d7;
}

.level-up-collect-btn {
  width: 100%;
  min-height: 52px;
  color: #271807;
  border: 1px solid rgba(255, 239, 186, .9);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffe59a, #d89c32 72%, #995c16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58), inset 0 -3px 0 rgba(75, 39, 5, .25), 0 8px 18px rgba(0, 0, 0, .34);
  font: 900 .92rem/1 var(--font-system);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 245, 205, .34);
}

@media (hover: hover) {
  .level-up-collect-btn:hover {
    filter: brightness(1.08);
  }
}

@media (max-width: 620px) {
  .level-up-reward-modal .level-up-reward-card {
    padding: .85rem;
  }

  .level-up-reward-header {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: .7rem;
    padding-inline: .15rem;
  }

  .level-up-crown-wrap {
    width: 72px;
    height: 72px;
  }

  .level-up-crown-wrap img {
    width: 50px;
    height: 50px;
  }

  .level-up-reward-grid {
    grid-template-columns: 1fr;
  }

  .level-up-reward-item {
    grid-template-columns: 46px minmax(0, 1fr);
    padding: .58rem .68rem;
  }

  .level-up-reward-icon {
    width: 44px;
    height: 44px;
  }

  .level-up-reward-icon img {
    width: 37px;
    height: 37px;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .level-up-reward-modal .level-up-reward-card {
    max-height: calc(100vh - .7rem);
    grid-template-columns: minmax(210px, .72fr) minmax(0, 1.45fr);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: .75rem;
    padding: .7rem;
  }

  .level-up-reward-header {
    grid-row: 1 / 3;
    grid-template-columns: 1fr;
    align-content: center;
    text-align: center;
    border-right: 1px solid rgba(242, 205, 111, .26);
    border-bottom: 0;
  }

  .level-up-crown-wrap {
    width: 68px;
    height: 68px;
    margin: 0 auto;
  }

  .level-up-crown-wrap img {
    width: 48px;
    height: 48px;
  }

  .level-up-reward-body {
    gap: .45rem;
  }

  .level-up-step,
  .level-up-troop-destination {
    display: none;
  }

  .level-up-reward-grid {
    grid-template-columns: 1fr;
    gap: .38rem;
  }

  .level-up-reward-item {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: .42rem .58rem;
  }

  .level-up-reward-icon {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }

  .level-up-reward-icon img {
    width: 34px;
    height: 34px;
  }

  .level-up-reward-item p {
    margin-top: .12rem;
  }

  .level-up-collect-btn {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .level-up-reward-modal .level-up-reward-card {
    transition: none;
  }
}
.audio-settings-section {
  display: grid;
  gap: .65rem;
  border-color: rgba(211, 161, 63, .46);
  background: linear-gradient(180deg, rgba(23, 67, 96, .96), rgba(6, 24, 40, .98));
}

.settings-section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .75rem;
}

.settings-section-header .profile-section-heading,
.settings-compact-section .profile-section-heading {
  text-align: left;
}

.settings-section-header p,
.settings-card-description {
  margin: 0;
  color: #a9cadd;
  font-size: .7rem;
  font-weight: 750;
  line-height: 1.35;
}

.settings-section-header p {
  max-width: 310px;
  text-align: right;
}

.audio-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .58rem;
}

.audio-channel-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: .58rem;
  padding: .62rem;
  border: 1px solid rgba(211, 161, 63, .28);
  border-radius: var(--ui-radius);
  background: linear-gradient(180deg, rgba(4, 23, 39, .76), rgba(2, 13, 23, .9));
  box-shadow: inset 0 1px 0 rgba(255, 237, 180, .06), 0 7px 16px rgba(0, 0, 0, .2);
}

.audio-channel-header {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: .5rem;
}

.audio-channel-glyph {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(211, 161, 63, .38);
  border-radius: var(--ui-radius-small);
  color: var(--ui-gold-bright);
  background: linear-gradient(180deg, rgba(25, 71, 101, .94), rgba(7, 30, 49, .98));
  box-shadow: var(--ui-inset);
  font-size: 1.15rem;
  line-height: 1;
}

.audio-channel-copy {
  min-width: 0;
  display: grid;
  gap: .08rem;
}

.audio-channel-copy strong {
  overflow: hidden;
  color: var(--ui-gold-bright);
  font-size: .9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-channel-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: #a9cadd;
  font-size: .62rem;
  font-weight: 750;
  line-height: 1.25;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.audio-channel-card output {
  min-width: 44px;
  padding: .24rem .38rem;
  border: 1px solid rgba(211, 161, 63, .24);
  border-radius: 999px;
  color: var(--ui-gold-bright);
  background: rgba(2, 13, 23, .72);
  font-size: .7rem;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.audio-mute-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(158, 213, 255, .3);
  border-radius: var(--ui-radius-small);
  color: #f7ead1;
  background: linear-gradient(180deg, var(--ui-navy-soft), var(--ui-midnight));
  box-shadow: var(--ui-inset), 0 5px 10px rgba(0, 0, 0, .24);
  font-size: 1.12rem;
  line-height: 1;
}

.audio-mute-button:hover {
  border-color: rgba(243, 212, 135, .7);
  filter: brightness(1.08);
}

.audio-mute-button[aria-pressed="true"] {
  border-color: rgba(226, 151, 80, .72);
  color: #ffe2bd;
  background: linear-gradient(180deg, #72411f, #351b11);
  box-shadow: inset 0 1px 0 rgba(255, 225, 181, .16), 0 0 0 2px rgba(204, 112, 48, .1);
}

.audio-volume-control {
  min-width: 0;
  display: block;
  color: #f7e7b7;
}

.audio-volume-control input[type="range"] {
  width: 100%;
  height: 22px;
  min-height: 22px;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

/* Clan War Room */
.clan-war-room-panel {
  display: none;
  gap: 14px;
  min-width: 0;
}

.clan-war-room-panel.active {
  display: grid;
}

.clan-war-room-feature {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(220, 193, 119, 0.24);
  border-radius: 12px;
  background: rgba(18, 28, 23, 0.58);
}

.clan-war-room-feature-heading span {
  display: grid;
  gap: 2px;
}

.clan-war-room-feature-heading small {
  color: rgba(242, 226, 185, 0.62);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clan-war-room-feature-heading strong {
  color: #e6c76d;
  font-size: 1.05rem;
}
.audio-volume-control input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border: 1px solid rgba(211, 161, 63, .28);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ui-gold-bright) 0 var(--audio-level, 0%), #071723 var(--audio-level, 0%) 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45);
}

.audio-volume-control input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -6px;
  appearance: none;
  border: 2px solid #fff1bd;
  border-radius: 50%;
  background: linear-gradient(180deg, #f4d77f, #bd7920);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

.audio-volume-control input[type="range"]::-moz-range-track {
  height: 8px;
  border: 1px solid rgba(211, 161, 63, .28);
  border-radius: 999px;
  background: #071723;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45);
}

.audio-volume-control input[type="range"]::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--ui-gold-bright);
}

.audio-volume-control input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid #fff1bd;
  border-radius: 50%;
  background: linear-gradient(180deg, #f4d77f, #bd7920);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

.settings-secondary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .68rem;
}

.settings-compact-section {
  min-width: 0;
  align-content: start;
}

.settings-card-description {
  min-height: 1.9em;
}

.notification-settings-section .profile-notification-row {
  min-height: 56px;
  padding: .48rem .55rem;
  gap: .48rem;
  border-color: rgba(211, 161, 63, .24);
  background: rgba(2, 14, 24, .64);
}

.notification-settings-section .profile-notification-row small {
  max-width: 145px;
}

.notification-settings-section .push-alerts-toggle {
  width: 126px;
  min-height: 38px;
}

.notification-settings-section .push-alerts-option {
  min-height: 30px;
}

.privacy-settings-section .privacy-settings-link {
  min-height: 42px;
  margin-top: auto;
  display: grid;
  place-items: center;
  text-align: center;
}

@media (max-width: 640px) {
  .profile-screen.settings-active {
    height: min(640px, calc(100dvh - 1rem));
  }

  .profile-screen-header {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: .42rem .58rem;
    padding: calc(.48rem + env(safe-area-inset-top)) max(.58rem, env(safe-area-inset-right)) .48rem max(.58rem, env(safe-area-inset-left));
  }

  .profile-screen-heading {
    grid-column: 1;
    grid-row: 1;
  }

  .profile-screen-close {
    grid-column: 2;
    grid-row: 1;
  }

  .profile-tabs {
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .profile-tabs button {
    min-width: 0;
    min-height: 34px;
    padding: 0 .24rem;
    font-size: .66rem;
  }

  .profile-skills-view {
    padding: .55rem max(.55rem, env(safe-area-inset-right)) max(.65rem, env(safe-area-inset-bottom)) max(.55rem, env(safe-area-inset-left));
  }

  .skill-preset-detail > header {
    grid-template-columns: minmax(0, 1fr);
    gap: .42rem;
  }

  .skill-preset-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skill-preset-allocation { grid-template-columns: minmax(0, 1fr); }
  .profile-skill-list { grid-template-columns: minmax(0, 1fr); }

  .skill-preset-tabs button strong { font-size: .69rem; }
  .skill-preset-tabs button small { font-size: .57rem; }

  .audio-channel-grid,
  .settings-secondary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-card-description {
    min-height: 0;
  }
}

@media (max-width: 480px) {
  .skill-preset-tabs { gap: .25rem; }
  .skill-preset-tabs button { min-height: 44px; padding: .32rem; }
  .skill-preset-detail { padding: .52rem; }
  .skill-preset-rename { grid-template-columns: minmax(0, 1fr) 68px; }
  .skill-preset-detail > footer { grid-template-columns: minmax(0, 1fr); }

  .profile-settings-view {
    padding: .55rem max(.55rem, env(safe-area-inset-right)) max(.55rem, env(safe-area-inset-bottom)) max(.55rem, env(safe-area-inset-left));
    gap: .52rem;
  }

  .profile-settings-section {
    gap: .5rem;
    padding: .58rem;
  }

  .settings-section-header {
    grid-template-columns: minmax(0, 1fr);
    gap: .2rem;
  }

  .settings-section-header p {
    max-width: none;
    text-align: left;
  }

  .audio-channel-card {
    padding: .54rem;
  }

  .audio-channel-header {
    grid-template-columns: 36px minmax(0, 1fr) auto 44px;
    gap: .42rem;
  }

  .audio-channel-glyph {
    width: 36px;
    height: 36px;
  }

  .audio-channel-card output {
    min-width: 42px;
  }

  .notification-settings-section .profile-notification-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .notification-settings-section .profile-notification-row small {
    max-width: none;
  }

  .notification-settings-section .push-alerts-toggle {
    width: 100%;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .profile-settings-view {
    padding: .45rem max(.55rem, env(safe-area-inset-right)) max(.45rem, env(safe-area-inset-bottom)) max(.55rem, env(safe-area-inset-left));
    gap: .48rem;
  }

  .profile-settings-section {
    gap: .48rem;
    padding: .54rem;
  }

  .audio-channel-card {
    gap: .42rem;
    padding: .5rem;
  }
}

/* Crownlands animation system --------------------------------------------- */

.map-transition-stage {
  position: absolute;
  inset: 0;
  overflow: visible;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  pointer-events: none;
}

.map-transition-stage.is-transitioning {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.map-transition-stage .map-world {
  pointer-events: auto;
}

.map-transition-stage.is-transitioning .map-world {
  pointer-events: none;
}

.map-vfx-layer {
  position: absolute;
  z-index: 17;
  left: 0;
  top: 0;
  width: 10000px;
  height: 7600px;
  overflow: visible;
  contain: layout style;
  pointer-events: none;
  touch-action: none;
  user-select: none;
}

.screen-vfx-layer {
  position: absolute;
  z-index: 190;
  inset: 0;
  overflow: visible;
  contain: layout style;
  pointer-events: none;
  touch-action: none;
  user-select: none;
}

.dialog-vfx-layer,
.crownlands-dialog-vfx-layer {
  position: fixed;
  z-index: 20;
  inset: 0;
  overflow: visible;
  contain: layout style;
  pointer-events: none;
  touch-action: none;
  user-select: none;
}

.animation-settings-section {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-color: rgba(211, 161, 63, .38);
  background: linear-gradient(180deg, rgba(17, 51, 75, .96), rgba(5, 21, 36, .98));
}

.animation-settings-section .profile-section-heading,
.animation-settings-section .settings-card-description {
  grid-column: 1;
}

.animation-mode-toggle {
  min-width: min(100%, 290px);
  display: grid;
  grid-column: 2;
  grid-row: 1 / 3;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(211, 161, 63, .34);
  border-radius: var(--ui-radius);
  background: rgba(2, 13, 23, .78);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .34);
}

.animation-mode-option {
  min-height: 40px;
  padding: .38rem .58rem;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-small);
  color: #a9cadd;
  background: transparent;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .02em;
  transition: color var(--motion-ui-fast) ease, border-color var(--motion-ui-fast) ease, background-color var(--motion-ui-fast) ease, box-shadow var(--motion-ui-fast) ease;
}

.animation-mode-option:hover,
.animation-mode-option:focus-visible {
  color: #fff1bd;
  border-color: rgba(243, 212, 135, .56);
}

.animation-mode-option:focus-visible {
  outline: 2px solid #9ed8f5;
  outline-offset: 2px;
}

.animation-mode-option.active,
.animation-mode-option[aria-pressed="true"] {
  color: #241707;
  border-color: #ffe39a;
  background: linear-gradient(180deg, #f8d77a, #c98a29);
  box-shadow: inset 0 1px 0 rgba(255, 250, 213, .52), 0 4px 10px rgba(0, 0, 0, .24);
}

.animation-mode-status {
  min-width: 0;
  grid-column: 1 / -1;
  color: #8fc9e7;
  font: 750 .64rem/1.3 var(--font-system);
}

/* Native dialogs retain their top-layer behavior; unsupported browsers fall
   back to the existing instant open/close without affecting interaction. */
.modal {
  opacity: 0;
  transition:
    opacity var(--motion-ui-close) ease,
    display var(--motion-ui-close) allow-discrete,
    overlay var(--motion-ui-close) allow-discrete;
}

.modal[open] {
  opacity: 1;
  transition-duration: var(--motion-ui-open);
}

.modal::backdrop {
  opacity: 0;
  transition:
    opacity var(--motion-ui-close) ease,
    display var(--motion-ui-close) allow-discrete,
    overlay var(--motion-ui-close) allow-discrete;
}

.modal[open]::backdrop {
  opacity: 1;
  transition-duration: var(--motion-ui-open);
}

.modal:not(.level-up-reward-modal) > .modal-card {
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(.97);
  transform-origin: 50% 48%;
  transition: opacity var(--motion-ui-close) ease, transform var(--motion-ui-close) ease;
}

.modal:not(.level-up-reward-modal)[open] > .modal-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition-duration: var(--motion-ui-open);
  transition-timing-function: ease, var(--motion-ease-settle);
}

.modal.ui-transition-large:not(.level-up-reward-modal) > .modal-card,
.modal[data-ui-transition="large"]:not(.level-up-reward-modal) > .modal-card,
.modal:is(.shop-modal, .inventory-modal, .leaderboard-modal, .island-switcher-modal, .city-list-modal):not(.level-up-reward-modal) > .modal-card {
  transform: translate3d(0, 18px, 0) scale(.985);
}

.modal.ui-transition-large:not(.level-up-reward-modal)[open] > .modal-card,
.modal[data-ui-transition="large"]:not(.level-up-reward-modal)[open] > .modal-card,
.modal:is(.shop-modal, .inventory-modal, .leaderboard-modal, .island-switcher-modal, .city-list-modal):not(.level-up-reward-modal)[open] > .modal-card {
  transform: translate3d(0, 0, 0) scale(1);
}

@starting-style {
  .modal[open],
  .modal[open]::backdrop {
    opacity: 0;
  }

  .modal:not(.level-up-reward-modal)[open] > .modal-card {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(.97);
  }

  .modal.ui-transition-large:not(.level-up-reward-modal)[open] > .modal-card,
  .modal[data-ui-transition="large"]:not(.level-up-reward-modal)[open] > .modal-card,
  .modal:is(.shop-modal, .inventory-modal, .leaderboard-modal, .island-switcher-modal, .city-list-modal):not(.level-up-reward-modal)[open] > .modal-card {
    transform: translate3d(0, 18px, 0) scale(.985);
  }
}

.profile-screen {
  display: grid;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, calc(-50% + 12px), 0) scale(.985);
  transform-origin: 50% 48%;
  transition:
    visibility 0s linear var(--motion-ui-close),
    opacity var(--motion-ui-close) ease,
    transform var(--motion-ui-close) ease;
}

.profile-screen.open {
  display: grid;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transition-delay: 0s;
  transition-duration: 0s, var(--motion-ui-open), var(--motion-ui-open);
  transition-timing-function: linear, ease, var(--motion-ease-settle);
}

.commander-panel {
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(12px, 0, 0) scale(.985);
  transform-origin: 100% 50%;
  transition:
    visibility 0s linear var(--motion-ui-close),
    opacity var(--motion-ui-close) ease,
    transform var(--motion-ui-close) ease;
}

.commander-panel.visible {
  display: block;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: 0s;
  transition-duration: 0s, var(--motion-ui-open), var(--motion-ui-open);
  transition-timing-function: linear, ease, var(--motion-ease-out);
}

.ui-tab-entering,
.is-tab-entering,
[data-ui-transition="tab"].is-entering,
.profile-screen.open > :is(.profile-view, .profile-skills-view, .profile-settings-view, .clan-view, .flag-editor-view):not([hidden]),
.camp-info-tab-panel.ui-tab-entering:not([hidden]) {
  animation: crownlandsUiTabIn var(--motion-ui-fast) ease both;
}

@keyframes crownlandsUiTabIn {
  from { opacity: 0; transform: translate3d(0, 4px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes crownlandsUiTabFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 640px) {
  .animation-settings-section {
    grid-template-columns: minmax(0, 1fr);
  }

  .animation-mode-toggle {
    width: 100%;
    min-width: 0;
    grid-column: 1;
    grid-row: auto;
  }
}

/* Shared VFX primitives. All animation nodes are decorative and isolated from
   map/UI hit testing. */
.crownlands-vfx {
  --vfx-size: 170px;
  --vfx-old-primary: #777b7d;
  --vfx-old-secondary: #d1d1c8;
  --vfx-new-primary: #2f83d0;
  --vfx-new-secondary: #bfe8ff;
  position: absolute;
  z-index: 1;
  left: var(--vfx-x, 0px);
  top: var(--vfx-y, 0px);
  width: var(--vfx-size);
  height: var(--vfx-size);
  transform: translate3d(-50%, -50%, 0);
  transform-origin: 50% 50%;
  overflow: visible;
  contain: layout style;
  isolation: isolate;
  pointer-events: none !important;
  touch-action: none;
  user-select: none;
}

.crownlands-vfx--scope-ui {
  position: fixed;
  z-index: 2;
}

.crownlands-vfx--scope-transition {
  position: absolute;
  z-index: 3;
}

.crownlands-vfx__part,
.crownlands-vfx__particle {
  position: absolute;
  display: block;
  pointer-events: none;
  backface-visibility: hidden;
}

.crownlands-vfx__part {
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.crownlands-vfx__particle {
  z-index: 6;
  left: 50%;
  top: 50%;
  opacity: 0;
  animation-delay: var(--vfx-delay, 0ms);
  animation-fill-mode: both;
}

.crownlands-vfx__particle > img,
.crownlands-vfx__particle > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.crownlands-vfx__particle--spark,
.crownlands-vfx__particle--gold-sparkle {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff4b5;
  box-shadow: 0 0 5px #ffd86e, 0 0 10px rgba(236, 139, 31, .72);
  animation: crownlandsVfxSpark 520ms ease-out both;
}

.crownlands-vfx__particle--spark::after,
.crownlands-vfx__particle--gold-sparkle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  transform: translate(-50%, -50%) rotate(var(--vfx-angle, 0deg));
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 230, 144, .82), transparent);
}

.crownlands-vfx__particle--ember {
  width: 5px;
  height: 8px;
  border-radius: 60% 40% 55% 45%;
  background: #ffcb52;
  box-shadow: 0 0 6px #ef651f, 0 0 11px rgba(207, 43, 15, .55);
  animation: crownlandsVfxEmber 850ms ease-out both;
}

.crownlands-vfx__particle--smoke {
  width: 30px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 48%, rgba(77, 72, 66, .64), rgba(31, 29, 28, .38) 58%, transparent 72%);
  filter: blur(2px);
  animation: crownlandsVfxSmoke 1080ms ease-out both;
}

.crownlands-vfx__particle--magic {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f5d87e;
  box-shadow: 0 0 7px #ffdd76, 0 0 15px rgba(152, 92, 231, .88);
  animation: crownlandsVfxMagicRise 980ms ease-out both;
}

@keyframes crownlandsVfxSpark {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.3); }
  18% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate3d(var(--vfx-offset-x, 24px), var(--vfx-offset-y, -20px), 0) scale(.08);
  }
}

@keyframes crownlandsVfxEmber {
  0% { opacity: 0; transform: translate3d(-50%, 4px, 0) rotate(0deg) scale(.65); }
  22% { opacity: .95; }
  100% { opacity: 0; transform: translate3d(var(--vfx-offset-x, 8px), var(--vfx-offset-y, -58px), 0) rotate(115deg) scale(.25); }
}

@keyframes crownlandsVfxSmoke {
  0% { opacity: 0; transform: translate3d(-50%, 8px, 0) scale(.45); }
  24% { opacity: .7; }
  100% { opacity: 0; transform: translate3d(var(--vfx-offset-x, 5px), var(--vfx-offset-y, -58px), 0) scale(1.45); }
}

@keyframes crownlandsVfxMagicRise {
  0% { opacity: 0; transform: translate3d(-50%, 12px, 0) scale(.3); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--vfx-offset-x, 8px), var(--vfx-offset-y, -70px), 0) scale(.15); }
}

.crownlands-vfx-target-pulse {
  animation: crownlandsVfxTargetPulse 520ms var(--motion-ease-out) both;
}

.crownlands-vfx-target-pulse--gold {
  --vfx-pulse-color: rgba(245, 190, 62, .8);
}

.crownlands-vfx-target-pulse--reward-gold {
  --vfx-pulse-color: rgba(245, 190, 62, .8);
  animation-duration: 360ms;
}

.crownlands-vfx-target-pulse--troops {
  --vfx-pulse-color: rgba(137, 202, 111, .78);
}

.crownlands-vfx-target-pulse--reward-troops {
  --vfx-pulse-color: rgba(137, 202, 111, .78);
  animation-duration: 360ms;
}

.crownlands-vfx-target {
  /* Lifecycle hook only. Individual effects opt into visible target styling. */
}

.crownlands-vfx-target--deed-completed {
  --vfx-pulse-color: rgba(247, 198, 72, .86);
  outline: 2px solid rgba(247, 198, 72, .86);
  outline-offset: 5px;
  animation: crownlandsVfxTargetOutline 1100ms ease-out both;
}

.city-node.crownlands-vfx-target--city-attack {
  animation: crownlandsVfxCityShake 430ms ease-out both;
}

@keyframes crownlandsVfxTargetPulse {
  0% { box-shadow: 0 0 0 0 var(--vfx-pulse-color, rgba(255, 220, 115, .76)); }
  38% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--vfx-pulse-color, #ffd66b) 34%, transparent), 0 0 22px var(--vfx-pulse-color, rgba(255, 220, 115, .76)); }
  100% { box-shadow: 0 0 0 14px transparent; }
}

@keyframes crownlandsVfxTargetOutline {
  0% { outline-color: transparent; outline-offset: 0; }
  24%, 58% { outline-color: var(--vfx-new-secondary, #ffe49a); outline-offset: 6px; }
  100% { outline-color: transparent; outline-offset: 13px; }
}

@keyframes crownlandsVfxCityShake {
  0%, 100% { transform: translate3d(-50%, -50%, 0); }
  24% { transform: translate3d(calc(-50% - 1.5px), calc(-50% + .5px), 0); }
  46% { transform: translate3d(calc(-50% + 1.25px), calc(-50% - .5px), 0); }
  68% { transform: translate3d(calc(-50% - .65px), -50%, 0); }
}

/* City combat and construction. */
.crownlands-vfx--city-attack,
.crownlands-vfx--city-capture,
.crownlands-vfx--city-upgrade {
  --vfx-size: 184px;
  z-index: 4;
}

.crownlands-vfx__part--weapons {
  z-index: 8;
  width: 92px;
  height: 82px;
  transform-origin: 50% 50%;
  animation: crownlandsVfxWeaponClash 560ms var(--motion-ease-settle) both;
}

.crownlands-vfx__part--weapons::before,
.crownlands-vfx__part--weapons::after {
  content: "";
  position: absolute;
  left: 42px;
  top: 3px;
  width: 8px;
  height: 70px;
  clip-path: polygon(50% 0, 100% 10%, 82% 76%, 100% 79%, 100% 86%, 62% 86%, 62% 100%, 38% 100%, 38% 86%, 0 86%, 0 79%, 18% 76%, 0 10%);
  background: linear-gradient(90deg, #67737c, #eef3ef 44%, #8b969a 55%, #455057);
  box-shadow: 0 0 0 1px rgba(26, 29, 31, .72), 0 0 8px rgba(250, 226, 155, .32);
  transform-origin: 50% 55%;
}

.crownlands-vfx__part--weapons::before { transform: rotate(43deg); }
.crownlands-vfx__part--weapons::after { transform: rotate(-43deg); }

.crownlands-vfx__part--dust,
.crownlands-vfx__part--foundation {
  z-index: 3;
  top: 70%;
  width: 118px;
  height: 40px;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(ellipse at 22% 58%, rgba(192, 160, 116, .62), transparent 42%),
    radial-gradient(ellipse at 76% 48%, rgba(151, 122, 84, .56), transparent 44%),
    radial-gradient(ellipse at 50% 68%, rgba(111, 86, 58, .48), transparent 56%);
  filter: blur(1px);
  animation: crownlandsVfxDust 680ms ease-out both;
}

.crownlands-vfx__part--mist {
  z-index: 1;
  width: 154px;
  height: 112px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(ellipse, rgba(132, 23, 22, .24), rgba(92, 11, 15, .08) 52%, transparent 72%);
  animation: crownlandsVfxMist 620ms ease-out both;
}

.crownlands-vfx__part--impact {
  z-index: 5;
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 225, 140, .82);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 13px rgba(255, 163, 55, .62);
  animation: crownlandsVfxImpactRing 560ms ease-out both;
}

@keyframes crownlandsVfxWeaponClash {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.5) rotate(-7deg); }
  32% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(.9) rotate(2deg); }
  52% { transform: translate3d(-50%, -50%, 0) scale(1.05) rotate(0deg); }
  100% { opacity: 0; transform: translate3d(-50%, -52%, 0) scale(.96); }
}

@keyframes crownlandsVfxDust {
  0% { opacity: 0; transform: translate3d(-50%, -40%, 0) scale(.42); }
  22% { opacity: .78; }
  100% { opacity: 0; transform: translate3d(-50%, -58%, 0) scale(1.32); }
}

@keyframes crownlandsVfxMist {
  0%, 100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.7); }
  32% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
}

@keyframes crownlandsVfxImpactRing {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.2); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(3.2); }
}

.crownlands-vfx--city-capture .crownlands-vfx__part--dust {
  width: 144px;
  height: 50px;
  animation-duration: 900ms;
}

.crownlands-vfx__part--ownership-old,
.crownlands-vfx__part--ownership-new {
  z-index: 2;
  top: 62%;
  width: 130px;
  height: 54px;
  border: 4px solid var(--vfx-old-primary);
  border-radius: 50%;
  box-shadow: 0 0 17px color-mix(in srgb, var(--vfx-old-primary) 65%, transparent);
}

.crownlands-vfx__part--ownership-old {
  animation: crownlandsVfxOwnershipOld 720ms ease both;
}

.crownlands-vfx__part--ownership-new {
  border-color: var(--vfx-new-primary);
  box-shadow: 0 0 18px color-mix(in srgb, var(--vfx-new-primary) 72%, transparent);
  opacity: 0;
  animation: crownlandsVfxOwnershipNew 980ms ease-out 230ms both;
}

.crownlands-vfx__part--banner {
  z-index: 9;
  left: 67%;
  top: 33%;
  width: 38px;
  height: 54px;
  opacity: 0;
  transform-origin: 0 100%;
  animation: crownlandsVfxBanner 720ms var(--motion-ease-settle) 300ms both;
}

.crownlands-vfx__part--banner::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 3px;
  height: 54px;
  border-radius: 3px;
  background: linear-gradient(90deg, #4a2d14, #bc9356, #4a2d14);
}

.crownlands-vfx__part--banner::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 29px;
  height: 24px;
  clip-path: polygon(0 0, 100% 8%, 82% 52%, 100% 96%, 0 88%);
  background: linear-gradient(135deg, var(--vfx-new-secondary) 0 28%, var(--vfx-new-primary) 29% 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .48);
}

.crownlands-vfx__part--fire {
  z-index: 7;
  left: 43%;
  top: 58%;
  width: 36px;
  height: 50px;
  border-radius: 50% 50% 45% 45%;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 76%, #fff2a0 0 12%, #f0a42d 13% 30%, #b83b1f 31% 48%, transparent 50%),
    radial-gradient(ellipse at 44% 70%, rgba(230, 79, 26, .72), transparent 62%);
  filter: blur(.4px) drop-shadow(0 0 7px rgba(239, 89, 24, .72));
  animation: crownlandsVfxFire 980ms ease-out 90ms both;
}

@keyframes crownlandsVfxOwnershipOld {
  0%, 20% { opacity: .72; transform: translate3d(-50%, -50%, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.74); }
}

@keyframes crownlandsVfxOwnershipNew {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.55); }
  42% { opacity: .92; transform: translate3d(-50%, -50%, 0) scale(1.07); }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.2); }
}

@keyframes crownlandsVfxBanner {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) rotate(-12deg) scaleX(.12); }
  42% { opacity: 1; transform: translate3d(-50%, -50%, 0) rotate(2deg) scaleX(1.06); }
  78% { opacity: 1; transform: translate3d(-50%, -50%, 0) rotate(-1deg) scaleX(1); }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) rotate(0deg) scaleX(1); }
}

@keyframes crownlandsVfxFire {
  0% { opacity: 0; transform: translate3d(-50%, -38%, 0) scale(.35) rotate(-3deg); }
  25%, 58% { opacity: .92; transform: translate3d(-50%, -52%, 0) scale(1) rotate(3deg); }
  100% { opacity: 0; transform: translate3d(-50%, -70%, 0) scale(.58) rotate(-2deg); }
}

.crownlands-vfx--city-upgrade .crownlands-vfx__part--castle-old,
.crownlands-vfx--city-upgrade .crownlands-vfx__part--castle-new,
.crownlands-vfx--city-upgrade img.crownlands-vfx__part--castle-old,
.crownlands-vfx--city-upgrade img.crownlands-vfx__part--castle-new {
  z-index: 5;
  width: 112px;
  height: 112px;
  object-fit: contain;
}

.crownlands-vfx--city-upgrade .crownlands-vfx__part--castle-old {
  animation: crownlandsVfxCastleOld 600ms ease-in both;
}

.crownlands-vfx--city-upgrade .crownlands-vfx__part--castle-new {
  opacity: 0;
  animation: crownlandsVfxCastleNew 880ms var(--motion-ease-settle) 170ms both;
}

.crownlands-vfx--city-upgrade .crownlands-vfx__part--shimmer {
  z-index: 7;
  width: 122px;
  height: 128px;
  opacity: 0;
  background: linear-gradient(110deg, transparent 34%, rgba(255, 235, 153, .76) 48%, transparent 62%);
  mix-blend-mode: screen;
  animation: crownlandsVfxShimmer 700ms ease-in-out 250ms both;
}

.crownlands-vfx--city-upgrade .crownlands-vfx__part--settle {
  z-index: 2;
  top: 68%;
  width: 118px;
  height: 34px;
  border: 2px solid rgba(245, 203, 100, .62);
  border-radius: 50%;
  opacity: 0;
  animation: crownlandsVfxSettle 500ms ease-out 520ms both;
}

@keyframes crownlandsVfxCastleOld {
  0%, 20% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
  58% { opacity: .72; transform: translate3d(-50%, -45%, 0) scale(1.04, .84); }
  100% { opacity: 0; transform: translate3d(-50%, -43%, 0) scale(.94, .78); }
}

@keyframes crownlandsVfxCastleNew {
  0% { opacity: 0; transform: translate3d(-50%, -35%, 0) scale(.86, .66); }
  52% { opacity: 1; transform: translate3d(-50%, -53%, 0) scale(1.03, 1.06); }
  76% { transform: translate3d(-50%, -49%, 0) scale(.985, .97); }
  100% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
}

@keyframes crownlandsVfxShimmer {
  0% { opacity: 0; transform: translate3d(-92%, -50%, 0); }
  38% { opacity: .72; }
  100% { opacity: 0; transform: translate3d(-8%, -50%, 0); }
}

@keyframes crownlandsVfxSettle {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.55); }
  36% { opacity: .8; }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.15); }
}

/* Reward flights ----------------------------------------------------------- */
.crownlands-vfx--reward-gold,
.crownlands-vfx--reward-troops {
  --vfx-size: 1px;
  z-index: 12;
  contain: style;
}

.crownlands-vfx--reward-gold .crownlands-vfx__particle--coin,
.crownlands-vfx--reward-troops .crownlands-vfx__particle--troop {
  left: 0;
  top: 0;
  opacity: 0;
  animation: crownlandsVfxRewardFly 720ms var(--motion-ease-out) var(--vfx-delay, 0ms) both;
}

.crownlands-vfx--reward-gold .crownlands-vfx__particle--coin {
  width: 17px;
  height: 17px;
  border: 1px solid #fff1a0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, #fff3aa 0 8%, transparent 9%),
    linear-gradient(135deg, #ffdf70, #bf7418 72%);
  box-shadow: inset 0 0 0 2px rgba(116, 61, 9, .28), 0 2px 5px rgba(0, 0, 0, .42), 0 0 7px rgba(247, 187, 56, .52);
  object-fit: none;
  object-position: 9999px 9999px;
}

.crownlands-vfx--reward-gold .crownlands-vfx__particle--coin::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(111, 61, 10, .52);
  border-radius: 50%;
}

.crownlands-vfx--reward-gold .crownlands-vfx__particle--coin > .crownlands-vfx__asset {
  display: none;
}

.crownlands-vfx--reward-troops .crownlands-vfx__particle--troop {
  width: 25px;
  height: 25px;
  border: 1px solid rgba(229, 218, 176, .62);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(60, 77, 54, .94), rgba(20, 32, 24, .98));
  box-shadow: 0 2px 5px rgba(0, 0, 0, .46), 0 0 8px rgba(127, 178, 105, .42);
}

.crownlands-vfx--reward-troops .crownlands-vfx__particle--troop > img {
  padding: 2px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));
}

.crownlands-vfx--reward-gold .crownlands-vfx__part--arrival,
.crownlands-vfx--reward-troops .crownlands-vfx__part--arrival {
  left: 0;
  top: 0;
  z-index: 3;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 226, 126, .78);
  border-radius: 50%;
  opacity: 0;
  animation: crownlandsVfxRewardArrival 430ms ease-out 580ms both;
}

.crownlands-vfx--reward-troops .crownlands-vfx__part--arrival {
  border-color: rgba(157, 210, 130, .78);
}

@keyframes crownlandsVfxRewardFly {
  0% {
    opacity: 0;
    transform: translate3d(calc(var(--vfx-offset-x, 0px) - 50%), calc(var(--vfx-offset-y, 0px) - 50%), 0) rotate(-18deg) scale(.35);
  }
  13% {
    opacity: 1;
    transform: translate3d(calc(var(--vfx-offset-x, 0px) - 50%), calc(var(--vfx-offset-y, 0px) - 50% - 14px), 0) rotate(8deg) scale(1);
  }
  72% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--vfx-travel-x, 0px) - 50%), calc(var(--vfx-travel-y, 0px) - 50%), 0) rotate(300deg) scale(.42);
  }
}

@keyframes crownlandsVfxRewardArrival {
  0% {
    opacity: 0;
    transform: translate3d(calc(var(--vfx-travel-x, 0px) - 50%), calc(var(--vfx-travel-y, 0px) - 50%), 0) scale(.25);
  }
  28% { opacity: .9; }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--vfx-travel-x, 0px) - 50%), calc(var(--vfx-travel-y, 0px) - 50%), 0) scale(2.25);
  }
}

/* Camp ownership effects --------------------------------------------------- */
.crownlands-vfx--camp-gold,
.crownlands-vfx--camp-warband,
.crownlands-vfx--camp-relic,
.crownlands-vfx--camp-deed,
.crownlands-vfx--deed-completed {
  --vfx-size: 196px;
  z-index: 5;
}

.crownlands-vfx--camp-gold .crownlands-vfx__part--burst {
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 249, 192, .95), rgba(245, 184, 52, .46) 36%, transparent 70%);
  box-shadow: 0 0 26px rgba(247, 184, 50, .66);
  animation: crownlandsVfxGoldBurst 720ms ease-out both;
}

.crownlands-vfx--camp-gold .crownlands-vfx__part--shimmer {
  z-index: 4;
  width: 126px;
  height: 142px;
  opacity: 0;
  background: linear-gradient(112deg, transparent 34%, rgba(255, 243, 178, .78) 47%, transparent 60%);
  mix-blend-mode: screen;
  animation: crownlandsVfxShimmer 680ms ease-in-out 90ms both;
}

.crownlands-vfx--camp-gold .crownlands-vfx__particle--coin {
  width: 14px;
  height: 14px;
  border: 1px solid #ffe68b;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe477, #ad6718);
  box-shadow: 0 0 7px rgba(245, 181, 45, .6);
  animation: crownlandsVfxCampCoin 820ms ease-out var(--vfx-delay, 0ms) both;
}

.crownlands-vfx--camp-gold .crownlands-vfx__particle--gold-sparkle {
  animation-name: crownlandsVfxMagicRise;
  animation-duration: 780ms;
}

@keyframes crownlandsVfxGoldBurst {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.2); }
  22% { opacity: .95; }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(3.3); }
}

@keyframes crownlandsVfxCampCoin {
  0% { opacity: 0; transform: translate3d(-50%, 8px, 0) rotateY(0deg) scale(.4); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--vfx-offset-x, 8px), var(--vfx-offset-y, -66px), 0) rotateY(540deg) scale(.72); }
}

.crownlands-vfx--camp-warband .crownlands-vfx__part--weapons {
  top: 44%;
  animation-duration: 690ms;
}

.crownlands-vfx--camp-warband .crownlands-vfx__part--shield {
  z-index: 9;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 50px;
  clip-path: polygon(50% 0, 94% 16%, 88% 68%, 50% 100%, 12% 68%, 6% 16%);
  opacity: 0;
  background: linear-gradient(135deg, #8a969b, #39464e 58%, #1d282e);
  box-shadow: inset 0 0 0 4px rgba(229, 212, 166, .22), 0 4px 8px rgba(0, 0, 0, .55);
  animation: crownlandsVfxShieldImpact 700ms var(--motion-ease-settle) both;
}

.crownlands-vfx--camp-warband .crownlands-vfx__part--dust {
  top: 72%;
  width: 146px;
}

.crownlands-vfx--camp-warband .crownlands-vfx__part--banner {
  left: 70%;
  animation-delay: 250ms;
}

@keyframes crownlandsVfxShieldImpact {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.5) rotate(-8deg); }
  34% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(.9) rotate(2deg); }
  64% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate3d(-50%, -54%, 0) scale(.96); }
}

.crownlands-vfx--camp-relic .crownlands-vfx__part--glow {
  z-index: 1;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(246, 211, 106, .3), rgba(126, 72, 208, .24) 45%, transparent 72%);
  box-shadow: 0 0 34px rgba(135, 76, 219, .46), inset 0 0 28px rgba(246, 209, 100, .24);
  animation: crownlandsVfxRelicGlow 1080ms ease-in-out both;
}

.crownlands-vfx--camp-relic .crownlands-vfx__part--rune,
.crownlands-vfx--camp-relic .crownlands-vfx__part--ring {
  z-index: 3;
  top: 64%;
  width: 132px;
  height: 52px;
  border: 3px solid rgba(227, 191, 94, .86);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 12px rgba(240, 198, 90, .62), inset 0 0 13px rgba(129, 75, 210, .48);
  animation: crownlandsVfxRelicRune 1050ms ease-out both;
}

.crownlands-vfx--camp-relic .crownlands-vfx__part--rune::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px dashed rgba(190, 132, 244, .84);
  border-radius: 50%;
}

.crownlands-vfx--camp-relic .crownlands-vfx__part--ring {
  width: 94px;
  height: 38px;
  border-color: rgba(174, 114, 232, .78);
  animation-delay: 80ms;
  animation-direction: reverse;
}

.crownlands-vfx--camp-relic .crownlands-vfx__part--pulse {
  z-index: 2;
  width: 52px;
  height: 52px;
  border: 3px solid rgba(191, 129, 239, .72);
  border-radius: 50%;
  opacity: 0;
  animation: crownlandsVfxRelicPulse 920ms ease-out 170ms both;
}

@keyframes crownlandsVfxRelicGlow {
  0%, 100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.62); }
  35%, 64% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
}

@keyframes crownlandsVfxRelicRune {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) rotate(-24deg) scale(.5); }
  30%, 70% { opacity: .92; }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) rotate(42deg) scale(1.12); }
}

@keyframes crownlandsVfxRelicPulse {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.3); }
  26% { opacity: .8; }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(3); }
}

.crownlands-vfx--camp-deed .crownlands-vfx__part--parchment,
.crownlands-vfx--deed-completed .crownlands-vfx__part--parchment {
  z-index: 5;
  width: 80px;
  height: 62px;
  border: 1px solid #8a5b27;
  border-radius: 5px 8px 4px 7px;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(111, 68, 28, .12) 1px, transparent 1px) 12px 17px / 56px 9px repeat-y,
    linear-gradient(135deg, #f3dda7, #c49a5d);
  box-shadow: inset 0 0 12px rgba(104, 61, 20, .24), 0 6px 12px rgba(0, 0, 0, .44);
  animation: crownlandsVfxParchment 900ms var(--motion-ease-settle) both;
}

.crownlands-vfx--camp-deed.is-active-hold {
  --vfx-size: 168px;
  opacity: .72;
}

.crownlands-vfx--camp-deed.is-active-hold .crownlands-vfx__part--hold-ring {
  z-index: 2;
  top: 65%;
  width: 132px;
  height: 50px;
  border-radius: 50%;
  background: conic-gradient(from -90deg, rgba(232, 187, 84, .82) 0 28%, rgba(91, 73, 50, .24) 28% 100%);
  background: conic-gradient(from -90deg, rgba(232, 187, 84, .82) 0 calc(var(--vfx-progress, 0) * 1turn), rgba(91, 73, 50, .24) 0);
  -webkit-mask: radial-gradient(ellipse, transparent 60%, #000 62% 71%, transparent 73%);
  mask: radial-gradient(ellipse, transparent 60%, #000 62% 71%, transparent 73%);
  filter: drop-shadow(0 0 4px rgba(226, 173, 61, .38));
}

.crownlands-vfx--camp-deed.is-active-hold .crownlands-vfx__part--hold-seal {
  z-index: 4;
  top: 65%;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 216, 133, .6);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #b95742, #63211e);
  box-shadow: inset 0 0 0 2px rgba(70, 14, 15, .28), 0 2px 4px rgba(0, 0, 0, .44);
}

.crownlands-vfx--camp-deed.is-active-hold .crownlands-vfx__part--hold-progress {
  z-index: 3;
  top: 83%;
  width: 76px;
  height: 4px;
  overflow: hidden;
  border: 1px solid rgba(206, 164, 75, .58);
  border-radius: 999px;
  background: linear-gradient(90deg, #e2b64f 0 50%, rgba(64, 48, 31, .54) 50% 100%);
  background: linear-gradient(90deg, #e2b64f 0 calc(var(--vfx-progress, 0) * 100%), rgba(64, 48, 31, .54) 0);
}

.crownlands-vfx__part--seal,
.crownlands-vfx__part--stamp {
  z-index: 7;
  left: 60%;
  top: 60%;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 193, 122, .52);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle at 36% 30%, #d4664c, #75251f 72%);
  box-shadow: inset 0 0 0 3px rgba(74, 16, 17, .32), 0 3px 6px rgba(0, 0, 0, .48);
  animation: crownlandsVfxSeal 680ms var(--motion-ease-settle) 180ms both;
}

.crownlands-vfx__part--seal::after,
.crownlands-vfx__part--stamp::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 211, 149, .58);
  transform: rotate(45deg);
}

.crownlands-vfx--camp-deed .crownlands-vfx__part--outline,
.crownlands-vfx--deed-completed .crownlands-vfx__part--gold-pulse,
.crownlands-vfx--deed-completed .crownlands-vfx__part--city-highlight {
  z-index: 2;
  top: 66%;
  width: 126px;
  height: 48px;
  border: 3px solid rgba(243, 194, 77, .8);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 16px rgba(243, 185, 58, .5);
  animation: crownlandsVfxDeedOutline 960ms ease-out 160ms both;
}

.crownlands-vfx--deed-completed .crownlands-vfx__part--parchment {
  width: 96px;
  height: 72px;
  animation-duration: 1180ms;
}

.crownlands-vfx--deed-completed .crownlands-vfx__part--stamp {
  width: 38px;
  height: 38px;
  animation: crownlandsVfxStamp 740ms var(--motion-ease-settle) 260ms both;
}

.crownlands-vfx--deed-completed .crownlands-vfx__part--city-highlight {
  width: 152px;
  height: 62px;
  animation-delay: 430ms;
  animation-duration: 900ms;
}

@keyframes crownlandsVfxParchment {
  0% { opacity: 0; transform: translate3d(-50%, -35%, 0) scale(.55) rotate(-4deg); }
  32%, 72% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1) rotate(1deg); }
  100% { opacity: 0; transform: translate3d(-50%, -54%, 0) scale(.96) rotate(0deg); }
}

@keyframes crownlandsVfxSeal {
  0% { opacity: 0; transform: translate3d(-50%, -90%, 0) scale(1.45); }
  42% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(.88); }
  65% { transform: translate3d(-50%, -50%, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1); }
}

@keyframes crownlandsVfxStamp {
  0% { opacity: 0; transform: translate3d(-50%, -130%, 0) scale(1.7); }
  46% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(.82); }
  63% { transform: translate3d(-50%, -50%, 0) scale(1.12); }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1); }
}

@keyframes crownlandsVfxDeedOutline {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.48); }
  28%, 62% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.28); }
}

.crownlands-vfx--camp-gold .crownlands-vfx__part--ownership-new,
.crownlands-vfx--camp-warband .crownlands-vfx__part--ownership-new,
.crownlands-vfx--camp-relic .crownlands-vfx__part--ownership-new,
.crownlands-vfx--camp-deed .crownlands-vfx__part--ownership-new,
.crownlands-vfx--deed-completed .crownlands-vfx__part--ownership-new {
  top: 68%;
  width: 138px;
  height: 52px;
}

/* Persistent Deed hold cue: static except for the inexpensive progress fill. */
.camp-owner-marker,
.crownlands-camp-owner-marker {
  position: absolute;
  z-index: 6;
  right: 5%;
  top: 7%;
  width: 28px;
  height: 36px;
  pointer-events: none;
}

.camp-owner-marker::before,
.crownlands-camp-owner-marker::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  width: 2px;
  height: 36px;
  background: #a9824e;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}

.camp-owner-marker::after,
.crownlands-camp-owner-marker::after {
  content: none;
}

.camp-owner-marker .city-owner-flag,
.crownlands-camp-owner-marker .city-owner-flag {
  position: absolute;
  left: 4px;
  top: 3px;
  width: 25px;
  height: 19px;
  border-width: 1px;
  clip-path: polygon(0 0, 100% 8%, 82% 52%, 100% 96%, 0 88%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .52);
}

.camp-owner-marker .city-owner-flag .flag-symbol,
.crownlands-camp-owner-marker .city-owner-flag .flag-symbol {
  font-size: .56rem;
}

.deed-hold-ring,
.crownlands-deed-hold-ring {
  --deed-progress: 0%;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 55%;
  width: calc(var(--camp-size, 132px) * .98);
  height: calc(var(--camp-size, 132px) * .5);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: .68;
  filter: drop-shadow(0 0 4px rgba(226, 173, 61, .42));
  pointer-events: none;
}

.deed-hold-ring::before,
.crownlands-deed-hold-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from -90deg, rgba(226, 180, 76, .84) 0 28%, rgba(88, 71, 49, .25) 28% 100%);
  background: conic-gradient(from -90deg, rgba(226, 180, 76, .84) 0 var(--deed-hold-progress, 0%), rgba(88, 71, 49, .25) 0);
  -webkit-mask: radial-gradient(ellipse, transparent 61%, #000 63% 71%, transparent 73%);
  mask: radial-gradient(ellipse, transparent 61%, #000 63% 71%, transparent 73%);
}

.camp-node.camp-deed.deed-contested .deed-hold-ring {
  opacity: .82;
  filter: drop-shadow(0 0 5px rgba(185, 92, 48, .48));
}

.camp-node.camp-deed.deed-contested .deed-hold-ring::before {
  background: conic-gradient(from -90deg, rgba(218, 151, 66, .9) 0 var(--deed-hold-progress, 0%), rgba(111, 57, 42, .34) 0);
}

.deed-hold-seal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 216, 133, .62);
  border-radius: 50%;
  color: #f7ddb0;
  background: radial-gradient(circle at 36% 30%, #b95742, #63211e);
  box-shadow: inset 0 0 0 2px rgba(70, 14, 15, .28), 0 2px 4px rgba(0, 0, 0, .44);
  font: 900 8px/1 var(--font-ui);
}

/* Directional map transition shell ---------------------------------------- */
.crownlands-map-transition {
  --map-cloud-start-x: 0%;
  --map-cloud-start-y: 0%;
  --map-cloud-back-start-x: 0%;
  --map-cloud-back-start-y: 0%;
  --map-cloud-front-start-x: 0%;
  --map-cloud-front-start-y: 0%;
  --map-cloud-exit-x: 0%;
  --map-cloud-exit-y: 0%;
  --map-cloud-back-exit-x: 0%;
  --map-cloud-back-exit-y: 0%;
  --map-cloud-front-exit-x: 0%;
  --map-cloud-front-exit-y: 0%;
  --map-cover-duration: 420ms;
  --map-cloud-back-cover-duration: 400ms;
  --map-cloud-front-cover-duration: 350ms;
  --map-transition-duration: 520ms;
  --map-cloud-back-reveal-duration: 490ms;
  --map-cloud-front-reveal-duration: 440ms;
  position: absolute;
  z-index: 84;
  inset: 0;
  overflow: hidden;
  contain: strict;
  isolation: isolate;
  pointer-events: none;
}

.crownlands-map-transition--north {
  --map-cloud-start-y: -108%;
  --map-cloud-back-start-y: -94%;
  --map-cloud-front-start-y: -124%;
  --map-cloud-exit-y: 108%;
  --map-cloud-back-exit-y: 94%;
  --map-cloud-front-exit-y: 124%;
}

.crownlands-map-transition--south {
  --map-cloud-start-y: 108%;
  --map-cloud-back-start-y: 94%;
  --map-cloud-front-start-y: 124%;
  --map-cloud-exit-y: -108%;
  --map-cloud-back-exit-y: -94%;
  --map-cloud-front-exit-y: -124%;
}

.crownlands-map-transition--east {
  --map-cloud-start-x: 108%;
  --map-cloud-back-start-x: 94%;
  --map-cloud-front-start-x: 124%;
  --map-cloud-exit-x: -108%;
  --map-cloud-back-exit-x: -94%;
  --map-cloud-front-exit-x: -124%;
}

.crownlands-map-transition--west {
  --map-cloud-start-x: -108%;
  --map-cloud-back-start-x: -94%;
  --map-cloud-front-start-x: -124%;
  --map-cloud-exit-x: 108%;
  --map-cloud-back-exit-x: 94%;
  --map-cloud-front-exit-x: 124%;
}

.crownlands-map-transition__part,
[class*="crownlands-map-transition__part--"] {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.crownlands-map-transition__part--outgoing,
.crownlands-map-transition__part--incoming {
  display: none;
}

.crownlands-map-transition__part--mist {
  z-index: 4;
  inset: -30%;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 253, 242, 1), rgba(232, 234, 224, .99) 54%, rgba(203, 211, 211, 1) 100%),
    #e8e9df;
  backface-visibility: hidden;
  transform: translate3d(var(--map-cloud-start-x), var(--map-cloud-start-y), 0);
  will-change: transform, opacity;
}

.crownlands-map-transition:is(.crownlands-map-transition--north, .crownlands-map-transition--south) .crownlands-map-transition__part--mist {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

.crownlands-map-transition:is(.crownlands-map-transition--east, .crownlands-map-transition--west) .crownlands-map-transition__part--mist {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

.crownlands-map-transition__part--cloud-back,
.crownlands-map-transition__part--cloud-front {
  inset: -20%;
  opacity: 0;
  background-image: url("assets/optimized/map-transition-clouds-448x448-a17eebc9852d.webp");
  background-repeat: repeat;
  background-position: center;
  background-size: clamp(430px, 58vw, 760px) auto;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.crownlands-map-transition__part--cloud-back {
  z-index: 5;
  --map-cloud-layer-start-x: var(--map-cloud-back-start-x);
  --map-cloud-layer-start-y: var(--map-cloud-back-start-y);
  --map-cloud-layer-exit-x: var(--map-cloud-back-exit-x);
  --map-cloud-layer-exit-y: var(--map-cloud-back-exit-y);
  --map-cloud-layer-opacity: .76;
  --map-cloud-layer-scale: 1.08;
}

.crownlands-map-transition__part--cloud-front {
  z-index: 6;
  --map-cloud-layer-start-x: var(--map-cloud-front-start-x);
  --map-cloud-layer-start-y: var(--map-cloud-front-start-y);
  --map-cloud-layer-exit-x: var(--map-cloud-front-exit-x);
  --map-cloud-layer-exit-y: var(--map-cloud-front-exit-y);
  --map-cloud-layer-opacity: .96;
  --map-cloud-layer-scale: 1.18;
  background-position: 31% 57%;
}

.crownlands-map-transition:is(.is-leaving, .is-loading) .crownlands-map-transition__part--mist,
.crownlands-map-transition:is([data-phase="leaving"], [data-phase="loading"]) .crownlands-map-transition__part--mist {
  animation: crownlandsMapMistCover var(--map-cover-duration) var(--motion-ease-out) both;
}

.crownlands-map-transition:is(.is-leaving, .is-loading) .crownlands-map-transition__part--cloud-back,
.crownlands-map-transition:is([data-phase="leaving"], [data-phase="loading"]) .crownlands-map-transition__part--cloud-back {
  animation: crownlandsMapCloudCover var(--map-cloud-back-cover-duration) ease-out both;
}

.crownlands-map-transition:is(.is-leaving, .is-loading) .crownlands-map-transition__part--cloud-front,
.crownlands-map-transition:is([data-phase="leaving"], [data-phase="loading"]) .crownlands-map-transition__part--cloud-front {
  animation: crownlandsMapCloudCover var(--map-cloud-front-cover-duration) ease-out 30ms both;
}

.crownlands-map-transition.is-entering .crownlands-map-transition__part--mist,
.crownlands-map-transition[data-phase="entering"] .crownlands-map-transition__part--mist {
  animation: crownlandsMapMistReveal var(--map-transition-duration) var(--motion-ease-out) both;
}

.crownlands-map-transition.is-entering .crownlands-map-transition__part--cloud-back,
.crownlands-map-transition[data-phase="entering"] .crownlands-map-transition__part--cloud-back {
  animation: crownlandsMapCloudReveal var(--map-cloud-back-reveal-duration) ease-in both;
}

.crownlands-map-transition.is-entering .crownlands-map-transition__part--cloud-front,
.crownlands-map-transition[data-phase="entering"] .crownlands-map-transition__part--cloud-front {
  animation: crownlandsMapCloudReveal var(--map-cloud-front-reveal-duration) ease-in both;
}

.crownlands-map-transition.is-cancelled {
  opacity: 0;
  transition: opacity 100ms linear;
}

@keyframes crownlandsMapMistCover {
  from { opacity: .12; transform: translate3d(var(--map-cloud-start-x), var(--map-cloud-start-y), 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes crownlandsMapMistReveal {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(var(--map-cloud-exit-x), var(--map-cloud-exit-y), 0); }
}

@keyframes crownlandsMapCloudCover {
  from {
    opacity: 0;
    transform: translate3d(var(--map-cloud-layer-start-x), var(--map-cloud-layer-start-y), 0) scale(var(--map-cloud-layer-scale));
  }
  to {
    opacity: var(--map-cloud-layer-opacity);
    transform: translate3d(0, 0, 0) scale(var(--map-cloud-layer-scale));
  }
}

@keyframes crownlandsMapCloudReveal {
  from {
    opacity: var(--map-cloud-layer-opacity);
    transform: translate3d(0, 0, 0) scale(var(--map-cloud-layer-scale));
  }
  to {
    opacity: 0;
    transform: translate3d(var(--map-cloud-layer-exit-x), var(--map-cloud-layer-exit-y), 0) scale(var(--map-cloud-layer-scale));
  }
}

/* Motion preferences ------------------------------------------------------- */
.crownlands-vfx--mode-reduced :is(.crownlands-vfx__part--mist, .crownlands-vfx__part--fire, .crownlands-vfx__particle--smoke, .crownlands-vfx__particle--ember),
html[data-animation-mode="reduced"] :is(.crownlands-vfx__part--mist, .crownlands-vfx__part--fire, .crownlands-vfx__particle--smoke, .crownlands-vfx__particle--ember) {
  display: none;
}

.crownlands-vfx--mode-reduced.crownlands-vfx--reward-gold .crownlands-vfx__particle--coin,
.crownlands-vfx--mode-reduced.crownlands-vfx--reward-troops .crownlands-vfx__particle--troop,
html[data-animation-mode="reduced"] :is(.crownlands-vfx--reward-gold .crownlands-vfx__particle--coin, .crownlands-vfx--reward-troops .crownlands-vfx__particle--troop) {
  animation-name: crownlandsVfxReducedReward;
  animation-duration: 300ms;
}

.crownlands-vfx--mode-reduced :is(.crownlands-vfx__part--weapons, .crownlands-vfx__part--shield, .crownlands-vfx__part--parchment, .crownlands-vfx__part--seal, .crownlands-vfx__part--stamp),
html[data-animation-mode="reduced"] :is(.crownlands-vfx__part--weapons, .crownlands-vfx__part--shield, .crownlands-vfx__part--parchment, .crownlands-vfx__part--seal, .crownlands-vfx__part--stamp) {
  animation-duration: 360ms;
}

.crownlands-map-transition--mode-reduced .crownlands-map-transition__part--mist,
html[data-animation-mode="reduced"] .crownlands-map-transition .crownlands-map-transition__part--mist {
  transform: none;
}

.crownlands-map-transition--mode-reduced:is(.is-leaving, .is-loading) .crownlands-map-transition__part--mist,
html[data-animation-mode="reduced"] .crownlands-map-transition:is(.is-leaving, .is-loading) .crownlands-map-transition__part--mist {
  animation-name: crownlandsMapReducedCover !important;
  animation-duration: 140ms !important;
}

.crownlands-map-transition--mode-reduced.is-entering .crownlands-map-transition__part--mist,
html[data-animation-mode="reduced"] .crownlands-map-transition.is-entering .crownlands-map-transition__part--mist {
  animation-name: crownlandsMapReducedReveal !important;
  animation-duration: 160ms !important;
}

.crownlands-map-transition--mode-reduced :is(.crownlands-map-transition__part--cloud-back, .crownlands-map-transition__part--cloud-front),
html[data-animation-mode="reduced"] .crownlands-map-transition :is(.crownlands-map-transition__part--cloud-back, .crownlands-map-transition__part--cloud-front) {
  display: none;
}

@keyframes crownlandsVfxReducedReward {
  0% { opacity: 0; transform: translate3d(0, 3px, 0) scale(.65); }
  38% { opacity: .9; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(0, -3px, 0) scale(.86); }
}

@keyframes crownlandsMapReducedCover {
  from { opacity: 0; transform: none; }
  to { opacity: 1; transform: none; }
}

@keyframes crownlandsMapReducedReveal {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: none; }
}

html[data-animation-mode="reduced"] :is(.modal:not(.level-up-reward-modal) > .modal-card, .commander-panel),
html[data-animation-mode="reduced"] :is(.modal:not(.level-up-reward-modal)[open] > .modal-card, .commander-panel.visible) {
  transform: none;
}

html[data-animation-mode="reduced"] .profile-screen,
html[data-animation-mode="reduced"] .profile-screen.open {
  transform: translate3d(-50%, -50%, 0);
}

html[data-animation-mode="reduced"] .level-up-reward-modal .level-up-reward-card {
  transform: none;
  transition: opacity var(--motion-ui-fast) ease;
}

html[data-animation-mode="reduced"] :is(.crownlands-vfx-target-pulse--reward-gold, .crownlands-vfx-target-pulse--reward-troops) {
  animation-duration: 260ms;
}

html[data-animation-mode="reduced"] .profile-screen.open > :is(.profile-view, .profile-skills-view, .profile-settings-view, .clan-view, .flag-editor-view):not([hidden]),
html[data-animation-mode="reduced"] :is(.ui-tab-entering, .is-tab-entering, [data-ui-transition="tab"].is-entering) {
  animation-name: crownlandsUiTabFade;
}

html[data-animation-mode="reduced"] :is(
  .citadel-assault-countdown.imminent,
  .paths .army-route-flow,
  .harvest-bonus-node,
  .city-node.crownlands-vfx-target--city-attack,
  .city-node.selected .castle-art,
  .city-node.targeted .city-ring,
  .city-node.attackable .city-ring,
  .city-node.supportable .city-ring,
  .city-node.scout-nearby-target .city-ring,
  .city-node.regroup-target .city-ring,
  .daily-login-reward-btn.attention,
  .incoming-attack-btn,
  .outgoing-attack-btn
) {
  animation: none !important;
}

html[data-animation-mode="reduced"] .harvest-bonus-node::after {
  animation: none !important;
}

html[data-animation-mode="off"] :is(.crownlands-vfx, .crownlands-map-transition) {
  display: none !important;
}

html[data-animation-mode="off"] .map-transition-stage.is-transitioning {
  opacity: 1;
  transform: none;
  animation: none !important;
  will-change: auto;
}

html[data-animation-mode="off"] :is(
  .modal,
  .modal > .modal-card,
  .level-up-reward-modal .level-up-reward-card,
  .profile-screen,
  .commander-panel,
  .animation-mode-option
) {
  transition: none !important;
}

html[data-animation-mode="off"] .modal::backdrop {
  transition: none !important;
}

html[data-animation-mode="off"] :is(
  .loading-wheel-ring,
  .loading-wheel-crown,
  .server-queue-spinner,
  .citadel-assault-countdown.imminent,
  .paths .army-route-flow,
  .harvest-bonus-node,
  .camp-reward-spinner,
  .city-node.crownlands-vfx-target--city-attack,
  .city-node.selected .castle-art,
  .city-node.targeted .city-ring,
  .city-node.attackable .city-ring,
  .city-node.supportable .city-ring,
  .city-node.scout-nearby-target .city-ring,
  .city-node.regroup-target .city-ring,
  .wheel-scout-nearby.armed,
  .wheel-regroup.armed,
  .city-wheel-action.busy .wheel-icon,
  .daily-login-reward-btn.attention,
  .incoming-attack-btn,
  .outgoing-attack-btn,
  .ui-tab-entering,
  .is-tab-entering,
  [data-ui-transition="tab"].is-entering
) {
  animation: none !important;
}

html[data-animation-mode="off"] .harvest-bonus-node::after {
  animation: none !important;
}

html[data-animation-mode="off"] .profile-screen.open > :is(.profile-view, .profile-skills-view, .profile-settings-view, .clan-view, .flag-editor-view):not([hidden]) {
  animation: none !important;
}

html[data-animation-mode="full"] .level-up-reward-modal .level-up-reward-card {
  transition: transform var(--motion-ui-open) ease, opacity var(--motion-ui-close) ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-animation-mode]) :is(.crownlands-vfx__part--mist, .crownlands-vfx__part--fire, .crownlands-vfx__particle--smoke, .crownlands-vfx__particle--ember) {
    display: none;
  }

  html:not([data-animation-mode]) :is(.modal:not(.level-up-reward-modal) > .modal-card, .commander-panel) {
    transform: none;
  }

  html:not([data-animation-mode]) .profile-screen,
  html:not([data-animation-mode]) .profile-screen.open {
    transform: translate3d(-50%, -50%, 0);
  }

  html:not([data-animation-mode]) .profile-screen.open > :is(.profile-view, .profile-skills-view, .profile-settings-view, .clan-view, .flag-editor-view):not([hidden]),
  html:not([data-animation-mode]) :is(.ui-tab-entering, .is-tab-entering, [data-ui-transition="tab"].is-entering) {
    animation-name: crownlandsUiTabFade;
  }

  html:not([data-animation-mode]) :is(
    .citadel-assault-countdown.imminent,
    .paths .army-route-flow,
    .harvest-bonus-node,
    .city-node.crownlands-vfx-target--city-attack,
    .city-node.selected .castle-art,
    .city-node.targeted .city-ring,
    .city-node.attackable .city-ring,
    .city-node.supportable .city-ring,
    .city-node.scout-nearby-target .city-ring,
    .city-node.regroup-target .city-ring,
    .daily-login-reward-btn.attention,
    .incoming-attack-btn,
    .outgoing-attack-btn
  ) {
    animation: none !important;
  }

  html:not([data-animation-mode]) .harvest-bonus-node::after {
    animation: none !important;
  }
}

/* Realm Activity is a click-through herald layer, never a modal. */
.realm-announcement,
.realm-announcement * {
  pointer-events: none !important;
  touch-action: none;
  user-select: none;
}

.realm-announcement {
  position: absolute;
  z-index: 260;
  top: max(calc(env(safe-area-inset-top, 0px) + 88px), 11vh);
  left: 50%;
  width: min(620px, calc(100% - 28px));
  opacity: 0;
  transform: translate3d(-50%, -18px, 0) scale(.97);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(.2, .8, .2, 1);
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .58));
}

.realm-announcement.is-visible {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
}

.realm-announcement-banner {
  position: relative;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 102px;
  padding: 12px 28px 12px 20px;
  overflow: hidden;
  color: #251506;
  background:
    linear-gradient(90deg, rgba(86, 44, 13, .2), transparent 16% 84%, rgba(86, 44, 13, .2)),
    linear-gradient(180deg, #f5df9a, #d7a84d 58%, #b77925);
  border: 3px solid #6d3a11;
  border-radius: 8px 22px 8px 22px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 246, 191, .7),
    inset 0 -12px 22px rgba(91, 43, 7, .18),
    0 0 0 2px rgba(28, 13, 4, .58);
}

.realm-announcement-banner::before,
.realm-announcement-banner::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 8px;
  border: solid rgba(91, 43, 7, .56);
  border-width: 1px 0;
}

.realm-announcement-banner::before { left: 7px; }
.realm-announcement-banner::after { right: 7px; }

.realm-announcement-icon {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 4px 3px rgba(42, 20, 3, .42));
}

.realm-announcement-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
  min-width: 0;
  text-align: center;
}

.realm-announcement-copy strong {
  color: #4d2105;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 3.4vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: .055em;
  text-shadow: 0 1px rgba(255, 244, 187, .8);
}

.realm-announcement-copy span {
  overflow-wrap: anywhere;
  color: #2b1809;
  font-size: clamp(.9rem, 2.4vw, 1.08rem);
  font-weight: 900;
}

.realm-announcement.citadel .realm-announcement-banner {
  color: #fff2bd;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 236, 139, .34), transparent 48%),
    linear-gradient(180deg, #463311, #17170f 72%, #080b0c);
  border-color: #e2b84f;
  box-shadow:
    inset 0 0 0 2px rgba(255, 224, 118, .34),
    inset 0 0 32px rgba(211, 156, 35, .28),
    0 0 0 2px rgba(69, 41, 5, .8),
    0 0 28px rgba(231, 180, 53, .34);
}

.realm-announcement.citadel .realm-announcement-copy strong {
  color: #ffe59a;
  text-shadow: 0 2px #170d02, 0 0 14px rgba(255, 203, 76, .48);
}

.realm-announcement.citadel .realm-announcement-copy span {
  color: #fff4cf;
  text-shadow: 0 2px #090704;
}

.realm-activity-card {
  display: grid;
  gap: .75rem;
  padding: .85rem;
  border: 2px solid rgba(219, 177, 83, .62);
  border-radius: 14px;
  color: #f5ead5;
  background:
    linear-gradient(135deg, rgba(123, 72, 23, .16), transparent 42%),
    rgba(4, 15, 27, .86);
  box-shadow: inset 0 0 0 1px rgba(255, 241, 187, .08);
}

.realm-activity-card.citadel {
  border-color: #e0b54a;
  background:
    radial-gradient(circle at 50% 0, rgba(224, 181, 74, .18), transparent 42%),
    linear-gradient(180deg, rgba(31, 27, 17, .96), rgba(5, 16, 28, .94));
}

.realm-activity-card-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: .7rem;
}

.realm-activity-card-head img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .5));
}

.realm-activity-card-head > div {
  display: grid;
  gap: .15rem;
  min-width: 0;
}

.realm-activity-card-head strong {
  color: #ffe3a0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 3vw, 1.35rem);
  letter-spacing: .035em;
  text-shadow: 0 2px #080706;
}

.realm-activity-age {
  color: rgba(245, 234, 213, .72);
  font-size: .84rem;
  font-weight: 800;
}

.realm-activity-proclamation {
  display: grid;
  gap: .42rem;
  padding: .75rem;
  border: 1px solid rgba(224, 181, 74, .24);
  border-radius: 10px;
  background: rgba(3, 11, 20, .46);
}

.realm-activity-proclamation p {
  margin: 0;
  line-height: 1.45;
}

.realm-activity-herald,
.realm-activity-closing {
  color: #ffda82;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
}

.realm-activity-proclamation .player-name-link,
.realm-activity-proclamation .clan-name-link {
  display: inline;
  min-height: 0;
  padding: 0;
  color: #9ed6ff;
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 950;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.realm-activity-proclamation .clan-name-link { color: #ffe08b; }

.realm-activity-card-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr) auto;
  align-items: center;
  gap: .55rem;
}

.realm-activity-card-foot span {
  display: grid;
  gap: .08rem;
  min-width: 0;
  overflow-wrap: anywhere;
  color: rgba(245, 234, 213, .8);
  font-size: .88rem;
}

.realm-activity-card-foot b {
  color: #fff;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.realm-activity-location-btn {
  min-height: 42px;
  padding: 0 .85rem;
  border: 1px solid rgba(255, 245, 190, .62);
  border-radius: 10px;
  color: #211304;
  background: linear-gradient(#ffe9a0, #e7a638);
  font-weight: 950;
  white-space: nowrap;
}

html[data-animation-mode="off"] .realm-announcement {
  transition: none !important;
}

@media (max-width: 760px) {
  .realm-announcement {
    top: max(calc(env(safe-area-inset-top, 0px) + 76px), 10vh);
    width: min(94%, 520px);
  }

  .realm-announcement-banner {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 84px;
    gap: 8px;
    padding: 9px 18px 9px 14px;
  }

  .realm-announcement-icon {
    width: 56px;
    height: 56px;
  }

  .battle-report-toolbar {
    align-items: flex-start;
    flex-direction: column;
    padding-right: 2rem;
  }

  .battle-report-filters button {
    min-height: 34px;
    padding: 0 .5rem;
    font-size: .82rem;
  }

  .realm-activity-card {
    padding: .65rem;
  }

  .realm-activity-card-foot {
    grid-template-columns: 1fr 1fr;
  }

  .realm-activity-location-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-animation-mode]) .realm-announcement {
    transform: translate3d(-50%, 0, 0);
    transition: opacity 160ms linear;
  }
}