:root {
  --bg: #090d14;
  --bg-2: #0e1520;
  --surface: #121b28;
  --surface-2: #172334;
  --surface-3: #1d2b3f;
  --surface-soft: rgba(255, 255, 255, .035);
  --surface-strong: rgba(255, 255, 255, .072);
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .14);
  --text: #f1f6ff;
  --muted: rgba(241, 246, 255, .68);
  --muted-2: rgba(241, 246, 255, .46);
  --blue: #77a7ff;
  --blue-2: rgba(119, 167, 255, .18);
  --green: #50e3a4;
  --green-2: rgba(80, 227, 164, .16);
  --red: #ff7373;
  --red-2: rgba(255, 115, 115, .15);
  --gold: #ffd36e;
  --gold-2: rgba(255, 211, 110, .16);
  --violet: #b390ff;
  --shadow: 0 18px 50px rgba(0, 0, 0, .36);
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, .24);
  --radius: 8px;
  --radius-lg: 12px;
  --topbar-h: 68px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  background:
    linear-gradient(180deg, rgba(25, 40, 60, .75) 0%, rgba(9, 13, 20, 0) 240px),
    radial-gradient(900px 500px at 70% -10%, rgba(119, 167, 255, .13), transparent 60%),
    #090d14;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

input,
select {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .052);
  color: var(--text);
  border-radius: var(--radius);
  padding: 11px 12px;
  outline: none;
}

select option {
  background: #111827;
  color: #fff;
}

input:focus,
select:focus {
  border-color: rgba(119, 167, 255, .55);
  box-shadow: 0 0 0 3px rgba(119, 167, 255, .12);
}

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

h2 {
  font-size: 22px;
  line-height: 1.12;
}

h3 {
  font-size: 15px;
  line-height: 1.2;
}

p {
  color: var(--muted-2);
  font-size: 13px;
  margin-top: 4px;
}

b {
  font-weight: 800;
}

.hidden {
  display: none !important;
}

.loadingOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(12, 20, 32, .98), rgba(5, 8, 13, .98)),
    #070a10;
}

.loadingCard {
  width: min(320px, calc(100vw - 36px));
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .045);
  box-shadow: var(--shadow);
  color: var(--text);
}

.loadingCrest {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(119, 167, 255, .34), rgba(80, 227, 164, .22));
  border: 1px solid rgba(255, 255, 255, .15);
  font-weight: 900;
}

.loadingCard span {
  color: var(--muted);
  font-size: 13px;
}

.loadingBar {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

.loadingBar i {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--green));
  animation: loadingSlide 1.1s ease-in-out infinite;
}

@keyframes loadingSlide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(250%); }
}

.app {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  min-height: var(--topbar-h);
  height: var(--topbar-h);
  display: grid;
  grid-template-columns: auto minmax(112px, 160px) minmax(0, 1fr) auto;
  grid-template-areas:
    "menu brand stats logout"
    "menu brand res logout";
  align-items: center;
  column-gap: 6px;
  row-gap: 3px;
  padding: 4px 8px;
  background: rgba(9, 13, 20, .78);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
  z-index: 20;
  overflow: hidden;
}

.brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.brandCrest,
.crest {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(119, 167, 255, .34), rgba(80, 227, 164, .18));
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: 13px;
  font-weight: 900;
  flex: 0 0 auto;
}

.brandName {
  font-weight: 900;
  font-size: 13px;
}

.brandSub {
  color: var(--muted-2);
  font-size: 11px;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topStats,
.resources {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.topStats {
  grid-area: stats;
}

.topStats::-webkit-scrollbar,
.resources::-webkit-scrollbar {
  display: none;
}

.resources {
  grid-area: res;
  justify-content: flex-start;
}

.notificationStrip {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .035);
  color: var(--muted);
  font-size: 12px;
}

.notificationStrip span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .045);
}

.notificationStrip .tutorialAlert {
  color: #fff6ce;
  border-color: rgba(255, 211, 110, .58);
  background: rgba(255, 211, 110, .18);
  animation: tutorialBlink 1s ease-in-out infinite;
}

.attackWarning {
  position: fixed;
  top: calc(var(--topbar-h) + 14px);
  left: 50%;
  z-index: 40;
  transform: translateX(-50%) translateY(-8px);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(520px, calc(100vw - 24px));
  padding: 10px 13px;
  border: 1px solid rgba(255, 115, 115, .54);
  border-radius: var(--radius);
  background: rgba(52, 12, 16, .92);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .35);
  color: #fff3f3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}

.attackWarning.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.attackWarning span {
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nextActionBar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 211, 110, .22);
  background:
    linear-gradient(90deg, rgba(255, 211, 110, .14), rgba(80, 227, 164, .075)),
    rgba(12, 18, 28, .92);
}

.nextActionButtons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nextActionBar span {
  display: block;
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.nextActionBar b,
.nextActionBar small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nextActionBar small {
  color: var(--muted);
  margin-top: 2px;
}

.btn.quiet {
  background: rgba(255, 255, 255, .035);
  color: var(--muted);
}

.miniSkip {
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(9, 13, 20, .45);
  color: inherit;
  border-radius: var(--radius);
  padding: 3px 7px;
  cursor: pointer;
}

@keyframes tutorialBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 211, 110, .28); }
  50% { box-shadow: 0 0 0 5px rgba(255, 211, 110, .10); }
}

.resChip.gems {
  border-color: rgba(255, 211, 110, .32);
  background: var(--gold-2);
}

.resChip.vipChip {
  border-color: rgba(119, 167, 255, .42);
  background: rgba(119, 167, 255, .14);
}

.resChip.sevenDayChip {
  position: relative;
  color: #fff0bd;
  border-color: rgba(255, 211, 110, .45);
  background: rgba(255, 211, 110, .14);
}

.resChip.sevenDayChip.ready::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #ff5b5b;
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 0 0 3px rgba(255, 91, 91, .16);
}

.resChip.recommendedChip {
  color: #fff4ca;
  border-color: rgba(255, 211, 110, .5);
  background: rgba(255, 211, 110, .16);
  animation: tutorialBlink 1.2s ease-in-out infinite;
}

.shieldChip {
  border-color: rgba(80, 227, 164, .26);
  background: var(--green-2);
}

.chip,
.resChip,
.miniPanel,
.tag {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-soft);
  white-space: nowrap;
}

.chip,
.resChip {
  flex: 0 0 auto;
  min-height: 24px;
  font-size: 11px;
  padding: 2px 5px;
}

.chip b,
.resChip b,
.statCard b {
  font-variant-numeric: tabular-nums;
}

.chip span,
.miniPanel span {
  color: var(--muted-2);
  font-size: 8px;
}

.resChip {
  min-width: auto;
  justify-content: space-between;
  cursor: pointer;
}

button.resChip {
  color: var(--text);
  font: inherit;
}

.resChip:focus-visible {
  outline: 2px solid rgba(119, 167, 255, .7);
  outline-offset: 2px;
}

.resChip.food {
  border-color: rgba(255, 211, 110, .24);
}

.resChip.wood {
  border-color: rgba(80, 227, 164, .24);
}

.resChip.stone {
  border-color: rgba(210, 220, 230, .18);
}

.resChip.gold {
  border-color: rgba(255, 211, 110, .28);
}

.tag {
  min-height: 28px;
  font-size: 12px;
  color: var(--muted);
}

.tag.good {
  color: #caffe8;
  border-color: rgba(80, 227, 164, .34);
  background: var(--green-2);
}

.tag.bad {
  color: #ffd6d6;
  border-color: rgba(255, 115, 115, .34);
  background: var(--red-2);
}

.tag.gold {
  color: #fff0bd;
  border-color: rgba(255, 211, 110, .34);
  background: var(--gold-2);
}

.iconBtn,
.btn,
.toolBtn,
.segBtn {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .055);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, opacity .14s ease, box-shadow .14s ease;
  user-select: none;
}

.iconBtn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  font-size: 18px;
}

.btn:hover,
.iconBtn:hover,
.toolBtn:hover,
.segBtn:hover {
  background: rgba(255, 255, 255, .09);
  border-color: var(--line-2);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .025);
}

.btn:active,
.iconBtn:active,
.toolBtn:active,
.segBtn:active {
  transform: translateY(1px);
}

.btn.primary,
.segBtn.active,
.toolBtn.active {
  color: #f8fbff;
  background: linear-gradient(180deg, rgba(119, 167, 255, .34), rgba(119, 167, 255, .16));
  border-color: rgba(119, 167, 255, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.btn.danger {
  color: #ffe0e0;
  border-color: rgba(255, 115, 115, .34);
  background: rgba(255, 115, 115, .10);
}

.btn.block {
  width: 100%;
}

.shell {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 360px;
}

.sideNav {
  min-height: 0;
  overflow: auto;
  padding: 9px;
  border-right: 1px solid var(--line);
  background: rgba(8, 13, 20, .82);
}

.navItem {
  width: 100%;
  min-height: 58px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  gap: 4px;
  cursor: pointer;
  margin-bottom: 6px;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.navItem span {
  font-size: 20px;
  line-height: 1;
}

.navItem b {
  font-size: 11px;
}

.navItem.active {
  color: var(--text);
  background: linear-gradient(180deg, rgba(119, 167, 255, .18), rgba(80, 227, 164, .06));
  border-color: rgba(119, 167, 255, .34);
  box-shadow: inset 3px 0 0 rgba(80, 227, 164, .72);
}

.content {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 16px;
}

.panel {
  display: none;
  max-width: 1500px;
  margin: 0 auto;
}

.panel.active {
  display: block;
}

.panelHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .04);
  flex-wrap: wrap;
}

.subTabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 7px;
  margin: -2px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .035);
}

.subTab {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-weight: 800;
}

.subTab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .06);
}

.subTab.active {
  color: #f8fbff;
  border-color: rgba(80, 227, 164, .32);
  background: linear-gradient(180deg, rgba(80, 227, 164, .18), rgba(119, 167, 255, .09));
}

.allianceTabs {
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(12px);
}

.cityTabs {
  position: sticky;
  top: 0;
  z-index: 4;
  backdrop-filter: blur(12px);
}

.segBtn {
  min-height: 36px;
  padding: 8px 11px;
  border-color: transparent;
  background: transparent;
}

.surface,
.mapWrap {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, rgba(18, 27, 40, .96), rgba(12, 18, 28, .94));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  margin-bottom: 14px;
}

.surface {
  padding: 14px;
}

.dangerZone {
  border-color: rgba(255, 115, 115, .28);
  background:
    linear-gradient(180deg, rgba(255, 115, 115, .075), rgba(255, 255, 255, .03)),
    var(--surface);
}

.surfaceHead {
  min-height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 13px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.mapWrap {
  position: relative;
  overflow: hidden;
  overscroll-behavior: contain;
}

.mapToolbar {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}

.avaMapScoreboard {
  position: absolute;
  top: 62px;
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  max-width: calc(100% - 24px);
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  background: rgba(7, 10, 15, .78);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  pointer-events: none;
}

.avaScorePill {
  display: grid;
  gap: 1px;
  min-width: 76px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .065);
  white-space: nowrap;
}

.avaScorePill span {
  color: var(--muted-2);
  font-size: 10px;
}

.avaScorePill b {
  font-size: 13px;
}

.toolbarGroup {
  display: flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(9, 13, 20, .72);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  pointer-events: auto;
}

.toolBtn {
  min-width: 40px;
  height: 38px;
  padding: 0 12px;
  touch-action: manipulation;
}

.wideTool {
  min-width: 76px;
}

#mapCanvas {
  width: 100%;
  height: clamp(300px, 48vh, 560px);
  min-height: 300px;
  display: block;
  background:
    linear-gradient(180deg, rgba(10, 16, 25, .86), rgba(5, 8, 13, .9)),
    #080b10;
  touch-action: none;
  user-select: none;
}

.mapFooter {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  pointer-events: none;
}

.miniPanel {
  min-width: 118px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius);
  background: rgba(9, 13, 20, .72);
  backdrop-filter: blur(10px);
}

.miniPanel span {
  display: block;
  color: var(--muted-2);
  font-size: 11px;
}

.miniPanel b {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.twoCol,
.threeCol {
  display: grid;
  gap: 14px;
}

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

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

.statsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.smallStats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0;
}

.socialLinks {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.socialBtn {
  min-width: 120px;
  justify-content: center;
}

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

.toggleRow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
}

.toggleRow input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #50e3a4;
}

.toggleRow b,
.toggleRow small {
  display: block;
}

.toggleRow small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}

.mailItem.unread {
  border-color: rgba(255, 211, 110, .26);
  background: rgba(255, 211, 110, .07);
}

.reportItem {
  border-color: rgba(255, 115, 115, .18);
}

.statCard,
.unitCard,
.itemCard,
.researchCard,
.buildCard,
.leaderCard,
.listItem,
.questCard {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .044);
  border-radius: var(--radius);
}

.unitCard,
.itemCard,
.researchCard,
.buildCard,
.leaderCard,
.listItem,
.questCard,
.marchItem {
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.itemCard:hover,
.researchCard:hover,
.buildCard:hover,
.leaderCard:hover,
.questCard:hover,
.listItem:hover,
.marchItem:hover {
  border-color: rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .058);
}

.statCard {
  padding: 13px;
  min-height: 74px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    rgba(255, 255, 255, .044);
}

.statCard span {
  display: block;
  color: var(--muted-2);
  font-size: 12px;
  margin-bottom: 6px;
}

.statCard b {
  display: block;
  font-size: 21px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.levelRing {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(119, 167, 255, .34);
  background: rgba(119, 167, 255, .12);
}

.levelRing span {
  font-size: 10px;
  color: var(--muted-2);
}

.levelRing b {
  font-size: 24px;
  margin-top: -16px;
}

.unitGrid,
.queueList,
.speedupList,
.list,
.chatBox {
  display: grid;
  gap: 9px;
}

.unitCard,
.listItem {
  padding: 11px;
}

.battleReportCard {
  display: grid;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(119, 167, 255, .055), rgba(255, 255, 255, .035)),
    rgba(255, 255, 255, .044);
}

.battleReportHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.battleReportHead span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

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

.battleReportGrid div {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, .12);
}

.battleReportGrid span,
.battleRewardLine b {
  display: block;
  color: var(--muted-2);
  font-size: 11px;
}

.battleReportGrid b {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.battleRewardLine {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(255, 211, 110, .18);
  border-radius: var(--radius);
  background: rgba(255, 211, 110, .06);
}

.battleRewardLine span {
  color: var(--text);
  line-height: 1.35;
}

.unitTop,
.queueTop,
.cardTop,
.listTop,
.questTop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.muted {
  color: var(--muted);
}

.muted2,
.hintLine,
.costLine {
  color: var(--muted-2);
  font-size: 12px;
  line-height: 1.45;
}

.infoBox {
  padding: 10px 12px;
  border: 1px solid rgba(255, 211, 110, .22);
  border-radius: var(--radius);
  background: rgba(255, 211, 110, .08);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.topGap {
  margin-top: 10px;
}

.formGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}

.quickMarchGrid {
  grid-template-columns: minmax(120px, .9fr) minmax(120px, 1fr) minmax(150px, auto) auto;
}

.quickMarchGrid .btn {
  min-width: 62px;
}

.sendMarchPanel {
  border-color: rgba(80, 227, 164, .18);
  background:
    linear-gradient(180deg, rgba(80, 227, 164, .055), rgba(255, 255, 255, .035)),
    rgba(255, 255, 255, .035);
}

.sendMarchPanel #quickMarchClass {
  display: none;
}

.marchClassTabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}

.marchClassBtn {
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius);
  color: var(--muted);
  background: rgba(255, 255, 255, .04);
  font-weight: 900;
  cursor: pointer;
}

.marchClassBtn::before {
  content: attr(data-march-class);
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 24px;
  margin-right: 6px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .08);
  color: var(--text);
  font-size: 10px;
  text-transform: uppercase;
}

.marchClassBtn.active {
  color: #eafff7;
  border-color: rgba(80, 227, 164, .42);
  background: rgba(80, 227, 164, .16);
}

.presetRow {
  display: flex;
  gap: 6px;
  align-items: center;
}

.presetRow .btn {
  min-width: 48px;
}

.quickMarchStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
}

.quickMarchStats > div {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .13);
}

.quickMarchStats span {
  display: block;
  color: var(--muted-2);
  font-size: 11px;
}

.quickMarchStats b {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

.warChestMini {
  min-width: 170px;
  gap: 3px;
}

.miniClaimBtn {
  border: 1px solid rgba(255, 211, 110, .45);
  background: rgba(255, 211, 110, .12);
  color: var(--text);
  border-radius: 7px;
  padding: 4px 8px;
  font-weight: 800;
  cursor: pointer;
}

.miniClaimBtn:disabled {
  opacity: .45;
  cursor: default;
}

.formGrid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.questCreateGrid {
  grid-template-columns: 160px repeat(4, minmax(0, 1fr)) auto;
}

.questCreateHelp {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 10px;
}

.questCreateHelp > div {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .035);
}

.questCreateHelp b,
.questCreateHelp span {
  display: block;
}

.questCreateHelp span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  margin-top: 2px;
}

.badText {
  color: #ffb6b6 !important;
}

#allianceJoinSurface .formGrid {
  grid-template-columns: minmax(150px, 1fr) minmax(90px, .45fr) auto auto;
}

.bankNote {
  align-self: center;
}

.chatControls {
  grid-template-columns: 150px minmax(0, 1fr) auto;
}

.cardsGrid,
.techGrid,
.leaderboardGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#avaLeaderboardGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.techGrid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.compactCards {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.researchCard,
.buildCard,
.itemCard,
.leaderCard,
.questCard {
  padding: 12px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.statMiniCard,
.infoCard {
  min-height: 108px;
}

.bundleCard {
  min-height: 150px;
}

.vipProgressBox {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .046);
  margin-top: 10px;
}

.vipModalBox {
  width: calc(100vw - 18px);
  height: calc(100vh - 18px);
  max-height: calc(100vh - 18px);
  overflow: auto;
  border-radius: var(--radius);
  padding: 20px;
}

.vipPreviewCard.activeVip {
  border-color: rgba(255, 211, 110, .48);
  background: rgba(255, 211, 110, .1);
}

.dailyLoginCard {
  min-height: 118px;
}

.dailyLoginCard.claimed {
  border-color: rgba(80, 227, 164, .28);
  background: rgba(80, 227, 164, .08);
}

.buffLine {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border-radius: var(--radius);
  background: rgba(80, 227, 164, .08);
  border: 1px solid rgba(80, 227, 164, .16);
  color: var(--muted);
  font-size: 12px;
}

.buffLine b {
  color: #caffe8;
}

.researchCard .btn,
.buildCard .btn,
.itemCard .btn,
.questCard .btn {
  margin-top: auto;
}

.progress {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .065);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
}

.progress > div {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(119, 167, 255, .7), rgba(80, 227, 164, .9));
  transition: width .2s linear;
}

.detailBox {
  min-height: 138px;
  color: var(--muted);
  line-height: 1.5;
}

.detailLine {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.detailLine:last-child {
  border-bottom: none;
}

.healCostCard {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid rgba(80, 227, 164, .18);
  border-radius: var(--radius);
  background: rgba(80, 227, 164, .055);
}

.healCostCard.empty {
  color: var(--muted);
  border-color: var(--line);
  background: rgba(255, 255, 255, .035);
}

.healCostCard .detailLine b {
  text-align: right;
  white-space: normal;
}

.commandDock {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(80, 227, 164, .035), transparent 180px),
    rgba(12, 18, 28, .88);
}

.dockHead {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.marchList {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.dockActions {
  padding: 12px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
}

.marchItem {
  padding: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .046);
  border-radius: var(--radius);
  margin-bottom: 9px;
  cursor: pointer;
}

.marchItem.active {
  border-color: rgba(119, 167, 255, .48);
  background: rgba(119, 167, 255, .14);
  box-shadow: inset 3px 0 0 rgba(119, 167, 255, .78);
}

.marchMiniActions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.marchMiniActions .btn {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 11px;
}

.marchMeta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  color: var(--muted-2);
  font-size: 12px;
}

.marchStatus {
  min-height: 24px;
  padding: 3px 8px;
  font-weight: 900;
}

.status-fight {
  color: #ffe3d8;
  border-color: rgba(255, 115, 115, .36);
  background: rgba(255, 115, 115, .14);
}

.status-gather {
  color: #caffe8;
  border-color: rgba(80, 227, 164, .36);
  background: rgba(80, 227, 164, .14);
}

.status-move {
  color: #dbe8ff;
  border-color: rgba(119, 167, 255, .36);
  background: rgba(119, 167, 255, .14);
}

.status-return {
  color: #fff0bd;
  border-color: rgba(255, 211, 110, .36);
  background: rgba(255, 211, 110, .13);
}

.status-garrison,
.status-idle {
  color: var(--muted);
}

.chatSurface {
  min-height: auto;
}

.chatStatusBar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}

.chatStatusBar > div,
.rankSummaryCard {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .04);
}

.chatStatusBar span,
.rankSummaryCard span {
  display: block;
  color: var(--muted-2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.chatStatusBar b,
.rankSummaryCard b {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
}

.chatBox {
  height: min(38vh, 340px);
  min-height: 220px;
  overflow: auto;
  margin-top: 12px;
  align-content: end;
}

.chatMsg {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .046);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.chatMsg.allianceMsg {
  border-color: rgba(80, 227, 164, .18);
  background: rgba(80, 227, 164, .055);
}

.chatMsg.avaMsg {
  border-color: rgba(255, 211, 110, .22);
  background: rgba(255, 211, 110, .06);
}

.chatMsg.mine {
  border-color: rgba(119, 167, 255, .22);
  background: rgba(119, 167, 255, .08);
}

.chatMeta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted-2);
  font-size: 12px;
  margin-bottom: 4px;
}

.chatText {
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.dmHeaderCard {
  padding: 11px;
  border: 1px solid rgba(119, 167, 255, .20);
  border-radius: var(--radius);
  background: rgba(119, 167, 255, .075);
}

.dmHeaderCard span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.dmMsg {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 10px;
}

.dmMsg.dmMine {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.dmMsg.dmMine .dmAvatar {
  order: 2;
}

.dmAvatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(119, 167, 255, .95), rgba(88, 221, 180, .85));
  color: #07111f;
  font-size: 12px;
  font-weight: 900;
}

.dmBubble {
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .052);
  border-radius: 8px;
  padding: 10px 12px;
}

.dmMine .dmBubble {
  border-color: rgba(119, 167, 255, .25);
  background: rgba(119, 167, 255, .10);
}

.dmBubble .chatMeta {
  justify-content: flex-start;
}

.dmBubble .chatText {
  font-size: 14px;
}

.otherAllianceMembers {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(0, 0, 0, .12);
}

.pulseWarn {
  animation: pulseWarn 1.15s ease-in-out infinite;
}

@keyframes pulseWarn {
  0%, 100% {
    box-shadow: 0 0 0 rgba(255, 104, 104, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(255, 104, 104, .16);
  }
}

.linkBtn {
  border: none;
  background: transparent;
  color: var(--blue);
  padding: 0;
  font-weight: 800;
  cursor: pointer;
}

.linkBtn:disabled {
  color: var(--muted-2);
  cursor: default;
}

.list {
  max-height: 560px;
  overflow: auto;
}

#tab-alliance .list {
  max-height: min(520px, 58vh);
}

#tab-alliance .techGrid,
#tab-alliance .cardsGrid {
  align-items: stretch;
}

#tab-alliance .twoCol:empty {
  display: none;
}

.leaderCard > .list {
  max-height: min(320px, 42vh);
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  scrollbar-width: thin;
}

.leaderSwitch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
}

.leaderSwitch button {
  min-height: 24px;
  padding: 3px 8px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.leaderSwitch button.active {
  color: #111827;
  background: var(--gold);
}

.rankHero {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 211, 110, .10), rgba(80, 227, 164, .055)),
    rgba(255, 255, 255, .035);
}

.eyebrow {
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.rankHero h3 {
  margin: 4px 0;
}

.rankHero p {
  margin: 0;
  color: var(--muted);
}

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

.rankSummaryCard small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.compactList {
  max-height: 180px;
}

.miniBtn {
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
}

.miniBtn.danger {
  border-color: rgba(255, 92, 92, .32);
  color: #ffd7d7;
  background: rgba(255, 92, 92, .10);
}

.compactWar {
  min-height: auto;
}

.infoBtn {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .055);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.miniInfoBtn {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.dangerSurface {
  border-color: rgba(255, 92, 92, .38);
  background: linear-gradient(180deg, rgba(255, 92, 92, .08), rgba(255, 255, 255, .035));
}

.specialGiftCard {
  border-color: rgba(96, 165, 250, .55);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, .18), 0 0 24px rgba(96, 165, 250, .16);
  animation: giftPulse 1.7s ease-in-out infinite;
}

@keyframes giftPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.14); }
}

.listItem .actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.emptyState {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 8px;
  place-items: start;
  min-height: 120px;
  padding: 16px;
  border: 1px dashed rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(119, 167, 255, .075), rgba(80, 227, 164, .035)),
    rgba(255, 255, 255, .035);
}

.emptyState::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(255, 211, 110, .82), rgba(80, 227, 164, .62));
}

.emptyState > * {
  position: relative;
}

.emptyState b {
  color: var(--text);
  font-size: 16px;
}

.emptyState span {
  max-width: 620px;
  color: var(--muted);
  line-height: 1.45;
}

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

.bankBreakdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.bankBreakdown .detailLine {
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .04);
}

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

.avaListGroup {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .035);
  border-radius: var(--radius);
}

.avaListGroup .list {
  max-height: 520px;
}

.selectedCard {
  border-color: rgba(250, 204, 21, .55);
  box-shadow: 0 0 0 1px rgba(250, 204, 21, .18), 0 10px 28px rgba(250, 204, 21, .08);
}

.fullSpan,
.inspectGroup {
  grid-column: 1 / -1;
}

.eventRankCard {
  grid-column: span 2;
}

.tutorialSurface {
  border-color: rgba(255, 211, 110, .22);
}

.tutorialNow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 211, 110, .18);
  border-radius: var(--radius);
  background: rgba(255, 211, 110, .07);
}

.tutorialActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tutorialProgress {
  margin-top: 10px;
  max-width: 420px;
}

.tutorialStepCard {
  min-height: 118px;
}

.tutorialStepCard.active {
  border-color: rgba(255, 211, 110, .38);
  background: rgba(255, 211, 110, .08);
}

.gemShopCard {
  border-color: rgba(255, 211, 110, .18);
}

.shopGrid {
  display: grid;
  gap: 12px;
}

.shopSection {
  display: grid;
  gap: 10px;
}

.buildSectionHeader {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 4px 2px 0;
}

.shopSectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .035);
}

.gemShopCard-buffs {
  border-color: rgba(255, 104, 104, .28);
}

.gemShopCard-teleports {
  border-color: rgba(119, 167, 255, .28);
}

.gemShopCard-protection {
  border-color: rgba(80, 227, 164, .26);
}

.gatherLine {
  color: rgba(80, 227, 164, .92);
}

.captainCard {
  border-color: rgba(120, 210, 255, .20);
}

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

.captainBadge {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  border: 1px solid rgba(120, 210, 255, .28);
  color: #e9fbff;
  background: linear-gradient(180deg, rgba(120, 210, 255, .18), rgba(119, 167, 255, .08));
  font-weight: 900;
  text-transform: uppercase;
}

.captainSkillBox {
  min-height: 54px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255, 255, 255, .035);
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
  line-height: 1.45;
}

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

.captainMetaGrid > div {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .12);
}

.captainMetaGrid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.captainMetaGrid b {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  margin-top: 2px;
  font-size: 13px;
}

.captainCard .btn {
  width: 100%;
  margin-top: 10px;
}

.vipAuraPreview {
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .035);
  padding: 10px;
}

.vipAuraDemo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.vipAuraDot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(119, 167, 255, .22);
  border: 2px solid rgba(255, 255, 255, .20);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .035);
}

.vipAuraDemo.active .vipAuraDot {
  animation: vipAuraPulse 1.6s ease-in-out infinite;
}

.vipAura7 {
  border-color: rgba(255, 116, 180, .72);
  box-shadow: 0 0 18px rgba(255, 80, 150, .24);
}

.vipAura8 {
  border-color: rgba(120, 235, 255, .78);
  box-shadow: 0 0 20px rgba(80, 210, 255, .30);
}

.vipAura9 {
  border-color: rgba(255, 226, 120, .82);
  box-shadow: 0 0 22px rgba(255, 211, 110, .34);
}

.vipAura10 {
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 0 24px rgba(255, 211, 110, .38), 0 0 36px rgba(120, 235, 255, .20);
}

@keyframes vipAuraPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

.tutorialPulse {
  animation: tutorialPulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(255, 211, 110, .34);
}

@keyframes tutorialPulse {
  0%, 100% {
    border-color: rgba(255, 211, 110, .34);
    box-shadow: 0 0 0 0 rgba(255, 211, 110, .26);
  }
  50% {
    border-color: rgba(255, 211, 110, .78);
    box-shadow: 0 0 0 5px rgba(255, 211, 110, .08);
  }
}

.shutdownNoticeOverlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding: 18px;
  background: radial-gradient(circle at 50% 20%, rgba(239, 68, 68, .24), transparent 32%), rgba(4, 8, 16, .86);
  backdrop-filter: blur(12px);
}
.shutdownNoticeBox {
  width: min(620px, 100%);
  border: 1px solid rgba(248, 113, 113, .42);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(41, 20, 24, .98), rgba(12, 18, 30, .98));
  box-shadow: 0 28px 90px rgba(0, 0, 0, .55);
  padding: 24px;
  position: relative;
}
.shutdownNoticeClose {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: var(--text);
  font-weight: 900;
}
.shutdownEyebrow {
  color: #fecaca;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.shutdownNoticeBox h2 {
  margin: 10px 52px 8px 0;
  font-size: clamp(1.7rem, 5vw, 2.7rem);
}
.shutdownNoticeBox p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}
.shutdownNoticeStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.shutdownNoticeStats div {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
  padding: 14px;
}
.shutdownNoticeStats span {
  display: block;
  color: var(--muted-2);
  font-size: .78rem;
}
.shutdownNoticeStats b {
  display: block;
  margin-top: 4px;
  font-size: 1.35rem;
}
@media (max-width: 620px) {
  .shutdownNoticeOverlay { padding: 10px; align-items: stretch; }
  .shutdownNoticeBox { min-height: calc(100dvh - 20px); display: flex; flex-direction: column; justify-content: center; padding: 22px; }
  .shutdownNoticeStats { grid-template-columns: 1fr; }
}
.modalOverlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 8, 13, .72);
  backdrop-filter: blur(10px);
}

#vipOverlay {
  padding: 9px;
  place-items: stretch;
}

.modalBox {
  width: min(430px, 100%);
  padding: 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(22, 32, 48, .98), rgba(13, 20, 31, .98));
  box-shadow: var(--shadow);
}

.modalBox.vipModalBox {
  width: calc(100vw - 18px);
  height: calc(100vh - 18px);
  height: calc(100dvh - 18px);
  max-height: calc(100vh - 18px);
  max-height: calc(100dvh - 18px);
  overflow: auto;
  border-radius: var(--radius);
  padding: 20px;
}

.privateMapsBox {
  width: min(760px, calc(100vw - 18px));
  max-height: calc(100vh - 18px);
  max-height: calc(100dvh - 18px);
  overflow: auto;
}

.weeklyRssBox {
  width: min(900px, calc(100vw - 18px));
  max-height: calc(100vh - 18px);
  max-height: calc(100dvh - 18px);
  overflow: auto;
}

.weeklyRssPreview {
  margin-bottom: 12px;
}

.weeklyRssPreviewRow,
.weeklyRssHero {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.weeklyRssHero {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px;
  border: 1px solid rgba(255, 213, 111, .2);
  border-radius: var(--radius);
  background: rgba(255, 213, 111, .06);
}

.weeklyRssHero b {
  display: block;
  font-size: 1.25rem;
}

.weeklyRssMilestone.ready {
  border-color: rgba(255, 213, 111, .45);
  background: linear-gradient(180deg, rgba(255, 213, 111, .08), rgba(255, 255, 255, .025));
}

.weeklyRssMilestone.claimed {
  border-color: rgba(80, 227, 164, .32);
}

.privateIslandCard {
  border-color: rgba(80, 227, 164, .18);
  background: linear-gradient(180deg, rgba(80, 227, 164, .06), rgba(255, 255, 255, .025));
}

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

.privateIslandStats > div {
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .12);
}

.privateIslandStats span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.privateIslandStats b {
  display: block;
  margin-top: 2px;
}

body.ui-large-text {
  font-size: 15px;
}

body.ui-large-text .btn,
body.ui-large-text input,
body.ui-large-text select {
  font-size: 15px;
}

body.ui-compact .surface,
body.ui-compact .itemCard,
body.ui-compact .leaderCard,
body.ui-compact .questCard,
body.ui-compact .listItem {
  padding: 9px;
}

body.ui-compact .statsGrid,
body.ui-compact .cardsGrid,
body.ui-compact .twoCol,
body.ui-compact .threeCol {
  gap: 9px;
}

body.ui-low-graphics *,
body.ui-hide-effects * {
  animation: none !important;
  transition-duration: .01ms !important;
}

body.ui-low-graphics .surface,
body.ui-low-graphics .mapWrap,
body.ui-low-graphics .modalBox,
body.ui-low-graphics .commandDock {
  box-shadow: none;
  backdrop-filter: none;
}

.vipModalBox .modalActions {
  position: sticky;
  bottom: -20px;
  padding: 12px 0 2px;
  background: linear-gradient(180deg, rgba(13, 20, 31, 0), rgba(13, 20, 31, .98) 34%);
}

.modalBox p {
  margin: 8px 0 12px;
}

#modalBody {
  white-space: pre-line;
}

.modalChoices {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.modalActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(9, 13, 20, .72), rgba(9, 13, 20, .88)),
    radial-gradient(700px 420px at 50% 0%, rgba(119, 167, 255, .22), transparent 65%);
}

.authCard {
  width: min(430px, 100%);
  padding: 18px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(22, 32, 48, .96), rgba(13, 20, 31, .96));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.authMark {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.authMark h1 {
  font-size: 28px;
}

.field {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 11px;
}

.authHint {
  margin-top: 11px;
  color: var(--muted-2);
  font-size: 12px;
  line-height: 1.45;
}

.authActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.authLink {
  justify-self: center;
  margin: 4px auto 0;
}

.authRecovery {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, .56);
}

.privacyNotice {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  background: rgba(0, 0, 0, .18);
}

.btn.small {
  min-height: 32px;
  padding: 6px 10px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 80;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  pointer-events: none;
  max-width: min(720px, calc(100vw - 24px));
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: rgba(9, 13, 20, .88);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  transition: opacity .18s ease, transform .18s ease;
  color: var(--text);
  font-size: 13px;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.menuBtn {
  grid-area: menu;
  display: none;
}

#btnLogoutTop {
  grid-area: logout;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .14);
  border-radius: 999px;
}

@media (max-width: 1320px) {
  .shell {
    grid-template-columns: 86px minmax(0, 1fr) 320px;
  }

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

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

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

  .threeCol {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  body {
    overflow: auto;
  }

  .app {
    min-height: 100%;
    height: auto;
  }

  .topbar {
    min-height: var(--topbar-h);
    height: auto;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "menu stats logout"
      "menu res logout";
  }

  .menuBtn {
    display: grid;
    grid-area: menu;
  }

  .brand {
    display: none;
  }

  #btnLogoutTop {
    grid-area: logout;
  }

  .topStats {
    grid-area: stats;
    overflow-x: auto;
  }

  .resources {
    grid-area: res;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .shell {
    display: block;
  }

  .sideNav {
    position: fixed;
    left: 10px;
    top: 84px;
    bottom: 10px;
    width: 230px;
    z-index: 60;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transform: translateX(calc(-100% - 20px));
    transition: transform .18s ease;
  }

  .sideNav.open {
    transform: translateX(0);
  }

  .navItem {
    min-height: 46px;
    display: flex;
    justify-content: flex-start;
    padding: 0 12px;
  }

  .commandDock {
    border-left: none;
    border-top: 1px solid var(--line);
    max-height: 42vh;
  }

  .content {
    overflow: visible;
  }

  .twoCol,
  .threeCol {
    grid-template-columns: 1fr;
  }

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

  .cardsGrid,
  .leaderboardGrid,
  #avaLeaderboardGrid,
  .avaLists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settingsGrid,
  .rankSummaryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rankHero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  :root {
    --topbar-h: 64px;
  }

  .content {
    padding: 10px;
  }

  .panelHead {
    display: grid;
    gap: 10px;
  }

  .seg {
    width: 100%;
    overflow-x: auto;
  }

  .subTabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .subTabs::-webkit-scrollbar {
    display: none;
  }

  .subTab {
    flex: 0 0 auto;
  }

  .segBtn {
    flex: 1;
    min-width: max-content;
  }

  #mapCanvas {
    height: clamp(280px, 42vh, 420px);
    min-height: 280px;
  }

  .mapToolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .avaMapScoreboard {
    top: 112px;
    left: 12px;
    right: 12px;
    transform: none;
  }

  .toolbarGroup {
    max-width: 100%;
    overflow-x: auto;
  }

  .hideSmall {
    display: none;
  }

  .formGrid,
  .formGrid.four,
  .questCreateGrid,
  .questCreateHelp,
  .chatControls {
    grid-template-columns: 1fr;
  }

  .quickMarchGrid {
    grid-template-columns: 1fr;
  }

  .marchClassTabs,
  .quickMarchStats {
    grid-template-columns: 1fr;
  }

  .statsGrid,
  .smallStats,
  .cardsGrid,
  .techGrid,
  .compactCards,
  .leaderboardGrid,
  #avaLeaderboardGrid,
  .avaLists {
    grid-template-columns: 1fr;
  }

  .settingsGrid,
  .rankSummaryGrid,
  .chatStatusBar {
    grid-template-columns: 1fr;
  }

  .captainMetaGrid,
  .privateIslandStats {
    grid-template-columns: 1fr;
  }

  .eventRankCard {
    grid-column: auto;
  }

  .tutorialNow {
    grid-template-columns: 1fr;
  }

  .tutorialActions,
  .modalActions {
    justify-content: stretch;
  }

  .tutorialActions .btn,
  .modalActions .btn {
    flex: 1;
  }

  .brandName {
    font-size: 16px;
  }

  .brandSub {
    max-width: 45vw;
  }

  .chip,
  .resChip {
    min-height: 28px;
    padding: 4px 6px;
  }

  .resChip {
    min-width: auto;
  }

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

  .surface {
    padding: 12px;
  }

  .chatBox {
    min-height: 220px;
    height: 36vh;
  }

  #vipOverlay {
    padding: 0;
  }

  .modalBox.vipModalBox {
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    padding: 12px;
  }

  .vipModalBox .modalActions {
    bottom: -12px;
    padding-bottom: 10px;
  }
}

#tab-map > .twoCol {
  align-items: start;
}

.sendMarchPanel {
  position: relative;
  z-index: 2;
}

@media (max-width: 700px) {
  #tab-map > .twoCol {
    grid-template-columns: 1fr;
  }

  #tab-map .sendMarchPanel {
    order: 1;
  }

  #tab-map > .twoCol > .surface:not(.sendMarchPanel) {
    order: 2;
  }
}

@media (max-width: 700px) {
  #tab-map .sendMarchGrid {
    grid-template-columns: 1fr;
  }

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

  #btnQuickMarch {
    min-height: 48px;
  }
}

@media (max-width: 560px) {
  .nextActionBar {
    grid-template-columns: 1fr;
  }

  .nextActionButtons {
    width: 100%;
  }

  .nextActionButtons .btn {
    flex: 1;
  }

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

.accountSlotCard {
  min-height: 150px;
}

.captainCard.locked {
  opacity: .78;
}

.captainCard.locked .captainSkillBox {
  border-style: dashed;
}

.eventCaptainCard {
  border-color: rgba(255, 213, 111, .38);
  min-width: 0;
  overflow: hidden;
}

.eventCaptainCard .cardTop {
  grid-template-columns: minmax(0, 1fr) auto;
}

.eventCaptainCard .tag {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.eventCaptainCard .muted2,
.eventCaptainNote,
.eventCaptainNote span,
.captainHeader b,
.captainHeader .muted2 {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.eventCaptainNote {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.4;
}

.botAdminLayout {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.35fr);
  gap: 12px;
}

.botList {
  max-height: 540px;
  overflow: auto;
}

.botListItem {
  width: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.botListItem.active {
  border-color: rgba(255, 213, 111, .7);
  background: rgba(255, 213, 111, .08);
}

.miniHead {
  margin-bottom: 8px;
}

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

@media (max-width: 700px) {
  #mapCanvas {
    min-height: 300px;
  }

  .mapToolbar {
    gap: 8px;
  }

  .toolbarGroup {
    min-height: 50px;
    gap: 8px;
    padding: 6px;
  }

  .toolBtn {
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 0 13px;
  }

  .wideTool {
    min-width: 112px;
    max-width: 160px;
    white-space: normal;
    line-height: 1.05;
  }

  .mapFooter {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }

  .seg {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .segBtn {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .sendMarchGrid .btn,
  .sendMarchPanel #btnQuickMarch {
    width: 100%;
    min-height: 44px;
  }

  .leaderCard,
  .leaderCard .detailLine,
  .rankSummaryCard {
    min-width: 0;
  }

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

  .weeklyRssHero {
    grid-template-columns: 1fr;
  }

  .botAdminLayout {
    grid-template-columns: 1fr;
  }

  .compactSettings {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 440px) {
  .brandCrest {
    width: 38px;
    height: 38px;
  }

  .iconBtn {
    width: 38px;
    height: 38px;
  }

  h2 {
    font-size: 20px;
  }

  .topStats,
  .resources {
    gap: 6px;
  }

  .chip span {
    display: inline;
    font-size: 11px;
  }

  .panelHead {
    margin-bottom: 10px;
  }
}

/* Final phone map overrides: kept at file end so older responsive rules cannot push controls into each other. */
@media (max-width: 700px) {
  body:has(#tab-map.active) {
    --map-mobile-top: 74px;
    --send-sheet-collapsed: 76px;
    overflow: hidden;
  }

  body:has(#tab-map.active) .topbar {
    min-height: var(--map-mobile-top);
    height: var(--map-mobile-top);
    max-height: var(--map-mobile-top);
  }

  body:has(#tab-map.active) #tab-map.panel.active {
    inset: var(--map-mobile-top) 0 0 0;
  }

  body:has(#tab-map.active) #tab-map > .panelHead {
    top: 6px;
    left: 6px;
    right: 6px;
    padding: 6px;
    z-index: 70;
  }

  body:has(#tab-map.active) #tab-map > .panelHead .seg {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  body:has(#tab-map.active) #tab-map > .panelHead .segBtn {
    min-height: 38px;
    padding: 4px 3px;
    font-size: 0;
  }

  body:has(#tab-map.active) #btnModeGlobal::after { content: "World"; }
  body:has(#tab-map.active) #btnModeAllianceWar::after { content: "A-War"; }
  body:has(#tab-map.active) #btnModeNormalWar::after { content: "War"; }
  body:has(#tab-map.active) #btnModeAva::after { content: "AvA"; }
  body:has(#tab-map.active) #btnModePrivateMaps::after { content: "Island"; }

  body:has(#tab-map.active) #tab-map > .panelHead .segBtn::after {
    display: block;
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
  }

  body:has(#tab-map.active) .notificationStrip {
    position: fixed;
    left: 6px;
    right: 6px;
    top: calc(var(--map-mobile-top) + 53px);
    z-index: 85;
    max-height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
  }

  body:has(#tab-map.active) .notificationStrip span {
    min-height: 32px;
    max-width: 82vw;
    white-space: nowrap;
    pointer-events: auto;
    background: rgba(7, 10, 15, .82);
    backdrop-filter: blur(10px);
  }

  body:has(#tab-map.active) .notificationStrip .tutorialAlert {
    color: #2b2100;
    background: #ffd36e;
  }

  body:has(#tab-map.active) .mapToolbar {
    top: 96px;
    left: 6px;
    right: 6px;
  }

  body:has(#tab-map.active) .avaMapScoreboard {
    top: 148px;
  }

  body:has(#tab-map.active) .sendMarchPanel {
    max-height: var(--send-sheet-collapsed);
    min-height: var(--send-sheet-collapsed);
    overflow: hidden;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel {
    max-height: min(74dvh, 640px);
    min-height: 0;
    overflow-y: auto;
  }

  body:has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body:has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body:has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#tab-map.active) .sendMarchPanel .quickMarchStats {
    display: none;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .quickMarchStats,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .quickMarchStats,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .quickMarchStats {
    display: grid;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .surfaceHead {
    display: flex;
  }

  body:has(#tab-map.active) .sendSheetHandle {
    display: block;
    width: min(240px, 72vw);
    height: 50px;
    min-height: 50px;
    margin-bottom: 0;
    border: 1px solid rgba(80, 227, 164, .32);
    border-radius: 999px;
    background: rgba(80, 227, 164, .14);
    color: #eafff7;
    box-shadow: var(--shadow-soft);
  }

  body:has(#tab-map.active) .sendSheetHandle::after {
    content: "Send March";
    font-weight: 900;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendSheetHandle,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendSheetHandle,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendSheetHandle {
    width: 52px;
    height: 5px;
    min-height: 5px;
    margin-bottom: 10px;
    border: 0;
    background: rgba(255, 255, 255, .32);
    box-shadow: none;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendSheetHandle::after,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendSheetHandle::after,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendSheetHandle::after {
    content: "";
  }

  body:has(#tab-map.active) .mobileTargetBar {
    bottom: calc(var(--send-sheet-collapsed) + env(safe-area-inset-bottom) + 8px);
  }

  body:has(#tab-map.active) #commandDock {
    bottom: calc(var(--send-sheet-collapsed) + 62px + env(safe-area-inset-bottom));
  }

  body:has(#tab-map.active) .mapFooter {
    bottom: calc(var(--send-sheet-collapsed) + 160px + env(safe-area-inset-bottom));
  }

  body.sendSheetExpanded:has(#tab-map.active) .mobileTargetBar,
  body.sendSheetExpanded:has(#tab-map.active) #commandDock,
  body.sendSheetExpanded:has(#tab-map.active) .mapFooter,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .mobileTargetBar,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) #commandDock,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .mapFooter,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .mobileTargetBar,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) #commandDock,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .mapFooter {
    display: none;
  }

  body:has(#tab-map.active) #normalWarChestPanel {
    display: none !important;
  }

  body:has(#tab-map.active) .marchClassBtn {
    min-height: 58px;
    display: grid;
    place-items: center;
    gap: 3px;
    padding: 7px 4px;
  }

  body:has(#tab-map.active) .marchClassBtn::before {
    min-width: 34px;
    height: 26px;
    margin-right: 0;
  }

  body:has(#tab-map.active) .quickMarchStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  body:has(#tab-map.active) {
    --map-mobile-top: 74px;
    --send-sheet-collapsed: 76px;
  }

  body:has(#tab-map.active) .topbar {
    min-height: var(--map-mobile-top);
    height: var(--map-mobile-top);
    max-height: var(--map-mobile-top);
  }

  body:has(#tab-map.active) #tab-map.panel.active {
    inset: var(--map-mobile-top) 0 0 0;
  }

  body:has(#tab-map.active) #tab-map > .panelHead {
    top: 6px;
    left: 6px;
    right: 6px;
    padding: 6px;
  }

  body:has(#tab-map.active) #tab-map > .panelHead .seg {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  body:has(#tab-map.active) #tab-map > .panelHead .segBtn {
    min-height: 38px;
    padding: 4px 3px;
    font-size: 0;
  }

  body:has(#tab-map.active) #btnModeGlobal::after { content: "World"; }
  body:has(#tab-map.active) #btnModeAllianceWar::after { content: "A-War"; }
  body:has(#tab-map.active) #btnModeNormalWar::after { content: "War"; }
  body:has(#tab-map.active) #btnModeAva::after { content: "AvA"; }
  body:has(#tab-map.active) #btnModePrivateMaps::after { content: "Island"; }

  body:has(#tab-map.active) #tab-map > .panelHead .segBtn::after {
    display: block;
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
  }

  body:has(#tab-map.active) .notificationStrip {
    position: fixed;
    left: 6px;
    right: 6px;
    top: calc(var(--map-mobile-top) + 53px);
    z-index: 85;
    max-height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
  }

  body:has(#tab-map.active) .notificationStrip span {
    min-height: 32px;
    max-width: 82vw;
    white-space: nowrap;
    pointer-events: auto;
    background: rgba(7, 10, 15, .82);
    backdrop-filter: blur(10px);
  }

  body:has(#tab-map.active) .notificationStrip .tutorialAlert {
    color: #2b2100;
    background: #ffd36e;
  }

  body:has(#tab-map.active) .mapToolbar {
    top: 96px;
    left: 6px;
    right: 6px;
  }

  body:has(#tab-map.active) .avaMapScoreboard {
    top: 148px;
  }

  body:has(#tab-map.active) .sendMarchPanel {
    max-height: var(--send-sheet-collapsed);
    min-height: var(--send-sheet-collapsed);
    overflow: hidden;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel {
    max-height: min(74dvh, 640px);
    min-height: 0;
    overflow-y: auto;
  }

  body:has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body:has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body:has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#tab-map.active) .sendMarchPanel .quickMarchStats {
    display: none;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .quickMarchStats,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .quickMarchStats,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .quickMarchStats {
    display: grid;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .surfaceHead {
    display: flex;
  }

  body:has(#tab-map.active) .sendSheetHandle {
    width: min(240px, 72vw);
    height: 50px;
    min-height: 50px;
    margin-bottom: 0;
    border: 1px solid rgba(80, 227, 164, .32);
    border-radius: 999px;
    background: rgba(80, 227, 164, .14);
    color: #eafff7;
    box-shadow: var(--shadow-soft);
  }

  body:has(#tab-map.active) .sendSheetHandle::after {
    content: "Send March";
    font-weight: 900;
    letter-spacing: 0;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendSheetHandle,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendSheetHandle,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendSheetHandle {
    width: 52px;
    height: 5px;
    min-height: 5px;
    margin-bottom: 10px;
    border: 0;
    background: rgba(255, 255, 255, .32);
    box-shadow: none;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendSheetHandle::after,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendSheetHandle::after,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendSheetHandle::after {
    content: "";
  }

  body:has(#tab-map.active) .mobileTargetBar {
    bottom: calc(var(--send-sheet-collapsed) + env(safe-area-inset-bottom) + 8px);
  }

  body:has(#tab-map.active) #commandDock {
    bottom: calc(var(--send-sheet-collapsed) + 62px + env(safe-area-inset-bottom));
  }

  body:has(#tab-map.active) .mapFooter {
    bottom: calc(var(--send-sheet-collapsed) + 160px + env(safe-area-inset-bottom));
  }

  body.sendSheetExpanded:has(#tab-map.active) .mapFooter,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .mapFooter,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .mapFooter {
    display: none;
  }

  body:has(#tab-map.active) #normalWarChestPanel {
    display: none !important;
  }

  body:has(#tab-map.active) .marchClassBtn {
    min-height: 58px;
    display: grid;
    place-items: center;
    gap: 3px;
    padding: 7px 4px;
  }

  body:has(#tab-map.active) .marchClassBtn::before {
    min-width: 34px;
    height: 26px;
    margin-right: 0;
  }

  body:has(#tab-map.active) .quickMarchStats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Absolute final phone map fix: keep this as the last CSS block. */
@media (max-width: 700px) {
  body:has(#tab-map.active) {
    --map-mobile-top: 76px !important;
    --send-sheet-collapsed: 74px !important;
    --mobile-target-h: 60px !important;
    overflow: hidden !important;
  }

  body:has(#tab-map.active) .app,
  body:has(#tab-map.active) .content {
    height: 100dvh !important;
    overflow: hidden !important;
  }

  body:has(#tab-map.active) .topbar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    height: var(--map-mobile-top) !important;
    min-height: var(--map-mobile-top) !important;
    max-height: var(--map-mobile-top) !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    grid-template-areas:
      "menu stats logout"
      "menu res logout" !important;
    padding: max(4px, env(safe-area-inset-top)) 6px 5px !important;
    z-index: 220 !important;
  }

  body:has(#tab-map.active) #tab-map.panel.active {
    position: fixed !important;
    inset: var(--map-mobile-top) 0 0 0 !important;
    display: block !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  body:has(#tab-map.active) #tab-map > .panelHead {
    position: fixed !important;
    top: calc(var(--map-mobile-top) + 7px) !important;
    left: 8px !important;
    right: 8px !important;
    z-index: 160 !important;
    display: block !important;
    padding: 6px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    background: rgba(7, 10, 15, .78) !important;
    backdrop-filter: blur(14px) !important;
  }

  body:has(#tab-map.active) #tab-map > .panelHead > div:first-child {
    display: none !important;
  }

  body:has(#tab-map.active) #tab-map > .panelHead .seg {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
    overflow: visible !important;
  }

  body:has(#tab-map.active) #tab-map > .panelHead .segBtn {
    min-height: 42px !important;
    min-width: 0 !important;
    padding: 4px 3px !important;
    border-radius: 12px !important;
    font-size: 0 !important;
  }

  body:has(#tab-map.active) .notificationStrip {
    position: fixed !important;
    top: calc(var(--map-mobile-top) + 61px) !important;
    left: 8px !important;
    right: 8px !important;
    z-index: 170 !important;
    max-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  body:has(#tab-map.active) .mapWrap {
    position: fixed !important;
    inset: var(--map-mobile-top) 0 0 0 !important;
    width: 100vw !important;
    height: calc(100dvh - var(--map-mobile-top)) !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  body:has(#tab-map.active) #mapCanvas {
    width: 100vw !important;
    height: calc(100dvh - var(--map-mobile-top)) !important;
    min-height: 0 !important;
  }

  body:has(#tab-map.active) .mapToolbar {
    top: 112px !important;
    left: 8px !important;
    right: 8px !important;
    z-index: 145 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }

  body:has(#tab-map.active) .toolbarGroup {
    max-width: calc(50vw - 12px) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  body:has(#tab-map.active) #tab-map > .twoCol {
    display: block !important;
    margin: 0 !important;
  }

  body:has(#tab-map.active) #tab-map > .twoCol > .surface:not(.sendMarchPanel) {
    display: none !important;
  }

  body:has(#tab-map.active) .sendMarchPanel {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 190 !important;
    display: grid !important;
    justify-items: center !important;
    width: auto !important;
    min-height: var(--send-sheet-collapsed) !important;
    max-height: var(--send-sheet-collapsed) !important;
    padding: 10px 12px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel {
    justify-items: stretch !important;
    max-height: min(76dvh, 660px) !important;
    overflow-y: auto !important;
  }

  body:has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body:has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body:has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#tab-map.active) .sendMarchPanel .quickMarchStats {
    display: none !important;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .surfaceHead {
    display: flex !important;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .quickMarchStats,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .quickMarchStats,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .quickMarchStats {
    display: grid !important;
    width: 100% !important;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .sendMarchGrid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  body:has(#tab-map.active) .sendSheetHandle {
    width: min(320px, 78vw) !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    border-radius: 999px !important;
  }

  body:has(#tab-map.active) .mobileTargetBar {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(var(--send-sheet-collapsed) + max(18px, env(safe-area-inset-bottom) + 10px)) !important;
    z-index: 185 !important;
    min-height: var(--mobile-target-h) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 9px 10px !important;
    border-radius: 18px !important;
  }

  body:has(#tab-map.active) #commandDock {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(var(--send-sheet-collapsed) + var(--mobile-target-h) + max(28px, env(safe-area-inset-bottom) + 20px)) !important;
    z-index: 150 !important;
    height: 104px !important;
    max-height: 104px !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 18px !important;
  }

  body:has(#tab-map.active) #commandDock .dockHead,
  body:has(#tab-map.active) #commandDock .dockActions {
    display: none !important;
  }

  body:has(#tab-map.active) #commandDock .marchList {
    height: 100% !important;
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 9px !important;
  }

  body:has(#tab-map.active) #commandDock .marchItem {
    flex: 0 0 188px !important;
    min-height: 84px !important;
    margin: 0 !important;
  }

  body.sendSheetExpanded:has(#tab-map.active) .mobileTargetBar,
  body.sendSheetExpanded:has(#tab-map.active) #commandDock,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .mobileTargetBar,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) #commandDock,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .mobileTargetBar,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) #commandDock,
  body:has(#tab-map.active) .mapFooter {
    display: none !important;
  }
}

@media (max-width: 700px) {
  body.navOpen .sideNav.open {
    z-index: 10020 !important;
    left: 8px !important;
    right: 8px !important;
    top: 8px !important;
    bottom: 8px !important;
    background: rgba(7, 10, 15, .98) !important;
  }

  body.navOpen:has(#tab-map.active) #commandDock,
  body.navOpen:has(#tab-map.active) .mobileTargetBar,
  body.navOpen:has(#tab-map.active) .mapToolbar,
  body.navOpen:has(#tab-map.active) .avaMapScoreboard {
    display: none !important;
  }

  body:has(#tab-map.active) #commandDock {
    height: 124px !important;
  }

  body:has(#tab-map.active) #commandDock .marchItem {
    flex: 0 0 206px !important;
    min-width: 206px !important;
    height: 108px !important;
    min-height: 108px !important;
  }

  body:has(#tab-map.active) #commandDock .marchMiniActions {
    display: flex !important;
  }
}

@media (max-width: 430px) {
  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .sendMarchGrid {
    grid-template-columns: 1fr !important;
  }

  body:has(#tab-map.active) #commandDock {
    height: 92px !important;
    max-height: 92px !important;
  }

  body:has(#tab-map.active) #commandDock .marchItem {
    flex-basis: 164px !important;
    min-height: 74px !important;
  }
}

/* Release mobile UI polish: this block intentionally stays last. */
@media (max-width: 700px) {
  body:has(#tab-map.active) {
    --map-mobile-top: 76px;
    --send-sheet-collapsed: 74px;
    --mobile-target-h: 60px;
    overflow: hidden;
    background: #050914;
  }

  body:has(#tab-map.active) .app {
    height: 100dvh;
    overflow: hidden;
  }

  body:has(#tab-map.active) .topbar {
    position: fixed;
    inset: 0 0 auto 0;
    min-height: var(--map-mobile-top);
    height: var(--map-mobile-top);
    max-height: var(--map-mobile-top);
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    grid-template-areas:
      "menu stats logout"
      "menu res logout";
    padding: max(4px, env(safe-area-inset-top)) 6px 5px;
    z-index: 220;
    background: rgba(6, 10, 18, .88);
    backdrop-filter: blur(18px);
  }

  body:has(#tab-map.active) .menuBtn,
  body:has(#tab-map.active) #btnLogoutTop {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: 12px;
  }

  body:has(#tab-map.active) .topStats,
  body:has(#tab-map.active) .resources {
    gap: 4px;
    padding-bottom: 1px;
    scroll-snap-type: x proximity;
  }

  body:has(#tab-map.active) .topStats .chip,
  body:has(#tab-map.active) .resources .resChip {
    min-height: 28px;
    padding: 3px 7px;
    border-radius: 10px;
    scroll-snap-align: start;
    font-size: 11px;
  }

  body:has(#tab-map.active) .chip span {
    font-size: 9px;
  }

  body:has(#tab-map.active) .content {
    padding: 0;
    height: 100dvh;
    overflow: hidden;
  }

  body:has(#tab-map.active) #tab-map.panel.active {
    position: fixed;
    inset: var(--map-mobile-top) 0 0 0;
    display: block;
    padding: 0;
    overflow: hidden;
  }

  body:has(#tab-map.active) #tab-map > .panelHead {
    position: fixed;
    left: 8px;
    right: 8px;
    top: calc(var(--map-mobile-top) + 7px);
    z-index: 160;
    display: block;
    min-height: 0;
    padding: 6px;
    margin: 0;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    background: rgba(7, 10, 15, .78);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-soft);
  }

  body:has(#tab-map.active) #tab-map > .panelHead > div:first-child {
    display: none;
  }

  body:has(#tab-map.active) #tab-map > .panelHead .seg {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    overflow: visible;
  }

  body:has(#tab-map.active) #tab-map > .panelHead .segBtn {
    min-width: 0;
    min-height: 42px;
    padding: 4px 3px;
    border-radius: 12px;
    font-size: 0;
  }

  body:has(#tab-map.active) #btnModeGlobal::after { content: "World"; }
  body:has(#tab-map.active) #btnModeAllianceWar::after { content: "A-War"; }
  body:has(#tab-map.active) #btnModeNormalWar::after { content: "War"; }
  body:has(#tab-map.active) #btnModeAva::after { content: "AvA"; }
  body:has(#tab-map.active) #btnModePrivateMaps::after { content: "Island"; }

  body:has(#tab-map.active) #tab-map > .panelHead .segBtn::after {
    display: block;
    font-size: 11px;
    line-height: 1;
    font-weight: 950;
  }

  body:has(#tab-map.active) .notificationStrip {
    position: fixed;
    left: 8px;
    right: 8px;
    top: calc(var(--map-mobile-top) + 61px);
    z-index: 170;
    max-height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
  }

  body:has(#tab-map.active) .notificationStrip span {
    min-height: 34px;
    max-width: min(92vw, 680px);
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: auto;
    background: rgba(7, 10, 15, .84);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-soft);
  }

  body:has(#tab-map.active) .notificationStrip .tutorialAlert {
    color: #2b2100;
    border-color: rgba(255, 211, 110, .86);
    background: #ffd36e;
    animation: tutorialBlink 1.2s ease-in-out infinite;
  }

  body:has(#tab-map.active) .mapWrap {
    position: fixed;
    inset: var(--map-mobile-top) 0 0 0;
    width: 100vw;
    height: calc(100dvh - var(--map-mobile-top));
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }

  body:has(#tab-map.active) #mapCanvas {
    width: 100vw;
    height: calc(100dvh - var(--map-mobile-top));
    min-height: 0;
  }

  body:has(#tab-map.active) .mapToolbar {
    left: 8px;
    right: 8px;
    top: 112px;
    z-index: 145;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    pointer-events: none;
  }

  body:has(#tab-map.active) .toolbarGroup {
    max-width: calc(50vw - 12px);
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(7, 10, 15, .72);
    backdrop-filter: blur(12px);
    pointer-events: auto;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body:has(#tab-map.active) .toolbarGroup::-webkit-scrollbar {
    display: none;
  }

  body:has(#tab-map.active) .toolBtn {
    min-width: 42px;
    height: 40px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 11px;
    font-weight: 950;
  }

  body:has(#tab-map.active) .wideTool {
    min-width: 98px;
  }

  body:has(#tab-map.active) .avaMapScoreboard {
    top: 166px;
    left: 8px;
    right: 8px;
    transform: none;
    z-index: 150;
    max-width: none;
    justify-content: flex-start;
    pointer-events: auto;
    scrollbar-width: none;
  }

  body:has(#tab-map.active) .avaMapScoreboard::-webkit-scrollbar {
    display: none;
  }

  body:has(#tab-map.active) #tab-map > .twoCol {
    display: block;
    margin: 0;
  }

  body:has(#tab-map.active) #tab-map > .twoCol > .surface:not(.sendMarchPanel) {
    display: none !important;
  }

  body:has(#tab-map.active) .sendMarchPanel {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 190;
    display: grid;
    justify-items: center;
    width: auto;
    min-height: var(--send-sheet-collapsed);
    max-height: var(--send-sheet-collapsed);
    padding: 10px 12px;
    border: 1px solid rgba(80, 227, 164, .34);
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(80, 227, 164, .13), rgba(9, 13, 20, .92)),
      rgba(9, 13, 20, .94);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 44px rgba(0,0,0,.46);
    overflow: hidden;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel {
    align-content: start;
    justify-items: stretch;
    max-height: min(76dvh, 660px);
    overflow-y: auto;
    border-radius: 24px 24px 18px 18px;
  }

  body:has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body:has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body:has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#tab-map.active) .sendMarchPanel .quickMarchStats {
    display: none;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .surfaceHead {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .marchClassTabs {
    display: grid;
    width: 100%;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .sendMarchGrid {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .quickMarchStats,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .quickMarchStats,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .quickMarchStats {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body:has(#tab-map.active) .sendSheetHandle {
    display: grid;
    place-items: center;
    width: min(320px, 78vw);
    height: 52px;
    min-height: 52px;
    margin: 0;
    border: 1px solid rgba(80, 227, 164, .48);
    border-radius: 999px;
    color: #eafff7;
    background: linear-gradient(135deg, rgba(80, 227, 164, .24), rgba(119, 167, 255, .13));
    box-shadow: var(--shadow-soft);
    touch-action: manipulation;
  }

  body:has(#tab-map.active) .sendSheetHandle::after {
    content: "Send March";
    font-size: 15px;
    font-weight: 950;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendSheetHandle,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendSheetHandle,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendSheetHandle {
    width: 58px;
    height: 6px;
    min-height: 6px;
    margin: 2px auto 12px;
    border: 0;
    background: rgba(255,255,255,.34);
    box-shadow: none;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendSheetHandle::after,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendSheetHandle::after,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendSheetHandle::after {
    content: "";
  }

  body:has(#tab-map.active) .marchClassTabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body:has(#tab-map.active) .marchClassBtn {
    min-height: 62px;
    padding: 8px 5px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 1.1;
  }

  body:has(#tab-map.active) .marchClassBtn::before {
    min-width: 36px;
    height: 26px;
    margin: 0;
    border-radius: 9px;
  }

  body:has(#tab-map.active) .presetRow {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body:has(#tab-map.active) .presetRow .btn,
  body:has(#tab-map.active) #btnQuickMarch,
  body:has(#tab-map.active) #quickMarchTroops,
  body:has(#tab-map.active) #quickMarchCaptain {
    min-height: 48px;
    border-radius: 14px;
    font-size: 15px;
  }

  body:has(#tab-map.active) #quickMarchTroops {
    text-align: center;
    font-weight: 950;
  }

  body:has(#tab-map.active) #btnQuickMarch {
    grid-column: 1 / -1;
    min-height: 54px;
    font-size: 16px;
    box-shadow: 0 10px 24px rgba(80, 227, 164, .16);
  }

  body:has(#tab-map.active) .quickMarchStats > div {
    min-height: 54px;
    padding: 8px 10px;
    border-radius: 14px;
  }

  body:has(#tab-map.active) .mobileTargetBar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(var(--send-sheet-collapsed) + max(18px, env(safe-area-inset-bottom) + 10px));
    z-index: 185;
    min-height: var(--mobile-target-h);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 18px;
    background: rgba(7, 10, 15, .82);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-soft);
    pointer-events: auto;
  }

  body:has(#tab-map.active) .mobileTargetBar span,
  body:has(#tab-map.active) .mobileTargetBar small {
    display: block;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:has(#tab-map.active) .mobileTargetBar span {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
  }

  body:has(#tab-map.active) .mobileTargetBar b {
    display: block;
    max-width: 100%;
    margin-top: 2px;
    overflow: hidden;
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:has(#tab-map.active) .mobileTargetBar .btn {
    min-width: 82px;
    min-height: 46px;
    border-radius: 14px;
    font-size: 15px;
  }

  body.sendSheetExpanded:has(#tab-map.active) .mobileTargetBar,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .mobileTargetBar,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .mobileTargetBar {
    display: none;
  }

  body:has(#tab-map.active) #commandDock {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(var(--send-sheet-collapsed) + var(--mobile-target-h) + max(28px, env(safe-area-inset-bottom) + 20px));
    z-index: 150;
    height: 104px;
    min-height: 0;
    max-height: 104px;
    display: block;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 18px;
    background: rgba(7, 10, 15, .72);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-soft);
  }

  body:has(#tab-map.active) #commandDock .dockHead {
    display: none;
  }

  body:has(#tab-map.active) #commandDock .dockActions {
    display: none;
  }

  body:has(#tab-map.active) #commandDock .marchList {
    height: 100%;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 9px;
    scrollbar-width: none;
  }

  body:has(#tab-map.active) #commandDock .marchList::-webkit-scrollbar {
    display: none;
  }

  body:has(#tab-map.active) #commandDock .marchItem {
    flex: 0 0 188px;
    min-height: 84px;
    margin: 0;
    padding: 10px;
    border-radius: 14px;
  }

  body:has(#tab-map.active) #commandDock .marchItem .muted2,
  body:has(#tab-map.active) #commandDock .marchItem .costLine,
  body:has(#tab-map.active) #commandDock .marchItem .gatherLine,
  body:has(#tab-map.active) #commandDock .marchItem .battleReportGrid {
    display: none !important;
  }

  body:has(#tab-map.active) #commandDock .marchMeta {
    font-size: 11px;
    gap: 5px;
  }

  body.sendSheetExpanded:has(#tab-map.active) #commandDock,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) #commandDock,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) #commandDock {
    display: none;
  }

  body:has(#tab-map.active) .mapFooter {
    display: none !important;
  }
}

@media (max-width: 720px) {
  .btn,
  input,
  select,
  textarea,
  .subTab,
  .segBtn,
  .navItem {
    min-height: 44px;
  }

  .sideNav.open {
    left: 8px;
    right: 8px;
    top: max(78px, calc(env(safe-area-inset-top) + 66px));
    bottom: 8px;
    width: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 8px;
    padding: 10px;
    border-radius: 22px;
    background: rgba(7, 10, 15, .94);
    backdrop-filter: blur(18px);
  }

  .sideNav.open .navItem {
    justify-content: center;
    min-height: 58px;
    border-radius: 16px;
  }

  .sideNav.open .navItem span {
    min-width: 28px;
  }

  .panel:not(#tab-map) {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .panel:not(#tab-map) .panelHead {
    padding: 2px 0 8px;
  }

  .panel:not(#tab-map) .surface {
    border-radius: 16px;
  }

  .subTabs {
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .subTab {
    border-radius: 999px;
    scroll-snap-align: start;
  }
}

@media (max-width: 430px) {
  body:has(#tab-map.active) {
    --map-mobile-top: 72px;
    --send-sheet-collapsed: 70px;
  }

  body:has(#tab-map.active) .topbar {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    padding-left: 4px;
    padding-right: 4px;
    column-gap: 4px;
  }

  body:has(#tab-map.active) .topStats .chip,
  body:has(#tab-map.active) .resources .resChip {
    min-height: 26px;
    padding: 2px 5px;
    font-size: 10px;
  }

  body:has(#tab-map.active) #tab-map > .panelHead {
    left: 6px;
    right: 6px;
    top: calc(var(--map-mobile-top) + 6px);
  }

  body:has(#tab-map.active) #tab-map > .panelHead .seg {
    gap: 4px;
  }

  body:has(#tab-map.active) #tab-map > .panelHead .segBtn {
    min-height: 40px;
  }

  body:has(#tab-map.active) #tab-map > .panelHead .segBtn::after {
    font-size: 10px;
  }

  body:has(#tab-map.active) .notificationStrip {
    top: calc(var(--map-mobile-top) + 57px);
  }

  body:has(#tab-map.active) .mapToolbar {
    top: 106px;
  }

  body:has(#tab-map.active) .toolbarGroup {
    max-width: calc(50vw - 10px);
  }

  body:has(#tab-map.active) .toolBtn {
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0 8px;
  }

  body:has(#tab-map.active) .wideTool {
    min-width: 78px;
    font-size: 11px;
  }

  body:has(#tab-map.active) #commandDock {
    height: 92px;
    max-height: 92px;
  }

  body:has(#tab-map.active) #commandDock .marchItem {
    flex-basis: 164px;
    min-height: 74px;
  }

  body:has(#tab-map.active) .mobileTargetBar {
    min-height: 56px;
    padding: 8px;
  }

  body:has(#tab-map.active) .mobileTargetBar .btn {
    min-width: 72px;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .sendMarchGrid {
    grid-template-columns: 1fr;
  }

  body:has(#tab-map.active) .quickMarchStats {
    grid-template-columns: 1fr 1fr;
  }
}

.sendSheetHandle,
.mobileTargetBar {
  display: none;
}

@media (max-width: 700px) {
  button,
  input,
  select,
  .btn,
  .subTab,
  .segBtn,
  .navItem {
    min-height: 44px;
  }

  .topbar {
    max-height: 104px;
    overflow: hidden;
  }

  .topStats,
  .resources {
    scrollbar-width: none;
  }

  .topStats .chip,
  .resources .resChip {
    min-height: 28px;
    padding: 4px 7px;
  }

  .notificationStrip {
    position: sticky;
    top: 0;
    z-index: 35;
  }

  .notificationStrip .tutorialAlert {
    min-width: min(420px, calc(100vw - 24px));
    justify-content: center;
    color: #2b2100;
    background: #ffd36e;
    border-color: rgba(255, 255, 255, .35);
  }

  .resChip.recommendedChip {
    position: fixed;
    right: 12px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    z-index: 90;
    box-shadow: var(--shadow);
  }

  body:has(#tab-map.active) {
    overflow: hidden;
  }

  body:has(#tab-map.active) .content {
    padding: 0;
  }

  body:has(#tab-map.active) #tab-map.panel.active {
    position: fixed;
    inset: var(--topbar-h) 0 0 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    background: var(--bg);
  }

  body:has(#tab-map.active) #tab-map > .panelHead {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 8px;
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: var(--radius);
    background: rgba(7, 10, 15, .74);
    backdrop-filter: blur(10px);
  }

  body:has(#tab-map.active) #tab-map > .panelHead h2,
  body:has(#tab-map.active) #tab-map > .panelHead p {
    display: none;
  }

  body:has(#tab-map.active) #tab-map > .panelHead .seg {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    overflow: visible;
  }

  body:has(#tab-map.active) #tab-map > .panelHead .segBtn {
    min-width: 0;
    min-height: 38px;
    padding: 4px 5px;
    font-size: 11px;
    line-height: 1.05;
  }

  body:has(#tab-map.active) .mapWrap {
    flex: 1;
    min-height: 0;
    border-radius: 0;
  }

  body:has(#tab-map.active) #mapCanvas {
    height: 100%;
    min-height: 0;
  }

  body:has(#tab-map.active) .mapToolbar {
    top: 70px;
    left: 8px;
    right: 8px;
    flex-direction: row;
    align-items: flex-start;
  }

  body:has(#tab-map.active) .toolbarGroup {
    min-height: 44px;
    max-width: calc(50vw - 12px);
    overflow-x: auto;
  }

  body:has(#tab-map.active) .toolBtn {
    min-width: 42px;
    min-height: 42px;
    height: 42px;
  }

  body:has(#tab-map.active) .wideTool {
    min-width: 96px;
  }

  body:has(#tab-map.active) .avaMapScoreboard {
    top: 122px;
    left: 8px;
    right: 8px;
    transform: none;
  }

  body:has(#tab-map.active) .mapFooter {
    left: 8px;
    right: 8px;
    bottom: calc(min(46dvh, 340px) + 116px + env(safe-area-inset-bottom));
    z-index: 7;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body:has(#tab-map.active) .mapFooter::-webkit-scrollbar {
    display: none;
  }

  body:has(#tab-map.active) .miniPanel {
    min-width: 108px;
    padding: 6px 8px;
    background: rgba(7, 10, 15, .78);
  }

  .mobileTargetBar {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: calc(min(46dvh, 340px) + env(safe-area-inset-bottom) + 8px);
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 9px;
    border: 1px solid rgba(80, 227, 164, .24);
    border-radius: var(--radius);
    background: rgba(7, 10, 15, .84);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-soft);
  }

  .mobileTargetBar span,
  .mobileTargetBar small {
    display: block;
    color: var(--muted-2);
    font-size: 11px;
  }

  .mobileTargetBar b {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
  }

  .mobileTargetBar .btn {
    min-width: 82px;
    min-height: 44px;
  }

  body:has(#tab-map.active) #tab-map > .twoCol {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: block;
    pointer-events: none;
  }

  body:has(#tab-map.active) #tab-map > .twoCol > .surface:not(.sendMarchPanel) {
    display: none;
  }

  body:has(#tab-map.active) .sendMarchPanel {
    pointer-events: auto;
    max-height: min(46dvh, 340px);
    overflow-y: auto;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, .46);
    background:
      linear-gradient(180deg, rgba(80, 227, 164, .105), rgba(255, 255, 255, .04)),
      rgba(11, 17, 26, .96);
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel {
    max-height: min(72dvh, 620px);
  }

  body.sendSheetExpanded:has(#tab-map.active) .mobileTargetBar,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .mobileTargetBar,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .mobileTargetBar {
    display: none;
  }

  .sendSheetHandle {
    display: block;
    width: 52px;
    height: 5px;
    min-height: 5px;
    padding: 0;
    margin: 0 auto 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .32);
    cursor: pointer;
  }

  body:has(#tab-map.active) .sendMarchPanel .surfaceHead {
    min-height: 0;
    margin-bottom: 10px;
    padding-bottom: 8px;
  }

  body:has(#tab-map.active) .sendMarchPanel .surfaceHead h3 {
    font-size: 14px;
  }

  body:has(#tab-map.active) .sendMarchPanel .surfaceHead p {
    display: none;
  }

  body:has(#tab-map.active) .marchClassTabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body:has(#tab-map.active) .marchClassBtn {
    min-height: 52px;
    font-size: 12px;
  }

  body:has(#tab-map.active) .marchClassBtn::first-letter {
    font-size: 18px;
  }

  body:has(#tab-map.active) .sendMarchGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  body:has(#tab-map.active) .presetRow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  body:has(#tab-map.active) #quickMarchTroops {
    font-size: 18px;
    text-align: center;
  }

  body:has(#tab-map.active) #btnQuickMarch {
    position: sticky;
    bottom: 0;
    z-index: 2;
    min-height: 52px;
    box-shadow: 0 -8px 26px rgba(0, 0, 0, .30);
  }

  body:has(#tab-map.active) .quickMarchStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  body:has(#tab-map.active) #commandDock {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(min(46dvh, 340px) + 62px + env(safe-area-inset-bottom));
    z-index: 9;
    height: 92px;
    min-height: 0;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: var(--radius);
    background: rgba(7, 10, 15, .82);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-soft);
  }

  body.sendSheetExpanded:has(#tab-map.active) #commandDock,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) #commandDock,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) #commandDock {
    display: none;
  }

  body:has(#tab-map.active) #commandDock .dockHead {
    display: none;
  }

  body:has(#tab-map.active) #commandDock .dockActions {
    display: none;
  }

  body:has(#tab-map.active) #commandDock .marchList {
    height: 100%;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px;
    scrollbar-width: none;
  }

  body:has(#tab-map.active) #commandDock .marchList::-webkit-scrollbar {
    display: none;
  }

  body:has(#tab-map.active) #commandDock .marchItem {
    flex: 0 0 188px;
    min-width: 188px;
    height: 104px;
    margin: 0;
    padding: 9px;
    overflow: hidden;
  }

  body:has(#tab-map.active) #commandDock .marchItem .muted2,
  body:has(#tab-map.active) #commandDock .marchItem .costLine,
  body:has(#tab-map.active) #commandDock .marchItem .gatherLine,
  body:has(#tab-map.active) #commandDock .marchItem .battleReportGrid {
    display: none;
  }

  body:has(#tab-map.active) #commandDock .marchMeta {
    margin-top: 5px;
    font-size: 11px;
  }

  body:has(#tab-map.active) .normalWarChestPanel {
    display: none;
  }

  .allianceTabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    gap: 7px;
  }

  .allianceTabs .subTab {
    min-width: 0;
    white-space: normal;
  }

  .leaderboardGrid,
  #avaLeaderboardGrid {
    gap: 10px;
  }

  .leaderCard {
    padding: 11px;
  }

  .leaderCard .detailLine {
    padding: 8px 0;
  }

  .battleReportCard {
    border-color: rgba(119, 167, 255, .20);
    background:
      linear-gradient(180deg, rgba(119, 167, 255, .07), rgba(255,255,255,.035)),
      rgba(255, 255, 255, .044);
  }

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

  .chatBox {
    height: 36dvh;
    min-height: 220px;
    align-content: end;
  }

  .chatMsg,
  .dmBubble {
    max-width: 88%;
    border-radius: 14px;
  }

  .chatMsg.mine,
  .dmMine .dmBubble {
    margin-left: auto;
    border-color: rgba(119, 167, 255, .28);
    background: rgba(119, 167, 255, .12);
  }

  .chatMsg:not(.mine) {
    margin-right: auto;
  }

  #clientSettingsGrid .toggleRow:first-child {
    border-color: rgba(80, 227, 164, .30);
    background: rgba(80, 227, 164, .085);
  }
}

.trailerOverlay {
  position: fixed;
  inset: 0;
  z-index: 2400;
  overflow: hidden;
  color: #f4fbff;
  background: #050914;
}

.trailerOverlay::before,
.trailerOverlay::after {
  content: "";
  position: absolute;
  inset: -18%;
  pointer-events: none;
}

.trailerOverlay::before {
  background:
    radial-gradient(circle at 18% 20%, rgba(119, 167, 255, .18), transparent 30%),
    radial-gradient(circle at 82% 30%, rgba(255, 98, 98, .16), transparent 28%),
    radial-gradient(circle at 50% 82%, rgba(80, 227, 164, .13), transparent 34%);
  animation: trailerAura 9s ease-in-out infinite alternate;
}

.trailerOverlay::after {
  background: linear-gradient(180deg, rgba(0,0,0,.24), transparent 22%, transparent 72%, rgba(0,0,0,.46));
}

#trailerCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.trailerHud {
  position: absolute;
  left: max(18px, env(safe-area-inset-left));
  right: max(18px, env(safe-area-inset-right));
  top: max(14px, env(safe-area-inset-top));
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}

.trailerHud > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.trailerPill,
.trailerHud b,
.trailerStagePill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(5, 9, 18, .62);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
}

.trailerPill {
  color: #061018;
  border-color: rgba(255, 211, 110, .75);
  background: linear-gradient(135deg, #ffd36e, #50e3a4);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
}

.trailerHud b {
  color: #eaf4ff;
  font-size: 13px;
}

.trailerSkip {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #f4fbff;
  background: rgba(5, 9, 18, .66);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  pointer-events: auto;
}

.trailerSkip:hover {
  border-color: rgba(255, 211, 110, .55);
  background: rgba(255, 211, 110, .12);
}

.trailerCopy {
  position: absolute;
  left: max(26px, env(safe-area-inset-left));
  right: max(26px, env(safe-area-inset-right));
  bottom: max(32px, calc(env(safe-area-inset-bottom) + 26px));
  z-index: 2;
  width: min(760px, calc(100vw - 52px));
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(5, 9, 18, .72), rgba(5, 9, 18, .52));
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

.trailerCopy span {
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  color: #061018;
  background: #ffd36e;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.trailerCopy h2 {
  font-size: clamp(34px, 7vw, 72px);
  line-height: .94;
  color: #fff;
  text-shadow: 0 14px 34px rgba(0,0,0,.36);
}

.trailerCopy p {
  max-width: 620px;
  color: #d7e6f4;
  font-size: clamp(14px, 2.3vw, 18px);
  line-height: 1.35;
}

.trailerProgress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}

.trailerProgress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #50e3a4, #ffd36e, #77a7ff);
  box-shadow: 0 0 18px rgba(80, 227, 164, .32);
}

.trailerRunning .modalOverlay,
.trailerRunning #authOverlay {
  pointer-events: none;
}

@keyframes trailerAura {
  from { transform: translate3d(-1%, -1%, 0) scale(1); opacity: .9; }
  to { transform: translate3d(1%, 1%, 0) scale(1.04); opacity: 1; }
}

@media (max-width: 680px) {
  .trailerHud {
    left: 10px;
    right: 10px;
    top: max(10px, env(safe-area-inset-top));
  }

  .trailerPill {
    display: none;
  }

  .trailerHud b {
    min-height: 36px;
    font-size: 12px;
  }

  .trailerSkip {
    min-height: 42px;
    padding: 0 14px;
  }

  .trailerCopy {
    left: 10px;
    right: 10px;
    bottom: max(12px, calc(env(safe-area-inset-bottom) + 12px));
    width: auto;
    padding: 14px;
    border-radius: 14px;
  }

  .trailerCopy h2 {
    font-size: clamp(28px, 11vw, 48px);
  }

  .trailerCopy p {
    font-size: 13px;
  }
}

/* Final phone map overrides: must remain last. */
@media (max-width: 700px) {
  body:has(#tab-map.active) {
    --map-mobile-top: 74px;
    --send-sheet-collapsed: 76px;
    overflow: hidden;
  }

  body:has(#tab-map.active) .topbar {
    min-height: var(--map-mobile-top);
    height: var(--map-mobile-top);
    max-height: var(--map-mobile-top);
  }

  body:has(#tab-map.active) #tab-map.panel.active {
    inset: var(--map-mobile-top) 0 0 0;
  }

  body:has(#tab-map.active) #tab-map > .panelHead {
    top: 6px;
    left: 6px;
    right: 6px;
    padding: 6px;
    z-index: 70;
  }

  body:has(#tab-map.active) #tab-map > .panelHead .seg {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  body:has(#tab-map.active) #tab-map > .panelHead .segBtn {
    min-height: 38px;
    padding: 4px 3px;
    font-size: 0;
  }

  body:has(#tab-map.active) #btnModeGlobal::after { content: "World"; }
  body:has(#tab-map.active) #btnModeAllianceWar::after { content: "A-War"; }
  body:has(#tab-map.active) #btnModeNormalWar::after { content: "War"; }
  body:has(#tab-map.active) #btnModeAva::after { content: "AvA"; }
  body:has(#tab-map.active) #btnModePrivateMaps::after { content: "Island"; }

  body:has(#tab-map.active) #tab-map > .panelHead .segBtn::after {
    display: block;
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
  }

  body:has(#tab-map.active) .notificationStrip {
    position: fixed;
    left: 6px;
    right: 6px;
    top: calc(var(--map-mobile-top) + 60px);
    z-index: 85;
    max-height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
  }

  body:has(#tab-map.active) .notificationStrip span {
    min-height: 32px;
    max-width: 82vw;
    white-space: nowrap;
    pointer-events: auto;
    background: rgba(7, 10, 15, .82);
    backdrop-filter: blur(10px);
  }

  body:has(#tab-map.active) .notificationStrip .tutorialAlert {
    color: #2b2100;
    background: #ffd36e;
  }

  body:has(#tab-map.active) .mapToolbar {
    top: 96px;
    left: 6px;
    right: 6px;
  }

  body:has(#tab-map.active) .avaMapScoreboard {
    top: 148px;
  }

  body:has(#tab-map.active) .sendMarchPanel {
    max-height: var(--send-sheet-collapsed);
    min-height: var(--send-sheet-collapsed);
    overflow: hidden;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel {
    max-height: min(74dvh, 640px);
    min-height: 0;
    overflow-y: auto;
  }

  body:has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body:has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body:has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#tab-map.active) .sendMarchPanel .quickMarchStats {
    display: none;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .quickMarchStats,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .quickMarchStats,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .quickMarchStats {
    display: grid;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .surfaceHead {
    display: flex;
  }

  body:has(#tab-map.active) .sendSheetHandle {
    display: block;
    width: min(240px, 72vw);
    height: 50px;
    min-height: 50px;
    margin-bottom: 0;
    border: 1px solid rgba(80, 227, 164, .32);
    border-radius: 999px;
    background: rgba(80, 227, 164, .14);
    color: #eafff7;
    box-shadow: var(--shadow-soft);
  }

  body:has(#tab-map.active) .sendSheetHandle::after {
    content: "Send March";
    font-weight: 900;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendSheetHandle,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendSheetHandle,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendSheetHandle {
    width: 52px;
    height: 5px;
    min-height: 5px;
    margin-bottom: 10px;
    border: 0;
    background: rgba(255, 255, 255, .32);
    box-shadow: none;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendSheetHandle::after,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendSheetHandle::after,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendSheetHandle::after {
    content: "";
  }

  body:has(#tab-map.active) .mobileTargetBar {
    bottom: calc(var(--send-sheet-collapsed) + env(safe-area-inset-bottom) + 8px);
  }

  body:has(#tab-map.active) #commandDock {
    bottom: calc(var(--send-sheet-collapsed) + 62px + env(safe-area-inset-bottom));
  }

  body:has(#tab-map.active) .mapFooter {
    bottom: calc(var(--send-sheet-collapsed) + 160px + env(safe-area-inset-bottom));
  }

  body.sendSheetExpanded:has(#tab-map.active) .mobileTargetBar,
  body.sendSheetExpanded:has(#tab-map.active) #commandDock,
  body.sendSheetExpanded:has(#tab-map.active) .mapFooter,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .mobileTargetBar,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) #commandDock,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .mapFooter,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .mobileTargetBar,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) #commandDock,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .mapFooter {
    display: none;
  }

  body:has(#tab-map.active) #normalWarChestPanel {
    display: none !important;
  }

  body:has(#tab-map.active) .marchClassBtn {
    min-height: 58px;
    display: grid;
    place-items: center;
    gap: 3px;
    padding: 7px 4px;
  }

  body:has(#tab-map.active) .marchClassBtn::before {
    min-width: 34px;
    height: 26px;
    margin-right: 0;
  }

  body:has(#tab-map.active) .quickMarchStats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Absolute final phone map fix: keep this as the last CSS block. */
@media (max-width: 700px) {
  body:has(#tab-map.active) {
    --map-mobile-top: 76px !important;
    --send-sheet-collapsed: 74px !important;
    --mobile-target-h: 60px !important;
    overflow: hidden !important;
  }

  body:has(#tab-map.active) .app,
  body:has(#tab-map.active) .content {
    height: 100dvh !important;
    overflow: hidden !important;
  }

  body:has(#tab-map.active) .topbar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    height: var(--map-mobile-top) !important;
    min-height: var(--map-mobile-top) !important;
    max-height: var(--map-mobile-top) !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    grid-template-areas:
      "menu stats logout"
      "menu res logout" !important;
    padding: max(4px, env(safe-area-inset-top)) 6px 5px !important;
    z-index: 220 !important;
  }

  body:has(#tab-map.active) #tab-map.panel.active {
    position: fixed !important;
    inset: var(--map-mobile-top) 0 0 0 !important;
    display: block !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body:has(#tab-map.active) #tab-map > .panelHead {
    position: fixed !important;
    top: calc(var(--map-mobile-top) + 7px) !important;
    left: 8px !important;
    right: 8px !important;
    z-index: 160 !important;
    display: block !important;
    padding: 6px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    background: rgba(7, 10, 15, .78) !important;
    backdrop-filter: blur(14px) !important;
  }

  body:has(#tab-map.active) #tab-map > .panelHead > div:first-child {
    display: none !important;
  }

  body:has(#tab-map.active) #tab-map > .panelHead .seg {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
    overflow: visible !important;
  }

  body:has(#tab-map.active) #tab-map > .panelHead .segBtn {
    min-height: 42px !important;
    min-width: 0 !important;
    padding: 4px 3px !important;
    border-radius: 12px !important;
    font-size: 0 !important;
  }

  body:has(#tab-map.active) .notificationStrip {
    position: fixed !important;
    top: calc(var(--map-mobile-top) + 61px) !important;
    left: 8px !important;
    right: 8px !important;
    z-index: 170 !important;
    max-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  body:has(#tab-map.active) .mapWrap {
    position: fixed !important;
    inset: var(--map-mobile-top) 0 0 0 !important;
    width: 100vw !important;
    height: calc(100dvh - var(--map-mobile-top)) !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  body:has(#tab-map.active) #mapCanvas {
    width: 100vw !important;
    height: calc(100dvh - var(--map-mobile-top)) !important;
    min-height: 0 !important;
  }

  body:has(#tab-map.active) .mapToolbar {
    top: 112px !important;
    left: 8px !important;
    right: 8px !important;
    z-index: 145 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }

  body:has(#tab-map.active) .toolbarGroup {
    max-width: calc(50vw - 12px) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  body:has(#tab-map.active) #tab-map > .twoCol {
    display: block !important;
    margin: 0 !important;
  }

  body:has(#tab-map.active) #tab-map > .twoCol > .surface:not(.sendMarchPanel) {
    display: none !important;
  }

  body:has(#tab-map.active) .sendMarchPanel {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 190 !important;
    display: grid !important;
    justify-items: center !important;
    width: auto !important;
    min-height: var(--send-sheet-collapsed) !important;
    max-height: var(--send-sheet-collapsed) !important;
    padding: 10px 12px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel {
    justify-items: stretch !important;
    max-height: min(76dvh, 660px) !important;
    overflow-y: auto !important;
  }

  body:has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body:has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body:has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#tab-map.active) .sendMarchPanel .quickMarchStats {
    display: none !important;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .surfaceHead,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .surfaceHead {
    display: flex !important;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .quickMarchStats,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .quickMarchStats,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .marchClassTabs,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .quickMarchStats {
    display: grid !important;
    width: 100% !important;
  }

  body.sendSheetExpanded:has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .sendMarchPanel .sendMarchGrid,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .sendMarchPanel .sendMarchGrid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  body:has(#tab-map.active) .sendSheetHandle {
    width: min(320px, 78vw) !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    border-radius: 999px !important;
  }

  body:has(#tab-map.active) .mobileTargetBar {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(var(--send-sheet-collapsed) + max(18px, env(safe-area-inset-bottom) + 10px)) !important;
    z-index: 185 !important;
    min-height: var(--mobile-target-h) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 9px 10px !important;
    border-radius: 18px !important;
  }

  body:has(#tab-map.active) #commandDock {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(var(--send-sheet-collapsed) + var(--mobile-target-h) + max(28px, env(safe-area-inset-bottom) + 20px)) !important;
    z-index: 150 !important;
    height: 104px !important;
    max-height: 104px !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 18px !important;
  }

  body:has(#tab-map.active) #commandDock .dockHead,
  body:has(#tab-map.active) #commandDock .dockActions {
    display: none !important;
  }

  body:has(#tab-map.active) #commandDock .marchList {
    height: 100% !important;
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 9px !important;
  }

  body:has(#tab-map.active) #commandDock .marchItem {
    flex: 0 0 188px !important;
    min-height: 84px !important;
    margin: 0 !important;
  }

  body.sendSheetExpanded:has(#tab-map.active) .mobileTargetBar,
  body.sendSheetExpanded:has(#tab-map.active) #commandDock,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) .mobileTargetBar,
  body:has(#quickMarchTroops:focus):has(#tab-map.active) #commandDock,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) .mobileTargetBar,
  body:has(#quickMarchCaptain:focus):has(#tab-map.active) #commandDock,
  body:has(#tab-map.active) .mapFooter {
    display: none !important;
  }
}




/* Release auth final fix: Forgot Password is plain text, never a dark button/bar. */
#authOverlay #btnForgotPassword,
#authOverlay #btnForgotPassword.authLink,
#authOverlay #btnForgotPassword.linkBtn,
#authOverlay .authCard #btnForgotPassword {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 8px auto 0 !important;
  padding: 6px 10px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--blue) !important;
  cursor: pointer !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  overflow: visible !important;
  position: relative !important;
  text-decoration: none !important;
  text-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

#authOverlay #btnForgotPassword:hover,
#authOverlay #btnForgotPassword:active,
#authOverlay #btnForgotPassword:focus,
#authOverlay #btnForgotPassword:focus-visible {
  border: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #9fc0ff !important;
  text-decoration: none !important;
}

#authOverlay #btnForgotPassword::before,
#authOverlay #btnForgotPassword::after {
  content: none !important;
  display: none !important;
}

#authOverlay #recoveryBox.hidden {
  display: none !important;
}