/* Snakeling site: one stylesheet for every page. Dark only. .ar holds the Arena parts (hero, cards, news,
   footer, inner pages), .rl the Home parts (header, platforms line, league card); each has its palette first. */
html, body { margin: 0; background: #0b1620; overflow-x: hidden; color-scheme: dark }
[hidden] { display: none !important }
.ar { --ink: #eef4f8; --deep: #050d15; --text: #b3c1cc; --muted: #7d8c98; --paper: #0b1620; --card: #142330; --mist: #102231; --cyan: #3ccfe2; --cyan-deep: #12a9bf; --orange: #ff5a17; --shadow: 0 18px 40px -18px rgba(0,0,0,.7); --f-display: ui-sans-serif, system-ui, sans-serif; --f-body: ui-sans-serif, system-ui, sans-serif; color-scheme: dark; background: var(--paper); color: var(--text); font-family: var(--f-body); font-size: 15px; line-height: 1.6; --tear: clamp(46px, 7vw, 96px) }
.ar * { box-sizing: border-box }
.ar h1, .ar h2, .ar h3 { font-family: var(--f-display); color: var(--ink); margin: 0; text-wrap: balance; line-height: 1.15 }
.ar p { margin: 0 }
.ar a { color: inherit }
.ar .wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.ar .btn { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1 var(--f-display); text-decoration: none; padding: 14px 22px; border-radius: 6px; border: 0; cursor: pointer; transition: transform .15s, background .15s }
.ar .btn:hover { transform: translateY(-2px) }
.ar .btn:focus-visible, .ar a:focus-visible, .ar button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px }
.ar .btn-orange { background: #d04913; color: #fff }
.ar .btn-orange:hover { background: #b93d0b }
.ar .bar { display: block; width: 48px; height: 4px; border-radius: 2px; background: var(--cyan) }
.ar .sec-head { text-align: center; display: grid; justify-items: center; gap: 14px }
.ar .sec-head h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 600 }
.ar .sec-head .bar { width: 46px }
.ar .kicker { text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; color: var(--ink); font-weight: 500 }
.ar .tear { display: block; width: 100%; height: clamp(46px, 7vw, 96px); position: absolute; left: 0; bottom: -1px; pointer-events: none }
.ar .nav { background: var(--paper); position: relative; z-index: 3; box-shadow: 0 1px 0 rgba(255,255,255,.07) }
.ar .nav .wrap { display: flex; align-items: center; gap: 28px; padding-block: 12px }
.ar .logo { display: inline-flex; align-items: center; gap: 4px; text-decoration: none }
.ar .nav ul { display: flex; gap: 30px; list-style: none; margin: 0 0 0 auto; padding: 0 }
.ar .nav ul a { text-decoration: none; color: var(--ink); font-weight: 500; font-size: 15px }
.ar .nav ul a:hover { color: var(--cyan) }
.ar .nav .btn { padding: 13px 34px }
.ar .hero { position: relative; background: #08131c var(--hero) center / cover no-repeat; color: #fff; overflow: visible }
.ar .hero h1 { color: #fff; font-size: clamp(32px, 4.6vw, 54px); font-weight: 600; line-height: 1.12 }
.ar .hero h1.grow { font-size: clamp(22px, 3.2vw, 37px); font-weight: 600; line-height: 1.12 }
.ar .hero h1.grow .l2 { font-size: 1.25em }
.ar .hero h1.grow .crown { font-size: 2em; font-weight: 800; color: #ffc23d; line-height: 1.05 }
.ar .split { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--card); border-radius: 26px; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.06); overflow: hidden }
.ar .split-art::after { content: ""; position: absolute; inset: 0; background: rgba(8,20,30,.35) }
.ar .split-copy { padding: clamp(28px, 4vw, 48px); display: grid; gap: 14px; align-content: center; min-width: 0 }
.ar .eyebrow { color: var(--orange); text-transform: uppercase; font: 600 13px/1.2 var(--f-display); letter-spacing: .02em }
.ar .split-copy h3 { font-size: clamp(20px, 2vw, 24px); font-weight: 700 }
.ar .checks { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 12px }
.ar .checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: var(--ink); font-weight: 600; font-size: 14.5px; line-height: 1.45 }
.ar .checks svg { width: 22px; height: 22px; margin-top: 1px }
.ar .split-copy .btn { justify-self: start }
.ar .tiers { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px }
.ar .tiers i { font-style: normal; font-size: 11.5px; font-weight: 600; color: #fff; padding: 3px 9px; border-radius: 99px; box-shadow: inset 0 0 0 2px var(--rim) }
.ar .news h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 600 }
.ar .story { display: grid; grid-template-columns: 42% 1fr; background: var(--card); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.06); margin-bottom: 30px }
.ar .story .pic { position: relative; background: #0b1b2b center / cover; min-height: 190px }
.ar .story .date { position: absolute; right: 0; bottom: 0; background: var(--deep); color: #fff; font: 600 12.5px/1 var(--f-display); padding: 12px 14px; text-transform: uppercase }
.ar .story .txt { padding: 24px 26px; display: grid; gap: 10px; align-content: center; min-width: 0 }
.ar .story h3 { font-size: 17px; font-weight: 700; line-height: 1.3 }
.ar .story .bar { width: 34px; height: 3px }
.ar .story p { font-size: 14.5px }
.ar .more { color: var(--orange); font: 600 13.5px/1 var(--f-display); text-transform: uppercase; text-decoration: none; display: inline-flex; gap: 10px; align-items: center }
.ar .more svg { width: 20px; transition: transform .2s }
.ar .more:hover svg { transform: translateX(4px) }
.ar footer { background: var(--mist); position: relative }
.ar .contact li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start }
.ar .socials { display: flex; gap: 12px }
.ar .socials a { width: 34px; height: 34px; border-radius: 50%; background: #1c3142; display: grid; place-items: center }
.ar .socials a:hover { background: var(--cyan-deep) }
.ar .socials svg { width: 16px; height: 16px; fill: #fff }
@media (max-width: 980px) {
  .ar .nav ul { display: none }
  .ar .nav .btn { padding: 12px 20px }
  .ar .split { grid-template-columns: 1fr }
  .ar .news .wrap { grid-template-columns: 1fr }
}
@media (max-width: 640px) {
  .ar .hero .wrap { justify-content: flex-start }
  .ar .hero::before { background: linear-gradient(180deg, rgba(4,14,22,.55), rgba(4,14,22,.8)) }
  .ar .story { grid-template-columns: 1fr }
  .ar .story .pic { min-height: 170px }
}
@media (prefers-reduced-motion: reduce) {
  .ar *, .ar *::before, .ar *::after { animation: none !important; transition: none !important }
}
.rl { color-scheme: dark; margin: 0; background: var(--cream); color: var(--ink); font: 400 16px/1.6 var(--font); letter-spacing: -0.018em; font-feature-settings: "ss01"; --cream: #0b1620; --snow: #142330; --harbor: #1a2d3c; --pop: #ff5a17; --popshadow: #9c3208; --mist: #3ccfe2; --tint: #173a48; --wash: #102231; --head: #eef4f8; --washtext: #b3c1cc; --ink: #b3c1cc; --slate: #7d8c98; --fog: #1f3343; --font: ui-sans-serif, system-ui, sans-serif }
.rl * { box-sizing: border-box }
.rl h1, .rl h2, .rl h3, .rl h4 { margin: 0; color: var(--head); font-weight: 700; text-wrap: balance; letter-spacing: -0.018em }
.rl p { margin: 0 }
.rl a { color: inherit; text-decoration: none }
.rl a:focus-visible, .rl button:focus-visible, .rl summary:focus-visible { outline: 3px solid var(--pop); outline-offset: 3px }
.rl img { display: block }
.rl .inner { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.rl .center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px }
.rl .btn-pop { background: #d04913; color: #fff; box-shadow: var(--popshadow) 0 7px 0 0; transition: transform .12s, box-shadow .12s }
.rl .btn-sm { padding: 12px 24px; font-size: 15px; box-shadow: var(--popshadow) 0 5px 0 0 }
.rl .nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px }
.rl .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; color: var(--head); letter-spacing: -0.5px }
.rl .logo svg { width: 34px; height: 34px }
.rl .navlinks { display: flex; gap: 28px; font-weight: 600; font-size: 16px; color: var(--slate) }
.rl .navlinks a:hover { color: var(--head) }
@media (max-width: 760px) {
  .rl .navlinks { display: none }
}
.rl .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60px 34px at 9% 18%, rgba(255,255,255,.05) 98%, transparent 100%),
    radial-gradient(44px 28px at 13% 22%, rgba(255,255,255,.05) 98%, transparent 100%),
    radial-gradient(70px 36px at 88% 14%, rgba(255,255,255,.05) 98%, transparent 100%),
    radial-gradient(46px 28px at 83% 19%, rgba(255,255,255,.05) 98%, transparent 100%),
    radial-gradient(56px 30px at 94% 46%, rgba(255,255,255,.05) 98%, transparent 100%),
    radial-gradient(50px 26px at 5% 54%, rgba(255,255,255,.05) 98%, transparent 100%) }
.rl .hero > * { position: relative }
.rl .hero h1 { font-size: clamp(38px, 6.4vw, 58px); line-height: 1.02; letter-spacing: -1.04px; font-weight: 800; max-width: 15ch }
.rl .hero h1 span { color: var(--pop) }
.rl .screen { background: var(--snow); border-radius: 30px 30px 0 0; padding: 14px 14px 0; box-shadow: rgba(0,0,0,.3) 0 3px 0 0; margin: 0 auto; max-width: 640px }
.rl .bar { width: 160px; max-width: 100%; height: 12px; border-radius: 12px; background: rgba(255,255,255,.15); overflow: hidden }
.rl .bar i { display: block; height: 100%; width: 72%; background: var(--pop); border-radius: 12px }
.rl .platforms small { display: block; width: 100%; text-align: center; font: 500 14px var(--font); color: var(--slate); opacity: 1 }
.rl .ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 40px; width: 100% }
@media (max-width: 900px) {
  .rl .ladder { grid-template-columns: repeat(2, 1fr) }
}
.rl .track { display: flex; gap: 18px; width: max-content }
@media (prefers-reduced-motion: no-preference) {
  .rl .track { animation: rl-slide 46s linear infinite }
}
@keyframes rl-slide { to { transform: translateX(calc(-50% - 9px)); } }
.rl .split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center }
@media (max-width: 900px) {
  .rl .split { grid-template-columns: 1fr }
}
.rl .split .copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start }
.rl .split h2 { font-size: clamp(30px, 4vw, 40px); line-height: 1.2; letter-spacing: -0.72px }
.rl .split .copy p { font-size: 17px; color: var(--slate); max-width: 44ch }
.rl .ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
.rl .ticks li { display: flex; gap: 12px; align-items: center; font-weight: 500; color: var(--ink) }
.rl .ticks li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%232e96ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat }
.rl .board { background: var(--snow); border-radius: 30px; padding: 24px; display: flex; flex-direction: column; gap: 4px }
.rl .event { background: var(--harbor); border-radius: 30px; color: #fff; display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; padding: 40px; align-items: center; position: relative; overflow: hidden }
@media (max-width: 900px) {
  .rl .event { grid-template-columns: 1fr; padding: 28px }
}
.rl .event h2 { color: #fff; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; letter-spacing: -0.72px }
.rl .event p { color: var(--washtext); font-size: 16px; max-width: 46ch }
.rl .event .copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start }
.rl .count { display: flex; gap: 12px; flex-wrap: wrap }
.rl .count div { background: rgba(255,255,255,.08); border-radius: 22px; padding: 16px 18px; min-width: 88px; text-align: center }
.rl .count b { display: block; font: 800 40px/1 var(--font); color: var(--mist); font-variant-numeric: tabular-nums; letter-spacing: -1px }
.rl .count small { color: var(--washtext); font-size: 13px }
.rl .prizes { display: flex; gap: 12px; margin-top: 18px; align-items: flex-end }
.rl .prizes img { width: 96px }
.rl .faq { width: 100%; max-width: 760px; margin-top: 32px; text-align: left }
.rl .faq details { border-bottom: 1px solid var(--fog); padding-block: 20px }
.rl .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; font: 600 19px/1.4 var(--font); color: var(--head); letter-spacing: -0.34px }
.rl .faq summary::-webkit-details-marker { display: none }
.rl .faq summary::after { content: "+"; font-weight: 500; font-size: 26px; line-height: 1; color: var(--pop); flex: none; transition: transform .2s }
.rl .faq details[open] summary::after { transform: rotate(45deg) }
.rl .faq details p { margin-top: 12px; color: var(--ink); max-width: 62ch }
.rl footer { padding-block: 40px 56px }
.rl .logo svg path { fill: currentColor }
.ar .logo, .rl .logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; font: 700 24px/32px ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: normal }
.ar .logo svg, .rl .logo svg { width: auto; height: 32px; fill: #fff; flex: none }
.ar .hero .wrap { position: relative; display: flex; padding-block: clamp(70px, 11vw, 150px) clamp(120px, 15vw, 200px); justify-content: center; text-align: center }
.ar .hero-copy { display: grid; gap: 22px; max-width: 640px; justify-items: center }
.ar .hero p { color: #d7e3ea; font-size: 16.5px; max-width: 44ch; margin-inline: auto }
.ar .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center }
.ar .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(4,14,22,.78) 20%, rgba(4,14,22,.5) 75%, rgba(4,14,22,.35)) }
.ar .news .wrap { display: grid; gap: 40px; align-items: start; grid-template-columns: 1fr }
.ar .split-art { position: relative; background: #0b1b2b var(--shot2) center / cover; min-height: 0 }
.ar .shields { position: relative; height: 100%; box-sizing: border-box; padding: 22px 16px 18px; z-index: 1; display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1.4vw, 14px) }
.ar .sh { height: auto; flex: none; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)) }
.ar .sh text { font: 800 7.4px ui-sans-serif, system-ui, sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.25); stroke-width: .5px }
.ar .sh.s0 { width: clamp(78px, 11vw, 112px) }
.ar .sh.s1 { width: clamp(56px, 7.6vw, 78px) }
.ar .sh.s2 { width: clamp(42px, 5.6vw, 58px) }
.rl .platforms span { display: flex; align-items: center; opacity: 1; font: 600 15.5px/1 var(--font); letter-spacing: 0; gap: 8px }
.rl .platforms svg { color: #ff5a17; width: 20px; height: 20px }
.rl .platforms .po { font: 600 12px/1 var(--font); text-transform: uppercase; letter-spacing: .1em; color: #7d8c98 }
.rl .tear { display: block; width: 100%; height: clamp(46px, 7vw, 96px); position: absolute; left: 0; pointer-events: none }
.rl .btn-pop, .rl .btn-sm { box-shadow: none; transition: transform .15s, background .15s }
.rl .btn-pop:hover { transform: translateY(-2px); box-shadow: none; background: #b93d0b }
.rl .btn-pop:active { transform: none; box-shadow: none }
.rl #skins { padding-bottom: calc(clamp(46px, 7vw, 96px) + 8px) }
.rl #compete { padding-top: 44px }
.rl #event { padding-block: 32px 40px }
.ar .news { padding-block: 70px 120px; position: relative; padding-top: 40px }
.ar .wo-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: clamp(18px, 3vw, 36px); align-items: center; border-radius: 22px; padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 34px); background: radial-gradient(circle at 85% 20%, rgba(255,90,23,.16), transparent 55%), var(--card); box-shadow: var(--shadow), 0 0 0 2px rgba(255,90,23,.55) }
.ar .wo-copy { display: grid; gap: 8px; justify-items: start }
.ar .wo-pill { background: var(--orange); color: #fff; border-radius: 99px; padding: 6px 12px; font: 600 12px/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em }
@media (max-width: 1000px) {
  .ar .wo-strip { grid-template-columns: 1fr auto }
}
@media (max-width: 640px) {
  .ar .wo-strip { grid-template-columns: 1fr; justify-items: start }
}
.ar .split.rev { margin-top: 22px }
.ar .lg-art { display: grid; align-content: center; justify-items: center; gap: 24px; padding: 28px 24px; background: #0b1b2b }
.ar .lg-art::after { display: none }
.ar .lg-steps { display: flex; align-items: flex-end; gap: clamp(8px, 1.6vw, 18px) }
.ar .lg-steps span { display: grid; justify-items: center; gap: 6px }
.ar .lg-steps .sw { height: auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)) }
.ar .lg-steps b { font: 700 12px ui-sans-serif, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em }
.ar .lg-group { display: grid; grid-template-columns: repeat(15, 1fr); gap: 5px; width: min(100%, 400px) }
.ar .lg-group i { aspect-ratio: 1; border-radius: 4px; background: #2a3f50 }
.ar .lg-group i.up { background: #22a06b }
.ar .lg-group i.down { background: #c2413a }
.ar .lg-key { display: flex; gap: 18px; font-size: 13px; color: var(--muted) }
.ar .lg-key span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px }
.ar .lg-key .up::before { background: #22a06b }
.ar .lg-key .down::before { background: #c2413a }
@media (max-width: 980px) {
  .ar .split.rev { grid-template-columns: 1fr }
  .ar .split.rev .lg-art { order: -1 }
}
.ar .stack { padding-block: 30px 90px; padding-top: 40px; padding-bottom: clamp(90px, 9vw, 130px) }
a.wo-strip { text-decoration: none; color: inherit; margin-bottom: 44px; grid-template-columns: minmax(0, 1fr) auto auto; transition: transform .2s, box-shadow .2s }
a.wo-strip:hover { transform: translateY(-3px); box-shadow: var(--shadow), 0 0 0 2px var(--orange) }
.ar .wo-copy h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; color: var(--ink) }
.ar .wo-copy p { margin: 0; color: var(--text) }
@media (max-width: 1000px) {
  a.wo-strip { grid-template-columns: 1fr auto }
}
@media (max-width: 640px) {
  a.wo-strip { grid-template-columns: 1fr }
}
.ar .f-main { display: flex; justify-content: center; padding-block: 56px 18px }
.ar .f-legal { padding: 0 0 26px; font-size: 13px; color: var(--muted); text-align: center }
.ar .f-legal a { color: var(--muted); text-decoration: none }
.ar .f-legal a:hover { color: var(--ink) }
.rl .platforms .srv-line { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 22px }
.rl .platforms .srv-line .sv { font: 600 14px/1 var(--font); color: #c9d4dc; gap: 7px }
.rl .platforms .srv-line i { width: 8px; height: 8px; border-radius: 50%; background: #41e58a; box-shadow: 0 0 0 3px rgba(65,229,138,.2) }
.rl .platforms .srv-line .off { opacity: .6 }
.rl .platforms .srv-line .off i { background: #c2413a; box-shadow: 0 0 0 3px rgba(194,65,58,.2) }
.ar .hero-plats { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 22px; margin-top: 22px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6) }
.ar .hero-plats span { display: flex; align-items: center; gap: 7px; font: 600 15px/1 var(--f-display) }
.ar .hero-plats svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)) }
.ar .hero-plats .po { font: 600 11.5px/1 var(--f-display); text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.75) }
.ar .hero-plats .soon { opacity: .7 }
.ar .hero-plats .soon small { font: 500 12.5px/1 var(--f-display); color: rgba(255,255,255,.8) }
.rl .platforms { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; color: #7d8c98; gap: 14px clamp(20px, 4vw, 40px); max-width: 760px; margin-inline: auto; padding-block: 26px 4px; border-bottom: 0 }
.ar .wo-pill.ended { background: #2a3b4a; color: #c9d4dc }
.ar .end-cta { text-align: center; margin-top: clamp(56px, 7vw, 88px); display: grid; justify-items: center; gap: 10px }
.ar .end-cta h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; color: var(--ink) }
.ar .end-cta p { color: var(--muted); margin: 0 0 8px }
.rl .platforms .alpha { flex-basis: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; text-align: center }
.rl .platforms .alpha b { background: #edae1d; color: #1a1406; border-radius: 99px; padding: 5px 10px; font: 700 11px/1 var(--font); text-transform: uppercase; letter-spacing: .08em }
.rl .platforms .alpha span { font: 500 14px/1.4 var(--font); color: #c9d4dc; opacity: 1 }
@media (max-width: 760px) {
  .rl .nav { flex-wrap: wrap; row-gap: 12px; padding-block: 14px 10px }
  .rl .navlinks { display: flex; order: 3; flex-basis: 100%; justify-content: space-between; gap: 12px; font-size: 14.5px; border-top: 1px solid #1f3343; padding-top: 10px }
}
.rl .btn { display: inline-flex; align-items: center; gap: 10px; font: 700 16px/1 var(--font); letter-spacing: -0.29px; padding: 16px 28px; border: 0; cursor: pointer; white-space: nowrap; border-radius: 6px }
.rl .hero { background: var(--wash); position: relative; overflow: hidden; padding: 56px 24px 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; border-radius: 26px }
/* screenshots */
.ar .gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.ar .gal-i { position: relative; padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: zoom-in; background: #0b1b2b; aspect-ratio: 16 / 9; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.06); font: inherit; text-align: left }
.ar .gal-i img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s }
.ar .gal-i:hover img { transform: scale(1.04) }
.ar .gal-i span { position: absolute; inset: auto 0 0; padding: 34px 16px 12px; background: linear-gradient(transparent, rgba(4,14,22,.92) 45%); color: var(--text); font-size: 13px; line-height: 1.4; display: grid; gap: 2px }
.ar .gal-i span b { color: #fff; font: 700 15px var(--f-display) }
.ar .gal-i:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px }
.ar .lb { border: 0; padding: 0; background: none; width: min(1200px, 94vw); max-width: none; overflow: visible }
.ar .lb::backdrop { background: rgba(4,10,16,.9) }
.ar .lb img { display: block; width: 100%; border-radius: 12px }
.ar .lb p { color: var(--text); margin-top: 12px; display: grid; gap: 2px; font-size: 15px }
.ar .lb p b { color: #fff; font: 700 18px var(--f-display) }
.ar .lb button { position: absolute; border: 0; background: rgba(11,22,32,.8); color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 28px; line-height: 1; cursor: pointer }
.ar .lb button:hover { background: var(--orange) }
.ar .lb-x { top: -54px; right: 0 }
.ar .lb-p, .ar .lb-n { top: 50%; translate: 0 -50% }
.ar .lb-p { left: 10px }
.ar .lb-n { right: 10px }
.ar #shots .sec-head, .ar #videos .sec-head { margin-bottom: 26px }
.ar #videos { padding-top: 0 }
.ar .vids-more { display: flex; justify-content: center; margin-top: 28px }
@media (max-width: 860px) {
  .ar .gal { grid-template-columns: 1fr 1fr }
}
@media (max-width: 520px) {
  .ar .gal { grid-template-columns: 1fr }
}
/* inner pages */
.rl .navlinks a.on { color: var(--pop) }
.ar .phead { position: relative; background: #08131c var(--hero) center / cover no-repeat; color: #fff }
.ar .phead::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(4,14,22,.86) 25%, rgba(4,14,22,.62) 85%) }
.ar .phead .wrap { position: relative; text-align: center; display: grid; justify-items: center; gap: 14px; padding-block: clamp(44px, 6vw, 80px) calc(var(--tear) + 30px) }
.ar .phead h1 { color: #fff; font-size: clamp(30px, 4.2vw, 48px); font-weight: 700 }
.ar .phead p { color: #d7e3ea; max-width: 56ch; font-size: 16.5px; margin: 0 }
.ar .sec { position: relative; padding-block: 56px }
.ar .sec.alt { background: var(--mist); padding-block: 40px calc(var(--tear) + 32px) }
.ar .sec:has(+ .alt) { padding-bottom: calc(var(--tear) + 28px) }
.ar .phead + .sec { padding-top: 24px }
.ar .sec:last-child { padding-bottom: calc(var(--tear) + 40px) }
.ar .sec .sec-head { margin-bottom: 30px }
.ar .sec-head p { margin: 0; max-width: 60ch }
.ar .grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) }
.ar .card { background: var(--card); border-radius: 16px; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.06); padding: 24px; display: grid; gap: 10px; align-content: start; min-width: 0 }
.ar .card h3 { font-size: 18px; font-weight: 700 }
.ar .card p { margin: 0; font-size: 14.5px }
.ar .card .meta { font: 600 12px/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--cyan) }
.ar .card .ico { width: 44px; height: 44px; border-radius: 12px; background: #0e2a38; display: grid; place-items: center }
.ar .card .ico svg { width: 26px; height: 26px }
.ar .two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center }
.ar .two > * { min-width: 0 }
.ar .copy { display: grid; gap: 14px }
.ar .copy h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700 }
.ar .copy p { margin: 0 }
.ar .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.ar .ticks li { position: relative; padding-left: 28px }
.ar .ticks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; border-radius: 50%; background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23050d15' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat }
.ar .two.top { align-items: start }
.ar .track { list-style: none; margin: 34px 0 0; padding: 18px 12px 14px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; align-items: end; background: var(--card); border-radius: 18px; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.06) }
.ar .track li { display: grid; justify-items: center; gap: 4px; padding: 8px 2px; border-radius: 12px; text-align: center; min-width: 0 }
.ar .track li.me { background: #173a48 }
.ar .track b { color: var(--ink); font: 600 13px/1.2 var(--f-display) }
.ar .track small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums }
@media (max-width: 760px) {
  .ar .track { grid-template-columns: repeat(5, 1fr); row-gap: 10px }
}
/* standings */
.ar .st-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px }
.ar .st-tabs { display: flex; gap: 4px; background: var(--card); border-radius: 14px; padding: 5px; box-shadow: 0 0 0 1px rgba(255,255,255,.06) }
.ar .st-tabs button { font: 600 15px/1 var(--f-display); color: var(--muted); background: none; border: 0; border-radius: 10px; padding: 11px 20px; cursor: pointer }
.ar .st-tabs button:hover { color: var(--ink) }
.ar .st-tabs button[aria-selected="true"] { background: #1d3a4d; color: #fff; box-shadow: inset 0 0 0 1px rgba(60,207,226,.5) }
.ar .st-tabs button:focus-visible, .ar .st-pager button:focus-visible, .ar .st-row:focus-visible { outline: 3px solid var(--cyan); outline-offset: 1px }
.ar .st-pill { background: var(--card); border-radius: 12px; padding: 10px 16px; font-size: 14px; color: var(--muted); box-shadow: 0 0 0 1px rgba(255,255,255,.06) }
.ar .st-pill b { color: var(--ink); margin-left: 6px }
.ar .st-grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 18px; align-items: start }
.ar .st-panel { background: var(--card); border-radius: 18px; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.06); overflow: hidden; min-width: 0 }
.ar .st-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #1f3343; min-height: 60px; box-sizing: border-box }
.ar .st-head h3 { font-size: 17px; font-weight: 700 }
.ar .st-head > span { font-size: 12.5px; color: var(--muted) }
.ar .st-note { padding: 12px 18px 16px; font-size: 13px; color: var(--muted); border-top: 1px solid #1f3343 }
.ar .st-search input { width: min(220px, 40vw); box-sizing: border-box; background: #0b1620; border: 1px solid #22394a; border-radius: 10px; padding: 8px 12px; color: var(--ink); font: 14px var(--f-body) }
.ar .st-search input:focus { outline: 2px solid var(--cyan); outline-offset: 1px }
.ar .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.ar .st-table { padding: 4px 8px 8px }
.ar .st-th, .ar .st-row { display: grid; grid-template-columns: var(--cols); gap: 10px; align-items: center; padding: 0 10px }
.ar .st-th { font: 600 11.5px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-block: 12px 8px }
.ar .st-th > :nth-child(n+4), .ar .st-row > :nth-child(n+4) { text-align: right }
.ar .st-row { min-height: 46px; border-radius: 10px; text-decoration: none; color: var(--text); font-variant-numeric: tabular-nums; transition: background .12s }
.ar .st-row:hover { background: #1a2d3c }
.ar .st-row .n { color: var(--muted); font-weight: 700 }
.ar .who { display: flex; align-items: center; gap: 10px; min-width: 0 }
.ar .who svg { flex: none }
.ar .who b { color: var(--ink); font: 600 14.5px var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ar .st-row .v { color: var(--ink); font-weight: 700 }
.ar .st-row.me { background: #1d3a4d; box-shadow: inset 0 0 0 1px rgba(60,207,226,.55) }
.ar .st-leaders { margin-top: 26px }
.ar .st-lead-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 12px }
.ar .st-lead-h h3 { font-size: 18px; font-weight: 700 }
.ar .st-lead-h span { font-size: 13.5px; color: var(--muted) }
.ar .st-leads { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px }
.ar .st-lead { display: grid; justify-items: start; gap: 2px; background: var(--card); border-radius: 16px; padding: 14px 16px; text-decoration: none; box-shadow: var(--shadow), inset 0 3px 0 var(--c), 0 0 0 1px rgba(255,255,255,.06); transition: background .12s; min-width: 0 }
.ar .st-lead:hover { background: #1a2d3c }
.ar .st-lead svg { margin-bottom: 4px }
.ar .st-lead small { font: 700 12px var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--c) }
.ar .st-lead b { font: 700 22px/1.2 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums }
.ar .st-lead span { font-size: 13.5px; color: var(--cyan); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
@media (max-width: 900px) {
  .ar .st-leads { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) }
}
.ar .mv { font-size: 12.5px; font-weight: 600; color: var(--muted) }
.ar .mv.up { color: #3ddc84 }
.ar .mv.down { color: #ff6b6b }
.ar .mv.new { color: var(--cyan) }
.ar .st-empty { padding: 30px; text-align: center; color: var(--muted); margin: 0 }
.ar .st-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 18px; border-top: 1px solid #1f3343; font-size: 13px; color: var(--muted) }
.ar .st-pager { display: flex; align-items: center; gap: 10px }
.ar .st-pager button { width: 34px; height: 34px; border-radius: 9px; border: 0; background: #1a2d3c; color: var(--ink); font-size: 18px; cursor: pointer }
.ar .st-pager button:disabled { opacity: .35; cursor: default }
.ar .st-pager b { color: var(--ink); font-weight: 600; min-width: 48px; text-align: center }
.ar .st-mini { display: grid; padding: 8px }
.ar .st-mini a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; text-decoration: none }
.ar .st-mini a:hover { background: #1a2d3c }
.ar .st-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 18px; border-bottom: 1px solid #1f3343 }
.ar .st-line small { font: 600 11.5px var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap }
.ar .st-line span { display: flex; align-items: baseline; gap: 8px; min-width: 0 }
.ar .st-line b { font: 700 18px/1.2 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums }
.ar .st-line a { color: var(--cyan); text-decoration: none; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ar .st-line a:hover { text-decoration: underline }
.ar .st-big { padding: 14px 18px; border-bottom: 1px solid #1f3343; display: grid; gap: 2px }
.ar .st-big small { font: 600 11.5px var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.ar .st-big b { font: 700 26px/1.2 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums }
.ar .st-big a { color: var(--cyan); text-decoration: none; font-size: 14px }
.ar .st-big a:hover { text-decoration: underline }
.ar .st-big span { font-size: 13px; color: var(--muted) }
@media (max-width: 1080px) {
  .ar .st-grid { grid-template-columns: 1fr }
}
@media (max-width: 560px) {
  .ar .hide-s { display: none }
  .ar .st-th, .ar .st-row { grid-template-columns: var(--cols-s); gap: 8px; padding: 0 6px }
  .ar .st-th > :nth-child(n+3), .ar .st-row > :nth-child(n+3) { text-align: right }
  .ar .st-head { flex-wrap: wrap }
  .ar .st-search { flex: 1 1 100% }
  .ar .st-search input { width: 100% }
  .ar .st-tabs button { padding: 10px 14px }
}
/* player */
.ar .pl-back { margin-bottom: 18px }
.ar .pl-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 18px; align-items: start }
.ar .pl-col { display: grid; gap: 18px; min-width: 0 }
.ar .pl-box { background: var(--card); border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.06); min-width: 0 }
.ar .pl-box h3 { font-size: 17px; font-weight: 700; margin-bottom: 12px }
.ar .pl-box h3 small { font: 500 13px var(--f-body); color: var(--muted); margin-left: 6px }
.ar .pl-plate { display: grid; grid-template-columns: 1fr 64px; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.08) }
.ar .pl-card { aspect-ratio: 4 / 1.25; background: #08131c center / cover; position: relative; padding: 10px 14px }
.ar .pl-card b { color: #fff; font: 700 18px var(--f-display); text-shadow: 0 2px 4px rgba(0,0,0,.6) }
.ar .pl-card img { position: absolute; right: 12px; bottom: 8px; width: 38px }
.ar .pl-rank { background: #0b1620; display: grid; justify-items: center; align-content: center; gap: 0 }
.ar .pl-level { display: flex; align-items: center; gap: 14px }
.ar .pl-level b { display: block; color: var(--ink); font: 700 20px var(--f-display) }
.ar .pl-level span { color: var(--muted); font-size: 14px }
.ar .pl-stands { display: grid; gap: 8px }
.ar .pl-stand { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; background: #0b1620; border-radius: 12px; padding: 10px 14px; text-decoration: none; transition: background .12s }
.ar a.pl-stand:hover { background: #173a48 }
.ar .pl-stand small { font: 600 11.5px var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.ar .pl-stand b { grid-row: span 2; align-self: center; color: var(--ink); font: 700 20px var(--f-display) }
.ar .pl-stand span { font-size: 13.5px; color: var(--text) }
.ar .pl-badges { display: flex; flex-wrap: wrap; gap: 10px }
.ar .pl-badge { position: relative; width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--c) 18%, #0b1620); display: grid; place-items: center }
.ar .pl-badge svg { width: 28px; height: 28px }
.ar .pl-badge i { position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; background: #050d15; color: #fff; font: 600 12px/1 var(--f-display); font-style: normal; padding: 6px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s }
.ar .pl-badge:hover i { opacity: 1 }
.ar .pl-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
.ar .pl-tile { background: var(--card); border-radius: 16px; padding: 14px 16px; display: grid; gap: 2px; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.06); min-width: 0 }
.ar .pl-tile small { font: 600 11.5px var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.ar .pl-tile b { font: 700 clamp(22px, 2.4vw, 28px)/1.2 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums }
.ar .pl-tile b.gold { color: #f5c542 }
.ar .pl-tile span { font-size: 13px; color: var(--muted) }
.ar .pl-stats { padding: 0; overflow: hidden }
.ar .pl-tabs { display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid #1f3343 }
.ar .pl-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: 600 14px var(--f-display); padding: 10px 12px; cursor: pointer }
.ar .pl-tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--cyan) }
.ar .pl-cells { display: grid; grid-template-columns: repeat(4, 1fr) }
.ar .pl-cell { padding: 14px 18px; border-right: 1px solid #1f3343; border-bottom: 1px solid #1f3343; display: grid; gap: 4px; min-width: 0 }
.ar .pl-cell small { font: 600 11px var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.ar .pl-cell b { font: 700 20px var(--f-display); font-variant-numeric: tabular-nums }
.ar .pl-recent-h { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 6px }
.ar .pl-recent-h h3 { margin: 0 }
.ar .pl-bars { display: flex; align-items: end; gap: 3px; height: 34px; width: 200px }
.ar .pl-bars i { flex: 1; background: #2a4558; border-radius: 2px 2px 0 0 }
.ar .pl-bars i.best { background: #f5c542 }
.ar .pl-game { display: grid; grid-template-columns: 90px minmax(0, 1fr) 120px 90px 64px; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid #1f3343; font-size: 14px; font-variant-numeric: tabular-nums }
.ar .pl-game b { color: var(--ink); font: 700 16px var(--f-display) }
.ar .pl-game .xp { color: var(--cyan); text-align: right; font-weight: 600 }
.ar .pl-game small { color: var(--muted); text-align: right; font-size: 13px }
.ar .pl-game > span:nth-child(3) { text-align: right; color: var(--muted) }
@media (max-width: 1000px) {
  .ar .pl-grid { grid-template-columns: 1fr }
}
@media (max-width: 640px) {
  .ar .pl-tiles { grid-template-columns: 1fr }
  .ar .pl-cells { grid-template-columns: repeat(2, 1fr) }
  .ar .pl-game { grid-template-columns: 76px minmax(0, 1fr) 64px; font-size: 13px }
  .ar .pl-game .xp, .ar .pl-game .hide-s { display: none }
  .ar .pl-bars { width: 120px }
}
/* compete */
.ar .ladder { display: grid; gap: 6px; background: var(--card); border-radius: 18px; padding: 16px; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.06) }
.ar .ladder li { list-style: none; display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 6px 8px; border-radius: 10px }
.ar .ladder li.me { background: #173a48 }
.ar .ladder b { color: var(--ink); font: 600 15px var(--f-display) }
.ar .ladder span { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px }
.ar .ladder ol { margin: 0; padding: 0; display: grid; gap: 2px }
.ar .sum { align-self: center; background: #0b1620; border: 1px dashed #2a4558; border-radius: 14px; padding: 16px 18px; font-variant-numeric: tabular-nums; display: grid; gap: 6px }
.ar .sum .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.ar .sum i { font-style: normal; background: var(--card); border-radius: 8px; padding: 5px 9px; color: var(--ink); font-weight: 600; font-size: 14px }
.ar .sum .eq { color: var(--orange); font: 700 20px var(--f-display) }
.ar .leagues { display: flex; flex-wrap: wrap; gap: 10px }
.ar .leagues span { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border-radius: 99px; padding: 8px 16px 8px 8px; font: 600 14px var(--f-display); color: var(--ink) }
.ar .leagues span::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--c) }
.ar .group { display: grid; gap: 8px; background: var(--card); border-radius: 18px; padding: 18px; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.06) }
.ar .group .cells { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px }
.ar .group .cells i { aspect-ratio: 1; border-radius: 5px; background: #2a3f50 }
.ar .group .cells i.up { background: #22a06b }
.ar .group .cells i.down { background: #c2413a }
.ar .group .key { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; margin-top: 6px }
.ar .group .key span::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 7px; background: var(--c) }
.ar .card.prestige { margin-top: 18px; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center }
.ar .pr-copy { display: grid; gap: 10px }
.ar .pr-marks { display: grid; grid-template-columns: repeat(5, 46px); gap: 14px 18px; background: #0b1620; border-radius: 14px; padding: 18px 20px }
.ar .pm { display: grid; justify-items: center; gap: 6px }
.ar .pm i { height: 16px; display: flex; gap: 3px; align-items: center; font-style: normal; color: var(--muted) }
.ar .pm b { font: 700 12px/1 var(--f-display); color: var(--muted) }
@media (max-width: 760px) {
  .ar .card.prestige { grid-template-columns: 1fr }
  .ar .pr-marks { justify-self: start }
}
.ar .badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px }
.ar .badges span { background: #0b1620; border: 1px solid #22394a; border-radius: 8px; padding: 6px 10px; font-size: 13px; color: var(--ink) }
/* skins */
.ar .skins { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) }
.ar .cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) }
.ar .cards figure { margin: 0; display: grid; gap: 8px }
.ar .cards img { width: 100%; aspect-ratio: 4 / 1; border-radius: 12px; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.08) }
.ar .cards figcaption, .ar .stickers figcaption { font: 600 14px var(--f-display); color: var(--ink) }
.ar .stickers { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin-top: 26px }
.ar .stickers figure { margin: 0; background: var(--card); border-radius: 16px; padding: 16px 10px 12px; display: grid; justify-items: center; gap: 8px }
.ar .stickers img { width: 64px; height: 64px }
/* news */
.ar .ev-list { display: grid; gap: 12px; max-width: 900px; margin: 0 auto }
.ar .ev { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; background: var(--card); border-radius: 16px; padding: 16px 20px; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.06) }
.ar .ev .when { text-align: center; background: #0b1620; border-radius: 12px; padding: 10px 12px; min-width: 64px }
.ar .ev .when b { display: block; font: 700 22px/1 var(--f-display); color: var(--ink) }
.ar .ev .when small { font: 600 11px/1 var(--f-display); text-transform: uppercase; color: var(--muted) }
.ar .ev h3 { font-size: 17px; font-weight: 700 }
.ar .ev p { margin: 2px 0 0; font-size: 14px }
.ar .ev-end { display: flex; align-items: center; gap: 14px }
.ar .ev.on { box-shadow: var(--shadow), 0 0 0 2px var(--orange) }
.ar .tag { font: 600 12px/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; border-radius: 99px; padding: 7px 12px; white-space: nowrap }
.ar .tag.now { background: #d04913; color: #fff }
.ar .tag.soon { background: #173a48; color: var(--cyan) }
.ar .tag.done { background: #1d2c38; color: #909fab }
.ar .stories { display: grid; gap: 16px; max-width: 900px; margin-inline: auto }
.ar .post { background: var(--card); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.06); display: grid; grid-template-columns: 280px minmax(0, 1fr) }
.ar .post .pic { min-height: 158px; background: #0b1b2b center / cover; position: relative }
.ar .post .date { position: absolute; left: 0; bottom: 0; background: var(--deep); color: #fff; font: 600 12px/1 var(--f-display); padding: 10px 12px; text-transform: uppercase }
.ar .post .txt { padding: 20px 24px; display: flex; flex-direction: column; justify-content: center; gap: 8px }
.ar .post .more { align-self: flex-start }
.ar .post .kind { font: 600 12px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--orange) }
.ar .post h3 { font-size: 19px; font-weight: 700; line-height: 1.3 }
.ar .post p { margin: 0; font-size: 14.5px }
.ar .post a.more { margin-top: 4px }
@media (max-width: 640px) {
  .ar .post { grid-template-columns: 1fr }
  .ar .post .pic { min-height: 0; aspect-ratio: 16 / 9 }
}
.ar .post[hidden] { display: none }
/* about */
.ar .prose { display: grid; gap: 16px; font-size: 16px }
.ar .prose p { margin: 0 }
.ar .callout { background: linear-gradient(160deg, #1b3242, #142330); border-radius: 22px; padding: 28px; display: grid; gap: 14px; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.08) }
.ar .callout h3 { font-size: 24px; font-weight: 700 }
.ar .callout h3 em { color: var(--orange); font-style: normal }
.ar .sign { display: flex; align-items: center; gap: 14px; margin-top: 18px }
.ar .sign-logo { width: 52px; height: 52px; border-radius: 50%; background: #0b1620; box-shadow: 0 0 0 3px #1f3343; display: grid; place-items: center }
.ar .sign-logo svg { width: 30px; height: 30px }
.ar .sign b { display: block; color: var(--cyan); font: 700 17px var(--f-display) }
.ar .sign span { color: var(--muted); font-size: 13.5px }
.ar .qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.ar .qa > div { background: var(--card); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.06) }
.ar .qa h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 8px }
.ar .qa p { margin: 0; font-size: 14.5px }
@media (max-width: 760px) {
  .ar .qa { grid-template-columns: 1fr }
}
.ar .contact { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 760px; margin: 0 auto }
.ar .contact a { text-decoration: none }
.ar .contact .card { grid-template-columns: auto 1fr; align-items: center; transition: transform .2s }
.ar .contact .card:hover { transform: translateY(-3px) }
.ar .contact svg { margin-top: 4px; width: 30px; height: 30px; fill: var(--cyan) }
@media (max-width: 860px) {
  .ar .two { grid-template-columns: 1fr }
}
@media (max-width: 560px) {
  .ar .ev { grid-template-columns: auto 1fr }
  .ar .ev .ev-end { grid-column: 2; justify-self: start; flex-wrap: wrap }
  .ar .skins { grid-template-columns: repeat(2, 1fr) }
}
.ar .st-tabs a { font: 600 15px/1 var(--f-display); color: var(--muted); text-decoration: none; border-radius: 10px; padding: 11px 20px }
.ar .st-tabs a:hover { color: var(--ink) }
.ar .st-tabs a[aria-current="page"] { background: #1d3a4d; color: #fff; box-shadow: inset 0 0 0 1px rgba(60,207,226,.5) }
.ar .st-pager a, .ar .st-pager .off { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #1a2d3c; color: var(--ink); font-size: 18px; text-decoration: none }
.ar .st-pager .off { opacity: .35 }
.ar .st-tabs a:focus-visible, .ar .st-pager a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 1px }
@media (max-width: 640px) {
  .ar .st-tabs a { padding: 10px 14px }
}
.ar .pl-card img.stk { right: auto; bottom: auto }
/* The legal pages (web/content/*.html, inside .legal): the Tailwind rules their content uses,
   copied from tailwind.min.css so those pages no longer load it */
.legal *, .legal :after, .legal :before, .legal ::backdrop { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0 }
.legal hr { height: 0; color: inherit; border-top-width: 1px }
.legal abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted }
.legal h1, .legal h2, .legal h3, .legal h4, .legal h5, .legal h6 { font-size: inherit; font-weight: inherit }
.legal a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit }
.legal b, .legal strong { font-weight: bolder }
.legal code, .legal kbd, .legal samp, .legal pre { font-family: var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace); font-feature-settings: var(--default-mono-font-feature-settings,normal); font-variation-settings: var(--default-mono-font-variation-settings,normal); font-size: 1em }
.legal small { font-size: 80% }
.legal sub, .legal sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative }
.legal sub { bottom: -.25em }
.legal sup { top: -.5em }
.legal table { text-indent: 0; border-color: inherit; border-collapse: collapse }
.legal :-moz-focusring { outline: auto }
.legal progress { vertical-align: baseline }
.legal summary { display: list-item }
.legal ol, .legal ul, .legal menu { list-style: none }
.legal img, .legal svg, .legal video, .legal canvas, .legal audio, .legal iframe, .legal embed, .legal object { vertical-align: middle; display: block }
.legal img, .legal video { max-width: 100%; height: auto }
.legal button, .legal input, .legal select, .legal optgroup, .legal textarea { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0 }
.legal :where(select:is([multiple],[size])) optgroup { font-weight: bolder }
.legal :where(select:is([multiple],[size])) optgroup option { padding-inline-start: 20px }
.legal ::placeholder { opacity: 1; color: color-mix(in oklab,currentColor 50%,transparent) }
.legal textarea { resize: vertical }
.legal ::-webkit-search-decoration { -webkit-appearance: none }
.legal ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit }
.legal ::-webkit-datetime-edit-fields-wrapper { padding: 0 }
.legal ::-webkit-datetime-edit { display: inline-flex; padding-block: 0 }
.legal ::-webkit-datetime-edit-year-field { padding-block: 0 }
.legal ::-webkit-datetime-edit-month-field { padding-block: 0 }
.legal ::-webkit-datetime-edit-day-field { padding-block: 0 }
.legal ::-webkit-datetime-edit-hour-field { padding-block: 0 }
.legal ::-webkit-datetime-edit-minute-field { padding-block: 0 }
.legal ::-webkit-datetime-edit-second-field { padding-block: 0 }
.legal ::-webkit-datetime-edit-millisecond-field { padding-block: 0 }
.legal ::-webkit-datetime-edit-meridiem-field { padding-block: 0 }
.legal :-moz-ui-invalid { box-shadow: none }
.legal button, .legal input:where([type=button],[type=reset],[type=submit]) { appearance: button }
.legal ::file-selector-button { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; margin-inline-end: 4px; appearance: button }
.legal ::-webkit-inner-spin-button { height: auto }
.legal ::-webkit-outer-spin-button { height: auto }
.legal [hidden]:where(:not([hidden=until-found])) { display: none!important }
.legal { --font-sans: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --color-blue-600: oklch(.546 .245 262.881); --color-gray-50: oklch(.985 .002 247.839); --color-gray-200: oklch(.928 .006 264.531); --color-gray-500: oklch(.551 .027 264.364); --color-gray-600: oklch(.446 .03 256.802); --color-gray-700: oklch(.373 .034 259.733); --color-gray-800: oklch(.278 .033 256.848); --color-white: #fff; --spacing: .25rem; --container-4xl: 56rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1/.75); --text-sm: .875rem; --text-sm--line-height: calc(1.25/.875); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75/1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2/1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25/1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5/2.25); --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-wider: .05em; --radius-lg: .5rem; --default-font-family: var(--font-sans); --default-font-feature-settings: var(--font-sans--font-feature-settings); --default-font-variation-settings: var(--font-sans--font-variation-settings); --default-mono-font-family: var(--font-mono); --default-mono-font-feature-settings: var(--font-mono--font-feature-settings); --default-mono-font-variation-settings: var(--font-mono--font-variation-settings); -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings,normal); font-variation-settings: var(--default-font-variation-settings,normal); -webkit-tap-highlight-color: transparent }
.legal *, .legal ::before, .legal ::after { --tw-space-y-reverse: 0; --tw-border-style: solid; --tw-divide-y-reverse: 0; --tw-leading: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-inset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-offset-shadow: 0 0 #0000 }
.legal .container { width: 100% }
@media (width>=40rem) {
  .legal .container { max-width: 40rem }
}
@media (width>=48rem) {
  .legal .container { max-width: 48rem }
}
@media (width>=64rem) {
  .legal .container { max-width: 64rem }
}
@media (width>=80rem) {
  .legal .container { max-width: 80rem }
}
@media (width>=96rem) {
  .legal .container { max-width: 96rem }
}
.legal .mx-auto { margin-inline: auto }
.legal .my-12 { margin-block: calc(var(--spacing)*12) }
.legal .mt-2 { margin-top: calc(var(--spacing)*2) }
.legal .mt-4 { margin-top: calc(var(--spacing)*4) }
.legal .mt-10 { margin-top: calc(var(--spacing)*10) }
.legal .mt-12 { margin-top: calc(var(--spacing)*12) }
.legal .mb-2 { margin-bottom: calc(var(--spacing)*2) }
.legal .mb-4 { margin-bottom: calc(var(--spacing)*4) }
.legal .mb-6 { margin-bottom: calc(var(--spacing)*6) }
.legal .mb-8 { margin-bottom: calc(var(--spacing)*8) }
.legal .mb-12 { margin-bottom: calc(var(--spacing)*12) }
.legal .ml-4 { margin-left: calc(var(--spacing)*4) }
.legal .ml-6 { margin-left: calc(var(--spacing)*6) }
.legal .max-w-4xl { max-width: var(--container-4xl) }
.legal .max-w-7xl { max-width: var(--container-7xl) }
.legal .min-w-full { min-width: 100% }
.legal .list-inside { list-style-position: inside }
.legal .list-disc { list-style-type: disc }
.legal :where(.space-y-1>:not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse))) }
.legal :where(.space-y-2>:not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse))) }
.legal :where(.space-y-4>:not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse))) }
.legal :where(.space-y-6>:not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse))) }
.legal :where(.space-y-8>:not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing)*8)*var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-y-reverse))) }
.legal :where(.divide-y>:not(:last-child)) { --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(1px*var(--tw-divide-y-reverse)); border-bottom-width: calc(1px*calc(1 - var(--tw-divide-y-reverse))) }
.legal :where(.divide-gray-200>:not(:last-child)) { border-color: var(--color-gray-200) }
.legal .overflow-x-auto { overflow-x: auto }
.legal .rounded-lg { border-radius: var(--radius-lg) }
.legal .border { border-style: var(--tw-border-style); border-width: 1px }
.legal .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px }
.legal .border-gray-200 { border-color: var(--color-gray-200) }
.legal .bg-gray-50 { background-color: var(--color-gray-50) }
.legal .bg-white { background-color: var(--color-white) }
.legal .p-8 { padding: calc(var(--spacing)*8) }
.legal .px-6 { padding-inline: calc(var(--spacing)*6) }
.legal .py-3 { padding-block: calc(var(--spacing)*3) }
.legal .py-4 { padding-block: calc(var(--spacing)*4) }
.legal .pb-2 { padding-bottom: calc(var(--spacing)*2) }
.legal .pb-4 { padding-bottom: calc(var(--spacing)*4) }
.legal .text-center { text-align: center }
.legal .text-left { text-align: left }
.legal .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading,var(--text-2xl--line-height)) }
.legal .text-3xl { font-size: var(--text-3xl); line-height: var(--tw-leading,var(--text-3xl--line-height)) }
.legal .text-4xl { font-size: var(--text-4xl); line-height: var(--tw-leading,var(--text-4xl--line-height)) }
.legal .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading,var(--text-sm--line-height)) }
.legal .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading,var(--text-xl--line-height)) }
.legal .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading,var(--text-xs--line-height)) }
.legal .font-bold { font-weight: var(--font-weight-bold) }
.legal .font-medium { font-weight: var(--font-weight-medium) }
.legal .font-semibold { font-weight: var(--font-weight-semibold) }
.legal .tracking-wider { letter-spacing: var(--tracking-wider) }
.legal .whitespace-nowrap { white-space: nowrap }
.legal .text-blue-600 { color: var(--color-blue-600) }
.legal .text-gray-500 { color: var(--color-gray-500) }
.legal .text-gray-600 { color: var(--color-gray-600) }
.legal .text-gray-700 { color: var(--color-gray-700) }
.legal .text-gray-800 { color: var(--color-gray-800) }
.legal .uppercase { text-transform: uppercase }
.legal .shadow-md { --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a); box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow) }
@media (hover:hover) {
  .legal .hover\:underline:hover { text-decoration-line: underline }
}
/* /play: the game under the nav (the canvas is sized by fitGame in play.rs) */
.play .wrap { max-width: 1312px; padding-block: 16px calc(var(--tear) + 16px) }
.play #app-container { margin: 0 auto; max-width: 100% }
.play #canvas-container { position: relative }
.play #canvas { display: block; width: 100%; border: 0; outline: 0; border-radius: 6px 6px 0 0; background: var(--deep) center / 72px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M75 7a50 50 0 0 1-25 6 50 50 0 0 1-25-6A50 50 0 0 0 0 50a50 50 0 0 1 25 43 50 50 0 0 0 25 7 50 50 0 0 0 25-7 50 50 0 0 1 25-43A50 50 0 0 0 75 7ZM55 52c9-10 18-21 22-30s17 17 15 21-9 11-20 14-26 6-17-5Zm-10 0c-9-10-18-21-22-30S6 39 8 43s9 11 20 14 26 6 17-5Zm7 34a3 8 0 1 0 6 0 3 8 0 1 0-6 0Zm-10 0a3 8 0 1 0 6 0 3 8 0 1 0-6 0Z' style='fill:%23fff;fill-rule:evenodd;stroke-width:0'/%3E%3C/svg%3E") }
.play #canvas-container:fullscreen #canvas { border-radius: 0; height: 100% !important }
.play .canvas-app-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 6px; background: #1d3242 }
.play .canvas-app-progress-bar { height: 6px; background: var(--cyan); transform-origin: left; transition: transform 1s ease }
.play .play-bar { height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--card); border-radius: 0 0 6px 6px; font-size: 13px; color: var(--muted) }
.play .play-bar button { font: 600 14px var(--f-body); color: var(--cyan); background: none; border: 0; padding: 0; cursor: pointer }
.play .play-bar kbd { font: 600 12px var(--f-body); color: var(--ink); border: 1px solid #2c4252; border-radius: 4px; padding: 1px 6px }