@font-face {
  font-family:Bungee;
  src:url('/fonts/bungee-latin.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:Rubik;
  src:url('/fonts/rubik-latin.woff2') format('woff2');
  font-weight:400 800;
  font-display:swap;
}
:root {
  --bg:#10131f;
  --panel:#1b2033;
  --panel2:#252b42;
  --line:#343b58;
  --text:#f4f1e8;
  --muted:#a7adc4;
  --gold:#ffc83d;
  --red:#e0323c;
  --blue:#2f6bff;
  --purple:#c04bff;
  --green:#1fa35b;
  --display:Bungee,Impact,sans-serif;
  font-family:Rubik,sans-serif;
  color:var(--text);
  background:var(--bg);
  font-synthesis:none;
  scroll-behavior:smooth;
  scroll-padding-top:28px;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  min-width:320px;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  font:inherit;
}
img {
  display:block;
  max-width:100%;
  image-rendering:pixelated;
}
p,h1,h2,h3 {
  margin:0;
}
p {
  line-height:1.65;
}
button,a,summary {
  -webkit-tap-highlight-color:transparent;
}
button,a,summary,[tabindex] {
  touch-action:manipulation;
}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:6px;
}
a,button {
  transition:background .18s,transform .18s,color .18s;
}
a:hover {
  color:var(--gold);
}
[hidden] {
  display:none!important;
}
::selection {
  background:var(--gold);
  color:var(--bg);
}
.wrap {
  width:min(1160px,calc(100% - 64px));
  margin-inline:auto;
}
.skip-link {
  position:fixed;
  left:20px;
  top:-100px;
  z-index:20;
  padding:14px 22px;
  background:var(--gold);
  color:var(--bg);
  font-weight:700;
}
.skip-link:focus {
  top:16px;
}
.site-header {
  height:108px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #252b42;
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--display);
  font-size:17px;
  line-height:1.12;
  letter-spacing:.3px;
}
.brand>span>span {
  display:block;
  color:var(--gold);
  font-size:21px;
}
.brand-star {
  font-size:17px;
  color:var(--text);
}
.site-header nav {
  display:flex;
  gap:30px;
  color:var(--muted);
  font-size:14px;
  font-weight:500;
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  min-height:50px;
  padding:13px 23px;
  border:1px solid #2fbb72;
  border-radius:12px;
  background:var(--green);
  color:var(--bg);
  box-shadow:0 5px 0 #13703d;
  font-family:var(--display);
  font-size:14px;
  white-space:nowrap;
}
.button:hover {
  background:#25b96a;
  color:var(--bg);
  transform:translateY(-2px);
}
.button:active {
  transform:translateY(3px);
  box-shadow:0 2px 0 #13703d;
}
.button-small {
  min-height:42px;
  font-size:12px;
  padding:10px 19px;
}
.button-primary {
  min-height:61px;
  font-size:17px;
  padding:17px 27px;
}
.hero {
  overflow:clip;
  min-height:690px;
  display:grid;
  grid-template-columns:1.04fr 1fr;
  align-items:center;
  gap:26px;
  padding-block:54px 66px;
}
.hero-copy {
  position:relative;
  z-index:2;
}
.eyebrow {
  font-size:11px;
  line-height:1.5;
  font-weight:700;
  letter-spacing:1.8px;
  color:var(--gold);
  margin-bottom:19px;
}
.mini-spark {
  font-size:16px;
  margin-right:7px;
}
h1,h2,h3 {
  font-weight:400;
}
h1,h2 {
  font-family:var(--display);
}
h1 {
  font-size:clamp(36px,4.1vw,54px);
  line-height:1.22;
  letter-spacing:-1px;
  max-width:620px;
}
.year {
  white-space:nowrap;
}
.gold-text {
  color:var(--gold);
}
h1 .gold-text {
  display:block;
}
.hero-description {
  color:var(--muted);
  max-width:455px;
  margin-block:24px 29px;
  font-size:17px;
  line-height:1.75;
}
.hero-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:25px;
}
.hero-note {
  font-size:11px;
  color:var(--muted);
  margin-top:23px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.hero-note>span:first-child {
  color:#5ad894;
}
.watch-link {
  font-size:13px;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
}
.live-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#72e39c;
  box-shadow:0 0 0 4px #72e39c15;
  flex-shrink:0;
}
.hero-art {
  height:560px;
  position:relative;
  isolation:isolate;
}
.hero-art::before {
  content:'';
  position:absolute;
  inset:20px -20px;
  background:radial-gradient(ellipse at 70% 30%,#2f6bff18,transparent 60%),radial-gradient(ellipse at 20% 70%,#e0323c1c,transparent 60%);
  z-index:-1;
}
.art-orbit {
  position:absolute;
  width:450px;
  height:450px;
  border:1px dashed #343b5866;
  border-radius:50%;
  top:60px;
  left:34px;
  transform:rotate(-20deg);
}
.orbit-two {
  width:360px;
  height:360px;
  top:104px;
  left:80px;
  border-style:solid;
}
.arena-board {
  position:absolute;
  top:20px;
  left:25%;
  width:255px;
  padding:8px;
  background:#252b42;
  border:2px solid #47516f;
  border-radius:22px;
  box-shadow:0 10px 0 #080b14,18px 25px 45px #0006;
  transform:rotate(8deg);
}
.arena-hud {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px 13px;
  font-family:var(--display);
  font-size:19px;
}
.hud-side {
  font-family:Rubik,sans-serif;
  font-size:11px;
  background:var(--red);
  padding:5px 11px;
  border-radius:5px;
}
.hud-side.pl {
  background:var(--blue);
}
.arena-field {
  position:relative;
  overflow:hidden;
  border:2px solid #111625;
  border-radius:6px;
  background:#243d3d;
}
.arena-image {
  width:100%;
  height:auto;
}
.arena-unit {
  position:absolute;
  width:18%;
  height:auto;
  filter:drop-shadow(0 3px 0 #0003);
  animation:unit-walk 2.5s steps(4,end) infinite;
}
.unit-lula {
  left:11%;
  top:53%;
}
.unit-janja {
  left:28%;
  top:65%;
  animation-delay:-1.2s;
}
.unit-flavio {
  right:10%;
  top:34%;
  animation-direction:reverse;
}
.unit-michelle {
  right:27%;
  top:24%;
  animation-delay:-.6s;
  animation-direction:reverse;
}
.arena-votos {
  padding:10px 3px 2px;
  display:flex;
  align-items:center;
  gap:3px;
}
.arena-votos>span {
  font-size:9px;
  font-weight:700;
  margin-right:5px;
}
.arena-votos i {
  height:14px;
  width:14px;
  border-radius:3px;
  background:var(--purple);
  border-top:2px solid #e29aff;
  box-shadow:0 3px 0 #743398;
}
.arena-votos b {
  font-family:var(--display);
  font-size:17px;
  margin-left:auto;
  color:#e2a6ff;
}
.floating-card {
  position:absolute;
  width:118px;
  border:3px solid var(--gold);
  border-radius:10px;
  padding:5px;
  background:#242136;
  box-shadow:0 6px 0 #80601c,0 12px 30px #0008;
  animation:card-bob 4s ease-in-out infinite;
}
.floating-card img {
  width:100%;
  height:auto;
  border-radius:3px;
}
.floating-card>span {
  font-family:var(--display);
  font-size:13px;
  display:block;
  text-align:center;
  padding-top:7px;
}
.floating-card>b {
  position:absolute;
  top:-15px;
  left:-14px;
  width:33px;
  height:37px;
  display:grid;
  place-content:center;
  background:#78318e;
  border:2px solid #d994ff;
  border-radius:13px 13px 16px 16px;
  font-family:var(--display);
  font-size:18px;
}
.floating-pt {
  left:0;
  top:65px;
  transform:rotate(-13deg);
  --card-angle:-13deg;
}
.floating-pl {
  right:-6px;
  top:267px;
  transform:rotate(14deg);
  --card-angle:14deg;
  animation-delay:-2s;
}
.pixel-spark {
  position:absolute;
  color:var(--gold);
  font-size:27px;
}
.spark-one {
  top:14px;
  right:47px;
}
.spark-two {
  bottom:45px;
  left:27px;
  font-size:17px;
}
.arena-sticker {
  position:absolute;
  bottom:60px;
  left:0;
  background:var(--gold);
  color:#10131f;
  font-family:var(--display);
  font-size:13px;
  line-height:1.6;
  padding:13px 18px;
  transform:rotate(-6deg);
  border:2px solid #ffde80;
  box-shadow:0 5px 0 #977119;
}
.demo-label {
  position:absolute;
  bottom:2px;
  right:40px;
  letter-spacing:1.5px;
  font-size:8px;
  color:var(--muted);
}
.game-strip {
  border-block:1px solid #343b5880;
  background:#191d2d;
}
.game-strip>.wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding-block:25px;
}
.game-strip span {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:9px;
  font-weight:500;
  letter-spacing:.6px;
  color:var(--muted);
}
.game-strip b {
  font-family:var(--display);
  font-weight:400;
  font-size:16px;
  color:var(--text);
  letter-spacing:0;
}
.game-strip i {
  font-style:normal;
  color:var(--gold);
}
.section {
  padding-block:88px;
}
h2 {
  font-size:clamp(25px,3vw,35px);
  line-height:1.35;
  letter-spacing:-.5px;
}
.section-intro {
  max-width:650px;
  margin-bottom:36px;
}
.section-intro .eyebrow {
  margin-bottom:13px;
}
.section-intro>p:last-child {
  color:var(--muted);
  margin-top:16px;
  font-size:15px;
}
.steps {
  padding:0;
  margin:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.steps>li {
  position:relative;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  padding:28px;
  box-shadow:0 5px 0 #0b0e19;
}
.step-number {
  position:absolute;
  right:20px;
  top:18px;
  font-family:var(--display);
  font-size:26px;
  color:#747d9b;
}
.step-art {
  height:90px;
  margin:10px 0 23px;
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--display);
}
.choose-art>span {
  display:grid;
  place-items:center;
  background:var(--red);
  width:65px;
  height:65px;
  border-radius:12px;
  box-shadow:0 5px 0 #b3242f;
  font-size:21px;
  transform:rotate(-8deg);
}
.choose-art>span:last-child {
  background:var(--blue);
  box-shadow:0 5px 0 #24489e;
  transform:rotate(8deg);
}
.choose-art>b {
  color:var(--gold);
  font-size:18px;
}
.deck-art {
  gap:0;
  padding-left:14px;
}
.deck-art img {
  width:56px;
  height:70px;
  border:3px solid #c4a8ff;
  border-radius:6px;
  box-shadow:0 4px 0 #5a4d7a;
  transform:rotate(-13deg);
  margin-right:-12px;
}
.deck-art img:nth-child(2) {
  z-index:1;
  transform:translateY(-9px);
}
.deck-art img:nth-child(3) {
  transform:rotate(13deg);
}
.timer-art {
  font-size:36px;
  color:var(--gold);
  display:block;
  padding-top:3px;
  line-height:1.3;
}
.timer-art>span {
  display:block;
  font-size:10px;
  color:#72e39c;
  letter-spacing:1.3px;
}
.steps h3 {
  font-size:18px;
  font-weight:700;
  margin-bottom:13px;
}
.steps p {
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
}
.steps strong {
  color:var(--text);
  font-weight:500;
}
.roster-section {
  border-block:1px solid #252b42;
  background:#151927;
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:25px;
  margin-bottom:28px;
}
.muted {
  color:var(--muted);
}
.carousel-controls {
  display:flex;
  gap:9px;
  flex-shrink:0;
}
.carousel-controls button {
  width:46px;
  height:46px;
  border-radius:10px;
  border:1px solid #58617f;
  background:var(--panel2);
  color:var(--text);
  font-size:23px;
  cursor:pointer;
  box-shadow:0 3px 0 #0b0e19;
}
.carousel-controls button:hover {
  background:#343b58;
  transform:translateY(-2px);
}
.roster-hint {
  font-size:12px;
  color:var(--muted);
  margin-bottom:19px;
}
.roster-hint span {
  margin-left:9px;
  color:var(--gold);
}
.roster {
  list-style:none;
  display:flex;
  gap:20px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scrollbar-color:#626e94 #252b42;
  scrollbar-width:thin;
  margin:0 -6px;
  padding:6px 6px 23px;
}
.character-card {
  flex:0 0 212px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  overflow:hidden;
  scroll-snap-align:start;
  --rarity:#c4a8ff;
}
.character-card.champion {
  --rarity:#ffc83d;
}
.character-card.legendary {
  --rarity:#4fd1c5;
}
.character-card.rare {
  --rarity:#f0a23b;
}
.portrait-wrap {
  height:207px;
  position:relative;
  padding-top:10px;
  border-bottom:3px solid var(--rarity);
  background:#74252e;
  overflow:hidden;
}
.pl .portrait-wrap {
  background:#173b8e;
}
.neutral .portrait-wrap {
  background:#332c4f;
}
.portrait-wrap::after {
  content:'';
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 30px #0003;
  pointer-events:none;
}
.portrait-wrap>img {
  width:160px;
  height:200px;
  margin-inline:auto;
}
.card-cost {
  position:absolute;
  left:12px;
  top:12px;
  width:31px;
  height:35px;
  border-radius:12px 12px 16px 16px;
  background:#7f359b;
  border:2px solid #da9afc;
  display:grid;
  place-items:center;
  font-family:var(--display);
  font-size:17px;
  z-index:1;
}
.team-tag {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 8px;
  border-radius:4px;
  background:#b3242f;
  color:#fff;
  font-size:10px;
  line-height:1.5;
  font-weight:700;
}
.team-tag.pl {
  background:#24489e;
}
.team-tag.neutral {
  background:#4a3f6b;
}
.portrait-wrap>.team-tag {
  position:absolute;
  bottom:11px;
  right:11px;
  z-index:1;
  border:1px solid #ffffff4d;
}
.character-copy {
  padding:18px 17px 22px;
}
.rarity {
  color:var(--rarity);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:700;
  margin-bottom:6px;
}
.character-copy h3 {
  font-weight:700;
  font-size:17px;
  line-height:1.35;
  min-height:46px;
  margin-bottom:8px;
}
.character-copy>p:last-child {
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
}
.roster-note {
  font-size:12px;
  color:var(--muted);
  margin-top:22px;
}
.live-section {
  border-bottom:1px solid var(--line);
  overflow-anchor:none;
}
.live-section .eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
}
.live-section .section-heading>p {
  font-size:13px;
  color:var(--muted);
}
.live-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.live-match {
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  padding:22px;
  display:block;
  min-width:0;
}
.live-match:hover {
  border-color:#72e39c;
  color:var(--text);
}
.live-players {
  display:flex;
  flex-direction:column;
  gap:9px;
}
.live-players>span:not(.versus) {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  font-size:14px;
}
.live-players>span>span {
  overflow-wrap:anywhere;
}
.live-players .versus {
  font-size:12px;
  color:var(--muted);
  margin-left:13px;
  line-height:1;
}
.live-meta {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-top:24px;
  font-size:10px;
  color:var(--muted);
}
.live-meta strong {
  color:#72e39c;
  font-size:11px;
}
.arenas-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.arena-preview {
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
}
.arena-preview-image {
  height:230px;
  position:relative;
  overflow:hidden;
  background:#243d3d;
}
.arena-preview-image::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#10131f55,transparent 50%);
  pointer-events:none;
}
.arena-preview-image img {
  position:absolute;
  left:50%;
  top:50%;
  width:180px;
  height:320px;
  max-width:none;
  transform:translate(-50%,-50%) rotate(-90deg) scale(1.8);
}
.arena-preview-image.planalto img {
  object-position:50% 50%;
}
.arena-index {
  position:absolute;
  top:18px;
  left:20px;
  padding:6px 10px;
  background:#10131fe8;
  color:var(--gold);
  border:1px solid #ffc83d66;
  border-radius:5px;
  font-size:10px;
  letter-spacing:1px;
  font-weight:700;
  z-index:1;
}
.arena-preview-copy {
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.arena-preview h3 {
  font-family:var(--display);
  font-size:17px;
  margin-bottom:7px;
}
.arena-preview p {
  font-size:12px;
  color:var(--muted);
}
.arena-unlock {
  flex-shrink:0;
  font-size:10px;
  color:var(--gold);
  border:1px solid #ffc83d44;
  background:#ffc83d0a;
  border-radius:6px;
  padding:7px 9px;
}
.install-section {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:70px;
  align-items:center;
  padding-block:64px 94px;
  border-bottom:1px solid #252b42;
}
.install-visual {
  height:366px;
  position:relative;
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse,#2f6bff0e,transparent 65%);
}
.phone {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:184px;
  height:330px;
  background:#1b2033;
  border:6px solid #46516f;
  border-radius:31px;
  transform:rotate(-9deg);
  box-shadow:7px 9px 0 #080b14,inset 0 0 0 3px #0c101c;
  padding-top:57px;
}
.phone-speaker {
  position:absolute;
  top:13px;
  width:53px;
  height:8px;
  border-radius:5px;
  background:#080b14;
}
.phone>span {
  font-family:var(--display);
  font-size:17px;
  line-height:1.3;
  text-align:center;
  margin-top:14px;
  color:var(--gold);
}
.phone>b {
  font-family:var(--display);
  font-size:11px;
  font-weight:400;
  background:var(--green);
  box-shadow:0 4px 0 #13703d;
  padding:8px 15px;
  border-radius:7px;
  margin-top:22px;
  color:#fff;
}
.phone-bottom {
  position:absolute;
  bottom:11px;
  width:55px;
  height:4px;
  border-radius:3px;
  background:#7e88a7;
}
.install-spark {
  position:absolute;
  color:var(--gold);
  font-size:34px;
  right:64px;
  top:6px;
}
.install-label {
  position:absolute;
  right:12px;
  bottom:58px;
  transform:rotate(8deg);
  font-family:var(--display);
  font-size:12px;
  padding:10px 16px;
  background:var(--gold);
  color:var(--bg);
  box-shadow:0 4px 0 #977119;
  line-height:1.5;
}
.install-description {
  font-size:15px;
  color:var(--muted);
  margin-top:20px;
}
.install-instructions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-block:27px;
}
.install-instructions h3 {
  font-size:14px;
  font-weight:700;
  margin-bottom:10px;
}
.install-instructions p {
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
}
.install-instructions strong {
  color:var(--text);
  font-weight:500;
}
.text-link {
  color:var(--gold);
  font-size:13px;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  gap:12px;
}
.text-link:hover {
  text-decoration:underline;
}
.install-small {
  font-size:10px;
  color:var(--muted);
  margin-top:6px;
}
.faq-section {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
}
.faq-section>div>p:last-child {
  font-size:14px;
  color:var(--muted);
  margin-top:18px;
}
.faq-list {
  border-top:1px solid var(--line);
}
.faq-list details {
  border-bottom:1px solid var(--line);
}
.faq-list summary {
  cursor:pointer;
  list-style:none;
  padding:22px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:15px;
  font-weight:500;
  min-height:66px;
}
.faq-list summary::-webkit-details-marker {
  display:none;
}
.faq-list summary span {
  font-size:24px;
  color:var(--gold);
  font-weight:400;
  transition:transform .2s;
}
.faq-list details[open] summary span {
  transform:rotate(45deg);
}
.faq-list details>p {
  padding:0 30px 24px 0;
  font-size:13px;
  line-height:1.85;
  color:var(--muted);
}
.final-cta {
  position:relative;
  overflow:hidden;
  text-align:center;
  border:1px solid var(--line);
  border-radius:20px;
  padding:58px 25px 48px;
  background:repeating-linear-gradient(-45deg,transparent 0 17px,#ffffff01 17px 18px),var(--panel);
}
.final-cta h2 {
  font-size:clamp(25px,3.2vw,39px);
  margin-bottom:27px;
}
.final-cta .eyebrow {
  margin-bottom:16px;
}
.final-cta>p:last-child {
  margin-top:22px;
  color:var(--muted);
  font-size:12px;
}
.final-spark {
  position:absolute;
  left:12%;
  top:37%;
  color:var(--gold);
  font-size:32px;
  transform:rotate(-13deg);
}
.about-copy {
  padding-block:37px 55px;
}
.about-copy p {
  max-width:900px;
  margin-inline:auto;
  color:var(--muted);
  font-size:11px;
  text-align:center;
  line-height:1.9;
}
.about-copy strong {
  font-weight:500;
}
.site-footer {
  border-top:1px solid var(--line);
  padding-block:36px 25px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.site-footer .brand {
  font-size:13px;
}
.site-footer .brand>span>span {
  font-size:16px;
}
.site-footer>div>p {
  color:var(--muted);
  font-size:10px;
  max-width:365px;
  margin-top:16px;
}
.site-footer nav {
  display:flex;
  gap:25px;
  font-size:11px;
  color:var(--muted);
}
.site-footer nav a {
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
}
.footer-bottom {
  width:100%;
  padding-top:22px;
  margin-top:7px;
  border-top:1px solid #252b42;
  text-align:center;
  font-size:9px;
  letter-spacing:.2px;
  color:var(--muted);
}
.footer-bottom span {
  padding-inline:8px;
  color:var(--gold);
}
@keyframes unit-walk {
  0%,100% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-11px);
  }
}
@keyframes card-bob {
  0%,100% {
    transform:translateY(0) rotate(var(--card-angle));
  }
  50% {
    transform:translateY(-8px) rotate(var(--card-angle));
  }
}
@media(min-width:1400px) {
  .hero {
    min-height:720px;
    gap:50px;
  }
  .hero-art {
    margin-right:10px;
  }
}
@media(max-width:1050px) {
  .wrap {
    width:calc(100% - 48px);
  }
  .hero {
    grid-template-columns:1.05fr 1fr;
    gap:5px;
    min-height:620px;
    padding-block:36px 45px;
  }
  .hero-art {
    transform:scale(.87);
    transform-origin:center right;
    margin-left:-35px;
  }
  .hero h1 {
    font-size:40px;
  }
  .hero-description {
    font-size:15px;
  }
  .game-strip span {
    display:block;
    font-size:8px;
  }
  .game-strip b {
    display:block;
    margin-bottom:5px;
  }
  .steps>li {
    padding:23px;
  }
  .arena-preview-copy {
    align-items:flex-start;
    flex-direction:column;
    gap:13px;
  }
  .install-section {
    gap:40px;
  }
  .faq-section {
    gap:40px;
  }
  .site-footer nav {
    gap:18px;
  }
}
@media(max-width:760px) {
  .wrap {
    width:calc(100% - 40px);
  }
  .site-header {
    height:84px;
  }
  .brand {
    font-size:14px;
    gap:7px;
  }
  .brand>span>span {
    font-size:17px;
  }
  .brand img {
    width:37px;
    height:37px;
  }
  .brand-star {
    font-size:12px;
  }
  .site-header nav {
    display:none;
  }
  .button-small {
    font-size:11px;
    padding:10px 16px;
  }
  .hero {
    grid-template-columns:1fr;
    gap:0;
    padding-block:37px 25px;
    min-height:auto;
  }
  .hero-copy {
    max-width:580px;
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:1.4px;
    margin-bottom:17px;
  }
  .hero h1 {
    font-size:clamp(33px,7.9vw,48px);
    letter-spacing:-.7px;
    max-width:550px;
  }
  .hero-description {
    font-size:14px;
    line-height:1.75;
    margin-block:20px 24px;
    max-width:440px;
  }
  .button-primary {
    min-height:57px;
    font-size:15px;
    padding:16px 24px;
  }
  .hero-actions {
    gap:14px;
  }
  .watch-link {
    font-size:12px;
  }
  .hero-note {
    font-size:10px;
    gap:6px;
    margin-top:20px;
  }
  .hero-art {
    transform:none;
    width:min(440px,100%);
    height:466px;
    margin:24px auto 0;
  }
  .arena-board {
    width:211px;
    left:27%;
    top:20px;
    border-radius:17px;
    padding:6px;
  }
  .arena-hud {
    font-size:17px;
    padding:6px 9px 8px;
  }
  .hud-side {
    padding:4px 9px;
    font-size:9px;
  }
  .arena-votos {
    gap:3px;
    padding-top:8px;
  }
  .arena-votos i {
    width:11px;
    height:12px;
  }
  .arena-votos span {
    font-size:8px;
    margin-right:3px;
  }
  .arena-votos b {
    font-size:14px;
  }
  .floating-card {
    width:98px;
    padding:4px;
    border-radius:8px;
  }
  .floating-card>span {
    font-size:11px;
    padding-top:5px;
  }
  .floating-card>b {
    width:28px;
    height:32px;
    font-size:15px;
    left:-10px;
    top:-13px;
  }
  .floating-pt {
    top:72px;
    left:8px;
  }
  .floating-pl {
    top:232px;
    right:4px;
  }
  .arena-sticker {
    font-size:10px;
    bottom:56px;
    left:15px;
    padding:10px 13px;
  }
  .art-orbit {
    width:330px;
    height:330px;
    left:6px;
    top:78px;
  }
  .orbit-two {
    width:270px;
    height:270px;
    left:42px;
    top:109px;
  }
  .spark-one {
    right:2px;
    top:11px;
    font-size:20px;
  }
  .spark-two {
    left:0;
    bottom:30px;
    font-size:15px;
  }
  .demo-label {
    bottom:5px;
    right:10px;
    font-size:7px;
  }
  .game-strip>.wrap {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px 14px;
    padding-block:22px;
  }
  .game-strip span {
    display:block;
    font-size:9px;
  }
  .game-strip b {
    display:block;
    font-size:15px;
    margin-bottom:5px;
  }
  .section {
    padding-block:58px;
  }
  h2 {
    font-size:26px;
    line-height:1.4;
  }
  .section-intro {
    margin-bottom:28px;
  }
  .section-intro>p:last-child {
    font-size:13px;
    line-height:1.8;
  }
  .section-intro .eyebrow {
    margin-bottom:11px;
  }
  .steps {
    grid-template-columns:1fr;
    gap:18px;
  }
  .steps>li {
    padding:25px;
    display:grid;
    grid-template-columns:90px 1fr;
    column-gap:23px;
    align-items:center;
  }
  .step-number {
    top:18px;
    right:18px;
    font-size:18px;
    color:#9ba5c4;
  }
  .step-art {
    grid-column:1;
    grid-row:1/3;
    margin:0;
    height:91px;
    gap:5px;
  }
  .steps h3 {
    font-size:16px;
    margin:8px 15px 9px 0;
    line-height:1.5;
    grid-column:2;
  }
  .steps p {
    font-size:12px;
    grid-column:2;
  }
  .choose-art>span {
    width:35px;
    height:43px;
    font-size:14px;
    border-radius:7px;
  }
  .choose-art>b {
    font-size:12px;
  }
  .deck-art {
    padding-left:4px;
  }
  .deck-art img {
    width:38px;
    height:48px;
    border-width:2px;
    margin-right:-13px;
    border-radius:4px;
  }
  .timer-art {
    font-size:28px;
    padding-top:16px;
  }
  .timer-art>span {
    font-size:8px;
    letter-spacing:.5px;
  }
  .section-heading {
    gap:14px;
    margin-bottom:23px;
  }
  .roster-section h2 {
    font-size:23px;
  }
  .roster-section .eyebrow {
    max-width:260px;
    font-size:8px;
  }
  .carousel-controls {
    gap:6px;
    align-self:flex-end;
  }
  .carousel-controls button {
    width:44px;
    height:44px;
    font-size:19px;
    border-radius:8px;
  }
  .character-card {
    flex-basis:198px;
  }
  .roster {
    gap:16px;
    padding-bottom:21px;
  }
  .portrait-wrap {
    height:195px;
  }
  .portrait-wrap>img {
    width:152px;
    height:190px;
  }
  .character-copy {
    padding:16px;
  }
  .character-copy h3 {
    font-size:16px;
    min-height:43px;
  }
  .character-copy>p:last-child {
    font-size:12px;
  }
  .roster-note {
    font-size:11px;
    margin-top:18px;
  }
  .roster-hint {
    font-size:11px;
  }
  .live-section .section-heading {
    display:block;
  }
  .live-section .section-heading>p {
    margin-top:12px;
    font-size:12px;
  }
  .live-list {
    grid-template-columns:1fr;
  }
  .live-players {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:start;
    gap:10px;
  }
  .live-players>span:not(.versus) {
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
    font-size:12px;
  }
  .live-players .versus {
    margin:4px 8px;
  }
  .live-meta {
    font-size:11px;
    margin-top:18px;
  }
  .arenas-grid {
    grid-template-columns:1fr;
    gap:22px;
  }
  .arena-preview-image {
    height:210px;
  }
  .arena-preview-copy {
    padding:21px;
    flex-direction:row;
    align-items:center;
    gap:15px;
  }
  .arena-preview h3 {
    font-size:15px;
  }
  .arena-preview p {
    font-size:12px;
  }
  .arena-unlock {
    font-size:10px;
    padding:7px;
  }
  .install-section {
    grid-template-columns:1fr;
    gap:22px;
    padding-block:5px 55px;
  }
  .install-visual {
    height:310px;
    max-width:340px;
    width:100%;
    margin-inline:auto;
  }
  .phone {
    width:156px;
    height:280px;
    border-radius:27px;
    padding-top:45px;
  }
  .phone img {
    width:74px;
    height:74px;
  }
  .phone>span {
    font-size:14px;
    margin-top:12px;
  }
  .phone>b {
    font-size:9px;
    margin-top:19px;
  }
  .install-label {
    right:0;
    bottom:45px;
    font-size:9px;
  }
  .install-spark {
    right:35px;
    top:0;
    font-size:27px;
  }
  .install-description {
    font-size:13px;
    margin-top:17px;
  }
  .install-instructions {
    gap:24px;
    margin-block:24px 17px;
  }
  .install-instructions h3 {
    font-size:13px;
  }
  .install-instructions p {
    font-size:11px;
  }
  .install-small {
    font-size:9px;
  }
  .faq-section {
    grid-template-columns:1fr;
    gap:28px;
  }
  .faq-section h2 br {
    display:none;
  }
  .faq-section>div>p:last-child {
    font-size:13px;
    margin-top:14px;
  }
  .faq-section>div>p br {
    display:none;
  }
  .faq-list summary {
    font-size:14px;
    padding-block:20px;
  }
  .faq-list details>p {
    font-size:12px;
    padding-right:14px;
  }
  .final-cta {
    padding:38px 17px 34px;
    border-radius:16px;
  }
  .final-cta h2 {
    font-size:24px;
    margin-bottom:24px;
  }
  .final-spark {
    left:12px;
    top:30px;
    font-size:18px;
  }
  .final-cta .eyebrow {
    font-size:8px;
  }
  .final-cta>p:last-child {
    font-size:10px;
  }
  .about-copy {
    padding-block:26px 35px;
  }
  .about-copy p {
    font-size:12px;
    text-align:left;
  }
  .site-footer {
    padding-top:28px;
    gap:22px;
    align-items:flex-start;
  }
  .site-footer>div>p {
    font-size:10px;
    max-width:300px;
  }
  .site-footer nav {
    width:100%;
    display:flex;
    justify-content:space-between;
    gap:9px;
    font-size:11px;
  }
  .site-footer nav a {
    gap:5px;
  }
  .footer-bottom {
    font-size:8px;
    margin-top:0;
    padding-top:19px;
  }
}
@media(max-width:370px) {
  .wrap {
    width:calc(100% - 32px);
  }
  .hero h1 {
    font-size:31px;
  }
  .hero-note {
    font-size:10px;
  }
  .hero-art {
    height:430px;
    transform:scale(.92);
    transform-origin:top center;
    margin-bottom:-30px;
  }
  .arena-board {
    left:24%;
  }
  .floating-card {
    width:88px;
  }
  .floating-pl {
    right:-3px;
  }
  .game-strip span {
    gap:6px;
    font-size:9px;
  }
  .game-strip b {
    font-size:14px;
  }
  .steps>li {
    grid-template-columns:73px 1fr;
    column-gap:17px;
    padding:20px;
  }
  .choose-art>span {
    width:30px;
  }
  .steps h3 {
    font-size:15px;
  }
  .timer-art {
    font-size:25px;
  }
  .arena-preview-copy {
    flex-direction:column;
    align-items:flex-start;
  }
  .site-footer nav {
    flex-direction:column;
    gap:0;
  }
  .roster-section h2 {
    font-size:21px;
  }
}
@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
  .roster {
    scroll-behavior:auto;
  }
}

.weekly-list { padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.weekly-list li { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid #343B58; border-radius: 10px; background: #1B2033; }
.weekly-list li:first-child { border-color: #B38B3F; background: #363124; }
.weekly-position { color: #A7ADC4; width: 28px; font: 14px 'Bungee', sans-serif; flex-shrink: 0; }
.weekly-list li:first-child .weekly-position { color: #FFC83D; }
.weekly-player { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.weekly-player strong { font-size: 14px; overflow-wrap: anywhere; }
.weekly-player small { color: #CCC3AD; font-size: 11px; }
.weekly-player a { color: #BFCFF5; font-size: 11px; overflow-wrap: anywhere; }
.weekly-score { color: #FFC83D; font-size: 16px; }
.weekly-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 20px; }
.weekly-footer p { color: #A7ADC4; font-size: 11px; line-height: 1.8; }
@media (max-width: 640px) { .weekly-list { grid-template-columns: 1fr; }.weekly-list li { padding: 13px 10px; gap: 9px; }.weekly-player strong { font-size: 13px; }.weekly-footer { align-items: flex-start; flex-direction: column; } }
@media (max-width: 640px) {
  .weekly-section .section-heading { display: block; }
  .weekly-section .section-heading h2 { font-size: 28px; }
  .weekly-section .section-heading > p { font-size: 13px; margin-top: 14px; }
}

.placar-board { padding: 30px; border: 1px solid var(--line, #343B58); border-radius: 18px; background: #1B2033; box-shadow: 0 6px 0 #090C16; }
.placar-totals { display: grid; grid-template-columns: 1fr 30px 1fr; align-items: center; gap: 14px; }
.placar-totals > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }.placar-totals > div:last-child { justify-content: flex-end; text-align: right; }
.placar-totals strong { font: clamp(30px, 6vw, 64px)/1.2 'Bungee', sans-serif; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }.placar-totals small { flex-basis: 100%; font-size: 12px; color: #A7ADC4; }.placar-totals > span { color: #A7ADC4; text-align: center; font-size: 26px; }
.placar-bar { position: relative; display: flex; height: 24px; margin: 22px 0; border-radius: 7px; overflow: hidden; background: #2F6BFF; box-shadow: inset 0 -5px 0 #0003; }.placar-bar > span { display: block; width: 50%; height: 100%; flex-shrink: 0; background: #E0323C; box-shadow: inset 0 -5px 0 #0003; transition: width .65s ease-out; }.placar-bar > i { position: absolute; left: 50%; top: 0; height: 100%; border-left: 2px solid #F4F1E880; }
.placar-activity { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; color: #D0D4E4; font-size: 12px; line-height: 1.6; }.placar-activity p:last-child { text-align: right; }
.placar-note { margin-top: 12px; color: #A7ADC4; font-size: 11px; line-height: 1.6; }.placar-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #343B58; }.placar-footer p { color: #D0D4E4; font-size: 12px; line-height: 1.6; }
@media (max-width: 600px) { .placar-section .section-heading { display: block; }.placar-section .section-heading h2 { font-size: 28px; }.placar-section .section-heading > p { margin-top: 14px; font-size: 13px; color: #A7ADC4; line-height: 1.6; }.placar-board { padding: 20px; }.placar-totals { gap: 8px; grid-template-columns: 1fr 14px 1fr; }.placar-totals > div { gap: 8px; }.placar-totals strong { font-size: 30px; }.placar-totals small { font-size: 10px; }.placar-activity { gap: 16px; font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .placar-bar > span { transition: none; } }