/* ==========================================================================
   Chronicles - World of Warcraft: Legion theme (fel green on void black)

   Linked in includes/header.php right after `echo $page_head`, so it comes
   after tailwind.css, the header <style> and every page's own <style>.
   - Unlayered rules here beat Tailwind (layered) and those earlier <style>s.
   - <style> blocks printed inside <body> (footer, realm_status, arenanavbar,
     item_tooltip) come later: their selectors get a `body` prefix here.
   - !important only where the markup has inline styles, JS sets styles, or
     the page's own rule is already !important.
   - The last block recolours Tailwind's gold arbitrary classes inside
     @layer utilities, so Tailwind's own hover/state order still applies.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
html:root {
    --fel: #72cf42;
    --fel-bright: #b6d149;
    --fel-core: #f8f4aa;
    --fel-mid: #4d7f2c;
    --fel-deep: #25411e;
    --void: #0b0f0b;
    --void-2: #050603;
    --teal-shadow: #0f241d;
    --gunmetal: #1e1e24;
    --gunmetal-2: #272834;
    --gunmetal-3: #34363e;
    --bronze: #76582c;
    --violet: #b85bd3;
    --text: #d8dcd2;
    --muted: #9aa394;

    --glass: rgba(8,12,10,.82);
    --fel-line: rgba(114,207,66,.25);
    --fel-title: linear-gradient(180deg, #f8f4aa 0%, #b6d149 32%, #72cf42 70%, #25411e 100%);
    --fel-button: linear-gradient(180deg, #b6d149 0%, #72cf42 50%, #4d7f2c 100%);
    --fel-button-hover: linear-gradient(180deg, #f8f4aa 0%, #b6d149 45%, #72cf42 100%);
    --iron-button: linear-gradient(180deg, #34363e 0%, #272834 55%, #1e1e24 100%);
    --legion-corners:
        linear-gradient(#72cf42,#72cf42) left top / 18px 2px no-repeat,
        linear-gradient(#72cf42,#72cf42) left top / 2px 18px no-repeat,
        linear-gradient(#72cf42,#72cf42) right top / 18px 2px no-repeat,
        linear-gradient(#72cf42,#72cf42) right top / 2px 18px no-repeat,
        linear-gradient(#72cf42,#72cf42) left bottom / 18px 2px no-repeat,
        linear-gradient(#72cf42,#72cf42) left bottom / 2px 18px no-repeat,
        linear-gradient(#72cf42,#72cf42) right bottom / 18px 2px no-repeat,
        linear-gradient(#72cf42,#72cf42) right bottom / 2px 18px no-repeat;
    --legion-veil: radial-gradient(ellipse at 50% 35%, rgba(5,6,3,.5) 0%, rgba(5,6,3,.74) 55%, rgba(5,6,3,.94) 100%);

    /* the old gold variables (header.php, footer.php and how_to_play.php use them) */
    --gold-primary: #72cf42;
    --gold-dark: #4d7f2c;
    --gold-deep: #25411e;
    --iron-bg: rgba(5,8,6,.55);

    /* Tailwind theme colours: greys get a green tint, the (admin) gold scale goes fel */
    --color-gray-200: #e6e9e1;
    --color-gray-300: #d8dcd2;
    --color-gray-400: #9aa394;
    --color-gray-500: #737b6e;
    --color-gold-400: #b6d149;
    --color-gold-500: #72cf42;
    --color-gold-600: #4d7f2c;
    --color-gold-800: #25411e;

    color-scheme: dark;
    accent-color: #72cf42;
}

/* news.php sets a gold scrollbar on `*` */
html:root, body.news * { scrollbar-color: #4d7f2c #050603; }
::-webkit-scrollbar-track { background: #0b0f0b; border-left-color: rgba(114,207,66,.15); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #b6d149, #4d7f2c); border-color: rgba(114,207,66,.3); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #f8f4aa, #72cf42); box-shadow: none; }
::-webkit-scrollbar-corner { background: #0b0f0b; }
.table-container { scrollbar-color: #4d7f2c #0b0f0b; }
.table-container::-webkit-scrollbar-track { background: #0b0f0b; }
.table-container::-webkit-scrollbar-thumb { background: #4d7f2c; }
::selection { background: rgba(114,207,66,.35); color: #fff; }

/* ---------- 2. Page backgrounds (art under a dark veil + fel-cracked vignette) ---------- */
body:is(.home, .login, .register, .activate, .resend_activation, .forgot_password, .reset_password,
        .news:not(.anews), .shop:not(.ashop), .account, .vote, .how_to_play, .armory, .character) {
    background-color: #050603;
    background-image: url(/img/legion/fel-vignette.webp), var(--legion-veil), var(--legion-bg);
    background-size: 100% 100%, 100% 100%, cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
body.home, body.armory, body.character { --legion-bg: url(/img/legion/bg-antorus.jpg); }
body.login { --legion-bg: url(/img/legion/bg-fel-hammer.jpg); }
body.register, body.activate, body.resend_activation, body.how_to_play { --legion-bg: url(/img/legion/bg-broken-shore.jpg); }
body.forgot_password, body.reset_password { --legion-bg: url(/img/legion/bg-argus-fel.jpg); }
body.news { --legion-bg: url(/img/legion/bg-suramar.jpg); }
body.shop { --legion-bg: url(/img/legion/bg-tomb-of-sargeras.jpg); }
body.account, body.vote { --legion-bg: url(/img/legion/bg-argus.jpg); }

/* how_to_play.php sets its background with !important */
body.how_to_play {
    background-color: #050603 !important;
    background-image: url(/img/legion/fel-vignette.webp), var(--legion-veil), var(--legion-bg) !important;
    background-size: 100% 100%, 100% 100%, cover !important;
}

/* phones: no fixed attachment (iOS ignores it and cover then stretches over the whole page);
   !important because of how_to_play */
@media (max-width: 767px) {
    body:is(.home, .login, .register, .activate, .resend_activation, .forgot_password, .reset_password,
            .news:not(.anews), .shop:not(.ashop), .account, .vote, .how_to_play, .armory, .character) {
        background-attachment: scroll !important;
        background-size: 100% 100vh, 100% 100vh, auto 100vh !important;
        background-position: top center !important;
    }
}

/* the old ember / star / glow overlays */
body.home::before, body.home::after,
body.character::before,
body.vote::before, body.vote::after { display: none; }

/* ---------- 3. Header ---------- */
header.main-header {
    background: linear-gradient(180deg, rgba(11,15,11,.97), rgba(5,6,3,.97));
    border-bottom: 1px solid rgba(114,207,66,.35);
    box-shadow: 0 0 18px rgba(114,207,66,.12), 0 8px 24px rgba(0,0,0,.7);
}
header.main-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, #4d7f2c 15%, #b6d149 50%, #4d7f2c 85%, transparent);
    box-shadow: 0 0 10px 1px rgba(114,207,66,.5);
}
header.transparent-header { background: rgba(5,6,3,.62) !important; }

.parallelogram { background: linear-gradient(135deg, #72cf42 0%, #25411e 100%); opacity: .14; }
.parallelogram::after { background: linear-gradient(180deg, rgba(182,209,73,.1), rgba(114,207,66,.35)); }

.nav-link { color: #d8dcd2; border-color: rgba(114,207,66,.12); }
.nav-link:hover {
    color: #b6d149;
    border-color: rgba(114,207,66,.5);
    background: linear-gradient(180deg, rgba(114,207,66,.16), rgba(114,207,66,.04));
    text-shadow: 0 0 8px rgba(114,207,66,.5);
}
.nav-link.active {
    color: #b6d149;
    border-color: rgba(114,207,66,.7);
    background: linear-gradient(180deg, rgba(114,207,66,.26), rgba(114,207,66,.08));
    text-shadow: 0 0 10px rgba(114,207,66,.6);
    box-shadow: inset 0 -2px 0 #72cf42;
}

.nav-close { background: #272834; border-color: rgba(114,207,66,.5); color: #b6d149; }
.nav-close:hover { background: #34363e; }

@media (max-width: 1023px) {
    header nav.nav-menu.nav-open {
        background: rgba(5,6,3,.98);
        border-bottom-color: rgba(114,207,66,.4);
        box-shadow: 0 20px 40px rgba(0,0,0,.75), 0 2px 14px rgba(114,207,66,.18);
    }
}

.wow-dropdown {
    background: linear-gradient(180deg, rgba(20,26,22,.98), rgba(5,6,3,.98));
    border-color: rgba(114,207,66,.35);
}
.wow-dropdown::before { border-color: rgba(114,207,66,.14); }
.dropdown-item { color: #d8dcd2; }
.dropdown-item:hover {
    background: linear-gradient(90deg, rgba(114,207,66,.16), transparent);
    color: #b6d149;
    text-shadow: 0 0 8px rgba(114,207,66,.35);
}
.dropdown-divider { background: linear-gradient(90deg, transparent, rgba(114,207,66,.45), transparent); }

.avatar-frame { border-color: #4d7f2c; box-shadow: 0 0 12px rgba(114,207,66,.4), inset 0 0 8px rgba(0,0,0,.8); }
.avatar-frame:hover { border-color: #72cf42; box-shadow: 0 0 20px rgba(114,207,66,.6), inset 0 0 8px rgba(0,0,0,.8); }

.lang-btn { border-color: rgba(114,207,66,.3); color: #b6d149; }
.lang-btn:hover { border-color: #72cf42; background: linear-gradient(180deg, rgba(114,207,66,.2), rgba(114,207,66,.05)); }

/* currency stays gold: .badge-gold used var(--gold-dark/deep), which are fel now */
.badge-gold { background: linear-gradient(180deg, #f6d478 0%, #c9a227 48%, #8a6a14 100%); }
.text-\[\#f2cf5b\]:has(> .fa-coins),
.fa-coins.text-\[\#f2cf5b\] { color: #f2cf5b; }
[class*="bg-[rgba(242,207,82"]:has(> .fa-coins) { background-color: rgba(242,207,82,.12); border-color: rgba(201,162,39,.3); }

/* ---------- 4. Titles ---------- */
.wow-title,
.section-title {
    background-image: var(--fel-title);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 10px rgba(114,207,66,.35)) drop-shadow(0 3px 5px rgba(0,0,0,.9));
}
.section-title::after { background: linear-gradient(90deg, rgba(114,207,66,.55), transparent); }
/* icons inside gradient titles use currentColor, which is now transparent */
.wow-title svg, .section-title svg { color: #b6d149; }

/* ---------- 5. Panels ---------- */
.wow-panel, .glass-container, .panel, .wow-step-card, .cta-panel {
    background: linear-gradient(180deg, rgba(114,207,66,.035), transparent 35%), var(--glass);
    border-color: var(--fel-line);
    box-shadow: 0 16px 36px rgba(0,0,0,.6), inset 0 0 50px rgba(114,207,66,.05), inset 0 1px 0 rgba(182,209,73,.08);
}
.wow-panel::before, .glass-container::before, .panel::before,
.wow-step-card::before, .cta-panel::before, .modal-content::before { border-color: rgba(114,207,66,.12); }
/* recolour only: never add `content`, news.php draws its corners with divs */
.wow-panel::after, .glass-container::after, .panel::after {
    background: var(--legion-corners);
    filter: drop-shadow(0 0 3px rgba(114,207,66,.7));
}
.glass-decoration { background: var(--legion-corners); filter: drop-shadow(0 0 3px rgba(114,207,66,.7)); }

.glass-card, .vote-card, .reward-card { background: rgba(8,12,10,.72); border-color: rgba(114,207,66,.14); }
.glass-card:hover, .vote-card:hover, .reward-card:hover { border-color: rgba(114,207,66,.32); }
.modal-content { background: rgba(5,8,6,.96); border-color: rgba(114,207,66,.3); }

/* ---------- 6. Buttons ---------- */
/* .btn-game has a clip-path, so outer glows are cut off there: inner glow + brightness instead */
.btn-gold {
    background: var(--fel-button);
    color: #0b0f0b;
    text-shadow: 0 1px 0 rgba(248,244,170,.4);
    box-shadow: inset 0 0 0 1px rgba(248,244,170,.35), inset 0 -8px 14px rgba(0,0,0,.25);
    animation: none;
    filter: none;
}
.btn-gold:hover {
    filter: brightness(1.12);
    box-shadow: 0 0 18px rgba(114,207,66,.55), inset 0 0 0 1px rgba(248,244,170,.6), inset 0 0 18px rgba(248,244,170,.35);
}
.btn-iron {
    background: var(--iron-button);
    color: #d8dcd2;
    box-shadow: inset 0 0 0 1px rgba(114,207,66,.45), inset 0 -8px 14px rgba(0,0,0,.4);
    filter: none;
}
.btn-iron:hover {
    color: #b6d149;
    filter: none;
    box-shadow: 0 0 16px rgba(114,207,66,.35), inset 0 0 0 1px rgba(114,207,66,.85), inset 0 0 16px rgba(114,207,66,.22);
}

/* the other gold / green / red submit buttons */
:is(.login-content, .resend-content, .forgot-content, .reset-content) button[type="submit"],
.btn-register, .success-login-btn, .btn-vote, #search-btn {
    background: var(--fel-button);
    color: #0b0f0b;
    border-color: #b6d149;
    text-shadow: 0 1px 0 rgba(248,244,170,.35);
}
:is(.login-content, .resend-content, .forgot-content, .reset-content) button[type="submit"]:hover,
.btn-register:hover, .success-login-btn:hover, .btn-vote:hover:not([disabled]), #search-btn:hover {
    background: var(--fel-button-hover);
    border-color: #f8f4aa;
    box-shadow: 0 0 26px rgba(114,207,66,.45);
}
#search-btn i { color: #0b0f0b; }

.btn-claim:not([disabled]) { background: linear-gradient(180deg, #72cf42, #25411e); border-color: #72cf42; color: #f8f4aa; }
.btn-claim:hover:not([disabled]) { background: linear-gradient(180deg, #b6d149, #4d7f2c); box-shadow: 0 0 26px rgba(114,207,66,.4); }

.reset-btn { background: rgba(30,30,36,.7); border-color: rgba(114,207,66,.3); }
.reset-btn:hover { border-color: #72cf42; background: rgba(114,207,66,.1); color: #b6d149; box-shadow: 0 0 20px rgba(114,207,66,.15); }

/* ---------- 7. Inputs ---------- */
:is(.input-login, .input-register, .input-forgot, .input-reset, .input-resend) {
    background: rgba(5,8,6,.6) !important;
    border: 2px solid rgba(114,207,66,.28) !important;
    color: #fff !important;
}
:is(.input-login, .input-register, .input-forgot, .input-reset, .input-resend):focus {
    background: rgba(5,8,6,.78) !important;
    border-color: #72cf42 !important;
    box-shadow: 0 0 0 1px rgba(114,207,66,.25), 0 0 20px rgba(114,207,66,.2) !important;
}
:is(.input-login, .input-register, .input-forgot, .input-reset, .input-resend)::placeholder { color: #7d8778 !important; }

/* ---------- 8. Home ---------- */
.home .legion-hero {
    background:
        linear-gradient(180deg, rgba(5,8,6,.4) 0%, rgba(5,8,6,.72) 55%, rgba(5,8,6,.95) 100%),
        url(/img/legion/slide-broken-shore.jpg) center 30% / cover no-repeat,
        #0b0f0b;
}
.legion-hero-logo {
    display: block;
    width: min(360px, 82%);
    height: auto;
    margin-left: auto;
    margin-right: auto;
    filter: drop-shadow(0 0 12px rgba(114,207,66,.4)) drop-shadow(0 4px 10px rgba(0,0,0,.85));
    animation: legion-glow 6s ease-in-out infinite;
}
@keyframes legion-glow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(114,207,66,.3)) drop-shadow(0 4px 10px rgba(0,0,0,.85)); }
    50%      { filter: drop-shadow(0 0 22px rgba(114,207,66,.6)) drop-shadow(0 4px 10px rgba(0,0,0,.85)); }
}
.legion-divider {
    display: block;
    width: min(340px, 78%);
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.slider-frame { border-color: rgba(114,207,66,.3); background: rgba(0,0,0,.5); }
/* the Legion slides are 1920x534: show them whole, not cropped to the old fixed heights */
.home .slide img { height: auto; aspect-ratio: 1920 / 534; object-fit: cover; }
.slider-nav {
    color: #b6d149;
    background: linear-gradient(180deg, rgba(39,40,52,.92), rgba(11,15,11,.92));
    border-color: rgba(114,207,66,.45);
}
.slider-nav:hover { color: #f8f4aa; border-color: #72cf42; filter: brightness(1.2); }
.dot { background: #34363e; }
.dot:hover { background: #737b6e; }
.dot.active { background: #72cf42; box-shadow: 0 0 10px rgba(114,207,66,.8), 0 0 0 1px rgba(0,0,0,.6); }

.home .news-card { background: linear-gradient(180deg, rgba(20,26,22,.9), rgba(5,8,6,.92)); border-color: rgba(114,207,66,.18); }
.home .news-card:hover {
    border-color: rgba(114,207,66,.6);
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(114,207,66,.18));
}
.home .news-card .news-date { color: #72cf42; }

.tab-btn:hover { border-color: rgba(114,207,66,.4); }
.tab-btn.active {
    color: #b6d149;
    background: linear-gradient(180deg, rgba(114,207,66,.22), rgba(114,207,66,.06));
    border-color: rgba(114,207,66,.65);
    text-shadow: 0 0 10px rgba(114,207,66,.45);
}
.video-frame { border-color: rgba(114,207,66,.35); }

.ornate-divider {
    height: auto;
    aspect-ratio: 467 / 50;
    margin: 16px 0;
    background: url(/img/legion/fel-divider.webp) center top / 100% auto no-repeat;
}
.ornate-divider::after { content: none; }

/* ---------- 9. News ---------- */
.news .news-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.5), 0 0 14px rgba(114,207,66,.15); }

/* ---------- 10. Shop ---------- */
.shop .item-card:hover { border-color: rgba(114,207,66,.4); box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 18px rgba(114,207,66,.12); }
.shop .item-card .item-tooltip { border-color: rgba(114,207,66,.3); }
.shop .item-card .item-tooltip::before { border-right-color: rgba(114,207,66,.3); }
.shop .item-card .item-tooltip.tooltip-left::before { border-right-color: transparent; border-left-color: rgba(114,207,66,.3); }
@media (max-width: 1200px) {
    .shop .item-card .item-tooltip::before { border-right-color: transparent; border-bottom-color: rgba(114,207,66,.3); }
}
.shop .buy-button { background: var(--fel-button); color: #0b0f0b; border-color: #b6d149; font-weight: 700; }
.shop .buy-button:not([disabled]):hover { background: var(--fel-button-hover); box-shadow: 0 0 20px rgba(114,207,66,.4); }
.shop .login-to-buy-button { background: var(--iron-button); color: #b6d149; border-color: rgba(114,207,66,.4); }
.shop .login-to-buy-button:hover { border-color: #72cf42; box-shadow: inset 0 0 14px rgba(114,207,66,.2); }

/* ---------- 11. Account (tab colours are set inline by account.php's JS) ---------- */
body.account .nav-tab-gaming {
    background: rgba(8,12,10,.6) !important;
    border-color: rgba(114,207,66,.2) !important;
    color: #d8dcd2 !important;
}
body.account .nav-tab-gaming:hover { border-color: #72cf42 !important; color: #b6d149 !important; }
body.account .nav-tab-gaming.active {
    background: rgba(114,207,66,.15) !important;
    border-color: #72cf42 !important;
    color: #b6d149 !important;
    box-shadow: 0 0 16px rgba(114,207,66,.2);
}
.account .profile-avatar { border-color: #72cf42; box-shadow: 0 0 16px rgba(114,207,66,.35); }
.avatar-selector img.selected { border-color: #72cf42; box-shadow: 0 0 20px rgba(114,207,66,.45); }

/* ---------- 12. Armory ---------- */
.armory thead {
    background-image: linear-gradient(90deg, #25411e, #0f241d 55%, #25411e);
    color: #f8f4aa;
    border-bottom: 1px solid rgba(114,207,66,.45);
}
.armory .top5 { background: linear-gradient(to right, rgba(15,36,29,.75), rgba(10,24,19,.65)) !important; }
.armory .top5:hover { background: linear-gradient(to right, rgba(25,56,42,.85), rgba(15,36,29,.75)) !important; }
.armory .player-row:hover { background: rgba(114,207,66,.12) !important; }
.player-link:hover { color: #b6d149; }

/* arenanavbar.php: colours are inline styles; the active tab is the one with a box-shadow */
body.armory .clip-path-tab[style*="box-shadow"] {
    background: linear-gradient(135deg, rgba(114,207,66,.2), rgba(37,65,30,.14)) !important;
    border-color: #72cf42 !important;
    box-shadow: 0 0 24px rgba(114,207,66,.3) !important;
}
body.armory .clip-path-tab:not([style*="box-shadow"]) {
    background: rgba(8,12,10,.6) !important;
    border-color: rgba(114,207,66,.4) !important;
}
body.armory .clip-path-tab > span[style*="#f2cf5b"] { color: #b6d149 !important; }
body.armory .clip-path-tab > span.rounded-full[style*="#f2cf5b"] { background: #72cf42 !important; }
body.armory nav > div > .absolute.inset-0.pointer-events-none {
    background:
        linear-gradient(#72cf42,#72cf42) left top / 12px 1px no-repeat,
        linear-gradient(#72cf42,#72cf42) left top / 1px 12px no-repeat,
        linear-gradient(#72cf42,#72cf42) right top / 12px 1px no-repeat,
        linear-gradient(#72cf42,#72cf42) right top / 1px 12px no-repeat,
        linear-gradient(#72cf42,#72cf42) left bottom / 12px 1px no-repeat,
        linear-gradient(#72cf42,#72cf42) left bottom / 1px 12px no-repeat,
        linear-gradient(#72cf42,#72cf42) right bottom / 12px 1px no-repeat,
        linear-gradient(#72cf42,#72cf42) right bottom / 1px 12px no-repeat !important;
}

/* ---------- 13. Character ---------- */
.character .slot, .character .weapon-slot, .character .slot-icon, .character .character-image,
.character .detail-item, .character .detail-item img, .character .stats-category, .character .pvp-card,
.character .pvp-member, .character .pvp-member img, .character .pvp-kills-container { border-color: rgba(114,207,66,.12); }
.character .slot, .character .weapon-slot, .character .stats-category, .character .pvp-card,
.character .pvp-kills-container { background-color: rgba(8,12,10,.7); }
.character .slot:hover, .character .weapon-slot:hover, .character .pvp-card:hover { border-color: rgba(114,207,66,.32); background-color: rgba(8,12,10,.9); }
.character .slot.has-item, .character .weapon-slot.has-item { border-left-color: #72cf42; }
.character .stats-category h3, .character .pvp-card-header { border-bottom-color: rgba(114,207,66,.12); }
.character .detail-item i, .character .stats-category h3, .character .pvp-card-title,
.character .pvp-card-rating, .character .pvp-team-icon, .character .kills-number { color: #72cf42; }
.character .pvp-card-rating, .character .pvp-team-icon { background: rgba(114,207,66,.1); border-color: rgba(114,207,66,.2); }
.character .pvp-member.current-player { border-color: #72cf42; background: rgba(114,207,66,.1); }
.character .pvp-member-link:hover .pvp-member { border-color: rgba(114,207,66,.3); background: rgba(114,207,66,.08); }
.character .pvp-empty i { color: rgba(114,207,66,.25); }
.character .item-tooltip { border-color: rgba(114,207,66,.3); }
.character .item-tooltip .item-stats { border-top-color: rgba(114,207,66,.12); }

/* ---------- 14. How to play ---------- */
.how_to_play .tag-pill { background: rgba(5,8,6,.65); border-color: rgba(114,207,66,.4); text-shadow: 0 0 8px rgba(114,207,66,.4); }
.wow-step-card:hover { border-color: rgba(114,207,66,.6); box-shadow: 0 20px 40px -15px rgba(0,0,0,.7), 0 0 30px rgba(114,207,66,.15); }
.step-badge { background: var(--fel-button); color: #0b0f0b; text-shadow: 0 1px 0 rgba(248,244,170,.4); }
.step-image { border-color: rgba(114,207,66,.3); }
.wow-step-card:hover .step-image { border-color: rgba(114,207,66,.6); }
.step-title { color: #b6d149; text-shadow: 0 0 10px rgba(114,207,66,.3), 0 2px 6px rgba(0,0,0,.9); }
.code-box { border-color: rgba(114,207,66,.35); }
.code-box code { color: #d8dcd2; }
.how_to_play .copy-btn { background: var(--iron-button); color: #b6d149; border-color: rgba(114,207,66,.35); }
.how_to_play .copy-btn:hover { filter: brightness(1.2); }
.cta-panel {
    background: linear-gradient(180deg, rgba(8,12,10,.72), rgba(5,8,6,.9)), url(/img/legion/fel-panel.jpg) center / cover;
    border-color: rgba(114,207,66,.3);
}

/* ---------- 15. Footer (footer.php <style> is inside <body>: `body` prefix) ---------- */
body footer.wow-footer {
    background: linear-gradient(180deg, rgba(5,6,3,.96) 0%, rgba(11,15,11,.98) 100%);
    border-top: 1px solid rgba(114,207,66,.3);
    box-shadow: 0 -1px 14px rgba(114,207,66,.15), 0 -8px 24px rgba(0,0,0,.6);
}
/* the fel rune bar sits on the footer's top edge */
body footer.wow-footer::before {
    top: -25px;
    width: min(560px, 92%);
    height: 40px;
    background: url(/img/legion/fel-header.webp) center top / 100% auto no-repeat;
    box-shadow: none;
    pointer-events: none;
}
body footer.wow-footer h4 { text-shadow: 0 0 8px rgba(114,207,66,.35) !important; }
body .footer-nav-link:hover { text-shadow: 0 0 8px rgba(114,207,66,.45); }
body .social-icon-btn { border-color: rgba(114,207,66,.22); }
body .social-icon-btn:hover {
    background: linear-gradient(180deg, rgba(114,207,66,.25), rgba(114,207,66,.06));
    text-shadow: 0 0 10px rgba(114,207,66,.6);
}
body .social-icon-btn:hover img { filter: brightness(0) invert(72%) sepia(60%) saturate(520%) hue-rotate(50deg); }
body #backToTop {
    background: var(--fel-button);
    color: #0b0f0b;
    box-shadow: 0 8px 20px rgba(0,0,0,.6), inset 0 0 0 1px rgba(248,244,170,.35);
}
body #backToTop:hover {
    filter: brightness(1.12);
    box-shadow: 0 12px 24px rgba(114,207,66,.35), inset 0 0 0 1px rgba(248,244,170,.6);
}

/* ---------- 16. Realm status card (realm_status.php <style> is inside <body>) ---------- */
body .realm-card::before { border-color: rgba(114,207,66,.1); }
body .realm-card::after {
    background:
        linear-gradient(#72cf42,#72cf42) left top / 8px 1px no-repeat,
        linear-gradient(#72cf42,#72cf42) left top / 1px 8px no-repeat,
        linear-gradient(#72cf42,#72cf42) right top / 8px 1px no-repeat,
        linear-gradient(#72cf42,#72cf42) right top / 1px 8px no-repeat,
        linear-gradient(#72cf42,#72cf42) left bottom / 8px 1px no-repeat,
        linear-gradient(#72cf42,#72cf42) left bottom / 1px 8px no-repeat,
        linear-gradient(#72cf42,#72cf42) right bottom / 8px 1px no-repeat,
        linear-gradient(#72cf42,#72cf42) right bottom / 1px 8px no-repeat;
}
body .realm-card:hover { filter: drop-shadow(0 0 10px rgba(114,207,66,.22)); }
body .glow-gold { text-shadow: 0 0 10px rgba(114,207,66,.3), 0 1px 2px rgba(0,0,0,.9); }
body .glow-gold-strong { text-shadow: 0 0 12px rgba(114,207,66,.7), 0 2px 4px rgba(0,0,0,.9); }
body .copy-btn.copied { color: #72cf42; }
body .copy-btn.copied .copy-bg { background: rgba(114,207,66,.12); border-color: rgba(114,207,66,.5); }
body .uptime-divider { background: linear-gradient(90deg, transparent, rgba(114,207,66,.35), transparent); }

/* item_tooltip.php (shop tooltips) */
body .tooltip-container { border-color: rgba(114,207,66,.3); }

/* ---------- 17. Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .legion-hero-logo { animation: none; }
}

/* ---------- 18. Tailwind gold (and navy panel) utilities, recoloured ----------
   The second @layer block is generated from assets/css/tailwind.css by
   gen_tw_fel.py: every utility using the old gold (#f2cf5b, #c9a227, #8a6a14,
   #f6d478, #fff7d6, #e8c552, #d4b040, rgba(201,162,39,x), rgba(242,207,82,x),
   rgba(160,130,x,x)) or navy panel colours (#0a0e16, rgba(10,14,22,x), ...),
   same selectors, fel colours. Includes the classes shop.php's JS toggles on
   .category-button. Re-run it if tailwind.css is ever rebuilt. */
@layer utilities {
    @media (hover: hover) {
        .hover\:text-yellow-300:hover { color: #b6d149; }
    }
}
@layer utilities {
    :where(.divide-\[rgba\(201\,162\,39\,0\.05\)\] > :not(:last-child)) {
        border-color: rgba(114,207,66,0.05);
    }
    .border-\[\#c9a227\] {
        border-color: #4d7f2c;
    }
    .border-\[\#c9a227\]\/20 {
        border-color: color-mix(in oklab, #4d7f2c 20%, transparent);
    }
    .border-\[\#c9a227\]\/22 {
        border-color: color-mix(in oklab, #4d7f2c 22%, transparent);
    }
    .border-\[\#c9a227\]\/30 {
        border-color: color-mix(in oklab, #4d7f2c 30%, transparent);
    }
    .border-\[\#c9a227\]\/\[0\.22\] {
        border-color: color-mix(in oklab, #4d7f2c 22%, transparent);
    }
    .border-\[\#f2cf5b\] {
        border-color: #72cf42;
    }
    .border-\[\#f2cf5b\]\/10 {
        border-color: color-mix(in oklab, #72cf42 10%, transparent);
    }
    .border-\[\#f2cf5b\]\/20 {
        border-color: color-mix(in oklab, #72cf42 20%, transparent);
    }
    .border-\[rgba\(160\,130\,60\,0\.3\)\] {
        border-color: rgba(37,65,30,0.3);
    }
    .border-\[rgba\(201\,162\,39\,\.1\)\] {
        border-color: rgba(114,207,66,.1);
    }
    .border-\[rgba\(201\,162\,39\,\.2\)\] {
        border-color: rgba(114,207,66,.2);
    }
    .border-\[rgba\(201\,162\,39\,\.3\)\] {
        border-color: rgba(114,207,66,.3);
    }
    .border-\[rgba\(201\,162\,39\,\.12\)\] {
        border-color: rgba(114,207,66,.12);
    }
    .border-\[rgba\(201\,162\,39\,\.15\)\] {
        border-color: rgba(114,207,66,.15);
    }
    .border-\[rgba\(201\,162\,39\,\.16\)\] {
        border-color: rgba(114,207,66,.16);
    }
    .border-\[rgba\(201\,162\,39\,\.22\)\] {
        border-color: rgba(114,207,66,.22);
    }
    .border-\[rgba\(201\,162\,39\,0\.1\)\] {
        border-color: rgba(114,207,66,0.1);
    }
    .border-\[rgba\(201\,162\,39\,0\.2\)\] {
        border-color: rgba(114,207,66,0.2);
    }
    .border-\[rgba\(201\,162\,39\,0\.3\)\] {
        border-color: rgba(114,207,66,0.3);
    }
    .border-\[rgba\(201\,162\,39\,0\.4\)\] {
        border-color: rgba(114,207,66,0.4);
    }
    .border-\[rgba\(201\,162\,39\,0\.05\)\] {
        border-color: rgba(114,207,66,0.05);
    }
    .border-\[rgba\(201\,162\,39\,0\.08\)\] {
        border-color: rgba(114,207,66,0.08);
    }
    .border-\[rgba\(201\,162\,39\,0\.12\)\] {
        border-color: rgba(114,207,66,0.12);
    }
    .border-\[rgba\(201\,162\,39\,0\.14\)\] {
        border-color: rgba(114,207,66,0.14);
    }
    .border-\[rgba\(201\,162\,39\,0\.15\)\] {
        border-color: rgba(114,207,66,0.15);
    }
    .border-\[rgba\(201\,162\,39\,0\.18\)\] {
        border-color: rgba(114,207,66,0.18);
    }
    .border-\[rgba\(201\,162\,39\,0\.22\)\] {
        border-color: rgba(114,207,66,0.22);
    }
    .border-\[rgba\(242\,207\,82\,\.25\)\] {
        border-color: rgba(114,207,66,.25);
    }
    .border-b-\[\#f2cf5b\] {
        border-bottom-color: #72cf42;
    }
    .bg-\[\#0a0e16\]\/50 {
        background-color: color-mix(in oklab, #0b0f0b 50%, transparent);
    }
    .bg-\[\#0a0e16\]\/80 {
        background-color: color-mix(in oklab, #0b0f0b 80%, transparent);
    }
    .bg-\[\#0a0e16\]\/90 {
        background-color: color-mix(in oklab, #0b0f0b 90%, transparent);
    }
    .bg-\[\#0a0e16\]\/95 {
        background-color: color-mix(in oklab, #0b0f0b 95%, transparent);
    }
    .bg-\[\#c9a227\]\/10 {
        background-color: color-mix(in oklab, #4d7f2c 10%, transparent);
    }
    .bg-\[\#f2cf5b\] {
        background-color: #72cf42;
    }
    .bg-\[\#f2cf5b\]\/10 {
        background-color: color-mix(in oklab, #72cf42 10%, transparent);
    }
    .bg-\[rgba\(5\,7\,11\,0\.85\)\] {
        background-color: rgba(5,8,6,0.85);
    }
    .bg-\[rgba\(5\,7\,11\,0\.95\)\] {
        background-color: rgba(5,8,6,0.95);
    }
    .bg-\[rgba\(10\,14\,22\,0\.4\)\] {
        background-color: rgba(8,12,10,0.4);
    }
    .bg-\[rgba\(10\,14\,22\,0\.6\)\] {
        background-color: rgba(8,12,10,0.6);
    }
    .bg-\[rgba\(10\,14\,22\,0\.8\)\] {
        background-color: rgba(8,12,10,0.8);
    }
    .bg-\[rgba\(10\,14\,22\,0\.75\)\] {
        background-color: rgba(8,12,10,0.75);
    }
    .bg-\[rgba\(201\,162\,39\,\.1\)\] {
        background-color: rgba(114,207,66,.1);
    }
    .bg-\[rgba\(201\,162\,39\,0\.1\)\] {
        background-color: rgba(114,207,66,0.1);
    }
    .bg-\[rgba\(201\,162\,39\,0\.05\)\] {
        background-color: rgba(114,207,66,0.05);
    }
    .bg-\[rgba\(201\,162\,39\,0\.15\)\] {
        background-color: rgba(114,207,66,0.15);
    }
    .bg-\[rgba\(242\,207\,82\,\.08\)\] {
        background-color: rgba(114,207,66,.08);
    }
    .bg-\[rgba\(242\,207\,82\,0\.1\)\] {
        background-color: rgba(114,207,66,0.1);
    }
    .bg-\[rgba\(242\,207\,82\,0\.2\)\] {
        background-color: rgba(114,207,66,0.2);
    }
    .bg-\[rgba\(242\,207\,82\,0\.08\)\] {
        background-color: rgba(114,207,66,0.08);
    }
    .bg-\[rgba\(242\,207\,82\,0\.15\)\] {
        background-color: rgba(114,207,66,0.15);
    }
    .bg-\[linear-gradient\(180deg\,\#fff7d6_0\%\,\#f2cf5b_35\%\,\#c9a227_62\%\,\#8a6a14_100\%\)\] {
        background-image: linear-gradient(180deg,#f8f4aa 0%,#72cf42 35%,#4d7f2c 62%,#25411e 100%);
    }
    .from-\[\#0a0e16\] {
        --tw-gradient-from: #0b0f0b;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .from-\[\#161920\]\/92 {
        --tw-gradient-from: color-mix(in oklab, #151a16 92%, transparent);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .from-\[\#f2cf5b\] {
        --tw-gradient-from: #72cf42;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .from-\[\#f6d478\] {
        --tw-gradient-from: #b6d149;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .from-\[\#fff7d6\] {
        --tw-gradient-from: #f8f4aa;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .from-\[rgba\(18\,21\,28\,\.82\)\] {
        --tw-gradient-from: rgba(16,22,18,.82);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .from-\[rgba\(201\,162\,39\,\.12\)\] {
        --tw-gradient-from: rgba(114,207,66,.12);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .from-\[rgba\(201\,162\,39\,0\.9\)\] {
        --tw-gradient-from: rgba(114,207,66,0.9);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .from-\[rgba\(201\,162\,39\,0\.15\)\] {
        --tw-gradient-from: rgba(114,207,66,0.15);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .from-\[rgba\(242\,207\,82\,0\.3\)\] {
        --tw-gradient-from: rgba(114,207,66,0.3);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .via-\[\#c9a227\] {
        --tw-gradient-via: #4d7f2c;
        --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops);
    }
    .via-\[\#f2cf5b\] {
        --tw-gradient-via: #72cf42;
        --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops);
    }
    .via-\[\#f6d478\] {
        --tw-gradient-via: #b6d149;
        --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops);
    }
    .via-\[rgba\(201\,162\,39\,\.4\)\] {
        --tw-gradient-via: rgba(114,207,66,.4);
        --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops);
    }
    .to-\[\#8a6a14\] {
        --tw-gradient-to: #25411e;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .to-\[\#c9a227\] {
        --tw-gradient-to: #4d7f2c;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .to-\[rgba\(6\,8\,12\,\.85\)\] {
        --tw-gradient-to: rgba(5,8,6,.85);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .to-\[rgba\(160\,130\,30\,0\.9\)\] {
        --tw-gradient-to: rgba(37,65,30,0.9);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .to-\[rgba\(201\,162\,39\,\.04\)\] {
        --tw-gradient-to: rgba(114,207,66,.04);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .to-\[rgba\(201\,162\,39\,0\.2\)\] {
        --tw-gradient-to: rgba(114,207,66,0.2);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .to-\[rgba\(201\,162\,39\,0\.04\)\] {
        --tw-gradient-to: rgba(114,207,66,0.04);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .text-\[\#c9a227\] {
        color: #72cf42;
    }
    .text-\[\#c9a227\]\/40 {
        color: color-mix(in oklab, #72cf42 40%, transparent);
    }
    .text-\[\#f2cf5b\] {
        color: #72cf42;
    }
    .text-\[\#f2cf5b\]\/30 {
        color: color-mix(in oklab, #72cf42 30%, transparent);
    }
    .text-\[rgba\(201\,162\,39\,\.6\)\] {
        color: rgba(114,207,66,.6);
    }
    .text-\[rgba\(201\,162\,39\,0\.3\)\] {
        color: rgba(114,207,66,0.3);
    }
    .text-\[rgba\(201\,162\,39\,0\.4\)\] {
        color: rgba(114,207,66,0.4);
    }
    .text-\[rgba\(201\,162\,39\,0\.5\)\] {
        color: rgba(114,207,66,0.5);
    }
    .text-\[rgba\(242\,207\,82\,0\.5\)\] {
        color: rgba(114,207,66,0.5);
    }
    .text-\[rgba\(242\,207\,82\,0\.6\)\] {
        color: rgba(114,207,66,0.6);
    }
    .accent-\[\#c9a227\] {
        accent-color: #4d7f2c;
    }
    .shadow-\[0_0_20px_rgba\(242\,207\,82\,0\.25\)\] {
        --tw-shadow: 0 0 20px var(--tw-shadow-color, rgba(114,207,66,0.25));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    .shadow-\[inset_0_-2px_20px_rgba\(201\,162\,39\,0\.05\)\] {
        --tw-shadow: inset 0 -2px 20px var(--tw-shadow-color, rgba(114,207,66,0.05));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    .shadow-\[rgba\(242\,207\,82\,0\.3\)\] {
        --tw-shadow-color: rgba(114,207,66,0.3);
        @supports (color: color-mix(in lab, red, red)) {
            --tw-shadow-color: color-mix(in oklab, rgba(114,207,66,0.3) var(--tw-shadow-alpha), transparent);
        }
    }
    .drop-shadow-\[0_0_8px_rgba\(242\,207\,82\,\.5\)\] {
        --tw-drop-shadow-size: drop-shadow(0 0 8px var(--tw-drop-shadow-color, rgba(114,207,66,.5)));
        --tw-drop-shadow: var(--tw-drop-shadow-size);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }
    .drop-shadow-\[0_0_12px_rgba\(201\,162\,39\,\.15\)\,0_2px_4px_rgba\(0\,0\,0\,\.8\)\] {
        --tw-drop-shadow-size: drop-shadow(0 0 12px var(--tw-drop-shadow-color, rgba(114,207,66,.15))) drop-shadow(0 2px 4px var(--tw-drop-shadow-color, rgba(0,0,0,.8)));
        --tw-drop-shadow: var(--tw-drop-shadow-size);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }
    .drop-shadow-\[0_0_12px_rgba\(201\,162\,39\,\.35\)\,0_2px_4px_rgba\(0\,0\,0\,\.8\)\] {
        --tw-drop-shadow-size: drop-shadow(0 0 12px var(--tw-drop-shadow-color, rgba(114,207,66,.35))) drop-shadow(0 2px 4px var(--tw-drop-shadow-color, rgba(0,0,0,.8)));
        --tw-drop-shadow: var(--tw-drop-shadow-size);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }
    .drop-shadow-\[0_0_20px_rgba\(242\,207\,82\,0\.2\)\] {
        --tw-drop-shadow-size: drop-shadow(0 0 20px var(--tw-drop-shadow-color, rgba(114,207,66,0.2)));
        --tw-drop-shadow: var(--tw-drop-shadow-size);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }
    .\[filter\:drop-shadow\(0_0_6px_rgba\(242\,207\,82\,0\.4\)\)\] {
        filter: drop-shadow(0 0 6px rgba(114,207,66,0.4));
    }
    .\[text-shadow\:0_0_12px_rgba\(242\,207\,82\,0\.3\)\] {
        text-shadow: 0 0 12px rgba(114,207,66,0.3);
    }
    @media (hover: hover) {
        .group-hover\:border-\[rgba\(242\,207\,82\,\.3\)\]:is(:where(.group):hover *) {
            border-color: rgba(114,207,66,.3);
        }
        .group-hover\:text-\[\#f2cf5b\]:is(:where(.group):hover *) {
            color: #72cf42;
        }
    }
    @media (hover: hover) {
        .hover\:border-\[\#c9a227\]\/40:hover {
            border-color: color-mix(in oklab, #4d7f2c 40%, transparent);
        }
        .hover\:border-\[\#f2cf5b\]:hover {
            border-color: #72cf42;
        }
        .hover\:border-\[\#f6d478\]:hover {
            border-color: #b6d149;
        }
        .hover\:border-\[rgba\(201\,162\,39\,\.4\)\]:hover {
            border-color: rgba(114,207,66,.4);
        }
        .hover\:border-\[rgba\(201\,162\,39\,0\.6\)\]:hover {
            border-color: rgba(114,207,66,0.6);
        }
        .hover\:border-\[rgba\(242\,207\,82\,\.55\)\]:hover {
            border-color: rgba(114,207,66,.55);
        }
        .hover\:border-b-\[rgba\(201\,162\,39\,0\.3\)\]:hover {
            border-bottom-color: rgba(114,207,66,0.3);
        }
        .hover\:bg-\[\#0f141e\]\/70:hover {
            background-color: color-mix(in oklab, #0e140f 70%, transparent);
        }
        .hover\:bg-\[rgba\(201\,162\,39\,\.08\)\]:hover {
            background-color: rgba(114,207,66,.08);
        }
        .hover\:bg-\[rgba\(201\,162\,39\,\.15\)\]:hover {
            background-color: rgba(114,207,66,.15);
        }
        .hover\:bg-\[rgba\(201\,162\,39\,0\.05\)\]:hover {
            background-color: rgba(114,207,66,0.05);
        }
        .hover\:bg-\[rgba\(201\,162\,39\,0\.08\)\]:hover {
            background-color: rgba(114,207,66,0.08);
        }
        .hover\:bg-\[rgba\(201\,162\,39\,0\.15\)\]:hover {
            background-color: rgba(114,207,66,0.15);
        }
        .hover\:bg-\[rgba\(242\,207\,82\,0\.1\)\]:hover {
            background-color: rgba(114,207,66,0.1);
        }
        .hover\:bg-\[rgba\(242\,207\,82\,0\.05\)\]:hover {
            background-color: rgba(114,207,66,0.05);
        }
        .hover\:bg-\[rgba\(242\,207\,82\,0\.15\)\]:hover {
            background-color: rgba(114,207,66,0.15);
        }
        .hover\:bg-\[rgba\(242\,207\,82\,0\.25\)\]:hover {
            background-color: rgba(114,207,66,0.25);
        }
        .hover\:from-\[\#f6d478\]:hover {
            --tw-gradient-from: #b6d149;
            --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
        }
        .hover\:via-\[\#f2cf5b\]:hover {
            --tw-gradient-via: #72cf42;
            --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
            --tw-gradient-stops: var(--tw-gradient-via-stops);
        }
        .hover\:to-\[\#d4b040\]:hover {
            --tw-gradient-to: #72cf42;
            --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
        }
        .hover\:text-\[\#f2cf5b\]:hover {
            color: #72cf42;
        }
        .hover\:shadow-\[0_0_15px_rgba\(201\,162\,39\,\.2\)\]:hover {
            --tw-shadow: 0 0 15px var(--tw-shadow-color, rgba(114,207,66,.2));
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
        .hover\:shadow-\[0_0_20px_rgba\(201\,162\,39\,\.2\)\]:hover {
            --tw-shadow: 0 0 20px var(--tw-shadow-color, rgba(114,207,66,.2));
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
        .hover\:shadow-\[0_0_20px_rgba\(242\,207\,82\,0\.1\)\]:hover {
            --tw-shadow: 0 0 20px var(--tw-shadow-color, rgba(114,207,66,0.1));
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
        .hover\:shadow-\[0_0_20px_rgba\(242\,207\,82\,0\.15\)\]:hover {
            --tw-shadow: 0 0 20px var(--tw-shadow-color, rgba(114,207,66,0.15));
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
        .hover\:shadow-\[0_0_30px_rgba\(242\,207\,82\,0\.3\)\]:hover {
            --tw-shadow: 0 0 30px var(--tw-shadow-color, rgba(114,207,66,0.3));
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
        .hover\:shadow-\[0_0_40px_rgba\(242\,207\,82\,0\.4\)\]:hover {
            --tw-shadow: 0 0 40px var(--tw-shadow-color, rgba(114,207,66,0.4));
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
        .hover\:drop-shadow-\[0_0_12px_rgba\(242\,207\,82\,0\.5\)\]:hover {
            --tw-drop-shadow-size: drop-shadow(0 0 12px var(--tw-drop-shadow-color, rgba(114,207,66,0.5)));
            --tw-drop-shadow: var(--tw-drop-shadow-size);
            filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
        }
    }
    .focus\:border-\[\#f2cf5b\]:focus {
        border-color: #72cf42;
    }
    .focus\:bg-\[\#0f141e\]\/90:focus {
        background-color: color-mix(in oklab, #0e140f 90%, transparent);
    }
    .focus\:shadow-\[0_0_10px_rgba\(242\,207\,82\,\.2\)\]:focus {
        --tw-shadow: 0 0 10px var(--tw-shadow-color, rgba(114,207,66,.2));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    .focus\:shadow-\[0_0_15px_rgba\(242\,207\,82\,0\.2\)\]:focus {
        --tw-shadow: 0 0 15px var(--tw-shadow-color, rgba(114,207,66,0.2));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    @media (width < 48rem) {
        .max-md\:border-\[rgba\(201\,162\,39\,0\.1\)\] {
            border-color: rgba(114,207,66,0.1);
        }
        .max-md\:border-b-\[rgba\(201\,162\,39\,0\.1\)\] {
            border-bottom-color: rgba(114,207,66,0.1);
        }
        .max-md\:border-l-\[\#f2cf5b\] {
            border-left-color: #72cf42;
        }
    }
    .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-\[rgba\(201\,162\,39\,0\.3\)\]::-webkit-scrollbar-thumb {
        background-color: rgba(114,207,66,0.3);
    }
    .\[\&\:\:-webkit-scrollbar-thumb\:hover\]\:bg-\[rgba\(201\,162\,39\,0\.5\)\]::-webkit-scrollbar-thumb:hover {
        background-color: rgba(114,207,66,0.5);
    }
}
