:root {
  --bg: #0a1115;
  --panel: #0e181d;
  --line: #243035;
  --text: #e9eeeb;
  --muted: #8a9b9f;
  --green: #a8d8b5;
  --accent: #a8d8b5;
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
a,
select {
  -webkit-tap-highlight-color: transparent;
}
button,
select {
  font: inherit;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,
a:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #effde9;
  outline-offset: 5px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: -100px;
  padding: 12px;
  background: var(--green);
  color: #102018;
  z-index: 20;
}
.skip-link:focus {
  top: 10px;
  left: 10px;
}
.topbar {
  height: 88px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 4.3%;
  background: #0b1317;
}
.brand {
  display: flex;
  gap: 13px;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  white-space: nowrap;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 44px;
  color: #b9d5bf;
}
.brand small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 3px;
  font-weight: 400;
  margin-top: 7px;
}
.desktop-nav {
  display: flex;
  height: 100%;
  gap: 26px;
  margin: auto;
}
.desktop-nav a,
.desktop-nav button {
  font-size: 14px;
  display: flex;
  gap: 9px;
  align-items: center;
  border: 0;
  background: none;
  color: #697a80;
  padding: 0 3px;
}
.desktop-nav a {
  color: var(--green);
  border-bottom: 2px solid var(--green);
}
.preview-badge {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 12px;
  color: #afbbb9;
  white-space: nowrap;
}
.preview-badge span,
.live-dot {
  width: 6px;
  height: 6px;
  background: #a8d8b5;
  display: inline-block;
  border-radius: 50%;
}
.wallet-button {
  padding: 12px 15px;
  display: flex;
  gap: 9px;
  align-items: center;
  color: #8c9999;
  border: 1px solid #2d393b;
  border-radius: 5px;
  background: transparent;
  font-size: 12px;
}
.main-content {
  max-width: 1600px;
  margin: 0 auto;
  padding: 38px 4.3% 0;
}
.world-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 29px;
}
.eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.8px;
  color: #8faaa1;
  display: flex;
  align-items: center;
  gap: 9px;
}
.heading-divider {
  margin: 0 5px;
  color: #43534f;
}
.world-heading h1 {
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: -1.5px;
  font-weight: 500;
  margin: 15px 0 9px;
}
.title-dot {
  color: var(--green);
}
.world-heading p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  letter-spacing: 0.2px;
}
.season-clock {
  text-align: right;
  border-left: 1px solid var(--line);
  padding: 2px 0 2px 30px;
  min-width: 190px;
}
.season-clock .eyebrow {
  justify-content: flex-end;
}
.season-clock strong {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 24px;
  font-weight: 400;
  display: block;
  margin: 9px 0 7px;
  letter-spacing: 1px;
}
.season-clock > span:last-child {
  color: var(--muted);
  font-size: 12px;
}
.world-summary {
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  align-items: center;
  background: #101a1e;
  padding: 16px 24px;
  margin-bottom: 24px;
  gap: 40px;
}
.world-summary > div {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 13px;
  color: #9bacad;
}
.world-summary strong {
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  margin-right: 7px;
}
.summary-icon {
  color: #849a96;
}
.small-orbs {
  font-size: 30px;
  letter-spacing: -6px;
  margin-right: 5px;
}
.world-summary .summary-note {
  margin-left: auto;
  color: #9bada6;
  font-size: 12px;
}
.world-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 20px;
}
.map-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(160deg, #101c21, #0c151a);
}
.map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line);
}
h2 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}
.map-toolbar h2 {
  display: flex;
  gap: 10px;
  align-items: center;
}
.map-toolbar h2 svg {
  color: #8fa39c;
}
.view-switch {
  display: flex;
  padding: 3px;
  border: 1px solid #263338;
  border-radius: 5px;
  gap: 3px;
  background: #0b1418;
}
.view-switch button {
  display: flex;
  gap: 7px;
  align-items: center;
  border: 0;
  background: transparent;
  border-radius: 3px;
  color: #94a19f;
  font-size: 12px;
  padding: 8px 12px;
  min-height: 36px;
}
.view-switch button[aria-pressed="true"] {
  color: #dfe9e2;
  background: #26332f;
}
.map-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px 0;
  position: relative;
  z-index: 1;
}
.map-filters select {
  font-size: 12px;
  min-height: 38px;
  background: #152025;
  border: 1px solid #2b393d;
  color: #c3d0cb;
  border-radius: 4px;
  padding: 8px 30px 8px 12px;
}
.filter-count {
  margin-left: auto;
  font-size: 11px;
  color: #768e91;
}
.map-scroll {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #3a5357 transparent;
}
.territory-map {
  display: block;
  width: 100%;
  min-width: 650px;
  height: auto;
  min-height: 410px;
  max-height: 570px;
}
.territory-cell {
  cursor: pointer;
  color: var(--accent);
  transition: opacity 0.2s;
}
.territory-cell polygon {
  transition:
    fill 0.18s,
    stroke 0.18s,
    stroke-opacity 0.18s;
}
.territory-cell:hover polygon {
  fill: color-mix(in srgb, var(--accent) 24%, #142026);
  stroke-opacity: 1;
}
.territory-cell.is-selected:hover polygon {
  fill: var(--accent);
}
.territory-cell.is-selected {
  color: #142a23;
}
.territory-cell:focus-visible {
  outline: none;
}
.territory-cell:focus-visible polygon {
  stroke: #fff;
  stroke-width: 3;
  stroke-opacity: 1;
}
.territory-cell.is-filtered {
  opacity: 0.12;
  cursor: default;
  pointer-events: none;
}
.cell-code {
  font-size: 8px;
  letter-spacing: 0.7px;
  fill: currentColor;
  opacity: 0.78;
}
.cell-name {
  font-size: 10px;
  fill: currentColor;
  font-weight: 500;
  letter-spacing: 0.1px;
}
.is-selected .cell-name {
  font-weight: 700;
}
.map-footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 17px 22px;
  border-top: 1px solid #1f3035;
  font-size: 11px;
  color: #91a3a3;
}
.state-legend {
  display: flex;
  gap: 18px;
}
.state-legend > span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.state-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid #7a9092;
}
.state-legend .controlled-dot {
  background: #95bca6;
  border: 0;
}
.map-hint {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #657e80;
}
.territory-detail {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(150deg, #142024, #0e181d);
  padding: 21px 22px;
  display: flex;
  flex-direction: column;
}
.detail-top {
  display: flex;
  justify-content: space-between;
  color: #6d8580;
  gap: 10px;
}
.detail-top .eyebrow {
  font-size: 9px;
  letter-spacing: 1.5px;
}
.territory-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  height: 113px;
  color: var(--accent);
  background: radial-gradient(
    ellipse,
    color-mix(in srgb, var(--accent) 7%, transparent),
    transparent 70%
  );
}
.territory-emblem > span {
  height: 1px;
  width: 38px;
  background: linear-gradient(90deg, transparent, #435651);
}
.territory-emblem > span:last-child {
  transform: rotate(180deg);
}
.detail-title {
  text-align: center;
}
.state-pill {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  border: 1px solid #3c4b45;
  background: #213029;
  color: #bfd3c7;
  border-radius: 20px;
  padding: 5px 9px;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 1px;
}
.state-pill i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.state-pill.neutral {
  color: #a8b9bc;
  background: #1c292e;
  border-color: #34464c;
}
.state-pill.contested {
  color: #ffca8c;
}
.state-pill.locked {
  color: #bec0d0;
}
.state-pill.protected {
  color: #a0dff1;
}
.detail-title h2 {
  font-size: 28px;
  letter-spacing: -0.7px;
  margin: 12px 0 5px;
}
.detail-title p {
  color: #7f9495;
  font-size: 12px;
  text-transform: capitalize;
  margin: 0;
}
.owner-card {
  margin-top: 26px;
  padding: 16px 14px;
  border: 1px solid #2c3b3b;
  border-radius: 5px;
  background: #142023;
}
.owner-card > .eyebrow {
  font-size: 9px;
  letter-spacing: 1.1px;
  color: #7d9493;
}
.owner-card > div {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
}
.owner-icon {
  color: var(--accent);
}
.owner-card strong {
  font-size: 14px;
  font-weight: 500;
  display: block;
  color: var(--accent);
}
.owner-card small {
  font-size: 10px;
  display: block;
  margin-top: 5px;
  color: #829795;
}
.territory-facts {
  margin: 16px 0 0;
}
.territory-facts > div {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  font-size: 12px;
  border-bottom: 1px solid #263438;
}
.territory-facts dt {
  color: #819695;
}
.territory-facts dd {
  margin: 0;
  color: #c8d6ce;
  font-family: ui-monospace, monospace;
}
.territory-facts dd span {
  font-family: Arial;
  font-size: 10px;
  color: #869997;
}
.capitalize {
  text-transform: capitalize;
}
.detail-note {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  gap: 10px;
  color: #7f9790;
  align-items: flex-start;
}
.detail-note p {
  font-size: 11px;
  margin: 0;
  line-height: 1.6;
  color: #acbdb3;
}
.detail-note span {
  color: #758d87;
}
.detail-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  flex: 1;
  text-align: center;
  color: var(--muted);
  line-height: 1.8;
}
.clans-section {
  margin-top: 30px;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.section-heading h2 {
  font-size: 17px;
}
.section-heading > span {
  font-size: 11px;
  color: #99aba7;
}
.muted {
  color: #667d7b;
}
.clan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.clan-card {
  text-align: left;
  padding: 18px 20px;
  background: #101b1f;
  border: 1px solid #293639;
  border-radius: 6px;
  color: var(--text);
  transition:
    background 0.2s,
    border-color 0.2s;
}
.clan-card:hover,
.clan-card.active-clan {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, #101b1f);
}
.clan-card-top {
  display: flex;
  align-items: center;
  gap: 11px;
}
.clan-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius: 5px;
  color: var(--accent);
}
.clan-card h3 {
  font-size: 15px;
  margin: 0 0 5px;
  font-weight: 500;
  color: var(--accent);
}
.clan-card small {
  font-size: 10px;
  color: #809695;
}
.clan-card-top > svg {
  margin-left: auto;
  color: #637e75;
}
.clan-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 20px 0 13px;
}
.clan-count strong {
  font-weight: 400;
  font-size: 28px;
  font-family: ui-monospace, monospace;
  letter-spacing: -1px;
}
.clan-count > span {
  font-size: 10px;
  color: #8ca09a;
}
.clan-count > span:last-child {
  margin-left: auto;
  color: #a6b9ae;
}
.clan-progress {
  height: 3px;
  background: #263632;
  border-radius: 4px;
  overflow: hidden;
}
.clan-progress span {
  display: block;
  height: 100%;
  background: var(--accent);
}
.page-footer {
  margin-top: 28px;
  border-top: 1px solid #203034;
  padding: 21px 0 25px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #839a93;
  font-size: 10px;
}
.footer-diamond {
  font-size: 18px;
  margin-right: 7px;
}
.territory-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 20px;
  min-height: 410px;
  max-height: 540px;
  overflow: auto;
}
.territory-list button {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: #132025;
  border: 1px solid #304147;
  border-radius: 4px;
  color: #c6d4cd;
  padding: 12px;
  min-height: 72px;
}
.territory-list button[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, #132025);
}
.territory-list strong {
  font-size: 12px;
  font-weight: 500;
  display: block;
}
.territory-list small {
  font-size: 10px;
  color: #8ba09c;
  margin-top: 5px;
  display: block;
}
.list-icon {
  color: var(--accent);
}
.territory-list button > svg {
  margin-left: auto;
  color: var(--accent);
}
.empty-map {
  min-height: 410px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #98aea4;
}
.empty-map h3 {
  color: var(--text);
  font-size: 20px;
  font-weight: 400;
  margin: 20px 0 8px;
}
.empty-map p {
  font-size: 14px;
  margin: 0 0 20px;
  color: var(--muted);
}
.text-button {
  border: 0;
  background: none;
  color: var(--green);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
}
.system-state {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.system-state h1 {
  font-size: 32px;
  margin: 20px 0 10px;
  font-weight: 400;
}
.system-state p {
  color: var(--muted);
  line-height: 1.7;
}
.primary-button {
  background: var(--green);
  color: #152a1c;
  border: 0;
  border-radius: 4px;
  padding: 14px 20px;
  font-size: 14px;
  margin-top: 16px;
}
.loading-line {
  height: 2px;
  width: 120px;
  background: #a8d8b5;
  margin-top: 20px;
  animation: signal 1s infinite alternate;
}
@keyframes signal {
  to {
    opacity: 0.2;
  }
}
@media (min-width: 1600px) {
  .topbar {
    padding-left: max(4.3%, calc((100vw - 1462px) / 2));
    padding-right: max(4.3%, calc((100vw - 1462px) / 2));
  }
}
@media (max-width: 1150px) {
  .topbar {
    gap: 20px;
  }
  .desktop-nav {
    gap: 17px;
  }
  .wallet-button span {
    display: none;
  }
  .wallet-button {
    padding: 10px;
  }
  .world-layout {
    grid-template-columns: minmax(0, 1fr) 265px;
    gap: 15px;
  }
  .territory-detail {
    padding: 20px 17px;
  }
  .clan-card {
    padding: 16px 13px;
  }
  .main-content {
    padding-left: 3%;
    padding-right: 3%;
  }
  .world-summary {
    gap: 25px;
  }
  .territory-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 900px) {
  .desktop-nav {
    gap: 16px;
  }
  .desktop-nav button:last-child {
    display: none;
  }
  .brand {
    font-size: 12px;
  }
  .brand small {
    font-size: 9px;
  }
  .topbar {
    padding: 0 3%;
    gap: 18px;
  }
  .world-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .territory-map {
    min-width: 650px;
    min-height: 390px;
  }
  .territory-detail {
    display: grid;
    grid-template-columns: 140px 1fr 1fr;
    gap: 0 22px;
    padding: 20px;
  }
  .detail-top {
    grid-column: 1/-1;
    margin-bottom: 16px;
  }
  .territory-emblem {
    height: 85px;
    grid-row: 2;
  }
  .detail-title {
    grid-column: 1;
    grid-row: 3;
    text-align: center;
  }
  .detail-title h2 {
    font-size: 23px;
  }
  .owner-card {
    grid-column: 2;
    grid-row: 2/4;
    margin: 0;
    align-self: center;
  }
  .territory-facts {
    grid-column: 3;
    grid-row: 2/4;
    align-self: center;
    margin: 0;
  }
  .detail-note {
    grid-column: 1/-1;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
    justify-content: center;
  }
  .detail-note br {
    display: none;
  }
  .detail-note p span:before {
    content: " ";
  }
  .clan-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .territory-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .topbar {
    height: 70px;
    padding: 0 20px;
    gap: 10px;
  }
  .brand {
    font-size: 11px;
    letter-spacing: 1px;
    gap: 7px;
  }
  .brand-mark {
    width: 27px;
  }
  .brand small {
    font-size: 8px;
    letter-spacing: 2px;
  }
  .desktop-nav {
    display: none;
  }
  .preview-badge {
    margin-left: auto;
    font-size: 10px;
  }
  .wallet-button {
    display: none;
  }
  .main-content {
    padding: 28px 16px 0;
  }
  .world-heading {
    margin-bottom: 23px;
    gap: 10px;
    align-items: flex-end;
  }
  .eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
    gap: 6px;
  }
  .heading-divider {
    margin: 0;
  }
  .world-heading h1 {
    font-size: 34px;
    margin: 12px 0 8px;
    letter-spacing: -1px;
  }
  .world-heading p {
    font-size: 12px;
    max-width: 170px;
    line-height: 1.6;
  }
  .season-clock {
    min-width: 0;
    padding: 0;
    border: 0;
    padding-bottom: 3px;
  }
  .season-clock strong {
    font-size: 17px;
    letter-spacing: 0;
    margin: 7px 0;
  }
  .season-clock .eyebrow {
    font-size: 8px;
  }
  .season-clock > span:last-child {
    font-size: 10px;
  }
  .world-summary {
    padding: 14px 11px;
    gap: 0;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }
  .world-summary > div {
    gap: 5px;
    font-size: 10px;
  }
  .world-summary strong {
    font-size: 17px;
    margin-right: 3px;
  }
  .summary-icon svg {
    width: 18px;
    height: 18px;
  }
  .small-orbs {
    font-size: 22px;
    letter-spacing: -5px;
  }
  .world-summary .summary-note {
    width: 100%;
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid #283635;
    justify-content: center;
    font-size: 10px;
  }
  .map-toolbar {
    padding: 12px;
  }
  .map-toolbar h2 {
    font-size: 14px;
    gap: 7px;
  }
  .view-switch button {
    padding: 7px 9px;
    font-size: 11px;
    min-height: 36px;
  }
  .map-filters {
    padding: 12px 12px 0;
    gap: 7px;
    flex-wrap: wrap;
  }
  .map-filters select {
    font-size: 11px;
    padding-left: 8px;
    padding-right: 20px;
    min-height: 44px;
  }
  .filter-count {
    font-size: 9px;
    flex: 1;
    text-align: right;
  }
  .map-scroll {
    min-height: 390px;
  }
  .territory-map {
    min-width: 640px;
    min-height: 390px;
  }
  .map-footer {
    padding: 13px 12px;
    font-size: 10px;
  }
  .state-legend {
    gap: 12px;
  }
  .map-hint {
    font-size: 9px;
    max-width: 125px;
    gap: 5px;
  }
  .territory-detail {
    grid-template-columns: 100px 1fr;
    gap: 0 15px;
    padding: 18px;
  }
  .detail-top {
    margin-bottom: 4px;
  }
  .detail-top .eyebrow {
    font-size: 9px;
  }
  .territory-emblem {
    grid-row: 2;
    height: 93px;
  }
  .territory-emblem > span {
    display: none;
  }
  .detail-title {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    align-self: center;
  }
  .detail-title h2 {
    font-size: 24px;
    margin-top: 8px;
  }
  .detail-title p {
    font-size: 11px;
  }
  .owner-card {
    grid-column: 1/-1;
    grid-row: 3;
    margin-top: 9px;
    padding: 14px;
  }
  .owner-card > div {
    margin-top: 10px;
  }
  .owner-card small {
    font-size: 11px;
  }
  .territory-facts {
    grid-column: 1/-1;
    grid-row: 4;
    margin-top: 8px;
  }
  .territory-facts > div {
    padding: 12px 0;
    font-size: 12px;
  }
  .detail-note {
    grid-row: 5;
    justify-content: flex-start;
    gap: 10px;
    padding-top: 0;
    border: 0;
  }
  .detail-note p {
    font-size: 11px;
  }
  .detail-note br {
    display: block;
  }
  .clans-section {
    margin-top: 25px;
  }
  .section-heading h2 {
    font-size: 15px;
  }
  .section-heading > span {
    font-size: 9px;
    max-width: 145px;
    text-align: right;
    line-height: 1.7;
  }
  .clan-grid {
    gap: 10px;
  }
  .clan-card {
    padding: 13px 12px;
  }
  .clan-card-top {
    gap: 8px;
  }
  .clan-icon {
    width: 31px;
    height: 35px;
  }
  .clan-icon svg {
    width: 20px;
    height: 20px;
  }
  .clan-card-top > svg {
    display: none;
  }
  .clan-card h3 {
    font-size: 13px;
  }
  .clan-card small {
    font-size: 9px;
  }
  .clan-count {
    gap: 5px;
    margin-top: 17px;
  }
  .clan-count strong {
    font-size: 23px;
  }
  .clan-count > span {
    font-size: 9px;
  }
  .clan-count > span:last-child {
    display: none;
  }
  .page-footer {
    flex-direction: column;
    gap: 10px;
    align-items: center;
    text-align: center;
    padding-top: 17px;
    font-size: 9px;
  }
  .territory-list {
    grid-template-columns: 1fr;
    max-height: 430px;
    padding: 13px;
  }
  .territory-list strong {
    font-size: 14px;
  }
  .territory-list small {
    font-size: 12px;
  }
  .empty-map {
    min-height: 390px;
  }
  .empty-map p {
    font-size: 13px;
  }
}
/* Secondary labels stay readable; zoom and system text enlargement are respected. */
.brand small,
.eyebrow,
.preview-badge,
.wallet-button,
.season-clock > span:last-child,
.world-summary > div,
.world-summary .summary-note,
.view-switch button,
.map-filters select,
.filter-count,
.map-footer,
.detail-top .eyebrow,
.state-pill,
.detail-title p,
.owner-card > .eyebrow,
.owner-card small,
.territory-facts > div,
.territory-facts dd span,
.detail-note p,
.section-heading > span,
.clan-card small,
.clan-count > span,
.page-footer,
.territory-list small,
.map-hint {
  font-size: 0.75rem;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.mobile-hint {
  display: none;
}
@media (max-width: 600px) {
  .desktop-hint {
    display: none;
  }
  .mobile-hint {
    display: inline;
  }
  .eyebrow {
    flex-wrap: wrap;
  }
  .filter-count {
    flex-basis: 100%;
    text-align: left;
  }
  .brand small {
    font-size: 0.6rem;
  }
  .world-heading .eyebrow {
    font-size: 0.625rem;
  }
  .world-heading p {
    font-size: 0.875rem;
  }
  .season-clock .eyebrow {
    font-size: 0.625rem;
  }
  .season-clock > span:last-child {
    font-size: 0.625rem;
  }
}
/* Keep the season clock readable beside the mobile world heading. */
.season-clock {
  flex-shrink: 0;
}
.season-clock strong {
  white-space: nowrap;
}

/* Season race: the simplified launch experience. */
.season-page {
  --race-muted: #a2a5ae;
  background: #101113;
  color: #f4f4f6;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  line-height: 1.5;
}
.season-page button,
.season-page textarea {
  font: inherit;
}
.season-page button {
  color: inherit;
}
.race-header {
  max-width: 1320px;
  margin: auto;
  padding: 24px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.race-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.4px;
}
.race-brand-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 38px;
  color: #d4e6d5;
}
.race-header nav {
  display: flex;
  gap: 30px;
  font-size: 13px;
  color: var(--race-muted);
}
.race-header nav a {
  padding: 12px 0;
}
.race-header nav a[aria-current] {
  color: #fff;
}
.race-connect {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #242529;
  border: 1px solid #38393e;
  border-radius: 100px;
  min-height: 44px;
  padding: 0 19px;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.race-main {
  max-width: 1320px;
  margin: auto;
  padding: 0 40px;
}
.race-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding: 58px 0 48px;
}
.race-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 1.3px;
  font-weight: 600;
  color: #b8bbc2;
  text-transform: uppercase;
}
.race-kicker > span:first-child {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b2d4b9;
}
.kicker-separator {
  color: #555860;
  padding: 0 2px;
}
.race-intro h1 {
  font-size: clamp(2.4rem, 4.1vw, 3.7rem);
  letter-spacing: -0.055em;
  line-height: 1.1;
  font-weight: 620;
  margin: 17px 0 15px;
}
.race-intro h1 span {
  color: #90939b;
}
.race-intro p {
  font-size: 15px;
  color: var(--race-muted);
  margin: 0;
}
.race-countdown {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.race-countdown span {
  font-size: 11px;
  color: var(--race-muted);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.race-countdown strong {
  font-size: 31px;
  letter-spacing: -1px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.race-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.race-section-heading h2 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin: 0;
}
.sync-indicator {
  font-size: 11px;
  color: var(--race-muted);
  display: flex;
  align-items: center;
  gap: 7px;
}
.sync-indicator i {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: #9fb7a5;
}
.sync-indicator.stale i {
  background: #efc68c;
}
.race-clans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.race-clan {
  text-align: left;
  position: relative;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--clan) 5%, #1b1c20),
    #191a1e 65%
  );
  border: 1px solid #303137;
  border-radius: 18px;
  padding: 20px 21px 0;
  min-width: 0;
  overflow: hidden;
  transition:
    border-color 160ms,
    transform 160ms;
}
.race-clan.chosen {
  border-color: var(--clan);
  box-shadow: 0 0 0 1px var(--clan);
}
.clan-rank {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 23px;
}
.clan-rank > span:first-child {
  font-size: 12px;
  color: #b0b2bb;
  font-variant-numeric: tabular-nums;
}
.leader-chip {
  color: var(--clan);
  background: color-mix(in srgb, var(--clan) 10%, transparent);
  font-size: 9px;
  padding: 4px 8px;
  border-radius: 6px;
}
.rank-gap {
  font-size: 9px;
  color: #a2a5ae;
}
.race-crest {
  color: var(--clan);
  width: 86px;
  height: 86px;
  margin: 25px 0 15px;
  display: grid;
  place-items: center;
  border-radius: 25px;
  background: radial-gradient(
    ellipse at 30% 0%,
    color-mix(in srgb, var(--clan) 20%, transparent),
    color-mix(in srgb, var(--clan) 4%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--clan) 20%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--clan) 12%, transparent);
}
.race-clan h3 {
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -0.7px;
  margin: 0 0 7px;
  font-weight: 600;
}
.clan-motto {
  color: #a2a5ae;
  font-size: 11px;
  display: block;
  min-height: 33px;
}
.race-xp {
  margin: 21px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.race-xp strong {
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -1.5px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.race-xp > span {
  font-size: 9px;
  letter-spacing: 1.3px;
  color: #a2a5ae;
}
.xp-track {
  height: 4px;
  background: #303137;
  border-radius: 5px;
  overflow: hidden;
}
.xp-track > span {
  display: block;
  background: var(--clan);
  height: 100%;
  border-radius: 5px;
}
.clan-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  font-size: 9px;
  color: #a2a5ae;
  margin: 10px 0 23px;
}
.race-boost {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 39px;
  border-top: 1px solid #303137;
  font-size: 10px;
  color: #a2a5ae;
}
.race-boost.boost-on {
  color: var(--clan);
}
.race-boost small {
  margin-left: auto;
  font-size: 9px;
  white-space: nowrap;
}
.race-boost svg {
  flex-shrink: 0;
}
.clan-select-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 10px;
  border-top: 1px solid #303137;
  margin: 0 -21px;
  padding: 13px;
  min-height: 44px;
  color: #bdc0c8;
}
.chosen .clan-select-label {
  color: var(--clan);
  background: color-mix(in srgb, var(--clan) 5%, transparent);
}
.race-disclaimer {
  margin: 13px 0 30px;
  color: #9699a3;
  font-size: 10px;
  text-align: center;
}
.contribution-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  background: #191a1e;
  border: 1px solid #303137;
  border-radius: 18px;
  padding: 33px 36px;
}
.your-clan-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--clan);
}
.contribution-copy h2 {
  font-size: 27px;
  font-weight: 550;
  letter-spacing: -0.9px;
  margin: 13px 0 9px;
  line-height: 1.2;
}
.contribution-copy p {
  font-size: 12px;
  color: #a2a5ae;
  line-height: 1.8;
  margin: 0 0 20px;
}
.race-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 11px 18px;
  border: 0;
  border-radius: 10px;
  background: #eef1ed;
  color: #171918 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition:
    transform 150ms,
    background 150ms;
}
.race-primary:disabled {
  opacity: 0.45;
}
.contribution-copy > small {
  display: block;
  font-size: 9px;
  color: #9699a3;
  margin-top: 11px;
}
.momentum-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 12px;
}
.momentum-heading h3 {
  font-size: 13px;
  letter-spacing: -0.2px;
  font-weight: 550;
  margin: 0;
}
.race-text-button {
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  min-height: 44px;
  font-size: 11px !important;
  color: #c5c7ce !important;
}
.momentum-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.momentum-tile {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 11px;
  min-width: 0;
  padding: 15px;
  background: #222328;
  border: 1px solid #35363d;
  border-radius: 11px;
}
.tile-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #c1c3ca;
}
.tile-label svg {
  color: var(--clan);
}
.momentum-tile strong {
  font-size: 22px;
  line-height: 25px;
  font-weight: 550;
  letter-spacing: -0.5px;
}
.momentum-tile > span:last-child {
  font-size: 9px;
  color: #a2a5ae;
}
.momentum-note {
  font-size: 10px;
  color: #9699a3;
  margin: 12px 0 0;
}
.streak-dots {
  display: flex;
  gap: 5px;
  height: 25px;
  align-items: center;
}
.streak-dots i {
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 9px;
  width: 23px;
  height: 23px;
  border: 1px solid #484950;
  border-radius: 50%;
  color: #a2a5ae;
}
.streak-dots i.complete {
  background: var(--clan);
  border-color: var(--clan);
  color: #161719;
}
.race-how {
  padding: 46px 0 42px;
}
.race-overline {
  font-size: 9px;
  letter-spacing: 1.2px;
  font-weight: 600;
  color: #a2a5ae;
}
.race-how h2 {
  font-size: 21px;
  letter-spacing: -0.5px;
  font-weight: 550;
  margin: 7px 0 25px;
}
.race-how ol {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  padding: 0;
  margin: 0;
}
.race-how li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}
.race-how li > span {
  font-size: 11px;
  color: #9b9ea7;
  border: 1px solid #34353c;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.race-how h3 {
  font-size: 12px;
  font-weight: 550;
  margin: 0 0 5px;
}
.race-how p {
  font-size: 11px;
  color: #a2a5ae;
  margin: 0;
}
.race-footer {
  border-top: 1px solid #2b2c31;
  padding: 22px 0 28px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #9699a3;
  font-size: 10px;
}
.race-footer > span:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #c0c3ca;
}
.race-footer i {
  font-style: normal;
  color: #9699a3;
  margin-left: 8px;
}
.race-dialog {
  padding: 0;
  border: 1px solid #46474e;
  border-radius: 22px;
  width: min(540px, calc(100% - 32px));
  max-height: 85dvh;
  background: #202126;
  color: #f4f4f6;
  box-shadow: 0 30px 100px #0009;
  font-family: inherit;
}
.race-dialog::backdrop {
  background: #0009;
  backdrop-filter: blur(8px);
}
.dialog-content {
  position: relative;
  padding: 36px;
}
.dialog-close {
  display: grid;
  place-items: center;
  background: #303137;
  border: 0;
  border-radius: 50%;
  height: 44px;
  width: 44px;
  position: absolute;
  top: 14px;
  right: 14px;
}
.dialog-symbol {
  display: grid;
  place-items: center;
  width: 65px;
  height: 65px;
  color: var(--clan, #ddd);
  background: #303137;
  border-radius: 18px;
  margin-bottom: 23px;
}
.race-dialog h2 {
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -1px;
  font-weight: 550;
  margin: 14px 0;
}
.race-dialog p {
  color: #b2b5be;
  font-size: 13px;
  line-height: 1.7;
}
.dialog-callout {
  background: #2c2d33;
  border-radius: 12px;
  padding: 16px;
  color: #c2c5ce;
  font-size: 12px;
  margin: 22px 0;
}
.dialog-footnote {
  display: block;
  font-size: 10px;
  color: #a2a5ae;
  margin-top: 16px;
}
.draft-label {
  display: block;
  font-size: 12px;
  margin: 22px 0 8px;
}
.race-dialog textarea {
  width: 100%;
  resize: vertical;
  min-height: 140px;
  background: #17181c;
  color: #fff;
  border: 1px solid #4b4c55;
  border-radius: 12px;
  padding: 15px;
  font-size: 14px;
  line-height: 1.6;
}
.draft-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  color: #a2a5ae;
  margin: 7px 0 22px;
}
.boost-option {
  padding: 18px;
  background: #2a2c31;
  border: 1px solid #404249;
  border-radius: 14px;
  margin: 22px 0;
}
.boost-option strong {
  font-size: 14px;
}
.boost-option strong span {
  color: #b4dbbd;
  margin-left: 8px;
}
.boost-option p {
  font-size: 11px;
  margin: 8px 0 15px;
}
.future-perk {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #393b42;
}
.future-perk > svg {
  flex-shrink: 0;
  color: #bbb;
}
.future-perk strong {
  font-size: 11px;
}
.future-perk p {
  font-size: 10px;
  margin: 3px 0 0;
}
.future-perk > span {
  font-size: 9px;
  color: #a2a5ae;
  margin-left: auto;
}
.race-empty {
  padding: 40px;
  border: 1px solid #393b42;
  border-radius: 16px;
}
.season-page :is(button, a, textarea):focus-visible {
  outline: 2px solid #e4e7ef;
  outline-offset: 5px;
}
.season-page button:active,
.season-page .race-primary:active {
  transform: scale(0.98);
  transition: transform 80ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .race-clan:hover {
    border-color: var(--clan);
  }
  .race-primary:hover {
    background: #fff;
  }
  .momentum-tile:hover,
  .race-connect:hover {
    background: #2c2e34;
  }
  .race-text-button:hover {
    color: white !important;
  }
}
@media (max-width: 1000px) {
  .race-clans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .race-crest {
    margin-top: 15px;
  }
  .race-clan {
    padding-top: 16px;
  }
  .race-xp strong {
    font-size: 36px;
  }
  .contribution-panel {
    gap: 28px;
    padding: 28px;
  }
  .momentum-tiles {
    grid-template-columns: 1fr;
  }
  .momentum-tile {
    gap: 7px;
  }
  .contribution-copy {
    align-self: center;
  }
  .race-header,
  .race-main {
    padding-left: 28px;
    padding-right: 28px;
  }
}
@media (max-width: 600px) {
  .race-header {
    padding: 17px 20px;
    gap: 10px;
  }
  .race-brand {
    font-size: 14px;
    gap: 5px;
  }
  .race-header nav {
    display: none;
  }
  .race-connect {
    padding: 0 13px;
    font-size: 11px !important;
  }
  .race-main {
    padding: 0 20px;
  }
  .race-intro {
    padding: 34px 0 30px;
    display: block;
  }
  .race-intro h1 {
    font-size: 39px;
    max-width: 300px;
  }
  .race-intro p {
    font-size: 13px;
    max-width: 280px;
  }
  .race-countdown {
    margin-top: 22px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .race-countdown strong {
    font-size: 18px;
    letter-spacing: -0.4px;
  }
  .race-countdown > span:last-child {
    display: none;
  }
  .race-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 15px;
  }
  .race-clans {
    gap: 10px;
  }
  .race-clan {
    padding: 13px 13px 0;
    border-radius: 14px;
  }
  .clan-rank {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    min-height: 45px;
  }
  .clan-rank > span:first-child {
    font-size: 10px;
  }
  .leader-chip {
    font-size: 8px;
    padding: 2px 5px;
  }
  .rank-gap {
    font-size: 8px;
  }
  .race-crest {
    width: 60px;
    height: 60px;
    border-radius: 19px;
    margin: 12px 0;
  }
  .race-crest svg {
    width: 36px;
    height: 36px;
  }
  .race-clan h3 {
    font-size: 20px;
  }
  .clan-motto {
    font-size: 10px;
    min-height: 32px;
    line-height: 1.5;
  }
  .race-xp {
    margin: 16px 0 12px;
  }
  .race-xp strong {
    font-size: 27px;
    letter-spacing: -1px;
  }
  .race-xp > span {
    font-size: 8px;
  }
  .clan-card-meta {
    flex-direction: column;
    gap: 2px;
    font-size: 9px;
    margin-bottom: 12px;
  }
  .race-boost {
    flex-wrap: wrap;
    align-content: center;
    min-height: 57px;
    font-size: 9px;
    gap: 3px;
  }
  .race-boost small {
    margin-left: 18px;
    flex-basis: 100%;
  }
  .race-boost svg {
    width: 12px;
  }
  .clan-select-label {
    font-size: 9px;
    margin: 0 -13px;
    padding: 10px 5px;
  }
  .race-disclaimer {
    font-size: 10px;
    text-align: left;
    line-height: 1.6;
    margin-bottom: 23px;
  }
  .contribution-panel {
    grid-template-columns: 1fr;
    padding: 23px;
    gap: 28px;
  }
  .contribution-copy h2 {
    font-size: 27px;
  }
  .contribution-copy p {
    font-size: 12px;
  }
  .momentum-panel {
    padding-top: 22px;
    border-top: 1px solid #34353c;
  }
  .momentum-tiles {
    grid-template-columns: 1fr;
  }
  .momentum-tile {
    gap: 10px;
  }
  .momentum-heading h3 {
    font-size: 12px;
  }
  .race-how {
    padding: 32px 0;
  }
  .race-how ol {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .race-how h2 {
    font-size: 22px;
    max-width: 250px;
  }
  .race-footer {
    flex-direction: column;
    gap: 10px;
  }
  .dialog-content {
    padding: 30px 24px;
  }
  .race-dialog h2 {
    font-size: 27px;
    padding-right: 15px;
  }
  .race-dialog .race-overline {
    display: block;
    max-width: 220px;
  }
  .dialog-symbol {
    margin-top: 12px;
  }
  .race-dialog {
    max-height: 90dvh;
  }
  .dialog-close {
    top: 8px;
    right: 8px;
    width: 38px;
    height: 38px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .season-page * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .season-page button:active,
  .season-page .race-primary:active {
    transform: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .race-dialog::backdrop {
    background: #101113;
    backdrop-filter: none;
  }
  .race-clan {
    background: #1c1d21;
  }
}
@media (prefers-contrast: more) {
  .season-page {
    --race-muted: #d1d3db;
  }
  .race-clan,
  .contribution-panel,
  .momentum-tile,
  .race-dialog {
    border-color: #a2a5ae;
  }
  .clan-motto,
  .clan-card-meta,
  .race-disclaimer,
  .race-overline,
  .race-footer {
    color: #d1d3db;
  }
}
.season-page .skip-link:not(:focus) {
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  padding: 0;
}
.season-page .race-intro h1 span {
  padding-left: 0.08em;
}

/* RAIDZ CI: platform gold; clan colors remain faction-specific. */
.season-page {
  --raidz-black: #050505;
  --raidz-carbon: #12100b;
  --raidz-gold: #d5a63a;
  --raidz-victory: #f3c95f;
  --raidz-light: #f6e4ad;
  --raidz-border: #d5a63a33;
  --raidz-text: #f4f1e8;
  background: var(--raidz-black);
  color: var(--raidz-text);
}
.raidz-brand-mark {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.race-brand {
  letter-spacing: 2px;
  font-size: 18px;
}
.race-header {
  padding-top: 17px;
  padding-bottom: 17px;
}
.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.season-page .race-primary {
  background: var(--raidz-gold);
  color: #12100b !important;
}
.season-page .race-connect {
  background: #12100b;
  border-color: var(--raidz-border);
  color: var(--raidz-light);
}
.raidz-campaign {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--raidz-border);
  margin-top: 8px;
  background: #12100b;
}
.raidz-campaign img {
  width: 100%;
  height: auto;
  display: block;
}
.race-intro {
  padding-top: 35px;
  padding-bottom: 32px;
}
.race-intro h1 {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
}
.race-intro h1 span {
  color: var(--raidz-light);
}
.race-kicker > span:first-child {
  background: var(--raidz-gold);
}
.race-countdown strong {
  color: var(--raidz-light);
}
.season-page .race-clan {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--clan) 4%, #12100b),
    #12100b 65%
  );
  border-color: var(--raidz-border);
  border-radius: 16px;
}
.season-page .race-clan.chosen {
  border-color: var(--clan);
}
.season-page .contribution-panel,
.season-page .momentum-tile {
  background: #12100b;
  border-color: var(--raidz-border);
  border-radius: 16px;
}
.season-page .momentum-tile {
  background: #1b1811;
  border-radius: 12px;
}
.season-page .race-dialog {
  background: #12100b;
  border-color: #d5a63a55;
}
.race-footer .raidz-brand-mark {
  height: 24px;
  width: 24px;
}
.onboarding-save-note {
  font-size: 12px;
  color: var(--raidz-light);
  margin: 15px 0 0;
}
.onboarding-dialog {
  padding: 0;
  border: 1px solid #d5a63a55;
  background: #12100b;
  color: #f4f1e8;
  border-radius: 24px;
  width: min(500px, calc(100% - 32px));
  max-height: calc(100dvh - 40px);
  font-family: inherit;
  box-shadow: 0 32px 100px #000b;
}
.onboarding-dialog::backdrop {
  background: #000b;
  backdrop-filter: blur(12px);
}
.onboarding-shell {
  display: flex;
  flex-direction: column;
  min-height: 660px;
}
.onboarding-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 8px 28px;
}
.onboarding-top > span {
  font-size: 13px;
  letter-spacing: 2px;
  color: #f6e4ad;
  font-weight: 650;
}
.onboarding-top i {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 1px;
  color: #b5ac98;
  margin-left: 8px;
}
.onboarding-top button {
  background: transparent;
  border: 1px solid #d5a63a33;
  color: #f6e4ad;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.onboarding-progress {
  display: flex;
  gap: 5px;
  padding: 0 28px;
}
.onboarding-progress span {
  height: 3px;
  background: #39301d;
  border-radius: 3px;
  flex: 1;
}
.onboarding-progress span.complete {
  background: #d5a63a;
}
.onboarding-body {
  padding: 26px 32px 18px;
  flex: 1;
}
.onboarding-art {
  height: 210px;
  margin: -10px 0 22px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  mask-image: linear-gradient(black 85%, transparent);
}
.onboarding-art img {
  width: 245px;
  height: 245px;
  object-fit: cover;
  object-position: center;
  max-width: none;
}
.onboarding-body > .race-overline {
  color: #d5a63a;
  font-size: 9px;
  display: block;
}
.onboarding-body h2 {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -1.3px;
  margin: 13px 0 15px;
  outline: none !important;
}
.onboarding-body > p {
  font-size: 14px;
  line-height: 1.7;
  color: #c3bbab;
  margin: 0 0 20px;
}
.onboarding-small {
  font-size: 11px;
  color: #aba394;
}
.onboarding-bottom {
  padding: 0 32px 22px;
}
.onboarding-controls {
  display: flex;
  gap: 10px;
}
.onboarding-controls .race-primary {
  flex: 1;
  min-height: 49px;
  font-size: 13px !important;
}
.onboarding-back {
  border: 1px solid #d5a63a55;
  background: transparent;
  color: #f6e4ad;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 12px !important;
  min-height: 49px;
}
.onboarding-skip {
  display: block;
  margin: 6px auto 0;
  background: none;
  border: 0;
  font-size: 12px !important;
  min-height: 44px;
  color: #c3bbab !important;
}
.onboarding-step-count {
  display: block;
  text-align: center;
  font-size: 10px;
  letter-spacing: 1px;
  color: #928977;
  margin-top: 12px;
}
.onboarding-step-icon {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 20px;
  color: #f3c95f;
  background: #d5a63a12;
  border: 1px solid #d5a63a33;
  margin: 15px 0 27px;
}
.onboarding-explainer {
  list-style: none;
  padding: 10px 0;
  margin: 0;
}
.onboarding-explainer li {
  display: flex;
  gap: 16px;
  padding: 15px 0;
}
.onboarding-explainer li > span {
  color: #d5a63a;
  font-size: 12px;
  line-height: 22px;
}
.onboarding-explainer h3 {
  font-size: 14px;
  margin: 0 0 6px;
  font-weight: 600;
}
.onboarding-explainer p {
  color: #bcb3a1;
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}
.onboarding-note {
  display: flex;
  gap: 10px;
  background: #1e1a12;
  border: 1px solid #d5a63a25;
  border-radius: 12px;
  padding: 14px;
  font-size: 11px;
  line-height: 1.65;
  color: #c3bbab;
  margin: 16px 0 0;
}
.onboarding-note > svg {
  flex-shrink: 0;
  color: #d5a63a;
  margin-top: 3px;
}
.onboarding-note strong {
  display: block;
  color: #f6e4ad;
  font-size: 11px;
  font-weight: 550;
  margin-bottom: 3px;
}
.onboarding-clans {
  display: grid;
  gap: 9px;
}
.onboarding-clans button {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 12px;
  min-height: 74px;
  padding: 13px;
  border: 1px solid #443b2a;
  border-radius: 12px;
  background: #18150f;
}
.onboarding-clans button[aria-pressed="true"] {
  border-color: var(--clan);
  background: color-mix(in srgb, var(--clan) 8%, #12100b);
}
.onboarding-clan-icon {
  display: grid;
  place-items: center;
  color: var(--clan);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--clan) 10%, transparent);
  flex-shrink: 0;
}
.onboarding-clans strong {
  font-size: 15px;
  display: block;
}
.onboarding-clans small {
  font-size: 10px;
  color: #bcb3a1;
  display: block;
  margin-top: 3px;
}
.onboarding-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #6d634f;
  display: grid;
  place-items: center;
  margin-left: auto;
  flex-shrink: 0;
}
.onboarding-clans [aria-pressed="true"] .onboarding-radio {
  background: var(--clan);
  border-color: var(--clan);
  color: #12100b;
}
.onboarding-body .onboarding-clan-description {
  font-size: 11px;
  margin: 12px 0 0;
  color: #cec6b7;
}
.onboarding-success {
  display: grid;
  place-items: center;
  width: 106px;
  height: 106px;
  background: color-mix(in srgb, var(--clan) 10%, transparent);
  border: 1px solid var(--clan);
  border-radius: 29px;
  color: var(--clan);
  margin: 24px 0 30px;
}
.onboarding-summary {
  display: grid;
  gap: 18px;
  padding: 18px 0;
  font-size: 12px;
  color: #e2d9c5;
}
.onboarding-summary span {
  display: flex;
  align-items: center;
  gap: 10px;
}
.onboarding-summary svg {
  color: #d5a63a;
}
@media (hover: hover) and (pointer: fine) {
  .season-page .race-primary:hover {
    background: #f3c95f;
  }
  .season-page .race-clan:hover {
    border-color: var(--clan);
  }
  .onboarding-clans button:hover {
    border-color: var(--clan);
  }
}
@media (max-width: 600px) {
  .race-brand {
    font-size: 15px;
    gap: 7px;
  }
  .raidz-brand-mark {
    width: 34px;
    height: 34px;
  }
  .race-header {
    padding: 14px 20px;
  }
  .header-actions {
    gap: 7px;
  }
  .header-actions .race-primary {
    padding: 10px 12px;
    font-size: 11px !important;
  }
  .race-connect span {
    display: none;
  }
  .race-connect {
    padding: 0;
    width: 44px;
    justify-content: center;
  }
  .raidz-campaign {
    margin-top: 0;
    border-radius: 12px;
  }
  .raidz-campaign img {
    min-height: 112px;
    object-fit: cover;
    object-position: 25% center;
  }
  .race-intro {
    padding-top: 27px;
  }
  .onboarding-dialog {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .onboarding-shell {
    min-height: 100%;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .onboarding-top {
    padding-left: 24px;
    padding-right: 20px;
  }
  .onboarding-progress {
    padding: 0 24px;
  }
  .onboarding-body {
    padding: 22px 24px 18px;
  }
  .onboarding-bottom {
    padding: 0 24px 20px;
  }
  .onboarding-art {
    height: 200px;
    margin-bottom: 18px;
  }
  .onboarding-body h2 {
    font-size: 32px;
  }
  .onboarding-body > p {
    font-size: 13px;
  }
  .onboarding-body .onboarding-clan-description {
    font-size: 11px;
  }
  .onboarding-clans button {
    min-height: 69px;
  }
  .onboarding-note {
    font-size: 10px;
    padding: 12px;
  }
  .onboarding-step-icon {
    margin-top: 14px;
  }
  .onboarding-success {
    margin-top: 35px;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .onboarding-dialog::backdrop {
    background: #050505;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .onboarding-dialog,
  .onboarding-clans button,
  .onboarding-note {
    border-color: #d5a63a;
  }
  .onboarding-body p,
  .onboarding-small,
  .onboarding-note {
    color: #f4f1e8;
  }
}
/* Explicit centering survives the shared CSS reset in the live app. */
.season-page .onboarding-dialog,
.season-page .race-dialog {
  margin: auto;
}
/* RAIDZ app overview */
.mobile-app {
  padding-bottom: 100px;
  min-height: 100dvh;
}
.app-header {
  max-width: 960px;
  margin: auto;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.app-content {
  max-width: 900px;
  margin: auto;
  padding: 28px 28px 40px;
}
.app-page-title h1 {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -1.2px;
  margin: 12px 0 30px;
  outline: none;
}
.app-bottom-nav {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, calc(100% - 32px));
  display: flex;
  background: #18150ff2;
  border: 1px solid #d5a63a44;
  border-radius: 22px;
  padding: 8px;
  z-index: 10;
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 35px #0008;
}
.app-bottom-nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-height: 54px;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #a79d88;
  font-size: 10px;
  border-radius: 14px;
}
.app-bottom-nav button[aria-current] {
  background: #d5a63a15;
  color: #f3c95f;
}
.app-season-hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 26px;
  border: 1px solid #d5a63a44;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at top right, #d5a63a19, transparent), #12100b;
}
.app-season-hero span,
.app-points > span {
  font-size: 9px;
  letter-spacing: 1.3px;
  color: #b9ac8b;
}
.app-season-hero h2 {
  font-size: 29px;
  margin: 8px 0;
}
.app-season-hero p {
  font-size: 12px;
  color: #b9b09c;
  margin: 0;
}
.app-season-hero > div:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: right;
}
.app-season-hero strong {
  font-size: 30px;
  color: #f6e4ad;
  font-variant-numeric: tabular-nums;
}
.app-season-hero small {
  font-size: 10px;
  color: #b9b09c;
}
.app-reward {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px 5px;
  color: #f3c95f;
}
.app-reward span {
  font-size: 11px;
  color: #b9b09c;
}
.app-reward strong {
  display: block;
  font-size: 28px;
  font-weight: 550;
  letter-spacing: -0.8px;
}
.app-reward strong small {
  font-size: 13px;
}
.app-reward p {
  font-size: 11px;
  color: #a99f8b;
  max-width: 450px;
  margin: 5px 0;
}
.app-section-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 25px 0 14px;
}
.app-section-label h2,
.app-profile-section h2 {
  font-size: 16px;
  margin: 0;
}
.app-section-label > span {
  font-size: 10px;
  color: #b2a58c;
}
.app-standings {
  display: grid;
  gap: 12px;
}
.app-standing {
  padding: 20px;
  border: 1px solid #d5a63a30;
  border-radius: 16px;
  background: #12100b;
}
.standing-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.standing-rank {
  font-size: 11px;
  color: #918773;
}
.standing-crest {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--clan) 10%, transparent);
  color: var(--clan);
  border-radius: 14px;
}
.standing-top h3 {
  font-size: 17px;
  margin: 0 0 4px;
}
.standing-top h3 small {
  color: var(--clan);
  font-size: 9px;
  margin-left: 6px;
  font-weight: 400;
}
.standing-top div > span {
  font-size: 10px;
  color: #ab9f89;
}
.standing-top > strong {
  margin-left: auto;
  text-align: right;
  font-size: 23px;
  font-weight: 550;
  letter-spacing: -0.6px;
}
.standing-top > strong small {
  display: block;
  font-size: 8px;
  color: #b3a58b;
  letter-spacing: 1px;
}
.coverage-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--clan);
  margin-top: 13px;
}
.coverage-row em {
  font-style: normal;
  color: #c3b79d;
  margin-left: 10px;
}
.coverage-row > small {
  margin-left: auto;
  font-size: 10px;
  color: #c3b79d;
}
.app-footnote {
  font-size: 11px;
  color: #a99f8c;
  line-height: 1.7;
  margin: 17px 0;
}
.app-filter {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: #12100b;
  border: 1px solid #d5a63a33;
  border-radius: 12px;
}
.app-filter button {
  flex: 1;
  border: 0;
  background: none;
  color: #b6a98c;
  min-height: 44px;
  font-size: 12px;
  border-radius: 8px;
}
.app-filter button[aria-pressed="true"] {
  background: #d5a63a20;
  color: #f6e4ad;
}
.app-posts {
  display: grid;
  gap: 14px;
}
.app-post {
  background: #12100b;
  border: 1px solid #d5a63a30;
  padding: 23px;
  border-radius: 16px;
}
.app-post > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2c2517;
  display: grid;
  place-items: center;
  color: #e5c777;
}
.app-post strong {
  font-size: 13px;
}
.app-post small {
  display: block;
  color: #a89d87;
  font-size: 10px;
  margin-top: 3px;
}
.post-heat {
  margin-left: auto;
  color: #d5a63a;
  display: flex;
  gap: 5px;
  font-size: 12px;
}
.app-post p {
  font-size: 16px;
  line-height: 1.8;
  margin: 22px 0;
}
.app-post footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #a69a81;
  font-size: 10px;
}
.app-empty {
  padding: 30px;
  text-align: center;
  color: #b9ac90;
}
.app-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 16px;
  min-height: 44px;
  background: #12100b;
  border: 1px solid #d5a63a66;
  border-radius: 10px;
  color: #f6e4ad !important;
  font-size: 12px !important;
}
.app-empty .app-secondary {
  margin: 18px;
}
.app-points {
  padding: 26px;
  background: #12100b;
  border: 1px solid #d5a63a44;
  border-radius: 16px;
}
.app-points > strong {
  display: block;
  color: #f6e4ad;
  font-size: 42px;
  font-weight: 550;
  letter-spacing: -1.5px;
  margin: 8px 0;
}
.app-points strong small {
  font-size: 15px;
  letter-spacing: 0;
}
.app-points p {
  font-size: 12px;
  color: #b7aa90;
  max-width: 400px;
  margin: 0;
}
.app-offers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.app-offer {
  border: 1px solid #d5a63a33;
  border-radius: 16px;
  padding: 24px;
  background: #12100b;
}
.offer-icon {
  color: #d5a63a;
  display: block;
  margin-bottom: 20px;
}
.app-offer h3 {
  font-size: 15px;
  margin: 0 0 8px;
}
.app-offer > strong {
  font-size: 30px;
  color: #f6e4ad;
}
.app-offer p {
  font-size: 12px;
  color: #ac9f84;
}
.app-offer button {
  width: 100%;
  margin-top: 8px;
}
.app-clan-offer {
  border: 1px solid #d5a63a44;
  padding: 25px;
  border-radius: 16px;
  background: #12100b;
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.app-clan-offer > svg {
  color: #d5a63a;
}
.app-clan-offer h3 {
  font-size: 18px;
  margin: 0;
}
.app-clan-offer p {
  font-size: 12px;
  color: #ded1b1;
}
.app-clan-offer small {
  font-size: 11px;
  color: #aa9f8b;
}
.app-clan-offer .app-secondary {
  margin-top: 5px;
}
.app-notice {
  padding: 14px;
  border: 1px solid #d5a63a55;
  background: #241d0f;
  border-radius: 12px;
  font-size: 12px;
  color: #f6e4ad;
}
.app-profile-card {
  text-align: center;
  padding: 26px;
  border-radius: 18px;
  background: #12100b;
  border: 1px solid #d5a63a33;
}
.profile-mark {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 1px solid #d5a63a55;
  border-radius: 24px;
  margin: auto;
  color: #f6e4ad;
  background: #251e10;
}
.app-profile-card h2 {
  font-size: 24px;
  margin: 15px 0 6px;
}
.app-profile-card p {
  font-size: 12px;
  color: #b7aa91;
  margin: 0 0 18px;
}
.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 25px 0;
}
.profile-stats div {
  text-align: center;
  border-right: 1px solid #d5a63a33;
}
.profile-stats div:last-child {
  border: 0;
}
.profile-stats strong {
  display: block;
  font-size: 24px;
  color: #f6e4ad;
}
.profile-stats span {
  font-size: 10px;
  color: #b3a58c;
}
.app-profile-section {
  border: 1px solid #d5a63a33;
  border-radius: 16px;
  padding: 23px;
  background: #12100b;
  margin-bottom: 15px;
}
.app-profile-section .app-section-label {
  margin: 0 0 15px;
}
.app-profile-section p {
  font-size: 12px;
  color: #b3a78f;
  line-height: 1.7;
}
.app-profile-section form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.app-profile-section label {
  font-size: 12px;
}
.app-profile-section input {
  font: inherit;
  font-size: 13px;
  width: 100%;
  min-height: 48px;
  border: 1px solid #68532a;
  border-radius: 10px;
  background: #050505;
  color: #f4f1e8;
  padding: 12px;
}
.app-profile-section form small {
  font-size: 10px;
  color: #b7a889;
}
.app-profile-section form button {
  align-self: flex-start;
  margin-top: 6px;
}
.profile-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  padding: 15px 0;
  border-bottom: 1px solid #d5a63a22;
}
.profile-line strong {
  font-weight: 500;
  color: #cdbb95;
}
.login-screen {
  max-width: 450px;
  margin: auto;
  min-height: 95dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 24px;
  text-align: center;
  justify-content: center;
  gap: 16px;
}
.login-screen > .raidz-brand-mark {
  width: 45px;
  height: 45px;
}
.login-art {
  width: 220px;
  height: 220px;
  object-fit: cover;
  mask-image: linear-gradient(black 85%, transparent);
}
.login-screen h1 {
  font-size: 36px;
  line-height: 1.12;
  letter-spacing: -1.4px;
  margin: 0;
}
.login-screen h1 span {
  color: #f6e4ad;
}
.login-screen p {
  font-size: 13px;
  color: #b7aa90;
  margin: 0 0 10px;
}
.login-screen button {
  width: 100%;
  min-height: 49px;
}
.login-screen > small {
  font-size: 10px;
  line-height: 1.6;
  color: #a89b81;
}
.login-screen ~ .app-bottom-nav {
  display: none;
}
@media (max-width: 600px) {
  .app-header {
    padding: 14px 20px;
  }
  .app-content {
    padding: 19px 20px 35px;
  }
  .app-page-title h1 {
    font-size: 30px;
    margin-bottom: 24px;
  }
  .app-bottom-nav {
    bottom: 0;
    width: 100%;
    border-radius: 18px 18px 0 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  }
  .app-season-hero {
    padding: 20px;
    gap: 10px;
  }
  .app-season-hero h2 {
    font-size: 25px;
  }
  .app-season-hero p {
    max-width: 155px;
    font-size: 11px;
  }
  .app-season-hero strong {
    font-size: 26px;
  }
  .app-season-hero small {
    font-size: 8px;
  }
  .app-standing {
    padding: 16px;
  }
  .standing-top {
    gap: 9px;
  }
  .standing-rank {
    font-size: 9px;
  }
  .standing-crest {
    width: 36px;
    height: 40px;
  }
  .standing-top h3 {
    font-size: 15px;
  }
  .standing-top h3 small {
    display: block;
    margin: 2px 0;
  }
  .standing-top > strong {
    font-size: 21px;
  }
  .coverage-row {
    flex-wrap: wrap;
    font-size: 10px;
  }
  .coverage-row em {
    display: block;
    margin: 3px 0 0;
  }
  .app-offers {
    gap: 10px;
  }
  .app-offer {
    padding: 17px 13px;
  }
  .app-offer h3 {
    font-size: 13px;
  }
  .app-offer button {
    font-size: 10px !important;
    padding: 10px 7px;
  }
  .app-post {
    padding: 19px;
  }
  .app-post p {
    font-size: 14px;
  }
  .app-post footer {
    font-size: 9px;
  }
  .app-reward {
    gap: 15px;
  }
  .app-reward strong {
    font-size: 26px;
  }
  .app-section-label > span {
    font-size: 9px;
  }
  .app-profile-section {
    padding: 19px;
  }
  .login-screen {
    min-height: 100dvh;
    padding-top: 20px;
    padding-bottom: 25px;
  }
  .login-art {
    width: 190px;
    height: 190px;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .app-bottom-nav {
    background: #18150f;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .app-standing,
  .app-post,
  .app-offer,
  .app-profile-section {
    border-color: #d5a63a;
  }
  .app-footnote {
    color: #f4f1e8;
  }
}
.x-post-list {
  display: grid;
  gap: 12px;
  margin: 20px 0;
}
.x-post-list .app-post {
  padding: 16px;
}
.x-post-list a {
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.x-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 10px;
  color: #c4b68e;
  margin-top: 15px;
}

/* Centered original wordmark; primary navigation lives in the bottom bar. */
.mobile-app .app-header {
  justify-content: center;
  padding: 6px 24px;
}
.app-wordmark {
  display: block;
  width: 210px;
  max-width: 70vw;
  height: auto;
}

.x-post-input { display: block; width: 100%; min-height: 52px; margin: 8px 0 16px; padding: 12px 16px; border: 1px solid #64542f; border-radius: 14px; background: #11110d; color: #f5f1e7; font: inherit; }
.x-post-input:focus-visible { outline: 2px solid #d8b665; outline-offset: 3px; }

.community-post-link { display:block; color:inherit; text-decoration:none; overflow-wrap:anywhere; }
.community-post-link p { white-space:pre-wrap; }
.community-post-link > span { color:var(--gold, #d7aa38); font-size:0.9rem; }
.app-post footer button { min-height:44px; }

.submission-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; min-width:220px; touch-action:manipulation; }
.season-page .submission-button:active:not(:disabled) { transform:scale(.97); filter:brightness(1.12); transition:transform 70ms ease-out; }
.submission-button[aria-busy="true"] { opacity:1; cursor:progress; }
.submission-spinner { width:18px;height:18px; border:2px solid currentColor; border-right-color:transparent;border-radius:50%;animation:submission-spin .75s linear infinite; }
.submission-feedback { min-height:48px; padding:12px 14px; border-radius:12px; font-size:14px; line-height:1.5; color:#b7a889; border:1px solid transparent; }
.submission-feedback[data-phase="checking"] { background:#241e10; border-color:#68532a; color:#f4e3b0; }
.submission-feedback[data-phase="success"] { background:#122219; border-color:#386347;color:#a9e4bd; }
.submission-feedback[data-phase="error"] { background:#291a15; border-color:#805443; color:#ffd2bf; }
@keyframes submission-spin {to {transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.submission-spinner{animation:none;border-style:dotted}.season-page .submission-button:active:not(:disabled){transform:none}}

/* Mobile RAIDZ chrome and compact community cards. */
.mobile-app { overflow:visible; }
.mobile-app .app-header { position:sticky; top:0; z-index:30; max-width:none; width:100%; background:rgba(5,5,5,.92); backdrop-filter:blur(20px); padding:calc(4px + env(safe-area-inset-top)) 20px 4px; border-bottom:1px solid #b78c2726; }
.app-header .app-wordmark { width:170px; }
.app-season-hero strong { font-variant-numeric:tabular-nums; }
.x-avatar { flex:none; width:48px; height:48px; border-radius:50%; object-fit:cover; }
.avatar-fallback {display:inline-grid;place-items:center;background:#302719;color:#edcd77;font-weight:600;}
.profile-mark .x-avatar {width:80px;height:80px;}
.community-card { overflow:hidden; }
.community-card .community-author {display:flex; align-items:center;gap:12px;}
.community-author > div {min-width:0;}
.community-author strong,.community-author small {display:block;overflow-wrap:anywhere;}
.community-card .community-post-link p {font-size:16px;line-height:1.6;margin:20px 0;}
.community-card .community-metrics {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:14px 0;border-top:1px solid #ffffff10;color:#a99e83;}
.community-metrics > span {display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;}
.community-metrics b {font-weight:500;}
.community-card .community-score {display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0 14px;}
.community-score > strong {font-size:18px;color:#edcd77;}
.post-status {font-size:12px;padding:5px 9px;border-radius:20px;background:#b78c271a;color:#d5c69e;}
.community-card .community-actions {display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #ffffff10;padding-top:14px;font-size:14px;}
.community-actions > a,.community-actions > button {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0;text-decoration:none;font-size:14px;color:#ecd7a1;}
.community-actions > button {padding:8px 14px;border-radius:24px;}
.app-offers {grid-template-columns:repeat(2,minmax(0,1fr));}
.app-offer,.app-clan-offer {min-width:0;}
@media(max-width:600px){
 .app-content {padding:22px 16px 36px;}
 .app-offers {grid-template-columns:1fr;gap:16px;}
 .app-offer {padding:24px;}
 .app-offer h3 {font-size:20px;}
 .app-offer > strong {font-size:22px;overflow-wrap:anywhere;}
 .app-offer button {font-size:16px!important;padding:14px 18px;width:100%;white-space:normal;min-height:48px;}
 .app-clan-offer {display:flex;flex-wrap:wrap;gap:16px;}
 .app-clan-offer > div {flex:1;min-width:180px;}
 .app-clan-offer > button {width:100%;font-size:16px;}
 .community-card {padding:18px;}
 .community-metrics > span {flex-direction:column;gap:5px;}
 .community-author small {font-size:12px;line-height:1.5;}
}
@media(prefers-reduced-transparency:reduce){.mobile-app .app-header{background:#050505;backdrop-filter:none;}}

.app-bottom-nav {grid-template-columns:repeat(5,minmax(0,1fr));}
.app-bottom-nav .nav-submit-post {background:linear-gradient(145deg,#f0d67b,#bc8b24);color:#17130a;box-shadow:0 4px 18px #c4942630;border-radius:18px;transform:translateY(-9px);min-height:62px;}
.app-bottom-nav .nav-submit-post:active {transform:translateY(-9px) scale(.96);}
.compact-profile .app-profile-card {padding:22px;display:grid;grid-template-columns:64px 1fr;gap:5px 16px;text-align:left;align-items:center;}
.compact-profile .profile-mark {grid-row:1/4;width:64px;height:64px;margin:0;border:0;background:none;}
.compact-profile .profile-mark .x-avatar {width:64px;height:64px;}
.compact-profile .app-profile-card h2 {font-size:23px;margin:0;}
.compact-profile .app-profile-card p {margin:0;font-size:14px;}
.compact-profile .app-profile-card button {grid-column:2;justify-self:start;margin-top:6px;padding:8px 12px;min-height:40px;font-size:13px;}
.compact-profile .app-profile-section {padding:20px;margin-top:16px;border-radius:20px;}
.compact-profile .app-profile-section h2 {font-size:18px;margin:0;}
.compact-profile .app-profile-section p {font-size:14px;margin:10px 0;}
.compact-profile .profile-stats {margin:16px 0;}
.compact-profile .profile-stats > div {padding:16px 8px;}
.compact-profile .profile-stats strong {font-size:24px;}
.streak-count {font-size:30px;display:block;margin:10px 0;color:#e9cc7d;}
.streak-count small {font-size:15px;font-weight:400;color:#c4b99e;}
.streak-card > small {display:block;margin-top:12px;font-size:12px;line-height:1.5;color:#baad8d;}
.freeze-offer {margin-top:18px;}
.post-sheet-dialog {width:min(600px,calc(100vw - 24px));max-height:85dvh;overflow-y:auto;}
.post-sheet-dialog .submission-sheet {padding:0;border:0;background:none;margin:0;}
.post-sheet-dialog .dialog-content {padding:26px;}
@media(max-width:600px){.app-bottom-nav{padding:6px;gap:3px;}.app-bottom-nav button{min-width:0;padding:8px 3px;}.app-bottom-nav button span{font-size:11px;}.post-sheet-dialog .dialog-content{padding:22px 18px;}.compact-profile .app-profile-card h2{font-size:20px;}}
@media(prefers-reduced-motion:reduce){.app-bottom-nav .nav-submit-post:active{transform:translateY(-9px);}}

.profile-active-clan {display:inline-flex;align-items:center;gap:7px;color:#c8b68a;font-size:14px;flex-wrap:wrap;}
.profile-active-clan strong {color:#efcf7c;font-weight:600;}

.clan-freezy {margin-top:24px;border-color:#66929b66;background:linear-gradient(140deg,#132027,#14120d);}
.clan-freezy > svg,.clan-frozen-label{color:#a4dbe6;}
.clan-freezy label {display:block;margin-top:18px;font-size:14px;}
.clan-freezy > button{display:block;margin-top:12px;}
.clan-freezy > small{display:block;margin-top:14px;font-size:12px;line-height:1.6;color:#baad8d;}

/* Season 00: calm hierarchy, one continuous countdown and touch-sized controls. */
.app-season-hero {display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;}
.app-season-hero .season-manifesto {margin:0;text-align:right;line-height:1.4;font-size:clamp(1rem,2vw,1.25rem);}
.app-season-hero .season-clock {grid-column:1/-1;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;text-align:left;border-top:1px solid #d3ab3433;padding-top:20px;}
.season-clock strong {font-size:clamp(1rem,4vw,1.65rem);white-space:nowrap;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.app-reward strong {font-variant-numeric:tabular-nums;font-size:clamp(1.5rem,5vw,2.5rem);overflow-wrap:anywhere;}
.community-author > div {flex:1;}
.post-clan-badge {display:flex;align-items:center;gap:6px;color:var(--clan);background:color-mix(in srgb,var(--clan) 10%,transparent);border-radius:12px;padding:8px;font-size:.8rem;flex-shrink:0;}
.own-posts > summary {cursor:pointer;font-weight:650;min-height:44px;display:flex;align-items:center;}
.own-posts .submission-sheet {padding:0;border:0;margin:12px 0 0;}
.own-posts .x-post-list {max-height:420px;max-height:50dvh;overflow-y:auto;overscroll-behavior:contain;padding-right:6px;}
.freezy-clans {display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.freezy-clans button {flex:1;min-width:145px;color:var(--clan);}
.freezy-dialog {text-align:left;}
.freezy-dialog .race-primary,.freezy-dialog .app-secondary {width:100%;margin-bottom:12px;}
.mobile-app input,.mobile-app select,.mobile-app textarea {font-size:16px;}
.post-sheet-dialog {max-height:85dvh;overflow-y:auto;}
.submission-feedback:empty {display:none;}
@media(max-width:480px) {.app-season-hero{gap:18px;padding:22px 18px;}.app-season-hero h2{font-size:1.8rem;}.post-clan-badge{flex-direction:column;font-size:.75rem;gap:2px;}.community-author{gap:8px!important;}}
/* Focused Hot toolbar and readable countdown. */
.app-season-hero .season-clock strong {font-family:system-ui,sans-serif;font-size:clamp(1.8rem,6vw,3.2rem);font-weight:900;letter-spacing:.025em;line-height:1.1;}
.app-season-hero .season-clock span {font-size:.75rem;white-space:nowrap;}
.hot-content .app-filter {position:sticky;top:calc(65px + env(safe-area-inset-top));z-index:25;background:rgba(5,5,5,.96);backdrop-filter:blur(18px);padding:12px 0;margin-top:0;}
.feed-loading {display:flex;align-items:center;justify-content:center;gap:12px;min-height:140px;color:#c6b98e;}
.flame-vote svg {transition:fill 160ms ease,color 160ms ease;}
.flame-vote[aria-pressed="true"] {opacity:1!important;color:#e9b738!important;border-color:#b79240!important;}
.flame-vote[aria-pressed="true"] svg {fill:currentColor;}
.flame-vote:active {transform:scale(.95);}
.clan-freezy .dialog-close {position:absolute;top:14px;right:14px;width:44px!important;min-width:44px;height:44px;min-height:44px;padding:0!important;border-radius:50%;margin:0!important;display:grid;place-items:center;}
.freezy-clans button:disabled {filter:grayscale(1);opacity:.4;}
.post-sheet-dialog .submission-sheet {margin:0;padding:0;}
.post-sheet-dialog .x-post-input {margin:8px 0 12px;}
.sr-only {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.rewards-card input[type="text"] {width:100%;min-height:48px;padding:12px;background:#11110d;color:#f5f1e7;border:1px solid #64542f;border-radius:12px;}
.rewards-card form {display:grid;gap:12px;}.rewards-card .network-confirm {display:flex;align-items:flex-start;gap:10px;font-size:.875rem;}.rewards-card input[type="checkbox"]{width:20px;height:20px;flex-shrink:0;}.rewards-card .payout-history{border-top:1px solid #64542f66;margin-top:20px;padding-top:16px;}
@media(max-width:380px){.app-season-hero .season-clock strong{font-size:1.65rem;letter-spacing:0;}}
@media(prefers-reduced-motion:reduce){.flame-vote:active{transform:none;}.flame-vote svg{transition:none;}}
.app-splash {min-height:100dvh;display:grid;place-items:center;background:#050505;}
.splash-mark {position:relative;width:min(68vw,320px);}
.splash-mark img {display:block;width:100%;height:auto;filter:grayscale(1);opacity:.25;}
.splash-mark .splash-color {position:absolute;inset:0;filter:none;opacity:1;animation:logo-reveal 1.6s ease-in-out infinite;}
@keyframes logo-reveal {0%{clip-path:inset(0 100% 0 0)}80%,100%{clip-path:inset(0 0 0 0)}}
.mobile-app:has(.hot-content) {height:100dvh;overflow:hidden;display:flex;flex-direction:column;}
.mobile-app .hot-content {min-height:0;overflow-y:auto;flex:1;padding-top:0;scroll-padding-top:88px;}
.hot-content .app-filter {top:0;padding:24px 0 20px;background:#050505;margin-bottom:20px;}
.hot-content .app-filter::after {content:"";position:absolute;left:0;right:0;bottom:-20px;height:20px;background:linear-gradient(#050505,transparent);pointer-events:none;}
.profile-session-actions {display:flex;gap:12px;}.profile-session-actions button{flex:1;}
.compact-profile .app-profile-card {padding:16px;row-gap:4px;}
.compact-profile .profile-mark {width:48px;height:48px;}
.clan-freezy {margin-bottom:16px!important;padding:20px!important;}
.clan-freezy > h3 {margin:6px 0;}.clan-freezy > .app-secondary {margin-top:12px;}
@media(prefers-reduced-motion:reduce){.splash-mark .splash-color{animation:none;clip-path:none;}}
.own-posts .x-post-list:not(.history-expanded){max-height:none;overflow:visible;}
.own-posts .history-expanded{max-height:50dvh;overflow-y:auto;}
/* Separate fixed toolbar spacing from the compact segmented control. */
.hot-content .hot-filter-shell{position:sticky;top:0;z-index:25;background:#050505;padding:16px 0;}
.hot-content .hot-filter-shell::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;background:linear-gradient(#050505,transparent);pointer-events:none;}
.hot-content .app-filter{position:static;padding:5px;margin:0;background:#12100b;backdrop-filter:none;border-radius:12px;}
.hot-content .app-filter::after{display:none;}
.hot-content .app-filter button{font-size:14px;line-height:1.2;}
.app-reward{justify-content:center;text-align:center;flex-direction:column;gap:8px;}
.community-card{padding:16px!important;}
.community-post-text p{white-space:pre-wrap;overflow-wrap:anywhere;margin:12px 0;line-height:1.5;}
.post-read-more{border:0;background:none;color:#e8c771;padding:4px 0 8px;min-height:36px;font:inherit;font-size:.875rem;cursor:pointer;}
.community-card .community-metrics{padding:10px 0;}.community-card .community-score{margin:8px 0;}.community-card .community-actions{padding-top:10px;}
.mobile-app .dialog-close,.mobile-app .clan-freezy .dialog-close{background:transparent!important;border:0!important;box-shadow:none!important;top:8px;right:8px;border-radius:8px;}
.mobile-app .dialog-close:focus:not(:focus-visible){outline:none;}
.mobile-app .dialog-close:focus-visible{outline:2px solid #d5ad48;outline-offset:2px;}
.mobile-app .app-clan-offer{margin:16px 0;}.mobile-app .clan-freezy{margin:16px 0!important;}
.compact-profile .profile-mark{grid-row:1/3;align-self:center;display:grid;place-items:center;width:48px;height:48px;}
.compact-profile .profile-mark .x-avatar{width:48px;height:48px;}
.compact-profile .app-profile-card{grid-template-columns:48px 1fr;}
.compact-profile .profile-stats{margin:8px 0;}.compact-profile .profile-stats>div{padding:10px 8px;}.compact-profile .streak-card{margin-top:10px;}
.race-dialog h2:focus{outline:none;}
/* Wider feed canvas, without changing the filter or its fading edge. */
.mobile-app .hot-content{width:100%;box-sizing:border-box;}
@media(max-width:600px){.mobile-app .hot-content{padding-left:8px;padding-right:8px;}.hot-content .hot-filter-shell{padding-left:8px;padding-right:8px;}}
.app-reward{padding-bottom:12px;}
.app-reward>div{width:100%;text-align:center;}
.app-reward span{font-size:clamp(.95rem,2.5vw,1.15rem);letter-spacing:.035em;}
.app-reward strong{font-size:clamp(2rem,7vw,3.2rem);font-weight:750;letter-spacing:.01em;line-height:1.2;margin:6px 0;}
.app-reward p{font-size:clamp(.9rem,2.5vw,1.05rem);max-width:none;letter-spacing:.025em;margin:4px 0;}
.app-bottom-nav button:not(.nav-submit-post){position:relative;isolation:isolate;}
.app-bottom-nav button[aria-current]{background:transparent;}
.app-bottom-nav button[aria-current]::before{content:"";position:absolute;inset:4px 5px;border-radius:12px;background:#d5a63a15;z-index:-1;pointer-events:none;}
.hot-content .hot-filter-shell{margin-bottom:16px;}
.app-season-hero .season-clock strong{font-size:clamp(1.1rem,5.2vw,2.8rem);letter-spacing:0;}
.login-screen .login-wordmark{width:min(90%,360px);height:auto;margin:12px auto 20px;display:block;animation:wordmark-arrive 800ms ease-out both;}
.login-trust{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:16px 18px;margin-top:12px;border:1px solid #b68d2933;border-radius:16px;background:#15120c;}
.login-trust>svg{flex-shrink:0;color:#d6b464;margin-top:3px;}.login-trust strong{font-size:14px;color:#e8dfc9;}.login-screen .login-trust p{font-size:14px;line-height:1.55;margin:6px 0 0;color:#b8ae95;}
.onboarding-wordmark{width:min(85%,260px);height:auto;display:block;margin:0 auto 18px;}
.onboarding-explainer li{padding:12px 0;}.onboarding-explainer p{font-size:15px;line-height:1.45;}
@keyframes wordmark-arrive{from{opacity:.3;filter:grayscale(1)}to{opacity:1;filter:grayscale(0)}}
@media(prefers-reduced-motion:reduce){.login-screen .login-wordmark{animation:none;}}