:root {
  color-scheme: dark;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  --text: #fff4f4;
  --muted: #ccb6b8;
  --accent: #ff656b;
  --focus: #ffe4a3;
  --cut: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: #1a0408;
  background-image: radial-gradient(ellipse at 50% 0%, #4a0c16 0%, #2c060d 46%, #160307 100%);
  color: var(--text);
}

/* Malha estática: linhas finas de 32 px e trilhas energizadas a cada 160 px.
   Gradientes estreitos dão o halo das trilhas, sem filtros na viewport. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(255 86 46 / 15%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 86 46 / 12%) 1px, transparent 1px),
    linear-gradient(rgb(255 64 30 / 5%), transparent 5px, transparent 155px, rgb(255 64 30 / 5%)),
    linear-gradient(90deg, rgb(255 64 30 / 4%), transparent 5px, transparent 155px, rgb(255 64 30 / 4%)),
    linear-gradient(rgb(255 255 255 / 2%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 2%) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 160px 160px, 160px 160px, 32px 32px, 32px 32px;
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 15%, transparent 80%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 15%, transparent 80%);
}

/* Pulsos e seus halos percorrem somente as trilhas acentuadas.
   Os offsets de meia célula alinham os centros das elipses às linhas. */
body::after {
  --grid-pulse-gain: 1.9;
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 46px 1px at center, rgb(255 184 113 / calc(42% * var(--grid-pulse-gain))), rgb(255 104 42 / calc(24% * var(--grid-pulse-gain))) 48%, transparent 100%),
    radial-gradient(ellipse 62px 4px at center, rgb(255 77 31 / calc(14% * var(--grid-pulse-gain))), transparent 100%),
    radial-gradient(ellipse 1px 46px at center, rgb(255 166 100 / calc(38% * var(--grid-pulse-gain))), rgb(255 92 38 / calc(22% * var(--grid-pulse-gain))) 48%, transparent 100%),
    radial-gradient(ellipse 4px 62px at center, rgb(255 66 28 / calc(12% * var(--grid-pulse-gain))), transparent 100%);
  background-size: 480px 160px, 480px 160px, 160px 640px, 160px 640px;
  background-repeat: repeat;
  background-position: -160px -80px, -160px -80px, -80px 0, -80px 0;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 15%, transparent 80%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 15%, transparent 80%);
  opacity: .35;
  animation: grid-pulse-x 7.6667s linear infinite, grid-pulse-y 9.6667s linear infinite, grid-pulse-envelope 5.6667s ease-in-out infinite;
}

@media (min-width: 48rem) {
  body::after { --grid-pulse-gain: 1.45; }
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
h1, p { margin: 0; }

.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: min(100% - 2rem, 29rem);
  margin-inline: auto;
  padding-top: clamp(2rem, 6vh, 4.5rem);
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

.page > main { padding-bottom: clamp(2rem, 7vw, 2.75rem); }

.brand {
  margin-bottom: clamp(2rem, 5vw, 2.75rem);
  text-align: center;
  animation: arrive 450ms ease-out both;
}

.brand__name {
  color: var(--accent);
  font-family: "Arial Black", "Segoe UI", Arial, sans-serif;
  font-size: clamp(3.5rem, 14vw, 4.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .055em;
}

.brand__aleks {
  display: inline-block;
  font-size: clamp(4.25rem, 20vw, 6.5rem);
  color: #ffaf64;
  text-shadow: 0 -2px 7px rgb(255 99 26 / 20%), 0 3px 16px rgb(224 35 26 / 16%);
}

/* Sem suporte ao recorte, o nome continua sólido e legível. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .brand__aleks {
    /* Três focos em alturas diferentes deformam a frente de calor.
       A última camada é a base opaca e permanece imóvel. */
    background-image:
      radial-gradient(ellipse 28% 9% at 15% 45%, rgb(255 250 210 / 96%), rgb(255 201 68 / 82%) 36%, rgb(255 100 16 / 25%) 70%, transparent 100%),
      radial-gradient(ellipse 30% 8% at 49% 52%, rgb(255 250 210 / 96%), rgb(255 201 68 / 82%) 36%, rgb(255 100 16 / 25%) 70%, transparent 100%),
      radial-gradient(ellipse 28% 11% at 84% 47%, rgb(255 250 210 / 96%), rgb(255 201 68 / 82%) 36%, rgb(255 100 16 / 25%) 70%, transparent 100%),
      linear-gradient(176deg, transparent 40%, rgb(255 244 180 / 12%) 45%, rgb(255 220 80 / 78%) 49%, rgb(255 100 0 / 55%) 53%, transparent 59%),
      linear-gradient(180deg, #fff1bf 0%, #ffd06b 18%, #ff983f 38%, #ff4c19 58%, #e52b30 78%, #c83b34 100%);
    background-size: 100% 300%, 100% 300%, 100% 300%, 100% 300%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 50% 100%, 50% 100%, 50% 100%, 50% 100%, center;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: flame-wave 3.4s linear infinite, flame-heat 4.7s ease-in-out infinite;
  }
}

.brand__games {
  display: block;
  margin-top: .7rem;
  padding-left: .42em;
  color: var(--text);
  font-size: clamp(.95rem, 3.8vw, 1.125rem);
  font-weight: 600;
  letter-spacing: .42em;
  text-transform: uppercase;
  text-shadow: none;
}

.brand__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.brand__caption::before, .brand__caption::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: #a3454e;
}

.channels { display: grid; gap: .875rem; }

/* Apenas os fundos são recortados: o contorno de foco permanece inteiro. */
.card {
  --edge: #75424a;
  --surface: rgb(52 28 34 / 92%);
  position: relative;
  isolation: isolate;
  box-shadow: 0 8px 20px rgb(0 0 0 / 12%);
  transition: transform 160ms ease;
}

.card::before, .card::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

.card::before { inset: 0; background: var(--edge); transition: background-color 160ms ease; }
.card::after {
  inset: 1px;
  background: linear-gradient(115deg, rgb(255 255 255 / 4%), transparent 70%), var(--surface);
  transition: background-color 160ms ease;
}

/* O fundo opaco mantém o contraste mesmo sem backdrop-filter. */
@supports (backdrop-filter: blur(8px)) {
  .card::after { backdrop-filter: blur(8px); }
}

.channel {
  display: flex;
  align-items: center;
  gap: clamp(.65rem, 3vw, 1rem);
  min-height: 5rem;
  padding: clamp(.875rem, 3vw, 1.125rem);
}

.channel__icon {
  display: grid;
  place-items: center;
  flex: 0 0 2.5rem;
  height: 2.5rem;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: .4rem;
  background: rgb(255 255 255 / 5%);
}

.channel__label {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: clamp(.9375rem, 3.7vw, 1.0625rem);
  font-weight: 650;
  letter-spacing: .015em;
}

.arrow, .chevron { flex-shrink: 0; color: #d0a4a9; }
.arrow { font-size: 1.375rem; line-height: 1; transition: transform 160ms ease; }

.channel--official { --edge: #b74b55; --surface: rgb(83 26 36 / 94%); }
.channel--official .channel__icon { background: rgb(255 96 107 / 12%); border-color: rgb(255 124 133 / 24%); }
.channel--official .arrow { color: #ff9299; }

summary.channel { cursor: pointer; list-style: none; }
summary.channel::-webkit-details-marker { display: none; }
.chevron {
  width: .5rem;
  height: .5rem;
  margin-inline: .375rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}
.groups[open] > summary .chevron { transform: translateY(2px) rotate(225deg); }
.groups[open] { --edge: #9b5861; }
.groups__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .625rem;
  margin-inline: 1rem;
  padding-block: 1rem;
  border-top: 1px solid #75424a;
}
.groups__list > li:last-child { grid-column: 1 / -1; }
.group-link {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 3rem;
  padding: .625rem;
  border: 1px solid #87515a;
  border-radius: .125rem;
  background: rgb(114 39 51 / 28%);
  font-size: .9375rem;
  font-weight: 600;
  overflow-wrap: anywhere;
  transition: background-color 160ms ease, border-color 160ms ease;
}

/* Os cantos geométricos não recortam o indicador de foco. */
a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}
summary:focus-visible { outline-offset: -5px; }

@media (hover: hover) {
  a.card:hover { --edge: #d68b95; transform: translateY(-2px); }
  a.card:hover .arrow { transform: translateX(3px); }
  summary:hover { color: #ffbec3; }
  .group-link:hover { background: #712c39; border-color: #d68b95; }
}

a.card:active { transform: translateY(1px); --edge: #ff9299; }
summary:active { color: #ff9299; }
.group-link:active { background: #8b3543; }

.footer {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid #65313a;
  text-align: center;
  font-size: .8125rem;
}
.footer__notice { max-width: 19rem; margin-inline: auto; color: #f2b5bb; line-height: 1.7; }
.footer__signature { margin-top: .75rem; color: var(--muted); font-size: .75rem; letter-spacing: .025em; }

/* A base atende 320 px; telas maiores recebem apenas mais espaço/colunas. */
@media (min-width: 22.5rem) {
  .groups__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 24rem) {
  .page { width: min(100% - 2.5rem, 29rem); }
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Com imagens de 300% de altura, 100% → 0% desloca o brilho para baixo.
   As duas extremidades deixam a onda fora das letras, sem salto no reinício. */
@keyframes flame-wave {
  from { background-position: 50% 100%, 50% 100%, 50% 100%, 50% 100%, center; }
  to { background-position: 50% 0%, 50% 0%, 50% 0%, 50% 0%, center; }
}

@keyframes grid-pulse-x {
  from { background-position-x: -160px, -160px, -80px, -80px; }
  to { background-position-x: 320px, 320px, -80px, -80px; }
}

@keyframes grid-pulse-y {
  from { background-position-y: -80px, -80px, 0, 0; }
  to { background-position-y: -80px, -80px, 640px, 640px; }
}

@keyframes grid-pulse-envelope {
  0%, 12%, 100% { opacity: 0; }
  32% { opacity: .65; }
  60% { opacity: .45; }
  82% { opacity: .08; }
}

@keyframes flame-heat {
  0%, 100% {
    text-shadow: 0 -2px 7px rgb(255 99 26 / 20%), 0 3px 16px rgb(224 35 26 / 16%);
  }
  23%, 74% {
    text-shadow: 0 -4px 10px rgb(255 133 38 / 27%), 0 2px 19px rgb(235 43 24 / 22%);
  }
  48%, 87% {
    text-shadow: 0 -1px 6px rgb(255 99 26 / 18%), 0 3px 14px rgb(224 35 26 / 14%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (forced-colors: active) {
  .brand__aleks { color: CanvasText; background: none; text-shadow: none; animation: none; }
  .card::before, .card::after { display: none; }
  .card, .group-link { border: 1px solid ButtonText; }
  .channel__icon { display: none; }
}