/* FarFlow — home dos jogos (/games): vitrine estilo loja de jogos, sob o menu do site. */

/* ── arena: palco 3D + jogo em destaque + trilho ───────── */
.arena {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(760px, calc(100svh - 72px));
  display: flex; align-items: stretch;
  background:
    radial-gradient(60% 70% at 72% 38%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(90% 60% at 50% 120%, #0a1411, transparent 70%),
    linear-gradient(170deg, var(--pine) 0%, var(--ink) 55%, var(--ink-deep) 100%);
  color: var(--paper);
}
#palco { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity 1.2s ease; }
#palco.pronto { opacity: 1; }
/* véu: garante leitura do texto sobre a cena */
.arena-veu { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 92%, transparent) 0%, color-mix(in srgb, var(--ink) 55%, transparent) 38%, transparent 62%),
              linear-gradient(0deg, var(--ink-deep) 0%, transparent 32%); }
.arena::after { /* grade de chão, bem discreta */
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%; z-index: -2; pointer-events: none;
  background-image: linear-gradient(color-mix(in srgb, var(--accent) 12%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(500px) rotateX(62deg); transform-origin: 50% 100%;
  mask-image: linear-gradient(0deg, transparent, #000 30%, transparent 95%);
}

.arena-conteudo { width: 100%; display: grid; grid-template-rows: auto 1fr auto; padding-top: 34px; padding-bottom: 30px; gap: 28px; }
.arena-marca { font-size: 11.5px; letter-spacing: var(--caps); text-transform: uppercase; color: var(--muted-dark); display: flex; align-items: center; gap: 10px; }
.arena-marca .wordmark { text-transform: none; letter-spacing: .005em; font-size: 17px; color: var(--paper); }
.arena-marca i { font-style: normal; opacity: .6; }
.arena-marca i::before { content: "·"; margin-right: 10px; }

.arena-destaque { align-self: center; max-width: 520px; }
.arena-destaque .tag { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: var(--caps); text-transform: uppercase; color: var(--accent); }
.arena-destaque .tag b { font-weight: 600; color: var(--ink); background: var(--accent); border-radius: 4px; padding: 3px 8px; letter-spacing: .1em; }
.arena-destaque h1 { font-size: clamp(64px, 10vw, 128px); line-height: .92; font-weight: 500; letter-spacing: -.025em; margin: 18px 0 18px; color: var(--paper); text-shadow: 0 10px 50px rgba(0, 0, 0, .45); }
.arena-destaque h1 em { font-style: italic; color: var(--accent); }
.arena-destaque .chamada { font-family: var(--display); font-style: italic; font-size: clamp(20px, 2.2vw, 25px); color: var(--accent-soft); line-height: 1.3; }
.arena-destaque .resumo { margin-top: 12px; font-size: 15.5px; line-height: 1.7; color: var(--muted-dark); max-width: 44ch; text-wrap: pretty; }
.arena-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 26px; margin-top: 30px; }
.btn-jogar { display: inline-flex; align-items: center; gap: 11px; border-radius: 999px; padding: 16px 34px; font-size: 15px; font-weight: 600; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); animation: pulsa 2.8s ease-out infinite; }
.btn-jogar svg { flex: none; }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 16px transparent; } }
.arena-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted-dark); }
.arena-meta b { color: var(--paper); font-weight: 600; }

/* trilho: miniaturas dos jogos, como o carrossel de uma loja */
.trilho { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 4px; }
.trilho::-webkit-scrollbar { display: none; }
.trilho-item { flex: 0 0 228px; display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; text-decoration: none; color: var(--paper);
  background: color-mix(in srgb, var(--pine) 55%, transparent); border: 1px solid color-mix(in srgb, var(--pine-line) 80%, transparent); backdrop-filter: blur(8px); transition: border-color .25s, transform .25s; }
.trilho-item:not(.ativo) { opacity: .62; }
.trilho-item.ativo { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 14px 40px -18px color-mix(in srgb, var(--accent) 70%, transparent); }
a.trilho-item:hover { transform: translateY(-2px); }
.trilho-item .capa { width: 64px; height: 44px; border-radius: 7px; }
.trilho-txt b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.trilho-txt small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.trilho-item:not(.ativo) small { color: var(--muted-dark); }

/* ── capas desenhadas (sem marca real, caixas nossas) ──── */
.capa { position: relative; overflow: hidden; display: block; }
.capa-tarjados { background: radial-gradient(80% 90% at 70% 0%, #2a4a40, var(--ink) 70%); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10% 8%; padding: 10% 12%; }
.capa-tarjados i { position: relative; background: #fbfbf8; border-radius: 1px; box-shadow: 0 2px 3px rgba(0,0,0,.35); overflow: hidden; }
.capa-tarjados i::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 22%; background: var(--c, #2E64A0); }
.capa-tarjados i::after { content: ""; position: absolute; inset: auto 0 0 0; height: 9%; background: #c7362f; }
.capa-tarjados i:nth-child(1) { --c: #9580BE; } .capa-tarjados i:nth-child(2) { --c: #2E64A0; } .capa-tarjados i:nth-child(3) { --c: #B0702A; }
.capa-tarjados i:nth-child(4) { --c: #862D45; } .capa-tarjados i:nth-child(5) { --c: #CF992C; } .capa-tarjados i:nth-child(6) { --c: #5B6B7E; }
.capa-tarjados s { position: absolute; left: 4%; right: 4%; top: 48%; height: 2px; background: #ff4b3e; box-shadow: 0 0 8px 2px rgba(255, 75, 62, .55); animation: varre 3s ease-in-out infinite; }
@keyframes varre { 0% { top: 12%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 88%; opacity: 0; } }

/* Princípio do Dia: as letras entram uma a uma (virada estilo palavra do dia) e as casas vazias piscam como cursor */
.capa-palavra i:nth-child(-n+3) { animation: vira 4s ease-in-out infinite; transform-origin: 50% 50%; }
.capa-palavra i:nth-child(2) { animation-delay: .25s; } .capa-palavra i:nth-child(3) { animation-delay: .5s; }
.capa-palavra i:nth-child(4) { animation: cursor 4s steps(1) infinite; }
@keyframes vira { 0%, 8% { transform: rotateX(90deg); opacity: 0; } 16% { transform: rotateX(0); opacity: 1; } 82% { transform: rotateX(0); opacity: 1; } 92%, 100% { transform: rotateX(90deg); opacity: 0; } }
@keyframes cursor { 0%, 25%, 50%, 75% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted-dark) 45%, transparent); } 12%, 37%, 62%, 87% { box-shadow: inset 0 0 0 1.5px var(--accent); } }

/* Pode repetir?: o áudio toca (barras sobem e descem) e a interrogação balança */
.capa-audio .onda { transform-box: fill-box; transform-origin: 50% 50%; animation: onda 1.1s ease-in-out infinite; }
.capa-audio .onda:nth-of-type(2) { animation-delay: -.2s; } .capa-audio .onda:nth-of-type(3) { animation-delay: -.45s; }
.capa-audio .onda:nth-of-type(4) { animation-delay: -.7s; } .capa-audio .onda:nth-of-type(5) { animation-delay: -.3s; } .capa-audio .onda:nth-of-type(6) { animation-delay: -.85s; }
.capa-audio .duvida { transform-box: fill-box; transform-origin: 50% 100%; animation: duvida 2.4s ease-in-out infinite; }
@keyframes onda { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
@keyframes duvida { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-12deg); } 80% { transform: rotate(10deg); } 90% { transform: rotate(-5deg); } }

.capa-palavra { background: linear-gradient(160deg, #20382f, var(--ink)); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5%; padding: 0 9%; align-content: center; }
.capa-palavra i { aspect-ratio: 1; display: grid; place-items: center; border-radius: 3px; font-style: normal; font-family: var(--display); font-weight: 600; color: var(--ink); font-size: 1em; background: var(--accent); }
.capa-palavra i:nth-child(2) { background: #6f9a7f; } .capa-palavra i:nth-child(n+4) { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted-dark) 45%, transparent); }
.trilho .capa-palavra { font-size: 7px; }

/* Pode repetir?: o balão de áudio do ícone do jogo, com o "?" vermelho no meio da onda */
.capa-audio { background: radial-gradient(90% 90% at 50% 15%, #1f3a32, var(--ink) 70%); display: grid; place-items: center; }
.capa-audio svg { width: 58%; height: auto; transform: translateY(-4%); }
.trilho .capa-audio svg { width: 62%; }

.capa-misterio { background: repeating-linear-gradient(135deg, #16292400 0 10px, #ffffff08 10px 20px), linear-gradient(160deg, var(--pine), var(--ink-deep)); display: grid; place-items: center; font-family: var(--display); font-style: italic; font-size: 26px; color: color-mix(in srgb, var(--accent) 70%, transparent); }

/* ── loja: grade de cartuchos ─────────────────────────── */
.loja { padding: 76px 0 96px; }
.sec-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 30px; margin-bottom: 28px; }
.sec-topo h2 { font-size: clamp(26px, 3vw, 34px); }
.sec-topo p { font-size: 14.5px; color: var(--muted-light); max-width: 52ch; }

.grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cartucho { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff; text-decoration: none; color: var(--text);
  box-shadow: 0 0 0 1px var(--paper-line), 0 18px 40px -28px rgba(12, 24, 21, .45);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; transform-style: preserve-3d; will-change: transform; }
a.cartucho:hover { box-shadow: 0 0 0 1px var(--accent), 0 30px 60px -28px rgba(12, 24, 21, .55); }
.cartucho-arte.grande { aspect-ratio: 16 / 10; }
.cartucho-arte.capa-palavra.grande { font-size: 30px; padding: 0 14%; }
.cartucho-arte.capa-misterio.grande { font-size: 88px; }
.cartucho-corpo { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.cartucho-corpo > b { font-family: var(--display); font-size: 24px; font-weight: 500; line-height: 1.1; }
.cartucho-corpo > b em { font-style: italic; color: var(--bronze); }
.selo-novo, .selo-breve { align-self: flex-start; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-radius: 4px; padding: 3px 8px; }
.selo-novo { background: var(--accent); color: var(--ink); }
.selo-breve { color: var(--bronze); box-shadow: inset 0 0 0 1px var(--paper-line); }
.generos { display: flex; flex-wrap: wrap; gap: 6px; }
.generos span { font-size: 11.5px; color: var(--muted-light); background: var(--paper); border-radius: 999px; padding: 3px 10px; }
.cartucho-pe { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--paper-2); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted-light); }
.cartucho-pe .jogar { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink); background: var(--accent); border-radius: 999px; padding: 6px 14px; }
.cartucho.breve .cartucho-arte { filter: saturate(.55); }

@media (max-width: 960px) {
  .arena { min-height: 0; }
  .arena-veu { background: linear-gradient(0deg, var(--ink) 18%, color-mix(in srgb, var(--ink) 70%, transparent) 50%, transparent 78%); }
  .arena-conteudo { padding-top: 22px; gap: 20px; }
  .arena-destaque { padding-top: 30vh; }
  .arena-destaque .resumo { display: none; }
  .btn-jogar { width: 100%; justify-content: center; }
  .grade { grid-template-columns: 1fr; }
  .cartucho { flex-direction: row; }
  .cartucho-arte.grande { aspect-ratio: auto; width: 38%; flex: none; }
  .cartucho-arte.capa-palavra.grande { font-size: 18px; padding: 0 8%; }
  .cartucho-arte.capa-misterio.grande { font-size: 56px; }
  .cartucho-corpo { padding: 14px 16px; }
  .cartucho-corpo > b { font-size: 20px; }
  .cartucho-pe { flex-direction: column; align-items: flex-start; }
  .loja { padding: 48px 0 70px; }
}
@media (max-width: 560px) { .arena-marca i { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .btn-jogar, .capa-tarjados s, .capa-palavra i, .capa-audio .onda, .capa-audio .duvida { animation: none; }
  .capa-tarjados s { top: 48%; }
}