/* The website name leads; the original game's name stays on the second line. */
/* Account loading and balance changes must not reposition the navigation. */
.site-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.site-header > .brand { min-width: 0; }
.main-nav { margin: 0; align-self: center; }
.main-nav a { height: auto; padding: 8px 0; }
.header-account {
  min-width: 0;
  width: 100%;
  height: 36px;
  justify-content: flex-end;
}
.header-credit { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.account-name { min-width: 0; }
.account-avatar { flex-shrink: 0; }
.account-label { overflow: hidden; text-overflow: ellipsis; }
.brand-lockup {
  --brand-title-size: 30px;
  --brand-game-size: 11px;
}
.brand-lockup .brand-title {
  display: block;
  font: 760 var(--brand-title-size)/1.2 "Segoe UI", Arial, sans-serif;
  letter-spacing: -1.1px;
  color: #eee9de;
  white-space: nowrap;
  border: 0;
  margin: 0;
  padding: 0;
}
.brand-lockup .brand-mix { color: #a3c8bc; font: inherit; }
.brand-lockup > img { flex-shrink: 0; object-fit: contain; }
.brand-lockup .brand-copy { display: block; min-width: 0; margin: 0; letter-spacing: normal; }
.brand-lockup .brand-game {
  display: block;
  font: 500 var(--brand-game-size)/1.4 "Segoe UI", Arial, sans-serif;
  letter-spacing: .25px;
  color: #bbc6d7;
  white-space: normal;
  margin-top: 4px;
}
.footer-brand.brand-lockup {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  --brand-title-size: 20px;
  margin-bottom: 8px;
}
.wordmark.brand-lockup {
  width: 220px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-shadow: none;
  --brand-title-size: 26px;
}
@media (min-width: 1450px) {
  .wordmark.brand-lockup { width: 240px; --brand-title-size: 30px; }
}
@media (min-width: 851px) and (max-width: 1080px) {
  .wordmark.brand-lockup { width: 175px; --brand-title-size: 22px; }
}
@media (max-width: 1150px) {
  .site-header { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: auto; min-height: 98px; padding: 18px 25px; gap: 16px 24px; }
  .header-account { margin-left: auto; }
  .main-nav { grid-column: 1 / -1; order: 3; width: 100%; justify-content: center; gap: 28px; }
  .main-nav a { padding: 8px 0; }
}
@media (max-width: 850px) {
  .wordmark.brand-lockup { width: min(260px, calc(100% - 80px)); --brand-title-size: 24px; }
  .arena-header { height: 85px; align-items: flex-start; }
  .arena-header .match-heading { display: none; }
  .arena .player-profile { top: 96px; }
  .arena .deck-zone { top: 98px; }
  .arena .arena-hud { top: 143px; }
  .arena .turn-guide { top: 233px; }
  .arena .battlefield { top: 288px; }
}
@media (max-width: 720px) {
  body[data-page] { min-width: 0; }
  .site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 16px; gap: 12px; }
  .brand.brand-lockup { grid-column: 1 / -1; gap: 12px; }
  .brand.brand-lockup > span { min-width: 0; }
  .brand.brand-lockup > img { width: 34px; flex-shrink: 0; }
  .header-account { grid-column: 1; grid-row: 2; margin: 0; justify-self: start; justify-content: flex-start; }
  .header-account .text-link { display: inline; }
  .mobile-menu.icon-button { grid-column: 2; grid-row: 2; order: 0; width: 36px; height: 36px; }
  .main-nav { top: 100%; gap: 0; }
  .main-nav a { padding: 12px 4px; }
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero-cards { position: relative; top: auto; right: auto; bottom: auto; align-self: center; flex-shrink: 0; margin: 4px 0 28px; }
  .hero p { font-size: 13px; }
  .featured-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.welcome-line, .journey-bottom, .progress-label { flex-wrap: wrap; row-gap: 8px; }
.featured-caption small { letter-spacing: .4px; }
.footer-brand .brand-game { max-width: 300px; }
@media (max-width: 420px) {
  .brand.brand-lockup { --brand-title-size: 26px; }
}

.rare-pulls-intro { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.community-pulls .featured-caption .pull-player { display: block; font-size: 11px; line-height: 1.5; color: var(--muted); margin-top: 7px; overflow-wrap: anywhere; }
.pull-player strong { color: var(--text); font-weight: 600; }
.rare-pulls-empty { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--muted); font-size: 13px; }
@media (max-width: 420px) { .community-pulls .featured-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Community link shares the navigation color and keeps its icon compact. */
.discord-link { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.discord-icon { flex-shrink: 0; }