/* ==========================================================================
   RANKING — ECLIPSE PERFECT WORLD
   Reescrito em 2026-08-12.

   POR QUE ESTE ARQUIVO EXISTE ASSIM:
   o ranking abre dentro de um <iframe> na página /ranking do site. Iframe é
   documento separado — não herda nada do style.css do site. Então os tokens de
   cor e as fontes são repetidos aqui de propósito, para o quadro parecer parte
   da página e não um widget estranho colado por cima.

   Antes daqui saía um <script src="cdn.tailwindcss.com"> mais ~250 linhas de
   CSS embutidas no layout. Foram embora: o CDN baixava ~300 KB de JS para
   pintar uma tabela e piscava sem estilo até o script rodar.

   Os NOMES DE CLASSE das views são contrato — o HTML dos *_classic.php não foi
   tocado. As utilitárias que elas usam (px-3, py-2, text-center…) estão
   implementadas no fim do arquivo.
   ========================================================================== */

:root {
    /* superfícies — mesmas do site */
    --abyss:        #04060a;
    --base:         #070a10;
    --raised:       #0c1017;
    --overlay:      #11161f;

    /* dourado envelhecido: a cor da marca */
    --gold-deep:    #8a6a18;
    --gold:         #c9a227;
    --gold-bright:  #e8c86a;
    --gold-pale:    #f3e2b0;

    /* azul místico: o contraponto frio, herdado da arte nova */
    --mystic:       #4a86c8;
    --mystic-glow:  rgba(96, 86, 224, 0.35);

    --text:         #f2ece0;
    --text-soft:    #a8a294;
    --text-mute:    #6f6a60;

    --line:         rgba(201, 162, 39, 0.14);
    --line-strong:  rgba(201, 162, 39, 0.34);
    --line-cold:    rgba(255, 255, 255, 0.06);

    --ok:           #34d399;
    --off:          #9f4a4a;

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;

    --t: 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background: transparent;   /* o site atrás já pinta o fundo */
    color: var(--text);
    font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   01 · MOLDURA
   -------------------------------------------------------------------------- */

.ranking-wrapper {
    position: relative;
    padding: clamp(1rem, 2.5vw, 1.9rem);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background:
        radial-gradient(120% 90% at 50% -20%, rgba(201, 162, 39, 0.07), transparent 60%),
        linear-gradient(180deg, var(--raised) 0%, var(--base) 100%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 18px 50px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

/* fio dourado no topo — mesma assinatura dos cards do site */
.ranking-wrapper::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong) 30%, var(--gold) 50%, var(--line-strong) 70%, transparent);
}

.section-title {
    margin: 0 0 1.1rem;
    font-family: 'Cinzel', Georgia, serif;
    font-size: clamp(1.1rem, 0.9rem + 1vw, 1.5rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    background: linear-gradient(180deg, var(--gold-pale), var(--gold) 65%, var(--gold-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --------------------------------------------------------------------------
   02 · ABAS
   -------------------------------------------------------------------------- */

.tab-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.4rem;
}

.tab {
    padding: 0.5rem 1.15rem;
    border-radius: 999px;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--t), background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
}

.tab-inactive {
    color: var(--text-soft);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line-cold);
}
.tab-inactive:hover {
    color: var(--gold-pale);
    border-color: var(--line-strong);
    background: rgba(201, 162, 39, 0.08);
    transform: translateY(-1px);
}

.tab-active {
    color: #150f02;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
    border: 1px solid var(--gold-bright);
    box-shadow: 0 2px 14px rgba(201, 162, 39, 0.35);
}

/* --------------------------------------------------------------------------
   03 · FILTRO DE CLASSES (os círculos)
   -------------------------------------------------------------------------- */

.classbar {
    width: 100%;
    margin: 0 0 1.3rem;
}

.classbar > div {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    white-space: normal;
}

.rank-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--line-cold);
    text-decoration: none;
    transition: border-color var(--t), box-shadow var(--t), transform var(--t), background var(--t);
}
.rank-chip img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}
.rank-chip:hover {
    border-color: var(--line-strong);
    background: rgba(201, 162, 39, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.rank-chip--ativo {
    border-color: var(--gold);
    background: rgba(201, 162, 39, 0.16);
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.22), 0 0 18px rgba(201, 162, 39, 0.28);
}

/* o botão "todas" (✓) */
.rank-chip--todas {
    font-weight: 800;
    font-size: 1.05rem;
    color: #150f02;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
    border-color: var(--gold-bright);
}
.rank-chip--todas:hover { color: #150f02; }

/* --------------------------------------------------------------------------
   04 · TABELA
   -------------------------------------------------------------------------- */

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.92rem;
}

thead th {
    padding: 0.7rem 0.85rem;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(201, 162, 39, 0.06);
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
}
thead th:first-child { border-top-left-radius: var(--r-sm); }
thead th:last-child  { border-top-right-radius: var(--r-sm); }

tbody td {
    padding: 0.72rem 0.85rem;
    border-bottom: 1px solid var(--line-cold);
    color: var(--text);
    vertical-align: middle;
}

tbody tr { transition: background var(--t); }
tbody tr:hover { background: rgba(201, 162, 39, 0.05); }
tbody tr:last-child td { border-bottom: none; }

/* imagens dentro da tabela (ícone de classe e de gênero) */
tbody td img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    vertical-align: middle;
}

/* PÓDIO — só na aba PvP, que é a única sem paginação. Nas outras o "1" da
   página 2 não é o primeiro colocado, e o destaque mentiria. */
[data-tab="pvp"] tbody tr:nth-child(1) td:first-child,
[data-tab="pvp"] tbody tr:nth-child(2) td:first-child,
[data-tab="pvp"] tbody tr:nth-child(3) td:first-child {
    font-weight: 700;
    font-size: 1rem;
}
[data-tab="pvp"] tbody tr:nth-child(1) td:first-child { color: var(--gold-bright); text-shadow: 0 0 12px rgba(232, 200, 106, 0.5); }
[data-tab="pvp"] tbody tr:nth-child(2) td:first-child { color: #cbd5e1; text-shadow: 0 0 10px rgba(203, 213, 225, 0.35); }
[data-tab="pvp"] tbody tr:nth-child(3) td:first-child { color: #d08c50; text-shadow: 0 0 10px rgba(208, 140, 80, 0.35); }

[data-tab="pvp"] tbody tr:nth-child(-n+3) {
    background: linear-gradient(90deg, rgba(201, 162, 39, 0.07), transparent 45%);
}

/* linha vazia ("nenhum registro") */
tbody td[colspan] {
    padding: 2.4rem 1rem;
    text-align: center;
    color: var(--text-mute);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   05 · SELOS DE STATUS
   -------------------------------------------------------------------------- */

.badge {
    display: inline-block;
    min-width: 74px;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
}

.badge-online {
    color: #06281c;
    background: linear-gradient(180deg, #4ade80, #22a565);
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.3);
}

.badge-offline {
    color: var(--text-soft);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(159, 74, 74, 0.45);
}

.badge-busy {
    color: #2c1d02;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
}

/* --------------------------------------------------------------------------
   06 · PAGINAÇÃO
   -------------------------------------------------------------------------- */

.rank-pag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 1.5rem 0 0.2rem;
    flex-wrap: wrap;
}

.rank-page {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-cold);
    background: rgba(255, 255, 255, 0.03);
    color: var(--gold);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all var(--t);
}
.rank-page:hover {
    border-color: var(--line-strong);
    background: rgba(201, 162, 39, 0.12);
    color: var(--gold-pale);
}

.rank-page--ativo {
    color: #150f02;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
    border-color: var(--gold-bright);
    box-shadow: 0 2px 12px rgba(201, 162, 39, 0.3);
}

.rank-page--off {
    color: var(--text-mute);
    background: rgba(255, 255, 255, 0.02);
    cursor: not-allowed;
    opacity: 0.5;
}

.rank-pag-sep { color: var(--text-mute); padding: 0 0.15rem; }

/* --------------------------------------------------------------------------
   07 · BUSCA
   -------------------------------------------------------------------------- */

input[type="text"], input[name="q"] {
    padding: 0.55rem 0.9rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-cold);
    background: rgba(0, 0, 0, 0.3);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color var(--t), box-shadow var(--t);
}
input[type="text"]:focus, input[name="q"]:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.18);
}
input::placeholder { color: var(--text-mute); }

/* --------------------------------------------------------------------------
   08 · UTILITÁRIAS
   As views usam este punhado de classes no estilo Tailwind. Ficam aqui para o
   HTML delas não precisar mudar — e para o CDN do Tailwind não precisar
   existir só por causa disso.
   -------------------------------------------------------------------------- */

.w-full { width: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.rounded-full { border-radius: 999px; }
.whitespace-nowrap { white-space: nowrap; }
.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-sm { font-size: 0.86rem; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.opacity-70 { opacity: 0.7; }

.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.85rem; padding-right: 0.85rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.72rem; padding-bottom: 0.72rem; }
.py-6 { padding-top: 2.4rem; padding-bottom: 2.4rem; }
.p-4 { padding: 1rem; }
.pt-0 { padding-top: 0; }
.mt-0 { margin-top: 0; }
.mb-4 { margin-bottom: 1rem; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.-mt-3 { margin-top: -0.75rem; }
.-mx-2 { margin-left: -0.5rem; margin-right: -0.5rem; }
.gap-2 { gap: 0.5rem; }

.w-5 { width: 1.25rem; } .h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; }  .h-6 { height: 1.5rem; }
.w-10 { width: 2.5rem; } .h-10 { height: 2.5rem; }

/* cores herdadas das views */
.text-white { color: #fff; }
.text-gray-300 { color: var(--text-soft); }
.text-gray-400 { color: var(--text-mute); }
.text-gray-500 { color: var(--text-mute); }
.text-green-400 { color: var(--ok); }
.text-red-400 { color: #f87171; }
.text-cyan-300 { color: var(--gold); }      /* ciano do tema antigo → dourado */
.text-amber-300 { color: var(--gold-bright); }
.text-yellow-600 { color: var(--gold-deep); }
.bg-black\/30 { background: rgba(0, 0, 0, 0.3); }
.border-b { border-bottom: 1px solid var(--line-cold); }
.border-gray-600\/30 { border-color: var(--line-cold); }

@media (min-width: 768px) {
    .md\:px-3 { padding-left: 0.85rem; padding-right: 0.85rem; }
    .md\:gap-3 { gap: 0.75rem; }
    .md\:p-6 { padding: 1.5rem; }
    .md\:-mt-4 { margin-top: -1rem; }
    .md\:w-7 { width: 1.75rem; }
    .md\:h-7 { height: 1.75rem; }
}
@media (min-width: 1024px) {
    .lg\:flex-wrap { flex-wrap: wrap; }
    .lg\:justify-center { justify-content: center; }
}

/* --------------------------------------------------------------------------
   09 · TELAS ESTREITAS
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .ranking-wrapper { padding: 0.9rem 0.7rem; border-radius: var(--r-md); }
    .tab { padding: 0.42rem 0.8rem; font-size: 0.72rem; }
    .rank-chip { width: 36px; height: 36px; }
    .rank-chip img { width: 22px; height: 22px; }
    table { font-size: 0.82rem; }
    thead th { padding: 0.55rem 0.5rem; font-size: 0.64rem; letter-spacing: 0.08em; }
    tbody td { padding: 0.6rem 0.5rem; }
    .badge { min-width: 62px; font-size: 0.62rem; }
}

/* --------------------------------------------------------------------------
   11 · FICHA PÚBLICA DO PERSONAGEM
   -------------------------------------------------------------------------- */

.rank-character-link {
    appearance: none;
    padding: 0;
    border: 0;
    color: var(--text);
    background: transparent;
    font: inherit;
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: color var(--t), text-decoration-color var(--t);
}

.rank-character-link:hover,
.rank-character-link:focus-visible {
    color: var(--gold-bright);
    text-decoration-color: var(--gold);
    outline: none;
}

body.rank-profile-open { overflow: hidden; }

.rank-profile-modal[hidden] { display: none; }

.rank-profile-modal {
    position: absolute;
    inset: 0;
    z-index: 2000;
    min-height: 100%;
    background: rgba(2, 4, 7, 0.84);
    backdrop-filter: blur(5px);
}

.rank-profile-dialog {
    position: absolute;
    top: var(--rank-profile-top, 50%);
    left: 50%;
    width: min(94%, 920px);
    max-height: var(--rank-profile-max-height, 760px);
    overflow: auto;
    transform: translate(-50%, -50%);
    padding: clamp(1rem, 2.6vw, 1.8rem);
    border: 1px solid rgba(224, 184, 63, 0.58);
    border-radius: 16px;
    background:
        radial-gradient(100% 75% at 50% 0, rgba(201, 162, 39, 0.1), transparent 60%),
        #090c12;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.78), 0 0 34px rgba(201, 162, 39, 0.12);
}

.rank-profile-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--gold-pale);
    background: rgba(5, 6, 8, 0.88);
    font: 400 1.45rem/1 sans-serif;
    cursor: pointer;
}

.rank-profile-close:hover,
.rank-profile-close:focus-visible {
    color: #fff;
    border-color: var(--gold-bright);
    outline: none;
}

.rank-profile-header { padding-right: 3rem; }
.rank-profile-kicker {
    margin: 0 0 0.2rem;
    color: var(--gold);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.rank-profile-header h2 {
    margin: 0;
    color: var(--gold-pale);
    font-family: 'Cinzel', Georgia, serif;
    font-size: clamp(1.3rem, 3vw, 1.9rem);
}
.rank-profile-subtitle { margin: 0.25rem 0 0; color: var(--text-soft); }
.rank-profile-state { padding: 2.6rem 1rem; color: var(--text-soft); text-align: center; }

.rank-profile-content { margin-top: 1.25rem; }
.rank-profile-summary,
.rank-profile-attributes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 0.6rem;
    margin: 0;
}

.rank-profile-summary > div,
.rank-profile-attributes > div {
    min-width: 0;
    padding: 0.68rem 0.75rem;
    border: 1px solid var(--line-cold);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.025);
}

.rank-profile-summary dt,
.rank-profile-attributes dt {
    color: var(--text-mute);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.rank-profile-summary dd,
.rank-profile-attributes dd { margin: 0.18rem 0 0; color: var(--text); font-weight: 500; }

.rank-profile-section { margin-top: 1.25rem; }
.rank-profile-section h3 {
    margin: 0 0 0.65rem;
    color: var(--gold);
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.84rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rank-profile-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.55rem;
}
.rank-profile-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.65rem 0.72rem;
    border: 1px solid var(--line-cold);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.025);
}
.rank-profile-item-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    object-fit: contain;
    image-rendering: auto;
}
.rank-profile-item-copy { display: grid; min-width: 0; }
.rank-profile-item-slot { color: var(--text-mute); font-size: 0.65rem; text-transform: uppercase; }
.rank-profile-item strong { overflow: hidden; color: var(--text); font-size: 0.86rem; text-overflow: ellipsis; white-space: nowrap; }
.rank-profile-item small { color: var(--text-mute); font-size: 0.7rem; }
.rank-profile-cards .rank-profile-item { border-color: rgba(74, 134, 200, 0.22); }
.rank-profile-updated { margin: 1.2rem 0 0; color: var(--text-mute); font-size: 0.72rem; text-align: right; }

@media (max-width: 640px) {
    .rank-profile-dialog { width: calc(100% - 0.7rem); padding: 1rem 0.85rem; border-radius: 11px; }
    .rank-profile-summary,
    .rank-profile-attributes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rank-profile-items { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   02b · SUB-ABAS (nível 2)
   Com ~14 instâncias, uma tira só de botões viraria ilegível. O nível 1
   (PvP/PvE/Clãs/Progressão) filtra, e aqui aparecem só as opções da categoria
   escolhida. Deliberadamente mais discretas que as de cima: são navegação
   secundária, e competir com o nível 1 confunde quem chega.
   -------------------------------------------------------------------------- */

.subtab-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    margin: -0.6rem 0 1.2rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line-cold);
}

.subtab {
    padding: 0.32rem 0.8rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--text-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--t), background var(--t), border-color var(--t);
}
.subtab:hover {
    color: var(--gold-pale);
    background: rgba(201, 162, 39, 0.08);
    border-color: var(--line);
}

.subtab-active {
    color: var(--gold-bright);
    background: rgba(201, 162, 39, 0.14);
    border-color: var(--line-strong);
}

@media (max-width: 640px) {
    .subtab-menu {
        /* em tela estreita rola de lado em vez de virar seis linhas */
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }
    .subtab { font-size: 0.72rem; padding: 0.3rem 0.7rem; }
}

/* --------------------------------------------------------------------------
   10 · PREMIAÇÃO SEMANAL PVE
   Hover oferece uma prévia rápida; clique fixa o modal para toque/teclado.
   -------------------------------------------------------------------------- */

.pve-reward {
    display: flex;
    justify-content: center;
    margin: -0.35rem 0 1rem;
}

.pve-reward-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-width: min(100%, 430px);
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(201, 162, 39, 0.45);
    border-radius: 12px;
    color: #e9dfcf;
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.12), rgba(10, 12, 14, 0.88));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}

.pve-reward-trigger:hover,
.pve-reward-trigger:focus-visible {
    border-color: #e0b83f;
    transform: translateY(-1px);
    box-shadow: 0 0 22px rgba(224, 184, 63, 0.13), 0 10px 26px rgba(0, 0, 0, 0.3);
    outline: none;
}

.pve-reward-trigger > img {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid #a77924;
    border-radius: 5px;
    image-rendering: pixelated;
}

.pve-reward-trigger-copy {
    display: grid;
    line-height: 1.05;
}

.pve-reward-trigger-copy small {
    color: #9f927f;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pve-reward-trigger-copy strong {
    margin-top: 0.22rem;
    color: #ffcb4a;
    font-family: "Cinzel", Georgia, serif;
    font-size: 0.92rem;
}

.pve-reward-trigger-hint {
    margin-left: auto;
    color: #9f927f;
    font-size: 0.72rem;
    white-space: nowrap;
}

.pve-reward-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1rem;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: rgba(2, 4, 7, 0.82);
    backdrop-filter: blur(5px);
    transition: opacity 160ms ease, visibility 160ms ease;
}

.pve-reward-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.pve-reward-modal.is-pinned {
    pointer-events: auto;
}

.pve-reward-dialog {
    position: relative;
    width: min(96vw, 980px);
    height: min(94vh, 780px);
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 0.65rem;
    border: 1px solid rgba(224, 184, 63, 0.58);
    border-radius: 16px;
    background: #090b0e;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.78), 0 0 34px rgba(201, 162, 39, 0.12);
}

.pve-reward-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 203, 74, 0.5);
    border-radius: 50%;
    color: #ffdc79;
    background: rgba(5, 6, 8, 0.88);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.pve-reward-close:hover,
.pve-reward-close:focus-visible {
    color: #fff;
    border-color: #ffcb4a;
    outline: none;
}

.pve-reward-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: center;
    border-radius: 10px;
}

.pve-reward-info {
    padding: 0.8rem 1rem 0.65rem;
    text-align: center;
}

.pve-reward-info h2 {
    margin: 0 0 0.4rem;
    color: #ffcb4a;
    font-family: "Cinzel", Georgia, serif;
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pve-reward-info p {
    margin: 0.2rem 0;
    color: #c9c0b3;
    font-size: 0.88rem;
    line-height: 1.45;
}

.pve-reward-info strong {
    color: #f2d374;
}

@media (max-width: 640px) {
    .pve-reward { margin-top: -0.55rem; }
    .pve-reward-trigger { min-width: 100%; }
    .pve-reward-trigger-hint { display: none; }
    .pve-reward-modal { padding: 0.45rem; }
    .pve-reward-dialog { width: 100%; height: 97vh; padding: 0.35rem; border-radius: 11px; }
    .pve-reward-close { top: 0.6rem; right: 0.6rem; }
    .pve-reward-info { padding: 0.65rem 0.55rem 0.45rem; }
    .pve-reward-info p { font-size: 0.78rem; }
}