/* Valley3D — fórum
   Clima de internet antiga (painéis de madeira, fonte pixelada, céu noturno)
   com layout moderno e responsivo. Arte de fundo original: static/*.svg */

:root{
    --sky-1:#071537;
    --sky-2:#0b2f7a;
    --sky-3:#1d6fe0;
    --sky-4:#53c9ea;
    --sky-5:#8ff0d9;
    --wood:#7a4520;
    --wood-dark:#4d2a12;
    --wood-light:#b46c35;
    --paper:#f7e6bd;
    --paper-dark:#ecd29a;
    --ink:#3a2412;
    --ink-soft:#6e4a2a;
    --leaf:#2f9e2f;
    --leaf-light:#6bd43a;
    --gold:#ffd75e;
    --berry:#c4473a;
    --pixel:'Pixelify Sans', 'Courier New', monospace;
    --text:'Nunito', 'Segoe UI', 'Hiragino Sans', 'Noto Sans CJK JP', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
    margin:0;
    min-height:100vh;
    font-family:var(--text);
    color:var(--ink);
    line-height:1.6;
    background:
        url('stars.svg') repeat top left / 640px 480px,
        linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 30%, var(--sky-3) 58%, var(--sky-4) 80%, var(--sky-5) 100%) fixed;
    background-color:var(--sky-2);
}

/* Montanhas fixas no rodapé da tela; estrelas cintilando por cima do céu */
body::before{
    content:'';
    position:fixed;
    inset:auto 0 0 0;
    height:min(42vh, 420px);
    background:url('mountains.svg') no-repeat bottom center / cover;
    z-index:-1;
    image-rendering:pixelated;
}

body::after{
    content:'';
    position:fixed;
    inset:0;
    background:url('stars.svg') repeat 320px 140px / 640px 480px;
    opacity:.6;
    z-index:-2;
    animation:twinkle 6s steps(3) infinite alternate;
    pointer-events:none;
}

@keyframes twinkle{
    from{ opacity:.15; }
    to{ opacity:.75; }
}

@media (prefers-reduced-motion: reduce){
    body::after{ animation:none; }
    html{ scroll-behavior:auto; }
}

a{ color:#1b5fbf; }
a:hover{ color:var(--berry); }

h1, h2, h3, .pixel{
    font-family:var(--pixel);
    font-weight:600;
    letter-spacing:.5px;
}

/* ── Moldura de madeira em degraus (o "painel" de jogo) ───────────────── */
.panel{
    position:relative;
    background:var(--paper);
    border:4px solid var(--wood);
    box-shadow:
        0 0 0 4px var(--wood-dark),
        inset 0 0 0 4px var(--paper-dark),
        8px 8px 0 4px rgba(7, 21, 55, .45);
    padding:20px 22px;
}

.panel + .panel{ margin-top:28px; }

.panel-title{
    margin:-6px 0 14px;
    font-size:1.15rem;
    color:var(--wood-dark);
}

/* ── Cabeçalho ─────────────────────────────────────────────────────────── */
.topbar{
    position:sticky;
    top:0;
    z-index:10;
    background:linear-gradient(180deg, var(--wood-light), var(--wood));
    border-bottom:4px solid var(--wood-dark);
    box-shadow:0 4px 0 rgba(7, 21, 55, .5);
}

.topbar-inner{
    max-width:1280px;
    margin:0 auto;
    padding:10px 18px;
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff6dd;
    text-decoration:none;
    font-family:var(--pixel);
    font-size:1.35rem;
    text-shadow:2px 2px 0 var(--wood-dark);
}

.brand img{ width:28px; height:28px; image-rendering:pixelated; }
.brand:hover{ color:var(--gold); }

.topnav{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    flex:1;
}

.topnav a, .menu summary, .lang-switch summary{
    color:#fff6dd;
    text-decoration:none;
    font-family:var(--pixel);
    padding:4px 10px;
    border:2px solid transparent;
    cursor:pointer;
}

.topnav a:hover, .topnav a.active{
    border-color:var(--gold);
    color:var(--gold);
    background:rgba(0, 0, 0, .15);
}

.menu, .lang-switch{ position:relative; }

.menu summary, .lang-switch summary{ list-style:none; }
.menu summary::-webkit-details-marker, .lang-switch summary::-webkit-details-marker{ display:none; }

.dropdown{
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    min-width:180px;
    padding:8px;
    background:var(--paper);
    border:3px solid var(--wood-dark);
    box-shadow:4px 4px 0 rgba(7, 21, 55, .5);
    z-index:20;
}

.dropdown a, .dropdown button{
    display:block;
    width:100%;
    padding:6px 10px;
    color:var(--ink);
    text-decoration:none;
    text-align:left;
    background:none;
    border:none;
    font:inherit;
    cursor:pointer;
}

.dropdown a:hover, .dropdown button:hover, .dropdown a.active{ background:var(--paper-dark); }

/* ── Layout: feed + chat (como no rascunho) ────────────────────────────── */
.wrap{
    max-width:1280px;
    margin:0 auto;
    padding:28px 18px 260px;
}

.layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 340px;
    gap:32px;
    align-items:start;
}

.sidebar{
    position:sticky;
    top:84px;
}

/* ── Topo da página ────────────────────────────────────────────────────── */
.hero{
    color:#fff;
    text-align:center;
    padding:30px 10px 40px;
    text-shadow:3px 3px 0 rgba(7, 21, 55, .8);
}

.hero h1{
    font-size:clamp(1.8rem, 4.5vw, 3.1rem);
    margin:0 0 10px;
}

.hero p{
    max-width:680px;
    margin:0 auto 22px;
    font-size:1.05rem;
}

.release-ribbon{
    display:inline-flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:18px;
    padding:6px 14px;
    background:rgba(7, 21, 55, .55);
    border:2px dashed var(--gold);
    font-size:.92rem;
    text-shadow:none;
}

.release-ribbon a{ color:var(--gold); }

/* ── Botões ────────────────────────────────────────────────────────────── */
.btn{
    display:inline-block;
    padding:8px 18px;
    font-family:var(--pixel);
    font-size:1rem;
    color:var(--ink);
    background:var(--gold);
    border:3px solid var(--wood-dark);
    box-shadow:3px 3px 0 var(--wood-dark);
    text-decoration:none;
    cursor:pointer;
    text-shadow:none;
    transition:transform .05s;
}

.btn:hover{ color:var(--ink); background:#ffe58f; }
.btn:active{ transform:translate(2px, 2px); box-shadow:1px 1px 0 var(--wood-dark); }
.btn-green{ background:var(--leaf-light); }
.btn-green:hover{ background:#8be55c; }
.btn-small{ padding:3px 10px; font-size:.85rem; }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* ── Formulários ───────────────────────────────────────────────────────── */
input[type=text], input[type=email], textarea, select{
    width:100%;
    padding:8px 10px;
    font:inherit;
    color:var(--ink);
    background:#fffaf0;
    border:2px solid var(--ink-soft);
    box-shadow:inset 2px 2px 0 rgba(0, 0, 0, .08);
}

input:focus, textarea:focus, select:focus{
    outline:3px solid var(--gold);
    outline-offset:0;
}

label{ display:block; font-weight:700; font-size:.9rem; margin:10px 0 4px; }
.hint{ font-size:.8rem; color:var(--ink-soft); font-weight:400; }
.form-actions{ margin-top:14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* ── Feed ──────────────────────────────────────────────────────────────── */
.post-card{
    padding:14px 0;
    border-bottom:2px dashed var(--paper-dark);
}

.post-card:last-child{ border-bottom:none; }

.post-card h3{
    margin:0 0 4px;
    font-size:1.1rem;
}

.post-card h3 a{ color:var(--ink); text-decoration:none; }
.post-card h3 a:hover{ color:var(--berry); }

.post-meta{
    font-size:.82rem;
    color:var(--ink-soft);
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}

.post-excerpt{ margin:6px 0 0; }

.badge{
    display:inline-block;
    padding:0 8px;
    font-family:var(--pixel);
    font-size:.75rem;
    color:#fff;
    background:var(--leaf);
    border:2px solid #1f6b1f;
}

.badge-pin{ background:var(--berry); border-color:#7d2a22; }
.badge-devlog{ background:#2c6fd6; border-color:#173f80; }

.nick{ font-weight:800; color:var(--wood); }
.mention{ font-weight:800; color:#1b5fbf; background:#e6f0ff; padding:0 3px; }

.feed-more{ text-align:center; margin-top:18px; }
.feed-end{ text-align:center; color:var(--ink-soft); font-size:.85rem; margin-top:12px; }

/* ── Chat ──────────────────────────────────────────────────────────────── */
.chat{
    display:flex;
    flex-direction:column;
    height:calc(100vh - 140px);
    min-height:420px;
    padding:14px;
}

.chat-log{
    flex:1;
    overflow-y:auto;
    padding:6px 8px;
    background:#fffaf0;
    border:2px solid var(--ink-soft);
    font-size:.9rem;
}

.chat-msg{ padding:3px 0; word-wrap:break-word; }
.chat-msg time{ color:var(--ink-soft); font-size:.72rem; margin-right:4px; }
.chat-form{ margin-top:10px; display:flex; gap:6px; }
.chat-form input{ flex:1; }
.chat-note{ font-size:.75rem; color:var(--ink-soft); margin:6px 0 0; }
.chat-error{ color:var(--berry); font-size:.8rem; min-height:1em; margin:4px 0 0; }

/* ── Mensagens ─────────────────────────────────────────────────────────── */
.flash{
    margin-bottom:18px;
    padding:10px 14px;
    font-weight:700;
    border:3px solid var(--wood-dark);
    background:#e9ffd9;
    box-shadow:4px 4px 0 rgba(7, 21, 55, .45);
}

.flash-error{ background:#ffe0da; }

/* ── Atualizações e apoio ──────────────────────────────────────────────── */
.update-list{ list-style:none; margin:0; padding:0; }
.update-list li{ padding:10px 0; border-bottom:2px dashed var(--paper-dark); }
.update-list li:last-child{ border-bottom:none; }
.update-list code{ font-size:.8rem; background:var(--paper-dark); padding:0 4px; }

.release-notes{
    margin-top:6px;
    max-height:180px;
    overflow:auto;
    padding:8px 10px;
    font-size:.88rem;
    white-space:pre-wrap;
    background:#fffaf0;
    border:2px solid var(--paper-dark);
}

.support-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:18px;
}

.support-card{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:16px;
    background:#fffaf0;
    border:3px solid var(--wood);
    box-shadow:4px 4px 0 var(--wood-dark);
}

.support-card h3{ margin:0; }
.support-card p{ margin:0; flex:1; font-size:.92rem; }
.pix-key{ font-family:monospace; word-break:break-all; background:var(--paper-dark); padding:2px 6px; }

.stats{ display:flex; gap:14px; justify-content:center; font-family:var(--pixel); color:#fff; margin-top:10px; }

/* ── Rodapé ────────────────────────────────────────────────────────────── */
.footer{
    max-width:880px;
    margin:40px auto 0;
    padding:12px 16px;
    color:#eafff5;
    font-size:.8rem;
    text-align:center;
    background:rgba(7, 21, 55, .55);
    border:2px solid rgba(255, 255, 255, .25);
}

.footer a{ color:var(--gold); }

/* ── Celular: chat vai para baixo do feed ──────────────────────────────── */
@media (max-width:900px){
    .layout{ grid-template-columns:1fr; }
    .sidebar{ position:static; }
    .chat{ height:480px; }
    .wrap{ padding-bottom:200px; }
}

/* ── Cabeçalho compacto no celular: marca + idioma + entrar; links embaixo ── */
@media (max-width:600px){
    .topbar-inner{ gap:8px 10px; padding:8px 12px; }
    .brand{ font-size:1.05rem; flex:1; }
    .brand img{ width:22px; height:22px; }
    .topnav{ order:3; flex-basis:100%; gap:2px; }
    .topnav a, .menu summary, .lang-switch summary{ padding:2px 8px; font-size:.9rem; }
    .sidebar{ top:auto; }
}

/* ── Aviso no topo (editável no painel) ─────────────────────────────────── */
.announcement{
    margin-bottom:18px;
    padding:10px 14px;
    font-weight:700;
    color:var(--ink);
    background:var(--gold);
    border:3px solid var(--wood-dark);
    box-shadow:4px 4px 0 rgba(7, 21, 55, .45);
}

/* ── Painel de administração ───────────────────────────────────────────── */
.admin-tabs, .admin-periods{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:18px;
}

.admin-tabs a, .admin-periods a{
    padding:5px 14px;
    font-family:var(--pixel);
    color:#fff6dd;
    background:rgba(7, 21, 55, .55);
    border:2px solid rgba(255, 255, 255, .35);
    text-decoration:none;
}

.admin-tabs a.active, .admin-periods a.active, .admin-tabs a:hover, .admin-periods a:hover{
    color:var(--ink);
    background:var(--gold);
    border-color:var(--wood-dark);
}

.admin-periods a{ font-size:.85rem; padding:3px 12px; }

.kpi-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
    gap:18px;
    margin-bottom:28px;
}

.kpi{
    display:flex;
    flex-direction:column;
    padding:14px 16px;
    background:var(--paper);
    border:4px solid var(--wood);
    box-shadow:0 0 0 3px var(--wood-dark), 6px 6px 0 3px rgba(7, 21, 55, .45);
}

.kpi span{ font-size:.78rem; text-transform:uppercase; letter-spacing:1px; color:var(--ink-soft); }
.kpi b{ font-family:var(--pixel); font-size:1.8rem; line-height:1.2; }
.kpi small{ color:var(--ink-soft); font-size:.78rem; }
.kpi-delta{ font-size:.8rem; font-weight:700; }
.kpi-delta.up{ color:#2a7a2a; }
.kpi-delta.down{ color:var(--berry); }

.admin-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:28px;
    margin-top:28px;
}

.admin-grid .panel + .panel{ margin-top:0; }

.admin-bars{ list-style:none; margin:0; padding:0; }

.admin-bars li{
    position:relative;
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:5px 8px;
    margin-bottom:4px;
    font-size:.88rem;
    overflow:hidden;
}

.admin-bar-fill{ position:absolute; inset:0 auto 0 0; background:rgba(107, 212, 58, .3); }
.admin-bar-label, .admin-bar-value{ position:relative; }
.admin-bar-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-bar-value{ flex-shrink:0; color:var(--ink-soft); font-size:.8rem; }

.admin-note{
    margin-top:24px;
    color:#eafff5;
    font-size:.8rem;
    text-align:center;
}

.table-wrap{ overflow-x:auto; }

.admin-table{
    width:100%;
    border-collapse:collapse;
    font-size:.88rem;
}

.admin-table th, .admin-table td{
    padding:8px 10px;
    text-align:left;
    border-bottom:2px dashed var(--paper-dark);
    white-space:nowrap;
}

.admin-table th{ font-family:var(--pixel); color:var(--wood-dark); }

.signature-editor{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin:12px 0;
}

.code-input{
    font-family:Consolas, 'Courier New', monospace;
    font-size:.85rem;
    line-height:1.5;
}

.email-preview{
    width:100%;
    height:420px;
    border:2px solid var(--ink-soft);
    background:#0b2f7a;
}

@media (max-width:900px){
    .signature-editor{ grid-template-columns:1fr; }
}

/* ── Entrar / criar conta (abas sem JavaScript) ────────────────────────── */
.topnav-signin{
    color:#fff6dd;
    font-family:var(--pixel);
    text-decoration:underline;
}

.topnav-signin:hover{ color:var(--gold); }

.auth-radio{ position:absolute; opacity:0; pointer-events:none; }

.auth-tabs{
    display:flex;
    gap:4px;
    margin-bottom:10px;
    border-bottom:3px solid var(--wood);
}

.auth-tabs label{
    margin:0;
    padding:4px 12px;
    font-family:var(--pixel);
    font-weight:600;
    color:var(--ink-soft);
    cursor:pointer;
    border:3px solid transparent;
    border-bottom:0;
}

.auth-radio-signin:checked ~ .auth-tabs label:first-child,
.auth-radio-join:checked ~ .auth-tabs label:last-child{
    color:var(--ink);
    background:var(--gold);
    border-color:var(--wood);
}

.auth-radio-signin:focus-visible ~ .auth-tabs label:first-child,
.auth-radio-join:focus-visible ~ .auth-tabs label:last-child{
    outline:3px solid var(--gold);
}

.auth-signin, .auth-join{ display:none; }
.auth-radio-signin:checked ~ .auth-signin,
.auth-radio-join:checked ~ .auth-join{ display:block; }

/* Sem login, o painel do chat cresce para caber o formulário de entrada */
.chat:has(.auth){ height:auto; }
.chat:has(.auth) .chat-log{ flex:none; height:280px; }

/* ── Mapa e redes no painel ────────────────────────────────────────────── */
.admin-map-row{
    display:grid;
    grid-template-columns:minmax(0, 2fr) minmax(260px, 1fr);
    gap:28px;
    margin:28px 0;
}

.admin-map-row .panel + .panel{ margin-top:0; }

#admin-map{
    height:420px;
    border:2px solid var(--ink-soft);
    background:#0b1d3e;
}

.map-dark-tiles{
    filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6);
}

.net-badge{
    display:inline-block;
    padding:0 6px;
    font-size:.68rem;
    font-weight:700;
    text-transform:uppercase;
    border:1px solid var(--ink-soft);
    color:var(--ink-soft);
}

.net-datacenter{ color:var(--berry); border-color:var(--berry); }
.net-org{ color:#2a7a2a; border-color:#2a7a2a; }

@media (max-width:900px){
    .admin-map-row{ grid-template-columns:1fr; }
}