:root {
  --bg: #071225;
  --panel: #11243e;
  --line: #294361;
  --muted: #9eb2cc;
  --lime: #55d5ff;
  --ink: #f0f6ff;
  --orange: #ffaf40;
}
body {
  overflow-x: hidden;
  background: #071225;
}
.arena-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse at 10% 5%, #164a7566, transparent 55%),
    radial-gradient(ellipse at 95% 50%, #aa531c20, transparent 50%),
    linear-gradient(135deg, #071225, #0b1b31);
}
.arena-backdrop i {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#72bafa06 1px, transparent 1px),
    linear-gradient(90deg, #72bafa06 1px, transparent 1px);
  background-size: 64px 64px;
  transform: skewY(-12deg);
}
svg {
  flex-shrink: 0;
}
.game-topbar {
  height: 85px;
  max-width: 1220px;
  margin: auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.game-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 29px;
  font-weight: 950;
  font-style: italic;
  letter-spacing: -1px;
}
.game-brand > svg {
  width: 36px;
  height: 40px;
  color: var(--lime);
  filter: drop-shadow(0 0 12px #55d5ff66);
}
.game-brand small {
  display: block;
  font-size: 8px;
  letter-spacing: 1.5px;
  font-style: normal;
  color: var(--muted);
  margin-top: 2px;
}
.game-resources {
  display: flex;
  align-items: center;
  gap: 12px;
}
.resource-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #315778;
  background: linear-gradient(#1c3856, #10243d);
  padding: 7px 15px;
  border-radius: 9px;
  box-shadow: 0 3px 0 #030c19;
}
.resource-chip svg {
  width: 24px;
  height: 24px;
  color: #ffc26b;
}
.resource-chip b {
  font-size: 17px;
}
.resource-chip small {
  display: block;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--muted);
}
.task-chip svg {
  color: var(--lime);
}
.game-icon-button,
.player-token {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid #396185;
  background: #17334f;
  color: var(--lime);
}
.game-icon-button svg {
  width: 25px;
  height: 25px;
}
.player-token {
  background: linear-gradient(135deg, #3b84b8, #145074);
  color: white;
  font-weight: 900;
  border: 2px solid #58c7fc;
  transform: rotate(-3deg);
}
.player-bar {
  max-width: 1164px;
  margin: auto;
  padding: 10px 0;
  border-top: 1px solid #25415c;
  border-bottom: 1px solid #25415c;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}
.player-name {
  font-weight: 800;
  margin-right: 13px;
}
.player-team {
  color: var(--muted);
}
.region-pill {
  color: #86dfff;
  font-size: 10px;
}
.game-shell {
  max-width: 1220px;
  margin: auto;
  padding-bottom: 125px;
}
.game-stage {
  padding: 28px;
  min-width: 0;
  animation: stage-enter 0.25s ease-out;
}
.game-stage {
  touch-action: pan-y pinch-zoom;
}
.game-stage input,
.game-stage select,
.game-stage form,
.game-stage .table-scroll {
  touch-action: auto;
}
.game-stage.swiping {
  animation: none;
  transition: none;
  user-select: none;
}
.game-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 35px;
  color: var(--muted);
  font-size: 10px;
}
.game-footer a {
  color: var(--lime);
}

.lobby-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: -7px;
  color: var(--muted);
}
.lobby-pager > div {
  display: flex;
  gap: 8px;
}
.lobby-pager button {
  width: 32px;
  height: 32px;
  background: #142c46;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
  font-size: 22px;
}
.page-dot {
  width: 7px;
  height: 7px;
  background: #3b5570;
  border-radius: 10px;
}
.page-dot.selected {
  width: 23px;
  background: var(--lime);
  box-shadow: 0 0 12px #55d5ff55;
}
.lobby-pager > span {
  font-size: 9px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.button {
  background: linear-gradient(#264664, #17304b);
  border: 1px solid #456684;
  border-radius: 9px;
  box-shadow: 0 3px 0 #040d1a;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.4px;
  min-height: 43px;
}
.button svg {
  width: 20px;
  height: 20px;
}
.button.primary {
  background: linear-gradient(#ffd07a, #ffa63c);
  border-color: #ffdda0;
  color: #41250a;
  box-shadow:
    0 4px 0 #9d5015,
    inset 0 1px #fff5;
}
.button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.button:active {
  transform: translateY(2px);
}
input,
select,
textarea {
  background: #0d2038;
  border-color: #365574;
}
.panel,
.stats {
  background: linear-gradient(130deg, #162d49, #102139);
  border-color: #2a4968;
  border-radius: 12px;
}
.tab.active {
  background: #183e58;
  border-color: #3c799a;
  color: var(--lime);
}
.match-row:hover,
tr.highlight {
  background: #183b53;
}
.schedule-day,
.player,
.upload,
.info,
.organizer-strip,
.launch-banner {
  background: #122f47;
  border-color: #315877;
  color: #b8cee2;
}
.scoreboard {
  background: radial-gradient(ellipse at 50% 0, #235378, transparent 80%);
}
.badge {
  background: #205e83;
  color: #b5f0ff;
}
.status.confirmed {
  background: #164837;
  color: #b1f2ca;
}
.eyebrow {
  letter-spacing: 1.8px;
  font-size: 9px;
}
.arena-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 360px;
  border: 1px solid #39678b;
  border-radius: 17px;
  background: radial-gradient(
    ellipse at 78% 60%,
    #1b6382,
    #122a49 60%,
    #101e37
  );
  box-shadow:
    inset 0 1px #8edbff33,
    0 12px 35px #02091477;
}
.arena-art {
  position: absolute;
  width: 78%;
  height: 116%;
  object-fit: contain;
  right: -10%;
  top: -6%;
  z-index: -1;
}
.arena-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #0c1d36 2%,
    #0c1d36bb 25%,
    transparent 64%
  );
  z-index: -1;
}
.hero-game-copy {
  padding: 40px;
}
.season-ticket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #a1eaff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.1px;
}
.season-ticket svg {
  width: 17px;
  height: 17px;
}
.hero-game-copy h1,
.workshop-banner h1,
.lobby-heading h1 {
  font-family: Arial, sans-serif;
  font-style: italic;
  font-weight: 950;
  font-size: 54px;
  line-height: 1.03;
  letter-spacing: -2px;
  margin: 19px 0 14px;
  text-shadow: 0 4px 0 #03112055;
}
h1 em {
  font-style: inherit;
  color: var(--lime);
}
.hero-game-copy p {
  color: #c3d5e8;
  font-size: 13px;
}
.big-action {
  margin-top: 25px;
  min-width: 205px;
}
.arena-coordinate {
  position: absolute;
  bottom: 16px;
  right: 22px;
  font-size: 8px;
  letter-spacing: 2px;
  color: #83b6cd;
}
.game-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 30px 0 17px;
}
.game-section-head .eyebrow {
  margin-bottom: 7px;
}
.game-section-head h2 {
  font-size: 23px;
}
.game-section-head h2 > span {
  font-size: 13px;
  color: #7693b2;
  margin-left: 7px;
}
.game-league-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.league-game-card {
  position: relative;
  display: block;
  border: 1px solid #3c5b7b;
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 0, #265678, #142a45 70%);
  overflow: hidden;
  box-shadow: 0 5px 0 #030c1b;
  transition:
    transform 0.18s,
    border-color 0.18s;
}
.league-game-card:hover {
  transform: translateY(-4px);
  border-color: #70d9ff;
}
.card-ribbon {
  padding: 8px 15px;
  background: #12213699;
  border-bottom: 1px solid #52769844;
  color: #a1c2df;
  font-size: 8px;
  letter-spacing: 1.5px;
  text-align: center;
  font-weight: 800;
}
.featured-card {
  border-color: #ae7b42;
  background: radial-gradient(ellipse at 50% 0, #665332, #182b44 65%);
}
.featured-card .card-ribbon {
  color: #ffcd80;
}
.game-league-emblem {
  height: 117px;
  display: grid;
  place-items: center;
}
.game-league-emblem > svg {
  width: 64px;
  height: 64px;
  color: #87dcff;
  filter: drop-shadow(0 5px 0 #071b35);
}
.game-league-emblem > img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  filter: drop-shadow(0 6px 6px #0007);
}
.game-league-copy {
  padding: 0 22px 20px;
  text-align: center;
}
.game-card-kicker {
  font-size: 9px;
  color: #90b1d0;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.game-league-copy h3 {
  font-size: 19px;
  margin: 10px 0 7px;
  overflow-wrap: anywhere;
}
.game-league-copy p {
  font-size: 11px;
}
.game-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 17px;
  background: #091b30aa;
  border-top: 1px solid #375777;
  font-size: 9px;
  color: #9ab9d7;
}
.game-card-bottom b {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #b1edff;
  font-size: 9px;
}
.game-card-bottom svg {
  width: 17px;
  height: 17px;
}
.game-empty {
  text-align: center;
  padding: 35px;
  grid-column: 1/-1;
}
.game-empty > svg {
  width: 55px;
  height: 55px;
  color: var(--lime);
  margin-bottom: 15px;
}
.game-empty .button {
  margin-top: 20px;
}
.workshop-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 35px 40px;
  border: 1px solid #35577a;
  border-radius: 16px;
  background: radial-gradient(ellipse at 85% 50%, #285374, #102039 70%);
  overflow: hidden;
}
.workshop-banner h1 {
  font-size: 44px;
  margin-top: 12px;
}
.workshop-banner .button {
  margin-top: 22px;
}
.workshop-emblem svg {
  width: 150px;
  height: 150px;
  color: #75c4ea;
  transform: rotate(12deg);
  filter: drop-shadow(0 10px 0 #081d32);
}
.lobby-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: 4px 0 25px;
}
.lobby-heading .eyebrow {
  margin-bottom: 8px;
}
.lobby-heading h1 {
  font-size: 38px;
  margin: 0;
}
.lobby-heading p {
  margin-top: 12px;
}
.lobby-live {
  font-size: 9px;
  letter-spacing: 1px;
  white-space: nowrap;
  color: #99c7dd;
}
.lobby-live i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  margin-right: 6px;
  box-shadow: 0 0 12px var(--lime);
}
.lobby-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 22px;
}
.match-arena {
  border: 1px solid #426d92;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(#193b5b, #0e203a);
  box-shadow: 0 5px 0 #030b18;
}
.match-arena-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 20px;
  background: #10213b;
  color: #b3d5ec;
  font-size: 10px;
}
.match-arena-top b {
  font-size: 9px;
  color: var(--lime);
}
.lobby-scene {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: radial-gradient(ellipse, #295d78, #102640);
}
.lobby-scene img {
  position: absolute;
  width: 100%;
  height: 150%;
  object-fit: cover;
  top: -22%;
  opacity: 0.72;
}
.arena-sign {
  position: absolute;
  top: 17px;
  width: 100%;
  text-align: center;
  font-size: 10px;
  letter-spacing: 3px;
  color: #cff6ff;
  text-shadow: 0 2px 7px #000;
  font-weight: 900;
}
.versus-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  align-items: center;
  margin: -45px 18px 0;
  padding: 18px 8px;
  background: linear-gradient(115deg, #163f65, #13263e 50%, #533725);
  border: 1px solid #4a708d;
  border-radius: 13px;
  box-shadow: 0 6px 20px #0005;
}
.versus-card > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  min-width: 0;
}
.versus-card b {
  font-size: 13px;
  overflow-wrap: anywhere;
}
.versus-card small {
  font-size: 8px;
  color: #8abfe4;
  letter-spacing: 1px;
}
.versus-card > a:last-child small {
  color: #f8b66b;
}
.versus-bolt {
  font-size: 25px;
  font-weight: 950;
  font-style: italic;
  color: #ffd193;
  text-align: center;
}
.match-launch {
  padding: 20px 25px 25px;
  text-align: center;
}
.match-launch p {
  font-size: 11px;
  color: #acc5de;
  margin-bottom: 13px;
}
.launch-button {
  display: flex;
  width: 100%;
  min-height: 55px;
  font-size: 16px;
  font-style: italic;
}
.result-shortcut {
  display: block;
  margin-top: 18px;
  font-size: 10px;
  color: #a9c4de;
}
.lobby-side {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.panel-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.4px;
}
.panel-head h3 svg {
  width: 21px;
  height: 21px;
  color: var(--lime);
}
.mission-panel {
  border-top: 3px solid #ffb54b;
}
.squad-shortcut {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #315979;
  border-radius: 12px;
  padding: 19px;
  background: #15314b;
}
.squad-shortcut > svg {
  width: 29px;
  height: 29px;
  color: var(--lime);
}
.squad-shortcut > svg:last-child {
  margin-left: auto;
  width: 20px;
}
.squad-shortcut b {
  font-size: 12px;
}
.squad-shortcut span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 6px;
}
.fixture-deck {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.upcoming-ticket {
  display: block;
  padding: 18px;
  background: #132a43;
  border: 1px solid #355571;
  border-left: 3px solid #55d5ff;
  border-radius: 9px;
}
.upcoming-ticket > div {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  color: #93c6df;
  margin-bottom: 14px;
}
.upcoming-ticket svg {
  width: 20px;
  height: 20px;
}
.upcoming-ticket > b {
  display: block;
  font-size: 12px;
  line-height: 1.7;
}
.upcoming-ticket b span {
  font-size: 9px;
  color: #7a9ab6;
  margin: 0 8px;
}
.upcoming-ticket small {
  display: block;
  margin-top: 13px;
  color: var(--muted);
  font-size: 9px;
}
.squad-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.squad-card {
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #3e6281;
  border-radius: 15px;
  background: radial-gradient(ellipse at 50% 20%, #2b5373, #12233a 70%);
  text-align: center;
}
.squad-ribbon {
  width: 100%;
  padding: 11px;
  background: #0a1a2daa;
  font-size: 9px;
  color: #9fc2e0;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 24px;
}
.squad-card h2 {
  margin: 15px 15px 8px;
  font-size: 20px;
}
.squad-card p {
  font-size: 11px;
  margin: 0 15px;
}
.squad-numbers {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin: 23px 0;
  font-size: 8px;
  color: #a2b9d2;
}
.squad-numbers b {
  display: block;
  font-size: 23px;
  color: #eaf7ff;
  margin-bottom: 6px;
}
.squad-open {
  border-top: 1px solid #315473;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px;
  color: var(--lime);
  font-size: 10px;
  font-weight: 800;
}
.squad-open svg {
  width: 18px;
  height: 18px;
}
.add-squad {
  justify-content: center;
  border-style: dashed;
  min-height: 280px;
  background: #10223977;
}
.add-squad > svg {
  width: 50px;
  height: 50px;
  color: #6e9ab8;
}
.community-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid #735b3b;
  border-radius: 13px;
  padding: 22px;
  background: linear-gradient(110deg, #3c3326, #132740);
}
.community-banner img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.community-banner b {
  font-size: 16px;
}
.community-banner span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
}
.community-banner > svg {
  width: 25px;
  height: 25px;
  margin-left: auto;
  color: #ffd08a;
}
#toast {
  bottom: 120px;
  z-index: 50;
  color: #09243a;
}
.discovery-controls {
  margin-bottom: 20px;
}
.update-banner {
  position: fixed;
  top: calc(var(--app-safe-top, env(safe-area-inset-top, 0px)) + 10px);
  box-sizing: border-box;
  max-width: calc(100% - 32px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: #ffd080;
  color: #352207;
  border: 1px solid #ffe5bb;
  border-radius: 10px;
  padding: 13px 20px;
  box-shadow: 0 6px 25px var(--nexus-color-0008);
  font-weight: 800;
  font-size: 12px;
}
.root-stage .game-league-grid {
  min-height: 100px;
}
@keyframes stage-enter {
  from {
    opacity: 0.6;
    transform: translateX(var(--entry-x));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@media (max-width: 900px) {
  .game-league-grid,
  .squad-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lobby-layout {
    grid-template-columns: 1fr;
  }
  .lobby-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .squad-shortcut {
    grid-column: 1/-1;
  }
  .player-bar {
    margin: 0 28px;
  }
  .hero-game-copy h1 {
    font-size: 46px;
  }
  .arena-art {
    right: -18%;
    width: 90%;
  }
  .fixture-deck {
    grid-template-columns: 1fr;
  }
  .workshop-emblem svg {
    width: 100px;
    height: 100px;
  }
}
@media (max-width: 600px) {
  .game-topbar {
    height: 71px;
    padding: 0 16px;
  }
  .game-brand {
    font-size: 23px;
  }
  .game-brand > svg {
    width: 27px;
    height: 32px;
  }
  .game-brand small {
    font-size: 6px;
    letter-spacing: 0.8px;
  }
  .game-resources {
    gap: 7px;
  }
  .resource-chip {
    padding: 6px 8px;
    gap: 6px;
  }
  .resource-chip:first-child {
    display: none;
  }
  .resource-chip svg {
    width: 18px;
    height: 18px;
  }
  .resource-chip b {
    font-size: 14px;
  }
  .resource-chip small {
    font-size: 6px;
  }
  .game-icon-button,
  .player-token {
    width: 34px;
    height: 37px;
    font-size: 11px;
  }
  .game-icon-button svg {
    width: 21px;
    height: 21px;
  }
  .player-bar {
    margin: 0 16px;
    font-size: 10px;
    padding: 10px 0;
  }
  .player-team {
    font-size: 9px;
    display: inline-block;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }
  .region-pill {
    font-size: 9px;
  }
  .game-stage {
    padding: 21px 16px;
  }
  .game-shell {
    padding-bottom: 112px;
  }
  .arena-hero {
    min-height: 380px;
  }
  .hero-game-copy {
    padding: 24px;
  }
  .hero-game-copy h1 {
    font-size: 41px;
    margin-top: 15px;
  }
  .season-ticket {
    font-size: 7px;
    letter-spacing: 0.8px;
  }
  .hero-game-copy p {
    font-size: 11px;
  }
  .arena-art {
    width: 125%;
    height: 80%;
    top: 29%;
    right: -30%;
  }
  .arena-hero:after {
    background: linear-gradient(
      180deg,
      #0c1d36 0%,
      #0c1d3688 30%,
      transparent 70%
    );
  }
  .big-action {
    margin-top: 20px;
    min-width: 165px;
    position: relative;
    z-index: 2;
  }
  .arena-coordinate {
    bottom: 12px;
    font-size: 6px;
    right: 16px;
  }
  .game-section-head {
    margin: 26px 0 16px;
    align-items: center;
  }
  .game-section-head h2 {
    font-size: 20px;
  }
  .game-section-head > .button {
    font-size: 8px;
    padding: 9px;
    gap: 5px;
    min-height: 37px;
  }
  .game-section-head > .button svg {
    width: 15px;
    height: 15px;
  }
  .game-section-head .eyebrow {
    font-size: 7px;
  }
  .game-league-grid {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .league-game-card {
    display: grid;
    grid-template-columns: 98px minmax(0, 1fr);
  }
  .card-ribbon,
  .game-card-bottom {
    grid-column: 1/-1;
  }
  .game-league-emblem {
    height: 130px;
    padding-left: 12px;
  }
  .game-league-emblem > img {
    width: 74px;
    height: 74px;
  }
  .game-league-emblem > svg {
    width: 52px;
    height: 52px;
  }
  .game-league-copy {
    text-align: left;
    padding: 22px 17px 20px 12px;
    align-self: center;
  }
  .game-league-copy h3 {
    font-size: 18px;
  }
  .game-card-kicker {
    font-size: 8px;
  }
  .game-league-copy p {
    font-size: 10px;
  }
  .game-footer {
    flex-direction: column;
    font-size: 9px;
    margin-top: 28px;
  }
  .lobby-pager {
    margin-top: 0;
  }
  .lobby-heading {
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 22px;
  }
  .lobby-heading h1 {
    font-size: 31px;
  }
  .lobby-heading .eyebrow {
    font-size: 8px;
  }
  .lobby-live {
    font-size: 7px;
    margin-top: 8px;
  }
  .lobby-side {
    display: flex;
  }
  .lobby-scene {
    height: 175px;
  }
  .match-arena-top {
    padding: 13px;
    font-size: 9px;
  }
  .match-arena-top b {
    font-size: 8px;
  }
  .versus-card {
    margin: -35px 11px 0;
    padding: 16px 7px;
    grid-template-columns: minmax(0, 1fr) 35px minmax(0, 1fr);
  }
  .versus-card b {
    font-size: 11px;
  }
  .versus-card .badge.big {
    width: 55px;
    height: 63px;
    font-size: 22px;
  }
  .versus-bolt {
    font-size: 22px;
  }
  .match-launch {
    padding: 18px;
  }
  .launch-button {
    font-size: 14px;
  }
  .workshop-banner {
    padding: 25px;
  }
  .workshop-banner h1 {
    font-size: 35px;
  }
  .workshop-emblem {
    display: none;
  }
  .workshop-banner p {
    font-size: 12px;
  }
  .squad-grid {
    grid-template-columns: 1fr;
  }
  .community-banner {
    padding: 15px;
    gap: 12px;
  }
  .community-banner img {
    width: 44px;
    height: 44px;
  }
  .community-banner b {
    font-size: 13px;
  }
  .community-banner span {
    font-size: 9px;
  }
  .community-banner > svg {
    width: 18px;
    height: 18px;
  }
  .game-stage.detail-stage {
    padding-top: 24px;
  }
  .rsl-heading {
    flex-wrap: wrap;
  }
  .update-banner {
    width: calc(100% - 32px);
    text-align: center;
  }
.discovery-controls select {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .game-stage {
    animation: none;
  }
  .league-game-card {
    transition: none;
  }
  .button:hover,
  .league-game-card:hover {
    transform: none;
  }
}
@media (max-width: 360px) {
  .game-topbar {
    padding: 0 12px;
    gap: 7px;
  }
  .game-brand {
    font-size: 20px;
    gap: 4px;
  }
  .game-brand > svg {
    width: 22px;
  }
  .game-brand small {
    font-size: 5px;
    letter-spacing: 0.4px;
  }
  .game-resources {
    gap: 5px;
  }
  .resource-chip {
    padding: 6px;
  }
  .resource-chip small {
    display: none;
  }
  .game-icon-button,
  .player-token {
    width: 30px;
    height: 34px;
  }
.hero-game-copy {
    padding: 21px;
  }
  .hero-game-copy h1 {
    font-size: 36px;
  }
}
.profile-achievements {
  margin-bottom: 32px;
}
.profile-achievements > .game-section-head {
  margin-top: 0;
}
.profile-achievements > .game-section-head > svg {
  width: 34px;
  height: 34px;
  color: #ffd080;
}
.achievement-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #716044;
  border-radius: 14px;
  background: linear-gradient(125deg, #3d3325, #172e49);
  overflow: hidden;
  margin-bottom: 26px;
}
.achievement-totals > div {
  text-align: center;
  padding: 23px 10px;
  border-right: 1px solid #52607655;
}
.achievement-totals > div:last-child {
  border: 0;
}
.achievement-totals b {
  display: block;
  font-size: 32px;
  color: #ffd38b;
  margin-bottom: 7px;
}
.achievement-totals span {
  font-size: 9px;
  letter-spacing: 1px;
  color: #c1cee0;
}
.achievement-label {
  font-size: 14px;
  margin: 24px 0 13px;
}
.achievement-label span {
  color: var(--muted);
  margin-left: 7px;
}
.trophy-empty {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  border: 1px dashed #49617a;
  border-radius: 12px;
  background: #13263c;
}
.trophy-empty > svg {
  width: 45px;
  height: 45px;
  color: #728ba3;
}
.trophy-empty b {
  font-size: 14px;
}
.trophy-empty p {
  font-size: 12px;
  margin-top: 7px;
}
.placement-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  margin-bottom: 12px;
  border: 1px solid #345b7b;
  border-radius: 12px;
  background: linear-gradient(110deg, #1a3957, #12233b);
}
.placement-medal {
  width: 65px;
  text-align: center;
  flex-shrink: 0;
  color: #8bddff;
}
.placement-medal svg {
  display: block;
  width: 35px;
  height: 35px;
  margin: 0 auto 4px;
}
.placement-medal b {
  font-size: 25px;
}
.placement-copy {
  min-width: 0;
  flex: 1;
}
.placement-copy > span {
  font-size: 8px;
  letter-spacing: 1px;
  color: #8bc5df;
}
.placement-copy h3 {
  font-size: 17px;
  margin: 8px 0 5px;
}
.placement-copy p {
  font-size: 11px;
}
.placement-copy small {
  display: block;
  color: #b2c8de;
  font-size: 10px;
  line-height: 1.6;
  margin-top: 9px;
}
.placement-card > svg {
  width: 20px;
  height: 20px;
  color: #8bddff;
}
.medal-1 {
  border-color: #b88d49;
}
.medal-1 .placement-medal {
  color: #ffd17b;
}
.medal-2 .placement-medal {
  color: #d9e7f4;
}
.medal-3 .placement-medal {
  color: #e4a97a;
}
.achievement-note {
  font-size: 10px;
  line-height: 1.7;
  margin-top: 15px;
}
.profile-layout {
  align-items: start;
}
@media (max-width: 600px) {
  .achievement-totals > div {
    padding: 19px 5px;
  }
  .achievement-totals b {
    font-size: 27px;
  }
  .achievement-totals span {
    font-size: 7px;
    letter-spacing: 0.3px;
  }
  .trophy-empty {
    padding: 18px;
    gap: 13px;
  }
  .trophy-empty > svg {
    width: 31px;
    height: 31px;
  }
  .placement-card {
    padding: 16px 12px;
    gap: 12px;
  }
  .placement-medal {
    width: 44px;
  }
  .placement-copy h3 {
    font-size: 14px;
  }
  .placement-copy > span {
    font-size: 7px;
  }
  .placement-card > svg {
    width: 16px;
  }
  .trophy-empty p {
    font-size: 11px;
  }
}
.cloud-panel {
  padding: 24px;
  margin: 0 0 28px;
}
.cloud-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 12px;
}
.cloud-heading .eyebrow {
  margin-bottom: 7px;
}
.cloud-heading svg {
  width: 34px;
  height: 34px;
  color: var(--lime);
}
.cloud-panel .button {
  margin-top: 16px;
}
.cloud-panel p {
  overflow-wrap: anywhere;
}
.cloud-panel .field-help {
  margin-top: 10px;
}
.account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 22px;
}
.account-layout form {
  margin-top: 20px;
}
.account-layout .field-help {
  font-size: 12px;
  line-height: 1.7;
}
.account-layout .form-body > p {
  overflow-wrap: anywhere;
}
.account-layout .info {
  margin-top: 18px;
}
@media (max-width: 760px) {
  .account-layout {
    grid-template-columns: 1fr;
  }
  .cloud-panel {
    padding: 20px;
  }
  .cloud-heading h2 {
    font-size: 20px;
  }
}
/* Compact, tappable team tiles; details live on the team page. */
.compact-squad-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 180px));
  gap: 16px;
}
.compact-squad-card {
  height: 146px;
  min-height: 0;
  padding: 20px 12px 14px;
  justify-content: center;
  gap: 12px;
  border-radius: 18px;
  box-shadow: 0 4px 0 #061121;
  transition:
    transform 0.15s,
    border-color 0.15s;
}
.compact-squad-card:hover {
  transform: translateY(-2px);
  border-color: #71d4f4;
}
.compact-squad-card:focus-visible {
  outline: 2px solid #ffd089;
  outline-offset: 4px;
}
.compact-squad-card .team-logo,
.compact-squad-card .badge,
.compact-squad-card .compact-clan-logo {
  width: 56px;
  height: 56px;
  max-width: 56px;
  max-height: 56px;
  object-fit: contain;
  margin: 0;
  flex-shrink: 0;
}
.compact-squad-card .badge {
  font-size: 19px;
}
.compact-squad-card h2 {
  font-size: 14px;
  line-height: 1.3;
  margin: 0;
  overflow-wrap: anywhere;
}
.compact-squad-card.add-squad {
  background: #122b4344;
  border-style: dashed;
}
.compact-squad-card.add-squad > svg {
  width: 36px;
  height: 36px;
  margin: 10px;
  color: #83bad9;
}
.compact-team-heading {
  margin-bottom: 24px;
}
.compact-team-heading h1 {
  font-size: clamp(28px, 5vw, 42px);
}
.game-shell {
  padding-bottom: 120px;
}
@media (max-width: 600px) {
  .compact-squad-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .compact-squad-card {
    height: 132px;
    padding: 16px 10px 12px;
    gap: 10px;
  }
  .compact-squad-card h2 {
    font-size: 13px;
  }
  .compact-squad-card .team-logo,
  .compact-squad-card .badge,
  .compact-squad-card .compact-clan-logo {
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
  }
  .compact-team-heading {
    gap: 14px;
    margin-bottom: 20px;
  }
  .compact-team-heading .find-clans-link {
    min-height: 44px;
  }
  .game-shell {
    padding-bottom: 110px;
  }
}
/* Oversized scenes stay behind small swipes; page changes crossfade. */
.arena-backdrop { inset:-70px; transform:translateX(var(--scene-shift,0px)); transition:transform .35s ease; background:radial-gradient(ellipse at 20% 10%,var(--scene-glow,#164a7566),transparent 65%),radial-gradient(ellipse at 90% 80%,var(--scene-accent,#aa531c20),transparent 60%),linear-gradient(140deg,var(--scene-base,#071225),#091727); }
.arena-backdrop[data-scene="discover"] { --scene-base:#0b203a; --scene-glow:#2673aa88; --scene-accent:#41c6db26; }
.arena-backdrop[data-scene="owned"] { --scene-base:#211c31; --scene-glow:#90654465; --scene-accent:#e3a34030; }
.arena-backdrop[data-scene="dashboard"] { --scene-base:#071b32; --scene-glow:#165e9b99; --scene-accent:#4467ee36; }
.arena-backdrop[data-scene="myteams"] { --scene-base:#0b292d; --scene-glow:#267e726b; --scene-accent:#4dccaa30; }
.arena-backdrop[data-scene="profile"] { --scene-base:#241632; --scene-glow:#7952a47a; --scene-accent:#c35ca32b; }
.arena-backdrop[data-scene="owned"] i { background-size:100px 100px; transform:rotate(15deg); }
.arena-backdrop[data-scene="myteams"] i { background-size:90px 90px; transform:rotate(-25deg); }
.arena-backdrop[data-scene="profile"] i { background-image:radial-gradient(#bda2ea12 1px,transparent 2px); background-size:28px 28px; }
.scene-outgoing { animation:scene-fade-out .45s ease both; }
@keyframes scene-fade-out { from { opacity:1; } to { opacity:0; } }
.root-stage { transition:transform .3s ease; }
.game-gesture-active .arena-backdrop { transition:none; will-change:transform; }
.game-stage.swiping { transition:none !important; will-change:transform; }
.swipe-outgoing-page { z-index:8; pointer-events:none; overflow:hidden; animation:none !important; transition:none; will-change:transform; }
.game-stage.swipe-entering-page { animation:none !important; will-change:transform; }
@media(prefers-reduced-motion:reduce) { .swipe-outgoing-page { display:none; } }
@media(prefers-reduced-motion:reduce) { .arena-backdrop,.root-stage { transition:none; } .scene-outgoing { animation:none; opacity:0; } }

/* Bold themed scenes for the five main areas. */
.arena-backdrop[data-scene="discover"]::after { content:''; position:absolute; right:8%; top:17%; width:clamp(220px,55vw,640px); height:clamp(220px,55vw,640px); background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M35%2018h50v25c0%2020-11%2032-25%2032S35%2063%2035%2043Z%22%2F%3E%3Cpath%20d%3D%22M35%2025H20v14c0%2014%209%2022%2022%2022m43-36h15v14c0%2014-9%2022-22%2022M60%2075v18M40%2099h40%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat; opacity:.13; transform:rotate(-12deg); }
.arena-backdrop[data-scene="owned"]::after { content:''; position:absolute; right:8%; top:17%; width:clamp(220px,55vw,640px); height:clamp(220px,55vw,640px); background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%2220%22%20y%3D%2222%22%20width%3D%2280%22%20height%3D%2280%22%20rx%3D%228%22%2F%3E%3Cpath%20d%3D%22M20%2044h80M40%2014v16m40-16v16M35%2063h13m15%200h20M35%2082h13m15%200h20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat; opacity:.13; transform:rotate(-12deg); }
.arena-backdrop[data-scene="dashboard"]::after { content:''; position:absolute; right:8%; top:17%; width:clamp(220px,55vw,640px); height:clamp(220px,55vw,640px); background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%2210%22%20y%3D%2224%22%20width%3D%22100%22%20height%3D%2272%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M60%2024v72M10%2043h18v34H10m100-34H92v34h18%22%2F%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2217%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat; opacity:.13; transform:rotate(-12deg); }
.arena-backdrop[data-scene="myteams"]::after { content:''; position:absolute; right:8%; top:17%; width:clamp(220px,55vw,640px); height:clamp(220px,55vw,640px); background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M60%2012%2099%2027v34c0%2024-20%2040-39%2050-19-10-39-26-39-50V27Z%22%2F%3E%3Cpath%20d%3D%22m39%2043%2012%2012%209-23%209%2023%2012-12-6%2032H45Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat; opacity:.13; transform:rotate(-12deg); }
.arena-backdrop[data-scene="profile"]::after { content:''; position:absolute; right:8%; top:17%; width:clamp(220px,55vw,640px); height:clamp(220px,55vw,640px); background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2238%22%20r%3D%2222%22%2F%3E%3Cpath%20d%3D%22M20%20106v-8c0-25%2018-38%2040-38s40%2013%2040%2038v8Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat; opacity:.13; transform:rotate(-12deg); }
.arena-backdrop[data-scene="discover"] { --scene-base:#0b3254; --scene-glow:#2b9cdaaa; --scene-accent:#3ad4ea55; }
.arena-backdrop[data-scene="owned"] { --scene-base:#382917; --scene-glow:#b9803199; --scene-accent:#ffc65b55; }
.arena-backdrop[data-scene="dashboard"] { --scene-base:#092b45; --scene-glow:#167bd8bb; --scene-accent:#466eff66; }
.arena-backdrop[data-scene="myteams"] { --scene-base:#123d36; --scene-glow:#24a18399; --scene-accent:#66e5ac55; }
.arena-backdrop[data-scene="profile"] { --scene-base:#351b4c; --scene-glow:#9b52d499; --scene-accent:#e976bd55; }
.arena-backdrop i { opacity:1; }

/* Illustrated game-lobby scenes with beveled arena tiles. */
.arena-backdrop[data-scene="discover"] { background:radial-gradient(ellipse at 50% 8%,#67bcff66,transparent 48%),linear-gradient(0deg,#112f68dd,transparent 75%),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x2%3D%22.7%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23266fc0%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23112f68%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22160%22%20height%3D%22160%22%20fill%3D%22%23112f68%22%2F%3E%3Cpath%20d%3D%22M80%203%20157%2080%2080%20157%203%2080Z%22%20fill%3D%22url(%23g)%22%20stroke%3D%22%23112f68%22%20stroke-width%3D%226%22%2F%3E%3Cpath%20d%3D%22M5%2080%2080%205%20155%2080%22%20fill%3D%22none%22%20stroke%3D%22%2367bcff%22%20stroke-opacity%3D%22.23%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%2083%2080%20157%20155%2083%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.22%22%20stroke-width%3D%225%22%2F%3E%3C%2Fsvg%3E") center/150px 150px; }
.arena-backdrop[data-scene="owned"] { background:radial-gradient(ellipse at 50% 8%,#d09aff66,transparent 48%),linear-gradient(0deg,#332459dd,transparent 75%),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x2%3D%22.7%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%238150ad%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23332459%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22160%22%20height%3D%22160%22%20fill%3D%22%23332459%22%2F%3E%3Cpath%20d%3D%22M80%203%20157%2080%2080%20157%203%2080Z%22%20fill%3D%22url(%23g)%22%20stroke%3D%22%23332459%22%20stroke-width%3D%226%22%2F%3E%3Cpath%20d%3D%22M5%2080%2080%205%20155%2080%22%20fill%3D%22none%22%20stroke%3D%22%23d09aff%22%20stroke-opacity%3D%22.23%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%2083%2080%20157%20155%2083%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.22%22%20stroke-width%3D%225%22%2F%3E%3C%2Fsvg%3E") center/150px 150px; }
.arena-backdrop[data-scene="dashboard"] { background:radial-gradient(ellipse at 50% 8%,#6bddff66,transparent 48%),linear-gradient(0deg,#123853dd,transparent 75%),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x2%3D%22.7%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%232875a4%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23123853%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22160%22%20height%3D%22160%22%20fill%3D%22%23123853%22%2F%3E%3Cpath%20d%3D%22M80%203%20157%2080%2080%20157%203%2080Z%22%20fill%3D%22url(%23g)%22%20stroke%3D%22%23123853%22%20stroke-width%3D%226%22%2F%3E%3Cpath%20d%3D%22M5%2080%2080%205%20155%2080%22%20fill%3D%22none%22%20stroke%3D%22%236bddff%22%20stroke-opacity%3D%22.23%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%2083%2080%20157%20155%2083%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.22%22%20stroke-width%3D%225%22%2F%3E%3C%2Fsvg%3E") center/150px 150px; }
.arena-backdrop[data-scene="myteams"] { background:radial-gradient(ellipse at 50% 8%,#93e2b366,transparent 48%),linear-gradient(0deg,#173e3ddd,transparent 75%),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x2%3D%22.7%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%233b8b6b%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23173e3d%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22160%22%20height%3D%22160%22%20fill%3D%22%23173e3d%22%2F%3E%3Cpath%20d%3D%22M80%203%20157%2080%2080%20157%203%2080Z%22%20fill%3D%22url(%23g)%22%20stroke%3D%22%23173e3d%22%20stroke-width%3D%226%22%2F%3E%3Cpath%20d%3D%22M5%2080%2080%205%20155%2080%22%20fill%3D%22none%22%20stroke%3D%22%2393e2b3%22%20stroke-opacity%3D%22.23%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%2083%2080%20157%20155%2083%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.22%22%20stroke-width%3D%225%22%2F%3E%3C%2Fsvg%3E") center/150px 150px; }
.arena-backdrop[data-scene="profile"] { background:radial-gradient(ellipse at 50% 8%,#ffb4d566,transparent 48%),linear-gradient(0deg,#422648dd,transparent 75%),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x2%3D%22.7%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%2396507c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23422648%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22160%22%20height%3D%22160%22%20fill%3D%22%23422648%22%2F%3E%3Cpath%20d%3D%22M80%203%20157%2080%2080%20157%203%2080Z%22%20fill%3D%22url(%23g)%22%20stroke%3D%22%23422648%22%20stroke-width%3D%226%22%2F%3E%3Cpath%20d%3D%22M5%2080%2080%205%20155%2080%22%20fill%3D%22none%22%20stroke%3D%22%23ffb4d5%22%20stroke-opacity%3D%22.23%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%2083%2080%20157%20155%2083%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%22.22%22%20stroke-width%3D%225%22%2F%3E%3C%2Fsvg%3E") center/150px 150px; }
.arena-backdrop i { background:repeating-conic-gradient(from -15deg at 50% 0%,#ffffff0b 0deg 12deg,transparent 12deg 28deg); transform:none; opacity:.6; }
.arena-backdrop i+i { background:radial-gradient(ellipse at center,transparent 30%,#020b1f88 100%); opacity:1; }
.arena-backdrop[data-scene]::after { top:14%; right:50%; transform:translateX(50%) rotate(-8deg); width:clamp(230px,70vw,560px); height:clamp(230px,70vw,560px); opacity:.16; filter:drop-shadow(0 6px 0 #0008) drop-shadow(0 -2px 0 #ffffff80); }

/* Motorsport materials: asphalt, carbon, body paint, garage and chrome. */
.arena-backdrop[data-scene]::after { display:none; }
.arena-backdrop[data-scene] i { background:none; }
.arena-backdrop[data-scene] i+i { background:radial-gradient(ellipse at 50% 20%,transparent 15%,#020811b3 100%); }
.arena-backdrop[data-scene="discover"] { background:linear-gradient(125deg,#00b8e52b,transparent 50%,#ff9d3520),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22500%22%20height%3D%22700%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20baseFrequency%3D%22.65%22%20numOctaves%3D%223%22%20seed%3D%228%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22linear%22%20slope%3D%22.16%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Cpattern%20id%3D%22t%22%20width%3D%2246%22%20height%3D%2238%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpath%20d%3D%22M3%202%2019%2015%203%2028m40-26L27%2015l16%2013%22%20fill%3D%22none%22%20stroke%3D%22%2302080d%22%20stroke-width%3D%228%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22500%22%20height%3D%22700%22%20fill%3D%22%23202a32%22%2F%3E%3Crect%20width%3D%22500%22%20height%3D%22700%22%20filter%3D%22url(%23n)%22%20opacity%3D%22.6%22%2F%3E%3Cg%20transform%3D%22rotate(-25%20250%20350)%22%20opacity%3D%22.7%22%3E%3Crect%20x%3D%2290%22%20y%3D%22-300%22%20width%3D%2246%22%20height%3D%221300%22%20fill%3D%22url(%23t)%22%2F%3E%3Crect%20x%3D%22218%22%20y%3D%22-300%22%20width%3D%2246%22%20height%3D%221300%22%20fill%3D%22url(%23t)%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M420%200v700%22%20stroke%3D%22%23ddd2a2%22%20stroke-opacity%3D%22.16%22%20stroke-width%3D%227%22%20stroke-dasharray%3D%2280%2065%22%2F%3E%3C%2Fsvg%3E") center/cover; }
.arena-backdrop[data-scene="owned"] { background:linear-gradient(135deg,transparent 25%,#c3d7eb25 26%,transparent 29%,transparent 65%,#ff99283b 66%,transparent 69%),radial-gradient(ellipse at 85% 0%,#f7a53745,transparent 65%),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%23080d13%22%2F%3E%3Cpath%20d%3D%22M0%200h12v12H0Zm12%2012h12v12H12Z%22%20fill%3D%22%231c252e%22%2F%3E%3Cpath%20d%3D%22M2%202h8M2%205h8M2%208h8m4%206h8m-8%203h8m-8%203h8%22%20stroke%3D%22%2358626d%22%20stroke-opacity%3D%22.28%22%2F%3E%3C%2Fsvg%3E") center/24px 24px; }
.arena-backdrop[data-scene="dashboard"] { background:linear-gradient(118deg,#061831 5%,#124e8d 28%,#3295dc 41%,#b5eaff88 43%,#164d85 46%,#071e40 67%,#3680b0 86%,#07172a),radial-gradient(#d7f3ff44 1px,transparent 1px); background-blend-mode:screen; background-size:cover,5px 5px; }
.arena-backdrop[data-scene="myteams"] { background:linear-gradient(170deg,transparent 42%,#75ffe344 43%,#0d2028 44%,transparent 47%),linear-gradient(10deg,#081317 12%,#23444b 13%,#0a1b24 35%,transparent 36%),repeating-linear-gradient(90deg,#0b171e 0 65px,#1c343e 66px 70px,#0b171e 71px 135px),linear-gradient(#183c45,#08131b); }
.arena-backdrop[data-scene="profile"] { background:linear-gradient(125deg,#101821 8%,#596776 23%,#b6c2cb 26%,#283843 30%,#101925 45%,#475b69 64%,#879daa 67%,#1c2c39 72%,#111a28),radial-gradient(ellipse at 80% 0%,#f84bba66,transparent 60%); background-blend-mode:soft-light; }
.arena-backdrop[data-scene="myteams"] i { background:linear-gradient(90deg,transparent 16%,#87ffe926 17%,transparent 18%,transparent 80%,#87ffe926 81%,transparent 82%); }
.arena-backdrop[data-scene="myteams"] { background:linear-gradient(180deg,#06152470,#06152420 45%,#06152480),url('/assets/rsl/teams-car-meet.png') center/cover no-repeat; }
.arena-backdrop[data-scene="myteams"] i { background:none; }
/* Neighbor pages are ready before the gesture and remain visible while held. */
.game-neighbor-page { position:fixed; inset:0 auto auto 0; width:100vw; border:0; margin:0; z-index:8; pointer-events:none; visibility:hidden; background:#071225; will-change:transform; }
.game-shell { touch-action:pan-y pinch-zoom; }
.game-gesture-active .game-shell { overflow:visible; }
/* A single welcome gate, then five persistent pages with no reload on swipe. */
#game-welcome { position:fixed; inset:0; z-index:10000; display:grid; align-items:end; color:#fff; background:#071225; transition:opacity .3s ease; }
.welcome-art { position:absolute; inset:0; background:linear-gradient(180deg,#07122522 15%,#07122555 45%,#071225 95%),url('/assets/rsl/teams-car-meet.png') center 40%/cover no-repeat; }
.welcome-content { position:relative; padding:40px 26px calc(36px + env(safe-area-inset-bottom)); max-width:560px; width:100%; margin:0 auto; box-sizing:border-box; }
.welcome-kicker { color:#61ddff; font-size:11px; font-weight:800; letter-spacing:2px; }
.welcome-content h1 { font-size:clamp(36px,10vw,58px); line-height:1.05; margin:16px 0; font-weight:900; font-style:italic; }
.welcome-content h1 em { color:#56d6ff; }
.welcome-content p { color:#ccdae8; margin:0 0 32px; }
.welcome-content progress { appearance:none; width:100%; height:8px; border:0; border-radius:8px; overflow:hidden; background:#18334e; }
.welcome-content progress::-webkit-progress-bar { background:#18334e; }
.welcome-content progress::-webkit-progress-value { background:linear-gradient(90deg,#2693cf,#78ebff); transition:width .25s; }
.welcome-content progress::-moz-progress-bar { background:#78ebff; }
.welcome-status { display:block; font-size:12px; margin-top:12px; color:#aac6dd; }
.welcome-content button { margin-top:20px; }
#game-welcome.welcome-complete { opacity:0; pointer-events:none; }
.game-neighbor-page { contain:layout paint; }

/* The host owns the fixed dock; only the cached page documents may scroll.
   Long fallback content must never enlarge the host's iOS viewport. */
html.game-pager-host {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
html.game-pager-host body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
html.game-pager-host #app {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
html.game-pager-host .game-neighbor-page { height: 100dvh; }

@media (max-width: 700px) {
  #app { padding-top: var(--app-safe-top, env(safe-area-inset-top, 0px)); box-sizing: border-box; }
}
html.phone-preview-mode #app { padding-top: var(--app-safe-top, env(safe-area-inset-top, 0px)); box-sizing: border-box; }

/* Older preview URLs also need the iPhone status-bar inset. */
html.phone-preview-mode #app {
  padding-top: var(--app-safe-top, 47px) !important;
}
@media (max-width: 700px) {
  html:not(.phone-preview-mode) #app { padding-top: var(--app-safe-top, env(safe-area-inset-top, 0px)) !important; }
}

/* Hide scroll chrome without disabling scrolling in pages or nested panels. */
html, body, body * { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}



/* Fill the fixed viewport itself, including the iOS bottom display region.
   Dynamic viewport units can leave an unpainted strip in standalone Safari. */
html.game-pager-host body { height: 100%; }
html.game-pager-host .game-neighbor-page { top: 0; bottom: 0; height: 100%; }

/* Cached pages own page headers; the host only owns the bottom dock. */
html.game-pager-host #app > .shared-social-menu,
html.game-pager-host #app > .game-topbar,
html.game-pager-host #app > a.unified-back {
  display:none !important;
}
/* Never expose the host's duplicate detail content during page gestures. */
html.game-pager-host #app > .game-shell,
html.game-pager-host #app > .player-bar {
  display:none !important;
}
/* Every page can stretch at either edge without exposing Safari's blank canvas. */
html:not(.game-pager-host), html:not(.game-pager-host) body {
  overscroll-behavior-y: none;
}
#app:not(:has(#chat-log)) > :is(.game-shell, .game-topbar, .player-bar, a.unified-back) {
  translate: 0 var(--edge-pull, 0px);
  transition: translate .35s cubic-bezier(.2,.8,.2,1);
}
html.edge-pulling #app:not(:has(#chat-log)) > :is(.game-shell, .game-topbar, .player-bar, a.unified-back) {
  transition: none;
  will-change: translate;
}
@media (prefers-reduced-motion: reduce) {
  #app:not(:has(#chat-log)) > :is(.game-shell, .game-topbar, .player-bar, a.unified-back) { transition: none; }
}

/* A fixed conversation must stay relative to the viewport, not a translated shell. */
#app:has(#chat-log) > .game-shell { translate: none; }
#app:has(#chat-log) .chat-log {
  translate: 0 var(--edge-pull, 0px);
  transition: translate .35s cubic-bezier(.2,.8,.2,1);
}
html.edge-pulling #app:has(#chat-log) .chat-log { transition: none; }
@media (prefers-reduced-motion: reduce) {
  #app:has(#chat-log) .chat-log { transition: none; }
}

html.game-pager-host #app > .game-dock { visibility:visible; pointer-events:auto; z-index:100; }
html:not(.swipe-buffer-page) #app:has(#chat-log) > .game-dock { visibility:visible; pointer-events:auto; z-index:100; }

.arena-backdrop[data-scene="profile"]{background:linear-gradient(#03122535,#03122555),url('/assets/rsl/profile-pearl-rain.jpg') center/cover no-repeat;background-blend-mode:normal}

.arena-backdrop[data-scene="profile"]{background:linear-gradient(#020b17b8,#020b17cc),url("/assets/rsl/profile-pearl-rain.jpg") center/cover no-repeat;background-blend-mode:normal}

/* One viewport-sized clan photo, without duplicate backing layers. */
.arena-backdrop[data-scene="myteams"]{inset:0;transform:none;transition:none;background-position:center center;background-size:cover;background-repeat:no-repeat}
html.swipe-buffer-page .arena-backdrop.scene-outgoing{display:none}
html.game-pager-host,html.game-pager-host body{background-image:none;background-color:#061222}

/* Keep short social pages and their fixed photo in one full-screen layer. */
html.swipe-buffer-page #app{isolation:isolate;min-height:100svh;background:transparent}
html.swipe-buffer-page #app>.arena-backdrop{z-index:-1}
html.game-pager-host #app>.arena-backdrop{display:none}
.arena-backdrop[data-scene="myteams"]>i{display:none}

/* Friends share the same fixed car-meet framing, with shadowed companions. */
.arena-backdrop[data-scene="myteams"]::after{
  content:"";display:block;position:absolute;inset:0;width:auto;height:auto;
  transform:none;border:0;border-radius:0;box-shadow:none;filter:none;
  background:linear-gradient(180deg,#06152470,#06152420 45%,#06152480),url('/assets/rsl/friends-car-meet.jpg') center/cover no-repeat;
  opacity:0;pointer-events:none;animation:none;transition:opacity .75s ease-in-out;
  --people-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%201536%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22soft%22%3E%3CfeGaussianBlur%20stdDeviation%3D%222%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22white%22%20filter%3D%22url(%23soft)%22%3E%3Cpath%20d%3D%22M50%201000%20Q90%20936%20146%20974%20L169%201030%20157%201110%20149%201200%20184%201318%20147%201355%2097%201339%2052%201255%2036%201100Z%22%2F%3E%3Cpath%20d%3D%22M169%20891%20Q205%20857%20231%20890%20L244%20947%20228%201012%20190%201024%20173%20978Z%22%2F%3E%3Cpath%20d%3D%22M348%20890%20Q375%20859%20398%20889%20L410%20955%20399%201003%20360%201003%20346%20949Z%22%2F%3E%3Cpath%20d%3D%22M528%20889%20Q550%20868%20570%20889%20L581%20946%20565%201018%20533%201018%20526%20961Z%22%2F%3E%3Cpath%20d%3D%22M677%20893%20Q704%20866%20727%20890%20L740%20950%20719%201020%20680%201019%20675%20961Z%22%2F%3E%3Cpath%20d%3D%22M845%20897%20Q874%20871%20898%20904%20L915%20965%20899%201046%20858%201046%20839%20975Z%22%2F%3E%3Cpath%20d%3D%22M729%20988%20Q772%20947%20811%20972%20L850%201031%20845%201127%20819%201220%20815%201315%20772%201358%20720%201348%20713%201304%20742%201214%20724%201130%20716%201040Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  mask-image:var(--people-mask);mask-size:cover;mask-position:center;mask-repeat:no-repeat;
  -webkit-mask-image:var(--people-mask);-webkit-mask-size:cover;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;
}
#app>.arena-backdrop[data-scene="myteams"].friends-visible::after{
  opacity:1;
}

@media(prefers-reduced-motion:reduce){
  #app>.arena-backdrop[data-scene="myteams"]::after{transition:none}
}
/* Apply the home artwork to the actual pager backdrop, including phone iframes. */
#app>.arena-backdrop[data-scene="discover"]{
  background:linear-gradient(180deg,#06142625,#06142645),url('/assets/rsl/home-arena-v2.png') center center/cover no-repeat;
  background-blend-mode:normal;
}
#app>.arena-backdrop[data-scene="discover"] i,
#app>.arena-backdrop[data-scene="discover"]::before,
#app>.arena-backdrop[data-scene="discover"]::after{background:none;display:none}
/* Spieltag uses the same column as the clan navigation. */
#app .game-shell #game-stage:has(.dashboard-focus),#app .game-shell #game-stage:has(.lobby-layout){width:calc(100% - 24px);max-width:720px;box-sizing:border-box;margin-inline:auto;padding-inline:0!important}
#game-stage .dashboard-focus{width:100%;max-width:none;box-sizing:border-box;margin-inline:0}
#app .game-shell #game-stage.profile-width-stage{width:calc(100% - 24px);max-width:720px;box-sizing:border-box;margin-inline:auto;padding-inline:0!important}

/* BoostLiga originals: centered home branding and the central navigation crest. */
#app:has(.home-market) > .game-topbar { position:relative; height:124px; min-height:124px; justify-content:center; }
#app:has(.home-market) > .game-topbar .game-brand { position:absolute; top:18px; left:50%; transform:translateX(-50%); margin:0; width:min(400px,70vw); display:block; }
.game-brand .boostliga-wordmark { display:block; width:100%; height:auto; }
@media(max-width:520px) {
  #app:has(.home-market) > .game-topbar { height:106px; min-height:106px; }
  #app:has(.home-market) > .game-topbar .game-brand { top:18px; width:min(320px,76vw); }
}