/* RESPONSIVE
   Breakpoints: 1500, 1100, 800 e 600 px + movimento reduzido. */

@media(min-width:1500px) {
  .hero-layout {
    min-height:710px
  }
  .hero-emblem {
    max-width:535px
  }
  .hero-detail {
    max-width:415px
  }
}
@media(max-width:1100px) {
  .container {
    width:calc(100% - 64px)
  }
  .hero-layout {
    min-height:610px
  }
  .hero-actions {
    gap:18px;
    flex-wrap:wrap
  }
  .hero-detail {
    max-width:330px
  }
  .nav-wrap nav {
    gap:23px
  }
  .world-strip-inner {
    gap:14px;
    grid-template-columns:.9fr 1fr 1.15fr 1.15fr
  }
  .world-strip-inner>a {
    display:none
  }
  .world-strip-inner>div:not(:first-child) {
    padding-left:19px
  }
  .world-strip-inner strong {
    font-size:22px
  }
  .world-strip-inner strong small {
    font-size:8px
  }
  .feature-card {
    padding-inline:22px
  }
  .feature-copy h3 {
    font-size:21px
  }
  .war-grid {
    grid-template-columns:1.55fr 1fr
  }
  .ranking-toolbar {
    padding-inline:18px
  }
  .ranking-caption {
    display:none
  }
  .ranking-row,.ranking-columns {
    padding-inline:18px;
    grid-template-columns:24px minmax(100px,1fr) 70px 52px;
    gap:10px
  }
  .ranking-row:first-child {
    padding-left:16px
  }
  .rank-player {
    gap:9px
  }
  .events-layout {
    gap:35px
  }
  .footer-main nav {
    gap:13px
  }
  .hero-bottom p {
    display:none
  }
}
@media(max-width:800px) {
  .container {
    width:calc(100% - 40px)
  }
  .nav-wrap {
    height:73px
  }
  .brand {
    font-size:20px
  }
  .nav-wrap nav {
    gap:19px
  }
  .account-link {
    display:none
  }
  .hero-layout {
    grid-template-columns:1.15fr 1fr;
    min-height:590px;
    gap:0;
    padding-top:57px
  }
  .hero .eyebrow {
    font-size:7px;
    letter-spacing:.17em
  }
  h1 {
    font-size:52px
  }
  .hero-description {
    font-size:14px
  }
  .hero-detail {
    font-size:11px
  }
  .hero-emblem {
    width:110%;
    margin-left:-10%;
    z-index:-1
  }
  .rune {
    font-size:6px
  }
  .hero-tags {
    gap:10px;
    font-size:7px
  }
  .hero-tags svg {
    width:11px
  }
  .hero-actions .text-link {
    display:none
  }
  .world-strip-title {
    display:none
  }
  .world-strip-inner {
    grid-template-columns:repeat(3,1fr);
    gap:15px
  }
  .world-strip-inner>div:not(:first-child) {
    padding-left:17px
  }
  .world-strip-inner>div:nth-child(2) {
    border-left:0;
    padding-left:0
  }
  .world-strip-inner>div>span {
    font-size:8px!important
  }
  .world-strip-inner strong small {
    display:block;
    margin:3px 0 7px;
    font-size:7px
  }
  .section {
    padding-block:75px
  }
  .section-heading {
    gap:20px
  }
  .section-heading>p {
    font-size:10px
  }
  .feature-grid {
    gap:12px
  }
  .feature-card {
    padding:20px 17px
  }
  .feature-copy h3 {
    font-size:18px
  }
  .feature-copy p {
    font-size:10px
  }
  .card-link {
    font-size:7px;
    letter-spacing:0
  }
  .war-grid {
    grid-template-columns:1fr
  }
  .champion-card {
    min-height:260px;
    display:grid;
    grid-template-columns:140px 1fr;
    text-align:left;
    column-gap:35px;
    padding:30px
  }
  .champion-card>.eyebrow {
    grid-column:2;
    margin:0
  }
  .champion-symbol {
    grid-column:1;
    grid-row:1/5
  }
  .champion-card h3 {
    margin:12px 0
  }
  .champion-card p {
    margin:0
  }
  .champion-card .text-link {
    margin-top:13px
  }
  .ranking-row,.ranking-columns {
    grid-template-columns:35px 1fr 120px 80px;
    padding-inline:25px
  }
  .ranking-row:first-child {
    padding-left:23px
  }
  .rank-player strong {
    font-size:12px
  }
  .rank-player small {
    font-size:9px
  }
  .rank-guild {
    font-size:9px
  }
  .events-layout {
    grid-template-columns:1fr 1fr;
    gap:23px
  }
  .featured-event {
    padding:25px
  }
  .featured-event h3 {
    font-size:26px
  }
  .event-countdown>div {
    gap:19px
  }
  .event-shield {
    right:-85px
  }
  summary {
    gap:14px
  }
  summary b {
    font-size:18px
  }
  .event-list .list-label {
    font-size:7px
  }
  .footer-main {
    flex-wrap:wrap
  }
  .footer-main nav {
    width:100%;
    justify-content:space-between
  }
  .footer-bottom>span:last-child {
    display:none
  }
}
@media(max-width:600px) {
  html {
    scroll-padding-top:20px
  }
  .container {
    width:calc(100% - 40px)
  }
  .utility {
    height:30px;
    font-size:7px;
    letter-spacing:.1em
  }
  .utility>div {
    gap:0
  }
  .locale {
    display:none
  }
  .effects-control {
    font-size:7px
  }
  .nav-wrap {
    height:72px
  }
  .brand {
    font-size:19px
  }
  .brand-sigil {
    width:33px;
    height:40px
  }
  .brand small {
    font-size:6px
  }
  .menu-toggle {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    width:42px;
    height:42px;
    padding:8px
  }
  .menu-toggle>span {
    display:block;
    height:1px;
    width:23px;
    background:var(--gold);
    transition:transform .2s
  }
  .menu-toggle[aria-expanded=true]>span:first-child {
    transform:translateY(3.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true]>span:last-child {
    transform:translateY(-3.5px) rotate(-45deg)
  }
  .nav-wrap nav {
    position:absolute;
    left:0;
    right:0;
    top:100%;
    height:auto;
    background:#141015;
    display:none;
    align-items:stretch;
    flex-direction:column;
    gap:0;
    padding:12px 26px 20px;
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 40px #0008
  }
  .nav-wrap nav.open {
    display:flex
  }
  .nav-wrap nav>a {
    padding:12px 0;
    font-size:12px
  }
  .nav-wrap nav>a::after {
    display:none
  }
  .mobile-account {
    display:flex;
    justify-content:space-between;
    padding:14px 0;
    border-top:1px solid var(--line);
    margin-top:8px;
    text-align:left;
    font-size:12px;
    color:var(--gold)
  }
  .hero-layout {
    grid-template-columns:1fr;
    min-height:0;
    padding:55px 0 30px;
    gap:30px
  }
  .hero-copy {
    text-align:center
  }
  .hero-copy .eyebrow {
    justify-content:center;
    font-size:7px
  }
  .hero h1 {
    font-size:clamp(44px,11.8vw,65px);
    letter-spacing:-.07em
  }
  .hero h1::after {
    margin-inline:auto;
    margin-top:22px
  }
  .hero-description {
    font-size:15px
  }
  .hero-detail {
    max-width:320px;
    margin-inline:auto;
    font-size:11px
  }
  .hero-actions {
    justify-content:center
  }
  .hero-actions .button {
    min-width:260px
  }
  .hero-tags {
    justify-content:center;
    margin-top:22px;
    font-size:8px;
    gap:18px
  }
  .hero-emblem {
    width:270px;
    max-width:90%;
    height:270px;
    justify-self:center;
    margin:0;
    z-index:0
  }
  .emblem-coordinate {
    bottom:-5%;
    font-size:6px
  }
  .rune {
    font-size:6px
  }
  .hero-bottom {
    padding-top:24px;
    padding-bottom:26px
  }
  .scroll-cue {
    font-size:7px;
    letter-spacing:.1em
  }
  .hero-index {
    font-size:13px
  }
  .world-strip-inner {
    padding-block:22px;
    gap:10px
  }
  .world-strip-inner>div:not(:first-child) {
    padding-left:11px
  }
  .world-strip-inner>div:nth-child(2) {
    padding-left:0
  }
  .world-strip-inner strong {
    font-size:24px
  }
  .world-strip-inner>div>span {
    display:none!important
  }
  .world-strip-inner strong small {
    font-size:6px;
    margin-bottom:0;
    letter-spacing:.03em
  }
  .section {
    padding-block:65px
  }
  .section-heading {
    display:block;
    margin-bottom:29px
  }
  .section-heading>p {
    margin-top:20px;
    font-size:11px
  }
  .section-heading .eyebrow {
    font-size:7px;
    letter-spacing:.15em;
    margin-bottom:14px
  }
  h2 {
    font-size:29px;
    letter-spacing:-.06em
  }
  .feature-grid {
    grid-template-columns:1fr;
    gap:15px
  }
  .feature-card {
    padding:25px;
    min-height:300px
  }
  .feature-art {
    left:auto;
    right:10px;
    top:46px;
    width:140px;
    height:140px;
    opacity:.65
  }
  .feature-copy {
    padding-top:28px
  }
  .feature-copy h3 {
    font-size:25px;
    position:relative;
    max-width:250px
  }
  .feature-copy p {
    font-size:11px;
    max-width:245px
  }
  .feature-copy .feature-icon {
    margin-bottom:12px
  }
  .card-link {
    font-size:8px
  }
  .card-top {
    font-size:7px
  }
  .season-label {
    margin-top:23px
  }
  .ranking-toolbar {
    padding-inline:17px
  }
  .ranking-tabs button {
    font-size:11px;
    padding-block:18px
  }
  .ranking-row,.ranking-columns {
    grid-template-columns:22px minmax(115px,1fr) 52px;
    gap:11px;
    padding-inline:17px
  }
  .ranking-row {
    min-height:70px
  }
  .ranking-row:first-child {
    padding-left:15px
  }
  .rank-guild,.ranking-columns>span:nth-child(3) {
    display:none
  }
  .ranking-columns {
    font-size:6px
  }
  .rank-avatar {
    width:27px;
    height:32px
  }
  .rank-player {
    gap:9px
  }
  .rank-player strong {
    font-size:10px
  }
  .rank-player small {
    font-size:7px
  }
  .rank-score {
    font-size:20px
  }
  .sample-note {
    padding:15px 17px;
    font-size:8px
  }
  .champion-card {
    grid-template-columns:85px 1fr;
    column-gap:22px;
    padding:26px 18px;
    min-height:255px
  }
  .champion-symbol {
    width:85px;
    height:115px
  }
  .champion-symbol svg {
    width:28px
  }
  .champion-symbol b {
    font-size:32px
  }
  .champion-card .eyebrow {
    font-size:6px
  }
  .champion-card h3 {
    font-size:21px
  }
  .champion-card p {
    font-size:9px
  }
  .champion-card .text-link {
    font-size:9px;
    gap:10px
  }
  .events-layout {
    grid-template-columns:1fr;
    gap:35px
  }
  .featured-event {
    padding:29px;
    min-height:400px
  }
  .featured-event h3 {
    font-size:31px
  }
  .event-shield {
    right:-25px
  }
  .event-countdown>div {
    gap:31px
  }
  .event-list .list-label {
    font-size:7px
  }
  summary b {
    font-size:20px
  }
  details>p {
    margin-left:36px;
    font-size:11px
  }
  .join-section {
    padding-block:70px
  }
  .join-content>.eyebrow {
    font-size:6px;
    letter-spacing:.12em;
    gap:9px
  }
  .join-content h2 {
    font-size:34px
  }
  .join-content>p:not(.eyebrow) {
    font-size:11px
  }
  .join-actions {
    flex-direction:column;
    align-items:stretch;
    max-width:320px;
    margin-inline:auto;
    gap:12px
  }
  .community-link {
    font-size:8px;
    gap:8px;
    padding:0
  }
  .community-link>span {
    margin-left:0
  }
  .join-section::before {
    font-size:280px;
    top:24%
  }
  .footer-main {
    padding-block:32px;
    gap:23px
  }
  .footer-main .brand {
    font-size:17px
  }
  .footer-main>p {
    font-size:9px
  }
  .footer-main nav {
    flex-wrap:wrap;
    gap:15px;
    font-size:9px
  }
  .footer-bottom {
    font-size:7px;
    padding-bottom:23px
  }
  .back-top {
    right:12px;
    bottom:14px;
    width:32px;
    height:34px
  }
  dialog {
    padding-inline:25px
  }
  dialog h2 {
    font-size:23px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .reveal.waiting {
    opacity:1!important;
    transform:none!important
  }
  .hero-emblem {
    transform:none!important
  }
}