/* Oklaworks® System — OklaPlay / Arcade — estilos compartilhados */
/* Fontes (Syne/DM Sans/JetBrains Mono) carregadas via <link> no <head> com preconnect — ver includes/layout_topo.php */

:root{
  --g900:#18181B;--g800:#27272A;--g700:#3F3F46;--g600:#52525B;--g500:#71717A;
  --g400:#A1A1AA;--g300:#D1D1D6;--g200:#E4E4E7;--g100:#F4F4F5;--g50:#FAFAFA;--w:#FFFFFF;
  --r:8px;--rl:12px;
  --s1:0 1px 3px rgba(0,0,0,.05);--s2:0 4px 16px rgba(0,0,0,.08);--s3:0 12px 32px rgba(0,0,0,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--g50);color:var(--g900);font-family:'DM Sans',sans-serif;overflow-x:hidden}
h1,h2,h3,.titulo{font-family:'Syne',sans-serif;font-weight:800}
code,.mono,.pontos{font-family:'JetBrains Mono',monospace}
a{color:inherit}

.arcade-shell{min-height:100vh}

/* Sidebar realmente fixa (position:fixed), fora do fluxo — elimina qualquer gap/barra
   causado por combinações de flex + sticky. O conteúdo principal reserva o espaço com margin-left. */
.arcade-sidebar{
  width:240px;background:var(--g900);color:var(--w);
  padding:24px 16px;position:fixed;top:0;left:0;bottom:0;overflow-y:auto;z-index:15;
}
.arcade-sidebar .marca{font-family:'Syne',sans-serif;font-weight:800;font-size:18px;margin-bottom:24px;display:flex;align-items:center;gap:8px;color:var(--w)}
.marca-texto{display:flex;flex-direction:column;line-height:1.1}
.marca-texto small{font-family:'DM Sans',sans-serif;font-weight:500;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--g400)}
.arcade-sidebar a{color:var(--g300);text-decoration:none;display:block;padding:10px 12px;border-radius:var(--r);font-size:14px;margin-bottom:4px;transition:background .12s,color .12s}
.arcade-sidebar a:hover,.arcade-sidebar a.ativo{background:var(--g800);color:var(--w)}
.arcade-sidebar .categoria{color:var(--g500);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin:18px 12px 6px}

.arcade-main{margin-left:240px;min-height:100vh;display:flex;flex-direction:column}

.arcade-conteudo{padding:32px;max-width:1100px;flex:1 0 auto;width:100%;margin:0 auto}

.arcade-rodape{
  border-top:1px solid var(--g200);background:var(--w);padding:22px 32px;
}
.arcade-rodape-topo{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:1100px;margin:0 auto}
.arcade-rodape-marca{display:flex;align-items:center;gap:10px;color:var(--g700)}
.arcade-rodape-marca svg{flex-shrink:0}
.arcade-rodape-marca div{display:flex;flex-direction:column;line-height:1.25}
.arcade-rodape-marca strong{font-family:'Syne',sans-serif;font-weight:800;font-size:14px;color:var(--g900)}
.arcade-rodape-marca span{font-size:12px;color:var(--g500)}
.arcade-rodape-nav{display:flex;gap:18px;flex-wrap:wrap}
.arcade-rodape-nav a{font-size:13px;color:var(--g500);text-decoration:none;padding:4px 0}
.arcade-rodape-nav a:hover{color:var(--g900)}
.arcade-rodape-base{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:14px;margin-top:14px;border-top:1px solid var(--g100);max-width:1100px;margin-left:auto;margin-right:auto}
.arcade-rodape-copy,.arcade-rodape-versao{font-size:12px;color:var(--g400)}

.arcade-topbar{
  display:flex;justify-content:flex-end;align-items:center;gap:12px;
  padding:16px 32px;background:var(--w);border-bottom:1px solid var(--g200);position:sticky;top:0;z-index:5;
}
.arcade-topbar a,.arcade-topbar .pill{font-size:13px;color:var(--g700);text-decoration:none;padding:8px 14px;border-radius:var(--r)}
.arcade-topbar .btn-primario{background:var(--g900);color:var(--w)}
.arcade-topbar .btn-primario:hover{background:var(--g700)}

.btn-menu-movel{display:none;position:fixed;top:14px;left:14px;z-index:30;background:var(--g900);color:var(--w);border:none;border-radius:var(--r);width:38px;height:38px;font-size:16px;cursor:pointer;box-shadow:var(--s2)}

/* Páginas de autenticação (login/cadastro): sem sidebar, cartão centralizado de forma garantida via flex */
.arcade-shell.sem-sidebar .arcade-main{margin-left:0}
.arcade-shell.sem-sidebar .arcade-topbar{position:absolute;top:0;left:0;right:0;background:transparent;border:none;z-index:6}
.arcade-shell.sem-sidebar .arcade-conteudo{
  flex:1;display:flex;align-items:center;justify-content:center;padding:80px 20px;max-width:none;
}

.hero-arcade{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  background:var(--g900);color:var(--w);border-radius:var(--rl);padding:36px 40px;margin-bottom:8px;
  animation:heroEntrada .5s ease both;overflow:hidden;position:relative;
}
@keyframes heroEntrada{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.hero-texto{max-width:520px}
.hero-texto .eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--g400)}
.hero-titulo{color:var(--w);font-size:30px;margin:8px 0 10px;line-height:1.15}
.hero-desc{color:var(--g300);font-size:14px;line-height:1.5;margin:0}
.hero-stats{display:flex;gap:28px;margin-top:22px}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats strong{font-family:'JetBrains Mono',monospace;font-size:22px;color:var(--w)}
.hero-stats span{font-size:11px;color:var(--g500);text-transform:uppercase;letter-spacing:.04em}
.hero-desenho{flex-shrink:0;animation:heroFlutuar 3.5s ease-in-out infinite}
@keyframes heroFlutuar{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(max-width:800px){.hero-desenho{display:none}}

.busca-linha{margin:20px 0 4px}
.campo-busca{
  width:100%;max-width:360px;padding:11px 14px;border:1px solid var(--g200);border-radius:var(--r);
  font-family:'DM Sans',sans-serif;font-size:14px;background:var(--w);color:var(--g900);
}
.campo-busca:focus{outline:2px solid var(--g900);outline-offset:1px}

.link-voltar{display:inline-block;color:var(--g500);text-decoration:none;font-size:13px;margin-bottom:16px}
.link-voltar:hover{color:var(--g900)}

.filtro-jogos{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.filtro-pill{font-size:13px;padding:8px 14px;border-radius:999px;background:var(--w);border:1px solid var(--g200);text-decoration:none;color:var(--g700)}
.filtro-pill.ativo,.filtro-pill:hover{background:var(--g900);color:var(--w);border-color:var(--g900)}

.categorias-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.categoria-tile{
  display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:var(--rl);text-decoration:none;
  background:var(--w);border:1px solid var(--g200);border-left:4px solid var(--cor-cat);
  transition:box-shadow .15s,transform .15s;
}
.categoria-tile:hover{box-shadow:var(--s2);transform:translateY(-2px)}
.categoria-tile.ativa{background:var(--g900);border-color:var(--g900)}
.categoria-tile.ativa .categoria-tile-nome,.categoria-tile.ativa .categoria-tile-total{color:var(--w)}
.categoria-tile-nome{font-family:'Syne',sans-serif;font-weight:800;font-size:14px;color:var(--g900)}
.categoria-tile-total{font-size:12px;color:var(--g500)}

.badge-novo{
  position:absolute;top:8px;right:8px;background:#E63946;color:#fff;font-size:10px;font-weight:700;
  padding:3px 8px;border-radius:999px;letter-spacing:.04em;box-shadow:var(--s1);
}

.jogos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:20px}
@keyframes cardEntrada{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.jogo-card{
  animation:cardEntrada .35s ease both;
  background:var(--w);border:1px solid var(--g200);border-radius:var(--rl);
  padding:0 0 20px;box-shadow:var(--s1);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:8px;transition:box-shadow .18s,transform .18s,border-color .18s;
  overflow:hidden;
}
.jogo-card:hover{box-shadow:var(--s3);transform:translateY(-3px);border-color:var(--g300)}
.jogo-card:nth-child(1){animation-delay:.02s}.jogo-card:nth-child(2){animation-delay:.05s}
.jogo-card:nth-child(3){animation-delay:.08s}.jogo-card:nth-child(4){animation-delay:.11s}
.jogo-card:nth-child(5){animation-delay:.14s}.jogo-card:nth-child(6){animation-delay:.17s}
.jogo-card:nth-child(7){animation-delay:.2s}.jogo-card:nth-child(8){animation-delay:.23s}
.jogo-card:nth-child(n+9){animation-delay:.25s}
@media(prefers-reduced-motion:reduce){.jogo-card{animation:none}.hero-desenho{animation:none!important}}
.jogo-previa{position:relative;line-height:0}
.jogo-previa svg{width:100%;height:100px;display:block;transition:transform .25s}
.jogo-card:hover .jogo-previa svg{transform:scale(1.05)}
.jogo-previa .icone{position:absolute;left:14px;bottom:-18px;width:40px;height:40px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;box-shadow:var(--s2);transition:transform .18s}
.jogo-card:hover .jogo-previa .icone{transform:scale(1.08) rotate(-3deg)}
.jogo-previa .icone svg{width:20px;height:20px;fill:var(--w)}
.jogo-card .icone svg{width:22px;height:22px;fill:var(--w)}
.jogo-card h3{margin:14px 20px 0;font-size:16px}
.jogo-card p{margin:0;padding:0 20px;font-size:13px;color:var(--g500);line-height:1.4}
.jogo-card .categoria-tag{font-size:11px;color:var(--g500);text-transform:uppercase;letter-spacing:.04em;padding:0 20px}

.jogo-cabecalho{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.icone-grande{width:56px;height:56px;border-radius:var(--rl);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.icone-grande svg{width:28px;height:28px;fill:var(--w)}

.jogo-palco{background:var(--g900);border-radius:var(--rl);padding:16px;display:flex;justify-content:center;box-shadow:var(--s2);touch-action:none;position:relative;overflow:hidden}

.pausa-overlay{display:none;position:absolute;inset:0;background:rgba(10,10,12,0.72);align-items:center;justify-content:center;text-align:center;z-index:8;animation:avisoEntrada .15s ease both}
.pausa-overlay .pausa-icone{font-size:34px}
.pausa-overlay h3{color:#fff;font-family:'Syne',sans-serif;margin:8px 0 16px}
.pausa-overlay button{background:var(--w);color:var(--g900);border:none;border-radius:var(--r);padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer}
.pausa-overlay button:hover{background:var(--g200)}
.jogo-hud #btn-pausa{background:var(--g100);color:var(--g700)}
.jogo-hud #btn-pausa:hover{background:var(--g200)}
.jogo-palco canvas{background:var(--g50);border-radius:var(--r);max-width:100%;width:100%;height:auto;image-rendering:pixelated;touch-action:none;display:block}
.jogo-hud{display:flex;justify-content:space-between;align-items:center;margin:16px 0;flex-wrap:wrap;gap:10px}
.jogo-hud > div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.jogo-hud .placar{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--g700)}
.jogo-hud button{background:var(--g900);color:var(--w);border:none;border-radius:var(--r);padding:10px 18px;font-size:14px;cursor:pointer;transition:background .12s}
.jogo-hud button:hover{background:var(--g700)}
.jogo-hud #btn-mudo{background:var(--g100);color:var(--g700);padding:10px 14px}
.jogo-hud #btn-mudo:hover{background:var(--g200)}
.dica-controles{color:var(--g500);font-size:13px;margin-top:12px;display:flex;align-items:center;gap:6px}
.dica-controles::before{content:'⌨';font-size:14px}

.recorde-aviso{display:none;background:var(--g900);color:var(--w);padding:10px 16px;border-radius:var(--r);margin-bottom:12px;font-size:14px;animation:avisoEntrada .3s ease both}
@keyframes avisoEntrada{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.ctl-tatil{display:none;justify-content:center;align-items:center;gap:32px;margin-top:16px;user-select:none;touch-action:none}
.ctl-dpad{display:grid;grid-template-columns:44px 44px 44px;grid-auto-rows:44px;gap:4px;justify-items:center;align-items:center;touch-action:none}
.ctl-meio{display:contents}
.ctl-cima{grid-column:2;grid-row:1}
.ctl-esquerda{grid-column:1;grid-row:2}
.ctl-baixo{grid-column:2;grid-row:2}
.ctl-direita{grid-column:3;grid-row:2}
.ctl-botao{width:44px;height:44px;border-radius:var(--r);border:none;background:var(--g900);color:var(--w);font-size:16px;cursor:pointer;touch-action:none}
.ctl-botao:active{background:var(--g700)}
.ctl-acao{width:76px;height:76px;border-radius:50%;font-family:'JetBrains Mono',monospace;font-size:12px;touch-action:none}
@media(max-width:800px){.ctl-tatil{display:flex}}

/* Bloqueio de login para jogar */
.bloqueio-login{background:var(--w);border:1px solid var(--g200);border-radius:var(--rl);padding:28px;text-align:center;max-width:480px;box-shadow:var(--s1)}
.bloqueio-login p{color:var(--g600);font-size:14px;line-height:1.5;margin:0 0 18px}
.bloqueio-botoes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.auth-caixa{width:360px;max-width:88vw;background:var(--w);border:1px solid var(--g200);border-radius:var(--rl);padding:32px;box-shadow:var(--s2);text-align:center}
.auth-icone{width:48px;height:48px;border-radius:50%;background:var(--g900);color:var(--w);display:flex;align-items:center;justify-content:center;margin:0 auto}
.auth-form{display:flex;flex-direction:column;gap:14px;text-align:left;margin-top:8px}
.auth-form label{font-size:13px;color:var(--g600);display:flex;flex-direction:column;gap:6px}
.auth-form input{padding:11px 12px;border:1px solid var(--g200);border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:14px}
.auth-form input:focus{outline:2px solid var(--g900);outline-offset:1px}
.auth-botao{margin-top:6px;background:var(--g900);color:var(--w);border:none;border-radius:var(--r);padding:12px;font-size:14px;cursor:pointer}
.auth-botao:hover{background:var(--g700)}
.auth-alerta{background:#FDECEC;color:#B42318;border-radius:var(--r);padding:10px 14px;font-size:13px;margin-bottom:14px;text-align:left}
.auth-rodape{font-size:13px;color:var(--g500);margin-top:18px}
.auth-rodape a{color:var(--g900);font-weight:600;text-decoration:none}
.auth-rodape a:hover{text-decoration:underline}

.perfil-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.perfil-avatar{width:64px;height:64px;border-radius:50%;background:var(--g900);color:var(--w);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:24px}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:24px}
.stat-card{background:var(--w);border:1px solid var(--g200);border-radius:var(--rl);padding:16px;transition:box-shadow .15s}
.stat-card:hover{box-shadow:var(--s2)}
.stat-card .valor{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:600}
.stat-card .rotulo{font-size:12px;color:var(--g500);text-transform:uppercase;letter-spacing:.04em}

table.historico{width:100%;border-collapse:collapse;background:var(--w);border-radius:var(--rl);overflow:hidden;box-shadow:var(--s1)}
table.historico th,table.historico td{padding:12px 16px;text-align:left;font-size:13px;border-bottom:1px solid var(--g100)}
table.historico th{background:var(--g100);color:var(--g600);text-transform:uppercase;font-size:11px;letter-spacing:.04em}
table.historico tbody tr{transition:background .12s}
table.historico tbody tr:hover{background:var(--g50)}

/* Painel administrativo */
.admin-cabecalho{margin-bottom:20px}
.admin-perfil-card{display:flex;align-items:center;gap:14px}
.pill-admin{background:var(--g800);color:var(--w)}
.admin-abas{display:flex;gap:6px;background:var(--g100);padding:4px;border-radius:var(--r);width:fit-content;margin-bottom:20px}
.admin-aba{border:none;background:transparent;color:var(--g600);font-size:13px;font-weight:600;padding:9px 18px;border-radius:var(--r);cursor:pointer;transition:background .12s,color .12s}
.admin-aba.ativa{background:var(--w);color:var(--g900);box-shadow:var(--s1)}
.admin-painel{animation:avisoEntrada .2s ease both}

.manutencao-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-bottom:20px}
.manutencao-card{background:var(--w);border:1px solid var(--g200);border-radius:var(--rl);padding:20px;display:flex;flex-direction:column;gap:10px}
.manutencao-card h3{margin:0;font-size:15px;font-family:'Syne',sans-serif;font-weight:800}
.manutencao-card p{margin:0;font-size:13px;color:var(--g500);line-height:1.5;flex:1}

.btn-admin{background:var(--g100);color:var(--g800);border:1px solid var(--g200);border-radius:var(--r);padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:background .12s}
.btn-admin:hover{background:var(--g200)}
.btn-admin:disabled{opacity:.6;cursor:wait}
.btn-admin-primario{background:var(--g900);color:var(--w);border-color:var(--g900)}
.btn-admin-primario:hover{background:var(--g700)}
.btn-admin-pequeno{padding:6px 12px;font-size:12px}

.log-manutencao{background:var(--g900);border-radius:var(--rl);padding:16px 18px;max-height:260px;overflow-y:auto;font-family:'JetBrains Mono',monospace;font-size:12px}
.log-vazio{color:var(--g500);margin:0}
.log-linha{color:var(--g300);padding:4px 0;border-bottom:1px solid var(--g800)}
.log-linha:last-child{border-bottom:none}
.log-linha.log-ok{color:#9AE6B4}
.log-linha.log-erro{color:#FCA5A5}
.log-linha.log-info{color:var(--g400)}

.admin-tabela-jogos td{vertical-align:middle}
.tabela-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabela-scroll table.historico{min-width:480px}
.status-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}
.status-ativo{background:var(--g900);color:var(--w)}
.status-inativo{background:var(--g100);color:var(--g500);border:1px solid var(--g200)}

@media(max-width:800px){
  .btn-menu-movel{display:block}
  .arcade-sidebar{left:-240px;transition:left .2s;z-index:20;box-shadow:var(--s3)}
  .arcade-sidebar.aberta{left:0}
  .arcade-main{margin-left:0}
  .arcade-conteudo{padding:20px 16px 90px}
  .arcade-topbar{padding:14px 16px 14px 60px}
  .hero-arcade{padding:24px}
  .hero-titulo{font-size:24px}
  .hero-stats{gap:18px}
  .jogo-cabecalho{align-items:flex-start}
  .icone-grande{width:44px;height:44px}
  .icone-grande svg{width:22px;height:22px}
  .jogo-hud{align-items:flex-start}
  .arcade-shell.sem-sidebar .arcade-conteudo{padding:60px 16px}
  .auth-caixa{padding:24px}
  .arcade-rodape{padding:18px 16px}
  .arcade-rodape-topo,.arcade-rodape-base{flex-direction:column;text-align:center;gap:10px}
}
@media(max-width:420px){
  .ctl-acao{width:64px;height:64px}
  .ctl-botao{width:40px;height:40px}
  .jogos-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}