/* Desktop command center fits the viewport; only live ranking rows scroll. */
html[data-ui-platform='web']:not([data-ui-device='psg1']) .main-menu-web__content {
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
  padding-bottom: clamp(20px, 2.5dvh, 32px);
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .main-menu-web__overview {
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 23vw, 400px);
  grid-template-rows: minmax(0, 1fr) clamp(96px, 13dvh, 144px);
  align-items: stretch;
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-center {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  aspect-ratio: 6 / 5;
  max-height: 100%;
  align-self: start;
  box-sizing: border-box;
  min-height: 0;
  padding: clamp(8px, 1.2dvh, 16px);
  gap: 8px;
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-screen {
  flex: 1;
  min-height: 0;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  padding: 6px;
  gap: 6px;
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-center .main-menu-web__overview-banner {
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 30%;
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-start {
  width: min(72%, 50dvh);
  min-height: 0;
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-center .main-menu-web__reward-briefing {
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 6px;
  gap: 4px;
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-center .main-menu-web__reward-header { padding: 0 0 4px; gap: 8px; }
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-center .main-menu-web__reward-header .main-menu-web__panel-icon { width: 28px; height: 28px; flex-basis: 28px; }
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-center .main-menu-web__reward-header h2 { font-size: clamp(16px, 2.4dvh, 26px); }
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-center .main-menu-web__reward-header p { font-size: 11px; }
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-center .main-menu-web__reward-tiers { min-height: 0; gap: 6px; }
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-center .main-menu-web__chest { width: auto; height: clamp(30px, 6dvh, 85px); max-width: 100%; margin: 0 auto -6px; }
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-center .main-menu-web__podium { min-height: 0; padding: 8px 2px 4px; gap: 4px; }
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-center .main-menu-web__podium strong { font-size: clamp(14px, 2dvh, 24px); }
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-center .main-menu-web__podium span { font-size: clamp(12px, 1.7dvh, 20px); }
html[data-ui-platform='web']:not([data-ui-device='psg1']) .main-menu-web__leaderboard-preview {
  grid-area: 1 / 2 / 3 / 3;
  min-height: 0;
  height: 100%;
  grid-template-rows: auto 28px minmax(0, 1fr) auto;
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .main-menu-web__commands {
  min-height: 0;
  max-height: 100%;
  /* Pack buttons at their artwork height instead of spreading five rows
     across the full sidebar height. */
  grid-template-rows: repeat(5, minmax(0, max-content));
  align-content: start;
  row-gap: 6px;
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .main-menu-web__commands .main-menu-web__action { max-height: 100%; }

.web-home-how { display: none; }
.home-how-icon--tank {
  mask: url('/assets/web-play-tank-idle-v2.png') center / contain no-repeat;
  -webkit-mask: url('/assets/web-play-tank-idle-v2.png') center / contain no-repeat;
}
.home-how-icon { width: 44px; height: 44px; flex: 0 0 44px; object-fit: contain; }
html[data-ui-device='psg1'] .psg1-round-sidebar .home-how-icon {
  width: clamp(28px, 4vw, 52px); height: clamp(28px, 4vw, 52px); flex-basis: clamp(28px, 4vw, 52px);
}
/* Cover Android's baked numbered instructions with the same live icon steps. */
html[data-ui-platform='android']:not([data-ui-device='psg1']) .main-menu-web .main-menu-web__how-it-works {
  display: flex; flex-direction: column; position: absolute;
  left: 3.4%; top: 71.5%; width: 93%; height: 24%;
  box-sizing: border-box; margin: 0; padding: 4px 1%;
  border: 0; background: #041923; box-shadow: none;
}
html[data-ui-platform='android']:not([data-ui-device='psg1']) .main-menu-web__how-it-works h3 {
  margin: 0 0 4px; font-size: clamp(12px, 2.8cqw, 22px); line-height: 1;
}
html[data-ui-platform='android']:not([data-ui-device='psg1']) .main-menu-web__how-it-works ol {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1;
  gap: 8px; margin: 0; padding: 0; list-style: none;
}
html[data-ui-platform='android']:not([data-ui-device='psg1']) .main-menu-web__how-it-works li {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font: clamp(9px, 1.8cqw, 17px)/1.2 'Battle Cities UI', sans-serif;
}
html[data-ui-platform='android']:not([data-ui-device='psg1']) .home-how-icon {
  width: clamp(24px, 5cqw, 48px); height: clamp(24px, 5cqw, 48px); flex-basis: clamp(24px, 5cqw, 48px);
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-how {
  display: flex;
  flex-direction: column;
  grid-area: 2 / 1;
  min-width: 0;
  min-height: 0;
  padding: 12px 14px 8px;
  gap: 0;
  box-sizing: border-box;
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-how h3 {
  margin: 0 0 6px;
  color: var(--bc-command);
  font: 700 clamp(16px, 2dvh, 24px)/1 'Battle Cities UI', sans-serif;
  text-transform: uppercase;
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-how ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  flex: 1;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-how li {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  color: var(--bc-text);
  font: clamp(12px, 1.1vw, 18px)/1.2 'Battle Cities UI', sans-serif;
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-how b {
  display: grid;
  place-items: center;
  flex: 0 0 clamp(20px, 2.5dvh, 30px);
  aspect-ratio: 1;
  border: 2px solid var(--bc-command);
  border-radius: 50%;
  color: var(--bc-command);
  font-size: clamp(14px, 1.8dvh, 22px);
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-how li + li {
  border-left: 2px solid #3c5763;
  box-shadow: -1px 0 #02090e;
  padding-left: 8px;
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-how li img {
  flex: 0 0 clamp(24px, 3.5vw, 48px);
  width: clamp(24px, 3.5vw, 48px);
  height: clamp(24px, 4dvh, 44px);
  object-fit: contain;
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-how ol {
  background: linear-gradient(#258fa810 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, #258fa810 1px, transparent 1px) 0 0 / 20px 20px;
}

/* One shared grid aligns the command stack with the TV and lets the
   instruction panel span both columns without a floating empty row. */
html[data-ui-platform='web']:not([data-ui-device='psg1']) .main-menu-web__content {
  grid-template-columns: clamp(100px, 16dvh, 190px) minmax(0, 1fr) clamp(260px, 23vw, 400px);
  grid-template-rows: minmax(0, 1fr) clamp(112px, 16dvh, 200px);
  gap: 12px;
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .main-menu-web__overview {
  display: contents;
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .main-menu-web__commands {
  grid-area: 1 / 1;
  height: 100%;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  align-content: stretch;
  padding: 0;
  margin: 0;
  gap: 6px;
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .main-menu-web__commands .main-menu-web__action:is([data-menu-action='start'], [data-menu-action='shop'], [data-menu-action='ranking'], [data-menu-action='headquarters'], [data-menu-action='socials']) {
  height: 100%;
  width: auto;
  max-width: 100%;
  justify-self: center;
  align-self: stretch;
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-center {
  grid-area: 1 / 2;
  height: 100%;
  aspect-ratio: auto;
  align-self: stretch;
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .web-home-how {
  grid-area: 2 / 1 / 3 / 3;
}
html[data-ui-platform='web']:not([data-ui-device='psg1']) .main-menu-web__leaderboard-preview {
  grid-area: 1 / 3 / 3 / 4;
}