/* Cyber Room (PLAT-260) — tela de ENTRADA. Dono 2026-10-07: SEM blur, SEM imagem — fundo padrão; o botão
   "Entrar na Cyber Room" é IGUAL ao `.cs-gate-tag` do véu "disponível em breve" (pill accent), mas clicável.
   Cores rose via vars [data-product="hunt"] (--accent/--accent-soft). Geometria = coluna de conteúdo. */
.cyber-splash {
  position: fixed; top: 0; height: 100dvh; left: var(--sidebar-w, 244px); right: 0; z-index: 55;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
body.nav-open .cyber-splash { left: 0; }
/* Trava o scroll da PÁGINA inteira na Cyber Room (entrada E game): o `.shell` tem min-height:100vh (vh estático
   > viewport mobile por causa da barra de URL) → a entrada dava scroll vertical. dvh + overflow:hidden encaixa. */
html:has(main[data-page="cyber_room"]), body:has(main[data-page="cyber_room"]) { height: 100dvh; overflow: hidden; }
.shell:has(main[data-page="cyber_room"]) { min-height: 100dvh; height: 100dvh; overflow: hidden; }

/* Botão = .cs-gate-tag (mesma linguagem do véu), clicável. */
.cyber-enter {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; cursor: pointer; text-decoration: none;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--accent);
  border-radius: 999px; padding: 13px 24px; font-weight: 650; font-size: 15.5px; letter-spacing: .01em;
  box-shadow: 0 14px 48px rgba(0, 0, 0, .5), 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent);
  transition: background .15s ease, transform .15s ease;
}
/* mantém a cor do texto no hover: o `a:hover{color:--accent-2}` global (app.css) senão escurecia e sumia no botão */
.cyber-enter:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); color: var(--text); }
.cyber-enter svg { width: 18px; height: 18px; stroke: var(--accent); flex: 0 0 auto; }

/* Estados prep/paywall: card central no fundo padrão (sem blur). */
.cyber-card { text-align: center; max-width: 440px; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cyber-title { font-weight: 700; font-size: 20px; color: var(--text); }
.cyber-sub { color: var(--text-2, var(--muted)); font-size: 14px; line-height: 1.5; margin: 0 0 6px; }

/* O game preenche a coluna de conteúdo — como o escritório do cockpit (IN-FLOW, não `position:fixed`: fixed
   não estica um iframe, que é replaced element, e o header não fica no topo do viewport por causa do padding
   do .main). O grid já exclui o menu (col 1) e o header (sticky acima). Edge-to-edge: zera o padding do main/
   content nesta página. z-index ACIMA dos widgets FLUTUANTES (contato z-44, bit z-1200); o menu (sticky, com
   contexto de empilhamento próprio z-46) e o header SOBEM acima do game só aqui p/ seguirem clicáveis — inclui
   o botão de encolher menu, que espeta ~13px na coluna de conteúdo. */
/* 100dvh (não vh): no celular o vh inclui a barra de URL → a página passava a tela e dava scroll vertical.
   dvh = viewport dinâmico → o game encaixa exato, sem scroll. */
main[data-page="cyber_room"] { padding: 0; height: 100dvh; overflow: hidden; }
main[data-page="cyber_room"] .appbar { margin: 0; z-index: 1301; }
main[data-page="cyber_room"] .content { padding: 0; max-width: none; overflow: hidden; }
.cyber-frame { display: block; position: relative; z-index: 1300;
  width: 100%; height: calc(100dvh - 60px); border: 0; background: #000; }  /* 60px = .appbar */
.shell:has(main[data-page="cyber_room"]) .sidebar { z-index: 1301; }
/* Mini-console do bounty (#omni-mini-console, rodapé fixo) por cima do game — senão o iframe z-1300 o esconde.
   É OVERLAY (não achata o jogo: o iframe fica full atrás); fica no rodapé, longe dos controles de mídia do game
   (que vivem no topo). A barra expande/recolhe o drawer normalmente (JS do mini-console). z-1302 > game 1300. */
.shell:has(main[data-page="cyber_room"]) ~ #omni-mini-console { z-index: 1302; }

/* ─────────── Tela de ENTRADA (hero): retrato real do ambiente + convite p/ networking (dono 2026-10-08) ─────────── */
.cr-hero { overflow: hidden; }
.cr-hero-bg {
  position: absolute; inset: 0;
  background: #06070a url("/console/static/img/cyber-room-banner.jpg") center 46% / cover no-repeat;
  transform: scale(1.03); filter: saturate(1.05);
}
/* scrim: escurece pro texto legível + um brilho rose sutil + vinheta; o topo some (corta o rótulo do banner) */
.cr-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 58%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, #06070a 78%, transparent) 0%, color-mix(in srgb, #06070a 30%, transparent) 34%, color-mix(in srgb, #06070a 62%, transparent) 72%, #06070a 100%);
}
.cr-hero-inner {
  position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 32px 28px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.cr-eyebrow {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; max-width: 100%;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink, var(--accent)); text-align: center; margin-bottom: 16px;
}
.cr-live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); animation: cr-pulse 1.8s ease-out infinite; }
@keyframes cr-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 65%, transparent); }
  70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.cr-title {
  margin: 0 0 14px; font-size: clamp(29px, 5vw, 46px); line-height: 1.05; font-weight: 750; letter-spacing: -0.02em;
  color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
}
.cr-sub { margin: 0 0 26px; font-size: clamp(14.5px, 2.4vw, 16.5px); line-height: 1.6; color: rgba(255, 255, 255, .82);
  max-width: 540px; text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }
/* CTA do hero = pill rose PREENCHIDA (mais convidativa que a outline) */
.cr-cta {
  background: var(--accent); color: #fff; border-color: transparent; font-size: 16px; padding: 15px 30px;
  box-shadow: 0 18px 50px color-mix(in srgb, var(--accent) 40%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
}
.cr-cta:hover { background: color-mix(in srgb, #fff 8%, var(--accent)); transform: translateY(-2px); color: #fff; }
.cr-cta svg { stroke: #fff; }
.cr-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.cr-pills span {
  font-size: 12px; color: rgba(255, 255, 255, .78); padding: 6px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(6px);
}
/* contador X/50 no eyebrow + estado "na fila" (aguardando vaga) */
.cr-count { font-variant-numeric: tabular-nums; }
/* contador de participantes — ABAIXO das pills, destacado (dono 2026-10-09) */
.cr-occupancy {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; padding: 9px 18px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, .05));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: #fff; font-size: 14.5px; font-weight: 650; letter-spacing: .01em; font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 22%, transparent);
}
.cr-occupancy .cr-live { width: 8px; height: 8px; }
.cr-occupancy:not(:has(.cr-count:not(:empty))) { display: none; }
.cyber-enter.is-waiting { opacity: .72; cursor: progress; }
@media (max-width: 560px) { .cr-hero-inner { padding: 24px 18px; } .cr-pills span:last-child { display: none; } .cr-eyebrow { letter-spacing: .08em; font-size: 10.5px; } }