/* ==========================================================================
   THUNDER OT - CLASSIC 2D THEME
   Visual inspirado no estilo clássico Tibia / RubinOT
   ========================================================================== */

:root {
    /* Paleta da logo */
    --cor-primaria:          #071526;
    --cor-secundaria:        #12385f;
    --cor-terciaria:         #0c5a90;
    --cor-fundo:             #fefeff;
    --cor-texto:             #040206;
    --cor-texto-secundario:  #040206;
    --cor-primaria-escura:   #271b0b;
    --cor-secundaria-escura: #326a7d;
    --cor-terciaria-escura:  #5b5025;

    /* Fundo */
    --t-sky-top:        #fefeff;
    --t-sky-mid:        #326a7d;
    --t-sky-bot:        #0c5a90;

    /* Boxes dark navy */
    --t-box-bg:         #0c5a90;
    --t-box-bg2:        #040206;
    --t-box-hdr:        #040206;

    /* Bordas douradas */
    --t-border:         #12385f;
    --t-border-hi:      #f4b81c;
    --t-border-in:      #271b0b;

    /* Conteúdo / pergaminho */
    --t-parch:          #d9bd86;
    --t-parch-light:    #fefeff;
    --t-parch-border:   #5b5025;
    --t-parch-text:     #040206;

    /* Texto nos boxes */
    --t-text:           #fefeff;
    --t-text-dim:       #8ecae6;
    --t-gold:           #f4b81c;
    --t-orange:         #cf9511;

    /* Botões */
    --t-btn-blue:       #0c5a90;
    --t-btn-blue-hi:    #326a7d;
    --t-btn-brown:      #271b0b;
    --t-btn-brown-hi:   #5b5025;
    --t-btn-green:      #326a7d;
    --t-btn-green-hi:   #0c5a90;
    --t-btn-orange:     #12385f;
    --t-btn-gold:       #071526;

    /* Tipografia */
    --font-title:       'Cinzel', 'Times New Roman', serif;
    --font-body:        'Crimson Text', 'Georgia', serif;
    --font-ui:          'Open Sans', Arial, sans-serif;

    /* Layout */
    --left-w:           185px;
    --right-w:          195px;
    --wrap-max:         1180px;
}

/* ============================================================
   RESET BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--t-parch-text);
    min-height: 100vh;
    overflow-x: hidden;
}

a { color: #0c5a90; text-decoration: none; }
a:hover { color: var(--t-orange); text-decoration: underline; }

/* Pixel art: todas as imagens com renderização nítida */
img {
    max-width: 100%;
    height: auto;
    border: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* ============================================================
   BACKGROUND — imagem pixel art (fundosite.webp)
   ============================================================ */
#thunder-bg-wrapper {
    background:
        url('../images/fundosite.webp') no-repeat top center / cover fixed,
        linear-gradient(180deg, #326a7d 0%, #271b0b 100%);
    min-height: 100vh;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Overlay escuro suave para legibilidade do conteúdo */
#thunder-bg-wrapper::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(5, 8, 20, 0.45);
    pointer-events: none;
    z-index: 0;
}
#thunder-header,
#thunder-status-bar,
#thunder-main-wrapper,
#thunder-footer {
    position: relative;
    z-index: 1;
}

/* ============================================================
   LOGO / HEADER
   ============================================================ */
#thunder-header {
    text-align: center;
    padding: 18px 0 6px;
    position: relative;
    z-index: 10;
    overflow: visible;
    isolation: isolate;
}

#thunder-header::before,
#thunder-header::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 48%;
    width: min(620px, 86vw);
    height: 150px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

#thunder-header::before {
    background:
        linear-gradient(102deg, transparent 0 32%, rgba(93, 186, 255, 0.00) 33%, rgba(93, 186, 255, 0.18) 34%, transparent 36%),
        linear-gradient(76deg, transparent 0 45%, rgba(244, 184, 28, 0.18) 46%, transparent 48%),
        linear-gradient(118deg, transparent 0 57%, rgba(93, 186, 255, 0.14) 58%, transparent 60%),
        linear-gradient(64deg, transparent 0 67%, rgba(254, 254, 255, 0.12) 68%, transparent 70%);
    filter: drop-shadow(0 0 7px rgba(93, 186, 255, 0.28));
    opacity: 0.45;
    clip-path: polygon(4% 62%, 22% 46%, 30% 54%, 43% 25%, 50% 50%, 62% 36%, 73% 55%, 95% 34%, 72% 65%, 62% 56%, 50% 78%, 43% 56%, 30% 70%, 22% 58%);
    animation: thunderLogoRays 7s ease-in-out infinite;
}

#thunder-header::after {
    width: min(500px, 72vw);
    height: 116px;
    background:
        radial-gradient(ellipse at center, rgba(93, 186, 255, 0.22) 0%, rgba(12, 90, 144, 0.13) 38%, transparent 70%);
    opacity: 0.55;
    filter: blur(2px);
    animation: thunderLogoGlow 6s ease-in-out infinite;
}

#thunder-header a {
    position: relative;
    z-index: 2;
    display: inline-block;
}

#thunder-logo {
    position: relative;
    z-index: 2;
    max-height: 130px;
    width: auto;
    filter: drop-shadow(0 3px 10px rgba(0,0,0,0.6));
    transition: filter 0.3s;
}
#thunder-header a:hover #thunder-logo {
    filter: drop-shadow(0 3px 20px rgba(232,168,32,0.8));
}

#thunder-logo-text {
    position: relative;
    z-index: 2;
    font-family: var(--font-title);
    font-size: 3rem;
    font-weight: 900;
    color: var(--t-gold);
    text-shadow: 2px 2px 0 #271b0b, 0 0 20px rgba(232,168,32,0.5);
    letter-spacing: 4px;
}

@keyframes thunderLogoRays {
    0%, 100% { opacity: 0.28; transform: translate(-50%, -50%) scale(0.98); }
    42% { opacity: 0.48; transform: translate(-50%, -50%) scale(1.01); }
    46% { opacity: 0.34; }
    49% { opacity: 0.56; }
    54% { opacity: 0.32; }
}

@keyframes thunderLogoGlow {
    0%, 100% { opacity: 0.38; transform: translate(-50%, -50%) scale(0.96); }
    50% { opacity: 0.58; transform: translate(-50%, -50%) scale(1.03); }
}

/* ============================================================
   STATUS BAR
   ============================================================ */
#thunder-status-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 5px 20px;
    margin: 4px auto 0;
    max-width: var(--wrap-max);
    background: rgba(8, 10, 22, 0.92);
    border-top: 2px solid var(--t-border);
    border-bottom: 2px solid var(--t-border);
    box-shadow: 0 2px 0 rgba(0,0,0,0.5);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
}

#thunder-status-bar a {
    color: var(--t-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s, filter 0.2s;
}
#thunder-status-bar a:hover { text-decoration: none; }

.thunder-statusbar-link:hover { color: var(--t-gold) !important; }

/* Ícones das redes sociais com cores oficiais */
.thunder-social { font-size: 0.82rem; }
.thunder-social i { font-size: 1rem; }

.thunder-social.instagram:hover { color: #e1306c !important; }
.thunder-social.tiktok:hover    { color: #69c9d0 !important; }
.thunder-social.youtube:hover   { color: #ff0000 !important; }
.thunder-social.discord:hover   { color: #7289da !important; }

/* Cores ativas (sem hover) — ícone colorido, texto normal */
.thunder-social.instagram i { color: #e1306c; }
.thunder-social.tiktok i    { color: #69c9d0; }
.thunder-social.youtube i   { color: #ff0000; }
.thunder-social.discord i   { color: #7289da; }

.thunder-sep { color: var(--t-border); opacity: 0.5; }

.thunder-online-count {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--t-text);
    text-decoration: none !important;
    transition: color 0.14s ease, filter 0.14s ease;
}
.thunder-online-count.online i  { color: #50c850; }
.thunder-online-count.offline i { color: #c85050; }
.thunder-online-count strong { color: #fff; }
.thunder-online-count:hover {
    color: #f4b81c !important;
    filter: brightness(1.12);
}

/* ============================================================
   LAYOUT — wrapper flex para footer sempre no rodapé
   ============================================================ */
#thunder-bg-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ============================================================
   MAIN WRAPPER — 3 colunas
   ============================================================ */
#thunder-main-wrapper {
    display: grid;
    grid-template-columns: var(--left-w) 1fr var(--right-w);
    gap: 6px;
    max-width: var(--wrap-max);
    margin: 8px auto 0;
    padding: 0 6px;
    align-items: start;
    flex: 1; /* empurra o footer para o rodapé */
    width: 100%;
}

/* ============================================================
   BOX — pixel art style: bordas sólidas em camadas
   ============================================================ */
.thunder-box {
    background: rgba(14, 18, 38, 0.92);
    /* Borda pixel art: outer dark, inner gold */
    border: 3px solid var(--t-border);
    outline: 1px solid #271b0b;
    outline-offset: 2px;
    box-shadow:
        2px 2px 0 rgba(0,0,0,0.8),
        inset 1px 1px 0 rgba(212,168,58,0.15);
    margin-bottom: 5px;
    overflow: hidden;
    position: relative;
    image-rendering: pixelated;
}

/* Cantos pixel art */
.thunder-box::before,
.thunder-box::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--t-border-hi);
    z-index: 2;
    pointer-events: none;
}
.thunder-box::before { top: -1px; left: -1px; }
.thunder-box::after  { bottom: -1px; right: -1px; }

.thunder-box-header {
    background: #040206;
    border-bottom: 2px solid var(--t-border);
    padding: 5px 10px;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--t-gold);
    text-align: center;
    text-shadow: 1px 1px 0 #000, 0 0 8px rgba(232,168,32,0.4);
}

.thunder-box-body { padding: 8px; }

.thunder-account-name {
    font-size: 0.72rem;
    color: var(--t-text-dim);
    text-align: center;
    margin-bottom: 5px;
    font-family: var(--font-ui);
    word-break: break-all;
}

/* ============================================================
   BOTÕES
   ============================================================ */
.thunder-btn {
    display: block;
    width: 100%;
    padding: 6px 10px;
    margin-bottom: 4px;
    text-align: center;
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
    text-decoration: none !important;
    line-height: 1.4;
}
.thunder-btn:hover { filter: brightness(1.18); transform: translateY(-1px); text-decoration: none !important; }
.thunder-btn:active { transform: translateY(0); filter: brightness(0.9); }

.thunder-btn-blue   { background: linear-gradient(180deg, var(--t-btn-blue-hi) 0%, var(--t-btn-blue) 100%); border-color: #0c5a90; color: #fff !important; }
.thunder-btn-brown  { background: linear-gradient(180deg, var(--t-btn-brown-hi) 0%, var(--t-btn-brown) 100%); border-color: #271b0b; color: #f4b81c !important; }
.thunder-btn-green  { background: linear-gradient(180deg, var(--t-btn-green-hi) 0%, var(--t-btn-green) 100%); border-color: #326a7d; color: #fefeff !important; }
.thunder-btn-orange { background: linear-gradient(180deg, #cf9511 0%, var(--t-btn-orange) 100%); border-color: #cf9511; color: #fff !important; }
.thunder-btn-gold   { background: linear-gradient(180deg, #f4b81c 0%, var(--t-btn-gold) 100%); border-color: #cf9511; color: #040206 !important; }

/* ============================================================
   MENU DE NAVEGAÇÃO (sidebar esquerda)
   ============================================================ */
#thunder-nav {
    margin-bottom: 7px;
    padding: 3px 2px 1px;
}

.thunder-menu-group {
    margin-bottom: 6px;
    position: relative;
}

#thunder-left .thunder-box {
    background:
        linear-gradient(90deg, rgba(78,46,16,0.28) 0 3px, transparent 3px calc(100% - 3px), rgba(78,46,16,0.28) calc(100% - 3px)),
        linear-gradient(180deg, #fefeff 0%, #cf9511 52%, #5b5025 100%);
    border: 2px solid #271b0b;
    outline: 2px solid #cf9511;
    outline-offset: -5px;
    box-shadow:
        3px 3px 0 rgba(0,0,0,0.72),
        inset 0 0 0 1px rgba(255,232,166,0.3),
        inset 0 12px 18px rgba(255,242,190,0.13),
        inset 0 -12px 18px rgba(86,45,12,0.16);
    margin-bottom: 9px;
    padding: 5px;
}

#thunder-left .thunder-box::before,
#thunder-left .thunder-box::after {
    width: 9px;
    height: 9px;
    background: #271b0b;
    border: 1px solid #f4b81c;
}

#thunder-left .thunder-box-header {
    background:
        linear-gradient(180deg, #0c5a90 0%, #040206 100%);
    border: 1px solid #271b0b;
    box-shadow: inset 0 0 0 1px rgba(212,168,58,0.16);
    padding: 6px 8px;
    color: #f4b81c;
}

#thunder-left .thunder-box-body {
    padding: 8px 7px 7px;
}

#thunder-left .thunder-btn {
    margin-bottom: 5px;
    border: 1px solid rgba(60,32,10,0.72);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        2px 2px 0 rgba(60,32,10,0.35);
}

.thunder-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px 7px 13px;
    background:
        linear-gradient(90deg, rgba(80,46,14,0.3) 0 4px, transparent 4px calc(100% - 4px), rgba(80,46,14,0.3) calc(100% - 4px)),
        linear-gradient(180deg, #f4b81c 0%, #cf9511 54%, #5b5025 100%);
    border: 2px solid #271b0b;
    outline: 1px solid #cf9511;
    outline-offset: -4px;
    box-shadow:
        2px 2px 0 rgba(0,0,0,0.62),
        inset 0 1px 0 rgba(255,242,190,0.38),
        inset 0 -8px 12px rgba(79,42,12,0.16);
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #040206;
    cursor: pointer;
    user-select: none;
    transition: filter 0.12s, color 0.12s, transform 0.08s;
    text-shadow: 1px 1px 0 rgba(255,235,170,0.45);
    position: relative;
}
.thunder-menu-header::before,
.thunder-menu-header::after {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: rgba(74,39,10,0.35);
    box-shadow: inset 1px 0 0 rgba(255,230,160,0.22);
}
.thunder-menu-header::before { left: 5px; }
.thunder-menu-header::after { right: 5px; }
.thunder-menu-header:hover {
    filter: brightness(1.08);
    color: #040206;
    transform: translateY(-1px);
}

.menu-arrow {
    font-size: 0.48rem;
    opacity: 0.78;
    color: #271b0b;
    text-shadow: none;
}

.thunder-menu-list {
    list-style: none;
    margin: 0 6px;
    background:
        linear-gradient(90deg, rgba(92,52,17,0.16), transparent 16%, transparent 84%, rgba(92,52,17,0.16)),
        linear-gradient(180deg, #cf9511 0%, #cf9511 100%);
    border: 1px solid #5b5025;
    border-top: none;
    box-shadow:
        2px 2px 0 rgba(0,0,0,0.42),
        inset 0 0 0 1px rgba(255,232,166,0.22);
    display: none;
    padding: 4px 0;
}
.thunder-menu-list.open { display: block; }

.thunder-menu-list li a {
    display: block;
    padding: 6px 12px 6px 18px;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    color: #040206;
    border-bottom: 1px solid rgba(92,52,17,0.24);
    text-decoration: none !important;
    transition: background 0.12s, color 0.12s, padding-left 0.12s;
    position: relative;
}
.thunder-menu-list li:last-child a { border-bottom: none; }
.thunder-menu-list li a::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    background: #5b5025;
    box-shadow: 1px 1px 0 rgba(255,232,166,0.45);
}
.thunder-menu-list li a:hover {
    background: rgba(10,14,32,0.18);
    color: #0c5a90;
    text-decoration: none !important;
    padding-left: 22px;
}

/* ============================================================
   CONTEÚDO PRINCIPAL (páginas internas)
   ============================================================ */
.thunder-content-box {
    background: var(--t-parch);
    border: 2px solid var(--t-parch-border);
    box-shadow:
        inset 0 0 0 1px rgba(255,240,200,0.15),
        0 3px 10px rgba(0,0,0,0.35);
}

.thunder-content-box .myaac-content {
    padding: 14px 16px;
    color: var(--t-parch-text);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.65;
}

/* Headings dentro do conteúdo */
.thunder-content-box .myaac-content h1,
.thunder-content-box .myaac-content h2,
.thunder-content-box .myaac-content h3 {
    font-family: var(--font-title);
    color: #040206;
    border-bottom: 1px solid var(--t-parch-border);
    padding-bottom: 4px;
    margin: 10px 0 8px;
}

/* Tabelas internas */
.thunder-content-box .myaac-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 13px;
}
.thunder-content-box .myaac-content th {
    background: var(--t-box-hdr);
    color: var(--t-gold);
    font-family: var(--font-ui);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 8px;
    border: 1px solid var(--t-border);
}
.thunder-content-box .myaac-content td {
    padding: 5px 8px;
    border: 1px solid rgba(139,105,20,0.28);
    background: rgba(210,180,140,0.4);
}
.thunder-content-box .myaac-content tr:nth-child(even) td {
    background: rgba(210,180,140,0.7);
}

/* Inputs dentro do conteúdo */
.thunder-content-box input[type="text"],
.thunder-content-box input[type="password"],
.thunder-content-box input[type="email"],
.thunder-content-box select,
.thunder-content-box textarea {
    background: rgba(245,225,185,0.5);
    border: 1px solid var(--t-parch-border);
    padding: 5px 7px;
    color: var(--t-parch-text);
    font-family: var(--font-body);
    font-size: 13px;
    width: 100%;
}

input[type="submit"],
.TableContent input[type="submit"],
button[type="submit"] {
    background: linear-gradient(180deg, var(--t-btn-blue-hi) 0%, var(--t-btn-blue) 100%) !important;
    border: 1px solid #0c5a90 !important;
    color: #fff !important;
    padding: 5px 14px !important;
    font-family: var(--font-ui) !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    letter-spacing: 0.5px !important;
    transition: filter 0.15s !important;
}
input[type="submit"]:hover { filter: brightness(1.2) !important; }

/* ============================================================
   HOME — seções
   ============================================================ */

/* Box de seção home (ticker + news + top players) */
.thunder-section-box {
    background: rgba(197, 168, 122, 0.96);
    border: 3px solid var(--t-parch-border);
    outline: 1px solid rgba(0,0,0,0.4);
    box-shadow: 2px 2px 0 rgba(0,0,0,0.6);
    overflow: hidden;
}

.thunder-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 12px;
    background: #040206;
    border-bottom: 2px solid var(--t-border);
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--t-gold);
    text-shadow: 1px 1px 0 #000;
}
.thunder-section-header i { margin-right: 5px; font-size: 0.65rem; }

.thunder-section-link {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--t-text-dim) !important;
    text-transform: none;
    text-decoration: none !important;
}
.thunder-section-link:hover { color: var(--t-gold) !important; }

/* Ticker de notícias */
.thunder-ticker-list { border-top: none; }

.thunder-ticker-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 12px;
    border-bottom: 1px solid rgba(139,105,20,0.22);
    font-size: 13px;
}
.thunder-ticker-item:last-child { border-bottom: none; }

.ticker-date {
    flex-shrink: 0;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    color: #5b5025;
    white-space: nowrap;
    padding-top: 1px;
}

.ticker-text { flex: 1; color: var(--t-parch-text); }
.ticker-text a { color: #0c5a90; font-weight: 600; }
.ticker-text a:hover { color: var(--t-orange); text-decoration: none; }

.ticker-arrow {
    flex-shrink: 0;
    color: var(--t-border);
    font-size: 0.6rem;
    padding-top: 3px;
    opacity: 0.6;
}

/* Artigo em destaque */
.thunder-article-body { padding: 12px 14px; }

.thunder-article-title {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.thunder-article-title a { color: #0c5a90; }
.thunder-article-title a:hover { color: var(--t-orange); text-decoration: none; }

.thunder-article-meta {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    color: #5b5025;
    margin-bottom: 8px;
}

.thunder-article-text {
    color: var(--t-parch-text);
    font-size: 14px;
    line-height: 1.65;
}

.thunder-read-more {
    display: inline-block;
    color: var(--t-orange) !important;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none !important;
}
.thunder-read-more:hover { text-decoration: underline !important; }

.thunder-ornament {
    text-align: center;
    color: var(--t-border);
    font-size: 0.8rem;
    letter-spacing: 8px;
    margin: 10px 0 2px;
    opacity: 0.55;
}

/* Top Players table */
.thunder-top-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.thunder-top-table th {
    background: var(--t-box-hdr);
    color: var(--t-gold);
    font-family: var(--font-ui);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 8px;
    border: 1px solid var(--t-border);
    text-align: left;
}
.thunder-top-table td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(139,105,20,0.22);
    background: transparent;
}
.thunder-top-table tr:nth-child(even) td { background: rgba(180,150,110,0.15); }
.thunder-top-table tr:hover td { background: rgba(180,150,110,0.3); }
.thunder-top-table td a { color: #0c5a90; font-weight: 600; }
.thunder-top-table td a:hover { color: var(--t-orange); text-decoration: none; }

.rank-col  { width: 30px; text-align: center; font-weight: 700; color: #271b0b; font-family: var(--font-ui); }
.voc-col   { color: #5b5025; font-size: 0.8rem; }
.level-col { text-align: right; font-weight: 700; color: #0c5a90; font-family: var(--font-ui); }

/* ============================================================
   RIGHT SIDEBAR
   ============================================================ */
#thunder-right { min-width: 0; }

.thunder-sidebar-download {
    position: relative;
    min-height: 58px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 9px;
    align-items: center;
    margin-bottom: 9px;
    padding: 9px 10px;
    border: 2px solid #05080f;
    outline: 1px solid rgba(244,184,28,0.88);
    background:
        linear-gradient(90deg, rgba(255,255,255,0.18) 0 1px, transparent 1px calc(100% - 1px), rgba(0,0,0,0.18) calc(100% - 1px)),
        linear-gradient(180deg, #ffe082 0%, #f4b81c 34%, #d89f18 100%);
    color: #040914 !important;
    font-family: var(--font-ui);
    text-decoration: none !important;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.42),
        inset 0 -2px 0 rgba(92,52,17,0.28),
        0 3px 0 rgba(0,0,0,0.58),
        0 0 18px rgba(244,184,28,0.24);
}

.thunder-sidebar-download::before,
.thunder-sidebar-download::after {
    content: "";
    position: absolute;
    left: 9px;
    right: 9px;
    height: 5px;
    background: linear-gradient(90deg, #12385f 0%, #0c5a90 50%, #12385f 100%);
    border: 1px solid #05080f;
    pointer-events: none;
}

.thunder-sidebar-download::before { top: -5px; }
.thunder-sidebar-download::after { bottom: -5px; }

.thunder-sidebar-download i {
    grid-row: 1 / 3;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #071526;
    border: 1px solid rgba(5,8,15,0.92);
    color: #f4b81c;
    font-size: 1rem;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.thunder-sidebar-download span {
    color: #040914;
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    line-height: 1.05;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.35);
}

.thunder-sidebar-download small {
    display: block;
    margin-top: 2px;
    color: rgba(4,9,20,0.82);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.4px;
    line-height: 1.15;
}

.thunder-sidebar-download:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* ============================================================
   SERVER STATS BAR (home topo)
   ============================================================ */
.thunder-stats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: rgba(10, 14, 30, 0.92);
    border: 2px solid var(--t-border);
    box-shadow: 1px 1px 0 rgba(0,0,0,0.6);
    margin-bottom: 0;
    overflow: hidden;
}

.thunder-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 18px;
    gap: 2px;
}

.stat-icon { font-size: 0.8rem; color: var(--t-gold); }
.stat-value { font-family: var(--font-ui); font-size: 1rem; font-weight: 700; color: #fff; line-height: 1; }
.stat-label { font-family: var(--font-ui); font-size: 0.58rem; letter-spacing: 1px; text-transform: uppercase; color: var(--t-text-dim); }

.thunder-stat-sep {
    width: 1px;
    height: 36px;
    background: var(--t-border);
    opacity: 0.4;
}

/* ============================================================
   VOCAÇÕES GRID (home)
   ============================================================ */
.thunder-voc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 10px;
}

.thunder-voc-card {
    background: rgba(10, 14, 30, 0.7);
    border: 2px solid rgba(139,105,20,0.5);
    padding: 10px 6px;
    text-align: center;
    transition: border-color 0.15s;
}
.thunder-voc-card:hover { border-color: var(--t-gold); }

.thunder-voc-icon {
    font-size: 1.4rem;
    color: var(--t-gold);
    margin-bottom: 4px;
}
.thunder-voc-name {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--t-text);
    margin-bottom: 3px;
}
.thunder-voc-desc {
    font-family: var(--font-ui);
    font-size: 0.62rem;
    color: var(--t-text-dim);
    line-height: 1.3;
}

/* ============================================================
   QUICK LINKS (home)
   ============================================================ */
.thunder-quicklinks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.thunder-ql-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 6px;
    background: rgba(10, 14, 30, 0.92);
    border: 2px solid var(--t-border);
    box-shadow: 1px 1px 0 rgba(0,0,0,0.6);
    color: var(--t-text) !important;
    font-family: var(--font-ui);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s;
}
.thunder-ql-btn i { font-size: 1.1rem; color: var(--t-gold); }
.thunder-ql-btn:hover { background: rgba(30, 36, 70, 0.95); color: var(--t-gold) !important; text-decoration: none !important; }

/* ============================================================
   SIDEBAR — top players mini
   ============================================================ */
.thunder-sidebar-player {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 2px;
    border-bottom: 1px solid rgba(139,105,20,0.2);
}
.thunder-sidebar-player:last-of-type { border-bottom: none; }

.sp-rank {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 900;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.sp-outfit {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-outfit img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
}

.sp-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.sp-info a {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--t-text) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none !important;
}
.sp-info a:hover { color: var(--t-gold) !important; }
.sp-info span {
    font-family: var(--font-ui);
    font-size: 0.58rem;
    color: var(--t-text-dim);
}

/* ============================================================
   BOOSTED DO DIA (sidebar direita)
   ============================================================ */
.thunder-boosted-wrap {
    display: flex;
    gap: 6px;
    padding: 8px;
    overflow: hidden;
}

.thunder-boosted-card {
    flex: 1;
    text-align: center;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(139,105,20,0.3);
    overflow: hidden;
    padding: 6px 4px;
}

.thunder-boosted-tag {
    font-family: var(--font-ui);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--t-gold);
    margin-bottom: 4px;
}

.thunder-boosted-img,
.thunder-boosted-bg {
    width: 70px;
    height: 70px;
    margin: 4px auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(139,105,20,0.35);
    flex-shrink: 0;
}

/* Imagem real dentro do container flex — centraliza dinamicamente */
.thunder-boosted-bg img {
    max-width: 66px;
    max-height: 66px;
    width: auto;
    height: auto;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.thunder-boosted-img img {
    /* GIF animado: sem image-rendering pixelated para nao travar animacao */
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    object-fit: contain !important;
    display: block !important;
    position: relative !important;
    margin: 0 !important;
}

.thunder-boosted-name {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--t-text);
    word-break: break-word;
    line-height: 1.2;
}

/* ============================================================
   TOP PLAYERS — outfit na tabela (home.php)
   ============================================================ */
.outfit-col {
    width: 52px;
    padding: 2px 0 !important;
    text-align: center;
    vertical-align: middle;
}

.top-outfit {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.top-outfit img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
}

.rank-gold   { color: #f4b81c !important; font-weight: 900 !important; }
.rank-silver { color: #a0a8b8 !important; font-weight: 700 !important; }
.rank-bronze { color: #c07840 !important; font-weight: 700 !important; }

/* ============================================================
   OVERRIDE DOS BOXES LEGADOS DO MYAAC (template_place_holder)
   ============================================================ */
.TableContainer {
    background: linear-gradient(180deg, #0c5a90 0%, #040206 100%) !important;
    border: 2px solid var(--t-border) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
    margin-bottom: 5px !important;
}

.TableContainer .TableContent,
.InnerTableContainer {
    background: transparent !important;
    color: var(--t-text) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.72rem !important;
}

/* Headline de boxes legados */
.TableContainer > table > tbody > tr:first-child > td {
    background: linear-gradient(90deg, #040206 0%, #0c5a90 50%, #040206 100%) !important;
    border-bottom: 1px solid var(--t-border) !important;
    color: var(--t-gold) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    padding: 5px 8px !important;
}

/* Links dentro dos boxes legados */
.TableContent a { color: var(--t-text) !important; text-decoration: none !important; }
.TableContent a:hover { color: var(--t-gold) !important; }
.TableContent td { color: var(--t-text) !important; }

/* ============================================================
   FOOTER — sempre no rodapé
   ============================================================ */
#thunder-footer {
    text-align: center;
    padding: 10px 20px;
    margin-top: 10px;
    background: rgba(8, 10, 22, 0.92);
    border-top: 2px solid var(--t-border);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: var(--t-text-dim);
    flex-shrink: 0;
}

.thunder-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.thunder-footer-inner p {
    margin: 0;
}

.thunder-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
    font-family: var(--font-ui);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.thunder-footer-links a {
    color: #f4b81c !important;
    text-decoration: none !important;
}

.thunder-footer-links a:hover {
    color: #fefeff !important;
}

.thunder-footer-links span {
    color: #d8e9f7;
}

/* ============================================================
   FORMULÁRIOS (páginas de conta / twig)
   ============================================================ */
.TableContainer input[type="text"],
.TableContainer input[type="password"],
.TableContainer input[type="email"],
.TableContainer select,
.TableContainer textarea {
    background: rgba(245,225,185,0.2) !important;
    border: 1px solid var(--t-border) !important;
    color: var(--t-text) !important;
    padding: 4px 6px !important;
    font-family: var(--font-ui) !important;
    font-size: 0.72rem !important;
}

/* ============================================================
   PARCHMENT THEME PASS - classic medieval visual
   Mantem a estrutura atual e troca apenas a pele visual.
   ============================================================ */
#thunder-left {
    position: relative;
}

#thunder-left::before {
    content: '';
    position: absolute;
    inset: -8px -6px -10px;
    background:
        linear-gradient(90deg, rgba(69,37,10,0.28) 0 5px, transparent 5px calc(100% - 5px), rgba(69,37,10,0.28) calc(100% - 5px)),
        linear-gradient(180deg, rgba(230,198,135,0.24), rgba(166,105,46,0.2));
    border-left: 2px solid rgba(92,52,17,0.72);
    border-right: 2px solid rgba(92,52,17,0.72);
    box-shadow:
        4px 4px 0 rgba(0,0,0,0.35),
        inset 0 0 0 1px rgba(255,232,166,0.16);
    pointer-events: none;
    z-index: -1;
}

.thunder-box,
.TableContainer {
    background:
        linear-gradient(90deg, rgba(87,48,14,0.22) 0 5px, transparent 5px calc(100% - 5px), rgba(87,48,14,0.22) calc(100% - 5px)),
        linear-gradient(180deg, #fefeff 0%, #f4b81c 8%, #cf9511 58%, #5b5025 100%) !important;
    border: 2px solid #271b0b !important;
    outline: 2px solid #cf9511 !important;
    outline-offset: -5px !important;
    box-shadow:
        3px 3px 0 rgba(0,0,0,0.66),
        inset 0 0 0 1px rgba(255,232,166,0.28),
        inset 0 14px 18px rgba(255,242,190,0.13),
        inset 0 -14px 18px rgba(86,45,12,0.16) !important;
    padding: 5px;
}

.thunder-box::before,
.thunder-box::after {
    background: #271b0b;
    border: 1px solid #f4b81c;
}

.thunder-box-header,
.TableContainer > table > tbody > tr:first-child > td {
    background:
        linear-gradient(180deg, #0c5a90 0%, #040206 100%) !important;
    border: 1px solid #271b0b !important;
    border-bottom: 2px solid #cf9511 !important;
    box-shadow:
        inset 0 0 0 1px rgba(244,184,28,0.18),
        0 1px 0 rgba(39,27,11,0.55) !important;
    color: #f4b81c !important;
    text-shadow: 1px 1px 0 #000 !important;
}

.thunder-box-body,
.TableContainer .TableContent,
.InnerTableContainer {
    color: #040206 !important;
}

#thunder-left .thunder-box-header {
    width: auto;
    margin: 1px 5px 0;
    padding: 7px 8px;
    background:
        linear-gradient(90deg, rgba(80,46,14,0.18), transparent 22%, transparent 78%, rgba(80,46,14,0.18)),
        linear-gradient(180deg, #fefeff 0%, #f4b81c 18%, #cf9511 100%) !important;
    border: 2px solid #271b0b !important;
    outline: 1px solid #cf9511;
    outline-offset: -4px;
    color: #040206 !important;
    text-shadow: 1px 1px 0 rgba(255,235,170,0.5) !important;
}

#thunder-left .thunder-box-body {
    margin-top: 6px;
}

#thunder-left .thunder-btn {
    padding: 7px 8px;
}

#thunder-nav {
    padding: 7px 5px 2px;
}

.thunder-menu-group {
    margin-bottom: 7px;
}

.thunder-menu-header {
    background:
        linear-gradient(90deg, rgba(80,46,14,0.28) 0 5px, transparent 5px calc(100% - 5px), rgba(80,46,14,0.28) calc(100% - 5px)),
        linear-gradient(180deg, #fefeff 0%, #f4b81c 16%, #cf9511 56%, #5b5025 100%) !important;
    border: 2px solid #271b0b !important;
    outline: 1px solid #cf9511 !important;
    outline-offset: -4px !important;
    color: #040206 !important;
    text-shadow: 1px 1px 0 rgba(255,235,170,0.5) !important;
}

.thunder-menu-list {
    background:
        linear-gradient(90deg, rgba(92,52,17,0.16), transparent 16%, transparent 84%, rgba(92,52,17,0.16)),
        linear-gradient(180deg, #fefeff 0%, #f4b81c 12%, #cf9511 100%) !important;
    border-color: #5b5025 !important;
}

.thunder-section-box,
.thunder-content-box {
    position: relative;
    background:
        linear-gradient(90deg, rgba(102,57,18,0.16) 0 7px, transparent 7px calc(100% - 7px), rgba(102,57,18,0.16) calc(100% - 7px)),
        linear-gradient(180deg, rgba(254,254,255,0.78) 0%, rgba(244,184,28,0.22) 12%, rgba(207,149,17,0.78) 100%) !important;
    border: 2px solid #271b0b !important;
    outline: 2px solid #cf9511 !important;
    outline-offset: -5px !important;
    box-shadow:
        3px 3px 0 rgba(0,0,0,0.58),
        inset 0 0 0 1px rgba(255,240,200,0.24),
        inset 18px 0 24px rgba(105,58,18,0.08),
        inset -18px 0 24px rgba(105,58,18,0.08) !important;
    padding: 5px;
}

.thunder-section-header {
    background:
        linear-gradient(180deg, #0c5a90 0%, #040206 100%) !important;
    border: 1px solid #271b0b !important;
    border-bottom: 2px solid #cf9511 !important;
    color: #f4b81c !important;
}

.thunder-article-body,
.thunder-ticker-list {
    background: rgba(235,205,151,0.28);
}

.thunder-stats-bar {
    background:
        linear-gradient(90deg, rgba(87,48,14,0.18) 0 6px, transparent 6px calc(100% - 6px), rgba(87,48,14,0.18) calc(100% - 6px)),
        linear-gradient(180deg, #0c5a90 0%, #040206 100%) !important;
    border: 2px solid #cf9511 !important;
    outline: 1px solid #cf9511;
    box-shadow:
        2px 2px 0 rgba(0,0,0,0.58),
        inset 0 0 0 1px rgba(244,184,28,0.14) !important;
}

.thunder-boosted-card {
    background:
        linear-gradient(180deg, rgba(254,254,255,0.34), rgba(244,184,28,0.22), rgba(207,149,17,0.2)) !important;
    border: 1px solid rgba(92,52,17,0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(255,232,166,0.16);
}

.thunder-boosted-tag,
.thunder-boosted-name {
    color: #040206 !important;
    text-shadow: 1px 1px 0 rgba(255,232,166,0.42);
}

.thunder-boosted-img,
.thunder-boosted-bg {
    background-color: rgba(10,14,32,0.28) !important;
    border: 1px solid rgba(92,52,17,0.65) !important;
    overflow: hidden !important;
    width: 70px !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.thunder-boosted-bg img {
    max-width: 66px !important;
    max-height: 66px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    image-rendering: pixelated !important;
}

.thunder-sidebar-player {
    margin: 0 2px;
    padding: 5px 3px;
    border-bottom: 1px solid rgba(92,52,17,0.24);
}

.sp-info a {
    color: #040206 !important;
}
.sp-info a:hover {
    color: #0c5a90 !important;
}
.sp-info span {
    color: #271b0b !important;
}

.thunder-top-table th,
.thunder-content-box .myaac-content th {
    background: #040206 !important;
    color: #f4b81c !important;
    border-color: #cf9511 !important;
}

.thunder-top-table td,
.thunder-content-box .myaac-content td {
    color: #040206;
    border-color: rgba(92,52,17,0.28) !important;
}

.TableContent a {
    color: #0c5a90 !important;
}
.TableContent a:hover {
    color: #cf9511 !important;
}
.TableContent td {
    color: #040206 !important;
}

.thunder-content-box input[type="text"],
.thunder-content-box input[type="password"],
.thunder-content-box input[type="email"],
.thunder-content-box select,
.thunder-content-box textarea,
.TableContainer input[type="text"],
.TableContainer input[type="password"],
.TableContainer input[type="email"],
.TableContainer select,
.TableContainer textarea {
    background: rgba(255,238,196,0.52) !important;
    border: 1px solid #5b5025 !important;
    color: #040206 !important;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.28);
}

/* ============================================================
   MOBILE TOP BAR — oculto no desktop
   ============================================================ */
/* ============================================================
   TRUE SCROLL SHAPES - rolos visuais de pergaminho
   ============================================================ */
.thunder-box,
.TableContainer,
.thunder-section-box,
.thunder-content-box {
    position: relative !important;
    overflow: visible !important;
}

.thunder-box,
.TableContainer {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.thunder-section-box,
.thunder-content-box {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

.thunder-box::before,
.TableContainer::before,
.thunder-section-box::before,
.thunder-content-box::before,
.thunder-box::after,
.TableContainer::after,
.thunder-section-box::after,
.thunder-content-box::after {
    content: '' !important;
    position: absolute !important;
    left: 9px !important;
    right: 9px !important;
    width: auto !important;
    height: 15px !important;
    z-index: 3 !important;
    pointer-events: none !important;
    border: 1px solid #271b0b !important;
    border-radius: 12px !important;
    background:
        radial-gradient(circle at 8px 50%, #5b5025 0 3px, transparent 4px),
        radial-gradient(circle at calc(100% - 8px) 50%, #5b5025 0 3px, transparent 4px),
        linear-gradient(180deg, #fefeff 0%, #f4b81c 22%, #cf9511 62%, #5b5025 100%) !important;
    box-shadow:
        -7px 0 0 -2px #271b0b,
        7px 0 0 -2px #271b0b,
        -11px 0 0 -4px #cf9511,
        11px 0 0 -4px #cf9511,
        0 2px 0 rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(254,254,255,0.55) !important;
}

.thunder-box::before,
.TableContainer::before,
.thunder-section-box::before,
.thunder-content-box::before {
    top: -7px !important;
}

.thunder-box::after,
.TableContainer::after,
.thunder-section-box::after,
.thunder-content-box::after {
    bottom: -7px !important;
    transform: rotate(180deg);
}

.thunder-box-header,
.thunder-box-body,
.TableContainer > table,
.thunder-section-header,
.thunder-article-body,
.thunder-ticker-list,
.thunder-content-box .myaac-content {
    position: relative;
    z-index: 4;
}

#thunder-left .thunder-box {
    padding-top: 17px !important;
    padding-bottom: 17px !important;
}

#thunder-left .thunder-box::before,
#thunder-left .thunder-box::after {
    left: 7px !important;
    right: 7px !important;
}

#thunder-right .thunder-box::before,
#thunder-right .thunder-box::after {
    left: 8px !important;
    right: 8px !important;
}

.thunder-section-box::before,
.thunder-content-box::before,
.thunder-section-box::after,
.thunder-content-box::after {
    height: 17px !important;
    left: 16px !important;
    right: 16px !important;
    box-shadow:
        -10px 0 0 -2px #271b0b,
        10px 0 0 -2px #271b0b,
        -15px 0 0 -5px #cf9511,
        15px 0 0 -5px #cf9511,
        0 2px 0 rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(254,254,255,0.55) !important;
}

.thunder-menu-header {
    margin-left: 7px;
    margin-right: 7px;
    overflow: visible;
}

.thunder-menu-header::before,
.thunder-menu-header::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    width: 13px !important;
    height: 24px !important;
    margin-top: -12px !important;
    border: 1px solid #271b0b !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle at 50% 50%, #5b5025 0 3px, transparent 4px),
        linear-gradient(90deg, #271b0b 0%, #cf9511 38%, #f4b81c 72%, #5b5025 100%) !important;
    box-shadow:
        1px 1px 0 rgba(0,0,0,0.35),
        inset 1px 0 0 rgba(254,254,255,0.35) !important;
    z-index: 2;
}

.thunder-menu-header::before {
    left: -8px !important;
}

.thunder-menu-header::after {
    right: -8px !important;
}

.thunder-menu-header > * {
    position: relative;
    z-index: 3;
}

.thunder-menu-list {
    margin-left: 11px !important;
    margin-right: 11px !important;
}

/* ============================================================
   HIGHSCORES - pergaminho e outfits reais
   ============================================================ */
.th-highscores-note {
    margin: 10px 0 14px !important;
    padding: 10px 12px 10px 36px;
    position: relative;
    background: linear-gradient(180deg, rgba(10,36,64,0.94) 0%, rgba(4,13,25,0.98) 100%) !important;
    border: 1px solid rgba(244,184,28,0.42);
    color: #d8e9f7 !important;
    font-family: var(--font-ui);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.45;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 8px 18px rgba(0,0,0,0.18);
}

.th-highscores-note::before {
    content: "\f05a";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #f4b81c;
    font-family: "Font Awesome 6 Free";
    font-size: 0.9rem;
    font-weight: 900;
}

.CaptionContainer {
    position: relative;
    z-index: 4;
}

.CaptionInnerContainer {
    background: linear-gradient(180deg, #0c5a90 0%, #040206 100%) !important;
    border: 1px solid #271b0b !important;
    border-bottom: 2px solid #cf9511 !important;
    color: #f4b81c !important;
    padding: 7px 12px !important;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(244,184,28,0.18);
}

.CaptionInnerContainer .Text {
    color: #f4b81c !important;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #000;
}

.CaptionInnerContainer span {
    display: none !important;
}

.TableContainer .InnerTableContainer table {
    background: transparent !important;
}

.TableContainer select {
    min-height: 30px;
}

.TableContainer .BigButton {
    width: auto !important;
    min-width: 110px;
    height: auto !important;
    background: none !important;
}

.TableContainer .BigButton > div {
    position: relative;
}

.TableContainer .BigButtonOver {
    display: none !important;
}

.TableContainer .BigButtonText {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 30px;
    background: linear-gradient(180deg, #326a7d 0%, #0c5a90 100%) !important;
    border: 1px solid #271b0b !important;
    color: #fefeff !important;
    padding: 6px 14px !important;
    font-family: var(--font-ui) !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    cursor: pointer;
}

.th-highscores-table {
    border-collapse: collapse !important;
    background: rgba(254,254,255,0.18) !important;
}

.th-highscores-table .LabelH td {
    background: linear-gradient(180deg, #0c5a90 0%, #040206 100%) !important;
    color: #f4b81c !important;
    border: 1px solid #cf9511 !important;
    padding: 8px 10px !important;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Highscores gerado pelo core MyAAC */
.th-highscores-page {
    color: #fefeff;
    font-family: var(--font-body);
}

.th-highscores-page > .TableContainer:first-of-type,
.th-highscores-page > .TableContainer:first-of-type + p {
    display: none !important;
}

.th-highscores-hero {
    display: block;
    margin-bottom: 12px;
    padding: 20px;
    border: 1px solid rgba(244,184,28,0.58);
    background:
        radial-gradient(circle at 82% 18%, rgba(244,184,28,0.18), transparent 30%),
        linear-gradient(135deg, rgba(11,42,74,0.98) 0%, rgba(4,13,25,0.98) 56%, rgba(2,7,15,0.98) 100%);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.68), 0 14px 30px rgba(0,0,0,0.28);
}

.th-highscores-hero__text {
    min-width: 0;
    max-width: 680px;
}

.th-highscores-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(0,0,0,0.82);
    background: linear-gradient(180deg, #f6c437 0%, #d79608 100%);
    color: #05070c;
    font-family: var(--font-title);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 2px 0 #000;
}

.th-highscores-kicker::before,
.th-highscores-kicker::after {
    content: "\25C6";
    font-size: 0.5rem;
}

.th-highscores-hero h1 {
    margin: 12px 0 8px !important;
    padding: 0 !important;
    color: #f4b81c !important;
    font-family: var(--font-title) !important;
    font-size: clamp(2rem, 4.4vw, 3.2rem) !important;
    line-height: 0.95 !important;
    text-shadow: 2px 2px 0 #000, 0 0 16px rgba(244,184,28,0.34);
}

.th-highscores-hero p {
    max-width: 500px;
    margin: 0 !important;
    color: #d8e9f7 !important;
    font-size: 0.94rem;
    line-height: 1.5;
}

.thunder-content-box .myaac-content > p > i {
    display: block;
    margin: 8px 0 12px;
    padding: 8px 10px;
    background: rgba(7,21,38,0.78);
    border: 1px solid rgba(244,184,28,0.35);
    color: #d8e9f7 !important;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    line-height: 1.45;
}

.thunder-content-box .myaac-content .TableContainer {
    margin: 10px 0 16px;
}

.thunder-content-box .myaac-content .TableContentContainer {
    padding: 0 !important;
    background: transparent !important;
}

.thunder-content-box .myaac-content .TableContent {
    width: 100% !important;
    border: 1px solid rgba(244,184,28,0.45) !important;
    border-collapse: collapse !important;
    background: rgba(4,9,20,0.78) !important;
    box-shadow: inset 0 0 0 1px rgba(254,254,255,0.05);
}

.thunder-content-box .myaac-content .TableContent .LabelH td {
    padding: 8px 10px !important;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    border: 1px solid #05080f !important;
    color: #040914 !important;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.34) !important;
}

.thunder-content-box .myaac-content .TableContent .LabelH td:first-child {
    color: #040914 !important;
}

.thunder-content-box .myaac-content .TableContent tr:not(.LabelH) td {
    padding: 8px 10px !important;
    background: rgba(7,21,38,0.70) !important;
    border: 1px solid rgba(244,184,28,0.18) !important;
    color: #f2f6fb !important;
    font-family: var(--font-body);
    font-size: 0.82rem;
    vertical-align: middle;
}

.thunder-content-box .myaac-content .TableContent tr:not(.LabelH):nth-child(odd) td {
    background: rgba(11,35,64,0.72) !important;
}

.thunder-content-box .myaac-content .TableContent tr:not(.LabelH):hover td {
    background: rgba(18,56,95,0.88) !important;
}

.thunder-content-box .myaac-content .TableContent td:first-child {
    color: #f4b81c !important;
    font-family: var(--font-ui);
    font-weight: 900;
    text-align: center;
}

.thunder-content-box .myaac-content .TableContent a {
    color: #f4b81c !important;
    font-weight: 800;
    text-decoration: none !important;
}

.thunder-content-box .myaac-content .TableContent a span,
.thunder-content-box .myaac-content .TableContent a span[style] {
    color: #fefeff !important;
}

.thunder-content-box .myaac-content .TableContent a:hover {
    color: #fefeff !important;
}

.thunder-content-box .myaac-content .TableContent a:hover span {
    color: #f4b81c !important;
}

.thunder-content-box .myaac-content .TableContent .size_xxs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 12px;
    background: linear-gradient(180deg, #12385f 0%, #071526 100%);
    border: 1px solid #cf9511;
    color: #fefeff !important;
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.thunder-content-box .myaac-content .TableContainer select {
    min-width: 150px;
    min-height: 32px;
    background: rgba(4,9,20,0.90) !important;
    border: 1px solid rgba(244,184,28,0.55) !important;
    color: #fefeff !important;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    padding: 5px 8px;
}

.thunder-content-box .myaac-content .TableContainer form table td {
    color: #f2f6fb !important;
    font-family: var(--font-ui);
    font-size: 0.76rem;
}

.thunder-content-box .myaac-content .TableContainer:has(select[name="category"]) .InnerTableContainer {
    padding: 12px !important;
    background:
        linear-gradient(180deg, rgba(18,56,95,0.40), rgba(4,9,20,0.18)),
        #071526 !important;
    border: 1px solid rgba(244,184,28,0.22);
    color: #fefeff !important;
}

.th-highscores-filter {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: end;
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(244,184,28,0.34);
    background: rgba(2,7,15,0.52);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.th-highscores-hero .th-highscores-filter {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px;
    margin-top: 18px;
    align-items: end;
}

.th-highscores-filter label {
    display: grid;
    gap: 5px;
    margin: 0;
}

.th-highscores-filter label span {
    color: #f4b81c !important;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.th-highscores-filter select {
    width: 100%;
    min-height: 36px;
    background: rgba(4,9,20,0.92) !important;
    border: 1px solid rgba(244,184,28,0.55) !important;
    color: #fefeff !important;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    padding: 6px 9px;
}

.th-highscores-filter button.th-highscores-submit,
.th-highscores-filter .th-highscores-submit {
    min-width: 126px;
    min-height: 36px;
    padding: 8px 14px !important;
    border: 2px solid #05080f !important;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    color: #040914 !important;
    font-family: var(--font-ui) !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 2px 2px 0 rgba(0,0,0,0.42);
}

.th-highscores-filter button.th-highscores-submit:hover,
.th-highscores-filter .th-highscores-submit:hover {
    filter: brightness(1.12);
}

.th-highscores-more-wrap {
    display: flex;
    justify-content: center;
    padding: 12px 10px 4px;
}

.th-highscores-more {
    min-width: 150px;
    min-height: 36px;
    padding: 8px 16px;
    border: 1px solid #05080f;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    color: #040914;
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 2px 2px 0 rgba(0,0,0,0.42);
}

.th-highscores-more:hover {
    filter: brightness(1.12);
}

.th-highscores-pagination {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
    padding: 12px 10px 4px;
}

.th-highscores-pagination > div:first-child {
    justify-self: start;
}

.th-highscores-pagination > div:last-child {
    justify-self: end;
}

.th-highscores-page-btn {
    min-width: 150px;
    min-height: 34px;
    padding: 7px 14px !important;
    background: linear-gradient(180deg, #0b2340 0%, #040914 100%) !important;
    border: 1px solid rgba(244,184,28,0.72) !important;
    color: #fefeff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 2px 2px 0 rgba(0,0,0,0.38);
}

.th-highscores-page-btn:hover {
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    border-color: #05080f !important;
    color: #040914 !important;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.28);
}

.thunder-content-box .myaac-content .TableContainer:has(select[name="category"]) .InnerTableContainer table,
.thunder-content-box .myaac-content .TableContainer:has(select[name="category"]) .InnerTableContainer tbody,
.thunder-content-box .myaac-content .TableContainer:has(select[name="category"]) .InnerTableContainer tr,
.thunder-content-box .myaac-content .TableContainer:has(select[name="category"]) .InnerTableContainer td {
    background: transparent !important;
    color: #fefeff !important;
}

.thunder-content-box .myaac-content .TableContainer:has(select[name="category"]) form table,
.thunder-content-box .myaac-content .TableContainer:has(select[name="category"]) form tbody {
    display: block;
    width: 100%;
}

.thunder-content-box .myaac-content .TableContainer:has(select[name="category"]) form tr {
    display: grid;
    grid-template-columns: 86px minmax(180px, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.thunder-content-box .myaac-content .TableContainer:has(select[name="category"]) form tr:last-child {
    margin-bottom: 0;
}

.thunder-content-box .myaac-content .TableContainer:has(select[name="category"]) form td {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.thunder-content-box .myaac-content .TableContainer:has(select[name="category"]) form td:first-child {
    color: #f4b81c !important;
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: right;
}

.thunder-content-box .myaac-content .TableContainer:has(select[name="category"]) form select {
    width: 100%;
    height: 36px;
}

.thunder-content-box .myaac-content .TableContainer:has(select[name="category"]) form .BigButton {
    min-width: 112px !important;
    margin-left: 4px;
}

@media (max-width: 760px) {
    .th-highscores-hero {
        padding: 15px;
    }

    .th-highscores-hero .th-highscores-filter {
        grid-template-columns: 1fr;
    }

    .thunder-content-box .myaac-content .TableContentContainer {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .thunder-content-box .myaac-content .TableContent {
        min-width: 560px;
    }

    .thunder-content-box .myaac-content .TableContainer select {
        width: 100%;
        min-width: 0;
    }

    .thunder-content-box .myaac-content .TableContainer:has(select[name="category"]) form tr {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .thunder-content-box .myaac-content .TableContainer:has(select[name="category"]) form td:first-child {
        text-align: left;
    }

    .thunder-content-box .myaac-content .TableContainer:has(select[name="category"]) form .BigButton {
        width: 100% !important;
        margin-left: 0;
    }

    .th-highscores-filter {
        grid-template-columns: 1fr;
    }

    .th-highscores-submit {
        width: 100%;
    }
}

/* ============================================================
   NEWS DETAIL / ARCHIVE
   MyAAC news content can bring inline parchment colors from admin.
   Force the rendered news page back into the ThunderOT palette.
   ============================================================ */
.thunder-content-box .myaac-content .NewsHeadline {
    margin: 8px 0 0;
}

.thunder-content-box .myaac-content .NewsHeadlineBackground {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px !important;
    background:
        linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    border: 1px solid #05080f;
    border-bottom: 2px solid #05080f;
    box-shadow: inset 0 0 0 1px rgba(254,254,255,0.25);
    color: #040914 !important;
    box-sizing: border-box;
}

.thunder-content-box .myaac-content .NewsHeadlineIcon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    image-rendering: pixelated;
}

.thunder-content-box .myaac-content .NewsHeadlineDate,
.thunder-content-box .myaac-content .NewsHeadlineText,
.thunder-content-box .myaac-content .NewsHeadlineAuthor {
    position: static !important;
    float: none !important;
    color: #040914 !important;
    font-family: var(--font-ui);
    line-height: 1.2;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.34) !important;
}

.thunder-content-box .myaac-content .NewsHeadlineDate {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.thunder-content-box .myaac-content .NewsHeadlineText {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.thunder-content-box .myaac-content .NewsHeadline + table {
    margin: 0 0 14px !important;
    background:
        linear-gradient(180deg, rgba(18,56,95,0.30), rgba(4,9,20,0.14)),
        #071526 !important;
    border: 1px solid rgba(244,184,28,0.28);
    border-top: 0;
    color: #fefeff !important;
    box-shadow: inset 0 0 0 1px rgba(254,254,255,0.04);
}

.thunder-content-box .myaac-content .NewsHeadline + table td {
    padding: 14px 16px !important;
    background: transparent !important;
    border: 0 !important;
    color: #fefeff !important;
}

.thunder-content-box .myaac-content .NewsHeadline + table p,
.thunder-content-box .myaac-content .NewsHeadline + table h1,
.thunder-content-box .myaac-content .NewsHeadline + table h2,
.thunder-content-box .myaac-content .NewsHeadline + table h3,
.thunder-content-box .myaac-content .NewsHeadline + table div,
.thunder-content-box .myaac-content .NewsHeadline + table span {
    background: transparent !important;
    color: #fefeff !important;
}

.thunder-content-box .myaac-content .NewsHeadline + table p {
    margin: 0 0 11px !important;
    font-family: var(--font-body);
    font-size: 0.95rem !important;
    line-height: 1.65;
}

.thunder-content-box .myaac-content .NewsHeadline + table h1,
.thunder-content-box .myaac-content .NewsHeadline + table h2,
.thunder-content-box .myaac-content .NewsHeadline + table h3 {
    border-bottom: 1px solid rgba(244,184,28,0.28) !important;
    color: #f4b81c !important;
    text-shadow: 1px 1px 0 #000 !important;
}

.thunder-content-box .myaac-content .NewsHeadline + table strong,
.thunder-content-box .myaac-content .NewsHeadline + table b {
    color: #f4b81c !important;
    font-weight: 900;
}

.thunder-content-box .myaac-content .NewsHeadline + table a {
    color: #f4b81c !important;
    font-weight: 800;
}

.thunder-content-box .myaac-content .NewsHeadline + table img {
    max-width: min(100%, 520px) !important;
    height: auto !important;
    padding: 3px;
    background: rgba(4,9,20,0.82);
    border: 1px solid rgba(244,184,28,0.42);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    box-sizing: border-box;
}

.thunder-content-box .myaac-content .CaptionInnerContainer .Text {
    color: #040914 !important;
}

.thunder-content-box .myaac-content .TableContent tr[bgcolor] td {
    background: rgba(7,21,38,0.74) !important;
    border: 1px solid rgba(244,184,28,0.18) !important;
    color: #fefeff !important;
    font-family: var(--font-body);
    font-size: 0.86rem;
    vertical-align: middle;
}

.thunder-content-box .myaac-content .TableContent tr[bgcolor]:nth-child(even) td {
    background: rgba(11,35,64,0.78) !important;
}

.thunder-content-box .myaac-content .TableContent tr[bgcolor]:hover td {
    background: rgba(18,56,95,0.90) !important;
}

.thunder-content-box .myaac-content .TableContent tr[bgcolor] td:first-child {
    width: 42px !important;
    text-align: center;
}

.thunder-content-box .myaac-content .TableContent tr[bgcolor] td:nth-child(2) {
    width: 92px;
    color: #d8e9f7 !important;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.thunder-content-box .myaac-content .TableContent tr[bgcolor] img {
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
}

.thunder-content-box .myaac-content .TableContent tr[bgcolor] a,
.thunder-content-box .myaac-content .TableContent tr[bgcolor] b {
    color: #fefeff !important;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-decoration: none !important;
}

.thunder-content-box .myaac-content .TableContent tr[bgcolor] a:hover {
    color: #f4b81c !important;
}

@media (max-width: 560px) {
    .thunder-content-box .myaac-content .NewsHeadlineBackground {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 8px 10px !important;
    }

    .thunder-content-box .myaac-content .NewsHeadlineText {
        flex-basis: calc(100% - 30px);
        font-size: 0.72rem;
        line-height: 1.35;
    }

    .thunder-content-box .myaac-content .NewsHeadline + table td {
        padding: 12px 10px !important;
    }

    .thunder-content-box .myaac-content .TableContent tr[bgcolor] td {
        padding: 7px 8px !important;
    }

    .thunder-content-box .myaac-content .TableContent tr[bgcolor] td:nth-child(2) {
        width: 76px;
        font-size: 0.66rem;
    }
}

.th-highscores-row {
    min-height: 76px;
}

.th-highscores-row td {
    padding: 8px 10px !important;
    border-bottom: 1px solid rgba(91,80,37,0.32) !important;
    background: rgba(254,254,255,0.18) !important;
    color: #040206 !important;
    vertical-align: middle !important;
}

.th-highscores-row:nth-child(even) td {
    background: rgba(244,184,28,0.14) !important;
}

.th-rank-cell {
    width: 52px;
    font-family: var(--font-ui);
    font-weight: 900;
    color: #271b0b !important;
    text-align: center;
}

.th-outfit-cell {
    width: 82px;
    min-width: 82px;
}

.th-highscore-outfit {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    background: rgba(4,2,6,0.16);
    border: 1px solid rgba(91,80,37,0.62);
    box-shadow: inset 0 0 0 1px rgba(254,254,255,0.2);
}

.th-highscore-outfit img {
    position: static !important;
    width: auto !important;
    height: 68px !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.th-player-online,
.th-player-offline {
    font-family: var(--font-title);
    font-weight: 700;
    color: #0c5a90 !important;
}

.th-player-online::after {
    content: ' online';
    color: #326a7d;
    font-family: var(--font-ui);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
}

.th-player-offline::after {
    content: ' offline';
    color: #5b5025;
    font-family: var(--font-ui);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
}

.th-vocation-cell,
.th-value-cell {
    text-align: right;
    color: #040206;
}

.th-value-cell {
    font-family: var(--font-ui);
    font-weight: 800;
    color: #271b0b;
}

#thunder-mobile-bar {
    display: none;
}

/* ============================================================
   RESPONSIVO — TABLET (< 1100px): comprimir sidebars
   ============================================================ */
@media (max-width: 1100px) {
    :root {
        --left-w: 160px;
        --right-w: 170px;
    }
}

/* ============================================================
   RESPONSIVO — MOBILE (< 900px): layout único
   ============================================================ */
@media (max-width: 900px) {

    /* Esconder logo/header/statusbar desktop */
    #thunder-header,
    #thunder-status-bar { display: none; }

    /* Mobile top bar */
    #thunder-mobile-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 14px;
        height: 52px;
        background: rgba(8, 10, 22, 0.97);
        border-bottom: 2px solid var(--t-border);
        position: sticky;
        top: 0;
        z-index: 200;
        gap: 10px;
    }

    #thunder-mobile-logo {
        height: 36px;
        width: auto;
        image-rendering: auto;
    }

    /* Hamburger button */
    #thunder-hamburger {
        background: none;
        border: 2px solid var(--t-border);
        padding: 6px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 36px;
        height: 36px;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }
    #thunder-hamburger span {
        display: block;
        width: 18px;
        height: 2px;
        background: var(--t-gold);
        transition: transform 0.2s, opacity 0.2s;
    }
    #thunder-hamburger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    #thunder-hamburger.active span:nth-child(2) { opacity: 0; }
    #thunder-hamburger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* Overlay escuro ao abrir o menu */
    #thunder-mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        z-index: 150;
    }
    #thunder-mobile-overlay.active { display: block; }

    /* Body bloqueado ao abrir menu */
    body.menu-open { overflow: hidden; }

    /* Layout: coluna única */
    #thunder-main-wrapper {
        grid-template-columns: 1fr;
        padding: 0 8px;
        gap: 8px;
        margin-top: 8px;
    }

    /* LEFT SIDEBAR — drawer mobile (slide from left) */
    #thunder-left {
        position: fixed;
        top: 0;
        left: -280px;
        width: 260px;
        height: 100vh;
        overflow-y: auto;
        background: rgba(10, 14, 30, 0.99);
        border-right: 2px solid var(--t-border);
        z-index: 180;
        transition: left 0.25s ease;
        padding: 56px 8px 20px;
        display: block !important;
    }
    #thunder-left.mobile-open {
        left: 0;
    }

    /* RIGHT SIDEBAR — aparece abaixo do conteúdo no mobile */
    #thunder-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    /* Boosted e top players lado a lado no mobile */
    #thunder-right > .thunder-box {
        margin-bottom: 0;
    }
    #thunder-right > .thunder-sidebar-download {
        grid-column: 1 / -1;
        margin-bottom: 2px;
    }
    /* Outros boxes (MyAAC) ocupam coluna inteira */
    #thunder-right > .TableContainer {
        grid-column: 1 / -1;
    }

    /* Status bar mobile — só ícones, sem labels de texto */
    .social-label { display: none; }
    #thunder-status-bar { gap: 10px; padding: 5px 10px; flex-wrap: wrap; }
    #thunder-status-bar .thunder-sep { display: none; }

    /* Stats bar mobile */
    .thunder-stats-bar {
        flex-wrap: wrap;
        gap: 0;
    }
    .thunder-stat-item { padding: 6px 12px; }
    .thunder-stat-sep { display: none; }

    /* Vocações: 2 por linha no mobile */
    .thunder-voc-grid { grid-template-columns: repeat(2, 1fr); }

    /* Quick links: 2 por linha */
    .thunder-quicklinks { grid-template-columns: repeat(2, 1fr); }

    /* Footer */
    #thunder-footer { margin-top: 16px; }
}

/* ============================================================
   RESPONSIVO — SMALL MOBILE (< 480px)
   ============================================================ */
@media (max-width: 480px) {
    .thunder-boosted-wrap { flex-direction: column; gap: 4px; }
    .thunder-boosted-card { display: flex; align-items: center; gap: 8px; text-align: left; }
    .thunder-boosted-img,
    .thunder-boosted-bg { margin: 0; flex-shrink: 0; }

    .thunder-top-table th,
    .thunder-top-table td { font-size: 0.65rem; padding: 4px 4px; }
    .outfit-col { display: none; }

    .thunder-voc-grid { grid-template-columns: 1fr; }
    .thunder-quicklinks { grid-template-columns: repeat(2, 1fr); }

    #thunder-right {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   NAVY + GOLD REBALANCE
   Azul marinho dominante com topos amarelos para contraste.
   ============================================================ */
:root {
    --t-blue-accent: #12385f;
    --t-blue-accent-hi: #1b4f7a;
    --t-blue-accent-dark: #071526;
    --t-blue-ink: #040914;
    --t-gold-accent: #f4b81c;
    --t-gold-accent-dark: #cf9511;
    --t-parch-blue-wash: rgba(7,21,38,0.18);
}

.thunder-box,
.TableContainer,
.thunder-section-box,
.thunder-content-box,
#thunder-left .thunder-box {
    background:
        linear-gradient(90deg, rgba(244,184,28,0.10) 0 5px, transparent 5px calc(100% - 5px), rgba(244,184,28,0.10) calc(100% - 5px)),
        linear-gradient(180deg, #12385f 0%, #071526 48%, #040914 100%) !important;
    outline-color: var(--t-blue-accent) !important;
}

.thunder-section-box,
.thunder-content-box {
    background:
        linear-gradient(90deg, rgba(244,184,28,0.10) 0 7px, transparent 7px calc(100% - 7px), rgba(244,184,28,0.10) calc(100% - 7px)),
        linear-gradient(180deg, rgba(18,56,95,0.96) 0%, rgba(7,21,38,0.98) 100%) !important;
}

.thunder-box-header,
.thunder-section-header,
.CaptionInnerContainer,
.th-highscores-table .LabelH td,
.thunder-top-table th,
.thunder-content-box .myaac-content th,
.TableContainer > table > tbody > tr:first-child > td {
    background: linear-gradient(180deg, #f4b81c 0%, #cf9511 100%) !important;
    border-bottom-color: #071526 !important;
    color: #040914 !important;
    box-shadow:
        inset 0 0 0 1px rgba(254,254,255,0.20),
        0 1px 0 rgba(39,27,11,0.55) !important;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.35) !important;
}

.thunder-box-header i,
.thunder-section-header i,
.stat-icon,
.CaptionInnerContainer .Text,
.thunder-online-count.online i {
    color: #071526 !important;
}

#thunder-left .thunder-box-header,
.thunder-menu-header {
    background:
        linear-gradient(90deg, rgba(39,27,11,0.18) 0 5px, transparent 5px calc(100% - 5px), rgba(39,27,11,0.18) calc(100% - 5px)),
        linear-gradient(180deg, #ffe082 0%, #f4b81c 28%, #cf9511 100%) !important;
    outline-color: #071526 !important;
    color: #040914 !important;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.42) !important;
}

.thunder-menu-list {
    background:
        linear-gradient(90deg, rgba(244,184,28,0.06), transparent 16%, transparent 84%, rgba(244,184,28,0.06)),
        linear-gradient(180deg, #0b2340 0%, #071526 100%) !important;
    border-color: #12385f !important;
}

.thunder-menu-list li a:hover,
.TableContent a:hover {
    color: var(--t-gold-accent) !important;
}

.thunder-stats-bar,
.thunder-btn-orange,
.thunder-btn-gold,
.TableContainer .BigButtonText {
    background: linear-gradient(180deg, #12385f 0%, #071526 100%) !important;
    border-color: #f4b81c !important;
    color: #fefeff !important;
}

.thunder-btn-brown {
    color: var(--t-gold-accent) !important;
}

.thunder-boosted-card,
.th-highscores-row:nth-child(even) td {
    background: rgba(7,21,38,0.10) !important;
}

.thunder-box::before,
.TableContainer::before,
.thunder-section-box::before,
.thunder-content-box::before,
.thunder-box::after,
.TableContainer::after,
.thunder-section-box::after,
.thunder-content-box::after {
    background:
        radial-gradient(circle at 8px 50%, #5b5025 0 3px, transparent 4px),
        radial-gradient(circle at calc(100% - 8px) 50%, #5b5025 0 3px, transparent 4px),
        linear-gradient(180deg, #ffe082 0%, #f4b81c 35%, #cf9511 100%) !important;
    box-shadow:
        -7px 0 0 -2px #271b0b,
        7px 0 0 -2px #271b0b,
        -11px 0 0 -4px #071526,
        11px 0 0 -4px #071526,
        0 2px 0 rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(254,254,255,0.55) !important;
}

.thunder-section-box::before,
.thunder-content-box::before,
.thunder-section-box::after,
.thunder-content-box::after {
    box-shadow:
        -10px 0 0 -2px #271b0b,
        10px 0 0 -2px #271b0b,
        -15px 0 0 -5px #071526,
        15px 0 0 -5px #071526,
        0 2px 0 rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(254,254,255,0.55) !important;
}

.thunder-menu-header::before,
.thunder-menu-header::after {
    background:
        radial-gradient(circle at 50% 50%, #5b5025 0 3px, transparent 4px),
        linear-gradient(90deg, #271b0b 0%, #cf9511 38%, #f4b81c 72%, #5b5025 100%) !important;
}

/* ============================================================
   NAVY CONTRAST FIX
   Menos amarelo dominante, azul marinho como base e leitura clara.
   ============================================================ */
:root {
    --t-navy-900: #040914;
    --t-navy-800: #071526;
    --t-navy-700: #0b2340;
    --t-navy-600: #12385f;
    --t-gold-soft: #f4b81c;
    --t-gold-deep: #cf9511;
    --t-white-soft: #fefeff;
}

.thunder-box,
.TableContainer,
.thunder-section-box,
.thunder-content-box,
#thunder-left .thunder-box {
    background:
        linear-gradient(90deg, rgba(244,184,28,0.05) 0 5px, transparent 5px calc(100% - 5px), rgba(244,184,28,0.05) calc(100% - 5px)),
        linear-gradient(180deg, var(--t-navy-600) 0%, var(--t-navy-800) 46%, var(--t-navy-900) 100%) !important;
    border-color: #05080f !important;
    outline-color: var(--t-navy-600) !important;
}

.thunder-box::before,
.TableContainer::before,
.thunder-section-box::before,
.thunder-content-box::before,
.thunder-box::after,
.TableContainer::after,
.thunder-section-box::after,
.thunder-content-box::after {
    background:
        radial-gradient(circle at 8px 50%, #cf9511 0 3px, transparent 4px),
        radial-gradient(circle at calc(100% - 8px) 50%, #cf9511 0 3px, transparent 4px),
        linear-gradient(180deg, #1b4f7a 0%, #12385f 44%, #071526 100%) !important;
    border-color: #05080f !important;
    box-shadow:
        -7px 0 0 -2px #05080f,
        7px 0 0 -2px #05080f,
        -11px 0 0 -4px #12385f,
        11px 0 0 -4px #12385f,
        0 2px 0 rgba(0,0,0,0.42),
        inset 0 1px 0 rgba(254,254,255,0.16) !important;
}

.thunder-section-box::before,
.thunder-content-box::before,
.thunder-section-box::after,
.thunder-content-box::after {
    box-shadow:
        -10px 0 0 -2px #05080f,
        10px 0 0 -2px #05080f,
        -15px 0 0 -5px #12385f,
        15px 0 0 -5px #12385f,
        0 2px 0 rgba(0,0,0,0.42),
        inset 0 1px 0 rgba(254,254,255,0.16) !important;
}

.thunder-box-header,
.thunder-section-header,
.CaptionInnerContainer,
.th-highscores-table .LabelH td,
.thunder-top-table th,
.thunder-content-box .myaac-content th,
.TableContainer > table > tbody > tr:first-child > td,
#thunder-left .thunder-box-header,
.thunder-menu-header {
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    border-color: #05080f !important;
    border-bottom-color: #05080f !important;
    color: #040914 !important;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.34) !important;
}

.thunder-box-header i,
.thunder-section-header i,
.CaptionInnerContainer .Text,
.menu-arrow {
    color: #040914 !important;
}

.thunder-stats-bar,
#thunder-status-bar {
    background: linear-gradient(180deg, var(--t-navy-700) 0%, var(--t-navy-900) 100%) !important;
    border-color: var(--t-navy-600) !important;
}

.thunder-stats-bar i,
#thunder-status-bar i,
.stat-icon,
.stat-value,
.stat-label,
.thunder-statusbar-link,
.thunder-social,
.thunder-sep {
    color: var(--t-white-soft) !important;
}

.thunder-online-count.online,
.thunder-online-count.online i {
    color: #50d050 !important;
}

.thunder-ticker-list,
.thunder-article-body,
.thunder-box-body,
.thunder-menu-list {
    background: rgba(7,21,38,0.88) !important;
    color: var(--t-white-soft) !important;
}

.thunder-ticker-item,
.thunder-article-text,
.thunder-article-meta,
.thunder-boosted-name,
.thunder-boosted-tag,
.sp-info span,
.sp-info a,
.thunder-menu-list li a,
.TableContent td,
.TableContent,
.thunder-content-box .myaac-content,
.thunder-content-box .myaac-content td {
    color: var(--t-white-soft) !important;
}

.thunder-article-title a,
.thunder-ticker-item a,
.TableContent a,
.thunder-section-link {
    color: #f4b81c !important;
}

.thunder-article-title a:hover,
.thunder-ticker-item a:hover,
.TableContent a:hover,
.thunder-section-link:hover,
.sp-info a:hover,
.thunder-menu-list li a:hover {
    color: #fff4bf !important;
}

.ticker-date,
.ticker-arrow,
.thunder-ornament {
    color: #cf9511 !important;
}

.ticker-text {
    color: var(--t-white-soft) !important;
}

.ticker-text strong {
    color: #f4b81c !important;
}

.thunder-news-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.thunder-news-item {
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(244,184,28,0.18);
}

.thunder-news-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.thunder-news-item .thunder-read-more {
    margin-top: 6px;
}

.thunder-btn-blue,
.thunder-btn-green,
.thunder-btn-brown,
.thunder-btn-orange,
.thunder-btn-gold,
.TableContainer .BigButtonText {
    background: linear-gradient(180deg, #1b4f7a 0%, #0b2340 100%) !important;
    border-color: #071526 !important;
    color: #fefeff !important;
}

.thunder-btn:hover,
.TableContainer .BigButtonText:hover {
    filter: brightness(1.15);
}

.thunder-menu-header::before,
.thunder-menu-header::after {
    background:
        radial-gradient(circle at 50% 50%, #271b0b 0 3px, transparent 4px),
        linear-gradient(90deg, #5b5025 0%, #cf9511 42%, #f4b81c 100%) !important;
}

/* ============================================================
   ACCOUNT PAGES CACHE-SAFE OVERRIDES
   Corrige login/manage/logout mesmo quando o Twig antigo esta cacheado.
   ============================================================ */
.tl-card,
.tm-panel,
.tm-stats-bar,
.rlo-card {
    border-color: #071526 !important;
}

.tl-header,
.tm-panel-head,
.rlo-head {
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    border-color: #071526 !important;
    border-bottom-color: #071526 !important;
    color: #040914 !important;
}

.tl-header .tl-title,
.thunder-content-box .myaac-content .tl-header .tl-title,
.tm-panel-head,
.tm-panel-head i,
.rlo-head h1,
.thunder-content-box .myaac-content .rlo-head h1 {
    color: #040914 !important;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.35) !important;
}

.tl-header .tl-ornament,
.rlo-ornament {
    color: #071526 !important;
}

.tl-btn-submit,
.tm-btn-gold,
.tm-btn-outline,
.rlo-primary {
    background: linear-gradient(180deg, #1b4f7a 0%, #0b2340 100%) !important;
    border-color: #071526 !important;
    color: #fefeff !important;
}

.tl-btn-register {
    background: linear-gradient(180deg, #071526 0%, #040914 100%) !important;
    border-color: #cf9511 !important;
    color: #f4b81c !important;
}

.tl-input {
    background: rgba(254,254,255,0.34) !important;
    border-color: #5b5025 !important;
    color: #040914 !important;
}

.tm-hero,
.thunder-content-box .myaac-content .tm-hero,
.rlo-card {
    background: linear-gradient(180deg, #071526 0%, #040914 100%) !important;
    border-color: #cf9511 !important;
}

.tm-hero-eyebrow,
.thunder-content-box .myaac-content .tm-hero-eyebrow,
.rlo-msg,
.thunder-content-box .myaac-content .rlo-msg,
.rlo-links a {
    color: #fefeff !important;
}

.tm-hero-name,
.thunder-content-box .myaac-content .tm-hero-name,
.tm-avatar--vip,
.tm-badge--vip,
.rlo-title,
.thunder-content-box .myaac-content .rlo-title,
.rlo-msg strong,
.rlo-links a:hover {
    color: #f4b81c !important;
}

.tm-badge--chars {
    color: #50d050 !important;
    border-color: #50d050 !important;
}

.tc-header,
.thunder-content-box .myaac-content .tc-header {
    background: #040206 !important;
    border-bottom-color: #cf9511 !important;
    color: #f4b81c !important;
}

.tc-header .tc-title,
.thunder-content-box .myaac-content .tc-header .tc-title {
    color: #f4b81c !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    text-shadow: 1px 1px 0 #000 !important;
}

.tc-header .tc-header-ornament,
.thunder-content-box .myaac-content .tc-header .tc-header-ornament {
    color: #f4b81c !important;
}

.tc-header-sub,
.thunder-content-box .myaac-content .tc-header-sub {
    color: #040206 !important;
}

/* ============================================================
   SUCCESS PAGES
   Confirmation screens after account and character creation.
   ============================================================ */
.ts-success,
.thunder-content-box .myaac-content .ts-success {
    max-width: 640px;
    margin: 10px auto 18px;
    background:
        linear-gradient(180deg, rgba(254,254,255,0.12), rgba(254,254,255,0)),
        #d9bd86;
    border: 3px solid #071526;
    outline: 1px solid #cf9511;
    box-shadow:
        0 4px 0 rgba(0,0,0,0.45),
        inset 0 0 0 1px rgba(255,240,200,0.25),
        inset 0 0 34px rgba(39,27,11,0.12);
    color: #040914;
}

.ts-success-head,
.thunder-content-box .myaac-content .ts-success-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(180deg, #f4b81c 0%, #d89f18 100%);
    border-bottom: 2px solid #071526;
}

.ts-success-mark,
.thunder-content-box .myaac-content .ts-success-mark {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    background: #071526;
    border: 2px solid #5b5025;
    color: #f4b81c;
    font-size: 1rem;
    box-shadow: inset 0 0 0 1px rgba(244,184,28,0.22);
}

.ts-success-badge,
.thunder-content-box .myaac-content .ts-success-badge {
    display: block;
    margin-bottom: 2px;
    color: #5b2608;
    font-family: var(--font-ui);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    line-height: 1;
}

.ts-success-title,
.thunder-content-box .myaac-content .ts-success-title {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #040914 !important;
    font-family: var(--font-title);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.35) !important;
}

.ts-success-body,
.thunder-content-box .myaac-content .ts-success-body {
    padding: 18px 22px;
    color: #040914;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.65;
    text-align: center;
}

.ts-success-body b,
.thunder-content-box .myaac-content .ts-success-body b {
    color: #5b2608;
    font-weight: 800;
}

.ts-success-actions,
.thunder-content-box .myaac-content .ts-success-actions {
    display: flex;
    justify-content: center;
    padding: 0 18px 18px;
}

.ts-success-btn,
.thunder-content-box .myaac-content .ts-success-btn {
    min-width: 130px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(180deg, #12385f 0%, #071526 100%);
    border: 2px solid #cf9511;
    color: #fefeff !important;
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.45);
}

.ts-success-btn:hover,
.thunder-content-box .myaac-content .ts-success-btn:hover {
    border-color: #f4b81c;
    color: #f4b81c !important;
}

@media (max-width: 560px) {
    .ts-success-head,
    .thunder-content-box .myaac-content .ts-success-head {
        align-items: flex-start;
        padding: 12px 14px;
    }

    .ts-success-title,
    .thunder-content-box .myaac-content .ts-success-title {
        font-size: 0.88rem;
        line-height: 1.25;
    }

    .ts-success-body,
    .thunder-content-box .myaac-content .ts-success-body {
        padding: 15px 14px;
        font-size: 0.88rem;
    }
}

/* News pages final palette override */
.thunder-content-box .myaac-content:has(.NewsHeadline),
.thunder-content-box .myaac-content:has(.TableContent tr[bgcolor]) {
    background: linear-gradient(180deg, #071526 0%, #040914 100%) !important;
    color: #fefeff !important;
}

.thunder-content-box .myaac-content:has(.NewsHeadline) table,
.thunder-content-box .myaac-content:has(.NewsHeadline) tbody,
.thunder-content-box .myaac-content:has(.NewsHeadline) tr,
.thunder-content-box .myaac-content:has(.NewsHeadline) td,
.thunder-content-box .myaac-content:has(.NewsHeadline) p,
.thunder-content-box .myaac-content:has(.TableContent tr[bgcolor]) .InnerTableContainer,
.thunder-content-box .myaac-content:has(.TableContent tr[bgcolor]) .TableContentContainer,
.thunder-content-box .myaac-content:has(.TableContent tr[bgcolor]) table,
.thunder-content-box .myaac-content:has(.TableContent tr[bgcolor]) tbody,
.thunder-content-box .myaac-content:has(.TableContent tr[bgcolor]) tr,
.thunder-content-box .myaac-content:has(.TableContent tr[bgcolor]) td {
    background-color: transparent !important;
    background-image: none !important;
    color: #fefeff !important;
}

.thunder-content-box .myaac-content:has(.NewsHeadline) .NewsHeadline + table,
.thunder-content-box .myaac-content:has(.TableContent tr[bgcolor]) .TableContent {
    background:
        linear-gradient(180deg, rgba(18,56,95,0.34), rgba(4,9,20,0.16)),
        #071526 !important;
}

.thunder-content-box .myaac-content:has(.NewsHeadline) strong,
.thunder-content-box .myaac-content:has(.NewsHeadline) b,
.thunder-content-box .myaac-content:has(.NewsHeadline) a,
.thunder-content-box .myaac-content:has(.TableContent tr[bgcolor]) a:hover {
    color: #f4b81c !important;
}

/* Lost account disabled state */
.th-lost-disabled {
    max-width: 640px;
    margin: 8px auto 12px;
    background:
        linear-gradient(180deg, rgba(18,56,95,0.36), rgba(4,9,20,0.16)),
        #071526;
    border: 2px solid rgba(244,184,28,0.48);
    box-shadow: 0 4px 0 rgba(0,0,0,0.42), inset 0 0 0 1px rgba(254,254,255,0.06);
    color: #fefeff;
}

.th-lost-disabled__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border-bottom: 2px solid #05080f;
    color: #040914;
}

.th-lost-disabled__icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    background: #071526;
    border: 2px solid #5b5025;
    color: #f4b81c;
}

.th-lost-disabled__eyebrow {
    display: block;
    margin-bottom: 2px;
    color: #5b2608;
    font-family: var(--font-ui);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.th-lost-disabled h1 {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #040914 !important;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.34) !important;
}

.th-lost-disabled__body {
    padding: 16px 18px 6px;
}

.th-lost-disabled__body p {
    margin: 0 0 10px;
    color: #fefeff !important;
    font-family: var(--font-body);
    font-size: 0.96rem;
    line-height: 1.55;
    text-align: center;
}

.th-lost-disabled__actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 6px 18px 18px;
}

.th-lost-disabled__btn {
    min-width: 130px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    background: linear-gradient(180deg, #12385f 0%, #071526 100%);
    border: 2px solid #cf9511;
    color: #fefeff !important;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-decoration: none !important;
}

.th-lost-disabled__btn:hover {
    border-color: #f4b81c;
    color: #f4b81c !important;
}

.th-lost-disabled__btn--ghost {
    background: rgba(4,9,20,0.55);
}

/* Spells page - ThunderOT palette override */
.thunder-content-box .myaac-content .roka-spells-wrap {
    color: #fefeff !important;
}

.thunder-content-box .myaac-content .roka-spells-hero {
    padding: 20px 22px !important;
    margin: 0 0 14px !important;
    background:
        linear-gradient(180deg, rgba(18,56,95,0.42), rgba(4,9,20,0.16)),
        #071526 !important;
    border: 2px solid rgba(244,184,28,0.42) !important;
    border-radius: 0 !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.35), inset 0 0 0 1px rgba(254,254,255,0.05);
}

.thunder-content-box .myaac-content .roka-spells-hero-bg {
    display: none !important;
}

.thunder-content-box .myaac-content .roka-spells-hero-content h1 {
    margin: 0 0 6px !important;
    color: #f4b81c !important;
    font-family: var(--font-title) !important;
    font-size: 1.18rem !important;
    letter-spacing: 1.2px !important;
    text-shadow: 1px 1px 0 #000 !important;
}

.thunder-content-box .myaac-content .roka-spells-hero-content h1 i {
    color: #f4b81c !important;
}

.thunder-content-box .myaac-content .roka-spells-hero-content p {
    margin: 0 !important;
    color: #d8e9f7 !important;
    font-family: var(--font-body) !important;
    font-size: 0.92rem !important;
}

.thunder-content-box .myaac-content .roka-spells-filters {
    padding: 14px !important;
    margin-bottom: 12px !important;
    background:
        linear-gradient(180deg, rgba(18,56,95,0.34), rgba(4,9,20,0.12)),
        #071526 !important;
    border: 1px solid rgba(244,184,28,0.28) !important;
    border-radius: 0 !important;
    gap: 12px !important;
}

.thunder-content-box .myaac-content .roka-spell-search-wrap {
    min-height: 38px;
    background: rgba(4,9,20,0.82) !important;
    border: 1px solid rgba(244,184,28,0.36) !important;
    border-radius: 0 !important;
    color: #f4b81c !important;
}

.thunder-content-box .myaac-content .roka-spell-search-input {
    color: #fefeff !important;
    font-family: var(--font-ui) !important;
}

.thunder-content-box .myaac-content .roka-spell-search-input::placeholder {
    color: rgba(254,254,255,0.58) !important;
}

.thunder-content-box .myaac-content .roka-filter-label {
    color: #f4b81c !important;
    font-family: var(--font-ui) !important;
    font-size: 0.64rem !important;
    font-weight: 900 !important;
}

.thunder-content-box .myaac-content .roka-filter-pill {
    background: rgba(4,9,20,0.72) !important;
    border: 1px solid rgba(216,233,247,0.20) !important;
    border-radius: 0 !important;
    color: #fefeff !important;
    font-family: var(--font-ui) !important;
}

.thunder-content-box .myaac-content .roka-filter-pill:hover,
.thunder-content-box .myaac-content .roka-filter-pill.active {
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    border-color: #05080f !important;
    color: #040914 !important;
}

.thunder-content-box .myaac-content .roka-spell-count {
    margin: 0 0 10px !important;
    color: #d8e9f7 !important;
    font-family: var(--font-ui) !important;
}

.thunder-content-box .myaac-content .roka-spell-count span {
    color: #f4b81c !important;
}

.thunder-content-box .myaac-content .roka-table-responsive {
    overflow-x: auto;
    border: 1px solid rgba(244,184,28,0.34);
    background: #071526;
}

.thunder-content-box .myaac-content .roka-spell-table {
    min-width: 760px;
    border-collapse: collapse !important;
    background: rgba(4,9,20,0.78) !important;
}

.thunder-content-box .myaac-content .roka-spell-table thead th {
    padding: 9px 10px !important;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    border: 1px solid #05080f !important;
    color: #040914 !important;
    font-family: var(--font-ui) !important;
    font-size: 0.66rem !important;
    font-weight: 900 !important;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.34) !important;
}

.thunder-content-box .myaac-content .roka-spell-table td {
    padding: 9px 10px !important;
    background: rgba(7,21,38,0.76) !important;
    border: 1px solid rgba(244,184,28,0.16) !important;
    color: #fefeff !important;
    font-family: var(--font-body) !important;
    font-size: 0.86rem !important;
}

.thunder-content-box .myaac-content .roka-spell-table tbody tr:nth-child(even) td {
    background: rgba(11,35,64,0.78) !important;
}

.thunder-content-box .myaac-content .roka-spell-table tbody tr:hover td {
    background: rgba(18,56,95,0.92) !important;
}

.thunder-content-box .myaac-content .roka-spell-link,
.thunder-content-box .myaac-content .roka-spell-num.gold {
    color: #f4b81c !important;
}

.thunder-content-box .myaac-content .roka-spell-words {
    background: rgba(4,9,20,0.76) !important;
    border: 1px solid rgba(216,233,247,0.18) !important;
    color: #d8e9f7 !important;
}

.thunder-content-box .myaac-content .roka-spell-badge {
    border-radius: 0 !important;
    font-family: var(--font-ui) !important;
}

.thunder-content-box .myaac-content .roka-spell-badge.attack {
    background: rgba(207,149,17,0.18) !important;
    border-color: rgba(244,184,28,0.44) !important;
    color: #f4b81c !important;
}

.thunder-content-box .myaac-content .roka-spell-badge.healing {
    background: rgba(80,208,80,0.14) !important;
    border-color: rgba(80,208,80,0.38) !important;
    color: #50d050 !important;
}

.thunder-content-box .myaac-content .roka-spell-badge.support {
    background: rgba(93,186,255,0.14) !important;
    border-color: rgba(93,186,255,0.38) !important;
    color: #5dbaff !important;
}

.thunder-content-box .myaac-content .roka-spell-num,
.thunder-content-box .myaac-content .roka-spell-num.blue {
    color: #fefeff !important;
}

.thunder-content-box .myaac-content .roka-spell-empty-msg {
    background: #071526 !important;
    border: 1px solid rgba(244,184,28,0.28);
    color: #fefeff !important;
}

/* Server info page */
.thunder-content-box .myaac-content:has(.SmallBox) {
    background: linear-gradient(180deg, #071526 0%, #040914 100%) !important;
    color: #fefeff !important;
}

.thunder-content-box .myaac-content:has(.SmallBox) h1 {
    margin: 0 0 12px !important;
    padding: 10px 12px !important;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    border: 2px solid #05080f !important;
    color: #040914 !important;
    font-family: var(--font-title) !important;
    font-size: 1.18rem !important;
    font-weight: 900 !important;
    letter-spacing: 1.2px !important;
    text-align: center !important;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.34) !important;
}

.thunder-content-box .myaac-content:has(.SmallBox) .SmallBox,
.thunder-content-box .myaac-content:has(.SmallBox) .Message,
.thunder-content-box .myaac-content:has(.SmallBox) .MessageContainer {
    background: #071526 !important;
    border-color: rgba(244,184,28,0.34) !important;
    color: #fefeff !important;
}

.thunder-content-box .myaac-content:has(.SmallBox) .BoxFrameHorizontal,
.thunder-content-box .myaac-content:has(.SmallBox) .BoxFrameEdgeLeftTop,
.thunder-content-box .myaac-content:has(.SmallBox) .BoxFrameEdgeRightTop,
.thunder-content-box .myaac-content:has(.SmallBox) .BoxFrameEdgeRightBottom,
.thunder-content-box .myaac-content:has(.SmallBox) .BoxFrameEdgeLeftBottom,
.thunder-content-box .myaac-content:has(.SmallBox) .BoxFrameVerticalLeft,
.thunder-content-box .myaac-content:has(.SmallBox) .BoxFrameVerticalRight {
    display: none !important;
}

.thunder-content-box .myaac-content:has(.SmallBox) .SmallBox table,
.thunder-content-box .myaac-content:has(.SmallBox) .SmallBox tbody,
.thunder-content-box .myaac-content:has(.SmallBox) .SmallBox tr,
.thunder-content-box .myaac-content:has(.SmallBox) .SmallBox td {
    background: transparent !important;
    border: 0 !important;
    color: #fefeff !important;
}

.thunder-content-box .myaac-content:has(.SmallBox) a {
    color: #f4b81c !important;
    font-family: var(--font-ui);
    font-weight: 900;
    text-decoration: none !important;
}

.thunder-content-box .myaac-content:has(.SmallBox) a:hover {
    color: #fefeff !important;
}

.thunder-content-box .myaac-content:has(.SmallBox) > br + div[style*="display: flex"] {
    gap: 16px;
    align-items: flex-start;
    margin: 16px 0 0;
}

.thunder-content-box .myaac-content:has(.SmallBox) > br + div[style*="display: flex"] > div:first-child {
    min-height: 150px;
    max-height: none !important;
    margin-top: 0 !important;
    padding: 16px 14px;
    background:
        linear-gradient(180deg, rgba(18,56,95,0.38), rgba(4,9,20,0.12)),
        #071526 !important;
    border: 1px solid rgba(244,184,28,0.34);
    box-shadow: inset 0 0 0 1px rgba(254,254,255,0.04), 0 3px 0 rgba(0,0,0,0.32);
}

.thunder-content-box .myaac-content:has(.SmallBox) > br + div[style*="display: flex"] > div:first-child p {
    color: #f4b81c !important;
    font-family: var(--font-title) !important;
    font-size: 1rem !important;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 #000 !important;
    text-transform: uppercase;
}

.thunder-content-box .myaac-content:has(.SmallBox) > br + div[style*="display: flex"] > div:first-child small {
    display: block;
    color: #d8e9f7 !important;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 800;
}

.thunder-content-box .myaac-content:has(.SmallBox) #timerServerSave_hour,
.thunder-content-box .myaac-content:has(.SmallBox) #timerServerSave_minute,
.thunder-content-box .myaac-content:has(.SmallBox) #timerServerSave_second {
    color: #fefeff !important;
    font-family: var(--font-title) !important;
    text-shadow: 1px 1px 0 #000 !important;
}

.thunder-content-box .myaac-content:has(.SmallBox) label {
    color: #f4b81c !important;
    font-family: var(--font-ui);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.thunder-content-box .myaac-content:has(.SmallBox) div[style*="background-color: #d4c0a1"] {
    min-width: 74px;
    background: rgba(4,9,20,0.72) !important;
    border: 1px solid rgba(244,184,28,0.38) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.thunder-content-box .myaac-content:has(.SmallBox) .TableContainer {
    background:
        linear-gradient(180deg, rgba(18,56,95,0.34), rgba(4,9,20,0.14)),
        #071526 !important;
    border-color: rgba(244,184,28,0.42) !important;
}

.thunder-content-box .myaac-content:has(.SmallBox) .InnerTableContainer,
.thunder-content-box .myaac-content:has(.SmallBox) .TableContentContainer,
.thunder-content-box .myaac-content:has(.SmallBox) .TableContent,
.thunder-content-box .myaac-content:has(.SmallBox) .Table3,
.thunder-content-box .myaac-content:has(.SmallBox) tbody,
.thunder-content-box .myaac-content:has(.SmallBox) tr,
.thunder-content-box .myaac-content:has(.SmallBox) td {
    background: transparent !important;
    color: #fefeff !important;
}

.thunder-content-box .myaac-content:has(.SmallBox) .TableContent td {
    padding: 8px 10px !important;
    border: 1px solid rgba(244,184,28,0.15) !important;
    background: rgba(7,21,38,0.78) !important;
    color: #fefeff !important;
}

.thunder-content-box .myaac-content:has(.SmallBox) .TableContent tr:nth-child(even) td {
    background: rgba(11,35,64,0.84) !important;
}

.thunder-content-box .myaac-content:has(.SmallBox) b,
.thunder-content-box .myaac-content:has(.SmallBox) strong {
    color: #f4b81c !important;
}

.thunder-content-box .myaac-content:has(.SmallBox) th {
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    border: 1px solid #05080f !important;
    color: #040914 !important;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.34) !important;
}

.thunder-content-box .myaac-content:has(.SmallBox) .BigToggleButton {
    filter: drop-shadow(0 2px 0 rgba(0,0,0,0.45));
}

@media (max-width: 900px) {
    .thunder-content-box .myaac-content:has(.SmallBox) > br + div[style*="display: flex"] {
        display: block !important;
    }

    .thunder-content-box .myaac-content:has(.SmallBox) > br + div[style*="display: flex"] > div {
        width: 100% !important;
        margin-bottom: 14px;
    }
}

/* Experience table page */
.thunder-content-box .myaac-content:has(#ExperienceTable) {
    background: linear-gradient(180deg, #071526 0%, #040914 100%) !important;
    color: #fefeff !important;
}

.thunder-content-box .myaac-content:has(#ExperienceTable) .th-exp-intro {
    margin: 0 0 14px;
    padding: 14px 16px;
    background:
        linear-gradient(180deg, rgba(18,56,95,0.38), rgba(4,9,20,0.12)),
        #071526 !important;
    border: 1px solid rgba(244,184,28,0.34);
    box-shadow: inset 0 0 0 1px rgba(254,254,255,0.04), 0 3px 0 rgba(0,0,0,0.32);
}

.thunder-content-box .myaac-content:has(#ExperienceTable) .th-exp-intro p {
    margin: 0 0 6px !important;
    color: #d8e9f7 !important;
    font-family: var(--font-body) !important;
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
}

.thunder-content-box .myaac-content:has(#ExperienceTable) .th-exp-intro p:last-child {
    margin-bottom: 0 !important;
}

.thunder-content-box .myaac-content:has(#ExperienceTable) .TableContainer {
    background:
        linear-gradient(180deg, rgba(18,56,95,0.34), rgba(4,9,20,0.14)),
        #071526 !important;
    border-color: rgba(244,184,28,0.42) !important;
}

.thunder-content-box .myaac-content:has(#ExperienceTable) .InnerTableContainer {
    overflow-x: auto;
    padding: 10px !important;
    background: #040914 !important;
    border: 1px solid rgba(244,184,28,0.22);
}

.thunder-content-box .myaac-content:has(#ExperienceTable) #ExperienceTable {
    min-width: 620px;
    border-collapse: separate !important;
    border-spacing: 8px 0 !important;
    background: transparent !important;
    margin: 0 !important;
}

.thunder-content-box .myaac-content:has(#ExperienceTable) #ExperienceTable > tbody,
.thunder-content-box .myaac-content:has(#ExperienceTable) #ExperienceTable > tbody > tr,
.thunder-content-box .myaac-content:has(#ExperienceTable) #ExperienceTable > tbody > tr > td {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    vertical-align: top;
}

.thunder-content-box .myaac-content:has(#ExperienceTable) #ExperienceTable .AdditionalTableShadow {
    margin: 0 !important;
    background: rgba(7,21,38,0.88) !important;
    border: 1px solid rgba(244,184,28,0.34) !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0.38) !important;
}

.thunder-content-box .myaac-content:has(#ExperienceTable) #ExperienceTable .AdditionalTableShadow table {
    margin: 0 !important;
    border-collapse: collapse !important;
    background: transparent !important;
}

.thunder-content-box .myaac-content:has(#ExperienceTable) #ExperienceTable .AdditionalTableHeadline,
.thunder-content-box .myaac-content:has(#ExperienceTable) #ExperienceTable .AdditionalTableHeadline td {
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    border: 1px solid #05080f !important;
    color: #040914 !important;
    font-family: var(--font-ui) !important;
    font-size: 0.66rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.34) !important;
    text-transform: uppercase;
}

.thunder-content-box .myaac-content:has(#ExperienceTable) #ExperienceTable td[style*="text-align: right"] {
    padding: 6px 9px !important;
    background: rgba(7,21,38,0.84) !important;
    border: 1px solid rgba(244,184,28,0.14) !important;
    color: #fefeff !important;
    font-family: var(--font-ui) !important;
    font-size: 0.78rem !important;
    font-weight: 800;
    text-align: right !important;
}

.thunder-content-box .myaac-content:has(#ExperienceTable) #ExperienceTable tr:nth-child(even) td[style*="text-align: right"] {
    background: rgba(11,35,64,0.90) !important;
}

.thunder-content-box .myaac-content:has(#ExperienceTable) #ExperienceTable tr:hover td[style*="text-align: right"] {
    background: rgba(18,56,95,0.98) !important;
    color: #f4b81c !important;
}

@media (max-width: 720px) {
    .thunder-content-box .myaac-content:has(#ExperienceTable) #ExperienceTable {
        min-width: 0;
        border-spacing: 0 8px !important;
    }

    .thunder-content-box .myaac-content:has(#ExperienceTable) #ExperienceTable > tbody > tr,
    .thunder-content-box .myaac-content:has(#ExperienceTable) #ExperienceTable > tbody > tr > td {
        display: block;
        width: 100% !important;
    }

    .thunder-content-box .myaac-content:has(#ExperienceTable) #ExperienceTable .AdditionalTableShadow {
        margin-bottom: 8px !important;
    }
}

/* Rules page */
.thunder-content-box .myaac-content:has(.th-rules-page) {
    padding: 0 !important;
    background: #040914 !important;
}

.th-rules-page {
    color: #fefeff;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 0.95rem;
    line-height: 1.65;
}

.th-rules-hero {
    padding: 22px;
    border: 1px solid rgba(244,184,28,0.62);
    background:
        linear-gradient(90deg, rgba(4,9,20,0.96) 0%, rgba(8,32,58,0.92) 62%, rgba(5,13,26,0.98) 100%),
        url("../images/header/bg-header.jpg") center/cover no-repeat;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.72), 0 16px 38px rgba(0,0,0,0.36);
}

.th-rules-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(0,0,0,0.82);
    background: linear-gradient(180deg, #f6c437 0%, #d79608 100%);
    color: #05070c;
    font-family: var(--font-title);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 2px 0 #000;
}

.th-rules-hero h1 {
    margin: 13px 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #f4b81c !important;
    font-family: var(--font-title) !important;
    font-size: clamp(1.9rem, 4.4vw, 3.15rem) !important;
    line-height: 1 !important;
    letter-spacing: 0;
    text-shadow: 2px 2px 0 #000, 0 0 16px rgba(244,184,28,0.34);
    text-transform: none;
}

.th-rules-hero p {
    max-width: 760px;
    margin: 0 !important;
    color: #d8e9f7 !important;
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 1rem;
    line-height: 1.6;
}

.th-rules-alert,
.th-rules-section,
.th-rules-footer-note {
    margin-top: 12px;
    border: 1px solid rgba(244,184,28,0.38);
    background: linear-gradient(180deg, rgba(10,36,64,0.94) 0%, rgba(4,13,25,0.98) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 10px 22px rgba(0,0,0,0.24);
}

.th-rules-alert {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
}

.th-rules-alert strong {
    color: #f4b81c;
    font-family: var(--font-title);
    font-size: 0.92rem;
    letter-spacing: 0.6px;
}

.th-rules-alert span {
    color: #fefeff;
}

.th-rules-section,
.th-rules-footer-note {
    padding: 16px;
}

.th-rules-section h2,
.th-rules-footer-note h2 {
    margin: 0 0 10px !important;
    padding: 0 0 9px !important;
    border-bottom: 1px solid rgba(244,184,28,0.26) !important;
    color: #f4b81c !important;
    font-family: var(--font-title) !important;
    font-size: 1.18rem !important;
    line-height: 1.25 !important;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: 1px 1px 0 #000;
}

.th-rules-section p,
.th-rules-section li,
.th-rules-footer-note p,
.th-rules-alert span {
    font-family: "Open Sans", Arial, sans-serif !important;
    font-size: 0.95rem;
    line-height: 1.65;
}

.th-rules-section p,
.th-rules-footer-note p {
    margin: 0 0 10px !important;
    color: #eef6ff !important;
}

.th-rules-section ul {
    display: grid;
    gap: 6px;
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
    list-style: none;
}

.th-rules-section li {
    position: relative;
    padding: 8px 10px 8px 28px;
    border: 1px solid rgba(244,184,28,0.16);
    background: rgba(2,7,15,0.42);
    color: #eef6ff !important;
}

.th-rules-section li::before {
    content: "\25C6";
    position: absolute;
    left: 10px;
    top: 9px;
    color: #f4b81c;
    font-size: 0.58rem;
}

.th-rules-penalty {
    margin-top: 12px;
    padding: 12px;
    border: 1px dashed rgba(244,184,28,0.40);
    background: rgba(2,7,15,0.54);
}

.th-rules-penalty h3 {
    margin: 0 0 6px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #ffd763 !important;
    font-family: var(--font-title) !important;
    font-size: 0.95rem !important;
    letter-spacing: 0;
    text-transform: none;
}

.th-rules-penalty p {
    margin-bottom: 0 !important;
}

@media (max-width: 620px) {
    .th-rules-hero,
    .th-rules-section,
    .th-rules-footer-note {
        padding: 14px;
    }

    .th-rules-alert {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.thunder-content-box .myaac-content.th-page-rules:has(.th-rules-page) {
    padding: 0 !important;
    background: #040914 !important;
}

/* Server info page */
.thunder-content-box .myaac-content:has(.th-serverinfo-page) {
    padding: 0 !important;
    background: #040914 !important;
}

.th-serverinfo-page {
    color: #fefeff;
    font-family: var(--font-body);
}

.th-serverinfo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    padding: 22px;
    border: 1px solid rgba(244,184,28,0.62);
    background:
        linear-gradient(90deg, rgba(4,9,20,0.96) 0%, rgba(8,32,58,0.92) 56%, rgba(5,13,26,0.98) 100%),
        url("../images/header/bg-header.jpg") center/cover no-repeat;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.72), 0 16px 38px rgba(0,0,0,0.36);
}

.th-serverinfo-kicker,
.th-serverinfo-panel__title {
    font-family: var(--font-title);
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.th-serverinfo-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(0,0,0,0.82);
    background: linear-gradient(180deg, #f6c437 0%, #d79608 100%);
    color: #05070c;
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 2px 0 #000;
}

.th-serverinfo-kicker::before,
.th-serverinfo-kicker::after {
    content: "\25C6";
    font-size: 0.52rem;
}

.th-serverinfo-hero h1 {
    margin: 12px 0 8px !important;
    padding: 0 !important;
    color: #f4b81c !important;
    font-family: var(--font-title) !important;
    font-size: clamp(2rem, 5vw, 3.7rem) !important;
    line-height: 0.94 !important;
    text-shadow: 2px 2px 0 #000, 0 0 16px rgba(244,184,28,0.34);
}

.th-serverinfo-hero p {
    max-width: 620px;
    margin: 0 !important;
    color: #d8e9f7 !important;
    font-size: 1rem;
    line-height: 1.55;
}

.th-serverinfo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.th-serverinfo-actions a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid rgba(244,184,28,0.72);
    background: rgba(4,9,20,0.88);
    color: #fefeff !important;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none !important;
}

.th-serverinfo-actions a:first-child {
    background: linear-gradient(180deg, #f6c437 0%, #d79608 100%);
    color: #05070c !important;
}

.th-serverinfo-save {
    min-height: 178px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
    border: 1px solid rgba(244,184,28,0.52);
    background: rgba(3,9,18,0.78);
    text-align: center;
}

.th-serverinfo-save span {
    color: #d8e9f7;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.th-serverinfo-save > strong {
    margin: 8px 0 12px;
    color: #f4b81c;
    font-family: var(--font-title);
    font-size: 2.2rem;
    line-height: 1;
}

.th-serverinfo-save > small {
    display: block;
    margin: -6px 0 12px;
    color: rgba(216,233,247,0.72);
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 900;
    text-transform: uppercase;
}

.th-serverinfo-countdown {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.th-serverinfo-countdown div,
.th-serverinfo-stats article,
.th-serverinfo-panel,
.th-serverinfo-stage {
    border: 1px solid rgba(244,184,28,0.38);
    background: linear-gradient(180deg, rgba(10,36,64,0.94) 0%, rgba(4,13,25,0.98) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 10px 22px rgba(0,0,0,0.24);
}

.th-serverinfo-countdown div {
    padding: 8px 4px;
}

.th-serverinfo-countdown b,
.th-serverinfo-countdown small {
    display: block;
}

.th-serverinfo-countdown b {
    color: #fefeff;
    font-family: var(--font-ui);
    font-size: 1rem;
}

.th-serverinfo-countdown small {
    margin-top: 2px;
    color: rgba(216,233,247,0.72);
    font-size: 0.66rem;
    text-transform: uppercase;
}

.th-serverinfo-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.th-serverinfo-stats article {
    min-height: 92px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 12px;
    text-align: center;
}

.th-serverinfo-stats i {
    color: #f4b81c;
    font-size: 1.1rem;
}

.th-serverinfo-stats span,
.th-serverinfo-list dt,
.th-serverinfo-rates span {
    color: rgba(216,233,247,0.74);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.th-serverinfo-stats strong {
    color: #fefeff;
    font-family: var(--font-title);
    font-size: 1.05rem;
    line-height: 1.15;
}

.th-serverinfo-about {
    position: relative;
    overflow: hidden;
    margin-top: 12px;
    padding: 18px;
    background:
        radial-gradient(circle at 84% 14%, rgba(244,184,28,0.18), transparent 28%),
        linear-gradient(135deg, rgba(11,42,74,0.98) 0%, rgba(4,13,25,0.98) 56%, rgba(2,7,15,0.98) 100%) !important;
}

.th-serverinfo-about::before {
    content: "";
    position: absolute;
    inset: 8px;
    pointer-events: none;
    border: 1px solid rgba(244,184,28,0.22);
}

.th-serverinfo-about__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.th-serverinfo-about__head h2 {
    margin: 12px 0 6px !important;
    padding: 0 !important;
    color: #f4b81c !important;
    font-family: var(--font-title) !important;
    font-size: clamp(1.35rem, 3vw, 2.15rem) !important;
    line-height: 1 !important;
    text-shadow: 2px 2px 0 #000, 0 0 14px rgba(244,184,28,0.28);
}

.th-serverinfo-about__head p {
    max-width: 620px;
    margin: 0 !important;
    color: #d8e9f7 !important;
    font-size: 0.94rem;
    line-height: 1.5;
}

.th-serverinfo-about__head > i {
    min-width: 58px;
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(244,184,28,0.55);
    background: rgba(2,7,15,0.62);
    color: #f4b81c;
    font-size: 1.45rem;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 0 18px rgba(244,184,28,0.16);
}

.th-serverinfo-about__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.th-serverinfo-about__grid article {
    min-height: 74px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 11px 12px;
    border: 1px solid rgba(244,184,28,0.3);
    background: rgba(2,7,15,0.5);
}

.th-serverinfo-about__grid span {
    color: rgba(216,233,247,0.76);
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.th-serverinfo-about__grid strong {
    color: #fefeff;
    font-family: var(--font-title);
    font-size: 1rem;
    line-height: 1.12;
    text-shadow: 1px 1px 0 #000;
}

.th-serverinfo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

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

.th-serverinfo-grid .th-serverinfo-panel:only-child {
    grid-column: 1 / -1;
}

.th-serverinfo-panel {
    padding: 14px;
}

.th-serverinfo-panel--wide {
    margin-top: 12px;
}

.th-serverinfo-panel__title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(244,184,28,0.24);
    color: #f4b81c;
}

.th-serverinfo-panel__title h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: #f4b81c !important;
    font-family: var(--font-title) !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
}

.th-serverinfo-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
}

.th-serverinfo-list--single {
    grid-template-columns: 1fr;
}

.th-serverinfo-list div {
    min-height: 0;
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(244,184,28,0.18);
    border-bottom-width: 0;
    background: rgba(2,7,15,0.5);
}

.th-serverinfo-list div:nth-child(even) {
    background: rgba(10,36,64,0.36);
}

.th-serverinfo-list div:first-child {
    border-top-color: rgba(244,184,28,0.34);
}

.th-serverinfo-list div:last-child {
    border-bottom-width: 1px;
    border-bottom-color: rgba(244,184,28,0.34);
}

.th-serverinfo-list dt,
.th-serverinfo-list dd {
    margin: 0;
}

.th-serverinfo-list dd {
    margin-top: 0;
    color: #fefeff;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-align: right;
}

.th-serverinfo-rates {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.th-serverinfo-rates--wide {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    margin-top: 10px;
}

.th-serverinfo-rates article {
    min-height: 72px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 5px;
    align-content: center;
    padding: 10px;
    border: 1px solid rgba(244,184,28,0.28);
    background: rgba(2,7,15,0.5);
    text-align: center;
}

.th-serverinfo-rates article:nth-child(even) {
    background: rgba(10,36,64,0.36);
}

.th-serverinfo-rates article:first-child {
    border-top-color: rgba(244,184,28,0.28);
}

.th-serverinfo-rates article:last-child {
    border-bottom-width: 1px;
    border-bottom-color: rgba(244,184,28,0.28);
}

.th-serverinfo-rates strong {
    color: #ffd763;
    font-family: var(--font-title);
    font-size: 1.28rem;
    line-height: 1;
    text-shadow: 1px 1px 0 #000, 0 0 12px rgba(244,184,28,0.32);
    text-align: center;
}

.th-serverinfo-rates small {
    display: block;
    grid-column: auto;
    color: rgba(216,233,247,0.66);
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
}

.th-serverinfo-empty {
    margin: 0 !important;
    color: #d8e9f7 !important;
}

.th-serverinfo-note {
    margin: 0 0 10px !important;
    padding: 10px 12px;
    border: 1px dashed rgba(244,184,28,0.34);
    background: rgba(2,7,15,0.46);
    color: #d8e9f7 !important;
    font-size: 0.86rem;
    line-height: 1.45;
}

.th-serverinfo-commands {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.th-serverinfo-commands--compact {
    grid-template-columns: 1fr;
    margin-top: 10px;
}

.th-serverinfo-commands article {
    min-height: 0;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 110px;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(244,184,28,0.18);
    border-bottom-width: 0;
    background: rgba(2,7,15,0.5);
}

.th-serverinfo-commands article:nth-child(even) {
    background: rgba(10,36,64,0.36);
}

.th-serverinfo-commands article:first-child {
    border-top-color: rgba(244,184,28,0.34);
}

.th-serverinfo-commands article:last-child {
    border-bottom-width: 1px;
    border-bottom-color: rgba(244,184,28,0.34);
}

.th-serverinfo-commands code {
    color: #ffd763;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 900;
    white-space: normal;
}

.th-serverinfo-commands span {
    color: #fefeff;
    font-size: 0.82rem;
    line-height: 1.3;
}

.th-serverinfo-commands small {
    color: rgba(216,233,247,0.68);
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 900;
    text-transform: uppercase;
    text-align: right;
}

.th-serverinfo-stage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.th-serverinfo-stage {
    overflow: hidden;
}

.th-serverinfo-accordion-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.th-serverinfo-accordion {
    border: 1px solid rgba(244,184,28,0.34);
    background: rgba(2,7,15,0.42);
}

.th-serverinfo-accordion--panel {
    display: block;
    padding: 0;
    margin-top: 12px;
}

.th-serverinfo-accordion--panel > .th-serverinfo-panel__title {
    display: none;
}

.th-serverinfo-accordion summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(180deg, rgba(10,36,64,0.96) 0%, rgba(4,13,25,0.98) 100%);
    color: #f4b81c;
    font-family: var(--font-title);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.th-serverinfo-accordion summary::-webkit-details-marker {
    display: none;
}

.th-serverinfo-accordion summary::after {
    content: "\f078";
    color: #f4b81c;
    font-family: "Font Awesome 6 Free";
    font-size: 0.72rem;
    font-weight: 900;
    transition: transform 0.16s ease;
}

.th-serverinfo-accordion[open] summary::after {
    transform: rotate(180deg);
}

.th-serverinfo-accordion summary span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.th-serverinfo-accordion summary b {
    color: rgba(216,233,247,0.74);
    font-family: var(--font-ui);
    font-size: 0.62rem;
    letter-spacing: 0.7px;
    white-space: nowrap;
}

.th-serverinfo-accordion[open] summary b {
    color: #fefeff;
}

.th-serverinfo-accordion > .th-serverinfo-stage,
.th-serverinfo-accordion--panel > .th-serverinfo-commands,
.th-serverinfo-accordion--panel > .th-serverinfo-rates {
    margin: 10px;
}

.th-serverinfo-stage h3 {
    margin: 0 !important;
    padding: 9px 10px !important;
    background: linear-gradient(180deg, #f6c437 0%, #d79608 100%);
    color: #05070c !important;
    font-family: var(--font-title) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase;
}

.th-serverinfo-stage table {
    width: 100%;
    border-collapse: collapse;
}

.th-serverinfo-stage th,
.th-serverinfo-stage td {
    padding: 8px;
    border-top: 1px solid rgba(244,184,28,0.18);
    color: #fefeff;
    text-align: left;
}

.th-serverinfo-stage th {
    color: #f4b81c;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    text-transform: uppercase;
}

@media (max-width: 820px) {
    .th-serverinfo-hero,
    .th-serverinfo-grid,
    .th-serverinfo-stage-grid,
    .th-serverinfo-accordion-grid {
        grid-template-columns: 1fr;
    }

    .th-serverinfo-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .th-serverinfo-about__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .th-serverinfo-list div,
    .th-serverinfo-commands article {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .th-serverinfo-list dd,
    .th-serverinfo-commands small {
        text-align: left;
    }
}

@media (max-width: 520px) {
    .th-serverinfo-hero {
        padding: 16px;
    }

    .th-serverinfo-stats,
    .th-serverinfo-list,
    .th-serverinfo-rates,
    .th-serverinfo-about__grid {
        grid-template-columns: 1fr;
    }

    .th-serverinfo-about__head {
        flex-direction: column;
    }

    .th-serverinfo-rates article {
        grid-template-columns: 1fr;
    }

    .th-serverinfo-rates strong,
    .th-serverinfo-rates small {
        grid-column: auto;
        text-align: left;
    }
}

/* Download client page */
.thunder-content-box .myaac-content.th-page-downloadclient {
    padding: 0 !important;
    background: #040914 !important;
    color: #fefeff !important;
}

.th-download-page {
    color: #fefeff;
    font-family: var(--font-body);
}

.th-download-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 20px;
    align-items: center;
    min-height: 255px;
    padding: 24px;
    background:
        radial-gradient(circle at 78% 26%, rgba(244,184,28,0.18), transparent 34%),
        linear-gradient(90deg, rgba(4,9,20,0.96) 0%, rgba(7,24,43,0.92) 58%, rgba(4,9,20,0.78) 100%);
    border: 1px solid rgba(244,184,28,0.52);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.72);
}

.th-download-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 7px 11px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border: 2px solid #05080f;
    color: #040914;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.th-download-hero h1 {
    max-width: 680px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #f4b81c !important;
    font-family: var(--font-title) !important;
    font-size: clamp(2rem, 4.8vw, 3.25rem) !important;
    line-height: 0.96 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 2px 0 #000, 0 0 16px rgba(244,184,28,0.38);
    text-transform: uppercase;
}

.th-download-hero p {
    max-width: 620px;
    margin: 12px 0 0 !important;
    color: #d8e9f7 !important;
    font-size: 1rem;
    line-height: 1.55;
}

.th-download-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.th-download-badges span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    background: rgba(3,9,18,0.78);
    border: 1px solid rgba(244,184,28,0.34);
    color: #fefeff;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.th-download-badges i,
.th-download-list i {
    color: #f4b81c;
}

.th-download-hero__art {
    min-height: 172px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(3,9,18,0.70);
    border: 1px solid rgba(244,184,28,0.35);
    box-shadow: inset 0 0 24px rgba(244,184,28,0.08);
}

.th-download-hero__art img {
    width: 118px;
    height: auto;
    image-rendering: pixelated;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,0.55));
}

.th-download-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.th-download-card,
.th-download-steps article {
    background:
        linear-gradient(180deg, rgba(10,36,64,0.94) 0%, rgba(4,13,25,0.98) 100%);
    border: 1px solid rgba(244,184,28,0.36);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.62), 0 10px 22px rgba(0,0,0,0.20);
}

.th-download-card {
    display: flex;
    flex-direction: column;
    min-height: 360px;
    padding: 18px;
}

.th-download-card--featured {
    border-color: rgba(244,184,28,0.72);
    background:
        radial-gradient(circle at 52% 0%, rgba(244,184,28,0.18), transparent 45%),
        linear-gradient(180deg, rgba(12,41,73,0.96) 0%, rgba(4,13,25,0.98) 100%);
}

.th-download-card__head {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.th-download-card__icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border: 2px solid #05080f;
    color: #040914;
    font-size: 1.5rem;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.42);
}

.th-download-card h2 {
    margin: 0 0 5px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #f4b81c !important;
    font-family: var(--font-title) !important;
    font-size: 1.25rem !important;
    line-height: 1.05 !important;
    text-transform: uppercase;
}

.th-download-card p {
    margin: 0 !important;
    color: #d8e9f7 !important;
    line-height: 1.45;
}

.th-download-list {
    display: grid;
    gap: 8px;
    margin: 0 0 16px !important;
    padding: 0 !important;
    list-style: none;
}

.th-download-list li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 9px 10px;
    background: rgba(3,9,18,0.48);
    border: 1px solid rgba(244,184,28,0.14);
    color: #d8e9f7 !important;
    font-size: 0.86rem;
    line-height: 1.35;
}

.th-download-list i {
    margin-top: 2px;
}

.th-download-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: auto;
    margin-bottom: 14px;
}

.th-download-meta span {
    padding: 6px 8px;
    background: rgba(244,184,28,0.10);
    border: 1px solid rgba(244,184,28,0.28);
    color: #fefeff;
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.th-download-btn {
    min-height: 42px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    border: 2px solid #05080f !important;
    color: #040914 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 2px 2px 0 rgba(0,0,0,0.42);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-decoration: none !important;
    text-transform: uppercase;
}

.th-download-btn--outline {
    background: rgba(4,9,20,0.86) !important;
    border-color: rgba(244,184,28,0.58) !important;
    color: #f4b81c !important;
}

.th-download-btn:hover {
    filter: brightness(1.1);
    text-decoration: none !important;
}

.th-download-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.th-download-steps article {
    min-height: 128px;
    padding: 14px;
    text-align: center;
}

.th-download-steps strong {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border: 2px solid #05080f;
    color: #040914;
    font-family: var(--font-ui);
    font-weight: 900;
}

.th-download-steps span {
    display: block;
    margin-top: 8px;
    color: #f4b81c;
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.th-download-steps p {
    margin: 7px 0 0 !important;
    color: rgba(216,233,247,0.78) !important;
    font-size: 0.84rem;
    line-height: 1.4;
}

@media (max-width: 760px) {
    .th-download-hero,
    .th-download-options,
    .th-download-steps {
        grid-template-columns: 1fr;
    }

    .th-download-hero {
        padding: 18px 14px;
        text-align: center;
    }

    .th-download-kicker,
    .th-download-badges {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    .th-download-hero__art {
        min-height: 130px;
    }
}

/* Guest account shortcuts in left sidebar */
#thunder-left .thunder-account-box-guest {
    background:
        linear-gradient(90deg, rgba(244,184,28,0.05) 0 5px, transparent 5px calc(100% - 5px), rgba(244,184,28,0.05) calc(100% - 5px)),
        linear-gradient(180deg, #12385f 0%, #071526 100%) !important;
    border-color: #05080f !important;
    outline-color: #12385f !important;
}

#thunder-left .thunder-account-box-guest .thunder-box-header {
    min-height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 5px 8px !important;
    background:
        linear-gradient(90deg, rgba(244,184,28,0.08), transparent 18%, transparent 82%, rgba(244,184,28,0.08)),
        linear-gradient(180deg, #071526 0%, #0b2340 55%, #040914 100%) !important;
    border: 1px solid rgba(244,184,28,0.72) !important;
    color: #f4b81c !important;
    font-family: var(--font-title);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 2.4px;
    text-shadow: 1px 1px 0 #000, 0 0 8px rgba(244,184,28,0.35) !important;
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.55),
        inset 0 8px 14px rgba(255,255,255,0.04) !important;
}

#thunder-left .thunder-account-box-guest .thunder-box-header::before,
#thunder-left .thunder-account-box-guest .thunder-box-header::after {
    content: '';
    width: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(244,184,28,0.9), transparent);
}

#thunder-left .thunder-account-box-guest .thunder-box-body {
    padding: 9px 8px 8px;
}

#thunder-left .thunder-account-box-guest .thunder-btn {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    border: 2px solid #05080f !important;
    color: #040914 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.34),
        2px 2px 0 rgba(0,0,0,0.42) !important;
    font-weight: 900;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.28);
}

#thunder-left .thunder-account-box-guest .thunder-btn:last-child {
    margin-bottom: 0;
}

/* Logout page primary action */
.thunder-content-box .myaac-content .rlo-primary,
.rlo-primary {
    min-height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px !important;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    border: 2px solid #05080f !important;
    color: #040914 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.36),
        2px 2px 0 rgba(0,0,0,0.45),
        0 0 16px rgba(244,184,28,0.18) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.9px !important;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.28);
    text-decoration: none !important;
    text-transform: uppercase;
}

.thunder-content-box .myaac-content .rlo-primary:hover,
.rlo-primary:hover {
    background: linear-gradient(180deg, #ffe082 0%, #f4b81c 100%) !important;
    border-color: #05080f !important;
    color: #040914 !important;
    filter: brightness(1.05);
    text-decoration: none !important;
}

/* Donate page */
.thunder-content-box .myaac-content:has(.th-donate-page) {
    padding: 0 !important;
    background: #040914 !important;
    color: #fefeff !important;
}

.th-donate-page {
    color: #fefeff;
    font-family: var(--font-body);
}

.th-donate-hero {
    position: relative;
    min-height: 285px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(4,9,20,0.98) 0%, rgba(4,9,20,0.94) 58%, rgba(4,9,20,0.66) 76%, rgba(4,9,20,0.22) 100%),
        #071526;
    border: 2px solid rgba(244,184,28,0.48);
    box-shadow:
        inset 0 0 0 1px rgba(254,254,255,0.06),
        inset 0 -22px 40px rgba(0,0,0,0.46),
        0 4px 0 rgba(0,0,0,0.38);
}

.th-donate-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(244,184,28,0.10) 0%, transparent 38%),
        linear-gradient(90deg, rgba(244,184,28,0.12), transparent 28%, transparent 72%, rgba(244,184,28,0.08));
    pointer-events: none;
    z-index: 1;
}

.th-donate-hero__art {
    position: absolute;
    right: 16px;
    bottom: 14px;
    width: min(34%, 260px);
    height: auto;
    max-height: calc(100% - 28px);
    object-fit: contain;
    object-position: center;
    image-rendering: pixelated;
    filter: saturate(1.16) contrast(1.08);
    transform: none;
}

.th-donate-hero__content {
    position: relative;
    z-index: 2;
    max-width: 610px;
    padding: 32px 30px;
}

.th-donate-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    padding: 5px 9px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border: 1px solid #05080f;
    color: #040914;
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.35);
}

.th-donate-hero__eyebrow::before,
.th-donate-hero__eyebrow::after {
    content: "\25C6";
    font-size: 0.58rem;
}

.th-donate-hero h1 {
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #f4b81c !important;
    font-family: var(--font-title) !important;
    font-size: clamp(1.78rem, 3.35vw, 2.66rem) !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-shadow: 2px 2px 0 #000, 0 0 18px rgba(244,184,28,0.28) !important;
}

.th-donate-hero p {
    max-width: 470px;
    margin: 0 0 16px !important;
    color: #d8e9f7 !important;
    font-family: var(--font-body) !important;
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
}

.th-donate-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.th-donate-hero__badges span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 5px 9px;
    background: rgba(7,21,38,0.82);
    border: 1px solid rgba(244,184,28,0.32);
    color: #fefeff;
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.th-donate-hero__badges i {
    color: #f4b81c;
}

.th-donate-login {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 10px 15px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border: 2px solid #05080f;
    color: #040914 !important;
    font-family: var(--font-ui);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-decoration: none !important;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.34);
}

.th-donate-login:hover {
    filter: brightness(1.12);
}

.th-donate-packages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    padding: 18px 18px 20px;
    background:
        linear-gradient(180deg, rgba(7,21,38,0.36), rgba(4,9,20,0.10)),
        #040914;
    border-left: 2px solid rgba(244,184,28,0.38);
    border-right: 2px solid rgba(244,184,28,0.38);
}

.th-donate-package {
    position: relative;
    min-height: 218px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 18px 14px 16px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(244,184,28,0.16), transparent 34%),
        linear-gradient(180deg, rgba(18,56,95,0.58), rgba(4,9,20,0.16)),
        #071526;
    border: 2px solid rgba(244,184,28,0.34);
    box-shadow:
        inset 0 0 0 1px rgba(254,254,255,0.05),
        inset 0 -18px 24px rgba(0,0,0,0.22),
        0 4px 0 rgba(0,0,0,0.34);
    text-align: center;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.th-donate-package::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(244,184,28,0.14);
    pointer-events: none;
}

.th-donate-package::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(244,184,28,0.72), transparent);
    pointer-events: none;
}

.th-donate-package:hover {
    transform: translateY(-2px);
    border-color: rgba(244,184,28,0.78);
    box-shadow:
        inset 0 0 0 1px rgba(254,254,255,0.07),
        inset 0 -18px 24px rgba(0,0,0,0.22),
        0 0 18px rgba(244,184,28,0.12),
        0 5px 0 rgba(0,0,0,0.38);
}

.th-donate-package:focus-visible,
.th-donate-package--selected {
    outline: 2px solid rgba(244,184,28,0.92);
    outline-offset: 2px;
    border-color: rgba(244,184,28,0.9);
}

.th-donate-package--featured {
    border-color: rgba(244,184,28,0.72);
    background:
        radial-gradient(circle at 50% 0%, rgba(244,184,28,0.24), transparent 36%),
        linear-gradient(180deg, rgba(22,70,112,0.64), rgba(4,9,20,0.18)),
        #071526;
    box-shadow:
        inset 0 0 0 1px rgba(254,254,255,0.07),
        0 0 20px rgba(244,184,28,0.14),
        0 4px 0 rgba(0,0,0,0.38);
}

.th-donate-package__ribbon {
    display: none !important;
}

.th-donate-package__icon {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 11px;
    background: rgba(4,9,20,0.78);
    border: 2px solid rgba(244,184,28,0.48);
    box-shadow: inset 0 0 12px rgba(244,184,28,0.08), 0 2px 0 rgba(0,0,0,0.32);
}

.th-donate-package__icon img {
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
}

.th-donate-package__price {
    color: #d8e9f7;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.4px;
}

.th-donate-package__coins {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    margin: 6px 0 8px;
    color: #f4b81c;
    font-family: var(--font-title);
}

.th-donate-package__coins strong {
    color: #f4b81c !important;
    font-size: 2rem;
    line-height: 1;
    text-shadow: 2px 2px 0 #000, 0 0 12px rgba(244,184,28,0.18);
}

.th-donate-package__coins--glow strong {
    color: #ffd763 !important;
    background: linear-gradient(180deg, #fff2a8 0%, #f4b81c 42%, #b76b05 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 6px rgba(244,184,28,0.40));
    text-shadow: none !important;
}

.th-donate-package__coins--glow {
    position: relative;
}

.th-donate-package__coins--glow::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 64px;
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(244,184,28,0.88), transparent);
    box-shadow: 0 0 10px rgba(244,184,28,0.40);
}

.th-donate-package__coins span {
    color: #fefeff;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.th-donate-package__old {
    color: rgba(216,233,247,0.62) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.72rem !important;
    text-decoration: line-through;
}

.th-donate-package p,
.th-donate-package small {
    display: block;
    margin: 0 !important;
    color: #d8e9f7 !important;
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
    max-width: 150px;
}

.th-donate-package small {
    margin-top: 6px !important;
    color: #f4b81c !important;
    font-family: var(--font-ui);
    font-weight: 900;
}

.th-donate-package__bonus {
    margin-top: 9px !important;
    padding: 5px 8px;
    background: rgba(4,9,20,0.72);
    border: 1px solid rgba(244,184,28,0.42);
    color: #ffd763 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: inset 0 0 10px rgba(244,184,28,0.08), 0 2px 0 rgba(0,0,0,0.24);
}

.th-donate-package__pix {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: auto;
    padding: 7px 10px;
    border: 2px solid #05080f;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    color: #040914;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 2px 2px 0 rgba(0,0,0,0.36);
}

.th-donate-package__pix:hover {
    filter: brightness(1.12);
}

.th-donate-package__pix:disabled {
    cursor: not-allowed;
    filter: grayscale(0.7);
    opacity: 0.62;
}

.th-donate-form {
    margin: 0 0 2px;
    background:
        linear-gradient(180deg, rgba(18,56,95,0.36), rgba(4,9,20,0.12)),
        #071526;
    border: 2px solid rgba(244,184,28,0.44);
    box-shadow: inset 0 0 0 1px rgba(254,254,255,0.05), 0 4px 0 rgba(0,0,0,0.34);
}

.th-donate-form__header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border-bottom: 2px solid #05080f;
    color: #040914;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.th-donate-form__header strong {
    color: #040914 !important;
}

.th-donate-form__body {
    padding: 14px;
}

.th-donate-form__body label {
    display: block;
    margin-bottom: 7px;
    color: #f4b81c;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.th-donate-form__row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 10px;
    align-items: stretch;
}

.th-donate-form select {
    width: 100%;
    min-height: 42px;
    background: rgba(4,9,20,0.82) !important;
    border: 1px solid rgba(244,184,28,0.42) !important;
    color: #fefeff !important;
    font-family: var(--font-ui) !important;
    font-weight: 800;
}

.th-donate-submit {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border: 2px solid #05080f;
    color: #040914;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.34);
}

.th-donate-submit:hover {
    filter: brightness(1.12);
}

.th-donate-submit:disabled {
    cursor: not-allowed;
    filter: grayscale(0.7);
    opacity: 0.62;
}

.th-donate-note {
    margin: 10px 0 0 !important;
    color: #d8e9f7 !important;
    font-size: 0.84rem !important;
}

.th-donate-coupon {
    margin-top: 12px;
}

.th-donate-coupon label {
    margin-bottom: 7px;
}

.th-donate-coupon input {
    width: 100%;
    min-height: 40px;
    background: rgba(4,9,20,0.82) !important;
    border: 1px solid rgba(244,184,28,0.34) !important;
    color: #fefeff !important;
    font-family: var(--font-ui) !important;
    font-weight: 800;
    text-transform: uppercase;
}

.th-donate-coupon input::placeholder {
    color: rgba(216,233,247,0.52);
    text-transform: none;
}

/* Mercado Pago PIX page */
.thunder-content-box .myaac-content:has(.th-pix-page) {
    padding: 0 !important;
    background: #040914 !important;
    color: #fefeff !important;
}

.th-pix-page {
    color: #fefeff;
    font-family: var(--font-body);
}

.th-pix-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 18px;
    align-items: center;
    min-height: 230px;
    padding: 28px;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 18%, rgba(244,184,28,0.22), transparent 30%),
        linear-gradient(90deg, rgba(4,9,20,0.98) 0%, rgba(7,21,38,0.94) 56%, rgba(18,56,95,0.64) 100%),
        #071526;
    border: 2px solid rgba(244,184,28,0.52);
    box-shadow:
        inset 0 0 0 1px rgba(254,254,255,0.06),
        inset 0 -22px 40px rgba(0,0,0,0.42),
        0 4px 0 rgba(0,0,0,0.38);
}

.th-pix-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(244,184,28,0.10), transparent 42%),
        repeating-linear-gradient(90deg, rgba(254,254,255,0.035) 0 1px, transparent 1px 88px);
    pointer-events: none;
}

.th-pix-hero__content,
.th-pix-hero__summary {
    position: relative;
    z-index: 1;
}

.th-pix-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border: 1px solid #05080f;
    color: #040914;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.35);
}

.th-pix-hero h1 {
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #f4b81c !important;
    font-family: var(--font-title) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    text-shadow: 2px 2px 0 #000, 0 0 18px rgba(244,184,28,0.28) !important;
}

.th-pix-hero p {
    max-width: 560px;
    margin: 0 !important;
    color: #d8e9f7 !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
}

.th-pix-hero__summary {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 18px 14px;
    background:
        radial-gradient(circle at 50% 0%, rgba(244,184,28,0.20), transparent 42%),
        rgba(4,9,20,0.74);
    border: 2px solid rgba(244,184,28,0.46);
    box-shadow: inset 0 0 0 1px rgba(254,254,255,0.06), 0 4px 0 rgba(0,0,0,0.32);
    text-align: center;
}

.th-pix-hero__summary span,
.th-pix-hero__summary small {
    color: #d8e9f7;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.th-pix-hero__summary strong {
    margin: 7px 0;
    color: #ffd763 !important;
    font-family: var(--font-title);
    font-size: 2rem;
    line-height: 1;
    text-shadow: 2px 2px 0 #000, 0 0 12px rgba(244,184,28,0.26);
}

.th-pix-grid {
    display: grid;
    grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
    background:
        linear-gradient(180deg, rgba(18,56,95,0.28), rgba(4,9,20,0.08)),
        #040914;
    border-left: 2px solid rgba(244,184,28,0.38);
    border-right: 2px solid rgba(244,184,28,0.38);
}

.th-pix-panel {
    background:
        linear-gradient(180deg, rgba(18,56,95,0.44), rgba(4,9,20,0.14)),
        #071526;
    border: 2px solid rgba(244,184,28,0.38);
    box-shadow: inset 0 0 0 1px rgba(254,254,255,0.05), 0 4px 0 rgba(0,0,0,0.34);
}

.th-pix-panel__title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 9px 12px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border-bottom: 2px solid #05080f;
    color: #040914;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.th-pix-qr-frame {
    width: min(230px, calc(100% - 36px));
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin: 22px auto 14px;
    padding: 12px;
    background: #fefeff;
    border: 3px solid #05080f;
    box-shadow:
        0 0 0 2px rgba(244,184,28,0.62),
        0 8px 18px rgba(0,0,0,0.34),
        inset 0 0 0 1px rgba(0,0,0,0.08);
}

.th-pix-qr-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    image-rendering: auto;
}

.th-pix-expire {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 16px 18px;
    padding: 9px 10px;
    background: rgba(4,9,20,0.72);
    border: 1px solid rgba(244,184,28,0.28);
    color: #d8e9f7;
    font-size: 0.82rem;
    text-align: center;
}

.th-pix-expire i {
    color: #f4b81c;
}

.th-pix-summary-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px;
}

.th-pix-summary-list div {
    min-width: 0;
    padding: 10px;
    background: rgba(4,9,20,0.72);
    border: 1px solid rgba(244,184,28,0.24);
}

.th-pix-summary-list dt {
    margin: 0 0 4px;
    color: #f4b81c;
    font-family: var(--font-ui);
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.th-pix-summary-list dd {
    margin: 0;
    color: #fefeff;
    font-family: var(--font-ui);
    font-size: 0.86rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.th-pix-copy-label {
    display: block;
    margin: 14px 14px 7px;
    color: #f4b81c;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.th-pix-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin: 0 14px;
}

.th-pix-copy input {
    min-width: 0;
    min-height: 42px;
    padding: 0 12px;
    background: rgba(4,9,20,0.86) !important;
    border: 1px solid rgba(244,184,28,0.38) !important;
    color: #fefeff !important;
    font-family: var(--font-ui) !important;
    font-size: 0.78rem !important;
    font-weight: 800;
}

.th-pix-copy button,
.th-pix-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border: 2px solid #05080f;
    color: #040914 !important;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-decoration: none !important;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 2px 2px 0 rgba(0,0,0,0.36);
}

.th-pix-copy button:hover,
.th-pix-button:hover {
    filter: brightness(1.12);
}

.th-pix-button--ghost {
    background: rgba(7,21,38,0.92);
    border-color: rgba(244,184,28,0.44);
    color: #f4b81c !important;
    text-shadow: none;
}

.th-pix-button--ghost:hover {
    background: rgba(18,56,95,0.72);
    color: #fefeff !important;
}

.th-pix-copy-feedback {
    min-height: 20px;
    margin: 8px 14px 14px !important;
    color: #9ee6b2 !important;
    font-family: var(--font-ui);
    font-size: 0.72rem !important;
    font-weight: 900;
}

.th-pix-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 0 18px 18px;
    background: #040914;
    border-left: 2px solid rgba(244,184,28,0.38);
    border-right: 2px solid rgba(244,184,28,0.38);
}

.th-pix-steps div {
    display: grid;
    gap: 6px;
    padding: 14px;
    background:
        linear-gradient(180deg, rgba(18,56,95,0.40), rgba(4,9,20,0.14)),
        #071526;
    border: 1px solid rgba(244,184,28,0.28);
}

.th-pix-steps i {
    color: #f4b81c;
    font-size: 1.15rem;
}

.th-pix-steps strong {
    color: #fefeff;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.th-pix-steps span {
    color: #d8e9f7;
    font-size: 0.84rem;
    line-height: 1.4;
}

.th-pix-alert {
    display: flex;
    gap: 12px;
    margin: 0 18px 18px;
    padding: 13px;
    background: rgba(7,21,38,0.92);
    border: 1px solid rgba(244,184,28,0.34);
    color: #d8e9f7;
}

.th-pix-alert--error {
    margin-top: 18px;
    border-color: rgba(255,105,97,0.62);
    background: rgba(50,12,14,0.42);
}

.th-pix-alert i {
    color: #f4b81c;
    font-size: 1.2rem;
    line-height: 1.2;
}

.th-pix-alert--error i {
    color: #ff8a80;
}

.th-pix-alert strong {
    display: block;
    margin-bottom: 3px;
    color: #fefeff;
    font-family: var(--font-ui);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.th-pix-alert p {
    margin: 0 !important;
    color: #d8e9f7 !important;
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
}

.th-pix-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0 18px 20px;
    background: #040914;
    border-left: 2px solid rgba(244,184,28,0.38);
    border-right: 2px solid rgba(244,184,28,0.38);
}

/* Home news portal */
.thunder-ticker-list {
    background: rgba(7,21,38,0.92) !important;
}

.thunder-ticker-item {
    min-height: 30px;
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr) 14px;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 10px !important;
    border-bottom: 1px solid rgba(244,184,28,0.14) !important;
    color: #fefeff !important;
    text-decoration: none !important;
}

.thunder-ticker-item:hover {
    background: rgba(18,56,95,0.66) !important;
}

.thunder-ticker-item .ticker-date {
    color: #f4b81c !important;
    font-family: var(--font-ui);
    font-size: 0.58rem;
    font-weight: 900;
    line-height: 1.15;
}

.thunder-ticker-item .ticker-text {
    min-width: 0;
    color: #fefeff !important;
    font-family: var(--font-ui);
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.2px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thunder-ticker-item .ticker-text strong {
    color: #fefeff !important;
}

.thunder-ticker-item:hover .ticker-text strong,
.thunder-ticker-item:hover .ticker-arrow {
    color: #f4b81c !important;
}

.thunder-article-body {
    padding: 12px !important;
    background: rgba(7,21,38,0.92) !important;
}

.thunder-news-list {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 12px !important;
}

.thunder-news-item {
    min-height: 132px;
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 14px;
    padding: 10px !important;
    background:
        linear-gradient(180deg, rgba(18,56,95,0.42), rgba(4,9,20,0.12)),
        #071526;
    border: 1px solid rgba(244,184,28,0.28) !important;
    box-shadow: inset 0 0 0 1px rgba(254,254,255,0.04), 0 3px 0 rgba(0,0,0,0.30);
}

.thunder-news-cover {
    position: relative;
    min-height: 112px;
    display: block;
    overflow: hidden;
    background: rgba(4,9,20,0.82);
    border: 1px solid rgba(244,184,28,0.34);
}

.thunder-news-cover img {
    width: 100%;
    height: 100%;
    min-height: 112px;
    display: block;
    object-fit: cover;
    object-position: center;
}

.thunder-news-cover span {
    width: 100%;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f4b81c;
    font-size: 2rem;
    background:
        radial-gradient(circle at center, rgba(244,184,28,0.16), transparent 45%),
        #071526;
}

.thunder-news-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.thunder-news-content .thunder-article-meta {
    margin: 0 0 4px !important;
    color: #cf9511 !important;
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.thunder-news-content .thunder-article-title {
    margin: 0 0 6px !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: var(--font-title) !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
}

.thunder-news-content .thunder-article-title a {
    color: #f4b81c !important;
    text-decoration: none !important;
}

.thunder-news-content .thunder-article-title a:hover {
    color: #fefeff !important;
}

.thunder-news-content .thunder-article-text {
    margin: 0 0 8px !important;
    color: #d8e9f7 !important;
    font-size: 0.88rem !important;
    line-height: 1.48 !important;
}

.thunder-news-content .thunder-read-more {
    width: fit-content;
    display: inline-flex;
    color: #f4b81c !important;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-decoration: none !important;
    text-transform: uppercase;
}

.thunder-news-content .thunder-read-more:hover {
    color: #fefeff !important;
}

@media (max-width: 620px) {
    .thunder-ticker-item {
        grid-template-columns: 68px minmax(0, 1fr) 12px;
        padding: 5px 8px !important;
    }

    .thunder-news-item {
        grid-template-columns: 1fr;
    }

    .thunder-news-cover,
    .thunder-news-cover img,
    .thunder-news-cover span {
        min-height: 150px;
        height: 150px;
    }
}

@media (max-width: 760px) {
    .th-donate-hero {
        min-height: 0;
        display: block;
    }

    .th-donate-hero__art {
        position: relative;
        width: 100%;
        height: auto;
        max-height: 190px;
        object-fit: contain;
        object-position: center;
        display: block;
        padding: 10px;
        background: rgba(4,9,20,0.45);
    }

    .th-donate-hero__content {
        padding: 20px 16px;
    }

    .th-donate-hero h1 {
        font-size: 1.55rem !important;
    }

    .th-donate-form__row {
        grid-template-columns: 1fr;
    }

    .th-donate-submit {
        width: 100%;
    }

    .th-pix-hero,
    .th-pix-grid,
    .th-pix-steps {
        grid-template-columns: 1fr;
    }

    .th-pix-hero {
        min-height: 0;
        padding: 20px 16px;
    }

    .th-pix-hero__summary {
        min-height: 112px;
    }

    .th-pix-grid {
        padding: 14px;
    }

    .th-pix-copy {
        grid-template-columns: 1fr;
    }

    .th-pix-copy button,
    .th-pix-button {
        width: 100%;
    }

    .th-pix-steps {
        padding: 0 14px 14px;
    }

    .th-pix-alert {
        margin: 0 14px 14px;
    }

    .th-pix-actions {
        padding: 0 14px 16px;
    }
}

@media (max-width: 480px) {
    .th-pix-summary-list {
        grid-template-columns: 1fr;
    }

    .th-pix-hero h1 {
        font-size: 1.72rem !important;
    }
}

/* Rules page */
.thunder-content-box .myaac-content.th-page-rules {
    padding: 14px !important;
    background:
        linear-gradient(180deg, rgba(18,56,95,0.28), rgba(4,9,20,0.08)),
        #040914 !important;
    color: #fefeff !important;
}

.thunder-content-box .myaac-content.th-page-rules,
.thunder-content-box .myaac-content.th-page-rules * {
    box-sizing: border-box;
}

.thunder-content-box .myaac-content.th-page-rules .BoxContent,
.thunder-content-box .myaac-content.th-page-rules .TableContainer,
.thunder-content-box .myaac-content.th-page-rules .TableContentContainer,
.thunder-content-box .myaac-content.th-page-rules .InnerTableContainer {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.thunder-content-box .myaac-content.th-page-rules table,
.thunder-content-box .myaac-content.th-page-rules tbody,
.thunder-content-box .myaac-content.th-page-rules tr,
.thunder-content-box .myaac-content.th-page-rules td {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    color: #fefeff !important;
}

.thunder-content-box .myaac-content.th-page-rules .CaptionContainer {
    width: 100% !important;
    height: auto !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    overflow: hidden;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    border: 1px solid #05080f !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,238,178,0.36),
        0 3px 0 rgba(0,0,0,0.36);
}

.thunder-content-box .myaac-content.th-page-rules .CaptionInnerContainer {
    width: 100% !important;
    height: auto !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

.thunder-content-box .myaac-content.th-page-rules .CaptionInnerContainer > span {
    display: none !important;
}

.thunder-content-box .myaac-content.th-page-rules .CaptionInnerContainer .Text {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    color: #040914 !important;
    font-family: var(--font-ui) !important;
    font-size: 0.88rem !important;
    font-weight: 900 !important;
    letter-spacing: 1.2px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

.thunder-content-box .myaac-content.th-page-rules > p,
.thunder-content-box .myaac-content.th-page-rules td > p,
.thunder-content-box .myaac-content.th-page-rules li > p {
    margin: 0 0 11px !important;
    color: #d8e9f7 !important;
    font-family: var(--font-body) !important;
    font-size: 0.92rem !important;
    line-height: 1.58 !important;
}

.thunder-content-box .myaac-content.th-page-rules p:has(> strong),
.thunder-content-box .myaac-content.th-page-rules li:has(> p > strong) > p:first-child {
    margin: 16px 0 8px !important;
    padding: 9px 11px !important;
    background:
        linear-gradient(180deg, rgba(18,56,95,0.72), rgba(7,21,38,0.92)),
        #071526 !important;
    border: 1px solid rgba(244,184,28,0.34) !important;
    box-shadow: inset 3px 0 0 #f4b81c, 0 2px 0 rgba(0,0,0,0.28);
    color: #f4b81c !important;
    font-family: var(--font-ui) !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.7px !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
}

.thunder-content-box .myaac-content.th-page-rules strong,
.thunder-content-box .myaac-content.th-page-rules b {
    color: #f4b81c !important;
    font-weight: 900 !important;
}

.thunder-content-box .myaac-content.th-page-rules ol,
.thunder-content-box .myaac-content.th-page-rules ul {
    margin: 8px 0 12px 20px !important;
    padding: 0 !important;
    color: #d8e9f7 !important;
    font-family: var(--font-body) !important;
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
}

.thunder-content-box .myaac-content.th-page-rules li {
    margin: 0 0 7px !important;
    padding-left: 3px !important;
    color: #d8e9f7 !important;
}

.thunder-content-box .myaac-content.th-page-rules li::marker {
    color: #f4b81c !important;
    font-weight: 900;
}

.thunder-content-box .myaac-content.th-page-rules hr {
    height: 1px !important;
    margin: 14px 0 !important;
    background: linear-gradient(90deg, transparent, rgba(244,184,28,0.55), transparent) !important;
    border: 0 !important;
}

.thunder-content-box .myaac-content.th-page-rules br {
    line-height: 1.35;
}

.thunder-content-box .myaac-content.th-page-rules #language-form {
    margin: 0 0 12px !important;
}

.thunder-content-box .myaac-content.th-page-rules #option-select {
    max-width: 140px;
    height: 34px;
    margin: 0 auto;
    display: block;
    background: #071526 !important;
    border: 1px solid rgba(244,184,28,0.48) !important;
    color: #fefeff !important;
    font-family: var(--font-ui) !important;
    font-weight: 900 !important;
    text-align: center;
}

@media (max-width: 620px) {
    .thunder-content-box .myaac-content.th-page-rules {
        padding: 10px !important;
    }

    .thunder-content-box .myaac-content.th-page-rules .CaptionInnerContainer .Text {
        padding: 9px 10px !important;
        font-size: 0.78rem !important;
    }

    .thunder-content-box .myaac-content.th-page-rules > p,
    .thunder-content-box .myaac-content.th-page-rules td > p,
    .thunder-content-box .myaac-content.th-page-rules li > p,
    .thunder-content-box .myaac-content.th-page-rules ol,
    .thunder-content-box .myaac-content.th-page-rules ul {
        font-size: 0.86rem !important;
    }
}

/* Guilds page */
.thunder-content-box .myaac-content.th-page-guilds {
    padding: 0 !important;
    background: #040914 !important;
    color: #fefeff !important;
    overflow: hidden;
}

.th-guilds-hero {
    min-height: 230px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: center;
    gap: 16px;
    padding: 24px 26px;
    background:
        linear-gradient(90deg, rgba(4,9,20,0.96) 0%, rgba(7,21,38,0.90) 54%, rgba(18,56,95,0.62) 100%),
        radial-gradient(circle at 82% 28%, rgba(244,184,28,0.22), transparent 36%),
        #071526;
    border: 2px solid rgba(244,184,28,0.48);
    box-shadow:
        inset 0 0 0 1px rgba(254,254,255,0.05),
        inset 0 -22px 32px rgba(0,0,0,0.24),
        0 4px 0 rgba(0,0,0,0.38);
}

.th-guilds-kicker {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 7px 11px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border: 1px solid #05080f;
    color: #040914;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.28);
}

.th-guilds-hero h1 {
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #f4b81c !important;
    font-family: var(--font-title) !important;
    font-size: 2.45rem !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-shadow: 2px 2px 0 #000, 0 0 14px rgba(244,184,28,0.22);
    text-transform: uppercase;
}

.th-guilds-hero p {
    max-width: 560px;
    margin: 0 0 14px !important;
    color: #d8e9f7 !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

.th-guilds-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.th-guilds-stats span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    background: rgba(4,9,20,0.74);
    border: 1px solid rgba(244,184,28,0.26);
    color: #fefeff;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.th-guilds-stats strong,
.th-guilds-stats i {
    color: #f4b81c !important;
}

.th-guilds-hero__emblem {
    width: 154px;
    height: 154px;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at center, rgba(244,184,28,0.18), transparent 58%),
        rgba(4,9,20,0.72);
    border: 2px solid rgba(244,184,28,0.50);
    box-shadow:
        inset 0 0 0 1px rgba(254,254,255,0.06),
        0 0 26px rgba(244,184,28,0.12),
        0 4px 0 rgba(0,0,0,0.36);
}

.th-guilds-hero__emblem img {
    width: 86px;
    height: 86px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 10px rgba(244,184,28,0.34));
}

.thunder-content-box .myaac-content.th-page-guilds > .TableContainer,
.thunder-content-box .myaac-content.th-page-guilds > table {
    margin: 14px !important;
}

.thunder-content-box .myaac-content.th-page-guilds .TableContainer,
.thunder-content-box .myaac-content.th-page-guilds .InnerTableContainer,
.thunder-content-box .myaac-content.th-page-guilds .TableContentContainer {
    background: transparent !important;
    border: 0 !important;
}

.thunder-content-box .myaac-content.th-page-guilds .CaptionContainer {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 10px !important;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    border: 1px solid #05080f !important;
    box-shadow: inset 0 0 0 1px rgba(255,238,178,0.36), 0 3px 0 rgba(0,0,0,0.32);
}

.thunder-content-box .myaac-content.th-page-guilds .CaptionInnerContainer {
    width: 100% !important;
    height: auto !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

.thunder-content-box .myaac-content.th-page-guilds .CaptionInnerContainer > span {
    display: none !important;
}

.thunder-content-box .myaac-content.th-page-guilds .CaptionInnerContainer .Text {
    width: 100% !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    color: #040914 !important;
    font-family: var(--font-ui) !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    letter-spacing: 1.1px !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

.thunder-content-box .myaac-content.th-page-guilds .TableContent {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    background: transparent !important;
}

.thunder-content-box .myaac-content.th-page-guilds .TableContent tbody {
    display: table-row-group;
}

.thunder-content-box .myaac-content.th-page-guilds .TableContent tr {
    background:
        linear-gradient(180deg, rgba(18,56,95,0.46), rgba(4,9,20,0.14)),
        #071526 !important;
    border: 1px solid rgba(244,184,28,0.26) !important;
    box-shadow: inset 0 0 0 1px rgba(254,254,255,0.04), 0 3px 0 rgba(0,0,0,0.28);
}

.thunder-content-box .myaac-content.th-page-guilds .TableContent tr:first-child {
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.30);
}

.thunder-content-box .myaac-content.th-page-guilds .TableContent td {
    padding: 10px 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid rgba(244,184,28,0.18) !important;
    border-bottom: 1px solid rgba(244,184,28,0.18) !important;
    color: #d8e9f7 !important;
    vertical-align: middle !important;
}

.thunder-content-box .myaac-content.th-page-guilds .TableContent td:first-child {
    border-left: 1px solid rgba(244,184,28,0.18) !important;
}

.thunder-content-box .myaac-content.th-page-guilds .TableContent td:last-child {
    border-right: 1px solid rgba(244,184,28,0.18) !important;
}

.thunder-content-box .myaac-content.th-page-guilds .TableContent tr:first-child td,
.thunder-content-box .myaac-content.th-page-guilds .TableContent tr:first-child b {
    color: #040914 !important;
    font-family: var(--font-ui) !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
}

.th-guild-logo {
    width: 64px !important;
    height: 64px !important;
    padding: 8px;
    object-fit: contain;
    background: rgba(4,9,20,0.78);
    border: 1px solid rgba(244,184,28,0.42);
    box-shadow: inset 0 0 12px rgba(244,184,28,0.08), 0 2px 0 rgba(0,0,0,0.30);
    image-rendering: pixelated;
}

.th-guild-logo--default {
    padding: 10px;
}

.thunder-content-box .myaac-content.th-page-guilds .TableContent a {
    color: #f4b81c !important;
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 900;
    text-decoration: none !important;
}

.thunder-content-box .myaac-content.th-page-guilds .TableContent a:hover {
    color: #fefeff !important;
}

.thunder-content-box .myaac-content.th-page-guilds .TableContent span {
    color: #d8e9f7 !important;
    font-size: 0.86rem;
    line-height: 1.35;
}

.thunder-content-box .myaac-content.th-page-guilds .BigButton {
    width: auto !important;
    min-width: 112px !important;
    height: auto !important;
    background: none !important;
}

.thunder-content-box .myaac-content.th-page-guilds .BigButton > div {
    position: static !important;
}

.thunder-content-box .myaac-content.th-page-guilds .BigButtonOver {
    display: none !important;
}

.thunder-content-box .myaac-content.th-page-guilds .BigButtonText {
    position: static !important;
    width: auto !important;
    min-width: 112px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    border: 2px solid #05080f !important;
    color: #040914 !important;
    cursor: pointer;
    font-family: var(--font-ui) !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.7px !important;
    text-transform: uppercase !important;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.28);
}

.thunder-content-box .myaac-content.th-page-guilds .BigButtonText:hover {
    filter: brightness(1.12);
}

.thunder-content-box .myaac-content.th-page-guilds > table:last-of-type {
    background:
        linear-gradient(180deg, rgba(18,56,95,0.38), rgba(4,9,20,0.12)),
        #071526 !important;
    border: 1px solid rgba(244,184,28,0.30) !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.30);
}

.thunder-content-box .myaac-content.th-page-guilds > table:last-of-type td {
    padding: 12px !important;
    background: transparent !important;
    border: 0 !important;
    color: #d8e9f7 !important;
    text-align: center;
}

.thunder-content-box .myaac-content.th-page-guilds img[src*="blank.gif"],
.thunder-content-box .myaac-content.th-page-guilds td:has(> img[src*="blank.gif"]) {
    display: none !important;
}

.thunder-content-box .myaac-content.th-page-guilds > table:last-of-type b {
    display: block;
    margin-bottom: 8px;
    color: #f4b81c !important;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

@media (max-width: 720px) {
    .th-guilds-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 20px 16px;
        text-align: center;
    }

    .th-guilds-kicker,
    .th-guilds-stats {
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }

    .th-guilds-hero h1 {
        font-size: 1.85rem !important;
    }

    .th-guilds-hero__emblem {
        width: 112px;
        height: 112px;
    }

    .th-guilds-hero__emblem img {
        width: 66px;
        height: 66px;
    }

    .thunder-content-box .myaac-content.th-page-guilds .TableContent {
        min-width: 640px;
    }

    .thunder-content-box .myaac-content.th-page-guilds .TableContentContainer,
    .thunder-content-box .myaac-content.th-page-guilds .InnerTableContainer {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Privacy and cookies page */
.thunder-content-box .myaac-content.th-page-privacy-policy {
    padding: 0 !important;
    background: #040914 !important;
    color: #fefeff !important;
}

.th-policy-hero {
    padding: 24px 26px;
    background:
        linear-gradient(90deg, rgba(4,9,20,0.96), rgba(7,21,38,0.90)),
        radial-gradient(circle at 82% 20%, rgba(244,184,28,0.20), transparent 34%),
        #071526;
    border: 2px solid rgba(244,184,28,0.46);
    box-shadow: inset 0 0 0 1px rgba(254,254,255,0.05), 0 4px 0 rgba(0,0,0,0.34);
}

.th-policy-kicker {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 7px 11px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border: 1px solid #05080f;
    color: #040914;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.th-policy-hero h1 {
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #f4b81c !important;
    font-family: var(--font-title) !important;
    font-size: 2rem !important;
    line-height: 1.08 !important;
    text-shadow: 2px 2px 0 #000, 0 0 14px rgba(244,184,28,0.20);
}

.th-policy-hero p {
    max-width: 680px;
    margin: 0 !important;
    color: #d8e9f7 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

.th-policy-panel,
.th-policy-grid {
    margin: 14px;
}

.th-policy-panel {
    padding: 16px;
    background:
        linear-gradient(180deg, rgba(18,56,95,0.38), rgba(4,9,20,0.12)),
        #071526;
    border: 1px solid rgba(244,184,28,0.30);
    box-shadow: inset 0 0 0 1px rgba(254,254,255,0.04), 0 3px 0 rgba(0,0,0,0.28);
}

.th-policy-panel h2,
.th-policy-grid h3 {
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #f4b81c !important;
    font-family: var(--font-ui) !important;
    font-size: 0.86rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.th-policy-panel p,
.th-policy-grid p {
    margin: 0 0 10px !important;
    color: #d8e9f7 !important;
    font-size: 0.94rem !important;
    line-height: 1.55 !important;
}

.th-policy-panel p:last-child,
.th-policy-grid p:last-child {
    margin-bottom: 0 !important;
}

.th-policy-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.th-policy-grid article {
    padding: 14px;
    background: rgba(7,21,38,0.88);
    border: 1px solid rgba(244,184,28,0.26);
    box-shadow: inset 0 0 0 1px rgba(254,254,255,0.04), 0 3px 0 rgba(0,0,0,0.24);
}

.th-policy-grid article > i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    background: rgba(4,9,20,0.78);
    border: 1px solid rgba(244,184,28,0.42);
    color: #f4b81c;
}

@media (max-width: 760px) {
    .th-policy-hero {
        padding: 20px 16px;
    }

    .th-policy-hero h1 {
        font-size: 1.55rem !important;
    }

    .th-policy-grid {
        grid-template-columns: 1fr;
    }
}

/* Online page */
.thunder-content-box .myaac-content.th-page-online {
    padding: 0 !important;
    background: #040914 !important;
    color: #fefeff !important;
}

.th-online-page {
    color: #fefeff;
}

.th-online-hero {
    min-height: 210px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    align-items: center;
    gap: 16px;
    padding: 24px 26px;
    background:
        linear-gradient(90deg, rgba(4,9,20,0.96) 0%, rgba(7,21,38,0.90) 58%, rgba(18,56,95,0.60) 100%),
        radial-gradient(circle at 82% 28%, rgba(80,208,80,0.18), transparent 32%),
        #071526;
    border: 2px solid rgba(244,184,28,0.46);
    box-shadow: inset 0 0 0 1px rgba(254,254,255,0.05), 0 4px 0 rgba(0,0,0,0.34);
}

.th-online-kicker {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 7px 11px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border: 1px solid #05080f;
    color: #040914;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.th-online-hero h1 {
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #f4b81c !important;
    font-family: var(--font-title) !important;
    font-size: 2.35rem !important;
    line-height: 1 !important;
    text-shadow: 2px 2px 0 #000, 0 0 14px rgba(244,184,28,0.20);
    text-transform: uppercase;
}

.th-online-hero p {
    margin: 0 !important;
    color: #d8e9f7 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

.th-online-hero__count {
    width: 148px;
    height: 148px;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(4,9,20,0.78);
    border: 2px solid rgba(80,208,80,0.52);
    box-shadow: inset 0 0 0 1px rgba(254,254,255,0.05), 0 0 22px rgba(80,208,80,0.10), 0 4px 0 rgba(0,0,0,0.34);
    text-align: center;
}

.th-online-hero__count strong {
    color: #50d050 !important;
    font-family: var(--font-title);
    font-size: 3rem;
    line-height: 1;
    text-shadow: 2px 2px 0 #000;
}

.th-online-hero__count span {
    color: #fefeff;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.th-online-stats,
.th-online-vocations {
    display: grid;
    gap: 12px;
    margin: 14px;
}

.th-online-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.th-online-stats article,
.th-online-vocations article,
.th-online-section {
    background:
        linear-gradient(180deg, rgba(18,56,95,0.38), rgba(4,9,20,0.12)),
        #071526;
    border: 1px solid rgba(244,184,28,0.30);
    box-shadow: inset 0 0 0 1px rgba(254,254,255,0.04), 0 3px 0 rgba(0,0,0,0.28);
}

.th-online-stats article {
    min-height: 104px;
    padding: 13px;
}

.th-online-stats i {
    color: #f4b81c;
    margin-bottom: 8px;
}

.th-online-stats span {
    display: block;
    color: #d8e9f7;
    font-family: var(--font-ui);
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.th-online-stats strong {
    display: block;
    margin-top: 5px;
    color: #fefeff !important;
    font-family: var(--font-title);
    font-size: 1rem;
    line-height: 1.25;
}

.th-online-stats small {
    display: block;
    margin-top: 4px;
    color: rgba(216,233,247,0.72);
}

.th-online-section {
    margin: 14px;
    overflow: hidden;
}

.th-online-section__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border-bottom: 2px solid #05080f;
    color: #040914;
}

.th-online-section__head h2 {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #040914 !important;
    font-family: var(--font-ui) !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.th-online-vocations {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 14px;
}

.th-online-vocations article {
    min-height: 82px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px;
    text-align: center;
}

.th-online-vocations span {
    color: #d8e9f7;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.th-online-vocations strong {
    color: #f4b81c !important;
    font-family: var(--font-title);
    font-size: 2rem;
    line-height: 1.05;
}

.th-online-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.th-online-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse !important;
    margin: 0 !important;
    background: transparent !important;
}

.th-online-table th {
    padding: 9px 10px !important;
    background: rgba(4,9,20,0.78) !important;
    border: 1px solid rgba(244,184,28,0.20) !important;
    color: #f4b81c !important;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.th-online-table td {
    padding: 9px 10px !important;
    background: rgba(7,21,38,0.78) !important;
    border: 1px solid rgba(244,184,28,0.14) !important;
    color: #fefeff !important;
    vertical-align: middle;
}

.th-online-table tr:nth-child(even) td {
    background: rgba(11,35,64,0.82) !important;
}

.th-online-table tr:hover td {
    background: rgba(18,56,95,0.92) !important;
}

.th-online-table a {
    color: #f4b81c !important;
    font-family: var(--font-ui);
    font-weight: 900;
    text-decoration: none !important;
}

.th-online-table a:hover {
    color: #fefeff !important;
}

.th-online-level {
    color: #f4b81c !important;
    font-family: var(--font-ui);
    font-weight: 900;
}

.th-online-outfit {
    width: 82px;
    height: 78px;
    text-align: center;
}

.th-online-outfit img {
    max-width: 72px;
    max-height: 72px;
    display: block;
    margin: 0 auto;
    image-rendering: pixelated;
}

.th-online-empty {
    padding: 20px;
    color: #d8e9f7;
    text-align: center;
}

.th-online-empty i {
    color: #f4b81c;
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.th-online-empty p {
    margin: 0 !important;
    color: #d8e9f7 !important;
}

.th-online-search {
    margin-top: 14px;
}

.th-online-search-form {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 14px;
}

.th-online-search-form label {
    color: #f4b81c;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.th-online-search-form input {
    min-height: 38px;
    background: rgba(4,9,20,0.82) !important;
    border: 1px solid rgba(244,184,28,0.42) !important;
    color: #fefeff !important;
    font-family: var(--font-ui) !important;
}

.th-online-search-form button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border: 2px solid #05080f;
    color: #040914;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .th-online-hero,
    .th-online-stats,
    .th-online-vocations,
    .th-online-search-form {
        grid-template-columns: 1fr;
    }

    .th-online-hero {
        min-height: 0;
        padding: 20px 16px;
        text-align: center;
    }

    .th-online-kicker {
        margin-left: auto;
        margin-right: auto;
    }

    .th-online-hero h1 {
        font-size: 1.75rem !important;
    }

    .th-online-hero__count {
        width: 116px;
        height: 116px;
    }

    .th-online-hero__count strong {
        font-size: 2.3rem;
    }

    .th-online-search-form button {
        width: 100%;
    }
}

/* Monthly packages page */
.thunder-content-box .myaac-content.th-page-monthly_packages {
    background: #050b17 !important;
    color: #fefeff !important;
}

.th-packages-page {
    margin: 0;
    padding: 14px;
    background:
        radial-gradient(circle at 78% 6%, rgba(244,184,28,0.18), transparent 34%),
        linear-gradient(180deg, rgba(8,26,46,0.98) 0%, rgba(3,9,18,0.98) 100%);
    border: 1px solid rgba(244,184,28,0.48);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.72), 0 12px 28px rgba(0,0,0,0.34);
}

.package-selection-container.th-packages-page {
    font-family: var(--font-body) !important;
    color: #fefeff !important;
}

.th-packages-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 18px;
    align-items: stretch;
    min-height: 210px;
    padding: 22px;
    background:
        linear-gradient(90deg, rgba(4,9,20,0.94) 0%, rgba(7,24,43,0.82) 58%, rgba(4,9,20,0.72) 100%),
        url("../images/themeboxes/highscore.png") right 18px center / 170px auto no-repeat;
    border: 1px solid rgba(244,184,28,0.52);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.72);
}

.th-packages-kicker {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 7px 11px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border: 2px solid #05080f;
    color: #040914;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.th-packages-hero h1,
.package-selection-container.th-packages-page > div:first-child h1 {
    max-width: 650px;
    margin: 0 !important;
    color: #f4b81c !important;
    background: none !important;
    -webkit-text-fill-color: #f4b81c !important;
    text-shadow: 0 2px 0 #000, 0 0 16px rgba(244,184,28,0.42);
    font-family: var(--font-title) !important;
    font-size: clamp(2rem, 4.8vw, 3.2rem) !important;
    font-style: normal !important;
    line-height: 0.96 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
}

.th-packages-hero p {
    max-width: 630px;
    margin: 12px 0 0 !important;
    color: #d8e9f7 !important;
    font-size: 1rem;
    line-height: 1.55;
}

.th-packages-benefits,
.th-packages-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.th-packages-benefits span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    background: rgba(3,9,18,0.78);
    border: 1px solid rgba(244,184,28,0.36);
    color: #fefeff;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.th-packages-benefits i,
.th-packages-preview-grid i {
    color: #f4b81c;
}

.th-packages-hero__panel {
    align-self: center;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
    background: rgba(3,9,18,0.82);
    border: 1px solid rgba(244,184,28,0.42);
    box-shadow: inset 0 0 22px rgba(244,184,28,0.08);
    text-align: center;
}

.th-packages-hero__panel strong {
    color: #f4b81c;
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.th-packages-hero__panel span {
    display: block;
    margin-top: 8px;
    color: #fefeff;
    font-family: var(--font-title);
    font-size: 1.45rem;
    line-height: 1.05;
}

.th-packages-hero__panel small {
    display: block;
    margin-top: 10px;
    color: rgba(216,233,247,0.76);
    line-height: 1.35;
}

.th-packages-primary,
.th-packages-secondary,
.package-selection-container.th-packages-page .buy-tier-btn,
.package-selection-container.th-packages-page .copy-btn {
    min-height: 38px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px !important;
    border-radius: 0 !important;
    border: 2px solid #05080f !important;
    cursor: pointer;
    font-family: var(--font-ui) !important;
    font-size: 0.7rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

.th-packages-primary,
.package-selection-container.th-packages-page .buy-tier-btn,
.package-selection-container.th-packages-page .copy-btn {
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    color: #040914 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 0 0 16px rgba(244,184,28,0.22);
}

.th-packages-secondary {
    background: rgba(4,9,20,0.88);
    color: #fefeff !important;
    border-color: rgba(244,184,28,0.48) !important;
}

.th-packages-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.th-packages-preview-grid article {
    min-height: 118px;
    padding: 14px;
    background: rgba(7,21,38,0.86);
    border: 1px solid rgba(244,184,28,0.28);
    text-align: center;
}

.th-packages-preview-grid i {
    font-size: 1.35rem;
}

.th-packages-preview-grid strong {
    display: block;
    margin-top: 8px;
    color: #fefeff;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.th-packages-preview-grid span {
    display: block;
    margin-top: 7px;
    color: rgba(216,233,247,0.78);
    font-size: 0.84rem;
    line-height: 1.35;
}

.package-selection-container.th-packages-page .tabs-nav {
    flex-wrap: wrap;
    gap: 8px !important;
    margin: 16px 0 14px !important;
}

.package-selection-container.th-packages-page .tab-btn {
    min-height: 38px;
    padding: 0 15px !important;
    background: rgba(4,9,20,0.86) !important;
    border: 1px solid rgba(244,184,28,0.34) !important;
    border-radius: 0 !important;
    color: #d8e9f7 !important;
    font-family: var(--font-ui) !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase;
}

.package-selection-container.th-packages-page .tab-btn.active {
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    color: #040914 !important;
    box-shadow: 0 0 18px rgba(244,184,28,0.28) !important;
}

.package-selection-container.th-packages-page .player-select-container {
    margin: 0 0 16px !important;
    padding: 14px;
    background: rgba(3,9,18,0.74);
    border: 1px solid rgba(244,184,28,0.26);
}

.package-selection-container.th-packages-page .player-select-container p {
    color: #f4b81c !important;
}

.package-selection-container.th-packages-page .player-select-container select {
    min-height: 40px;
    background: rgba(4,9,20,0.94) !important;
    border: 1px solid rgba(244,184,28,0.54) !important;
    border-radius: 0 !important;
    color: #fefeff !important;
    font-family: var(--font-ui) !important;
}

.th-packages-section-note {
    max-width: 620px;
    margin: -2px auto 8px !important;
    color: rgba(216,233,247,0.78) !important;
    text-align: center;
}

.package-selection-container.th-packages-page .tiers-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 16px !important;
}

.package-selection-container.th-packages-page .tier-card {
    min-height: 0 !important;
    padding: 16px 14px !important;
    background:
        linear-gradient(180deg, rgba(10,36,64,0.94) 0%, rgba(4,13,25,0.98) 100%) !important;
    border: 1px solid rgba(244,184,28,0.38) !important;
    border-top-width: 4px !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.62), 0 10px 22px rgba(0,0,0,0.22);
}

.package-selection-container.th-packages-page .tier-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(244,184,28,0.82) !important;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.62), 0 14px 28px rgba(0,0,0,0.34), 0 0 20px rgba(244,184,28,0.16) !important;
}

.package-selection-container.th-packages-page .tier-card.ouro,
.package-selection-container.th-packages-page .tier-card:nth-child(3) {
    background:
        radial-gradient(circle at 50% 0%, rgba(244,184,28,0.20), transparent 44%),
        linear-gradient(180deg, rgba(12,41,73,0.96) 0%, rgba(4,13,25,0.98) 100%) !important;
    border-color: rgba(244,184,28,0.72) !important;
}

.package-selection-container.th-packages-page .tier-name {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fefeff !important;
    font-family: var(--font-ui) !important;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px !important;
    line-height: 1.15 !important;
    text-transform: uppercase;
}

.package-selection-container.th-packages-page .tier-price {
    margin: 8px 0 14px !important;
    color: #f4b81c !important;
    font-family: var(--font-title) !important;
    font-size: 2.65rem !important;
    font-weight: 900 !important;
    line-height: 0.95 !important;
    text-shadow: 0 2px 0 #000, 0 0 14px rgba(244,184,28,0.42);
}

.package-selection-container.th-packages-page .tier-price span {
    color: #fefeff !important;
    font-family: var(--font-ui) !important;
    font-weight: 900 !important;
}

.package-selection-container.th-packages-page .feature-list {
    display: grid;
    gap: 6px;
    margin: 0 0 14px !important;
    padding: 0 !important;
}

.package-selection-container.th-packages-page .feature-list li {
    min-height: 38px;
    padding: 6px 8px !important;
    background: rgba(3,9,18,0.48);
    border: 1px solid rgba(244,184,28,0.14) !important;
    color: #d8e9f7 !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
}

.package-selection-container.th-packages-page .feature-list li:first-child,
.package-selection-container.th-packages-page .feature-list li:nth-child(2) {
    background: rgba(244,184,28,0.10);
    border-color: rgba(244,184,28,0.30) !important;
}

.package-selection-container.th-packages-page .feature-list b {
    color: #f4b81c !important;
    font-family: var(--font-ui);
    font-weight: 900;
}

.package-selection-container.th-packages-page .item-icon {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.7));
}

.package-selection-container.th-packages-page .info-card {
    justify-content: flex-start;
    background: rgba(3,9,18,0.78) !important;
    border: 1px dashed rgba(244,184,28,0.58) !important;
}

.package-selection-container.th-packages-page .info-card h3 {
    color: #f4b81c !important;
    font-family: var(--font-ui) !important;
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.package-selection-container.th-packages-page .info-card li {
    color: #d8e9f7 !important;
}

#pixModal .modal-content {
    background: #050b17 !important;
    border: 1px solid rgba(244,184,28,0.62) !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.68), 0 20px 60px rgba(0,0,0,0.72);
}

#pixModal .modal-content h2 {
    color: #f4b81c !important;
    font-family: var(--font-title) !important;
}

#pixModal .pix-input {
    background: rgba(3,9,18,0.92) !important;
    border: 1px solid rgba(244,184,28,0.42) !important;
    border-radius: 0 !important;
    color: #fefeff !important;
}

@media (max-width: 980px) {
    .package-selection-container.th-packages-page .tiers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .th-packages-page {
        padding: 10px;
    }

    .th-packages-hero {
        grid-template-columns: 1fr;
        padding: 16px;
        background: linear-gradient(180deg, rgba(4,9,20,0.95) 0%, rgba(7,24,43,0.84) 100%);
        text-align: center;
    }

    .th-packages-kicker,
    .th-packages-benefits,
    .th-packages-hero__actions {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    .th-packages-preview-grid,
    .package-selection-container.th-packages-page .tiers-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Character profile */
.th-page-characters {
    color: #e9f4ff;
}

.th-page-characters .th-character-intro {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(8, 27, 48, 0.96), rgba(3, 10, 20, 0.96));
    border: 1px solid rgba(244, 184, 28, 0.62);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.64);
    color: #d8e9f7;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 800;
}

.th-page-characters .th-character-profile-hero {
    position: relative;
    min-height: 190px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 18px;
    align-items: center;
    margin: 0 0 14px;
    padding: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 18%, rgba(244,184,28,0.22), transparent 31%),
        linear-gradient(90deg, rgba(4,9,20,0.98) 0%, rgba(7,21,38,0.94) 62%, rgba(18,56,95,0.58) 100%),
        #071526;
    border: 2px solid rgba(244,184,28,0.54);
    box-shadow:
        inset 0 0 0 1px rgba(254,254,255,0.06),
        inset 0 -20px 38px rgba(0,0,0,0.42),
        0 4px 0 rgba(0,0,0,0.38);
}

.th-page-characters .th-character-profile-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(244,184,28,0.10), transparent 42%),
        repeating-linear-gradient(90deg, rgba(254,254,255,0.035) 0 1px, transparent 1px 88px);
    pointer-events: none;
}

.th-page-characters .th-character-profile-hero__main,
.th-page-characters .th-character-profile-hero__outfit {
    position: relative;
    z-index: 1;
}

.th-page-characters .th-character-profile-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border: 1px solid #05080f;
    color: #040914;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.35);
}

.th-page-characters .th-character-profile-hero h1 {
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #f4b81c !important;
    font-family: var(--font-title) !important;
    font-size: clamp(2rem, 4vw, 2.9rem) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    text-shadow: 2px 2px 0 #000, 0 0 18px rgba(244,184,28,0.28) !important;
}

.th-page-characters .th-character-profile-hero p {
    margin: 0 !important;
    color: #d8e9f7 !important;
    font-family: var(--font-ui);
    font-size: 0.92rem !important;
    font-weight: 800;
    line-height: 1.45 !important;
}

.th-page-characters .th-character-profile-hero__outfit {
    min-height: 126px;
    display: grid;
    place-items: center;
    background: rgba(4,9,20,0.70);
    border: 1px solid rgba(244,184,28,0.38);
    box-shadow: inset 0 0 18px rgba(244,184,28,0.08);
}

.th-page-characters .th-character-profile-hero__outfit img {
    max-width: 120px;
    max-height: 120px;
    object-fit: contain;
    object-position: center;
}

.th-page-characters .TableContainer {
    margin-bottom: 12px;
    background: rgba(3, 9, 18, 0.72);
    border-color: rgba(244, 184, 28, 0.38);
}

.th-page-characters .CaptionContainer .Text,
.th-page-characters .CaptionInnerContainer .Text {
    color: #050914 !important;
    font-family: var(--font-title);
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.th-page-characters .InnerTableContainer,
.th-page-characters .TableContentContainer {
    background: rgba(4, 12, 24, 0.9) !important;
}

.th-page-characters .TableContent,
.th-page-characters .Table1,
.th-page-characters .Table3,
.th-page-characters .Table5 {
    background: rgba(4, 12, 24, 0.92) !important;
    border-color: rgba(244, 184, 28, 0.36) !important;
    color: #e9f4ff !important;
}

.th-page-characters .TableContent tr,
.th-page-characters .TableContent td {
    background-color: rgba(6, 19, 35, 0.84) !important;
    border-color: rgba(244, 184, 28, 0.2) !important;
    color: #e9f4ff !important;
}

.th-page-characters .TableContent tr:nth-child(even) td {
    background-color: rgba(8, 28, 50, 0.86) !important;
}

.th-page-characters .LabelV175,
.th-page-characters .LabelV150,
.th-page-characters .LabelV80 {
    color: #f4b81c !important;
    font-family: var(--font-ui);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.th-page-characters a {
    color: #f4b81c;
    font-weight: 900;
}

.th-page-characters a:hover {
    color: #fff3b0;
}

.th-page-characters input[name="name"],
.th-page-characters .input_clipboard {
    min-height: 34px;
    background: #030912 !important;
    border: 1px solid rgba(244, 184, 28, 0.45) !important;
    color: #fefeff !important;
    font-family: var(--font-ui);
    font-weight: 800;
}

.th-page-characters .progress {
    height: 9px;
    margin-top: 5px;
    background: rgba(0, 0, 0, 0.58);
    border: 1px solid rgba(244, 184, 28, 0.25);
    border-radius: 0;
    overflow: hidden;
}

.th-page-characters .progress-bar {
    min-height: 9px;
}

.th-page-characters .bg-danger {
    background: linear-gradient(90deg, #9e1d1d, #e24332) !important;
}

.th-page-characters .bg-success {
    background: linear-gradient(90deg, #24723a, #5ac56b) !important;
}

.th-page-characters .bg-default {
    background: linear-gradient(90deg, #1467a8, #4db5ff) !important;
}

.th-page-characters .BigButton {
    margin: 2px;
}

.th-page-characters .btn_clipboard {
    min-height: 30px;
    padding: 0 10px;
    background: linear-gradient(180deg, #f4c12b, #c48709);
    border: 1px solid #050914;
    color: #050914;
    font-family: var(--font-ui);
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.th-page-characters img[src*="images/items/"],
.th-page-characters .th-character-item-img,
.th-page-characters img[src*="tibiawiki.com.br/images/"],
.th-page-characters img[src*="templates/tibiacom/images/on.gif"],
.th-page-characters img[src*="templates/tibiacom/images/off.gif"] {
    max-width: none;
    image-rendering: pixelated;
}

.th-page-characters .th-character-item-img {
    width: 32px !important;
    height: 32px !important;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    object-position: center;
}

.th-page-characters table[style*="background: #292929"],
.th-page-characters table[style*="background: #292929"] tbody {
    display: table !important;
    width: auto !important;
}

.th-page-characters table[style*="background: #292929"] tr {
    display: table-row !important;
    width: auto !important;
}

.th-page-characters table[style*="background: #292929"] td {
    display: table-cell !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
    padding: 3px !important;
    text-align: center;
    vertical-align: middle;
    background-color: #030912 !important;
    border-color: rgba(244,184,28,0.42) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.72);
}

.th-page-characters table[style*="background: #292929"] img {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto;
}

@media (max-width: 720px) {
    .th-page-characters .TableContent,
    .th-page-characters .TableContent tbody,
    .th-page-characters .TableContent tr,
    .th-page-characters .TableContent td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    .th-page-characters .LabelV175,
    .th-page-characters .LabelV150,
    .th-page-characters .LabelV80 {
        padding-bottom: 2px;
    }

    .th-page-characters form table,
    .th-page-characters form tbody,
    .th-page-characters form tr,
    .th-page-characters form td {
        display: block;
        width: 100% !important;
    }

    .th-page-characters form .BigButton {
        margin-top: 8px;
    }

    .th-page-characters .th-character-profile-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 18px 16px;
    }

    .th-page-characters .th-character-profile-hero__outfit {
        min-height: 96px;
    }

    .th-page-characters .th-character-profile-hero__outfit img {
        max-height: 92px;
    }
}

/* Logged-in account/create guard */
.th-account-guard {
    max-width: 680px;
    margin: 8px auto 22px;
    background:
        linear-gradient(90deg, rgba(244,184,28,0.08), transparent 18%, transparent 82%, rgba(244,184,28,0.08)),
        linear-gradient(180deg, #0b2340 0%, #061221 100%);
    border: 2px solid rgba(244,184,28,0.7);
    box-shadow:
        inset 0 0 0 2px rgba(0,0,0,0.72),
        3px 3px 0 rgba(0,0,0,0.62);
    color: #e9f4ff;
}

.th-account-guard__head {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 14px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border-bottom: 2px solid #050914;
    color: #040914;
}

.th-account-guard__head h1 {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #040914 !important;
    font-family: var(--font-title);
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.35);
}

.th-account-guard__head span {
    color: #040914;
    font-size: 0.72rem;
}

.th-account-guard__body {
    padding: 22px 18px 20px;
    text-align: center;
}

.th-account-guard__icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: #040914;
    border: 1px solid rgba(244,184,28,0.72);
    color: #f4b81c;
    font-size: 1.25rem;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.72);
}

.th-account-guard__body h2 {
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #fefeff !important;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.th-account-guard__body p {
    max-width: 520px;
    margin: 0 auto 16px;
    color: #c9d9e8;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.5;
}

.th-account-guard__actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.th-account-guard__btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border: 2px solid #050914;
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}

.th-account-guard__btn--blue {
    background: linear-gradient(180deg, #174a78 0%, #071526 100%);
    border-color: #f4b81c;
    color: #fefeff !important;
}

.th-account-guard__btn--gold {
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    color: #040914 !important;
}

.th-account-guard__btn:hover {
    filter: brightness(1.12);
}

/* Character comment editor */
.thunder-content-box .myaac-content:has(.th-character-comment-page) {
    padding: 0 !important;
    background: #040914 !important;
    color: #fefeff !important;
}

.th-character-comment-page {
    color: #fefeff;
    font-family: var(--font-body);
}

.th-character-comment-hero {
    position: relative;
    min-height: 205px;
    padding: 28px;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 18%, rgba(244,184,28,0.20), transparent 30%),
        linear-gradient(90deg, rgba(4,9,20,0.98) 0%, rgba(7,21,38,0.94) 62%, rgba(18,56,95,0.52) 100%),
        #071526;
    border: 2px solid rgba(244,184,28,0.52);
    box-shadow:
        inset 0 0 0 1px rgba(254,254,255,0.06),
        inset 0 -22px 40px rgba(0,0,0,0.42),
        0 4px 0 rgba(0,0,0,0.38);
}

.th-character-comment-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(244,184,28,0.10), transparent 42%),
        repeating-linear-gradient(90deg, rgba(254,254,255,0.035) 0 1px, transparent 1px 88px);
    pointer-events: none;
}

.th-character-comment-kicker,
.th-character-comment-hero h1,
.th-character-comment-hero p {
    position: relative;
    z-index: 1;
}

.th-character-comment-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border: 1px solid #05080f;
    color: #040914;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.35);
}

.th-character-comment-hero h1 {
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #f4b81c !important;
    font-family: var(--font-title) !important;
    font-size: clamp(2rem, 4vw, 2.9rem) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    text-shadow: 2px 2px 0 #000, 0 0 18px rgba(244,184,28,0.28) !important;
}

.th-character-comment-hero p {
    max-width: 570px;
    margin: 0 !important;
    color: #d8e9f7 !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
}

.th-character-comment-form {
    display: grid;
    gap: 14px;
    padding: 18px;
    background:
        linear-gradient(180deg, rgba(18,56,95,0.28), rgba(4,9,20,0.08)),
        #040914;
    border-left: 2px solid rgba(244,184,28,0.38);
    border-right: 2px solid rgba(244,184,28,0.38);
}

.th-character-comment-card {
    background:
        linear-gradient(180deg, rgba(18,56,95,0.44), rgba(4,9,20,0.14)),
        #071526;
    border: 2px solid rgba(244,184,28,0.38);
    box-shadow: inset 0 0 0 1px rgba(254,254,255,0.05), 0 4px 0 rgba(0,0,0,0.34);
}

.th-character-comment-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 9px 12px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border-bottom: 2px solid #05080f;
    color: #040914;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.th-character-comment-field {
    padding: 14px;
    border-bottom: 1px solid rgba(244,184,28,0.16);
}

.th-character-comment-field:last-child {
    border-bottom: 0;
}

.th-character-comment-field--inline {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.th-character-comment-field strong,
.th-character-comment-label {
    display: block;
    margin: 0 0 7px;
    color: #f4b81c;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.th-character-comment-field--inline strong {
    margin: 0;
}

.th-character-comment-field span {
    color: #fefeff;
    font-family: var(--font-ui);
    font-weight: 900;
}

.th-character-comment-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: rgba(4,9,20,0.72);
    border: 1px solid rgba(244,184,28,0.26);
    color: #d8e9f7;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.4;
}

.th-character-comment-check input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 1px;
    accent-color: #f4b81c;
}

.th-character-comment-field small {
    display: block;
    margin-top: 8px;
    color: rgba(216,233,247,0.78);
    font-size: 0.82rem;
}

.th-character-comment-note {
    display: flex;
    gap: 9px;
    padding: 12px;
    background: rgba(4,9,20,0.72);
    border: 1px solid rgba(244,184,28,0.26);
    color: #d8e9f7;
}

.th-character-comment-note i {
    color: #f4b81c;
    margin-top: 2px;
}

.th-character-comment-card textarea {
    width: calc(100% - 28px);
    min-height: 230px;
    display: block;
    margin: 0 14px;
    padding: 13px;
    resize: vertical;
    background: rgba(4,9,20,0.86) !important;
    border: 1px solid rgba(244,184,28,0.38) !important;
    color: #fefeff !important;
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    outline: none;
}

.th-character-comment-card textarea:focus {
    border-color: rgba(244,184,28,0.82) !important;
    box-shadow: 0 0 0 2px rgba(244,184,28,0.12);
}

.th-character-comment-label {
    margin: 14px 14px 8px;
}

.th-character-comment-help {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    padding: 10px 14px 14px;
    color: #d8e9f7;
    font-size: 0.82rem;
}

.th-character-comment-help span {
    color: #d8e9f7;
}

.th-character-comment-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 2px;
}

.th-character-comment-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border: 2px solid #05080f;
    color: #040914 !important;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-decoration: none !important;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 2px 2px 0 rgba(0,0,0,0.36);
}

.th-character-comment-form button.th-character-comment-button {
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%) !important;
    border: 2px solid #05080f !important;
    color: #040914 !important;
    font-family: var(--font-ui) !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    text-shadow: 1px 1px 0 rgba(254,254,255,0.34) !important;
}

.th-character-comment-button:hover {
    filter: brightness(1.12);
}

.th-character-comment-form button.th-character-comment-button:hover {
    background: linear-gradient(180deg, #ffe082 0%, #f4b81c 100%) !important;
    color: #040914 !important;
}

.th-character-comment-button--ghost {
    background: rgba(7,21,38,0.92);
    border-color: rgba(244,184,28,0.44);
    color: #f4b81c !important;
    text-shadow: none;
}

.th-character-comment-button--ghost:hover {
    background: rgba(18,56,95,0.72);
    color: #fefeff !important;
}

@media (max-width: 560px) {
    .th-account-guard__actions {
        flex-direction: column;
    }

    .th-account-guard__btn {
        width: 100%;
    }

    .th-character-comment-hero {
        min-height: 0;
        padding: 20px 16px;
    }

    .th-character-comment-form {
        padding: 14px;
    }

    .th-character-comment-field--inline {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .th-character-comment-actions {
        flex-direction: column-reverse;
    }

    .th-character-comment-button {
        width: 100%;
    }
}

/* Thunder OT News Builder output */
.th-news-post {
    position: relative;
    overflow: hidden;
    margin: 8px 0 18px;
    background: linear-gradient(180deg, rgba(6,18,33,0.98), rgba(3,9,18,0.98));
    border: 2px solid #020812;
    outline: 1px solid rgba(244,184,28,0.58);
    color: #d8e9f7;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035), 0 12px 30px rgba(0,0,0,0.32);
}

.th-news-post::before,
.th-news-post::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(244,184,28,0.92), transparent);
    pointer-events: none;
    z-index: 2;
}

.th-news-post::before { top: 8px; }
.th-news-post::after { bottom: 8px; }

.th-news-post__hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 20px 18px 16px;
    background:
        radial-gradient(circle at 15% 10%, rgba(244,184,28,0.16), transparent 30%),
        linear-gradient(135deg, rgba(16,43,72,0.94), rgba(4,12,23,0.96));
    border-bottom: 1px solid rgba(244,184,28,0.28);
}

.th-news-post__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    padding: 6px 10px;
    background: rgba(2,8,18,0.74);
    border: 1px solid rgba(244,184,28,0.42);
    color: #f4b81c;
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.th-news-post__brand img {
    width: 92px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(244,184,28,0.38));
}

.th-news-post__cover {
    position: relative;
    overflow: hidden;
    margin: 0;
    min-height: 180px;
    max-height: 330px;
    background: #030912;
    border: 1px solid rgba(244,184,28,0.38);
}

.th-news-post__cover img {
    width: 100%;
    height: 100%;
    max-height: 330px;
    object-fit: cover;
}

.th-news-post__intro p {
    margin: 0;
    color: #eef7ff;
    font-family: var(--font-body);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.7;
}

.th-news-post__highlight {
    margin: 16px 18px 0;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(244,184,28,0.2), rgba(244,184,28,0.08));
    border: 1px solid rgba(244,184,28,0.46);
    color: #ffe082;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.th-news-post__content {
    padding: 16px 18px 4px;
}

.th-news-post__content p {
    margin: 0 0 13px;
    color: #d8e9f7;
    font-family: var(--font-body);
    font-size: 0.93rem;
    line-height: 1.75;
}

.th-news-post__panel {
    margin: 14px 18px;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(12,36,62,0.96), rgba(7,21,38,0.98));
    border: 1px solid rgba(244,184,28,0.34);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035);
}

.th-news-post__panel--dark {
    background: linear-gradient(180deg, rgba(5,14,28,0.98), rgba(3,9,18,0.98));
}

.th-news-post__panel h3 {
    margin: 0 0 10px;
    color: #f4b81c;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.th-news-post__panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.th-news-post__panel li {
    position: relative;
    margin: 0 0 8px;
    padding-left: 18px;
    color: #d8e9f7;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.55;
}

.th-news-post__panel li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 7px;
    height: 7px;
    background: #f4b81c;
    box-shadow: 0 0 8px rgba(244,184,28,0.45);
    transform: rotate(45deg);
}

.th-news-post__cta {
    display: flex;
    justify-content: center;
    padding: 4px 18px 22px;
}

.th-news-post__cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    background: linear-gradient(180deg, #f5c13a 0%, #d89f18 100%);
    border: 2px solid #05080f;
    color: #040914 !important;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-decoration: none !important;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 2px 2px 0 rgba(0,0,0,0.36);
}

.th-news-post__cta a:hover {
    filter: brightness(1.12);
}

@media (max-width: 560px) {
    .th-news-post__hero,
    .th-news-post__content {
        padding-left: 12px;
        padding-right: 12px;
    }

    .th-news-post__brand {
        display: flex;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
    }

    .th-news-post__cover {
        min-height: 140px;
    }

    .th-news-post__highlight,
    .th-news-post__panel {
        margin-left: 12px;
        margin-right: 12px;
    }
}