/* ==================================================================
   StreamVerse DS 5 — "Luz de projetor": cor e movimento (carregada por último, depois de skins.css)

   A base (foundation/pages) continua organizada e legível; esta camada devolve a cor e a vida:
   - Cada tema tem uma paleta de apoio (âmbar, coral, verde-água, violeta, azul, rosa, verde, ouro),
     mais escura no Claro (para o texto colorido ficar legível) e mais luminosa nos escuros.
   - A cor marca o que tem significado: cada seção da conta, cada tipo de número, cada fileira, cada jogo.
   - Uma luz ambiente suave no alto das páginas (a "luz do projetor") na cor do tema.
   - Movimento curto e responsivo: o conteúdo entra suave, cartões sobem sob o dedo/mouse, botões
     respondem ao toque. Tudo desligado para quem pede menos movimento no sistema.
   ================================================================== */

/* ------------------------------ 1. paletas: ficam em ds/tokens.css ------------------------------ */

/* Quadrinho de ícone colorido (reutilizável) */
.tone-tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tone, var(--accent)) var(--tint), var(--surface));
  color: color-mix(in srgb, var(--tone, var(--accent)) var(--tone-text-mix), var(--text));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--accent)) 22%, transparent);
}
.tone-tile .icon { width: 18px; height: 18px; }

/* ------------------------------ 2. luz ambiente ------------------------------ */
body { position: relative; isolation: isolate; }
:root:not([data-skin="aurora"]) body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 620px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 75% at 6% -12%, color-mix(in srgb, var(--accent) var(--glow-a), transparent), transparent 72%),
    radial-gradient(45% 65% at 96% -18%, color-mix(in srgb, var(--c2) var(--glow-b), transparent), transparent 70%);
}
:root:not([data-skin="aurora"]) body.has-hero::before { display: none; }

/* ------------------------------ 3. botões e controles ------------------------------ */
.btn { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .16s var(--ease-out), box-shadow .2s ease, filter .2s ease; }
.btn:active:not([disabled]) { transform: scale(.97); }
.btn--primary, .btn-primary {
  background-image: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 72%, var(--c2)) 100%);
  border-color: transparent;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 75%, transparent);
}
.btn--primary:hover, .btn-primary:hover {
  background-image: linear-gradient(135deg, var(--accent-hover) 0%, color-mix(in srgb, var(--accent-hover) 70%, var(--c2)) 100%);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--accent) 80%, transparent);
}
.btn--secondary:hover, .btn--ghost:hover { transform: translateY(-1px); }
.chip { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .16s var(--ease-out); }
.chip:hover { transform: translateY(-1px); }
.chip.is-active, .chip[aria-current="page"], .chip[aria-pressed="true"] { animation: ds-chip-pop .28s var(--ease-spring); }
.input, .select, .textarea { transition: border-color .18s ease, box-shadow .2s ease, background-color .18s ease; }

/* ------------------------------ 4. topo e navegação ------------------------------ */
.main-nav a[aria-current="page"]::after, .tab.is-active::after, .tab[aria-current="page"]::after, .tab[aria-selected="true"]::after {
  background: linear-gradient(90deg, var(--accent), var(--c2));
}
.main-nav a { transition: color .18s ease; }
.header-btn, .icon-btn { transition: background-color .18s ease, transform .16s var(--ease-out), color .18s ease; }
.header-btn:active, .icon-btn:active { transform: scale(.92); }
.header-count { background: linear-gradient(135deg, var(--accent), var(--c2)) !important; color: var(--accent-ink) !important; }
/* Barra de baixo: o item atual ganha uma pílula colorida atrás do ícone */
.bottom-nav a .icon { padding: 3px 14px; box-sizing: content-box; border-radius: 999px; transition: background-color .22s ease, color .22s ease, transform .22s var(--ease-spring); }
.bottom-nav a[aria-current="page"] { color: color-mix(in srgb, var(--accent) var(--tone-text-mix), var(--text)); }
.bottom-nav a[aria-current="page"] .icon { background: color-mix(in srgb, var(--accent) 18%, transparent); transform: translateY(-1px); }
.bottom-nav a[aria-current="page"]::before { display: none !important; }
.bottom-nav a:active .icon { transform: scale(.9); }

/* ------------------------------ 5. cartões e fileiras ------------------------------ */
.card-poster { transition: transform .3s var(--ease-out), box-shadow .3s ease, outline-color .2s ease; }
.card-poster img { transition: transform .6s var(--ease-out); }
@media (hover: hover) {
  .card:hover .card-poster, .card-link:hover .card-poster {
    transform: translateY(-5px);
    outline-color: transparent;
    box-shadow: 0 18px 34px -16px color-mix(in srgb, var(--accent) 60%, rgba(0, 0, 0, .6)), 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .card:hover .card-poster img, .card-link:hover .card-poster img { transform: scale(1.05); }
}
.card-badge--new, :root[data-theme] .card-badge--new { background: color-mix(in srgb, var(--c-teal) 88%, #000); color: #fff; }
:root[data-theme="dark"] .card-badge--new, :root[data-theme="neon"] .card-badge--new { background: var(--c-teal); color: #04221C; }
.card-badge--new::before { background: currentColor; opacity: .85; }
.card-badge--premium, :root[data-theme] .card-badge--premium { background: linear-gradient(135deg, #F7D57E, #C9952E); color: #2A1B02; box-shadow: none; }
.card-badge--points { background: color-mix(in srgb, var(--c-violet) 85%, #000); color: #fff; }
.card-rating .icon { color: #FFC24B; fill: #FFC24B; }

/* Fileiras: cada uma ganha um marcador na sua cor, em rodízio pela paleta */
.row { --row-tone: var(--accent); }
.row:nth-of-type(6n+2) { --row-tone: var(--c2); }
.row:nth-of-type(6n+3) { --row-tone: var(--c-teal); }
.row:nth-of-type(6n+4) { --row-tone: var(--c-violet); }
.row:nth-of-type(6n+5) { --row-tone: var(--c-sky); }
.row:nth-of-type(6n+6) { --row-tone: var(--c-pink); }
.row-title { display: inline-flex; align-items: center; gap: 12px; }
.row-title::before {
  content: "";
  flex: none;
  width: 5px;
  height: .82em;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--row-tone), color-mix(in srgb, var(--row-tone) 55%, transparent));
}
.row-more { color: color-mix(in srgb, var(--row-tone) var(--tone-text-mix), var(--text)); }

/* Rótulos acima dos títulos: ícone em quadrinho colorido */
[class$="-kicker"] .icon, [class*="-kicker "] .icon, .page-kicker .icon {
  width: 26px !important;
  height: 26px !important;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) var(--tint), transparent);
  color: color-mix(in srgb, var(--accent) var(--tone-text-mix), var(--text)) !important;
}
.cine-hero .cine-kicker .icon { background: rgba(255, 255, 255, .14); color: #fff !important; }
:root[data-theme="light"] .cine-hero .cine-kicker .icon { background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent-text) !important; }

/* ------------------------------ 6. topos das páginas internas ------------------------------ */
/* Antes lisos; agora com um véu de cor do tema (legível em qualquer tema, texto na cor normal) */
:is(.eco-hero, .ms-hero, .bp-hero, .tournament-hero, .pi-hero, .st-hero, .clubs-hero,
    .store-hero, .fx-hero, .e3-hero, .nt-hero, .acc-hero, .dir-hero, .wallet-hero, .staff-hero, .ss-hero,
    .rs-hero, .rec-hero, .pv-hero, .gift-hero, .coin-hero, .gr-hero, .collection-hero, .sp-hero, .np-hero,
    .gm-hero, .tv-hero) {
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) calc(var(--tint) + 6%), transparent), transparent 60%),
    radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--c2) var(--tint), transparent), transparent 60%),
    var(--surface) !important;
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line)) !important;
}
/* Números das carteiras e saldos em frase normal */
.eco-balance small, .eco-balance span, .eco-stat small, .eco-stat span, .eco-card h3, .eco-label { letter-spacing: 0 !important; text-transform: none !important; }

/* Cartões de número: cada um com sua cor */
.eco-stat, .acc-card, .stat-card { position: relative; overflow: hidden; }
.eco-stat::after, .acc-card::after, .stat-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--card-tone, var(--accent)), color-mix(in srgb, var(--card-tone, var(--accent)) 30%, transparent));
}
:is(.eco-stat, .acc-card, .stat-card):nth-child(6n+1) { --card-tone: var(--accent); }
:is(.eco-stat, .acc-card, .stat-card):nth-child(6n+2) { --card-tone: var(--c-violet); }
:is(.eco-stat, .acc-card, .stat-card):nth-child(6n+3) { --card-tone: var(--c-teal); }
:is(.eco-stat, .acc-card, .stat-card):nth-child(6n+4) { --card-tone: var(--c-coral); }
:is(.eco-stat, .acc-card, .stat-card):nth-child(6n+5) { --card-tone: var(--c-sky); }
:is(.eco-stat, .acc-card, .stat-card):nth-child(6n+6) { --card-tone: var(--c-pink); }
.eco-stat-ico, .eco-tile-ico {
  background: color-mix(in srgb, var(--card-tone, var(--accent)) var(--tint), var(--surface)) !important;
  color: color-mix(in srgb, var(--card-tone, var(--accent)) var(--tone-text-mix), var(--text)) !important;
  box-shadow: none !important;
}
.eco-tile { transition: border-color .18s ease, background-color .18s ease, transform .2s var(--ease-out); }
.eco-tile:hover { transform: translateY(-2px); }
.eco-tile:nth-child(6n+1) { --card-tone: var(--accent); }
.eco-tile:nth-child(6n+2) { --card-tone: var(--c-violet); }
.eco-tile:nth-child(6n+3) { --card-tone: var(--c-teal); }
.eco-tile:nth-child(6n+4) { --card-tone: var(--c-coral); }
.eco-tile:nth-child(6n+5) { --card-tone: var(--c-sky); }
.eco-tile:nth-child(6n+6) { --card-tone: var(--c-pink); }
.acc-card { transition: transform .2s var(--ease-out), border-color .18s ease; }
@media (hover: hover) { .acc-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--card-tone, var(--accent)) 40%, var(--line)); } }
.acc-card .acc-big { color: var(--text); }
.acc-card h3 { color: color-mix(in srgb, var(--card-tone, var(--accent)) var(--tone-text-mix), var(--text)); }

/* Barras de progresso: degradê da cor do tema */
.progress > i, .eco-meter > i, .xp-fill, .bp-track-fill, .ss-meter i, .card-progress i, .title-progress i, .bp-mission-progress i { background-image: linear-gradient(90deg, var(--accent), var(--c2)); }

/* ------------------------------ 7. conta: menu com cor por seção ------------------------------ */
.account-nav-section:not([data-tone]) { --tone: var(--accent); }
.account-nav-section[data-tone] .account-nav-section-label .tone-dot { background: var(--tone); }
.account-nav-section p { display: flex; align-items: center; gap: 8px; }
.account-nav-section p::before {
  content: "";
  display: inline-block;
  flex: none;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--tone);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 18%, transparent);
}
.account-nav a { transition: background-color .18s ease, color .18s ease, transform .18s var(--ease-out); }
.account-nav a .icon { color: color-mix(in srgb, var(--tone) var(--tone-text-mix), var(--text)); transition: transform .2s var(--ease-spring); }
.account-nav a:hover { background: color-mix(in srgb, var(--tone) 9%, transparent); }
.account-nav a:hover .icon { transform: scale(1.12); }
.account-nav a[aria-current="page"], .account-nav a.is-active {
  background: color-mix(in srgb, var(--tone) 15%, transparent) !important;
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--tone) !important;
}
/* Cartão do usuário no alto do menu */
.account-user {
  position: relative;
  overflow: hidden;
  padding: 14px !important;
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%),
    radial-gradient(100% 120% at 100% 100%, color-mix(in srgb, var(--c2) 20%, transparent), transparent 60%),
    var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}
/* Barra que abre a gaveta no celular: ícone em quadrinho da cor da seção atual */
.account-nav-toggle { box-shadow: 0 6px 18px -14px color-mix(in srgb, var(--accent) 70%, transparent); }
.account-nav-toggle-menu {
  padding: 8px;
  box-sizing: content-box;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) var(--tint), transparent);
  color: color-mix(in srgb, var(--accent) var(--tone-text-mix), var(--text)) !important;
}
.account-nav-toggle-text small { color: color-mix(in srgb, var(--accent) var(--tone-text-mix), var(--muted)); font-weight: 600; }
@media (max-width: 1000px) {
  .account-nav-head {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--c2) 10%, transparent)),
      var(--surface) !important;
  }
  :root[data-theme] .account-nav { box-shadow: 24px 0 60px -20px rgba(0, 0, 0, .45); }
}

/* ------------------------------ 8. "Quem está assistindo?" ------------------------------ */
/* Sempre uma sala escura com luz colorida, em qualquer tema: o texto branco nunca some */
.profiles-gate, :root[data-theme] .profiles-gate {
  background:
    radial-gradient(60% 50% at 15% 10%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%),
    radial-gradient(55% 45% at 90% 20%, color-mix(in srgb, var(--c-violet) 34%, transparent), transparent 70%),
    radial-gradient(70% 50% at 50% 110%, color-mix(in srgb, var(--c-teal) 26%, transparent), transparent 70%),
    #0E0D12 !important;
  color: #F4F1EC !important;
}
.profiles-gate :is(h1, h2, strong, .profile-pick-name, .profiles-title) { color: #fff !important; }
.profiles-gate :is(p, small, .profiles-sub, .profiles-lead) { color: rgba(244, 241, 236, .78) !important; }
.profiles-gate [class$="-kicker"], .profiles-gate [class*="-kicker "] { color: rgba(244, 241, 236, .85) !important; }
.profiles-gate .btn--ghost, .profiles-gate .btn--outline, .profiles-gate .btn--secondary {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .35) !important;
  background: rgba(255, 255, 255, .06) !important;
}
.profiles-gate .btn--ghost:hover, .profiles-gate .btn--outline:hover { background: rgba(255, 255, 255, .12) !important; }
.profiles-gate .profile-pick { transition: transform .25s var(--ease-out); }
.profiles-gate .profile-pick:hover { transform: translateY(-4px); }
.profiles-gate .profile-pick:hover .profile-pick-initials, .profiles-gate .profile-pick:focus-visible .profile-pick-initials,
.profiles-gate .profile-pick:hover .profile-pick-avatar, .profiles-gate .profile-pick:focus-visible .profile-pick-avatar {
  box-shadow: 0 0 0 3px #fff, 0 16px 40px -12px color-mix(in srgb, var(--accent) 70%, transparent) !important;
}
.profiles-gate .profile-pick-initials { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, #1A1A22), color-mix(in srgb, var(--c-violet) 60%, #1A1A22)) !important; color: #fff !important; }
.profiles-gate .profile-pick--add .profile-pick-avatar, .profiles-gate [class*="add"] .profile-pick-avatar {
  background: rgba(255, 255, 255, .06) !important;
  border: 2px dashed rgba(255, 255, 255, .35) !important;
  color: #fff !important;
}
.profiles-gate .profile-pick-name, .profiles-gate .profile-pick span:last-child { color: rgba(255, 255, 255, .9) !important; }

/* ------------------------------ 10. jogos (/jogos) ------------------------------ */
/* Fliperama: o topo é um painel de luz colorida (escuro em qualquer tema), cada jogo tem capa ilustrada
   na cor da sua categoria e os cartões ficam em duas colunas no celular. */
.games-hero, :root[data-theme] .games-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(22px, 4vw, 36px);
  border: 0;
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--c-violet) 75%, transparent), transparent 70%),
    radial-gradient(60% 80% at 100% 10%, color-mix(in srgb, var(--c-pink) 65%, transparent), transparent 70%),
    radial-gradient(70% 80% at 60% 120%, color-mix(in srgb, var(--c-teal) 55%, transparent), transparent 70%),
    #14102A;
  box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--c-violet) 80%, transparent);
}
.games-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .35;
  background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(160deg, transparent 20%, #000 80%);
  mask-image: linear-gradient(160deg, transparent 20%, #000 80%);
}
.games-hero::after { display: none; }
.games-hero-kicker, :root[data-theme] .games-hero-kicker {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .14) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.games-hero-kicker .icon { background: linear-gradient(135deg, var(--c-amber), var(--c-pink)) !important; color: #fff !important; border-radius: 999px !important; }
.games-hero-title { color: #fff; font-size: clamp(1.9rem, 6vw, 3rem); line-height: 1; letter-spacing: -.01em; max-width: 14ch; }
.games-hero-sub { color: rgba(255, 255, 255, .84); }
.games-hero-actions .btn--primary { background: #fff !important; background-image: none !important; color: #1B1340 !important; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); }
.games-hero-actions .btn--secondary { background: rgba(255, 255, 255, .12) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .28) !important; }
.games-hero-stats li {
  background: rgba(255, 255, 255, .1) !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  border-radius: 14px !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
}
.games-hero-stats strong { color: #fff; font-family: var(--font-display); }
.games-hero-stats span { color: rgba(255, 255, 255, .78); }
.games-hero-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.gh-float { position: absolute; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); }
.gh-float .icon { width: 26px; height: 26px; }
.gh-f1 { right: 6%; top: 14%; transform: rotate(12deg); background: color-mix(in srgb, var(--c-pink) 55%, transparent); }
.gh-f2 { right: 22%; top: 8%; width: 40px; height: 40px; transform: rotate(-10deg); background: color-mix(in srgb, var(--c-amber) 55%, transparent); }
.gh-f3 { right: 12%; bottom: 14%; width: 44px; height: 44px; transform: rotate(-6deg); background: color-mix(in srgb, var(--c-teal) 55%, transparent); }
.gh-f4 { right: 30%; bottom: 22%; width: 36px; height: 36px; transform: rotate(14deg); background: color-mix(in srgb, var(--c-violet) 60%, transparent); }
.gh-f2 .icon, .gh-f4 .icon { width: 18px; height: 18px; }
@media (max-width: 819px) { .gh-f2, .gh-f4 { display: none; } .gh-f1 { top: 8%; right: 5%; width: 44px; height: 44px; } .gh-f3 { display: none; } }
/* No computador os números ocupam a direita: os ícones ficam entre o texto e os números */
@media (min-width: 820px) {
  .gh-f1 { right: auto; left: 52%; top: 16%; }
  .gh-f2 { right: auto; left: 57%; top: auto; bottom: 18%; }
  .gh-f3 { right: auto; left: 46%; bottom: 10%; }
  .gh-f4 { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .gh-float { animation: gh-bob 5s ease-in-out infinite; }
  .gh-f2 { animation-delay: -1.2s; } .gh-f3 { animation-delay: -2.4s; } .gh-f4 { animation-delay: -3.6s; }
}
@keyframes gh-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* Filtro por categoria: pílulas na cor de cada categoria */
.games-tab:not([data-tone]) { --tone: var(--accent); }
.games-tab, :root[data-theme] .games-tab {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--line));
  background: var(--surface);
  color: var(--text);
  transition: background-color .18s ease, transform .16s var(--ease-out), border-color .18s ease;
}
.games-tab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
.games-tab:first-child::before { background: linear-gradient(135deg, var(--accent), var(--c2)); }
.games-tab:hover { transform: translateY(-1px); border-color: var(--tone); }
.games-tab .count { background: color-mix(in srgb, var(--tone) 14%, transparent); color: color-mix(in srgb, var(--tone) var(--tone-text-mix), var(--text)); }
.games-tab.is-active, .games-tab[aria-current="page"] {
  background: color-mix(in srgb, var(--tone) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--tone) 60%, transparent);
  color: color-mix(in srgb, var(--tone) var(--tone-text-mix), var(--text));
}

/* Grade e cartões */
.games-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 16px; }
@media (max-width: 560px) { .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.game-card:not([data-tone]) { --tone: var(--accent); }
.game-card, :root[data-theme] .game-card {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
  transition: transform .25s var(--ease-out), box-shadow .25s ease, border-color .2s ease;
}
@media (hover: hover) {
  .game-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tone) 50%, var(--line)); box-shadow: 0 18px 36px -20px color-mix(in srgb, var(--tone) 70%, transparent); }
  .game-card:hover .game-art { transform: scale(1.06) rotate(-2deg); }
}
.game-cover, :root[data-theme] .game-cover {
  position: relative;
  display: grid;
  place-items: center;
  height: auto;
  aspect-ratio: 16 / 10;
  border-bottom: 0;
  box-shadow: none;
  --ga-a: color-mix(in srgb, var(--tone) 55%, #fff);
  --ga-b: color-mix(in srgb, var(--tone) 70%, #000);
  --ga-d: color-mix(in srgb, var(--tone) 35%, #0B0A10);
  background:
    radial-gradient(80% 90% at 20% 10%, color-mix(in srgb, var(--tone) 70%, #fff), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--tone) 92%, #fff), color-mix(in srgb, var(--tone) 70%, #120F22)) !important;
  overflow: hidden;
}
.game-cover::before { display: none; }
.game-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .25) 1px, transparent 1.3px);
  background-size: 14px 14px;
  opacity: .5;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 60%);
  mask-image: linear-gradient(200deg, #000, transparent 60%);
}
.game-art { position: relative; z-index: 1; width: 78%; max-width: 220px; height: auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .22)); transition: transform .35s var(--ease-spring); }
.game-art .ga-w { fill: #fff; }
.game-art .ga-a { fill: var(--ga-a); }
.game-art .ga-b { fill: var(--ga-b); }
.game-art .ga-d { fill: var(--ga-d); }
.game-art .ga-w-stroke { stroke: #fff; }
.game-art .ga-a-stroke { stroke: var(--ga-a); }
.game-art .ga-b-stroke { stroke: var(--ga-b); }
.game-art .ga-d-stroke { stroke: var(--ga-d); }
.game-cover-points, :root[data-theme] .game-cover-points {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(15, 12, 30, .55);
  color: #fff;
  box-shadow: none;
  font-size: .75rem;
  font-weight: 700;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.game-cover-points .icon { color: #FFD35A; }
.game-card-body { padding: 12px 14px 4px; gap: 8px; }
.game-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  color: color-mix(in srgb, var(--tone) var(--tone-text-mix), var(--text));
}
.game-cat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.game-out { font-size: .75rem; font-weight: 600; color: var(--muted); }
.game-card-title { font-size: clamp(1rem, 3.6vw, 1.2rem); font-weight: var(--display-weight); letter-spacing: var(--display-track); }
.game-card-text { font-size: .875rem; -webkit-line-clamp: 2; }
.game-daily-label { letter-spacing: 0 !important; font-size: .75rem; }
.game-daily-count { font-size: .8125rem; }
.game-daily .progress > i { background-image: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 50%, var(--c2))) !important; }
.game-card-foot { padding: 10px 14px 14px; }
.game-card.is-out .game-cover { filter: saturate(.35); }
@media (max-width: 560px) {
  .game-card-text { display: none; }
  .game-card-body { padding: 10px 12px 2px; }
  .game-card-foot { padding: 8px 12px 12px; }
  .game-daily-head { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* ------------------------------ 11. perfil público (/@usuario) ------------------------------ */
/* Capa padrão em luz colorida (quando não há imagem), números cada um na sua cor, nível com degradê
   e títulos dos painéis com marcador colorido. */
.pf-cover:not(.has-image) {
  background:
    radial-gradient(60% 120% at 0% 0%, color-mix(in srgb, var(--accent) 85%, #fff), transparent 70%),
    radial-gradient(55% 120% at 55% 0%, color-mix(in srgb, var(--c2) 75%, #fff), transparent 70%),
    radial-gradient(50% 120% at 100% 0%, color-mix(in srgb, var(--c-violet) 70%, #fff), transparent 70%),
    linear-gradient(120deg, var(--accent), var(--c-violet)) !important;
}
.pf-cover-shape { background: rgba(255, 255, 255, .18) !important; }
.pf-avatar.has-ring::before { filter: saturate(1.2); }
.pf-avatar-level { background: linear-gradient(135deg, var(--accent), var(--c2)) !important; color: var(--accent-ink) !important; }
.pf-level { background: color-mix(in srgb, var(--accent) 6%, var(--surface)) !important; border-color: color-mix(in srgb, var(--accent) 22%, var(--line)) !important; }
.pf-bar > i, .pf-bar span, .pf-level .pf-bar i { background: linear-gradient(90deg, var(--accent), var(--c2)) !important; }
.pf-stats li:nth-child(6n+1) { --tone: var(--c-coral); }
.pf-stats li:nth-child(6n+2) { --tone: var(--c-violet); }
.pf-stats li:nth-child(6n+3) { --tone: var(--c-teal); }
.pf-stats li:nth-child(6n+4) { --tone: var(--c-amber); }
.pf-stats li:nth-child(6n+5) { --tone: var(--c-sky); }
.pf-stats li:nth-child(6n+6) { --tone: var(--c-pink); }
.pf-stat {
  background: color-mix(in srgb, var(--tone, var(--accent)) 8%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--tone, var(--accent)) 24%, var(--line)) !important;
  transition: transform .2s var(--ease-out), border-color .18s ease;
}
.pf-stat .icon {
  width: 30px !important;
  height: 30px !important;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 9px;
  background: color-mix(in srgb, var(--tone, var(--accent)) var(--tint), transparent);
  color: color-mix(in srgb, var(--tone, var(--accent)) var(--tone-text-mix), var(--text)) !important;
}
.pf-stat strong { color: color-mix(in srgb, var(--tone, var(--accent)) var(--tone-text-mix), var(--text)); }
@media (hover: hover) { .pf-stat.is-link:hover { transform: translateY(-2px); border-color: var(--tone) !important; } }
.pf-tabs a.is-active, .pf-tabs a[aria-current] { background-image: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--c2))) !important; color: var(--accent-ink) !important; border-color: transparent !important; }
.pf-card:not([data-tone]) { --tone: var(--accent); }
.pf-layout .pf-card:nth-of-type(5n+2) { --tone: var(--c-violet); }
.pf-layout .pf-card:nth-of-type(5n+3) { --tone: var(--c-teal); }
.pf-layout .pf-card:nth-of-type(5n+4) { --tone: var(--c-sky); }
.pf-layout .pf-card:nth-of-type(5n+5) { --tone: var(--c-pink); }
.pf-card-title { display: flex; align-items: center; gap: 10px; }
.pf-card-title::before {
  content: "";
  flex: none;
  width: 5px;
  height: .9em;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--tone), color-mix(in srgb, var(--tone) 45%, transparent));
}
.pf-kicker { color: color-mix(in srgb, var(--tone) var(--tone-text-mix), var(--text)) !important; }
.pf-info .icon, .pf-about .icon, .pf-activity .icon, .pf-rank .icon { color: color-mix(in srgb, var(--tone) var(--tone-text-mix), var(--text)) !important; }
.pf-complete-pct { color: color-mix(in srgb, var(--accent) var(--tone-text-mix), var(--text)); }

/* Foto/avatares da conta: o escolhido ganha anel colorido */
.acc-avatar-option input:checked + span, .avatar-option.is-selected { box-shadow: 0 0 0 3px var(--accent), 0 10px 24px -12px color-mix(in srgb, var(--accent) 70%, transparent) !important; border-color: transparent !important; }
.avatar-option, .acc-avatar-option span { transition: transform .2s var(--ease-spring), box-shadow .2s ease; }
.avatar-option:hover, .acc-avatar-option:hover span { transform: translateY(-2px) scale(1.03); }
.avatar-option img { border-radius: 22%; }

/* ------------------------------ 9. movimento de entrada ------------------------------ */
@keyframes ds-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* (ds-pop é o da foundation, usado nos menus: este tem outro nome para não sobrescrevê-lo) */
@keyframes ds-chip-pop { 0% { transform: scale(.94); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  #conteudo > * { animation: ds-rise .5s var(--ease-out) both; }
  #conteudo > *:nth-child(2) { animation-delay: .05s; }
  #conteudo > *:nth-child(3) { animation-delay: .1s; }
  #conteudo > *:nth-child(4) { animation-delay: .15s; }
  #conteudo > *:nth-child(n+5) { animation-delay: .2s; }
  .row .card { animation: ds-rise .45s var(--ease-out) both; }
  .row .card:nth-child(2) { animation-delay: .04s; }
  .row .card:nth-child(3) { animation-delay: .08s; }
  .row .card:nth-child(4) { animation-delay: .12s; }
  .row .card:nth-child(5) { animation-delay: .16s; }
  .row .card:nth-child(n+6) { animation-delay: .2s; }
  .catalog-grid .card, .grid .card { animation: ds-rise .45s var(--ease-out) both; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .chip, .card-poster, .card-poster img, .eco-tile, .acc-card, .account-nav a, .bottom-nav a .icon { transition: none !important; }
  .btn:hover, .btn:active, .chip:hover, .eco-tile:hover, .acc-card:hover { transform: none !important; }
  .chip.is-active { animation: none !important; }
}

/* ------------------------------ 12. movimento de resposta ------------------------------ */
/* Só o que responde a uma ação: abrir, trocar de aba, errar, carregar, confirmar. Nada se mexe sozinho. */
@keyframes ds-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes ds-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes ds-sheen { from { background-position: -150% 0; } to { background-position: 250% 0; } }
@keyframes ds-bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes ds-check { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  /* "Não achou?", FAQ e outros blocos que abrem: o conteúdo desce no lugar e a seta gira */
  details[open] > :not(summary) { animation: ds-open .28s var(--ease-out) both; }
  details > summary .icon:last-child:not(:first-child) { transition: transform .22s var(--ease-out); }
  details[open] > summary .icon:last-child:not(:first-child) { transform: rotate(180deg); }
  /* Abas: o painel novo entra suave */
  [role="tabpanel"]:not([hidden]), .tab-panel.is-active, .tabs-panel.is-active { animation: ds-rise .32s var(--ease-out) both; }
  [role="tab"][aria-selected="true"] { animation: ds-chip-pop .26s var(--ease-spring); }
  /* Erro de formulário: o campo treme uma vez e a mensagem aparece */
  .field.has-error .input, .field.has-error .select, .field.has-error .textarea { animation: ds-shake .38s ease both; }
  .error-text, .field-error { animation: ds-open .24s var(--ease-out) both; }
  /* Avisos rápidos: o ícone dá um pulo quando o aviso chega */
  .toast.is-visible .toast-icon { animation: ds-chip-pop .36s var(--ease-spring) .06s both; }
  /* Carregando: brilho correndo sobre o bloco ocupado */
  [aria-busy="true"]:not(.btn) { position: relative; }
  [aria-busy="true"]:not(.btn)::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--accent) 12%, transparent) 50%, transparent 70%) no-repeat;
    background-size: 60% 100%;
    animation: ds-sheen 1.1s linear infinite;
  }
  /* Contadores (sino, carrinho, mensagens) pulam quando mudam: o JS põe .is-bumped */
  .is-bumped { animation: ds-bump .45s var(--ease-spring); }
  /* Seleção de opção (radio/checkbox em cartão) */
  .cm-method:has(input:checked), .option-card:has(input:checked) { transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
  /* Copiado / salvo: botão confirma com um pulso */
  .btn.is-copied, .btn.is-done { animation: ds-chip-pop .3s var(--ease-spring); }
}
@media (prefers-reduced-motion: reduce) {
  details[open] > :not(summary), [role="tabpanel"], .error-text, .toast-icon { animation: none !important; }
  .field.has-error .input, .field.has-error .select, .field.has-error .textarea { animation: none !important; }
  [aria-busy="true"]::after { animation: none !important; }
}

/* ------------------------------ 13. estados vazios (um visual só) ------------------------------ */
/* O componente empty-state (.empty) e os vazios antigos de cada área (.eco-empty, .rl-empty, .tv-empty)
   passam a ter o mesmo quadro: borda tracejada suave, luz da cor do tema no alto,
   ícone num quadrinho colorido e texto centralizado. */
.empty, .eco-empty, .rl-empty, .tv-empty {
  position: relative;
  border: 1px dashed color-mix(in srgb, var(--tone, var(--accent)) 30%, var(--border-strong)) !important;
  border-radius: var(--r-panel, 12px) !important;
  background:
    radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--tone, var(--accent)) 9%, transparent), transparent 70%),
    var(--surface) !important;
}
.empty-icon, .eco-empty-ico {
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--tone, var(--accent)) var(--tint, 11%), var(--surface-2)) !important;
  color: color-mix(in srgb, var(--tone, var(--accent)) var(--tone-text-mix, 82%), var(--text)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--accent)) 24%, transparent);
}
.empty h3, .eco-empty strong { color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .empty, .eco-empty, .rl-empty, .tv-empty { animation: ds-rise .4s var(--ease-out) both; }
  .empty-icon, .eco-empty-ico { animation: ds-chip-pop .5s var(--ease-spring) .08s both !important; }
}

/* ------------------------------ 14. rolagem leve no celular (alpha.107) ------------------------------
   Desfoque de fundo (backdrop-filter) obriga o celular a redesenhar e desfocar o que passa por trás a cada
   quadro da rolagem: no topo fixo, na barra de baixo e nos selos de cada cartão. Em tela de toque ele sai
   e os fundos ficam um pouco mais sólidos para o texto continuar legível. No computador nada muda. */
@media (hover: none) and (pointer: coarse), (max-width: 760px) {
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .site-header.is-solid, .site-header.is-scrolled { background: var(--surface); }
  .bottom-nav { background: var(--surface); }
  .cine-ghost, .title-ghost { background: color-mix(in srgb, var(--surface) 82%, transparent); }
}