/* ==========================================================================
   VertigoCO — responsive.css
   Breakpoints. The desktop composition is pinned to the 1536px reference,
   then progressively unpins into a stacked layout.
   ========================================================================== */

/* fluid down-scale of the pinned desktop composition */
@media (max-width: 1535px) and (min-width: 1181px) {
  .hero            { min-height: 50.2vw; }
  .panel--login    { left: 4.2vw;  top: 19.8vw; width: 16.8vw; }
  .hero__right     { right: 4.9vw; top: 19.9vw; width: 18.6vw; }
  .hero__center    { margin-top: -5vw; }
  .hero__sub       { font-size: 1.76vw; }
  .hero__title     { font-size: 1.63vw; }
  .hero__tag       { font-size: .88vw; }
  .brand           { width: 20vw; }
  .btn-ember--lg   { font-size: 1.65vw; padding: 1vw 2.9vw 1vw 2vw; }
  .panel__title    { font-size: 1.05vw; }
  .status-online__text { font-size: 1.37vw; }
  .stat__value--xl { font-size: 1.95vw; }
  .infogrid        { padding-inline: 5.7vw; }
  .nav__link       { padding: 8px 10px; font-size: 11.6px; }
}

/* ---------- large tablet / small laptop: unpin the side panels ---------- */
@media (max-width: 1180px) {
  .hero {
    min-height: 0;
    padding-bottom: 34px;
  }

  .hero__scene { inset: 0; height: 640px; }
  .hero__bg    { background-position: center 20%; }

  .topbar {
    flex-wrap: wrap;
    padding: 10px 20px 0;
    gap: 12px;
  }

  .brand { width: 240px; }

  .nav {
    order: 3;
    flex-basis: 100%;
  }

  .hero__center {
    width: min(680px, 88%);
    margin-top: 6px;
  }

  .hero__sub   { font-size: 22px; }
  .hero__title { font-size: 21px; }

  .panel--login,
  .hero__right {
    position: static;
    width: auto;
  }

  .hero__sides {
    display: grid;
  }

  /* rebuild the hero lower area as a responsive grid */
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'top   top'
      'ctr   ctr'
      'login status'
      'feat  feat';
    gap: 20px 20px;
    padding-inline: 24px;
  }

  .hero__scene  { grid-area: 1 / 1 / 3 / 3; }
  .topbar       { grid-area: top; padding-inline: 0; }
  .hero__center { grid-area: ctr; margin-inline: auto; }
  .panel--login { grid-area: login; }
  .hero__right  { grid-area: status; }
  .features     { grid-area: feat; width: 100%; padding: 0; }

  .infogrid {
    grid-template-columns: 1fr 1fr;
    padding: 22px 24px 30px;
  }

  .footer__inner {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 26px;
  }

  .footer__col--copy { grid-column: span 3; }
  .footer__col + .footer__col::before { display: none; }
}

/* ---------- tablet ---------- */
@media (max-width: 900px) {
  .nav-toggle { display: block; }

  .nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s var(--ease);
  }

  .nav.is-open { max-height: 420px; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 8px;
    padding: 6px;
    background: rgba(10, 4, 20, .92);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px var(--line);
  }

  .nav__link { text-align: center; padding: 11px; }
  .nav__link::before { display: none; }

  .topbar > .btn-ember--sm { margin-left: auto; }

  .hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      'top'
      'ctr'
      'login'
      'status'
      'feat';
  }

  .hero__scene { grid-area: 1 / 1 / 3 / 2; height: 560px; }

  .hero__castle { width: 46%; opacity: .7; }
  .hero__dragon { width: 60%; opacity: .8; }

  .features { grid-template-columns: repeat(3, 1fr); }
  .features .card:nth-child(4) { grid-column: 1 / 2; }

  .infogrid { grid-template-columns: 1fr; }

  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__col--copy { grid-column: span 2; }
}

/* ---------- phone ---------- */
@media (max-width: 620px) {
  body { font-size: 14px; }

  .hero { padding-inline: 14px; }
  .hero__scene { height: 460px; }

  .brand { width: 200px; }

  .hero__center { width: 100%; }
  .hero__sub    { font-size: 16px; letter-spacing: .26em; }
  .hero__title  { font-size: 15px; letter-spacing: .14em; }
  .hero__tag    { font-size: 10.5px; letter-spacing: .14em; }

  .btn-ember--lg {
    width: 100%;
    padding: 12px 18px;
    font-size: 19px;
    gap: 10px;
  }

  .btn-ember__shield { width: 32px; height: 40px; }

  .features { grid-template-columns: repeat(2, 1fr); }
  .features .card:nth-child(4) { grid-column: auto; }
  .features .card:nth-child(5) { grid-column: 1 / -1; }
  .features .card:nth-child(5) .card__art img { aspect-ratio: 3 / 1; }

  .infogrid { padding: 18px 14px 24px; }

  .ranklist li  { grid-template-columns: 16px 22px 1fr auto; }
  .ranklist__meta:not(.ranklist__meta--r) { display: none; }

  .footer { padding: 20px 16px 22px; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__col--copy { grid-column: auto; }
  .footer__logo { width: 190px; }
  .footer__links { grid-template-columns: 1fr 1fr; }
  .footer__dragon { display: none; }
}

/* ---------- very large screens: keep it centred, add breathing room ---------- */
@media (min-width: 1900px) {
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(60% 60% at 50% 0%, rgba(90, 30, 170, .18), transparent 70%);
    pointer-events: none;
  }
}