/* =============================================================================
 *  Talisman Of Souls  —  enhancements.css
 * -----------------------------------------------------------------------------
 *  Estilos e EFEITOS adicionais. Carregar sempre depois do style.css.
 *
 *  ÍNDICE
 *    1. Status do servidor (Online / Offline) com glow pulsante
 *    2. Contador de jogadores online
 *    3. Botões com brilho/shine no hover
 *    4. Menu (nav) com sublinhado animado
 *    5. Cards de doação / blocos com hover e entrada suave
 *    6. Logo flutuante + título do hero com glow
 *    7. Painel do player — aba de doações
 *    8. Utilitários
 * ============================================================================= */


/* -----------------------------------------------------------------------------
 * 1. STATUS DO SERVIDOR
 * ---------------------------------------------------------------------------*/
.server-status {
    display: inline-block;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .5px;
    padding: 2px 6px;
    border-radius: 8px;
    transition: color .3s ease, text-shadow .3s ease;
}
.server-status.is-online {
    color: #28ff9b;
    text-shadow: 0 0 12px rgba(40, 255, 155, .8);
    animation: statusPulse 1.6s ease-in-out infinite;
}
.server-status.is-offline {
    color: #ff5d5d;
    text-shadow: 0 0 12px rgba(255, 93, 93, .7);
    animation: statusPulseRed 2s ease-in-out infinite;
}
@keyframes statusPulse {
    0%, 100% { text-shadow: 0 0 8px rgba(40, 255, 155, .45); transform: scale(1); }
    50%      { text-shadow: 0 0 22px rgba(40, 255, 155, 1);  transform: scale(1.04); }
}
@keyframes statusPulseRed {
    0%, 100% { text-shadow: 0 0 8px rgba(255, 93, 93, .4); }
    50%      { text-shadow: 0 0 20px rgba(255, 93, 93, .9); }
}


/* -----------------------------------------------------------------------------
 * 2. CONTADOR DE JOGADORES ONLINE
 * ---------------------------------------------------------------------------*/
.online-count {
    display: inline-block;
    color: #28ff9b;
    font-size: 24px;
    font-weight: 800;
    min-width: 28px;
    text-align: center;
    text-shadow: 0 0 10px rgba(40, 255, 155, .6);
    transition: transform .2s ease;
}
.online-count:hover { transform: scale(1.12); }


/* -----------------------------------------------------------------------------
 * 3. BOTÕES — brilho (shine) que cruza no hover + leve elevação
 * ---------------------------------------------------------------------------*/
.button, .button-blue, .big-button-blue, .download-button,
.donate-package-btn, .donate-tab-btn, .donate-currency-btn,
.donate-center-action a, .panel-tab-btn {
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .25s ease, filter .25s ease;
}
.button::after, .button-blue::after, .big-button-blue::after, .download-button::after,
.donate-package-btn::after, .donate-center-action a::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    transition: left .55s ease;
    pointer-events: none;
}
.button:hover::after, .button-blue:hover::after, .big-button-blue:hover::after,
.download-button:hover::after, .donate-package-btn:hover::after,
.donate-center-action a:hover::after {
    left: 130%;
}
.button:hover, .button-blue:hover, .big-button-blue:hover,
.download-button:hover, .donate-center-action a:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}


/* -----------------------------------------------------------------------------
 * 4. MENU PRINCIPAL — sublinhado animado no hover
 * ---------------------------------------------------------------------------*/
.menu > li > a, nav .menu a, .topMenu a {
    position: relative;
}
.menu > li > a::before, nav .menu a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #ff4d4d, #ffb347);
    transition: width .3s ease;
}
.menu > li > a:hover::before, nav .menu a:hover::before {
    width: 100%;
}


/* -----------------------------------------------------------------------------
 * 5. CARDS / BLOCOS — entrada suave + hover
 * ---------------------------------------------------------------------------*/
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.newsBlock, .forumBlock, .donate-horizontal-card, .donate-pack,
.account-card, .account-panel-card, .tableBlock {
    animation: fadeUp .55s ease both;
}
.donate-horizontal-card, .donate-pack {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.donate-horizontal-card:hover, .donate-pack:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
    border-color: rgba(255, 80, 80, .6);
}
.donate-tab-btn.active, .donate-currency-btn.active {
    box-shadow: 0 0 0 2px rgba(255, 80, 80, .5) inset;
}


/* -----------------------------------------------------------------------------
 * 6. LOGO FLUTUANTE + TÍTULO DO HERO COM GLOW
 * ---------------------------------------------------------------------------*/
.logo img {
    animation: floaty 4s ease-in-out infinite;
}
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
.slider-text, .hero-title, .big-slider-text {
    animation: heroGlow 3s ease-in-out infinite;
}
@keyframes heroGlow {
    0%, 100% { text-shadow: 0 0 10px rgba(255, 120, 60, .5); }
    50%      { text-shadow: 0 0 26px rgba(255, 160, 80, .95); }
}


/* -----------------------------------------------------------------------------
 * 7. PAINEL DO PLAYER — ABA DE DOAÇÕES
 * ---------------------------------------------------------------------------*/
.donation-history {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 360px;
    overflow: auto;
}
.donation-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(213, 69, 69, .18);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
    font-size: 13px;
    transition: border-color .2s ease, background .2s ease;
}
.donation-row:hover {
    border-color: rgba(255, 80, 80, .45);
    background: rgba(255, 255, 255, .05);
}
.donation-row .d-date { color: #b9b0ac; }
.donation-row .d-pkg  { font-weight: 600; }
.donation-row .d-tp   { color: #28ff9b; font-weight: 700; }
.donation-badge {
    justify-self: start;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
}
.donation-badge.is-approved { background: rgba(40, 255, 155, .14); color: #28ff9b; }
.donation-badge.is-pending  { background: rgba(255, 196, 0, .14);  color: #ffc400; }
.donation-badge.is-error    { background: rgba(255, 77, 77, .14);   color: #ff6b6b; }
.donation-empty {
    padding: 18px;
    text-align: center;
    color: #8a8480;
    border: 1px dashed rgba(213, 69, 69, .25);
    border-radius: 12px;
}
@media (max-width: 640px) {
    .donation-row { grid-template-columns: 1fr 1fr; }
}


/* -----------------------------------------------------------------------------
 * 8. UTILITÁRIOS
 * ---------------------------------------------------------------------------*/
.text-success { color: #28ff9b !important; }
.text-danger  { color: #ff5d5d !important; }
.muted        { color: #8a8480 !important; }


/* -----------------------------------------------------------------------------
 * 9. STATUS NA TABELA DE RANKING
 * ---------------------------------------------------------------------------*/
.rank-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.rank-status.is-online  { background: rgba(40, 255, 155, .15); color: #28ff9b; }
.rank-status.is-offline { background: rgba(150, 150, 150, .15); color: #9aa0a6; }


/* =============================================================================
 * 10. RESPONSIVIDADE MOBILE
 *     Ajustes para telas pequenas (celular). Só entram em telas estreitas;
 *     não afetam o layout no desktop.
 * ============================================================================= */

/* Tablet e telas médias */
@media (max-width: 1024px) {
    .content,
    .wrapper .content { width: 100% !important; float: none !important; }
}

/* Celular */
@media (max-width: 768px) {
    /* Empilha blocos que ficam lado a lado */
    .flex-s,
    .topHomeBlocks,
    .mainRegister,
    .twoBlocks,
    .footerBlocks { flex-direction: column !important; }

    .block-50,
    .block-33,
    .newsSlider,
    .forumSlider,
    .regBlock { width: 100% !important; max-width: 100% !important; }

    /* Tabelas roláveis na horizontal (rankings) */
    .rankingTable,
    .tableBlock table { display: block; overflow-x: auto; white-space: nowrap; }

    /* Modal de doação ocupa a tela toda */
    .donate-modal-card {
        width: 96% !important;
        max-width: 96% !important;
        max-height: 88vh;
        overflow: auto;
    }
    .donate-grid { grid-template-columns: 1fr 1fr !important; }
    .donate-steps { grid-template-columns: 1fr !important; }

    /* Cabeçalho/menu: reduz e permite quebrar linha */
    .menu { flex-wrap: wrap !important; }
    .onlineReg-blocks,
    .onlineBlocks { flex-wrap: wrap !important; justify-content: center; }

    /* Tipografia um pouco menor para caber */
    .server-status { font-size: 22px; }
    .h2-title span { font-size: 18px; }
}

/* Celular pequeno */
@media (max-width: 480px) {
    .donate-grid { grid-template-columns: 1fr !important; }
    .big-button-blue,
    .button,
    .download-button { width: 100%; text-align: center; }
    .logo img { max-width: 160px; height: auto; }
}


/* -----------------------------------------------------------------------------
 * 11. PAINEL — cards de resumo de doação
 * ---------------------------------------------------------------------------*/
.donation-summary-card {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(255, 80, 80, .10), rgba(255, 255, 255, .02));
    border: 1px solid rgba(255, 80, 80, .18);
}
.donation-summary-card .ds-num   { font-size: 22px; font-weight: 800; color: #fff; }
.donation-summary-card .ds-label { font-size: 12px; color: #b9b0ac; text-transform: uppercase; letter-spacing: .4px; }