/* ==========================================================================
   Painel da API de Jogos — DFX Tech
   Tema proprio, sem Bootstrap. A paleta escura acompanha a logo (azul aco
   sobre grafite), o que tambem faz a logo original assentar sem recorte.
   ========================================================================== */

:root {
    --bg:          #0a0f1c;
    --surface:     #111827;
    --surface-2:   #172033;
    --surface-3:   #1e293f;
    --border:      #24304a;
    --border-soft: #1b2437;

    --txt:         #e8eef7;
    --txt-muted:   #8896b0;
    --txt-dim:     #61708c;

    --azul:        #3b7ddd;
    --azul-claro:  #5b9bf5;
    --azul-escuro: #23508f;
    --aco:         #9fb0c9;

    --ok:          #22c55e;
    --alerta:      #f5a524;
    --erro:        #ef4444;

    --raio:        12px;
    --raio-sm:     8px;
    --sombra:      0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);
    --aside-w:     256px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--txt);
    font-family: "Inter", "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--azul-claro); text-decoration: none; }
a:hover { color: var(--azul); }

/* ---------- estrutura ---------- */

.app { display: flex; min-height: 100vh; }

.aside {
    width: var(--aside-w);
    flex: 0 0 var(--aside-w);
    background: var(--surface);
    border-right: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    transition: transform .22s ease;
}

.aside__marca {
    padding: 20px 18px 16px;
    border-bottom: 1px solid var(--border-soft);
}
.aside__marca img { width: 100%; max-width: 168px; border-radius: var(--raio-sm); display: block; }

.aside__nav { padding: 14px 10px; flex: 1; overflow-y: auto; }
.aside__grupo {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--txt-dim); padding: 14px 10px 6px; font-weight: 600;
}
.aside__item {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; margin-bottom: 2px;
    border-radius: var(--raio-sm);
    color: var(--txt-muted); font-weight: 500; font-size: .92rem;
    transition: background .15s, color .15s;
}
.aside__item:hover { background: var(--surface-2); color: var(--txt); }
.aside__item.ativo { background: var(--azul-escuro); color: #fff; }
.aside__item svg { width: 18px; height: 18px; flex: 0 0 18px; }

.aside__rodape {
    padding: 14px 16px; border-top: 1px solid var(--border-soft);
    font-size: .74rem; color: var(--txt-dim); text-align: center;
}
.aside__rodape a { color: var(--txt-muted); }

.principal {
    flex: 1;
    margin-left: var(--aside-w);
    display: flex; flex-direction: column;
    min-width: 0;
}

.topo {
    height: 62px;
    display: flex; align-items: center; gap: 14px;
    padding: 0 22px;
    background: rgba(17,24,39,.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-soft);
    position: sticky; top: 0; z-index: 30;
}
.topo__titulo { font-size: 1.02rem; font-weight: 600; margin: 0; }
.topo__dir { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.hamburguer {
    display: none; background: none; border: 0; color: var(--txt-muted);
    cursor: pointer; padding: 6px; border-radius: var(--raio-sm);
}
.hamburguer:hover { background: var(--surface-2); color: var(--txt); }

.conteudo { padding: 24px 22px 40px; max-width: 1500px; width: 100%; }

/* ---------- componentes ---------- */

.cartao {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}
.cartao__cabeca {
    padding: 16px 18px; border-bottom: 1px solid var(--border-soft);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cartao__titulo { margin: 0; font-size: .98rem; font-weight: 600; }
.cartao__sub { margin: 2px 0 0; font-size: .82rem; color: var(--txt-muted); }
.cartao__corpo { padding: 18px; }
.cartao__acoes { margin-left: auto; display: flex; gap: 8px; }

.grade { display: grid; gap: 16px; }
.grade--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grade--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grade--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

.metrica { padding: 18px; }
.metrica__rotulo {
    font-size: .78rem; color: var(--txt-muted); text-transform: uppercase;
    letter-spacing: .05em; font-weight: 600; margin: 0 0 8px;
}
.metrica__valor { font-size: 1.75rem; font-weight: 700; margin: 0; line-height: 1.2; letter-spacing: -.02em; }
.metrica__nota { font-size: .8rem; color: var(--txt-dim); margin: 6px 0 0; }
.metrica__icone {
    width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center; margin-bottom: 12px;
    background: var(--surface-3); color: var(--azul-claro);
}
.metrica__icone svg { width: 19px; height: 19px; }

.selo {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    font-size: .74rem; font-weight: 600;
    background: var(--surface-3); color: var(--txt-muted);
    border: 1px solid var(--border);
}
.selo--mestre { background: rgba(59,125,221,.16); color: var(--azul-claro); border-color: rgba(59,125,221,.35); }
.selo--ok     { background: rgba(34,197,94,.14);  color: #4ade80;         border-color: rgba(34,197,94,.3); }
.selo--erro   { background: rgba(239,68,68,.14);  color: #f87171;         border-color: rgba(239,68,68,.3); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 15px; border-radius: var(--raio-sm);
    border: 1px solid var(--border); background: var(--surface-2); color: var(--txt);
    font-size: .88rem; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: background .15s, border-color .15s, opacity .15s;
    white-space: nowrap;
}
.btn:hover { background: var(--surface-3); color: var(--txt); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.btn--primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn--primario:hover { background: var(--azul-claro); border-color: var(--azul-claro); color: #fff; }
.btn--perigo { background: transparent; border-color: rgba(239,68,68,.4); color: #f87171; }
.btn--perigo:hover { background: rgba(239,68,68,.12); color: #f87171; }
.btn--pequeno { padding: 6px 10px; font-size: .8rem; }
.btn--bloco { width: 100%; }

/* ---------- tabelas ---------- */

.tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabela th {
    text-align: left; padding: 11px 14px; white-space: nowrap;
    font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--txt-dim); font-weight: 600;
    border-bottom: 1px solid var(--border);
}
.tabela td { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--surface-2); }
.tabela__acoes { display: flex; gap: 6px; justify-content: flex-end; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }

.segredo {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 190px;
}
.segredo__valor {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--txt-muted);
}

.vazio { padding: 44px 20px; text-align: center; color: var(--txt-dim); }
.vazio svg { width: 34px; height: 34px; opacity: .4; margin-bottom: 10px; }

/* ---------- formularios ---------- */

.campo { margin-bottom: 16px; }
.campo__rotulo { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 6px; color: var(--txt); }
.campo__dica { font-size: .78rem; color: var(--txt-dim); margin-top: 5px; }
.entrada {
    width: 100%; padding: 10px 12px;
    background: var(--surface-2); color: var(--txt);
    border: 1px solid var(--border); border-radius: var(--raio-sm);
    font-family: inherit; font-size: .9rem;
    transition: border-color .15s, box-shadow .15s;
}
.entrada:focus {
    outline: none; border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(59,125,221,.18);
}
.entrada::placeholder { color: var(--txt-dim); }

.check { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--azul); cursor: pointer; }

/* ---------- jogos ---------- */

.jogos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }

.jogo {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: var(--raio); overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color .15s, transform .15s;
}
.jogo:hover { border-color: var(--azul-escuro); transform: translateY(-2px); }

.jogo__capa {
    aspect-ratio: 1/1; width: 100%; position: relative;
    background: var(--surface-3); overflow: hidden;
}
.jogo__capa img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* fallback quando o arquivo da capa nao existe: iniciais sobre gradiente */
.jogo__capa--sem {
    display: grid; place-items: center;
    background: linear-gradient(140deg, var(--azul-escuro), var(--surface-3));
}
.jogo__iniciais { font-size: 1.7rem; font-weight: 800; color: rgba(255,255,255,.82); letter-spacing: .04em; }

.jogo__info { padding: 12px 13px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.jogo__nome { font-size: .9rem; font-weight: 600; margin: 0; }
.jogo__codigo { font-size: .76rem; color: var(--txt-dim); margin: 0; }
.jogo__acao { padding: 0 13px 13px; }

/* ---------- modal do demo ---------- */

.modal {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(3,7,16,.82); backdrop-filter: blur(3px);
    display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal.aberto { display: flex; }
.modal__caixa {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--raio); width: min(460px, 100%);
    max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal__caixa--largo { width: min(1080px, 100%); height: min(760px, 92vh); }
.modal__cabeca {
    padding: 14px 18px; border-bottom: 1px solid var(--border-soft);
    display: flex; align-items: center; gap: 12px;
}
.modal__titulo { margin: 0; font-size: .95rem; font-weight: 600; }
.modal__fechar {
    margin-left: auto; background: none; border: 0; color: var(--txt-muted);
    cursor: pointer; font-size: 1.35rem; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.modal__fechar:hover { background: var(--surface-2); color: var(--txt); }
.modal__corpo { padding: 18px; overflow: auto; flex: 1; }
.modal__corpo--limpo { padding: 0; }
.modal__corpo iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }

/* ---------- avisos ---------- */

.aviso {
    padding: 12px 15px; border-radius: var(--raio-sm);
    font-size: .87rem; margin-bottom: 16px;
    border: 1px solid var(--border); background: var(--surface-2);
}
.aviso--erro { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.1); color: #fca5a5; }
.aviso--ok   { border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.1); color: #86efac; }

.girando { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.25);
           border-top-color: #fff; border-radius: 50%; animation: girar .6s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- login ---------- */

.login { min-height: 100vh; display: grid; place-items: center; padding: 22px; }
.login__caixa { width: min(400px, 100%); }
.login__marca { text-align: center; margin-bottom: 22px; }
.login__marca img { width: 210px; max-width: 100%; border-radius: var(--raio); }
.login__titulo { text-align: center; font-size: 1.15rem; font-weight: 600; margin: 0 0 4px; }
.login__sub { text-align: center; color: var(--txt-muted); font-size: .87rem; margin: 0 0 22px; }
.login__credito { text-align: center; margin-top: 22px; font-size: .78rem; color: var(--txt-dim); }
.login__credito a { color: var(--txt-muted); }

/* ---------- responsivo ---------- */

@media (max-width: 1200px) {
    .grade--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
    .aside { transform: translateX(-100%); }
    .aside.aberto { transform: translateX(0); }
    .principal { margin-left: 0; }
    .hamburguer { display: block; }
    .grade--3, .grade--2 { grid-template-columns: 1fr; }
    .conteudo { padding: 18px 15px 34px; }
    .topo { padding: 0 15px; }
}
@media (max-width: 560px) {
    .grade--4 { grid-template-columns: 1fr; }
    .jogos { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
    .cartao__acoes { margin-left: 0; width: 100%; }
    .cartao__acoes .btn { flex: 1; }
}

.sobreposicao {
    display: none; position: fixed; inset: 0; z-index: 35;
    background: rgba(3,7,16,.6);
}
.sobreposicao.ativa { display: block; }
@media (min-width: 901px) { .sobreposicao { display: none !important; } }