/* ==========================================================
   POPUP DE NOVIDADES (estilo JoJo)
========================================================== */

.news-overlay{

    position:fixed;

    inset:0;

    z-index:9500;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:rgba(6,5,10,.82);

    backdrop-filter:blur(3px);

    animation:newsFade .25s ease;

}

@keyframes newsFade{ from{ opacity:0; } }

.news-modal{

    position:relative;

    overflow:hidden;

    width:100%;

    max-width:660px;

    text-align:center;

    padding:34px 30px 26px;

    border:1px solid rgba(122,77,255,.55);

    border-radius:18px;

    background:
        radial-gradient(circle at 50% -20%, rgba(122,77,255,.28), transparent 62%),
        linear-gradient(160deg, #181321, #100d16);

    box-shadow:0 26px 72px rgba(0,0,0,.72);

    animation:newsPop .38s cubic-bezier(.2,1.12,.36,1);

}

@keyframes newsPop{

    from{ transform:translateY(16px) scale(.94); opacity:0; }

}

/* ===== letras "menacing" (ゴ ゴ ゴ) de fundo ===== */

.news-menacing{

    position:absolute;

    font-weight:700;

    color:rgba(122,77,255,.30);

    text-shadow:0 0 20px rgba(122,77,255,.55);

    pointer-events:none;

    user-select:none;

    line-height:1;

    z-index:0;

}

.news-menacing-a{ top:6px;    left:16px;  font-size:3.4rem; rotate:-13deg; }
.news-menacing-b{ top:52px;   left:44px;  font-size:2rem;   rotate:7deg; opacity:.65; }
.news-menacing-c{ bottom:74px; right:18px; font-size:3.1rem; rotate:11deg; }
.news-menacing-d{ bottom:40px; right:56px; font-size:1.9rem; rotate:-6deg; opacity:.65; }

/* ===== conteúdo (acima das letras de fundo) ===== */

.news-tag{

    position:relative;

    z-index:2;

    display:inline-block;

    font-family:"Cinzel",serif;

    letter-spacing:.22em;

    font-size:.7rem;

    text-transform:uppercase;

    color:var(--gold);

    margin-bottom:12px;

}

.news-title{

    position:relative;

    z-index:2;

    font-family:"Cinzel",serif;

    font-weight:700;

    font-size:clamp(1.5rem, 4.6vw, 2.5rem);

    line-height:1.08;

    text-transform:uppercase;

    margin:0 auto 22px;

    max-width:16ch;

    background:linear-gradient(180deg, #efe0ff 0%, #b487ff 48%, #7A4DFF 100%);

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;

    filter:
        drop-shadow(2px 3px 0 rgba(58,24,102,.95))
        drop-shadow(0 0 16px rgba(122,77,255,.55));

}

.news-cards{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:24px;

}

.news-card{

    margin:0;

    width:clamp(92px, 24vw, 132px);

    display:flex;

    flex-direction:column;

    gap:7px;

    animation:newsCardIn .45s ease backwards;

}

.news-card:nth-child(2){ animation-delay:.09s; }
.news-card:nth-child(3){ animation-delay:.18s; }

@keyframes newsCardIn{

    from{ transform:translateY(14px) rotate(-3deg); opacity:0; }

}

.news-card img,
.news-card-ph{

    width:100%;

    aspect-ratio:63 / 88;

    object-fit:cover;

    border-radius:9px;

    border:1px solid rgba(201,168,79,.55);

    box-shadow:0 10px 24px rgba(0,0,0,.55);

}

.news-card img:not([src]){ display:none; }

.news-card-ph{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:10px;

    font-family:"Cinzel",serif;

    color:var(--gold);

    background:var(--panel-light);

}

.news-card figcaption{

    font-size:.74rem;

    color:var(--text-secondary);

    overflow-wrap:anywhere;

}

.news-actions{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

}

.news-actions .news-ok{

    min-width:190px;

    font-size:1.02rem;

    padding:12px 26px;

}

.news-actions .news-okall{

    font-size:.8rem;

    padding:7px 16px;

}

@media (max-width:560px){

    .news-modal{ padding:26px 18px 20px; }

    .news-menacing-a{ font-size:2.6rem; }
    .news-menacing-c{ font-size:2.4rem; }

}

/* ==========================================================
   ADMIN — ABA NOVIDADES
========================================================== */

.news-picked{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:8px;

    margin:12px 0;

    min-height:38px;

}

.news-picked-label{

    font-size:.8rem;

    color:var(--text-secondary);

    margin-right:2px;

}

.news-picked-empty{ font-style:italic; }

.news-picker-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill, minmax(86px, 1fr));

    gap:8px;

    margin:6px 0 16px;

    max-height:340px;

    overflow-y:auto;

    padding-right:4px;

}

.news-pick{

    position:relative;

    cursor:pointer;

    border:1px solid var(--border);

    border-radius:8px;

    overflow:hidden;

    background:var(--panel-light);

    display:flex;

    flex-direction:column;

    transition:var(--transition);

}

.news-pick:hover{ border-color:var(--gold); }

.news-pick.picked{

    border-color:var(--purple);

    box-shadow:0 0 0 2px var(--purple) inset;

}

.news-pick img{

    width:100%;

    aspect-ratio:63 / 88;

    object-fit:cover;

    display:block;

}

.news-pick img:not([src]){ display:none; }

.news-pick-ph{

    padding:14px 6px;

    text-align:center;

    font-size:.68rem;

    color:var(--text-secondary);

}

.news-pick-name{

    font-size:.64rem;

    padding:3px 4px;

    text-align:center;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.news-pick-x{

    position:absolute;

    top:3px;

    right:3px;

    width:19px;

    height:19px;

    border:none;

    border-radius:50%;

    background:rgba(0,0,0,.72);

    color:#fff;

    font-size:.66rem;

    cursor:pointer;

    line-height:1;

}

.news-pick-x:hover{ background:var(--danger); }

/* as escolhidas ficam menores, em fileira */
.news-picked .news-pick{ width:66px; cursor:default; }

.news-admin-list{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.news-admin-item{

    display:flex;

    align-items:center;

    gap:12px;

    background:var(--panel-light);

    border:1px solid var(--border);

    border-radius:10px;

    padding:10px 12px;

}

.news-admin-body{ flex:1; min-width:0; }

.news-admin-text{

    margin:0 0 6px;

    font-weight:500;

    overflow-wrap:anywhere;

}

.news-admin-chips{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

}

.news-admin-chip{

    font-size:.7rem;

    background:rgba(122,77,255,.18);

    border:1px solid rgba(122,77,255,.42);

    color:#c9b6ff;

    border-radius:999px;

    padding:2px 8px;

}

/* ==========================================================
   REPORTS — formulário na home
========================================================== */

.report-form{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:4px;

}

.report-form textarea{

    resize:vertical;

    min-height:72px;

    font-family:inherit;

}

.report-form .button{

    align-self:flex-start;

}

/* ==========================================================
   REPORTS — lista no admin
========================================================== */

.reports-list{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.report-item{

    background:var(--panel-light);

    border:1px solid var(--border);

    border-radius:10px;

    padding:12px 14px;

}

.report-head{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:8px;

}

.report-context{

    font-weight:600;

    color:var(--gold);

}

.report-meta{

    font-size:.76rem;

    color:var(--text-secondary);

}

.report-meta strong{

    color:#c9b6ff;

}

.report-head .icon-button{

    margin-left:auto;

}

.report-body{

    margin:0;

    white-space:pre-wrap;

    overflow-wrap:anywhere;

    line-height:1.45;

    color:var(--text);

}