: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;
}

* { 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/game-menu-background.jpg?v=20260702-login-page") 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);
}
.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: 36px;
  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 {
  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;
}

@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: radial-gradient(circle at center, rgba(3, 15, 27, .58) 0%, rgba(3, 15, 27, .32) 24%, rgba(3, 15, 27, .08) 54%, transparent 72%);
  pointer-events: none;
}
.map-frame.map-switching .map-loading-overlay {
  display: grid;
}
.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));
}
.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;
}
.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; }
@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)); } }
.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; }
.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 {
  width: 88px;
  height: 88px;
  border: 1px solid rgba(246, 190, 82, .46);
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
  object-fit: cover;
}
.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 {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.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 {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.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 {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.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;
}
.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-report-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  align-items: start;
}
.battle-participant-card,
.battle-defender-column,
.battle-formula-explanation {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  background: rgba(4, 15, 27, .68);
}
.battle-participant-card {
  display: grid;
  gap: .62rem;
  padding: .78rem;
}
.battle-participant-card > h3,
.battle-formula-explanation > h3,
.battle-reinforcement-list > h4 {
  margin: 0;
  color: #ffe29a;
}
.battle-primary-participant.attacker {
  border-top: 3px solid #d46a4d;
}
.battle-primary-participant.defender {
  border-top: 3px solid #72b6df;
}
.battle-defender-column {
  display: grid;
  gap: .58rem;
  padding: .58rem;
}
.battle-defender-column > .battle-participant-card {
  border: 0;
  padding: .2rem;
  background: transparent;
}
.battle-participant-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .55rem;
  align-items: center;
  min-width: 0;
}
.battle-participant-identity > div {
  display: grid;
  gap: .08rem;
  min-width: 0;
}
.battle-participant-identity strong,
.battle-participant-identity small {
  min-width: 0;
}
.battle-participant-identity small {
  color: rgba(246,239,228,.68);
  font-size: .69rem;
}
.battle-participant-identity .player-name-link {
  max-width: 100%;
}
.battle-primary-clan {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-self: stretch;
  gap: .5rem;
  min-height: 48px;
  padding: .34rem .5rem;
  color: #f8e8bd;
  text-align: left;
  border: 1px solid rgba(211,161,63,.32);
  border-radius: 10px;
  background: rgba(211,161,63,.1);
}
.battle-primary-clan > span {
  display: grid;
  min-width: 0;
}
.battle-primary-clan small {
  overflow: hidden;
  color: #d6c9ad;
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.battle-participant-metrics,
.battle-formula-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .38rem;
}
.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-reinforcement-list {
  display: grid;
  gap: .42rem;
}
.battle-reinforcement-list > h4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .82rem;
}
.battle-reinforcement-list > h4 span {
  color: #9dcce4;
}
.battle-reinforcement-row {
  display: grid;
  gap: .45rem;
  padding: .55rem;
  border: 1px solid rgba(114,182,223,.2);
  border-radius: 10px;
  background: rgba(17,67,95,.34);
}
.battle-reinforcement-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .28rem;
}
.battle-reinforcement-stats > span {
  min-width: 0;
}
.battle-reinforcement-stats small,
.battle-reinforcement-stats strong {
  display: block;
  overflow-wrap: anywhere;
}
.battle-reinforcement-stats small {
  color: #9dcce4;
  font-size: .58rem;
}
.battle-reinforcement-stats strong {
  margin-top: .06rem;
  color: #f6efe4;
  font-size: .68rem;
}
.battle-no-reinforcements {
  margin: 0;
  padding: .55rem;
  color: rgba(246,239,228,.65);
  font-size: .72rem;
  text-align: center;
}
.battle-formula-explanation {
  display: grid;
  gap: .6rem;
  padding: .75rem;
}
.battle-formula-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.battle-viewer-rewards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .38rem;
  padding-top: .55rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.battle-formula-explanation > p {
  margin: 0;
  color: rgba(246,239,228,.75);
  font-size: .76rem;
}

.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-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-report-comparison {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .38rem;
  }
  .battle-participant-card,
  .battle-defender-column,
  .battle-formula-explanation {
    border-radius: 10px;
  }
  .battle-participant-card,
  .battle-defender-column {
    padding: .42rem;
  }
  .battle-participant-identity {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: .34rem;
  }
  .battle-participant-identity .battle-participant-flag {
    width: 32px;
    height: 29px;
  }
  .battle-participant-identity .battle-participant-flag .flag-symbol {
    font-size: .82rem;
  }
  .battle-primary-clan {
    grid-template-columns: 31px minmax(0, 1fr);
    gap: .3rem;
    min-height: 40px;
    padding: .25rem .3rem;
  }
  .battle-primary-clan .clan-shield-size-mini {
    width: 31px;
    height: 35px;
  }
  .battle-participant-metrics,
  .battle-formula-grid,
  .battle-viewer-rewards {
    grid-template-columns: 1fr;
  }
  .battle-participant-metric {
    padding: .35rem;
  }
  .battle-participant-metric > span,
  .battle-reinforcement-stats small {
    font-size: .54rem;
  }
  .battle-participant-metric > strong {
    font-size: .69rem;
  }
  .battle-participant-metric > small,
  .battle-reinforcement-stats strong {
    font-size: .56rem;
  }
  .battle-reinforcement-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .leaderboard-modal.modal {
    width: min(560px, calc(100vw - 1rem));
  }
  .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);
}
.daily-login-reward-modal.modal {
  width: min(980px, calc(100% - 1rem));
}
.daily-login-reward-modal .modal-card {
  background:
    radial-gradient(circle at 50% -15%, rgba(242, 197, 75, .2), transparent 42%),
    linear-gradient(180deg, #102f4c, #0b1b2e 72%, #08111d);
  border-color: rgba(255, 221, 128, .62);
}
.daily-reward-panel {
  display: grid;
  gap: .72rem;
}
.daily-reward-hero {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  padding: .72rem;
  border: 1px solid rgba(255, 224, 132, .34);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(25, 85, 126, .88), rgba(6, 28, 52, .92));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.daily-reward-hero > img {
  width: 76px;
  height: 76px;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.38));
}
.daily-reward-hero span {
  color: #9edcff;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.daily-reward-hero h3 {
  margin: .08rem 0 .18rem;
  color: #fff1a9;
  font-size: 1.3rem;
}
.daily-reward-hero p {
  margin: 0;
  color: #d7e9f6;
  font-size: .78rem;
}
.daily-reward-status-row,
.daily-reward-receipt {
  display: flex;
  justify-content: space-between;
  gap: .7rem;
  align-items: center;
  padding: .55rem .68rem;
  border-radius: 8px;
}
.daily-reward-status-row {
  color: #d9efff;
  background: rgba(6, 25, 45, .82);
  border: 1px solid rgba(139, 207, 255, .22);
  font-size: .75rem;
}
.daily-reward-status-row span {
  color: #9ed5ff;
  text-align: right;
}
.daily-reward-receipt {
  color: #fff6c8;
  background: rgba(38, 92, 53, .62);
  border: 1px solid rgba(152, 221, 126, .42);
  font-size: .78rem;
}
.daily-reward-receipt span,
.daily-reward-receipt strong {
  display: block;
}
.daily-reward-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .48rem;
}
.daily-reward-card {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 112px;
  aspect-ratio: 1.12;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .3rem;
  padding: .45rem;
  overflow: hidden;
  border: 1px solid rgba(142, 193, 230, .18);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(17, 49, 76, .92), rgba(5, 19, 34, .94));
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.16);
  color: inherit;
  font: inherit;
  text-align: left;
}
.daily-reward-card.claimed {
  border-color: rgba(126, 191, 108, .35);
  background: linear-gradient(180deg, rgba(37, 79, 55, .78), rgba(8, 33, 27, .9));
}
.daily-reward-card.claimed .daily-reward-card-icon,
.daily-reward-card.claimed .daily-reward-card-label {
  opacity: .48;
}
.daily-reward-card.available {
  border-color: rgba(255, 224, 111, .84);
  background: linear-gradient(180deg, rgba(80, 69, 23, .84), rgba(33, 29, 10, .94));
  box-shadow: 0 0 18px rgba(255, 209, 67, .3), inset 0 0 0 1px rgba(255, 245, 179, .2);
}
.daily-reward-card.queued {
  border-color: rgba(93, 190, 255, .72);
  background: linear-gradient(180deg, rgba(29, 72, 105, .92), rgba(8, 28, 49, .96));
  box-shadow: inset 0 0 0 1px rgba(144, 216, 255, .14);
}
button.daily-reward-card.available {
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}
button.daily-reward-card.available:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #fff2a2;
  box-shadow: 0 7px 18px rgba(255, 209, 67, .22), inset 0 0 0 1px rgba(255, 245, 179, .2);
  filter: brightness(1.08);
}
button.daily-reward-card.available:active:not(:disabled) {
  transform: translateY(0);
}
button.daily-reward-card.available:focus-visible {
  outline: 3px solid #9ed5ff;
  outline-offset: 2px;
}
button.daily-reward-card.available:disabled {
  cursor: wait;
  opacity: .76;
}
.daily-reward-card.next {
  border-color: rgba(133, 195, 239, .46);
}
.daily-reward-card.locked {
  opacity: .55;
}
.daily-reward-card-head {
  display: flex;
  justify-content: space-between;
  gap: .3rem;
  align-items: baseline;
}
.daily-reward-card-head strong {
  color: #fff0a4;
  font-size: .74rem;
}
.daily-reward-card-head span {
  color: #9bcbe9;
  font-size: .52rem;
  font-weight: 900;
  text-transform: uppercase;
}
.daily-reward-card-icon {
  width: min(62px, 72%);
  height: min(62px, 72%);
  min-height: 0;
  place-self: center;
  object-fit: contain;
  border-radius: 6px;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.42));
}
.daily-reward-card-label {
  min-width: 0;
  width: 100%;
  color: #fff7cf;
  font-size: .64rem;
  line-height: 1.08;
  text-align: center;
  overflow-wrap: anywhere;
}
.daily-reward-check {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid #caffad;
  border-radius: 50%;
  color: #ecffe0;
  background: rgba(24, 106, 48, .9);
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  font-size: 1.25rem;
  font-weight: 1000;
}
.daily-reward-actions {
  display: grid;
  justify-items: stretch;
  gap: .38rem;
}
.daily-reward-claim-btn,
.daily-reward-error button {
  min-height: 46px;
  padding: .6rem .8rem;
  border-radius: 8px;
  color: #201300;
  background: linear-gradient(#ffe785, #d9931f);
  border: 1px solid #fff0ad;
  font-weight: 1000;
  box-shadow: inset 0 -4px 0 rgba(92, 50, 5, .2), 0 8px 18px rgba(0,0,0,.24);
}
.daily-reward-claim-btn:disabled {
  color: #a9b4bf;
  background: rgba(56, 72, 88, .72);
  border-color: rgba(255,255,255,.12);
  box-shadow: none;
}
.daily-reward-actions small {
  color: #9db8cc;
  text-align: center;
}
.daily-reward-loading,
.daily-reward-error {
  min-height: 180px;
  display: grid;
  place-items: center;
  gap: .65rem;
  padding: 1rem;
  text-align: center;
}
@media (max-width: 700px) {
  .daily-reward-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .daily-reward-card {
    min-height: 102px;
  }
}
@media (max-width: 520px) {
  .daily-login-reward-modal.modal {
    width: calc(100% - .55rem);
  }
  .daily-login-reward-modal .modal-card {
    padding: .68rem;
  }
  .daily-reward-hero {
    grid-template-columns: 58px minmax(0, 1fr);
    padding: .55rem;
  }
  .daily-reward-hero > img {
    width: 58px;
    height: 58px;
  }
  .daily-reward-hero h3 {
    font-size: 1rem;
  }
  .daily-reward-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .daily-reward-card {
    min-height: 104px;
  }
  .daily-reward-card-icon {
    width: min(54px, 70%);
    height: min(54px, 70%);
  }
  .daily-reward-status-row,
  .daily-reward-receipt {
    align-items: flex-start;
    flex-direction: column;
    gap: .2rem;
  }
  .daily-reward-status-row span {
    text-align: left;
  }
}
.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;
  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-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;
}
.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/profile-hud-frame.png?v=20260702-profile-frame") 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 #fff4bd;
  border-radius: 50%;
  color: #271500;
  background: linear-gradient(#ffe775, #e99b20);
  box-shadow: 0 3px 8px rgba(0,0,0,.48), 0 0 12px rgba(255, 219, 88, .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-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-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 { margin-top: .8rem; border-top: 1px solid rgba(124,211,149,.25); }
.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; }
.skill-preset-panel {
  display: grid;
  gap: .45rem;
  margin-bottom: .7rem;
}
.skill-preset-tabs {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, 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(4, minmax(0, 1fr));
  gap: .3rem;
}
.skill-preset-allocation > span {
  min-width: 0;
  display: grid;
  gap: .08rem;
  padding: .34rem .42rem;
  border: 1px solid rgba(158,213,255,.14);
  border-radius: 6px;
  background: rgba(5,23,38,.65);
}
.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(2, minmax(0, 1fr));
  gap: .5rem .8rem;
}
.profile-skill-list .skill-row {
  min-width: 0;
  padding: .58rem .68rem;
  border: 1px solid rgba(158,213,255,.15);
  border-radius: 8px;
  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;
}
.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 > span { 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; }
}

.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;
  }
}
.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-allocation {
    grid-template-columns: repeat(2, 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;
  }
}